fix: abstract dom size observe logic (goplus#143)

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-03-04 12:06:42
+ * @LastEditTime: 2024-03-04 15:06:54
  * @FilePath: \builder\spx-gui\src\components\spx-stage\SpxStage.vue
  * @Description: 
 -->
@@ -12,9 +12,10 @@
     <n-button type="success" class="stage-run-button" @click="run">{{ $t('stage.run') }}</n-button>
     <iframe v-if="show" src="/main.html" frameborder="0" class="show"></iframe>
     <div v-else class="stage-viewer-container">
+      <!-- When the mount is not complete, use the default value to prevent errors during component initialization -->
       <StageViewer
-        :width="stageViewerWidth"
-        :height="stageViewerHeight"
+        :width="containerWidth || 400"
+        :height="containerHeight || 400"
         :selected-sprite-names="selectedSpriteNames"
         :project="projectStore.project as Project"
         @on-selected-sprites-change="onSelectedSpritesChange"
@@ -25,6 +26,7 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { useSize } from '@/util/dom'
 import { NButton } from 'naive-ui'
 import { useProjectStore } from '@/store/modules/project'
 import { useSpriteStore } from '@/store'
@@ -40,27 +42,16 @@ const backdropStore = useBackdropStore()
 const projectStore = useProjectStore()
 const spriteStore = useSpriteStore()
 
-const spxStage = ref<HTMLElement | null>()
-const stageViewerWidth = ref(400)
-const stageViewerHeight = ref(400)
+const spxStage = ref<HTMLElement | null>(null)
+const { width: containerWidth, height: containerHeight } = useSize(spxStage)
+
 const selectedSpriteNames = ref<string[]>([])
-// monitor container size change
-let observer: ResizeObserver | null = null
 
 const onSelectedSpritesChange = (e: SelectedSpritesChangeEvent) => {
   selectedSpriteNames.value = e.names
   spriteStore.current = spriteStore.list.find((sprite) => sprite.name === e.names[0]) as Sprite
 }
 
-// monitor container size change
-const onContainerResize = (entries: any) => {
-  for (const entry of entries) {
-    const { width, height } = entry.contentRect
-    stageViewerWidth.value = width
-    stageViewerHeight.value = height
-  }
-}
-
 watch(
   () => spriteStore.current,
   () => {
@@ -72,18 +63,6 @@ watch(
   }
 )
 
-onMounted(() => {
-  if (spxStage.value) {
-    observer = new ResizeObserver(onContainerResize)
-    observer.observe(spxStage.value)
-  }
-})
-onUnmounted(() => {
-  if (observer) {
-    observer.disconnect()
-  }
-})
-
 const run = async () => {
   console.log('run')
   show.value = false

spx-gui/src/util/dom.ts

@@ -0,0 +1,32 @@
+import { onMounted, onUnmounted, ref } from 'vue'
+import type { Ref } from 'vue'
+export function useSize(elRef: Ref<HTMLElement | null>) {
+  const width = ref(0)
+  const height = ref(0)
+  let observer: ResizeObserver | null = null
+
+  // monitor element size change
+  const onElementResize = (entries: any) => {
+    for (const entry of entries) {
+      const { width: elementWidth, height: elementHeight } = entry.contentRect
+      width.value = elementWidth
+      height.value = elementHeight
+    }
+  }
+
+  onMounted(() => {
+    if (elRef.value) {
+      observer = new ResizeObserver(onElementResize)
+      observer.observe(elRef.value)
+    }
+  })
+  onUnmounted(() => {
+    if (observer) {
+      observer.disconnect()
+    }
+  })
+  return {
+    width,
+    height
+  }
+}