From b1550a8927166b8b989a2bc33653d2d319aa98dc Mon Sep 17 00:00:00 2001
From: ComfyFluffy <24245520+ComfyFluffy@users.noreply.github.com>
Date: Tue, 7 May 2024 15:34:57 +0800
Subject: [PATCH 1/7] add loading for runner

---
 .../project/runner/IframeDisplay.vue          | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/spx-gui/src/components/project/runner/IframeDisplay.vue b/spx-gui/src/components/project/runner/IframeDisplay.vue
index 93bc6d55a..02af87028 100644
--- a/spx-gui/src/components/project/runner/IframeDisplay.vue
+++ b/spx-gui/src/components/project/runner/IframeDisplay.vue
@@ -1,5 +1,8 @@
 <template>
-  <iframe ref="iframe" class="runner" frameborder="0" src="about:blank" />
+  <div class="iframe-container">
+    <iframe ref="iframe" class="iframe" frameborder="0" src="about:blank" />
+    <UILoading v-if="loading" class="loading" />
+  </div>
 </template>
 <script setup lang="ts">
 const emit = defineEmits<{
@@ -16,11 +19,14 @@ import rawRunnerHtml from '@/assets/ispx/runner.html?raw'
 import wasmExecUrl from '@/assets/wasm_exec.js?url'
 import wasmUrl from '@/assets/ispx/main.wasm?url'
 import { watch } from 'vue'
+import { UILoading } from '@/components/ui'
 
 const { zipData } = defineProps<{ zipData: ArrayBuffer | Uint8Array }>()
 
 const iframe = ref<HTMLIFrameElement>()
 
+const loading = ref(true)
+
 watch(iframe, () => {
   const iframeWindow = iframe.value?.contentWindow as IframeWindow | null | undefined
   if (!iframeWindow) {
@@ -37,6 +43,7 @@ watch(iframe, () => {
     const canvas = iframeWindow.document.querySelector('canvas')
     if (canvas == null) throw new Error('canvas expected in iframe')
     canvas.focus() // focus to canvas by default, so the user can interact with the game immediately
+    loading.value = false
   })
   iframeWindow.console.log = function (...args: unknown[]) {
     // eslint-disable-next-line no-console
@@ -49,3 +56,21 @@ watch(iframe, () => {
   }
 })
 </script>
+
+<style scoped lang="scss">
+.iframe-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.iframe {
+  width: 100%;
+  height: 100%;
+}
+
+.loading {
+  position: absolute;
+}
+</style>

From c97a0b70ed750b2fe6f2ccc7dbff821ec9543d39 Mon Sep 17 00:00:00 2001
From: ComfyFluffy <24245520+ComfyFluffy@users.noreply.github.com>
Date: Wed, 8 May 2024 21:08:04 +0800
Subject: [PATCH 2/7] loading for sprites/sounds in panel

---
 spx-gui/src/components/editor/panels/common/PanelItem.vue | 8 +++++++-
 spx-gui/src/components/editor/panels/sound/SoundItem.vue  | 8 +++++++-
 .../src/components/editor/panels/sprite/SpriteItem.vue    | 2 +-
 spx-gui/src/components/share/SharePage.vue                | 8 ++++++++
 4 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/spx-gui/src/components/editor/panels/common/PanelItem.vue b/spx-gui/src/components/editor/panels/common/PanelItem.vue
index f84e64e77..d13a7156d 100644
--- a/spx-gui/src/components/editor/panels/common/PanelItem.vue
+++ b/spx-gui/src/components/editor/panels/common/PanelItem.vue
@@ -7,15 +7,17 @@
     <div class="remove" @click.stop="emit('remove')">
       <UIIcon class="icon" type="trash" />
     </div>
+    <UILoading v-if="loading" class="loading" />
   </li>
 </template>
 
 <script setup lang="ts">
-import { UIIcon } from '@/components/ui'
+import { UIIcon, UILoading } from '@/components/ui'
 
 const props = defineProps<{
   active: boolean
   name: string
+  loading?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -24,6 +26,10 @@ const emit = defineEmits<{
 </script>
 
 <style lang="scss" scoped>
+.loading {
+  position: absolute;
+}
+
 .panel-item {
   display: flex;
   flex-direction: column;
diff --git a/spx-gui/src/components/editor/panels/sound/SoundItem.vue b/spx-gui/src/components/editor/panels/sound/SoundItem.vue
index 54236035c..688fc0026 100644
--- a/spx-gui/src/components/editor/panels/sound/SoundItem.vue
+++ b/spx-gui/src/components/editor/panels/sound/SoundItem.vue
@@ -1,5 +1,11 @@
 <template>
-  <PanelItem class="sound-item" :active="active" :name="props.sound.name" @remove="emit('remove')">
+  <PanelItem
+    class="sound-item"
+    :active="active"
+    :name="props.sound.name"
+    :loading="!audioSrc"
+    @remove="emit('remove')"
+  >
     <div class="content">
       <SoundPlayer :src="audioSrc" :color="uiVariables.color.sound" />
     </div>
diff --git a/spx-gui/src/components/editor/panels/sprite/SpriteItem.vue b/spx-gui/src/components/editor/panels/sprite/SpriteItem.vue
index 533d6ce0b..97c007f19 100644
--- a/spx-gui/src/components/editor/panels/sprite/SpriteItem.vue
+++ b/spx-gui/src/components/editor/panels/sprite/SpriteItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <PanelItem :active="active" :name="props.sprite.name" @remove="emit('remove')">
+  <PanelItem :active="active" :name="props.sprite.name" :loading="!imgSrc" @remove="emit('remove')">
     <div class="img" :style="imgStyle"></div>
   </PanelItem>
 </template>
diff --git a/spx-gui/src/components/share/SharePage.vue b/spx-gui/src/components/share/SharePage.vue
index 47f3bce74..1589c42cc 100644
--- a/spx-gui/src/components/share/SharePage.vue
+++ b/spx-gui/src/components/share/SharePage.vue
@@ -1,5 +1,6 @@
 <template>
   <RunnerContainer v-if="project" mode="share" :project="project" />
+  <UILoading v-else class="loading" />
 </template>
 <script setup lang="ts">
 import { watch } from 'vue'
@@ -7,6 +8,7 @@ import { useRoute } from 'vue-router'
 import { ref } from 'vue'
 import { Project } from '@/models/project'
 import RunnerContainer from '../project/runner/RunnerContainer.vue'
+import { UILoading } from '../ui'
 
 const route = useRoute()
 const project = ref<Project>()
@@ -26,3 +28,9 @@ watch(
   { deep: true, immediate: true }
 )
 </script>
+<style lang="scss" scoped>
+.loading {
+  height: 100%;
+  width: 100%;
+}
+</style>

From 3c7f507d865fa889a529b1a7a23518ded212b7d1 Mon Sep 17 00:00:00 2001
From: ComfyFluffy <24245520+ComfyFluffy@users.noreply.github.com>
Date: Wed, 8 May 2024 22:02:08 +0800
Subject: [PATCH 3/7] stage loading

---
 .../preview/stage-viewer/SpriteItem.vue       | 10 +++----
 .../stage-viewer/SpriteTransformer.vue        |  8 +++--
 .../preview/stage-viewer/StageViewer.vue      | 30 +++++++++++++++----
 .../editor/preview/stage-viewer/common.ts     | 14 ---------
 4 files changed, 33 insertions(+), 29 deletions(-)
 delete mode 100644 spx-gui/src/components/editor/preview/stage-viewer/common.ts

diff --git a/spx-gui/src/components/editor/preview/stage-viewer/SpriteItem.vue b/spx-gui/src/components/editor/preview/stage-viewer/SpriteItem.vue
index ff2a9316d..dc79f0e84 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/SpriteItem.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/SpriteItem.vue
@@ -22,12 +22,12 @@ import type { Sprite } from '@/models/sprite'
 import type { Size } from '@/models/common'
 import { useImgFile } from '@/utils/file'
 import { useEditorCtx } from '../../EditorContextProvider.vue'
-import { useSpritesReady } from './common'
 import { round } from '@/utils/utils'
 
 const props = defineProps<{
   sprite: Sprite
   mapSize: Size
+  spritesReadyMap: Map<string, boolean>
 }>()
 
 const nodeRef = ref<any>()
@@ -36,19 +36,17 @@ const costume = computed(() => props.sprite.costume)
 const bitmapResolution = computed(() => costume.value?.bitmapResolution ?? 1)
 const image = useImgFile(() => costume.value?.img)
 
-const spritesReady = useSpritesReady()
-
 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(() => spritesReady.delete(props.sprite.name))
+  onCleanup(() => props.spritesReadyMap.delete(props.sprite.name))
   if (img == null) {
-    spritesReady.set(props.sprite.name, false)
+    props.spritesReadyMap.set(props.sprite.name, false)
     return
   }
   function handleImageLoad() {
-    spritesReady.set(name, true)
+    props.spritesReadyMap.set(name, true)
   }
   img.addEventListener('load', handleImageLoad)
   onCleanup(() => img.removeEventListener('load', handleImageLoad))
diff --git a/spx-gui/src/components/editor/preview/stage-viewer/SpriteTransformer.vue b/spx-gui/src/components/editor/preview/stage-viewer/SpriteTransformer.vue
index 62d73e285..dbdece1a0 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/SpriteTransformer.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/SpriteTransformer.vue
@@ -7,11 +7,13 @@ 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 { useSpritesReady } from './common'
+
+const props = defineProps<{
+  spritesReadyMap: Map<string, boolean>
+}>()
 
 const transformer = ref<any>()
 const editorCtx = useEditorCtx()
-const spritesReady = useSpritesReady()
 
 effect(async () => {
   if (transformer.value == null) return
@@ -22,7 +24,7 @@ effect(async () => {
     return
   }
   // Wait for sprite ready, so that Konva can get correct node size
-  if (!spritesReady.get(sprite.name)) return
+  if (!props.spritesReadyMap.get(sprite.name)) return
   const stage = transformerNode.getStage()
   if (stage == null) throw new Error('no stage')
   const selectedNode = stage.findOne((node: Node) => node.getAttr('spriteName') === sprite.name)
diff --git a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
index f8a81a024..880197456 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
@@ -16,10 +16,11 @@
           :key="sprite.name"
           :sprite="sprite"
           :map-size="mapSize!"
+          :sprites-ready-map="spritesReadyMap"
         />
       </v-layer>
       <v-layer>
-        <SpriteTransformer />
+        <SpriteTransformer :sprites-ready-map="spritesReadyMap" />
       </v-layer>
     </v-stage>
     <UIDropdown trigger="manual" :visible="menuVisible" :pos="menuPos" placement="bottom-start">
@@ -38,14 +39,15 @@
         }}</UIMenuItem>
       </UIMenu>
     </UIDropdown>
+    <UILoading v-if="spritesAndBackdropLoading" class="loading" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import type { KonvaEventObject } from 'konva/lib/Node'
 import type { Stage } from 'konva/lib/Stage'
-import { UIDropdown, UIMenu, UIMenuItem } from '@/components/ui'
+import { UIDropdown, UILoading, UIMenu, UIMenuItem } from '@/components/ui'
 import { useContentSize } from '@/utils/dom'
 import { useAsyncComputed } from '@/utils/utils'
 import type { Sprite } from '@/models/sprite'
@@ -53,9 +55,6 @@ import { useImgFile } from '@/utils/file'
 import { useEditorCtx } from '../../EditorContextProvider.vue'
 import SpriteTransformer from './SpriteTransformer.vue'
 import SpriteItem from './SpriteItem.vue'
-import { provideSpritesReady } from './common'
-
-provideSpritesReady()
 
 const editorCtx = useEditorCtx()
 const conatiner = ref<HTMLElement | null>(null)
@@ -64,6 +63,8 @@ const containerSize = useContentSize(conatiner)
 const stageRef = ref<any>()
 const mapSize = useAsyncComputed(() => editorCtx.project.stage.getMapSize())
 
+const spritesReadyMap = ref(new Map<string, boolean>())
+
 /** containerSize / mapSize */
 const scale = computed(() => {
   if (containerSize.width.value == null || containerSize.height.value == null) return null
@@ -90,6 +91,14 @@ const stageConfig = computed(() => {
 
 const backdropImg = useImgFile(() => editorCtx.project.stage.backdrop?.img)
 
+const spritesAndBackdropLoading = computed(() => {
+  if (backdropImg.value == null) return true
+  return (
+    spritesReadyMap.value.size !== editorCtx.project.sprites.length ||
+    Array.from(spritesReadyMap.value.values()).some((v) => !v)
+  )
+})
+
 const visibleSprites = computed(() => {
   const { zorder, sprites } = editorCtx.project
   return zorder.map((name) => sprites.find((s) => s.name === name)).filter(Boolean) as Sprite[]
@@ -145,5 +154,14 @@ function moveSprite(direction: 'up' | 'down' | 'top' | 'bottom') {
   background-position: center;
   background-repeat: repeat;
   background-size: contain;
+  position: relative;
+}
+
+.loading {
+  position: absolute;
+  z-index: 100;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 255, 255, 0.5);
 }
 </style>
diff --git a/spx-gui/src/components/editor/preview/stage-viewer/common.ts b/spx-gui/src/components/editor/preview/stage-viewer/common.ts
deleted file mode 100644
index 89ac67616..000000000
--- a/spx-gui/src/components/editor/preview/stage-viewer/common.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { inject, provide, reactive, type InjectionKey } from 'vue'
-
-export const spritesReadyKey: InjectionKey<Map<string, boolean>> = Symbol('sprites-status')
-
-export function useSpritesReady() {
-  const s = inject(spritesReadyKey)
-  if (s == null) throw new Error('TODO')
-  return s
-}
-
-export function provideSpritesReady() {
-  const spritesReady = reactive(new Map<string, boolean>())
-  provide(spritesReadyKey, spritesReady)
-}

From ae482704c8a6bbc0a8a5e20e51156e7b1be488a4 Mon Sep 17 00:00:00 2001
From: ComfyFluffy <24245520+ComfyFluffy@users.noreply.github.com>
Date: Wed, 8 May 2024 22:24:19 +0800
Subject: [PATCH 4/7] clean up

---
 .../src/components/editor/preview/stage-viewer/StageViewer.vue  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
index 880197456..2be43ea65 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watchEffect } from 'vue'
+import { computed, ref } from 'vue'
 import type { KonvaEventObject } from 'konva/lib/Node'
 import type { Stage } from 'konva/lib/Stage'
 import { UIDropdown, UILoading, UIMenu, UIMenuItem } from '@/components/ui'

From 3ea73b7d39acd692c7c1b393b1a2a7fd84d719ff Mon Sep 17 00:00:00 2001
From: ComfyFluffy <24245520+ComfyFluffy@users.noreply.github.com>
Date: Thu, 9 May 2024 10:51:54 +0800
Subject: [PATCH 5/7] loading state resist to sprite add/remove/rename

---
 .../preview/stage-viewer/SpriteItem.vue       | 10 ++++-----
 .../stage-viewer/SpriteTransformer.vue        |  5 +++--
 .../preview/stage-viewer/StageViewer.vue      | 22 ++++++++++++++++---
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/spx-gui/src/components/editor/preview/stage-viewer/SpriteItem.vue b/spx-gui/src/components/editor/preview/stage-viewer/SpriteItem.vue
index dc79f0e84..759952353 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/SpriteItem.vue
+++ b/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))
diff --git a/spx-gui/src/components/editor/preview/stage-viewer/SpriteTransformer.vue b/spx-gui/src/components/editor/preview/stage-viewer/SpriteTransformer.vue
index dbdece1a0..d49d92542 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/SpriteTransformer.vue
+++ b/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)
diff --git a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
index 2be43ea65..58de5d195 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
+++ b/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(() => {

From 0835ea09b7c1ed7158f19ae8041d845b598b6339 Mon Sep 17 00:00:00 2001
From: ComfyFluffy <24245520+ComfyFluffy@users.noreply.github.com>
Date: Thu, 9 May 2024 13:23:11 +0800
Subject: [PATCH 6/7] refactor: reactive/every

---
 .../editor/preview/stage-viewer/StageViewer.vue | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
index 58de5d195..f26ba93d2 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, reactive, 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,18 +63,18 @@ const containerSize = useContentSize(conatiner)
 const stageRef = ref<any>()
 const mapSize = useAsyncComputed(() => editorCtx.project.stage.getMapSize())
 
-const spritesReadyMap = ref(new Map<Sprite, boolean>())
+const spritesReadyMap = reactive(new Map<Sprite, boolean>())
 watch(
   () => [...editorCtx.project.sprites],
   () => {
-    for (const sprite of spritesReadyMap.value.keys()) {
+    for (const sprite of spritesReadyMap.keys()) {
       if (!editorCtx.project.sprites.includes(sprite)) {
-        spritesReadyMap.value.delete(sprite)
+        spritesReadyMap.delete(sprite)
       }
     }
     for (const sprite of editorCtx.project.sprites) {
-      if (!spritesReadyMap.value.has(sprite)) {
-        spritesReadyMap.value.set(sprite, false)
+      if (!spritesReadyMap.has(sprite)) {
+        spritesReadyMap.set(sprite, false)
       }
     }
   },
@@ -109,10 +109,7 @@ const backdropImg = useImgFile(() => editorCtx.project.stage.backdrop?.img)
 
 const spritesAndBackdropLoading = computed(() => {
   if (backdropImg.value == null) return true
-  return (
-    spritesReadyMap.value.size !== editorCtx.project.sprites.length ||
-    Array.from(spritesReadyMap.value.values()).some((v) => !v)
-  )
+  return editorCtx.project.sprites.every((s) => spritesReadyMap.get(s))
 })
 
 const visibleSprites = computed(() => {

From d40224d891f1a4b1c0eafed92995e22a35a1258f Mon Sep 17 00:00:00 2001
From: ComfyFluffy <24245520+ComfyFluffy@users.noreply.github.com>
Date: Thu, 9 May 2024 14:15:00 +0800
Subject: [PATCH 7/7] use name instead of reference as key

---
 .../preview/stage-viewer/SpriteItem.vue       | 15 +++++++++---
 .../preview/stage-viewer/StageViewer.vue      | 24 ++++---------------
 2 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/spx-gui/src/components/editor/preview/stage-viewer/SpriteItem.vue b/spx-gui/src/components/editor/preview/stage-viewer/SpriteItem.vue
index 759952353..6e86eef67 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/SpriteItem.vue
+++ b/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<Sprite, boolean>
+  spritesReadyMap: Map<string, boolean>
 }>()
 
 const nodeRef = ref<any>()
@@ -37,14 +37,23 @@ const bitmapResolution = computed(() => costume.value?.bitmapResolution ?? 1)
 const image = useImgFile(() => costume.value?.img)
 
 watchEffect((onCleanup) => {
+  const spriteName = props.sprite.name
+  onCleanup(() => {
+    props.spritesReadyMap.delete(spriteName)
+  })
+})
+
+watchEffect((onCleanup) => {
+  const spriteName = props.sprite.name
+
   const img = image.value
   if (img == null) {
-    props.spritesReadyMap.set(props.sprite, false)
+    props.spritesReadyMap.set(spriteName, false)
     return
   }
   function handleImageLoad() {
     // We need to notify event ready for SpriteTransformer (to get correct node size)
-    props.spritesReadyMap.set(props.sprite, true)
+    props.spritesReadyMap.set(spriteName, true)
   }
   img.addEventListener('load', handleImageLoad)
   onCleanup(() => img.removeEventListener('load', handleImageLoad))
diff --git a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
index f26ba93d2..97914c7cb 100644
--- a/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
+++ b/spx-gui/src/components/editor/preview/stage-viewer/StageViewer.vue
@@ -20,7 +20,7 @@
         />
       </v-layer>
       <v-layer>
-        <SpriteTransformer :sprites-ready="(sprite) => !!spritesReadyMap.get(sprite)" />
+        <SpriteTransformer :sprites-ready="(sprite) => !!spritesReadyMap.get(sprite.name)" />
       </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, reactive, ref, watch } from 'vue'
+import { computed, reactive, ref } 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,23 +63,7 @@ const containerSize = useContentSize(conatiner)
 const stageRef = ref<any>()
 const mapSize = useAsyncComputed(() => editorCtx.project.stage.getMapSize())
 
-const spritesReadyMap = reactive(new Map<Sprite, boolean>())
-watch(
-  () => [...editorCtx.project.sprites],
-  () => {
-    for (const sprite of spritesReadyMap.keys()) {
-      if (!editorCtx.project.sprites.includes(sprite)) {
-        spritesReadyMap.delete(sprite)
-      }
-    }
-    for (const sprite of editorCtx.project.sprites) {
-      if (!spritesReadyMap.has(sprite)) {
-        spritesReadyMap.set(sprite, false)
-      }
-    }
-  },
-  { immediate: true }
-)
+const spritesReadyMap = reactive(new Map<string, boolean>())
 
 /** containerSize / mapSize */
 const scale = computed(() => {
@@ -109,7 +93,7 @@ const backdropImg = useImgFile(() => editorCtx.project.stage.backdrop?.img)
 
 const spritesAndBackdropLoading = computed(() => {
   if (backdropImg.value == null) return true
-  return editorCtx.project.sprites.every((s) => spritesReadyMap.get(s))
+  return editorCtx.project.sprites.some((s) => !spritesReadyMap.get(s.name))
 })
 
 const visibleSprites = computed(() => {