diff --git a/spx-gui/src/components/spx-stage/SpxStage.vue b/spx-gui/src/components/spx-stage/SpxStage.vue
index f29662920..4728324fd 100644
--- a/spx-gui/src/components/spx-stage/SpxStage.vue
+++ b/spx-gui/src/components/spx-stage/SpxStage.vue
@@ -2,7 +2,7 @@
  * @Author: Zhang zhiyang
  * @Date: 2024-01-15 14:56:59
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-23 14:10:06
+ * @LastEditTime: 2024-02-23 14:34:08
  * @FilePath: \spx-gui\src\components\spx-stage\SpxStage.vue
  * @Description: 
 -->
@@ -10,20 +10,19 @@
   <div class="spx-stage">
     <div class="stage-button">{{ $t('component.stage') }}</div>
     <n-button type="success" class="stage-run-button" @click="run">{{ $t('stage.run') }}</n-button>
-    <iframe src="/main.html" frameborder="0" v-if="show" class="show"></iframe>
-    <div class="stage-viewer-container" v-else>
+    <iframe v-if="show" src="/main.html" frameborder="0" class="show"></iframe>
+    <div v-else class="stage-viewer-container">
       <StageViewer
-        :selectedSpriteNames="selectedSpriteNames"
+        :selected-sprite-names="selectedSpriteNames"
         :project="projectStore.project as Project"
-        @onSelectedSpriteChange="onSelectedSpriteChange"
+        @on-selected-sprite-change="onSelectedSpriteChange"
       ></StageViewer>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { defineProps, ref, computed, watch } from 'vue'
-import type { ComputedRef } from 'vue'
+import { ref, watch } from 'vue'
 import { NButton } from 'naive-ui'
 import { useProjectStore } from '@/store/modules/project'
 import { useSpriteStore } from '@/store'
diff --git a/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue b/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
index 20df39a4f..87c828cb3 100644
--- a/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
+++ b/spx-gui/src/components/stage-viewer-demo/StageViewerDemo.vue
@@ -2,170 +2,251 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-02-05 14:18:34
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-23 13:54:02
+ * @LastEditTime: 2024-02-23 14:34:44
  * @FilePath: \spx-gui\src\components\stage-viewer-demo\StageViewerDemo.vue
  * @Description:
 -->
 <template>
-    <div style="display: flex;">
+  <div style="display: flex">
+    <div>
+      <input type="file" accept=".zip" @change="importFile" />
+      <div>
+        <p>active in stage</p>
+        <div style="display: flex">
+          <div
+            v-for="sprite in project.sprite.list"
+            :key="sprite.name"
+            style="display: flex; flex-direction: column; justify-content: flex-end"
+          >
+            <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
+              :style="currentSprite?.name === sprite.name ? { color: 'red' } : {}"
+              @click="
+                () => {
+                  currentSprite = sprite
+                  selectedSpriteNames = [sprite.name]
+                }
+              "
+            >
+              {{ 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
+      :selected-sprite-names="selectedSpriteNames"
+      :project="project as Project"
+      @on-selected-sprite-change="onSelectedSpriteChange"
+    />
+  </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 { 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 currentSprite = ref<Sprite | null>(null);
+import { NInputNumber, NSwitch } from 'naive-ui'
+import type { Sprite } from '@/class/sprite'
+import StageViewer from '../stage-viewer'
+import type { SelectedSpriteChangeEvent } from '../stage-viewer'
+import { useProjectStore } from '@/store/modules/project'
+import type { Project } from '@/class/project'
+import { storeToRefs } from 'pinia'
+import { ref, computed } from 'vue'
+
+const projectStore = useProjectStore()
+const { project } = storeToRefs(projectStore)
+
+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
 })
 
 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
-
-        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
-        }
+  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
     }
+  }
 }
 
 // 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 b8a9a7ff4..d220a4319 100644
--- a/spx-gui/src/components/stage-viewer/BackdropLayer.vue
+++ b/spx-gui/src/components/stage-viewer/BackdropLayer.vue
@@ -2,7 +2,7 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-02-05 16:33:54
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-23 12:16:47
+ * @LastEditTime: 2024-02-23 14:33:34
  * @FilePath: \spx-gui\src\components\stage-viewer\BackdropLayer.vue
  * @Description
 -->
@@ -86,7 +86,7 @@ const backdrop = computed(() => {
 
 watch(
   () => backdrop.value,
-  (new_config, old_config) => {
+  (new_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()
diff --git a/spx-gui/src/components/stage-viewer/Costume.vue b/spx-gui/src/components/stage-viewer/Costume.vue
index bd47c7d23..42fb939e0 100644
--- a/spx-gui/src/components/stage-viewer/Costume.vue
+++ b/spx-gui/src/components/stage-viewer/Costume.vue
@@ -3,15 +3,13 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-25 14:19:57
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-23 11:55:38
+ * @LastEditTime: 2024-02-23 14:33:03
  * @FilePath: \spx-gui\src\components\stage-viewer\Costume.vue
  * @Description: 
 -->
 <template>
   <v-image
     ref="costume"
-    @dragmove="onDragMove"
-    @dragend="handleDragEnd"
     :config="{
       spriteName: props.spriteConfig.name,
       image: image,
@@ -24,6 +22,8 @@
       scaleX: props.spriteConfig.config.size,
       scaleY: props.spriteConfig.config.size
     }"
+    @dragmove="onDragMove"
+    @dragend="handleDragEnd"
   />
 </template>
 <script setup lang="ts">
@@ -146,8 +146,10 @@ const onDragMove = (event: KonvaEventObject<MouseEvent>) => {
  */
 const handleDragEnd = (event: { target: { attrs: { x: number; y: number } } }) => {
   const position = getSpxPostion(event.target.attrs.x, event.target.attrs.y)
+  // eslint-disable-next-line
   props.spriteConfig.config.x = position.x
+  // eslint-disable-next-line
   props.spriteConfig.config.y = position.y
   controller.value = null
 }
-</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 66f49a12a..1294bf4d9 100644
--- a/spx-gui/src/components/stage-viewer/Sprite.vue
+++ b/spx-gui/src/components/stage-viewer/Sprite.vue
@@ -3,22 +3,22 @@
  * @Author: Zhang Zhi Yang
  * @Date: 2024-01-24 15:48:38
  * @LastEditors: Zhang Zhi Yang
- * @LastEditTime: 2024-02-23 12:07:13
+ * @LastEditTime: 2024-02-23 14:31:21
  * @FilePath: \spx-gui\src\components\stage-viewer\Sprite.vue
  * @Description: 
 -->
 <template>
   <Costume
-    @onDragMove="onDragMove"
-    :spriteConfig="props.spriteConfig"
+    :sprite-config="props.spriteConfig"
     :selected="props.selected"
-    :mapConfig="props.mapConfig"
+    :map-config="props.mapConfig"
+    @on-drag-move="onDragMove"
   >
   </Costume>
 </template>
 <script lang="ts" setup>
 import Costume from './Costume.vue'
-import { defineProps, computed, defineEmits } from 'vue'
+import { defineProps, defineEmits } from 'vue'
 import type { Sprite as SpriteConfig } from '@/class/sprite'
 import type { SpriteDragMoveEvent, MapConfig } from './common'
 // ----------props & emit------------------------------------
diff --git a/spx-gui/src/components/stage-viewer/SpriteLayer.vue b/spx-gui/src/components/stage-viewer/SpriteLayer.vue
index b833f201d..663e8f411 100644
--- a/spx-gui/src/components/stage-viewer/SpriteLayer.vue
+++ b/spx-gui/src/components/stage-viewer/SpriteLayer.vue
@@ -18,10 +18,10 @@
     <template v-for="sprite in sortedSprites" :key="sprite.name">
       <Sprite
         v-if="sprite.config.visible"
-        @onDragMove="onSpriteDragMove"
-        :spriteConfig="sprite"
-        :mapConfig="props.mapConfig"
+        :sprite-config="sprite"
+        :map-config="props.mapConfig"
         :selected="selectedSpriteNames.includes(sprite.name)"
+        @on-drag-move="onSpriteDragMove"
       >
       </Sprite>
     </template>
@@ -64,4 +64,4 @@ const sortedSprites = computed(() => {
 const onSpriteDragMove = (e: SpriteDragMoveEvent) => {
   emits('onSpriteDragMove', e)
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/spx-gui/src/components/stage-viewer/StageViewer.vue b/spx-gui/src/components/stage-viewer/StageViewer.vue
index 031e5ddb3..df035e336 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-23 12:06:33
+ * @LastEditTime: 2024-02-23 14:30:37
  * @FilePath: \spx-gui\src\components\stage-viewer\StageViewer.vue
  * @Description: 
 -->
@@ -16,34 +16,34 @@
     </div>
     <v-stage
       ref="stage"
-      @mousedown="onStageClick"
-      @contextmenu="onStageMenu"
       :config="{
         width: props.width,
         height: props.height,
         scaleX: scale,
         scaleY: scale
       }"
+      @mousedown="onStageClick"
+      @contextmenu="onStageMenu"
     >
       <BackdropLayer
-        @onSceneLoadend="onSceneLoadend"
-        :backdropConfig="props.project.backdrop"
-        :offsetConfig="{
+        :backdrop-config="props.project.backdrop"
+        :offset-config="{
           offsetX: (props.width / scale - spxMapConfig.width) / 2,
           offsetY: (props.height / scale - spxMapConfig.height) / 2
         }"
-        :mapConfig="spxMapConfig"
+        :map-config="spxMapConfig"
+        @on-scene-loadend="onSceneLoadend"
       />
       <SpriteLayer
-        @onSpriteDragMove="onSpriteDragMove"
-        :offsetConfig="{
+        :offset-config="{
           offsetX: (props.width / scale - spxMapConfig.width) / 2,
           offsetY: (props.height / scale - spxMapConfig.height) / 2
         }"
-        :spriteList="props.project.sprite.list"
+        :sprite-list="props.project.sprite.list"
         :zorder="props.project.backdrop.config.zorder"
-        :selectedSpriteNames="stageSelectSpritesName"
-        :mapConfig="spxMapConfig"
+        :selected-sprite-names="stageSelectSpritesName"
+        :map-config="spxMapConfig"
+        @on-sprite-drag-move="onSpriteDragMove"
       />
       <v-layer
         :config="{
@@ -54,12 +54,12 @@
       >
         <v-transformer
           ref="transformer"
-          :enabledAnchors="[]"
-          :rotateEnabled="false"
           :config="{
-            borderDash: [6, 6]
+            enabledAnchors: [],
+            borderDash: [6, 6],
+            rotateEnabled: false,
+            draggable: true
           }"
-          :draggable="true"
         />
         <!-- The top layer's controller of the selected sprite,and the controller's and the controllable size is consistent with the sprite. -->
         <template v-for="[spritename, selectSprite] of selectedControllerMap" :key="spritename">
@@ -138,8 +138,6 @@ const scale = computed(() => {
   return 1
 })
 
-
-
 watch(
   () => props.project,
   (new_project, old_project) => {
@@ -256,7 +254,7 @@ const onStageMenu = (e: KonvaEventObject<MouseEvent>) => {
 }
 
 // hide stage menu
-const onStageMenuMouseLeave = (e: MouseEvent) => {
+const onStageMenuMouseLeave = () => {
   menu.value.style.display = 'none'
   stageSelectSpritesName.value = []
 }
@@ -308,8 +306,9 @@ const moveSprite = (direction: 'up' | 'down' | 'top' | 'bottom') => {
     const newZorderList = [...zorderList]
     const [movedSprite] = newZorderList.splice(currentIndex, 1)
     newZorderList.splice(newIndex, 0, movedSprite)
+
+    // eslint-disable-next-line
     props.project.backdrop.config.zorder = newZorderList
-    // emits('onZorderChange', { zorder: newZorderList });
   }
 
   menu.value.style.display = 'none'