loading state resist to sprite add/remove/rename

spx-gui/src/components/editor/preview/stage-viewer/SpriteItem.vue

@@ -27,7 +27,7 @@ import { round } from '@/utils/utils'
 const props = defineProps<{
   sprite: Sprite
   mapSize: Size
-  spritesReadyMap: Map<string, boolean>
+  spritesReadyMap: Map<Sprite, boolean>
 }>()
 
 const nodeRef = ref<any>()
@@ -37,16 +37,14 @@ const bitmapResolution = computed(() => costume.value?.bitmapResolution ?? 1)
 const image = useImgFile(() => costume.value?.img)
 
 watchEffect((onCleanup) => {
-  // We need to notify event ready for SpriteTransformer (to get correct node size)
-  const name = props.sprite.name
   const img = image.value
-  onCleanup(() => props.spritesReadyMap.delete(props.sprite.name))
   if (img == null) {
-    props.spritesReadyMap.set(props.sprite.name, false)
+    props.spritesReadyMap.set(props.sprite, false)
     return
   }
   function handleImageLoad() {
-    props.spritesReadyMap.set(name, true)
+    // We need to notify event ready for SpriteTransformer (to get correct node size)
+    props.spritesReadyMap.set(props.sprite, true)
   }
   img.addEventListener('load', handleImageLoad)
   onCleanup(() => img.removeEventListener('load', handleImageLoad))

spx-gui/src/components/editor/preview/stage-viewer/SpriteTransformer.vue

@@ -7,9 +7,10 @@ import { effect, ref } from 'vue'
 import type { Transformer } from 'konva/lib/shapes/Transformer'
 import type { Node } from 'konva/lib/Node'
 import { useEditorCtx } from '../../EditorContextProvider.vue'
+import type { Sprite } from '@/models/sprite'
 
 const props = defineProps<{
-  spritesReadyMap: Map<string, boolean>
+  spritesReady: (sprite: Sprite) => boolean
 }>()
 
 const transformer = ref<any>()
@@ -24,7 +25,7 @@ effect(async () => {
     return
   }
   // Wait for sprite ready, so that Konva can get correct node size
-  if (!props.spritesReadyMap.get(sprite.name)) return
+  if (!props.spritesReady(sprite)) return
   const stage = transformerNode.getStage()
   if (stage == null) throw new Error('no stage')
   const selectedNode = stage.findOne((node: Node) => node.getAttr('spriteName') === sprite.name)

spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue

@@ -20,7 +20,7 @@
         />
       </v-layer>
       <v-layer>
-        <SpriteTransformer :sprites-ready-map="spritesReadyMap" />
+        <SpriteTransformer :sprites-ready="(sprite) => !!spritesReadyMap.get(sprite)" />
       </v-layer>
     </v-stage>
     <UIDropdown trigger="manual" :visible="menuVisible" :pos="menuPos" placement="bottom-start">
@@ -44,7 +44,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import type { KonvaEventObject } from 'konva/lib/Node'
 import type { Stage } from 'konva/lib/Stage'
 import { UIDropdown, UILoading, UIMenu, UIMenuItem } from '@/components/ui'
@@ -63,7 +63,23 @@ const containerSize = useContentSize(conatiner)
 const stageRef = ref<any>()
 const mapSize = useAsyncComputed(() => editorCtx.project.stage.getMapSize())
 
-const spritesReadyMap = ref(new Map<string, boolean>())
+const spritesReadyMap = ref(new Map<Sprite, boolean>())
+watch(
+  () => [...editorCtx.project.sprites],
+  () => {
+    for (const sprite of spritesReadyMap.value.keys()) {
+      if (!editorCtx.project.sprites.includes(sprite)) {
+        spritesReadyMap.value.delete(sprite)
+      }
+    }
+    for (const sprite of editorCtx.project.sprites) {
+      if (!spritesReadyMap.value.has(sprite)) {
+        spritesReadyMap.value.set(sprite, false)
+      }
+    }
+  },
+  { immediate: true }
+)
 
 /** containerSize / mapSize */
 const scale = computed(() => {