diff --git a/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue b/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
index 63e37ea1a..f1ee7a667 100644
--- a/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
+++ b/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
@@ -2,21 +2,14 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-02-05 14:18:34
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-20 16:27:48
- * @FilePath: /spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
+ * @LastEditTime: 2024-02-21 18:11:56
+ * @FilePath: /builder/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
  * @Description:
 -->
 <template>
     <div style="display: flex;">
         <div>
             <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' } : {}"
-                    @click="toggleShowInStage(sprite.name)">
-                    {{ sprite.name }}
-                </button>
-            </template>
             <div>
                 <p>active in stage</p>
                 <div style="display: flex;">
@@ -27,7 +20,7 @@
                                 :style="sprite.config.costumeIndex === costumeIndex ? { color: 'red' } : {}"
                                 @click="() => sprite.config.costumeIndex = costumeIndex">{{ costume.name }} </button>
                         </template>
-                        <button @click="currentSprite = sprite"
+                        <button @click="() => { currentSprite = sprite; selectedSpriteNames = [sprite.name] }"
                             :style="currentSprite?.name === sprite.name ? { color: 'red' } : {}">
                             {{ sprite.name }}
                         </button>
@@ -84,7 +77,7 @@
                 @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 @onZorderChange="onZorderChange" @onSpritesDragEnd="onDragEnd" :currentSpriteNames="currentSpriteNames"
+        <StageViewer @onSelectedSpriteChange="onSelectedSpriteChange" :selectedSpriteNames="selectedSpriteNames"
             :project="(project as Project)" />
     </div>
 </template>
@@ -92,7 +85,7 @@
 import { NInputNumber, NSwitch } from "naive-ui";
 import type { Sprite } from "@/class/sprite";
 import StageViewer from "../stage-viewer";
-import type { StageSprite, SpriteDragEndEvent, StageBackdrop, ZorderChangeEvent } from "../stage-viewer"
+import type { StageSprite, SpriteDragEndEvent, StageBackdrop, ZorderChangeEvent, SelectedSpriteChangeEvent } from "../stage-viewer"
 import { useProjectStore } from "@/store/modules/project";
 import type { Project } from "@/class/project";
 import { storeToRefs } from "pinia";
@@ -102,7 +95,7 @@ const projectStore = useProjectStore();
 const { project } = storeToRefs(projectStore);
 
 const currentSprite = ref<Sprite | null>(null);
-const currentSpriteNames = ref<string[]>([])
+const selectedSpriteNames = ref<string[]>([])
 
 // current sprite config
 const x = computed(() => currentSprite.value ? currentSprite.value.config.x : 0)
@@ -128,20 +121,26 @@ const zorderList = computed(() => {
     return project.value.backdrop.config.zorder
 })
 
-watch(() => project.value.id, () => {
-    currentSpriteNames.value = project.value.sprite.list.map(sprite => sprite.name)
-})
+// 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)
-}
-
-// accept the new zorder configuration from stage viewer
-const onZorderChange = (e: ZorderChangeEvent) => {
-    project.value.backdrop.config.zorder = e.zorder
+// 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)
+// }
+
+// // accept the new zorder configuration from stage viewer
+// const onZorderChange = (e: ZorderChangeEvent) => {
+//     project.value.backdrop.config.zorder = e.zorder
+// }
+
+const onSelectedSpriteChange = (e: SelectedSpriteChangeEvent) => {
+    selectedSpriteNames.value = e.names
+    console.log(e.names)
+    currentSprite.value = project.value.sprite.list.find(sprite => sprite.name === e.names[0]) as Sprite
 }
 
 // import file
@@ -157,13 +156,7 @@ const spriteToTop = (index: number) => {
     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]
-}
+
 
 // choose the scene to show in stage
 // in spx project the first scene will be shown in stage
diff --git a/spx-gui/src/components/stage-viewer/Costume.vue b/spx-gui/src/components/stage-viewer/Costume.vue
index e21730f25..72ffbe248 100644
--- a/spx-gui/src/components/stage-viewer/Costume.vue
+++ b/spx-gui/src/components/stage-viewer/Costume.vue
@@ -2,43 +2,50 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-25 14:19:57
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-20 14:17:43
- * @FilePath: /spx-gui/src/components/stage-viewer/Costume.vue
+ * @LastEditTime: 2024-02-21 17:26:41
+ * @FilePath: /builder/spx-gui/src/components/stage-viewer/Costume.vue
  * @Description: 
 -->
 <template>
     <v-image @dragend="handleDragEnd" :config="{
-        spriteName:props.spriteConfig.name,
+        spriteName: props.spriteConfig.name,
         image: image,
         draggable: true,
         x: spritePosition.x,
         y: spritePosition.y,
         rotation: spriteRotation,
-        offsetX: props.costumeConfig.x,
-        offsetY: props.costumeConfig.y,
-        scaleX: props.spriteConfig.size,
-        scaleY: props.spriteConfig.size
+        offsetX: currentCostume.x,
+        offsetY: currentCostume.y,
+        scaleX: props.spriteConfig.config.size,
+        scaleY: props.spriteConfig.config.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 { ComputedRef } from "vue"
+import type { StageCostume, MapConfig, SpriteDragEndTarget } from "./index";
+import type { Sprite as SpriteConfig } from "@/class/sprite";
+import type { Costume as CostumeConfig } from "@/interface/file";
 
 // ----------props & emit------------------------------------
 const props = defineProps<{
-    spriteConfig: StageSprite,
-    costumeConfig: StageCostume,
+    spriteConfig: SpriteConfig,
     mapConfig: MapConfig
 }>()
 // define the emits
 const emits = defineEmits<{
     // when ths costume dragend,emit the sprite position
-    (e: 'onDragEnd', event: SpriteDragEndTarget): void
+    (e: 'onDragEnd', event: { sprite: SpriteConfig }): void
 }>()
 
-
+// ----------computed properties-----------------------------
+// computed the current costume with current image
+const currentCostume: ComputedRef<CostumeConfig> = computed(() => {
+    console.log(props.spriteConfig.config.costumes)
+    console.log(props.spriteConfig.config.costumes[props.spriteConfig.config.costumeIndex])
+    return props.spriteConfig.config.costumes[props.spriteConfig.config.costumeIndex]
+})
 
 
 // ----------data related -----------------------------------
@@ -48,21 +55,21 @@ 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.spriteConfig.x,
-        props.spriteConfig.y
+        props.spriteConfig.config.x,
+        props.spriteConfig.config.y
     );
 })
 
 // Computed spx's sprite heading to konva's rotation by about changing sprite heading
 const spriteRotation = computed(() => {
-    return getRotation(props.spriteConfig.heading);
+    return getRotation(props.spriteConfig.config.heading);
 })
 
-watch(() => props.costumeConfig.url, (new_url, old_url) => {
-    console.log(new_url, old_url)
-    if (new_url) {
+watch(() => currentCostume.value, (new_costume, old_costume) => {
+    console.log(new_costume, old_costume)
+    if (new_costume != null) {
         const _image = new window.Image();
-        _image.src = props.costumeConfig.url;
+        _image.src = props.spriteConfig.files[props.spriteConfig.config.costumeIndex].url as string
         _image.onload = () => {
             image.value = _image;
             console.log(_image.width, _image.height)
@@ -125,10 +132,11 @@ const getSpxPostion = (x: number, y: number): { x: number; y: number; } => {
  * @Date: 2024-01-25 15:44:18
  */
 const handleDragEnd = (event: { target: { attrs: { x: number, y: number } } }) => {
+    const position = getSpxPostion(event.target.attrs.x, event.target.attrs.y)
+    props.spriteConfig.config.x = position.x
+    props.spriteConfig.config.y = position.y
     emits('onDragEnd', {
         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 40701a742..0dc21b926 100644
--- a/spx-gui/src/components/stage-viewer/Sprite.vue
+++ b/spx-gui/src/components/stage-viewer/Sprite.vue
@@ -2,47 +2,41 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-24 15:48:38
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-07 12:14:11
- * @FilePath: /spx-gui/src/components/stage-viewer/Sprite.vue
+ * @LastEditTime: 2024-02-21 17:33:10
+ * @FilePath: /builder/spx-gui/src/components/stage-viewer/Sprite.vue
  * @Description: 
 -->
 <template>
-    <Costume @onDragEnd="onDragEnd" :spriteConfig="spriteConfig" :costumeConfig="currentCostume" :mapConfig="mapConfig">
+    <Costume @onDragEnd="onDragEnd" :spriteConfig="spriteConfig" :mapConfig="mapConfig">
     </Costume>
 </template>
 <script lang="ts" setup>
 import Costume from "./Costume.vue"
 import { defineProps, computed, defineEmits, type ComputedRef } from "vue"
 import type { StageSprite, StageCostume, MapConfig, SpriteDragEndTarget } from ".";
-
+import type { Sprite as SpriteConfig } from "@/class/sprite"
 // ----------props & emit------------------------------------
 const props = defineProps<{
-    spriteConfig: StageSprite
+    spriteConfig: SpriteConfig
     mapConfig: MapConfig
 }>();
 
 // when ths costume dragend,emit the sprite position
 const emits = defineEmits<{
-    (e: 'onDragEnd', event: SpriteDragEndTarget): void
+    (e: 'onDragEnd', event: { sprite: SpriteConfig }): void
 }>()
 
-// ----------computed properties-----------------------------
-// computed the current costume with current image
-const currentCostume: ComputedRef<StageCostume> = computed(() => {
-    return props.spriteConfig.costumes[props.spriteConfig.costumeIndex]
-})
+
 
 // ----------methods-----------------------------------------
 
 /**
  * @description: function about the costume is dragged
- * @param {*} e
- * @param {*} y
  * @return {*}
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-25 15:39:27
  */
-const onDragEnd = (e: SpriteDragEndTarget) => {
+const onDragEnd = (e: { sprite: SpriteConfig }) => {
     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 665d1cfe9..c6d4179e0 100644
--- a/spx-gui/src/components/stage-viewer/SpriteLayer.vue
+++ b/spx-gui/src/components/stage-viewer/SpriteLayer.vue
@@ -2,8 +2,8 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-25 16:13:37
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-20 15:04:03
- * @FilePath: /spx-gui/src/components/stage-viewer/SpriteLayer.vue
+ * @LastEditTime: 2024-02-21 17:41:06
+ * @FilePath: /builder/spx-gui/src/components/stage-viewer/SpriteLayer.vue
  * @Description: 
 -->
 <template>
@@ -12,9 +12,9 @@
         x: props.offsetConfig.offsetX,
         y: props.offsetConfig.offsetY
     }">
-        <template v-for="sprite in props.sprites" :key="sprite.name">
-                <Sprite  @onDragEnd="onSpriteDragEnd" v-if="isVisibleInStage(sprite)" :mapConfig="props.mapConfig"
-                     :spriteConfig="sprite" />
+        <template v-for="sprite in sortedSprites" :key="sprite.name">
+            <Sprite v-if="sprite.config.visible" @onDragEnd="onSpriteDragEnd" :mapConfig="props.mapConfig"
+                :spriteConfig="sprite" />
         </template>
     </v-layer>
 </template>
@@ -22,22 +22,66 @@
 // ----------Import required packages / components-----------
 import type { StageSprite, MapConfig, SpriteDragEndTarget, SpriteDragEndEvent } from ".";
 import Sprite from "./Sprite.vue"
+import type { Sprite as SpriteConfig } from "@/class/sprite"
 import { computed } from "vue";
+import type { ComputedRef } from "vue"
 
 const props = defineProps<{
     offsetConfig: { offsetX: number, offsetY: number },
     mapConfig: MapConfig
-    sprites: StageSprite[]
-    currentSpriteNames: string[]
+    spriteList: SpriteConfig[]
+    zorder: string[]
 }>()
 
-const isVisibleInStage = (sprite: StageSprite) => {
-    return props.currentSpriteNames.includes(sprite.name) && sprite.visible
-}
+const sortedSprites = computed(() => {
+    const spriteMap = new Map<string, SpriteConfig>();
+    props.spriteList.forEach(sprite => {
+        spriteMap.set(sprite.name, sprite);
+    })
+    const list: SpriteConfig[] = []
+    props.zorder.forEach(name => {
+        if (spriteMap.has(name)) {
+            list.push(spriteMap.get(name) as SpriteConfig);
+        }
+    })
+    return list;
+})
+
+// get sprites for stage sort by zorder
+const sprites: ComputedRef<StageSprite[]> = computed(() => {
+    const spriteMap = new Map<string, StageSprite>();
+    props.spriteList.forEach(sprite => {
+        const stageSprite: StageSprite = {
+            name: sprite.name,
+            x: sprite.config.x,
+            y: sprite.config.y,
+            heading: sprite.config.heading,
+            size: sprite.config.size,
+            visible: sprite.config.visible,
+            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,
+        };
+        spriteMap.set(sprite.name, stageSprite);
+    });
+    const list: StageSprite[] = []
+    props.zorder.forEach(name => {
+        if (spriteMap.has(name)) {
+            list.push(spriteMap.get(name) as StageSprite);
+        }
+    })
+    return list;
+})
 
 // ----------methods-----------------------------------------
 const emits = defineEmits<{
-    (e: 'onSpritesDragEnd', value: SpriteDragEndEvent): void
+    (e: 'onSpritesDragEnd', value: { spriteList: SpriteConfig[] }): void
 }>()
 
 /**
@@ -47,9 +91,9 @@ const emits = defineEmits<{
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-25 15:47:53
  */
-const onSpriteDragEnd = (e: SpriteDragEndTarget) => {
+const onSpriteDragEnd = (e: { sprite: SpriteConfig }) => {
     emits('onSpritesDragEnd', {
-        targets: [e]
+        spriteList: [e.sprite]
     })
 }
 </script>
\ No newline at end of file
diff --git a/spx-gui/src/components/stage-viewer/StageViewer.vue b/spx-gui/src/components/stage-viewer/StageViewer.vue
index a174d4ab5..c81ba7fcc 100644
--- a/spx-gui/src/components/stage-viewer/StageViewer.vue
+++ b/spx-gui/src/components/stage-viewer/StageViewer.vue
@@ -2,8 +2,8 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-02-05 14:09:40
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-20 16:07:46
- * @FilePath: /spx-gui/src/components/stage-viewer/StageViewer.vue
+ * @LastEditTime: 2024-02-21 18:35:36
+ * @FilePath: /builder/spx-gui/src/components/stage-viewer/StageViewer.vue
  * @Description: 
 -->
 <template>
@@ -14,7 +14,7 @@
             <div @click="moveSprite('top')">top</div>
             <div @click="moveSprite('bottom')">bottom</div>
         </div>
-        <v-stage ref="stage" @contextmenu="onStageMenu" :config="{
+        <v-stage ref="stage" @mousedown="onStageClick" @contextmenu="onStageMenu" :config="{
             width: props.width,
             height: props.height,
             scaleX: scale,
@@ -27,7 +27,12 @@
             <SpriteLayer @onSpritesDragEnd="onSpritesDragEnd" :offsetConfig="{
                 offsetX: (props.width / scale - spxMapConfig.width) / 2,
                 offsetY: (props.height / scale - spxMapConfig.height) / 2
-            }" :sprites="sprites" :mapConfig="spxMapConfig" :currentSpriteNames="props.currentSpriteNames" />
+            }" :spriteList="props.project.sprite.list" :zorder="props.project.backdrop.config.zorder"
+                :mapConfig="spxMapConfig" />
+            <v-layer>
+                <v-transformer ref="transformer" />
+            </v-layer>
+
         </v-stage>
     </div>
 </template>
@@ -38,6 +43,8 @@ import type { StageViewerEmits, StageViewerProps, MapConfig, SpriteDragEndEvent,
 import SpriteLayer from './SpriteLayer.vue';
 import BackdropLayer from './BackdropLayer.vue';
 import type { KonvaEventObject, Node } from 'konva/lib/Node';
+import type { SpriteList } from '@/class/asset-list';
+import type { Sprite as SpriteConfig } from "@/class/sprite"
 // ----------props & emit------------------------------------
 const props = withDefaults(defineProps<StageViewerProps>(), {
     height: 400, // container height
@@ -47,6 +54,7 @@ const emits = defineEmits<StageViewerEmits>();
 
 // instance of konva's stage & menu 
 const stage = ref();
+const transformer = ref()
 const menu = ref();
 
 // Which sprite is selected
@@ -106,40 +114,9 @@ const backdrop = computed(() => {
     } as StageBackdrop
 })
 
-// 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 => {
-        const stageSprite: StageSprite = {
-            name: sprite.name,
-            x: sprite.config.x,
-            y: sprite.config.y,
-            heading: sprite.config.heading,
-            size: sprite.config.size,
-            visible: sprite.config.visible,
-            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,
-        };
-        spriteMap.set(sprite.name, stageSprite);
-    });
-    const list: StageSprite[] = []
-    zorderList.value.forEach(name => {
-        if (spriteMap.has(name)) {
-            list.push(spriteMap.get(name) as StageSprite);
-        }
-    })
-    return list;
-})
+
+
+
 
 // When config is not configured, its stage size is determined by the background image 
 const onSceneLoadend = (event: { imageEl: HTMLImageElement }) => {
@@ -180,12 +157,20 @@ const onStageMenuMouseLeave = (e: MouseEvent) => {
     selectedSprite.value = null
 }
 
+const onStageClick = (e: KonvaEventObject<MouseEvent>) => {
+    if (e.target.parent!.attrs.name !== 'sprite') {
+        console.log('click stage')
+        selectedSprites.value = []
+    }
+    const name = e.target.name();
+}
+
 // move sprite to up or down & emit  the new zorder list
 const moveSprite = (direction: 'up' | 'down' | 'top' | 'bottom') => {
     if (!selectedSprite.value) return;
-
+    const zorderList = props.project.backdrop.config.zorder
     const spriteName = selectedSprite.value.getAttr('spriteName');
-    const currentIndex = zorderList.value.indexOf(spriteName);
+    const currentIndex = zorderList.indexOf(spriteName);
     let newIndex: number;
     if (direction === 'up') {
         newIndex = currentIndex + 1;
@@ -194,7 +179,7 @@ const moveSprite = (direction: 'up' | 'down' | 'top' | 'bottom') => {
         newIndex = currentIndex - 1;
         selectedSprite.value.moveDown();
     } else if (direction === 'top') {
-        newIndex = zorderList.value.length - 1;
+        newIndex = zorderList.length - 1;
         selectedSprite.value.moveToTop();
     } else if (direction === 'bottom') {
         newIndex = 0;
@@ -203,22 +188,31 @@ const moveSprite = (direction: 'up' | 'down' | 'top' | 'bottom') => {
         return;
     }
 
-    if (currentIndex >= 0 && newIndex >= 0 && newIndex < zorderList.value.length) {
-        const newZorderList = [...zorderList.value];
+    if (currentIndex >= 0 && newIndex >= 0 && newIndex < zorderList.length) {
+        const newZorderList = [...zorderList];
         const [movedSprite] = newZorderList.splice(currentIndex, 1);
         newZorderList.splice(newIndex, 0, movedSprite);
-        emits('onZorderChange', { zorder: newZorderList });
+        props.project.backdrop.config.zorder = newZorderList;
+        // emits('onZorderChange', { zorder: newZorderList });
     }
 
     menu.value.style.display = 'none';
 };
 
+
+const selectedSprites = ref<string[]>([]);
+watch(() => props.selectedSpriteNames, (newValue, oldValue) => {
+    selectedSprites.value = newValue
+})
+
 // drag sprite
-const onSpritesDragEnd = (e: SpriteDragEndEvent) => {
-    emits("onSpritesDragEnd", e)
+const onSpritesDragEnd = (e: { spriteList: SpriteConfig[] }) => {
+    emits("onSelectedSpriteChange", { names: e.spriteList.map(s => s.name) })
 }
 
 
+
+
 </script>
 <style scoped>
 #stage-viewer {
diff --git a/spx-gui/src/components/stage-viewer/index.ts b/spx-gui/src/components/stage-viewer/index.ts
index 63e81d929..2d6bbe0dd 100644
--- 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 type { Project } from "@/class/project";
+import type { Sprite } from "@/class/sprite";
 
 export default StageViewer
 /**
@@ -68,9 +69,16 @@ export interface MapConfig {
  */
 export interface StageViewerProps {
     project: Project
-    height?: number // container height
-    width?: number // container width
-    currentSpriteNames: string[]
+    height?: number
+    width?: number
+    selectedSpriteNames: string[]
+}
+
+export interface SelectedSpriteChangeEvent {
+    names: string[]
+}
+export interface StageViewerEmits {
+    (e: 'onSelectedSpriteChange', value: SelectedSpriteChangeEvent): void
 }
 
 
@@ -100,7 +108,6 @@ export interface ZorderChangeEvent {
     zorder: string[]
 }
 
-export interface StageViewerEmits {
-    (e: 'onSpritesDragEnd', value: SpriteDragEndEvent): void
-    (e: 'onZorderChange', value: ZorderChangeEvent): void
-}
\ No newline at end of file
+
+
+