WorldMode / Viewport / editor 设计模式重构

src/designer/Viewport.ts

@@ -21,6 +21,7 @@ export default class Viewport {
   statsControls: Stats
   controls: OrbitControls
   worldModel: WorldModel
+  animationFrameId: any = null
 
   /**
    * 监听窗口大小变化
@@ -46,7 +47,9 @@ export default class Viewport {
   /**
    * 初始化 THREE 渲染器
    */
-  initThree(viewerDom: HTMLElement) {
+  initThree(viewerDom: HTMLElement, floor: string) {
+    console.log('init floor', floor)
+    this.state.currentFloor = floor
     this.viewerDom = viewerDom
     this.worldModel.registerViewport(this)
 
@@ -195,7 +198,7 @@ export default class Viewport {
    * 动画循环
    */
   animate() {
-    requestAnimationFrame(this.animate.bind(this))
+    this.animationFrameId = requestAnimationFrame(this.animate.bind(this))
     this.renderView()
   }
 
@@ -282,6 +285,11 @@ export default class Viewport {
   destroy() {
     this.state.isReady = false
 
+    if (this.animationFrameId !== null) {
+      cancelAnimationFrame(this.animationFrameId)
+      this.animationFrameId = null
+    }
+
     if (this.unwatchList) {
       _.forEach(this.unwatchList, (unWatchFn => {
         unWatchFn()

src/designer/model2DEditor/Model2DEditor.vue

@@ -4,13 +4,15 @@
       <span class="section-toolbar-line" style="margin-left: 85px;"></span>
       <el-button :icon="renderIcon('antd ClusterOutlined')" link></el-button>
       <span class="section-toolbar-line"></span>
-      <el-cascader placeholder="选择楼层" size="small" v-model="state.currentFloor" :options="allLevels" filterable />
+      <el-cascader placeholder="选择楼层" size="small" v-model="currentFloor"
+                   :options="allLevels" filterable :show-all-levels="false" clearable
+                   :props="{emitPath:false}" />
     </div>
     <div class="section-content">
-      <div :key="state.currentFloor"
+      <div v-if="currentFloor" :key="currentFloor" :title="'当前楼层:'+currentFloor"
            class="canvas-container" ref="canvasContainer" tabindex="1" />
     </div>
-    <div class="section-bottom-toolbar section-toolbar">
+    <div class="section-bottom-toolbar section-toolbar" v-if="isReady">
       <div class="section-toolbar-left">
         <el-button title="鼠标状态 (ESC)" :icon="renderIcon('fa MousePointer')" link
                    :type="state.cursorMode==='normal'?'primary':''"
@@ -37,7 +39,7 @@
                    @click="()=>state.cursorMode = 'Ruler'"></el-button>
       </div>
       <div class="section-toolbar-right">
-        <el-input v-model="view.searchKeyword" size="small" style="width: 110px; margin-right: 5px;"
+        <el-input v-model="searchKeyword" size="small" style="width: 110px; margin-right: 5px;"
                   placeholder="Search">
           <template #prefix>
             <component :is="renderIcon('element Search')"></component>
@@ -47,7 +49,7 @@
         <span class="section-toolbar-line"></span>
         <el-text type="danger">00011</el-text>
         <span class="section-toolbar-line"></span>
-        <div v-if="state.ready">
+        <div>
           {{ state.camera.position.x.toFixed(2) }},{{ state.camera.position.y.toFixed(2)
           }},{{ state.camera.position.z.toFixed(2)
           }}

src/designer/model2DEditor/Model2DEditorJs.js

@@ -8,10 +8,10 @@ export default defineComponent({
     const viewport = new Viewport(worldModel)
 
     return {
+      isReady: false,
       viewport: viewport,
-      view: {
+      currentFloor: '',
-        searchKeyword: ''
+      searchKeyword: ''
-      }
     }
   },
   mounted() {
@@ -24,11 +24,10 @@ export default defineComponent({
   methods: {
     renderIcon,
     initByFloor(floor) {
+      this.isReady = false
       const viewportOrigin = this.viewport
       if (viewportOrigin && viewportOrigin.state.isReady) {
         viewportOrigin.destroy()
-        this.viewport = null
-        return
       }
 
       delete window['editor']
@@ -47,7 +46,7 @@ export default defineComponent({
       const viewport = markRaw(new Viewport(worldModel))
       this.viewport = viewport
 
-      viewport.initThree(viewerDom)
+      viewport.initThree(viewerDom, floor)
 
       window['viewport'] = viewport
       window['scene'] = viewport.scene
@@ -56,12 +55,19 @@ export default defineComponent({
       window['renderer'] = viewport.renderer
       window['controls'] = viewport.controls
 
-      viewerDom?.focus()
+      viewerDom.focus()
+      this.isReady = true
     }
   },
   watch: {
-    'state.currentFloor'(newVal, oldVal) {
+    currentFloor: {
-      this.initByFloor(newVal)
+      handler(newVal, oldVal) {
+        const floor = newVal
+        this.$nextTick(() => {
+          console.log('floor changed', floor)
+          this.initByFloor(newVal)
+        })
+      }
     }
   },
   computed: {
@@ -69,7 +75,7 @@ export default defineComponent({
      * @returns {ViewportState|{}}
      */
     state() {
-      return this.viewport?.state || {}
+      return this.viewport.state
     },
     allLevels() {
       return worldModel.allLevels