diff --git a/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue b/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
index f1ee7a667..583dfceaf 100644
--- a/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
+++ b/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
@@ -7,118 +7,208 @@
  * @Description:
 -->
 <template>
-    <div style="display: flex;">
+  <div style="display: flex">
+    <div>
+      <input type="file" @change="importFile" accept=".zip" />
+      <div>
+        <p>current sprite</p>
+        <div style="display: flex">
+          <div
+            style="display: flex; flex-direction: column; justify-content: flex-end"
+            v-for="sprite in project.sprite.list"
+            :key="sprite.name"
+          >
+            <template v-if="currentSprite?.name === sprite.name">
+              <button
+                v-for="(costume, costumeIndex) in sprite.config.costumes"
+                :key="costume.name"
+                :style="sprite.config.costumeIndex === costumeIndex ? { color: 'red' } : {}"
+                @click="() => (sprite.config.costumeIndex = costumeIndex)"
+              >
+                {{ costume.name }}
+              </button>
+            </template>
+            <button
+              @click="
+                () => {
+                  currentSprite = sprite
+                  selectedSpriteNames = [sprite.name]
+                }
+              "
+              :style="currentSprite?.name === sprite.name ? { color: 'red' } : {}"
+            >
+              {{ sprite.name }}
+            </button>
+          </div>
+        </div>
+      </div>
+      <div>
+        <p>order in stage</p>
         <div>
-            <input type="file" @change="importFile" accept=".zip">
-            <div>
-                <p>active in stage</p>
-                <div style="display: flex;">
-                    <div style="display: flex;flex-direction: column;justify-content: flex-end;"
-                        v-for="sprite in project.sprite.list" :key="sprite.name">
-                        <template v-if="currentSprite?.name === sprite.name">
-                            <button v-for="(costume, costumeIndex) in sprite.config.costumes" :key="costume.name"
-                                :style="sprite.config.costumeIndex === costumeIndex ? { color: 'red' } : {}"
-                                @click="() => sprite.config.costumeIndex = costumeIndex">{{ costume.name }} </button>
-                        </template>
-                        <button @click="() => { currentSprite = sprite; selectedSpriteNames = [sprite.name] }"
-                            :style="currentSprite?.name === sprite.name ? { color: 'red' } : {}">
-                            {{ sprite.name }}
-                        </button>
-                    </div>
-                </div>
-            </div>
-            <div>
-                <p>order in stage</p>
-                <div>
-                    <button v-for="(spriteName, index) in zorderList" :key="spriteName"
-                        :disabled="index == zorderList.length - 1" @click="() => spriteToTop(index)">
-                        {{ spriteName }}
-                    </button>
-                </div>
-            </div>
-            <div>
-                <h4>backdrop</h4>
-                <div v-if="backdropConfig.scenes.length > 0">
-                    <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="() => 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="() => chooseBackdropCostume(index)">
-                        {{ costume.name }}
-                    </button>
-
-                </div>
-
-            </div>
+          <button
+            v-for="(spriteName, index) in zorderList"
+            :key="spriteName"
+            :disabled="index == zorderList.length - 1"
+            @click="() => spriteToTop(index)"
+          >
+            {{ spriteName }}
+          </button>
+        </div>
+      </div>
+      <div>
+        <h4>backdrop</h4>
+        <div v-if="backdropConfig.scenes.length > 0">
+          <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="() => chooseBackdropScene(index)"
+          >
+            {{ scene.name }}
+          </button>
         </div>
-        <div style="display: flex;flex-direction: column;">
-            <p>sprite position</p>
-            <n-input-number type="number" :value="x"
-                @update:value="(val) => { currentSprite && currentSprite.setSx(val as number) }"></n-input-number>
-            <n-input-number type="number" :value="y"
-                @update:value="(val) => { currentSprite && currentSprite.setSy(val as number) }"></n-input-number>
-            <p>sprite heading</p>
-            <n-input-number type="number" :value="heading"
-                @update:value="(val) => { currentSprite && currentSprite.setHeading(val as number) }"></n-input-number>
-            <p>sprite size</p>
-            <n-input-number type="number" :value="size"
-                @update:value="(val) => { currentSprite && currentSprite.setSize(val as number / 100) }"></n-input-number>
-            <p>costume position</p>
-            <n-input-number type="number" :value="costumeX"
-                @update:value="(val) => { currentSprite && currentSprite.setCx(val as number) }"></n-input-number>
-            <n-input-number type="number" :value="costumeY"
-                @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 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="() => chooseBackdropCostume(index)"
+          >
+            {{ costume.name }}
+          </button>
         </div>
-        <StageViewer @onSelectedSpriteChange="onSelectedSpriteChange" :selectedSpriteNames="selectedSpriteNames"
-            :project="(project as Project)" />
+      </div>
     </div>
+    <div style="display: flex; flex-direction: column">
+      <p>sprite position</p>
+      <n-input-number
+        type="number"
+        :value="x"
+        @update:value="
+          (val) => {
+            currentSprite && currentSprite.setSx(val as number)
+          }
+        "
+      ></n-input-number>
+      <n-input-number
+        type="number"
+        :value="y"
+        @update:value="
+          (val) => {
+            currentSprite && currentSprite.setSy(val as number)
+          }
+        "
+      ></n-input-number>
+      <p>sprite heading</p>
+      <n-input-number
+        type="number"
+        :value="heading"
+        @update:value="
+          (val) => {
+            currentSprite && currentSprite.setHeading(val as number)
+          }
+        "
+      ></n-input-number>
+      <p>sprite size</p>
+      <n-input-number
+        type="number"
+        :value="size"
+        @update:value="
+          (val) => {
+            currentSprite && currentSprite.setSize((val as number) / 100)
+          }
+        "
+      ></n-input-number>
+      <p>costume position</p>
+      <n-input-number
+        type="number"
+        :value="costumeX"
+        @update:value="
+          (val) => {
+            currentSprite && currentSprite.setCx(val as number)
+          }
+        "
+      ></n-input-number>
+      <n-input-number
+        type="number"
+        :value="costumeY"
+        @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
+      @onSelectedSpriteChange="onSelectedSpriteChange"
+      :selectedSpriteNames="selectedSpriteNames"
+      :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, ZorderChangeEvent, SelectedSpriteChangeEvent } from "../stage-viewer"
-import { useProjectStore } from "@/store/modules/project";
-import type { Project } from "@/class/project";
-import { storeToRefs } from "pinia";
-import { ref, computed, watch } from "vue";
+import { NInputNumber, NSwitch } from 'naive-ui'
+import type { Sprite } from '@/class/sprite'
+import StageViewer 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'
+import { ref, computed, watch } from 'vue'
 
-const projectStore = useProjectStore();
-const { project } = storeToRefs(projectStore);
+const projectStore = useProjectStore()
+const { project } = storeToRefs(projectStore)
 
-const currentSprite = ref<Sprite | null>(null);
+const currentSprite = ref<Sprite | null>(null)
 const selectedSpriteNames = 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)
+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)
+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
-    }
+  return {
+    scenes: project.value.backdrop.config?.scenes || [],
+    costumes: project.value.backdrop.config.costumes || [],
+    currentCostumeIndex: project.value.backdrop.config.currentCostumeIndex
+  }
 })
 
 // get the zorder list
 const zorderList = computed(() => {
-    return project.value.backdrop.config.zorder
+  return project.value.backdrop.config.zorder
 })
 
 // watch(() => project.value.id, () => {
@@ -138,52 +228,47 @@ const zorderList = computed(() => {
 // }
 
 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
+  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
 const importFile = async (e: any) => {
-    const file = e.target.files[0];
-    projectStore.loadFromZip(file);
+  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);
+  const spriteToMove = zorderList.value[index]
+  zorderList.value.splice(index, 1)
+  zorderList.value.push(spriteToMove)
 }
 
-
-
 // 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 [sceneItem] = scenes.splice(index, 1)
-        scenes.unshift(sceneItem)
-        project.value.backdrop.config.scenes = scenes
+  if (project.value.backdrop.config.scenes) {
+    const scenes = [...project.value.backdrop.config.scenes]
+    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 [fileItem] = items.splice(index, 1)
-            items.unshift(fileItem)
-            project.value.backdrop.files = items
-        }
+    const files = project.value.backdrop.files
+    if (files) {
+      const items = [...files]
+      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
+  project.value.backdrop.config.currentCostumeIndex = index
 }
-
-
-
-
-
-</script>
\ No newline at end of file
+</script>
diff --git a/spx-gui/src/components/stage-viewer/BackdropLayer.vue b/spx-gui/src/components/stage-viewer/BackdropLayer.vue
index a82801b6a..62492f99f 100644
--- a/spx-gui/src/components/stage-viewer/BackdropLayer.vue
+++ b/spx-gui/src/components/stage-viewer/BackdropLayer.vue
@@ -7,68 +7,79 @@
  * @Description
 -->
 <template>
-    <v-layer :config="{
-        name: 'backdrop',
-        x: props.offsetConfig.offsetX,
-        y: props.offsetConfig.offsetY,
-    }">
-        <v-rect :config="{
-            width: props.mapConfig.width,
-            height: props.mapConfig.height,
-            stroke: 'pink',
-            strokeWidth: 1,
-        }">
-
-        </v-rect>
-        <v-line :config="{
-            points: [props.mapConfig.width / 2, 0, props.mapConfig.width / 2, props.mapConfig.height],
-            stroke: 'pink',
-            strokeWidth: 1,
-        }"></v-line>
-        <v-line :config="{
-            points: [0, props.mapConfig.height / 2, props.mapConfig.width, props.mapConfig.height / 2],
-            stroke: 'pink',
-            strokeWidth: 1,
-        }"></v-line>
-        <v-image v-if="image" :config="{
-            image: image,
-        }"></v-image>
-    </v-layer>
+  <v-layer
+    :config="{
+      name: 'backdrop',
+      x: props.offsetConfig.offsetX,
+      y: props.offsetConfig.offsetY
+    }"
+  >
+    <v-rect
+      :config="{
+        width: props.mapConfig.width,
+        height: props.mapConfig.height,
+        stroke: 'pink',
+        strokeWidth: 1
+      }"
+    >
+    </v-rect>
+    <v-line
+      :config="{
+        points: [props.mapConfig.width / 2, 0, props.mapConfig.width / 2, props.mapConfig.height],
+        stroke: 'pink',
+        strokeWidth: 1
+      }"
+    ></v-line>
+    <v-line
+      :config="{
+        points: [0, props.mapConfig.height / 2, props.mapConfig.width, props.mapConfig.height / 2],
+        stroke: 'pink',
+        strokeWidth: 1
+      }"
+    ></v-line>
+    <v-image
+      v-if="image"
+      :config="{
+        image: image
+      }"
+    ></v-image>
+  </v-layer>
 </template>
 <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
-    (e: 'onSceneLoadend', event: { imageEl: HTMLImageElement }): void
+  // when ths costume dragend,emit the sprite position
+  (e: 'onSceneLoadend', event: { imageEl: HTMLImageElement }): void
 }>()
 
 const props = defineProps<{
-    offsetConfig: { offsetX: number, offsetY: number },
-    mapConfig: MapConfig,
-    backdropConfig: StageBackdrop | null
+  offsetConfig: { offsetX: number; offsetY: number }
+  mapConfig: MapConfig
+  backdropConfig: StageBackdrop | null
 }>()
 
 const image = ref<HTMLImageElement>()
 
-watch(() => props.backdropConfig, (new_config, old_config) => {
+watch(
+  () => props.backdropConfig,
+  (new_config, old_config) => {
     if (new_config) {
-        // In the scene config‘s project, you only need to get the first scene as the backdrop
-        const _image = new window.Image();
-        if (new_config.scenes.length != 0) {
-            _image.src = new_config.scenes[0].url
-        } else if (new_config.costumes.length != 0) {
-            _image.src = new_config.costumes[new_config.currentCostumeIndex].url
-        }
-        _image.onload = () => {
-            image.value = _image;
-            emits('onSceneLoadend', { imageEl: _image })
-        };
-    }
-    else {
-        image.value?.remove();
+      // In the scene config‘s project, you only need to get the first scene as the backdrop
+      const _image = new window.Image()
+      if (new_config.scenes.length != 0) {
+        _image.src = new_config.scenes[0].url
+      } else if (new_config.costumes.length != 0) {
+        _image.src = new_config.costumes[new_config.currentCostumeIndex].url
+      }
+      _image.onload = () => {
+        image.value = _image
+        emits('onSceneLoadend', { imageEl: _image })
+      }
+    } else {
+      image.value?.remove()
     }
-})
-
-</script>
\ No newline at end of file
+  }
+)
+</script>
diff --git a/spx-gui/src/components/stage-viewer/Costume.vue b/spx-gui/src/components/stage-viewer/Costume.vue
index 72ffbe248..0ccff3f04 100644
--- a/spx-gui/src/components/stage-viewer/Costume.vue
+++ b/spx-gui/src/components/stage-viewer/Costume.vue
@@ -2,85 +2,111 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-25 14:19:57
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-21 17:26:41
- * @FilePath: /builder/spx-gui/src/components/stage-viewer/Costume.vue
+ * @LastEditTime: 2024-02-22 11:56:46
+ * @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,
-        y: spritePosition.y,
-        rotation: spriteRotation,
-        offsetX: currentCostume.x,
-        offsetY: currentCostume.y,
-        scaleX: props.spriteConfig.config.size,
-        scaleY: props.spriteConfig.config.size
-    }" />
+  <v-image
+    @dragmove="handleDragMove"
+    @dragend="handleDragEnd"
+    :config="{
+      spriteName: props.spriteConfig.name,
+      image: image,
+      draggable: true,
+      x: spritePosition.x,
+      y: spritePosition.y,
+      rotation: spriteRotation,
+      offsetX: currentCostume.x,
+      offsetY: currentCostume.y,
+      scaleX: props.spriteConfig.config.size,
+      scaleY: props.spriteConfig.config.size
+    }"
+  />
+  <v-rect
+    v-if="props.selected"
+    ref="transformer"
+    @dragend="handleDragEnd"
+    :config="{
+      spriteName: props.spriteConfig.name,
+      width: image?.width,
+      height: image?.height,
+      fill: 'rgba(0,0,0,0)',
+      strokeWidth: 4,
+      draggable: true,
+      x: spritePosition.x,
+      y: spritePosition.y,
+      rotation: spriteRotation,
+      offsetX: currentCostume.x,
+      offsetY: currentCostume.y,
+      scaleX: props.spriteConfig.config.size,
+      scaleY: props.spriteConfig.config.size
+    }"
+  >
+  </v-rect>
 </template>
 <script setup lang="ts">
 // ----------Import required packages / components-----------
-import { defineProps, onMounted, ref, computed, watchEffect, onUnmounted, watch } from "vue"
-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";
-
+import { defineProps, onMounted, ref, computed, watchEffect, onUnmounted, watch } from 'vue'
+import type { ComputedRef } from 'vue'
+import type { StageCostume, MapConfig, SpriteDragEndTarget } from './index'
+import type { KonvaEventObject, Node } from 'konva/lib/Node'
+import type { Shape } from 'konva/lib/Shape'
+import type { Sprite as SpriteConfig } from '@/class/sprite'
+import type { Costume as CostumeConfig } from '@/interface/file'
 // ----------props & emit------------------------------------
 const props = defineProps<{
-    spriteConfig: SpriteConfig,
-    mapConfig: MapConfig
+  spriteConfig: SpriteConfig
+  mapConfig: MapConfig
+  selected: boolean
 }>()
 // define the emits
 const emits = defineEmits<{
-    // when ths costume dragend,emit the sprite position
-    (e: 'onDragEnd', event: { sprite: SpriteConfig }): void
+  // when ths costume dragend,emit the sprite position
+  (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]
+  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 -----------------------------------
 const image = ref<HTMLImageElement>()
-
+const transformer = ref<Rect>()
 // ----------computed properties-----------------------------
 // Computed spx's sprite position to konva's relative position by about changing sprite postion
 const spritePosition = computed(() => {
-    return getRelativePosition(
-        props.spriteConfig.config.x,
-        props.spriteConfig.config.y
-    );
+  return getRelativePosition(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.config.heading);
+  return getRotation(props.spriteConfig.config.heading)
 })
 
-watch(() => currentCostume.value, (new_costume, old_costume) => {
+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.spriteConfig.files[props.spriteConfig.config.costumeIndex].url as string
-        _image.onload = () => {
-            image.value = _image;
-            console.log(_image.width, _image.height)
-        };
+      const _image = new window.Image()
+      _image.src = props.spriteConfig.files[props.spriteConfig.config.costumeIndex].url as string
+      _image.onload = () => {
+        image.value = _image
+        console.log(_image.width, _image.height)
+      }
     } else {
-        image.value?.remove();
+      image.value?.remove()
     }
-}, {
+  },
+  {
     immediate: true
-})
-
+  }
+)
 
 // ----------methods-----------------------------------------
 /**
@@ -91,13 +117,13 @@ watch(() => currentCostume.value, (new_costume, old_costume) => {
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-25 14:52:50
  */
-const getRelativePosition = (x: number, y: number): { x: number; y: number; } => {
-    // 返回计算后的位置  stage.width / 2 + x ，stage.height / 2 + y
-    return {
-        x: props.mapConfig.width / 2 + x,
-        y: props.mapConfig.height / 2 - y,
-    };
-};
+const getRelativePosition = (x: number, y: number): { x: number; y: number } => {
+  // 返回计算后的位置  stage.width / 2 + x ，stage.height / 2 + y
+  return {
+    x: props.mapConfig.width / 2 + x,
+    y: props.mapConfig.height / 2 - y
+  }
+}
 
 /**
  * @description: map spx's sprite heading to konva's rotation
@@ -105,9 +131,8 @@ const getRelativePosition = (x: number, y: number): { x: number; y: number; } =>
  * @return {*}
  */
 const getRotation = (heading: number): number => {
-    return heading - 90
-};
-
+  return heading - 90
+}
 
 /**
  * @description: map konva's relative postion to spx's position
@@ -117,11 +142,20 @@ const getRotation = (heading: number): number => {
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-25 15:28:36
  */
-const getSpxPostion = (x: number, y: number): { x: number; y: number; } => {
-    return {
-        x: x - props.mapConfig.width / 2,
-        y: props.mapConfig.height / 2 - y,
-    }
+const getSpxPostion = (x: number, y: number): { x: number; y: number } => {
+  return {
+    x: x - props.mapConfig.width / 2,
+    y: props.mapConfig.height / 2 - y
+  }
+}
+
+const handleDragMove = (event) => {
+  if (transformer.value) {
+    transformer.value.getNode().setPosition({
+      x: event.target.attrs.x,
+      y: event.target.attrs.y
+    })
+  }
 }
 
 /**
@@ -131,13 +165,12 @@ const getSpxPostion = (x: number, y: number): { x: number; y: number; } => {
  * @Author: Zhang Zhi Yang
  * @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,
-    })
+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
+  })
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/spx-gui/src/components/stage-viewer/Sprite.vue b/spx-gui/src/components/stage-viewer/Sprite.vue
index 0dc21b926..ffb2c610e 100644
--- a/spx-gui/src/components/stage-viewer/Sprite.vue
+++ b/spx-gui/src/components/stage-viewer/Sprite.vue
@@ -2,41 +2,27 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-24 15:48:38
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-21 17:33:10
- * @FilePath: /builder/spx-gui/src/components/stage-viewer/Sprite.vue
+ * @LastEditTime: 2024-02-22 08:58:24
+ * @FilePath: \spx-gui\src\components\stage-viewer\Sprite.vue
  * @Description: 
 -->
 <template>
-    <Costume @onDragEnd="onDragEnd" :spriteConfig="spriteConfig" :mapConfig="mapConfig">
-    </Costume>
+  <Costume
+    :spriteConfig="props.spriteConfig"
+    :selected="props.selected"
+    :mapConfig="props.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"
+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: SpriteConfig
-    mapConfig: MapConfig
-}>();
-
-// when ths costume dragend,emit the sprite position
-const emits = defineEmits<{
-    (e: 'onDragEnd', event: { sprite: SpriteConfig }): void
+  spriteConfig: SpriteConfig
+  mapConfig: MapConfig
+  selected: boolean
 }>()
-
-
-
-// ----------methods-----------------------------------------
-
-/**
- * @description: function about the costume is dragged
- * @return {*}
- * @Author: Zhang Zhi Yang
- * @Date: 2024-01-25 15:39:27
- */
-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 c6d4179e0..f865286d2 100644
--- a/spx-gui/src/components/stage-viewer/SpriteLayer.vue
+++ b/spx-gui/src/components/stage-viewer/SpriteLayer.vue
@@ -2,87 +2,96 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-25 16:13:37
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-21 17:41:06
- * @FilePath: /builder/spx-gui/src/components/stage-viewer/SpriteLayer.vue
+ * @LastEditTime: 2024-02-22 13:44:51
+ * @FilePath: \spx-gui\src\components\stage-viewer\SpriteLayer.vue
  * @Description: 
 -->
 <template>
-    <v-layer :config="{
-        name: 'sprite',
-        x: props.offsetConfig.offsetX,
-        y: props.offsetConfig.offsetY
-    }">
-        <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>
+  <v-layer
+    :config="{
+      name: 'sprite',
+      x: props.offsetConfig.offsetX,
+      y: props.offsetConfig.offsetY
+    }"
+  >
+    <template v-for="sprite in sortedSprites" :key="sprite.name">
+      <Sprite
+        v-if="sprite.config.visible"
+        :mapConfig="props.mapConfig"
+        :spriteConfig="sprite"
+        :selected="selectedSpriteNames.includes(sprite.name)"
+      />
+    </template>
+  </v-layer>
 </template>
 <script setup lang="ts">
 // ----------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"
+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
-    spriteList: SpriteConfig[]
-    zorder: string[]
+  offsetConfig: { offsetX: number; offsetY: number }
+  mapConfig: MapConfig
+  spriteList: SpriteConfig[]
+  zorder: string[]
+  selectedSpriteNames: string[]
 }>()
 
 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;
+  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)
+    }
+  })
+  // console.log(list)
+  console.log(props.zorder)
+  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);
+  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
         }
-    })
-    return list;
+      }),
+      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: { spriteList: SpriteConfig[] }): void
-}>()
+// const emits = defineEmits<{
+//     (e: 'onSpritesDragEnd', value: { spriteList: SpriteConfig[] }): void
+// }>()
 
 /**
  * @description: Single sprite drag end
@@ -91,9 +100,9 @@ const emits = defineEmits<{
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-25 15:47:53
  */
-const onSpriteDragEnd = (e: { sprite: SpriteConfig }) => {
-    emits('onSpritesDragEnd', {
-        spriteList: [e.sprite]
-    })
-}
-</script>
\ No newline at end of file
+// const onSpriteDragEnd = (e: { sprite: SpriteConfig }) => {
+//     emits('onSpritesDragEnd', {
+//         spriteList: [e.sprite]
+//     })
+// }
+</script>
diff --git a/spx-gui/src/components/stage-viewer/StageViewer.vue b/spx-gui/src/components/stage-viewer/StageViewer.vue
index 3d8aea4c3..c0320da8e 100644
--- a/spx-gui/src/components/stage-viewer/StageViewer.vue
+++ b/spx-gui/src/components/stage-viewer/StageViewer.vue
@@ -2,264 +2,330 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-02-05 14:09:40
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-21 21:46:10
+ * @LastEditTime: 2024-02-22 11:38:17
  * @FilePath: \spx-gui\src\components\stage-viewer\StageViewer.vue
  * @Description: 
 -->
 <template>
-    <div id="stage-viewer">
-        <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" @mousedown="onStageClick" @contextmenu="onStageMenu" :config="{
-            width: props.width,
-            height: props.height,
-            scaleX: scale,
-            scaleY: scale,
-        }">
-            <BackdropLayer @onSceneLoadend="onSceneLoadend" :backdropConfig="backdrop" :offsetConfig="{
-                offsetX: (props.width / scale - spxMapConfig.width) / 2,
-                offsetY: (props.height / scale - spxMapConfig.height) / 2,
-            }" :mapConfig="spxMapConfig" />
-            <SpriteLayer @onSpritesDragEnd="onSpritesDragEnd" :offsetConfig="{
-                offsetX: (props.width / scale - spxMapConfig.width) / 2,
-                offsetY: (props.height / scale - spxMapConfig.height) / 2
-            }" :spriteList="props.project.sprite.list" :zorder="props.project.backdrop.config.zorder"
-                :mapConfig="spxMapConfig" />
-            <v-layer>
-                <v-transformer ref="transformer" :enabledAnchors="[]" :rotateEnabled="false" />
-            </v-layer>
-        </v-stage>
+  <div id="stage-viewer">
+    <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"
+      @mousedown="onStageClick"
+      @contextmenu="onStageMenu"
+      :config="{
+        width: props.width,
+        height: props.height,
+        scaleX: scale,
+        scaleY: scale
+      }"
+    >
+      <BackdropLayer
+        @onSceneLoadend="onSceneLoadend"
+        :backdropConfig="backdrop"
+        :offsetConfig="{
+          offsetX: (props.width / scale - spxMapConfig.width) / 2,
+          offsetY: (props.height / scale - spxMapConfig.height) / 2
+        }"
+        :mapConfig="spxMapConfig"
+      />
+      <SpriteLayer
+        :offsetConfig="{
+          offsetX: (props.width / scale - spxMapConfig.width) / 2,
+          offsetY: (props.height / scale - spxMapConfig.height) / 2
+        }"
+        :spriteList="props.project.sprite.list"
+        :zorder="props.project.backdrop.config.zorder"
+        :selectedSpriteNames="stageSelectSpritesName"
+        :mapConfig="spxMapConfig"
+      />
+      <v-layer>
+        <v-transformer
+          ref="transformer"
+          :enabledAnchors="[]"
+          :rotateEnabled="false"
+          :config="{
+            borderDash: [6, 6]
+          }"
+        />
+      </v-layer>
+    </v-stage>
+  </div>
 </template>
 <script setup lang="ts">
-import { computed, ref, watch, withDefaults } from 'vue';
-import type { ComputedRef } from 'vue';
-import type { StageViewerEmits, StageViewerProps, MapConfig, SpriteDragEndEvent, StageBackdrop, StageSprite } from './index';
-import SpriteLayer from './SpriteLayer.vue';
-import BackdropLayer from './BackdropLayer.vue';
-import type { KonvaEventObject, Node } from 'konva/lib/Node';
-import type { Stage } from 'konva/lib/Stage';
-import type { SpriteList } from '@/class/asset-list';
-import type { Sprite as SpriteConfig } from "@/class/sprite"
+import { computed, ref, watch, withDefaults } from 'vue'
+import type { ComputedRef } from 'vue'
+import type {
+  StageViewerEmits,
+  StageViewerProps,
+  MapConfig,
+  SpriteDragEndEvent,
+  StageBackdrop,
+  StageSprite
+} from './index'
+import SpriteLayer from './SpriteLayer.vue'
+import BackdropLayer from './BackdropLayer.vue'
+import type { KonvaEventObject, Node } from 'konva/lib/Node'
+import type { Stage } from 'konva/lib/Stage'
+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
-    width: 400// container width
-});
-const emits = defineEmits<StageViewerEmits>();
+  height: 400, // container height
+  width: 400 // container width
+})
+const emits = defineEmits<StageViewerEmits>()
 
-// instance of konva's stage & menu 
-const stage = ref<Stage>();
+// instance of konva's stage & menu
+const stage = ref<Stage>()
 const transformer = ref()
-const menu = ref();
-
-// Which sprite is selected
-const selectedSprite = ref<Node | null>();
+const menu = ref()
 
 // get spx map size
 const spxMapConfig = ref<MapConfig>({
-    width: 400,
-    height: 400
-});
+  width: 400,
+  height: 400
+})
 
 // get the scale of stage viewer
 const scale = computed(() => {
-    const el = document.getElementById("stage-viewer");
-    if (spxMapConfig.value && el) {
-        const widthScale = el.clientWidth / spxMapConfig.value.width;
-        const heightScale = el.clientHeight / spxMapConfig.value.height;
-        console.log(Math.min(widthScale, heightScale, 1))
-        return Math.min(widthScale, heightScale, 1);
-    }
-    return 1;
-});
+  const el = document.getElementById('stage-viewer')
+  if (spxMapConfig.value && el) {
+    const widthScale = el.clientWidth / spxMapConfig.value.width
+    const heightScale = el.clientHeight / spxMapConfig.value.height
+    console.log(Math.min(widthScale, heightScale, 1))
+    return Math.min(widthScale, heightScale, 1)
+  }
+  return 1
+})
 
-watch(() => props.project, (new_project, old_project) => {
+watch(
+  () => props.project,
+  (new_project, old_project) => {
     console.log(new_project, old_project)
     if (new_project.id !== old_project.id) {
-        // witch project have map config,this will confirm the stage size
-        // When there is no map, it does not end the loading and waits for the background layer to send new loaded content
-        if (new_project.backdrop.config.map) {
-            spxMapConfig.value = new_project.backdrop.config.map;
-        }
-        // If there is no map, but there is a backdrop scene or backdrop costume, it will end the loading and wait for the sprite layer to send new loaded content 
-        else if ((!new_project.backdrop.config.scenes || new_project.backdrop.config.scenes.length === 0) && (!new_project.backdrop.config.costumes || new_project.backdrop.config.costumes.length === 0)) {
-            console.error("Project missing backdrop configuration or map size configuration");
-        }
+      // witch project have map config,this will confirm the stage size
+      // When there is no map, it does not end the loading and waits for the background layer to send new loaded content
+      if (new_project.backdrop.config.map) {
+        spxMapConfig.value = new_project.backdrop.config.map
+      }
+      // If there is no map, but there is a backdrop scene or backdrop costume, it will end the loading and wait for the sprite layer to send new loaded content
+      else if (
+        (!new_project.backdrop.config.scenes || new_project.backdrop.config.scenes.length === 0) &&
+        (!new_project.backdrop.config.costumes || new_project.backdrop.config.costumes.length === 0)
+      ) {
+        console.error('Project missing backdrop configuration or map size configuration')
+      }
     }
-}, {
+  },
+  {
     deep: true
-})
+  }
+)
 
-watch(() => props.selectedSpriteNames, (spriteNames) => {
-    if (stage.value) {
-        showSelectedTranformer()
+//  which are selected
+const stageSelectSpritesName = ref<string[]>([])
+watch(
+  () => props.selectedSpriteNames,
+  (spriteNames) => {
+    if (spriteNames.every((name, index) => name === stageSelectSpritesName.value[index])) {
+      return
     }
-})
+    stageSelectSpritesName.value = spriteNames
+  }
+)
+
+// selected sprite change tigger transformer show or hide
+watch(
+  () => stageSelectSpritesName.value,
+  (spritesName) => {
+    console.log(spritesName, props.selectedSpriteNames, stageSelectSpritesName.value)
+    if (
+      props.selectedSpriteNames.length !== stageSelectSpritesName.value.length ||
+      !props.selectedSpriteNames.every(
+        (name, index) => name === stageSelectSpritesName.value[index]
+      )
+    ) {
+      emits('onSelectedSpriteChange', { names: stageSelectSpritesName.value })
+    }
+    showSelectedTranformer()
+  }
+)
 
 const backdrop = computed(() => {
-    const { files, config } = props.project.backdrop;
-    console.log(files, config)
-    return props.project.backdrop.config.map ? null : {
-        scenes: config.scenes?.map((scene, index) => ({
+  const { files, config } = props.project.backdrop
+  console.log(files, config)
+  return props.project.backdrop.config.map
+    ? null
+    : ({
+        scenes:
+          config.scenes?.map((scene, index) => ({
             name: scene.name as string,
             url: files[index].url as string
-        })) || [],
-        costumes: config.costumes?.map((costume, index) => ({
+          })) || [],
+        costumes:
+          config.costumes?.map((costume, index) => ({
             name: costume.name as string,
             url: files[index].url as string,
             x: costume.x || 0,
             y: costume.y || 0
-        })) || [],
+          })) || [],
         currentCostumeIndex: config.currentCostumeIndex || 0
-    } as StageBackdrop
+      } as StageBackdrop)
 })
 
-
-
-
-
-// When config is not configured, its stage size is determined by the background image 
+// When config is not configured, its stage size is determined by the background image
 const onSceneLoadend = (event: { imageEl: HTMLImageElement }) => {
-    if (!props.project.backdrop.config.map) {
-        const { imageEl } = event;
-        spxMapConfig.value = {
-            width: imageEl.width,
-            height: imageEl.height
-        };
-        // loading.value = false;
+  if (!props.project.backdrop.config.map) {
+    const { imageEl } = event
+    spxMapConfig.value = {
+      width: imageEl.width,
+      height: imageEl.height
     }
-};
+    // loading.value = false;
+  }
+}
 
 // show stage menu
 const onStageMenu = (e: KonvaEventObject<MouseEvent>) => {
-    e.evt.preventDefault();
-    if (!stage.value) return;
-    // only the sprite need contextmenu
-    if (e.target === stage.value || e.target.parent!.attrs.name !== 'sprite') {
-        menu.value.style.display = 'none';
-        selectedSprite.value = null
-        return;
-    }
-    selectedSprite.value = e.target;
-    menu.value.style.display = 'block';
-    menu.value.style.top = stage.value.getPointerPosition()!.y + 4 + 'px';
-    menu.value.style.left = stage.value.getPointerPosition()!.x + 4 + 'px';
-
+  e.evt.preventDefault()
+  if (!stage.value) return
+  // only the sprite need contextmenu
+  if (e.target === stage.value || e.target.parent!.attrs.name !== 'sprite') {
+    menu.value.style.display = 'none'
+    stageSelectSpritesName.value = []
+    return
+  }
+  if (e.target.getAttr('spriteName')) {
+    stageSelectSpritesName.value = [e.target.getAttr('spriteName')]
+    menu.value.style.display = 'block'
+    menu.value.style.top = stage.value.getStage().getPointerPosition()!.y + 4 + 'px'
+    menu.value.style.left = stage.value.getStage().getPointerPosition()!.x + 4 + 'px'
+  }
 }
 
 // hide stage menu
 const onStageMenuMouseLeave = (e: MouseEvent) => {
-    menu.value.style.display = 'none';
-    selectedSprite.value = null
+  menu.value.style.display = 'none'
+  stageSelectSpritesName.value = []
 }
 
 const onStageClick = (e: KonvaEventObject<MouseEvent>) => {
-    if (e.target.parent!.attrs.name !== 'sprite') {
-        console.log('click stage')
-        emits('onSelectedSpriteChange', { names: [] })
-    }
-    const name = e.target!.attrs.spriteName
-    console.log(name)
-    const transformerNode = transformer.value.getNode();
-
-    if (name) {
-        transformerNode.nodes([e.target]);
-    } else {
-        transformerNode.nodes([]);
-    }
+  // clear choose sprite
+  if (e.target.parent!.attrs.name !== 'sprite') {
+    stageSelectSpritesName.value = []
+  }
+  const name = e.target!.attrs.spriteName
+  if (name) {
+    stageSelectSpritesName.value = [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.indexOf(spriteName);
-    let newIndex: number;
-    if (direction === 'up') {
-        newIndex = currentIndex + 1;
-        selectedSprite.value.moveUp();
-    } else if (direction === 'down') {
-        newIndex = currentIndex - 1;
-        selectedSprite.value.moveDown();
-    } else if (direction === 'top') {
-        newIndex = zorderList.length - 1;
-        selectedSprite.value.moveToTop();
-    } else if (direction === 'bottom') {
-        newIndex = 0;
-        selectedSprite.value.moveToBottom();
-    } else {
-        return;
-    }
+  if (!stageSelectSpritesName.value.length) return
 
-    if (currentIndex >= 0 && newIndex >= 0 && newIndex < zorderList.length) {
-        const newZorderList = [...zorderList];
-        const [movedSprite] = newZorderList.splice(currentIndex, 1);
-        newZorderList.splice(newIndex, 0, movedSprite);
-        props.project.backdrop.config.zorder = newZorderList;
-        // emits('onZorderChange', { zorder: newZorderList });
-    }
+  // move single sprite
+  const zorderList = props.project.backdrop.config.zorder
+  console.log(stageSelectSpritesName.value)
+  const spriteName = stageSelectSpritesName.value[0]
+  const currentIndex = zorderList.indexOf(spriteName)
+  const node = stage.value!.getStage().findOne((node: Node) => {
+    console.log(node.getAttr('spriteName'), spriteName)
 
-    menu.value.style.display = 'none';
-};
+    return node.getAttr('spriteName') === spriteName
+  }) as Node
+  console.log(node)
+  let newIndex: number
+  if (direction === 'up') {
+    newIndex = currentIndex + 1
+    node.moveUp()
+  } else if (direction === 'down') {
+    newIndex = currentIndex - 1
+    node.moveDown()
+  } else if (direction === 'top') {
+    newIndex = zorderList.length - 1
+    node.moveToTop()
+  } else if (direction === 'bottom') {
+    newIndex = 0
+    node.moveToBottom()
+  } else {
+    return
+  }
+
+  if (currentIndex >= 0 && newIndex >= 0 && newIndex < zorderList.length) {
+    const newZorderList = [...zorderList]
+    const [movedSprite] = newZorderList.splice(currentIndex, 1)
+    newZorderList.splice(newIndex, 0, movedSprite)
+    props.project.backdrop.config.zorder = newZorderList
+    // emits('onZorderChange', { zorder: newZorderList });
+  }
+
+  menu.value.style.display = 'none'
+}
 
 const showSelectedTranformer = () => {
+  setTimeout(() => {
     if (!stage.value) return
-    const spriteNames = props.selectedSpriteNames;
+    console.log(stageSelectSpritesName.value)
+    const spriteNames = stageSelectSpritesName.value
     const nodes = stage.value.getStage().find((node: Node) => {
-        if (node.getAttr('spriteName') && spriteNames.includes(node.getAttr('spriteName'))) {
-
-            return true
-        } else {
-            return false
-        }
+      if (node.getAttr('spriteName') && spriteNames.includes(node.getAttr('spriteName'))) {
+        node.clone
+        return true
+      } else {
+        return false
+      }
     })
-    const transformerNode = transformer.value.getNode();
-    transformerNode.nodes(nodes);
-}
 
-// drag sprite
-const onSpritesDragEnd = (e: { spriteList: SpriteConfig[] }) => {
-    emits("onSelectedSpriteChange", { names: e.spriteList.map(s => s.name) })
+    const transformerNode = transformer.value.getNode()
+    if (nodes.length) {
+      console.log(nodes)
+      transformerNode.nodes(nodes)
+    } else {
+      transformerNode.nodes([])
+    }
+  }, 1)
 }
 
-
-
-
+// drag sprite
+// const onSpritesDragEnd = (e: { spriteList: SpriteConfig[] }) => {
+//     emits("onSelectedSpriteChange", { names: e.spriteList.map(s => s.name) })
+// }
 </script>
 <style scoped>
 #stage-viewer {
-    position: relative;
-    height: v-bind("props.height + 'px'");
-    width: v-bind("props.width + 'px'");
+  position: relative;
+  height: v-bind("props.height + 'px'");
+  width: v-bind("props.width + 'px'");
 }
 
 #menu {
-    z-index: 999;
-    display: none;
-    position: absolute;
-    width: 60px;
-    background-color: white;
-    box-shadow: 0 0 5px grey;
-    border-radius: 3px;
+  z-index: 999;
+  display: none;
+  position: absolute;
+  width: 60px;
+  background-color: white;
+  box-shadow: 0 0 5px grey;
+  border-radius: 3px;
 }
 
-#menu>div {
-    display: flex;
-    justify-content: center;
-    cursor: pointer;
-    padding: 4px;
+#menu > div {
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  padding: 4px;
 }
 
-#menu>div:hover {
-    display: flex;
-    justify-content: center;
-    background-color: #f0f0f0;
+#menu > div:hover {
+  display: flex;
+  justify-content: center;
+  background-color: #f0f0f0;
 }
-</style>
\ No newline at end of file
+</style>