From 1c5eb0167d1f2fec61543d2e0273f6b721a7b2eb Mon Sep 17 00:00:00 2001
From: luoliwoshang <2643523683@qq.com>
Date: Wed, 7 Feb 2024 12:34:14 +0800
Subject: [PATCH] feat(gui):modify the interface of sprite visible

---
 .../stage-viewer-demo/StageViewerDemo.vue     | 16 +++++---
 .../components/stage-viewer/BackdropLayer.vue | 24 +++++------
 .../src/components/stage-viewer/Costume.vue   | 40 +++++++++----------
 .../src/components/stage-viewer/Sprite.vue    | 20 +++++-----
 .../components/stage-viewer/SpriteLayer.vue   | 28 +++++++------
 .../components/stage-viewer/StageViewer.vue   | 18 ++++-----
 spx-gui/src/components/stage-viewer/index.ts  | 14 +++----
 7 files changed, 85 insertions(+), 75 deletions(-)

diff --git a/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue b/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
index 3f62ec09b..3810b7c54 100644
--- 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
index 8704f5866..005c69955 100644
--- 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
index 24db3ccd2..ce6d77b31 100644
--- 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
index fe25b84ab..40701a742 100644
--- 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
index 1dd76b5aa..2c3a83da5 100644
--- 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
index 085dbd17a..66bdcfbb0 100644
--- 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)
 }
 
diff --git a/spx-gui/src/components/stage-viewer/index.ts b/spx-gui/src/components/stage-viewer/index.ts
index 53927fe5d..e3cf79770 100644
--- a/spx-gui/src/components/stage-viewer/index.ts
+++ b/spx-gui/src/components/stage-viewer/index.ts
@@ -30,7 +30,6 @@ export interface StageSprite extends StagePosition {
     costumes: StageCostume[]
     costumeIndex: number
     visible: boolean // Visible at run time
-    stageVisible: boolean // Visible at preview time
     zorder: number
 }
 
@@ -53,7 +52,7 @@ export interface StageBackdrop {
 /**
  * @description: Map Config,some spx project havent this config,the stage size will depend on the SceneSize
  */
-export interface mapConfig {
+export interface MapConfig {
     width: number
     height: number
 }
@@ -71,9 +70,10 @@ export interface mapConfig {
 export interface StageViewerProps {
     height?: number // container height
     width?: number // container width
-    mapConfig?: mapConfig // some spx project havent this config,the stage size will depend on the SceneSize
+    mapConfig?: MapConfig // some spx project havent this config,the stage size will depend on the SceneSize
     sprites: StageSprite[] // sprite list
     backdrop?: StageBackdrop // backdrop 
+    currentSpriteIds: string[]
 }
 
 
@@ -83,7 +83,7 @@ export interface StageViewerProps {
  * @Author: Zhang Zhi Yang
  * @Date: 2024-02-04 17:20:49
  */
-export interface spriteDragEndTarget {
+export interface SpriteDragEndTarget {
     sprite: StageSprite // Sprite  witch is changed
     costume: StageCostume // costume witch is changed
     position: StagePosition // end position witch is changed
@@ -95,10 +95,10 @@ export interface spriteDragEndTarget {
  * @Author: Zhang Zhi Yang
  * @Date: 2024-02-04 17:28:04
  */
-export interface spriteDragEndEvent {
-    targets: spriteDragEndTarget[]
+export interface SpriteDragEndEvent {
+    targets: SpriteDragEndTarget[]
 }
 
 export interface StageViewerEmits {
-    (e: 'onSpritesDragEnd', value: spriteDragEndEvent): void
+    (e: 'onSpritesDragEnd', value: SpriteDragEndEvent): void
 }
\ No newline at end of file