feat:modify the zorder update logic (goplus#125)

* feat:remove the store use of Backdrop class

* feat:zorder update when sprite's add/remove

* feat:stage viewer component adapt zorder item type

* chore:add TODO of zorder update dependent on project's change

spx-gui/src/class/backdrop.ts

@@ -121,7 +121,7 @@ export class Backdrop extends AssetBase {
                 "name": file.name.split(".")[0],
                 "path": file.name
             })),
-            "zorder": useProjectStore().project?.sprite.list.map(sprite => sprite.name) || [],
+            "zorder": [],
         }
     }
 

spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue

@@ -2,7 +2,7 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-02-05 14:18:34
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-23 18:31:46
+ * @LastEditTime: 2024-02-28 15:25:10
  * @FilePath: \spx-gui\src\components\stage-viewer-demo\StageViewerDemo.vue
  * @Description:
 -->
@@ -200,9 +200,9 @@ const backdropConfig = computed(() => {
   }
 })
 
-// get the zorder list
-const zorderList = computed(() => {
-  return project.value.backdrop.config.zorder
+// get the zorder list of sprite
+const zorderList = computed<Array<string>>(() => {
+  return project.value.backdrop.config.zorder.filter((item) => typeof item === 'string') as Array<string>
 })
 
 const onSelectedSpritesChange = (e: SelectedSpritesChangeEvent) => {

spx-gui/src/components/stage-viewer/SpriteLayer.vue

@@ -2,7 +2,7 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-25 16:13:37
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-23 12:05:48
+ * @LastEditTime: 2024-02-28 15:27:06
  * @FilePath: \spx-gui\src\components\stage-viewer\SpriteLayer.vue
  * @Description: 
 -->
@@ -38,7 +38,7 @@ const props = defineProps<{
   offsetConfig: { offsetX: number; offsetY: number }
   mapConfig: MapConfig
   spriteList: SpriteConfig[]
-  zorder: string[]
+  zorder: Array<string | Object>
   selectedSpriteNames: string[]
 }>()
 const emits = defineEmits<{
@@ -52,9 +52,10 @@ const sortedSprites = computed(() => {
     spriteMap.set(sprite.name, sprite)
   })
   const list: SpriteConfig[] = []
-  props.zorder.forEach((name) => {
-    if (spriteMap.has(name)) {
-      list.push(spriteMap.get(name) as SpriteConfig)
+  // temporarily only sprite item  can be rendered on stage
+  props.zorder.forEach((item) => {
+    if (typeof item === 'string' && spriteMap.has(item)) {
+      list.push(spriteMap.get(item) as SpriteConfig)
     }
   })
   console.log(props.zorder)

spx-gui/src/interface/file.ts

@@ -2,8 +2,8 @@
  * @Author: TuGitee [email protected]
  * @Date: 2024-01-24 21:42:28
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-19 09:05:07
- * @FilePath: /spx-gui/src/interface/file.ts
+ * @LastEditTime: 2024-02-28 14:40:11
+ * @FilePath: \spx-gui\src\interface\file.ts
  * @Description: The interface of file.
  */
 
@@ -167,9 +167,13 @@ export interface BackdropConfig extends Config {
     scenes?: Scene[];
 
     /**
-     * The sprite zorder in the stage, the later Sprite will be above the previous Sprite, which means that the later Sprite will override the previous Sprite.
+     * This configuration specifies the order in which the specified objects are rendered on the stage
+     * The later Sprite will be above the previous Sprite, which means that the later Sprite will override the previous Sprite.
+     * The string item specifies the corresponding Sprite name
+     * The Object item specifies the coresponding like 'stageMonitor' 
+     * TODO: add the type of the like 'stageMonitor' 
      */
-    zorder: string[];
+    zorder: Array<string|Object>;
 
     /**
      * The costume of the backdrop

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

@@ -1,14 +1,13 @@
 /*
  * @Author: Xu Ning
  * @Date: 2024-02-05 17:08:23
- * @LastEditors: xuning [email protected]
- * @LastEditTime: 2024-02-06 12:34:43
- * @FilePath: /spx-gui/src/store/modules/backdrop/index.ts
+ * @LastEditors: Zhang Zhi Yang
+ * @LastEditTime: 2024-02-28 14:41:33
+ * @FilePath: \spx-gui\src\store\modules\backdrop\index.ts
  * @Description:
  */
 import { defineStore, storeToRefs } from 'pinia'
 import { computed } from 'vue'
-import { useSpriteStore } from '../sprite'
 import { Backdrop } from '@/class/backdrop'
 import { useProjectStore } from '../index'
 export const useBackdropStore = defineStore('backdrop', () => {
@@ -31,24 +30,13 @@ export const useBackdropStore = defineStore('backdrop', () => {
    * Set the zorder of the backdrop.
    * @param zOrder
    */
-  function setZOrder(zOrder: string[] = genZOrder()) {
+  function setZOrder(zOrder: Array<string | Object>) {
     backdrop.value.config.zorder = zOrder
   }
 
-  /**
-   * Generate the zorder of the Sprite in the stage.
-   * The later Sprite will be above the previous Sprite, which means that the later Sprite will override the previous Sprite.
-   */
-  function genZOrder() {
-    const spriteStore = useSpriteStore()
-    const { list: sprites } = spriteStore
-    return sprites.map((sprite) => sprite.name)
-  }
-
   return {
     backdrop,
     setItem,
-    setZOrder,
-    genZOrder
+    setZOrder
   }
 })

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

@@ -1,9 +1,9 @@
 /*
  * @Author: TuGitee [email protected]
  * @Date: 2024-01-22 11:26:18
- * @LastEditors: Xu Ning
- * @LastEditTime: 2024-02-05 17:32:55
- * @FilePath: /spx-gui/src/store/modules/project/index.ts
+ * @LastEditors: Zhang Zhi Yang
+ * @LastEditTime: 2024-02-28 13:54:41
+ * @FilePath: \spx-gui\src\store\modules\project\index.ts
  * @Description: The store of project.
  */
 

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

@@ -1,44 +1,57 @@
+/*
+ * @Author: Zhang Zhi Yang
+ * @Date: 2024-02-07 21:43:44
+ * @LastEditors: Zhang Zhi Yang
+ * @LastEditTime: 2024-02-28 16:52:14
+ * @FilePath: \spx-gui\src\store\modules\sprite\index.ts
+ * @Description:
+ */
 import { defineStore, storeToRefs } from 'pinia'
 import { Sprite } from '@/class/sprite'
 import { computed, ref } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import { useProjectStore } from '../index'
-export const useSpriteStore = defineStore("sprite", () => {
-    const projectStore = useProjectStore();
-    const { project } = storeToRefs(projectStore);
+export const useSpriteStore = defineStore('sprite', () => {
+  const projectStore = useProjectStore()
+  const { project } = storeToRefs(projectStore)
 
-    const current: Ref<Sprite | null> = ref(null)
+  const current: Ref<Sprite | null> = ref(null)
 
-    const list: ComputedRef<Sprite[]> = computed(() => {
-        return project.value.sprite.list as Sprite[]
-    })
+  const list: ComputedRef<Sprite[]> = computed(() => {
+    return project.value.sprite.list as Sprite[]
+  })
 
-    const map = computed(() => new Map(list.value.map(item => [item.name, item])))
+  const map = computed(() => new Map(list.value.map((item) => [item.name, item])))
 
-    function addItem(item: Sprite){
-        project.value.sprite.add(item)
-    }
+  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) {
-        if (map.value.has(name)) {
-            current.value = map.value.get(name) || null
-        }
+  function setCurrentByName(name: string) {
+    if (map.value.has(name)) {
+      current.value = map.value.get(name) || null
     }
+  }
 
-    function removeItemByName(name: string) {
-        const sprite = map.value.get(name)
-        if (sprite) {
-            if (current.value === sprite) {
-                current.value = list.value[0] || null
-            }
-            project.value.sprite.remove(sprite)
-        }
+  function removeItemByName(name: string) {
+    const sprite = map.value.get(name)
+    if (sprite) {
+      if (current.value === 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)
     }
+  }
 
-    return {
-        list, current,
-        addItem,
-        setCurrentByName,
-        removeItemByName
-    }
-})
+  return {
+    list,
+    current,
+    addItem,
+    setCurrentByName,
+    removeItemByName
+  }
+})