feat(gui):modify the interface of sprite visible

luoliwoshang · Feb 7, 2024 · 1c5eb01 · 1c5eb01
1 parent b19d8dc
commit 1c5eb01
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 75 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-06 17:52:13
+ * @LastEditTime: 2024-02-07 12:24:12
  * @FilePath: /spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
  * @Description:
 -->
@@ -32,7 +32,8 @@
                 @update:value="(val) => { currentSprite && currentSprite.setCy(val as number) }"></n-input-number>
         </div>
         <div style="width:400px;height:400px;">
-            <StageViewer @on-sprites-drag-end="onDragEnd" :backdrop="backdrop" :sprites="sprites" />
+            <StageViewer @onSpritesDragEnd="onDragEnd" :backdrop="backdrop" :sprites="sprites"
+                :currentSpriteIds="currentSpriteIds" />
         </div>
     </div>
 </template>
@@ -41,7 +42,7 @@ import { NInputNumber } 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 } from "../stage-viewer"
 import { useProjectStore } from "@/store/modules/project";
 import { storeToRefs } from "pinia";
 import { ref, computed } from "vue";
@@ -64,8 +65,14 @@ const costumeY = computed(() => currentSprite.value ? currentSprite.value.config
 
 
 const currentSprite = ref<Sprite | null>(null);
+const currentSpriteIds = computed(() => {
+    if (currentSprite.value) {
+        return [currentSprite.value.name]
+    }
+    return []
+})
 
-const onDragEnd = (e: spriteDragEndEvent) => {
+const onDragEnd = (e: SpriteDragEndEvent) => {
     currentSprite.value?.setSx(e.targets[0].position.x)
     currentSprite.value?.setSy(e.targets[0].position.y)
 }
@@ -93,7 +100,6 @@ const sprites: ComputedRef<StageSprite[]> = computed(() => {
             heading: sprite.config.heading,
             size: sprite.config.size,
             visible: sprite.config.visible, // Visible at run time
-            stageVisible: currentSprite.value?.name === sprite.name, // Visible at preview time
             zorder: 1,
             costumes: sprite.config.costumes.map((costume, index) => {
                 return {

diff --git a/spx-gui/src/components/stage-viewer/BackdropLayer.vue b/spx-gui/src/components/stage-viewer/BackdropLayer.vue
@@ -2,27 +2,27 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-02-05 16:33:54
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-07 10:53:32
+ * @LastEditTime: 2024-02-07 12:12:37
  * @FilePath: /spx-gui/src/components/stage-viewer/BackdropLayer.vue
  * @Description
 -->
 <template>
     <v-layer :config="{
-        x: offset_config.offsetX,
-        y: offset_config.offsetY,
+        x: props.offsetConfig.offsetX,
+        y: props.offsetConfig.offsetY,
     }">
         <v-rect :config="{
-            width: map_config.width,
-            height: map_config.height,
+            width: props.mapConfig.width,
+            height: props.mapConfig.height,
             fill: '#eb65a9',
         }"></v-rect>
         <v-line :config="{
-            points: [map_config.width / 2, 0, map_config.width / 2, map_config.height],
+            points: [props.mapConfig.width / 2, 0, props.mapConfig.width / 2, props.mapConfig.height],
             stroke: 'pink',
             strokeWidth: 1,
         }"></v-line>
         <v-line :config="{
-            points: [0, map_config.height / 2, map_config.width, map_config.height / 2],
+            points: [0, props.mapConfig.height / 2, props.mapConfig.width, props.mapConfig.height / 2],
             stroke: 'pink',
             strokeWidth: 1,
         }"></v-line>
@@ -34,7 +34,7 @@
 
 <script setup lang="ts">
 import { defineProps, watch, ref, defineEmits } from 'vue'
-import type { mapConfig, StageBackdrop} from "./index"
+import type { MapConfig, StageBackdrop } from "./index"
 
 const emits = defineEmits<{
     // when ths costume dragend,emit the sprite position
@@ -43,14 +43,14 @@ const emits = defineEmits<{
 
 
 const props = defineProps<{
-    offset_config: { offsetX: number, offsetY: number },
-    map_config: mapConfig,
-    backdrop_config?: StageBackdrop
+    offsetConfig: { offsetX: number, offsetY: number },
+    mapConfig: MapConfig,
+    backdropConfig?: StageBackdrop
 }>()
 
 const image = ref<HTMLImageElement>()
 
-watch(() => props.backdrop_config, (_new, _old) => {
+watch(() => props.backdropConfig, (_new, _old) => {
     if (_new && _new.scenes.length != 0) {
         const _image = new window.Image();
         _image.src = _new.scenes[_new.sceneIndex].url

diff --git a/spx-gui/src/components/stage-viewer/Costume.vue b/spx-gui/src/components/stage-viewer/Costume.vue
@@ -13,28 +13,28 @@
         x: spritePosition.x,
         y: spritePosition.y,
         rotation: spriteRotation,
-        offsetX: props.costume_config.x,
-        offsetY: props.costume_config.y,
-        scaleX: props.sprite_config.size,
-        scaleY: props.sprite_config.size
+        offsetX: props.costumeConfig.x,
+        offsetY: props.costumeConfig.y,
+        scaleX: props.spriteConfig.size,
+        scaleY: props.spriteConfig.size
     }" />
 </template>
 <script setup lang="ts">
 // ----------Import required packages / components-----------
 import { defineProps, onMounted, ref, computed, watchEffect, onUnmounted, watch } from "vue"
-import type { StageCostume, StageSprite, mapConfig, spriteDragEndTarget } from "./index";
+import type { StageCostume, StageSprite, MapConfig, SpriteDragEndTarget } from "./index";
 
 
 // ----------props & emit------------------------------------
 const props = defineProps<{
-    sprite_config: StageSprite,
-    costume_config: StageCostume,
-    map_config: mapConfig
+    spriteConfig: StageSprite,
+    costumeConfig: StageCostume,
+    mapConfig: MapConfig
 }>()
 // define the emits
 const emits = defineEmits<{
     // when ths costume dragend,emit the sprite position
-    (e: 'onDragEnd', event: spriteDragEndTarget): void
+    (e: 'onDragEnd', event: SpriteDragEndTarget): void
 }>()
 
 
@@ -47,20 +47,20 @@ const image = ref<HTMLImageElement>()
 // Computed spx's sprite position to konva's relative position by about changing sprite postion
 const spritePosition = computed(() => {
     return getRelativePosition(
-        props.sprite_config.x,
-        props.sprite_config.y
+        props.spriteConfig.x,
+        props.spriteConfig.y
     );
 })
 
 // Computed spx's sprite heading to konva's rotation by about changing sprite heading
 const spriteRotation = computed(() => {
-    return getRotation(props.sprite_config.heading);
+    return getRotation(props.spriteConfig.heading);
 })
 
-watch(() => props.costume_config.url, (new_url, old_url) => {
+watch(() => props.costumeConfig.url, (new_url, old_url) => {
     if (new_url) {
         const _image = new window.Image();
-        _image.src = props.costume_config.url;
+        _image.src = props.costumeConfig.url;
         _image.onload = () => {
             image.value = _image;
             console.log(_image.width, _image.height)
@@ -85,8 +85,8 @@ watch(() => props.costume_config.url, (new_url, old_url) => {
 const getRelativePosition = (x: number, y: number): { x: number; y: number; } => {
     // 返回计算后的位置  stage.width / 2 + x ，stage.height / 2 + y
     return {
-        x: props.map_config.width / 2 + x,
-        y: props.map_config.height / 2 - y,
+        x: props.mapConfig.width / 2 + x,
+        y: props.mapConfig.height / 2 - y,
     };
 };
 
@@ -110,8 +110,8 @@ const getRotation = (heading: number): number => {
  */
 const getSpxPostion = (x: number, y: number): { x: number; y: number; } => {
     return {
-        x: x - props.map_config.width / 2,
-        y: props.map_config.height / 2 - y,
+        x: x - props.mapConfig.width / 2,
+        y: props.mapConfig.height / 2 - y,
     }
 }
 
@@ -124,8 +124,8 @@ const getSpxPostion = (x: number, y: number): { x: number; y: number; } => {
  */
 const handleDragEnd = (event: { target: { attrs: { x: number, y: number } } }) => {
     emits('onDragEnd', {
-        sprite: props.sprite_config,
-        costume: props.costume_config,
+        sprite: props.spriteConfig,
+        costume: props.costumeConfig,
         position: getSpxPostion(event.target.attrs.x, event.target.attrs.y)
     })
 }

diff --git a/spx-gui/src/components/stage-viewer/Sprite.vue b/spx-gui/src/components/stage-viewer/Sprite.vue
@@ -2,34 +2,34 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-24 15:48:38
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-07 10:24:34
+ * @LastEditTime: 2024-02-07 12:14:11
  * @FilePath: /spx-gui/src/components/stage-viewer/Sprite.vue
  * @Description: 
 -->
 <template>
-    <Costume @on-drag-end="onDragEnd" :sprite_config="sprite_config" :costume_config="currentCostume"
-        :map_config="map_config"></Costume>
+    <Costume @onDragEnd="onDragEnd" :spriteConfig="spriteConfig" :costumeConfig="currentCostume" :mapConfig="mapConfig">
+    </Costume>
 </template>
 <script lang="ts" setup>
 import Costume from "./Costume.vue"
-import { defineProps, onMounted, computed, defineEmits, type ComputedRef } from "vue"
-import type { StageSprite, StageCostume, mapConfig, spriteDragEndTarget } from ".";
+import { defineProps, computed, defineEmits, type ComputedRef } from "vue"
+import type { StageSprite, StageCostume, MapConfig, SpriteDragEndTarget } from ".";
 
 // ----------props & emit------------------------------------
 const props = defineProps<{
-    sprite_config: StageSprite
-    map_config: mapConfig
+    spriteConfig: StageSprite
+    mapConfig: MapConfig
 }>();
 
 // when ths costume dragend,emit the sprite position
 const emits = defineEmits<{
-    (e: 'onDragEnd', event: spriteDragEndTarget): void
+    (e: 'onDragEnd', event: SpriteDragEndTarget): void
 }>()
 
 // ----------computed properties-----------------------------
 // computed the current costume with current image
 const currentCostume: ComputedRef<StageCostume> = computed(() => {
-    return props.sprite_config.costumes[props.sprite_config.costumeIndex]
+    return props.spriteConfig.costumes[props.spriteConfig.costumeIndex]
 })
 
 // ----------methods-----------------------------------------
@@ -42,7 +42,7 @@ const currentCostume: ComputedRef<StageCostume> = computed(() => {
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-25 15:39:27
  */
-const onDragEnd = (e: spriteDragEndTarget) => {
+const onDragEnd = (e: SpriteDragEndTarget) => {
     emits("onDragEnd", e)
 }
 </script>
diff --git a/spx-gui/src/components/stage-viewer/SpriteLayer.vue b/spx-gui/src/components/stage-viewer/SpriteLayer.vue
@@ -2,40 +2,44 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-25 16:13:37
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-07 09:41:12
+ * @LastEditTime: 2024-02-07 12:31:21
  * @FilePath: /spx-gui/src/components/stage-viewer/SpriteLayer.vue
  * @Description: 
 -->
 <template>
     <v-layer :config="{
-        x: offset_config.offsetX,
-        y: offset_config.offsetY
+        x: props.offsetConfig.offsetX,
+        y: props.offsetConfig.offsetY
     }">
-        <template v-if="!loading">
+        <template v-if="!props.loading">
             <template v-for="sprite in props.sprites">
-                <Sprite @on-drag-end="onSpriteDragEnd" v-if="sprite.stageVisible" :map_config="map_config" :key="sprite.id"
-                    :sprite_config="sprite" />
+                <Sprite @onDragEnd="onSpriteDragEnd" v-if="isVisibleInStage(sprite.id)" :mapConfig="props.mapConfig"
+                    :key="sprite.id" :spriteConfig="sprite" />
             </template>
         </template>
     </v-layer>
 </template>
 <script setup lang="ts">
 // ----------Import required packages / components-----------
-import type { StageSprite, mapConfig, spriteDragEndTarget, spriteDragEndEvent } from ".";
+import type { StageSprite, MapConfig, SpriteDragEndTarget, SpriteDragEndEvent } from ".";
 import Sprite from "./Sprite.vue"
-import { ref, computed, onMounted } from "vue"
+import { computed } from "vue";
 
 const props = defineProps<{
     loading: boolean,
-    offset_config: { offsetX: number, offsetY: number },
-    map_config: mapConfig
+    offsetConfig: { offsetX: number, offsetY: number },
+    mapConfig: MapConfig
     sprites: StageSprite[]
+    currentSpriteIds: string[]
 }>()
 
+const isVisibleInStage = ((spriteId: string) => {
+    return props.currentSpriteIds.includes(spriteId)
+})
 
 // ----------methods-----------------------------------------
 const emits = defineEmits<{
-    (e: 'onSpritesDragEnd', value: spriteDragEndEvent): void
+    (e: 'onSpritesDragEnd', value: SpriteDragEndEvent): void
 }>()
 
 /**
@@ -45,7 +49,7 @@ const emits = defineEmits<{
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-25 15:47:53
  */
-const onSpriteDragEnd = (e: spriteDragEndTarget) => {
+const onSpriteDragEnd = (e: SpriteDragEndTarget) => {
     emits('onSpritesDragEnd', {
         targets: [e]
     })

diff --git a/spx-gui/src/components/stage-viewer/StageViewer.vue b/spx-gui/src/components/stage-viewer/StageViewer.vue
@@ -2,7 +2,7 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-02-05 14:09:40
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-07 10:55:06
+ * @LastEditTime: 2024-02-07 12:30:20
  * @FilePath: /spx-gui/src/components/stage-viewer/StageViewer.vue
  * @Description: 
 -->
@@ -14,22 +14,22 @@
             scaleX: scale,
             scaleY: scale,
         }">
-            <BackdropLayer @onSceneLoadend="onSceneLoadend" :loading="loading" :backdrop_config="props.backdrop"
-                :offset_config="{
+            <BackdropLayer @onSceneLoadend="onSceneLoadend" :loading="loading" :backdropConfig="props.backdrop"
+                :offsetConfig="{
                     offsetX: (props.width / scale - spxMapConfig.width) / 2,
                     offsetY: (props.height / scale - spxMapConfig.height) / 2,
-                }" :map_config="spxMapConfig" />
-            <SpriteLayer :loading="loading" @onSpritesDragEnd="onSpritesDragEnd" :offset_config="{
+                }" :mapConfig="spxMapConfig" />
+            <SpriteLayer :loading="loading" @onSpritesDragEnd="onSpritesDragEnd" :offsetConfig="{
                 offsetX: (props.width / scale - spxMapConfig.width) / 2,
                 offsetY: (props.height / scale - spxMapConfig.height) / 2
-            }" :sprites="props.sprites" :map_config="spxMapConfig" />
+            }" :sprites="props.sprites" :mapConfig="spxMapConfig" :currentSpriteIds="props.currentSpriteIds" />
         </v-stage>
     </div>
 </template>
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch, withDefaults, watchEffect } from 'vue';
 import type { ComputedRef } from 'vue';
-import type { StageViewerEmits, StageViewerProps, mapConfig, spriteDragEndEvent } from './index';
+import type { StageViewerEmits, StageViewerProps, MapConfig, SpriteDragEndEvent } from './index';
 import SpriteLayer from './SpriteLayer.vue';
 import BackdropLayer from './BackdropLayer.vue';
 // ----------props & emit------------------------------------
@@ -60,7 +60,7 @@ const scale = computed(() => {
 });
 
 // get spx map size
-const spxMapConfig = ref<mapConfig>({
+const spxMapConfig = ref<MapConfig>({
     width: 400,
     height: 400
 });
@@ -94,7 +94,7 @@ const checkProps = () => {
     }
 }
 
-const onSpritesDragEnd = (e: spriteDragEndEvent) => {
+const onSpritesDragEnd = (e: SpriteDragEndEvent) => {
     emits("onSpritesDragEnd", e)
 }