幻影加载问题

src/core/engine/SceneHelp.ts

@@ -89,6 +89,7 @@ export default class SceneHelp {
   }
 
   add(...object: THREE.Object3D[]) {
+    console.log('添加对象到场景', object.length, '个')
     this.scene.add(...object)
   }
 

src/core/manager/StateManager.ts

@@ -378,9 +378,10 @@ export default class StateManager {
       this.fullSync()
       this.isChanged.value = false
 
+      console.log('[StateManager] 加载完成，共', data.items.length, '个对象')
+
       // 强制保存一次初始状态
       await this.saveToLocalstore()
-      console.log('[StateManager] 加载完成，共', data.items.length, '个对象')
 
     } finally {
       this.isLoading.value = false

src/editor/Model2DEditor.vue

@@ -9,7 +9,8 @@
                    :props="{emitPath:false}" />
     </div>
     <div class="section-content">
-      <div v-if="currentStateManagerId" :key="currentStateManagerId"
+      <div v-if="currentStateManagerId" :key="currentStateManagerId || getRandom()"
+           :StateManagerId="currentStateManagerId"
            class="canvas-container" ref="canvasContainer" tabindex="1" />
     </div>
     <div class="section-bottom-toolbar section-toolbar" v-if="!!state">
@@ -68,6 +69,7 @@
 </template>
 <script>
 import * as THREE from 'three'
+import $ from 'jquery'
 import { getQueryParams, renderIcon, setQueryParam } from '@/utils/webutils'
 import { defineComponent, markRaw } from 'vue'
 import Viewport from '@/core/engine/Viewport'
@@ -103,6 +105,9 @@ export default defineComponent({
   },
   methods: {
     renderIcon,
+    getRandom() {
+      return Math.random().toString(36).substring(2, 15)
+    },
     destroyScene() {
       if (this.viewport) {
         this.viewport.destroy()
@@ -126,6 +131,11 @@ export default defineComponent({
     initByFloor() {
       this.destroyScene()
 
+      if (!this.$el || this.$.isUnmounted) {
+        // 检查组件是否已卸载, 幻影加载问题
+        return
+      }
+
       delete window['editor']
       delete window['viewport']
       delete window['scene']
@@ -145,42 +155,68 @@ export default defineComponent({
         return
       }
 
-      // 等待 canvasContainer 渲染出来
       this.$nextTick(() => {
-        const viewerDom = this.$refs.canvasContainer
-
-        const sceneHelp = new SceneHelp(worldModel, worldModel.state.catalogCode)
-        const viewport = new Viewport(sceneHelp, viewerDom)
-
-        this.scene = markRaw(sceneHelp)
-        this.viewport = markRaw(viewport)
-
-        system.showLoading('正在加载视口...')
-        viewport.initThree({ stateManagerId: id }).then(() => {
-          setQueryParam('store', id)
-          // window.history.replaceState({}, '', window.location.href + '?store=' + id)
-
-          window['viewport'] = viewport
-          window['THREE'] = THREE
-          window['scene'] = sceneHelp.scene
-          window['stateManager'] = viewport.stateManager
-          window['entityManager'] = viewport.entityManager
-          window['renderer'] = viewport.renderer
-          window['camera'] = viewport.camera
-          window['renderer'] = viewport.renderer
-          window['controls'] = viewport.controls
-
-          //@ts-ignore
-          viewerDom.focus()
-
-          // 通知父组件视口已准备好
-          this.$emit('viewportChanged', viewport)
-          this.isReady = true
-
-        }).finally(() => {
-          system.clearLoading()
-        })
+        const MAX_RETRY = 5
+        let retryCount = 0
+
+        // 等待 canvasContainer 渲染出来
+        const tryInitViewport = () => {
+          const viewerDom = this.$refs.canvasContainer
+
+          if (viewerDom) {
+            const viewerDom = this.$refs.canvasContainer
+
+            if (!viewerDom) {
+              system.showErrorDialog('Canvas container not found!')
+              debugger
+              return
+            }
+
+            const sceneHelp = new SceneHelp(worldModel, worldModel.state.catalogCode)
+            const viewport = new Viewport(sceneHelp, viewerDom)
+
+            this.scene = markRaw(sceneHelp)
+            this.viewport = markRaw(viewport)
+
+            system.showLoading('正在加载视口...')
+            viewport.initThree({ stateManagerId: id }).then(() => {
+              setQueryParam('store', id)
+              // window.history.replaceState({}, '', window.location.href + '?store=' + id)
+
+              window['viewport'] = viewport
+              window['THREE'] = THREE
+              window['scene'] = sceneHelp.scene
+              window['stateManager'] = viewport.stateManager
+              window['entityManager'] = viewport.entityManager
+              window['renderer'] = viewport.renderer
+              window['camera'] = viewport.camera
+              window['renderer'] = viewport.renderer
+              window['controls'] = viewport.controls
+
+              //@ts-ignore
+              viewerDom.focus()
+
+              // 通知父组件视口已准备好
+              this.$emit('viewportChanged', viewport)
+              this.isReady = true
+
+            }).finally(() => {
+              system.clearLoading()
+            })
+
+          } else if (retryCount < MAX_RETRY) {
+            retryCount++
+            setTimeout(tryInitViewport, 50)
+          } else {
+            console.error('Canvas container not found after retries')
+            this.currentStateManagerId = ''
+          }
+        }
+
+        tryInitViewport()
       })
+
+
     }
   },
   computed: {

src/editor/menus/FileMenu.ts

@@ -1,6 +1,7 @@
-import { renderIcon } from '@/utils/webutils.ts'
+import { renderIcon, setQueryParam } from '@/utils/webutils.ts'
 import { defineMenu } from '@/runtime/DefineMenu.ts'
 import SvgCode from '@/components/icons/SvgCode'
+import { nextTick } from 'vue'
 
 export default defineMenu((menus) => {
   menus.insertChildren('file',
@@ -10,14 +11,25 @@ export default defineMenu((menus) => {
     [
       {
         name: 'open', label: '打开', icon: SvgCode.open, order: 1, tip: 'Ctrl+O',
-        click: () => {
+        click: async () => {
+          worldModel.state.isOpened = false
+          worldModel.state.isDraft = false
+          worldModel.state.catalog = []
+          worldModel.state.catalogCode = ''
+          worldModel.state.stateManagerId = ''
+          setQueryParam('store', '')
+
           system.showLoading()
-          import('@/example/example1').then(res => {
+          try {
+            await nextTick()
+
+            const res = await import('@/example/example1')
+            worldModel.state.isDraft = false
             worldModel.loadCatalog(res.default)
 
-          }).finally(() => {
+          } finally {
             system.clearLoading()
-          })
+          }
         }
       },
       {

src/modules/measure/MeasureRenderer.ts

@@ -49,11 +49,17 @@ export default class MeasureRenderer extends BaseRenderer {
   }
 
   appendToScene(...objects: THREE.Object3D[]) {
-    if (!this.group) {
+    if (!this.group || this.group.parent !== this.tempViewport.scene.scene) {
+      if (this.group && this.group.parent !== this.tempViewport.scene.scene) {
+        // 幻影加载问题
+        this.group.parent.removeFromParent()
+      }
+
       this.group = new THREE.Group()
       this.group.name = MeasureRenderer.GROUP_NAME
       this.tempViewport?.scene.add(this.group)
     }
+
     this.group.add(...objects)
   }
 }