feat(gui):complete zorder operate and export event of zorder change

luoliwoshang · Feb 20, 2024 · 98a094c · 98a094c
1 parent 2b46eac
commit 98a094c
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 36 deletions.
diff --git a/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue b/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-19 18:28:25
+ * @LastEditTime: 2024-02-20 14:41:02
  * @FilePath: /spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
  * @Description:
 -->
@@ -84,17 +84,17 @@
                 @update:value="(val) => { currentSprite && currentSprite.setCy(val as number) }"></n-input-number>
             <n-switch v-model:value="visible" @update:value="(val) => { currentSprite && currentSprite.setVisible(val) }" />
         </div>
-        <StageViewer @onSpritesDragEnd="onDragEnd" :currentSpriteNames="currentSpriteNames"
+        <StageViewer @onZorderChange="onZorderChange" @onSpritesDragEnd="onDragEnd" :currentSpriteNames="currentSpriteNames"
             :project="(project as Project)" />
     </div>
 </template>
 <script setup lang="ts">
 import { NInputNumber, NSwitch } from "naive-ui";
 import type { Sprite } from "@/class/sprite";
 import StageViewer from "../stage-viewer";
-import type { StageSprite, SpriteDragEndEvent, StageBackdrop } from "../stage-viewer"
+import type { StageSprite, SpriteDragEndEvent, StageBackdrop, ZorderChangeEvent } from "../stage-viewer"
 import { useProjectStore } from "@/store/modules/project";
-import type { Project } from "@/store/modules/project";
+import type { Project } from "@/class/project";
 import type { Scene } from "@/interface/file"
 
 import { storeToRefs } from "pinia";
@@ -103,7 +103,8 @@ import type { ComputedRef } from "vue";
 const projectStore = useProjectStore();
 const { project } = storeToRefs(projectStore);
 const add = async (e: any) => {
-    await projectStore.loadProject(e.target.files[0], e.target.files[0].name.split(".")[0]);
+    const file = e.target.files[0];
+    projectStore.loadFromZip(file);
 }
 const x = computed(() => currentSprite.value ? currentSprite.value.config.x : 0)
 const y = computed(() => currentSprite.value ? currentSprite.value.config.y : 0)
@@ -139,11 +140,17 @@ const onDragEnd = (e: SpriteDragEndEvent) => {
 const zorderList = computed(() => {
     return project.value.backdrop.config.zorder
 })
+
+// Accept the new zorder configuration
+const onZorderChange = (e: ZorderChangeEvent) => {
+    project.value.backdrop.config.zorder = e.zorder
+}
+
 // set zorder list
 const upLayer = (index: number) => {
-    const spriteToMove =  zorderList.value[index]; 
-    zorderList.value.splice(index, 1); 
-    zorderList.value.push(spriteToMove); 
+    const spriteToMove = zorderList.value[index];
+    zorderList.value.splice(index, 1);
+    zorderList.value.push(spriteToMove);
 }
 
 

diff --git a/spx-gui/src/components/stage-viewer/Costume.vue b/spx-gui/src/components/stage-viewer/Costume.vue
@@ -2,12 +2,13 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-25 14:19:57
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-20 11:21:32
+ * @LastEditTime: 2024-02-20 14:17:43
  * @FilePath: /spx-gui/src/components/stage-viewer/Costume.vue
  * @Description: 
 -->
 <template>
     <v-image @dragend="handleDragEnd" :config="{
+        spriteName:props.spriteConfig.name,
         image: image,
         draggable: true,
         x: spritePosition.x,

diff --git a/spx-gui/src/components/stage-viewer/SpriteLayer.vue b/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-20 10:39:18
+ * @LastEditTime: 2024-02-20 15:04:03
  * @FilePath: /spx-gui/src/components/stage-viewer/SpriteLayer.vue
  * @Description: 
 -->
@@ -12,11 +12,9 @@
         x: props.offsetConfig.offsetX,
         y: props.offsetConfig.offsetY
     }">
-        <template>
-            <template v-for="sprite in props.sprites">
-                <Sprite @onDragEnd="onSpriteDragEnd" v-if="isVisibleInStage(sprite)" :mapConfig="props.mapConfig"
-                    :key="sprite.name" :spriteConfig="sprite" />
-            </template>
+        <template v-for="sprite in props.sprites" :key="sprite.name">
+                <Sprite  @onDragEnd="onSpriteDragEnd" v-if="isVisibleInStage(sprite)" :mapConfig="props.mapConfig"
+                     :spriteConfig="sprite" />
         </template>
     </v-layer>
 </template>

diff --git a/spx-gui/src/components/stage-viewer/StageViewer.vue b/spx-gui/src/components/stage-viewer/StageViewer.vue
@@ -2,15 +2,17 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-02-05 14:09:40
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-20 11:24:18
+ * @LastEditTime: 2024-02-20 15:27:08
  * @FilePath: /spx-gui/src/components/stage-viewer/StageViewer.vue
  * @Description: 
 -->
 <template>
     <div id="stage-viewer">
-        <div id="menu" ref="menu">
-            <div @click="onSpriteMoveUp">up</div>
-            <div @click="onSpriteMoveDown">down</div>
+        <div id="menu" ref="menu" @mouseleave="onStageMenuMouseLeave">
+            <div @click="moveSprite('up')">up</div>
+            <div @click="moveSprite('down')">down</div>
+            <div @click="moveSprite('top')">top</div>
+            <div @click="moveSprite('bottom')">bottom</div>
         </div>
         <v-stage ref="stage" @contextmenu="onStageMenu" :config="{
             width: props.width,
@@ -108,7 +110,7 @@ const backdrop = computed(() => {
 // get backdrop's zorder
 const zorderList = computed(() => props.project.backdrop.config.zorder)
 
-
+// get sprites for stage sort by zorder
 const sprites: ComputedRef<StageSprite[]> = computed(() => {
     const spriteMap = new Map<string, StageSprite>();
     props.project.sprite.list.forEach(sprite => {
@@ -129,7 +131,7 @@ const sprites: ComputedRef<StageSprite[]> = computed(() => {
             }),
             costumeIndex: sprite.config.costumeIndex,
         };
-        spriteMap.set(sprite.name, stageSprite); 
+        spriteMap.set(sprite.name, stageSprite);
     });
     const list: StageSprite[] = []
     zorderList.value.forEach(name => {
@@ -172,22 +174,41 @@ const onStageMenu = (e: KonvaEventObject<MouseEvent>) => {
     menu.value.style.left =
         stageInstance.getPointerPosition().x + 4 + 'px';
 }
-// spirte move down
-const onSpriteMoveDown = () => {
-    console.log(currentSprite.value?.moveDown)
-    if (currentSprite.value) {
-        currentSprite.value.moveDown()
-        menu.value.style.display = "none"
-    }
+
+const onStageMenuMouseLeave = (e: MouseEvent) => {
+    menu.value.style.display = 'none';
+    currentSprite.value = null
 }
 
-// sprite move up
-const onSpriteMoveUp = () => {
-    if (currentSprite.value) {
-        currentSprite.value.moveUp()
-        menu.value.style.display = "none"
+// move sprite to up or down & emit  the new zorder list
+const moveSprite = (direction: 'up' | 'down' | 'top' | 'bottom') => {
+    if (!currentSprite.value) return;
+
+    const spriteName = currentSprite.value.getAttr('spriteName');
+    const currentIndex = zorderList.value.indexOf(spriteName);
+    let newIndex: number;
+    if (direction === 'up') {
+        newIndex = currentIndex + 1;
+    } else if (direction === 'down') {
+        newIndex = currentIndex - 1;
+    } else if (direction === 'top') {
+        newIndex = zorderList.value.length - 1;
+    } else if (direction === 'bottom') {
+        newIndex = 0;
+    } else {
+        return;
     }
-}
+
+    if (currentIndex >= 0 && newIndex >= 0 && newIndex < zorderList.value.length) {
+        const newZorderList = [...zorderList.value];
+        const [movedSprite] = newZorderList.splice(currentIndex, 1);
+        newZorderList.splice(newIndex, 0, movedSprite);
+        emits('onZorderChange', { zorder: newZorderList });
+    }
+
+    menu.value.style.display = 'none';
+};
+
 
 
 
@@ -218,6 +239,7 @@ const onSpritesDragEnd = (e: SpriteDragEndEvent) => {
     display: flex;
     justify-content: center;
     cursor: pointer;
+    padding: 4px;
 }
 
 #menu>div:hover {

diff --git a/spx-gui/src/components/stage-viewer/index.ts b/spx-gui/src/components/stage-viewer/index.ts
@@ -1,5 +1,6 @@
 import StageViewer from "./StageViewer.vue"
-import { Project } from "@/store"
+import type { Project } from "@/class/project";
+
 export default StageViewer
 /**
  * @description:  The Stage Position,Relative to the stage center
@@ -28,7 +29,7 @@ export interface StageSprite extends StagePosition {
     size: number
     costumes: StageCostume[]
     costumeIndex: number
-    visible: boolean 
+    visible: boolean
 }
 
 
@@ -95,6 +96,11 @@ export interface SpriteDragEndEvent {
     targets: SpriteDragEndTarget[]
 }
 
+export interface ZorderChangeEvent {
+    zorder: string[]
+}
+
 export interface StageViewerEmits {
     (e: 'onSpritesDragEnd', value: SpriteDragEndEvent): void
+    (e: 'onZorderChange', value: ZorderChangeEvent): void
 }