feat: add default sprite in default project (goplus#151)

* feat:add default sprite in default project

* feat:add 'Update zorder when editing sprite list' logic to SpriteList

* docs:add comment of costume position

* fix:modify the use of removing and adding spriteList

spx-gui/src/class/asset-list.ts

@@ -1,7 +1,7 @@
 import { AssetBase } from "./asset-base";
 import { Sound } from "./sound";
 import { Sprite } from "./sprite";
-
+import type { Project } from "./project";
 export abstract class AssetList<T extends AssetBase> {
     public list: T[] = [];
 
@@ -22,6 +22,29 @@ export abstract class AssetList<T extends AssetBase> {
     }
 }
 
-export class SpriteList extends AssetList<Sprite> { }
+export class SpriteList extends AssetList<Sprite> {
+  project: Project
+
+  constructor(project: Project) {
+    super()
+    this.project = project
+  }
+  add(...sprites: Sprite[]): void {
+    super.add(...sprites)
+    sprites.forEach((sprite) => {
+      this.project.backdrop.config.zorder.push(sprite.name)
+    })
+  }
+  remove(sprite: Sprite | string): Sprite | null {
+    const removeSprite = typeof sprite === 'string' ? super.remove(sprite) : super.remove(sprite)
+    if (removeSprite) {
+      const index = this.project.backdrop.config.zorder.indexOf(removeSprite)
+      if (index !== -1) {
+        this.project.backdrop.config.zorder.splice(index, 1)
+      }
+    }
+    return removeSprite
+  }
+}
 
 export class SoundList extends AssetList<Sound> { }

spx-gui/src/class/project.ts

@@ -16,7 +16,8 @@ import { Sprite } from './sprite'
 import { Sound } from './sound'
 import type { Config } from '@/interface/file'
 import FileWithUrl from '@/class/file-with-url'
-import defaultScene from '@/assets/image/default_scene.png'
+import defaultSceneImage from '@/assets/image/default_scene.png'
+import defaultSpriteImage from '@/assets/image/default_sprite.png'
 export enum ProjectSource {
   local,
   cloud
@@ -133,9 +134,10 @@ export class Project implements ProjectDetail, ProjectSummary {
 
   constructor() {
     this.name = ''
-    this.sprite = new SpriteList()
     this.sound = new SoundList()
     this.backdrop = new Backdrop()
+    this.sprite = new SpriteList(this)
+    this.sound = new SoundList()
     this.entryCode = ''
     this.unidentifiedFile = {}
     this._temporaryId = Project.TEMPORARY_ID_PREFIX + nanoid()
@@ -246,12 +248,20 @@ export class Project implements ProjectDetail, ProjectSummary {
 
   async loadBlankProject() {
     this.name = 'Untitled'
-    const response = await fetch(defaultScene)
-    const blob = await response.blob()
-    const file = new File([blob], 'default_scene.png', { type: blob.type })
+    const sceneBlob = await (await fetch(defaultSceneImage)).blob()
+    const spriteBlob = await (await fetch(defaultSpriteImage)).blob()
+    const sceneFile = new File([sceneBlob], 'default_scene.png', { type: sceneBlob.type })
+    const spriteFile = new File([spriteBlob], 'default_sprite.png', { type: spriteBlob.type })
     this.backdrop.addScene([
-      { name: 'default_scene', file: new FileWithUrl(file, URL.createObjectURL(file)) }
+      { name: 'default_scene', file: new FileWithUrl(sceneFile, URL.createObjectURL(sceneFile)) }
     ])
+    const defaultSprite = new Sprite('default_sprite', [spriteFile])
+    defaultSprite.config.size = 1
+    // The size of the costume is 110 * 100, so setting the center point of the image to half of its height and width
+    // can make the costume of sprite render at the center point of the stage.
+    defaultSprite.config.costumes[0].x=55
+    defaultSprite.config.costumes[0].y=50
+    this.sprite.add(defaultSprite)
   }
 
 

spx-gui/src/store/modules/sprite/index.ts

@@ -2,8 +2,8 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-02-07 21:43:44
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-03-04 14:22:36
- * @FilePath: \builder\spx-gui\src\store\modules\sprite\index.ts
+ * @LastEditTime: 2024-03-07 11:05:21
+ * @FilePath: \spx-gui\src\store\modules\sprite\index.ts
  * @Description:
  */
 import { defineStore, storeToRefs } from 'pinia'
@@ -26,14 +26,13 @@ export const useSpriteStore = defineStore('sprite', () => {
   watch(
     () => project.value,
     () => {
-      console.log("current clear")
+      console.log('current clear')
       current.value = null
     }
   )
+
   function addItem(item: Sprite) {
     project.value.sprite.add(item)
-    // TODO: consider the zorder update  dependent on the addition and removal of sprite in project instance instead operate in sprite store's add/remove function
-    project.value.backdrop.config.zorder.push(item.name)
   }
 
   function setCurrentByName(name: string) {
@@ -49,11 +48,6 @@ export const useSpriteStore = defineStore('sprite', () => {
         current.value = list.value[0] || null
       }
       project.value.sprite.remove(sprite)
-      // TODO: consider the zorder update  dependent on the addition and removal of sprite in project instance instead operate in sprite store's add/remove function
-      project.value.backdrop.config.zorder.splice(
-        project.value.backdrop.config.zorder.indexOf(sprite.name),
-        1
-      )
     }
   }