chore:organize the code

luoliwoshang · Feb 20, 2024 · 7efa830 · 7efa830
1 parent 98a094c
commit 7efa830
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 110 deletions.
diff --git a/spx-gui/src/components/spx-stage/SpxStage.vue b/spx-gui/src/components/spx-stage/SpxStage.vue
@@ -1,8 +1,8 @@
 <!--
  * @Author: Zhang zhiyang
  * @Date: 2024-01-15 14:56:59
- * @LastEditors: xuning [email protected]
- * @LastEditTime: 2024-02-07 22:57:06
+ * @LastEditors: Zhang Zhi Yang
+ * @LastEditTime: 2024-02-20 16:31:55
  * @FilePath: /spx-gui/src/components/spx-stage/SpxStage.vue
  * @Description: 
 -->
@@ -12,8 +12,8 @@
     <n-button type="success" class="stage-run-button" @click="run">{{ $t('stage.run') }}</n-button>
     <iframe src="/main.html" frameborder="0" v-if="show" class="show"></iframe>
     <div class="stage-viewer-container" v-else>
-      <StageViewer @onSpritesDragEnd="onSpritesDragEnd" :id="projectStore.project.title"
-        :currentSpriteNames="currentSpriteNames" :backdrop="backdrop" :sprites="sprites"></StageViewer>
+      <StageViewer @onZorderChange="onZorderChange" :project="(projectStore.project as Project)"
+        @onSpritesDragEnd="onSpritesDragEnd" :currentSpriteNames="currentSpriteNames"></StageViewer>
     </div>
   </div>
 </template>
@@ -26,8 +26,8 @@ import { useProjectStore } from "@/store/modules/project";
 import { useSpriteStore } from "@/store";
 import { useBackdropStore } from "@/store/modules/backdrop";
 import StageViewer from "@/components/stage-viewer";
-import type { StageSprite, StageBackdrop, SpriteDragEndEvent } from "@/components/stage-viewer"
-import { Sprite } from "@/class/sprite";
+import type { StageSprite, StageBackdrop, SpriteDragEndEvent, ZorderChangeEvent } from "@/components/stage-viewer"
+import { Project } from "@/class/project";
 
 let show = ref(false);
 const backdropStore = useBackdropStore();
@@ -37,50 +37,19 @@ const spriteStore = useSpriteStore();
 
 const currentSpriteNames = ref<string[]>([])
 
+watch(() => projectStore.project.id, () => {
+  currentSpriteNames.value = spriteStore.list.map(sprite => sprite.name)
+})
+
 const onSpritesDragEnd = (e: SpriteDragEndEvent) => {
   spriteStore.setCurrentByName(e.targets[0].sprite.name)
   spriteStore.current?.setSx(e.targets[0].position.x)
   spriteStore.current?.setSy(e.targets[0].position.y)
 }
 
-
-// TODO: Temporarily use title of project as id
-watch(() => projectStore.project.title, () => {
-  currentSpriteNames.value = sprites.value.map(sprite => sprite.name)
-})
-const sprites: ComputedRef<StageSprite[]> = computed(() => {
-  const list = spriteStore.list.map(sprite => {
-    console.log(sprite)
-    return {
-      name: sprite.name,
-      x: sprite.config.x,
-      y: sprite.config.y,
-      heading: sprite.config.heading,
-      size: sprite.config.size,
-      visible: sprite.config.visible, // Visible at run time
-      zorder: 1,
-      costumes: sprite.config.costumes.map((costume, index) => {
-        return {
-          name: costume.name as string,
-          url: sprite.files[index].url as string,
-          x: costume.x,
-          y: costume.y,
-        }
-      }),
-      costumeIndex: sprite.config.costumeIndex,
-    }
-  })
-  return list as StageSprite[];
-})
-const backdrop: ComputedRef<StageBackdrop> = computed(() => {
-  return {
-    scenes: backdropStore.backdrop.config.scenes.map((scene, index) => ({
-      name: scene.name as string,
-      url: backdropStore.backdrop.files[index].url as string
-    })),
-    sceneIndex: backdropStore.backdrop.currentSceneIndex
-  }
-})
+const onZorderChange = (e: ZorderChangeEvent) => {
+  backdropStore.setZOrder(e.zorder)
+}
 
 
 const run = async () => {
@@ -144,7 +113,8 @@ const run = async () => {
     align-items: center;
     justify-content: center;
   }
-  .stage-viewer-container{
+
+  .stage-viewer-container {
     display: flex;
     justify-content: center;
   }

diff --git a/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue b/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
@@ -2,14 +2,14 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-02-05 14:18:34
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-20 14:41:02
+ * @LastEditTime: 2024-02-20 16:27:48
  * @FilePath: /spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
  * @Description:
 -->
 <template>
     <div style="display: flex;">
         <div>
-            <input type="file" @change="add" accept=".zip">
+            <input type="file" @change="importFile" accept=".zip">
             <p>show in stage viewer</p>
             <template v-for="sprite in project.sprite.list" :key="sprite.name">
                 <button :style="currentSpriteNames.includes(sprite.name) ? { color: 'blue' } : {}"
@@ -38,7 +38,7 @@
                 <p>order in stage</p>
                 <div>
                     <button v-for="(spriteName, index) in zorderList" :key="spriteName"
-                        :disabled="index == zorderList.length - 1" @click="() => upLayer(index)">
+                        :disabled="index == zorderList.length - 1" @click="() => spriteToTop(index)">
                         {{ spriteName }}
                     </button>
                 </div>
@@ -49,15 +49,15 @@
                     <p>scene</p>
                     <!-- in the scene config,the first scene determine the stage size -->
                     <button v-for="(scene, index) in backdropConfig.scenes" :key="scene.name"
-                        :style="index === 0 ? { color: 'blue' } : {}" @click="() => moveToTopScene(index)">
+                        :style="index === 0 ? { color: 'blue' } : {}" @click="() => chooseBackdropScene(index)">
                         {{ scene.name }}
                     </button>
                 </div>
                 <div v-if="backdropConfig.costumes.length > 0">
                     <p>costume</p>
                     <button v-for="(costume, index) in backdropConfig.costumes" :key="costume.name"
                         :style="index === backdropConfig.currentCostumeIndex ? { color: 'blue' } : {}"
-                        @click="() => backdropConfig.currentCostumeIndex = index">
+                        @click="() => chooseBackdropCostume(index)">
                         {{ costume.name }}
                     </button>
 
@@ -95,92 +95,100 @@ import StageViewer from "../stage-viewer";
 import type { StageSprite, SpriteDragEndEvent, StageBackdrop, ZorderChangeEvent } from "../stage-viewer"
 import { useProjectStore } from "@/store/modules/project";
 import type { Project } from "@/class/project";
-import type { Scene } from "@/interface/file"
-
 import { storeToRefs } from "pinia";
 import { ref, computed, watch } from "vue";
-import type { ComputedRef } from "vue";
+
 const projectStore = useProjectStore();
 const { project } = storeToRefs(projectStore);
-const add = async (e: any) => {
-    const file = e.target.files[0];
-    projectStore.loadFromZip(file);
-}
+
+const currentSprite = ref<Sprite | null>(null);
+const currentSpriteNames = ref<string[]>([])
+
+// current sprite config
 const x = computed(() => currentSprite.value ? currentSprite.value.config.x : 0)
 const y = computed(() => currentSprite.value ? currentSprite.value.config.y : 0)
 const heading = computed(() => currentSprite.value ? currentSprite.value.config.heading : 0)
 const size = computed(() => currentSprite.value ? currentSprite.value.config.size * 100 : 0)
 const visible = computed(() => currentSprite.value ? currentSprite.value.config.visible : false)
+// current sprite's current costume config
 const costumeX = computed(() => currentSprite.value ? currentSprite.value.config.costumes[currentSprite.value.config.costumeIndex].x : 0)
 const costumeY = computed(() => currentSprite.value ? currentSprite.value.config.costumes[currentSprite.value.config.costumeIndex].y : 0)
 
+// get the config of backdrop
+const backdropConfig = computed(() => {
+    return {
+        scenes: project.value.backdrop.config?.scenes || [],
+        costumes: project.value.backdrop.config.costumes || [],
+        currentCostumeIndex: project.value.backdrop.config.currentCostumeIndex
+    }
+})
 
-const toggleShowInStage = (name: string) => {
-    currentSpriteNames.value =
-        currentSpriteNames.value.includes(name) ?
-            currentSpriteNames.value.filter(_name => _name !== name)
-            : [...currentSpriteNames.value, name]
-}
-
-const currentSprite = ref<Sprite | null>(null);
-
-const currentSpriteNames = ref<string[]>([])
+// get the zorder list
+const zorderList = computed(() => {
+    return project.value.backdrop.config.zorder
+})
 
-// TODO: Temporarily use title of project as id
-watch(() => project.value.title, () => {
+watch(() => project.value.id, () => {
     currentSpriteNames.value = project.value.sprite.list.map(sprite => sprite.name)
 })
 
+// accept the new sprite position config when dragend from stage viewer
 const onDragEnd = (e: SpriteDragEndEvent) => {
     currentSprite.value = project.value.sprite.list.find(sprite => sprite.name === e.targets[0].sprite.name) as Sprite
     currentSprite.value?.setSx(e.targets[0].position.x)
     currentSprite.value?.setSy(e.targets[0].position.y)
 }
 
-const zorderList = computed(() => {
-    return project.value.backdrop.config.zorder
-})
-
-// Accept the new zorder configuration
+// accept the new zorder configuration from stage viewer
 const onZorderChange = (e: ZorderChangeEvent) => {
     project.value.backdrop.config.zorder = e.zorder
 }
 
-// set zorder list
-const upLayer = (index: number) => {
+// import file
+const importFile = async (e: any) => {
+    const file = e.target.files[0];
+    projectStore.loadFromZip(file);
+}
+
+// set sprite to top
+const spriteToTop = (index: number) => {
     const spriteToMove = zorderList.value[index];
     zorderList.value.splice(index, 1);
     zorderList.value.push(spriteToMove);
 }
 
+// choose the sprite to show in stage
+const toggleShowInStage = (name: string) => {
+    currentSpriteNames.value =
+        currentSpriteNames.value.includes(name) ?
+            currentSpriteNames.value.filter(_name => _name !== name)
+            : [...currentSpriteNames.value, name]
+}
 
-const backdropConfig = computed(() => {
-    return {
-        scenes: project.value.backdrop.config?.scenes || [],
-        costumes: project.value.backdrop.config.costumes || [],
-        currentCostumeIndex: project.value.backdrop.config.currentCostumeIndex
-    }
-})
-console.log(backdropConfig)
-
-// set scene to top
-const moveToTopScene = (index: number) => {
+// choose the scene to show in stage
+// in spx project the first scene will be shown in stage
+const chooseBackdropScene = (index: number) => {
     if (project.value.backdrop.config.scenes) {
         const scenes = [...project.value.backdrop.config.scenes]
-        const item = scenes.splice(index, 1)[0]
-        scenes.unshift(item)
+        const [sceneItem] = scenes.splice(index, 1)
+        scenes.unshift(sceneItem)
         project.value.backdrop.config.scenes = scenes
 
         const files = project.value.backdrop.files
         if (files) {
             const items = [...files]
-            const item = items.splice(index, 1)[0]
-            items.unshift(item)
+            const [fileItem] = items.splice(index, 1)
+            items.unshift(fileItem)
             project.value.backdrop.files = items
         }
     }
 }
 
+// choose backdrop's current costume
+const chooseBackdropCostume = (index: number) => {
+    project.value.backdrop.config.currentCostumeIndex = index
+}
+
 
 
 

diff --git a/spx-gui/src/components/stage-viewer/BackdropLayer.vue b/spx-gui/src/components/stage-viewer/BackdropLayer.vue
@@ -2,7 +2,7 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-02-05 16:33:54
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-20 11:21:02
+ * @LastEditTime: 2024-02-20 15:53:21
  * @FilePath: /spx-gui/src/components/stage-viewer/BackdropLayer.vue
  * @Description
 -->
@@ -35,7 +35,6 @@
         }"></v-image>
     </v-layer>
 </template>
-
 <script setup lang="ts">
 import { defineProps, watch, ref, defineEmits } from 'vue'
 import type { MapConfig, StageBackdrop } from "./index"
@@ -45,7 +44,6 @@ const emits = defineEmits<{
     (e: 'onSceneLoadend', event: { imageEl: HTMLImageElement }): void
 }>()
 
-
 const props = defineProps<{
     offsetConfig: { offsetX: number, offsetY: number },
     mapConfig: MapConfig,