IWidget 获取 viewport

src/designer/model2DEditor/Model2DEditor.vue

@@ -12,34 +12,34 @@
       <div v-if="currentFloor" :key="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="!!state">
       <div class="section-toolbar-left">
         <el-button title="鼠标状态 (ESC)" :icon="renderIcon('fa MousePointer')" link
-                   :type="state.cursorMode===Constract.CursorModeNormal?'primary':''"
+                   :type="state?.cursorMode===Constract.CursorModeNormal?'primary':''"
                    @click="()=>state.cursorMode = Constract.CursorModeNormal"></el-button>
 
         <span class="section-toolbar-line"></span>
         <el-button title="框选模式 (T)" :icon="renderIcon('FullScreen')" link
-                   :type="state.cursorMode===Constract.CursorModeSelectByRec?'primary':''"
+                   :type="state?.cursorMode===Constract.CursorModeSelectByRec?'primary':''"
                    @click="()=>state.cursorMode = Constract.CursorModeSelectByRec"></el-button>
 
         <span class="section-toolbar-line"></span>
         <el-button title="物理流动线 (Z)" :icon="renderIcon('antd EnterOutlined')" link
-                   :type="state.cursorMode===Constract.CursorModeALink?'primary':''"
+                   :type="state?.cursorMode===Constract.CursorModeALink?'primary':''"
                    @click="()=>state.cursorMode = Constract.CursorModeALink"></el-button>
 
         <span class="section-toolbar-line"></span>
         <el-button title="逻辑关联 (X)" :icon="renderIcon('antd LinkOutlined')" link
-                   :type="state.cursorMode===Constract.CursorModeSLink?'primary':''"
+                   :type="state?.cursorMode===Constract.CursorModeSLink?'primary':''"
                    @click="()=>state.cursorMode = Constract.CursorModeSLink"></el-button>
 
         <span class="section-toolbar-line"></span>
         <el-button title="测量工具" :icon="renderIcon('fa Ruler')" link
-                   :type="state.cursorMode===Constract.CursorModeMeasure?'primary':''"
+                   :type="state?.cursorMode===Constract.CursorModeMeasure?'primary':''"
                    @click="()=>state.cursorMode = Constract.CursorModeMeasure"></el-button>
         <span class="section-toolbar-line"></span>
         <el-button title="输送线" :icon="renderIcon('fa Line')" link
-                   :type="state.cursorMode===Constract.CursorModeConveyor?'primary':''"
+                   :type="state?.cursorMode===Constract.CursorModeConveyor?'primary':''"
                    @click="()=>state.cursorMode = Constract.CursorModeConveyor"></el-button>
       </div>
       <div class="section-toolbar-right">
@@ -54,13 +54,13 @@
         <el-text type="danger">00011</el-text>
         <span class="section-toolbar-line"></span>
         <div>
-          {{ toFixed(state.camera.position.x) }},
+          {{ toFixed(state?.camera.position.x) }},
-          {{ toFixed(state.camera.position.y) }},
+          {{ toFixed(state?.camera.position.y) }},
-          {{ toFixed(state.camera.position.z) }}
+          {{ toFixed(state?.camera.position.z) }}
         </div>
         <span class="section-toolbar-line"></span>
         <div>
-          {{ toFixed(state.mouse.x) }},{{ toFixed(state.mouse.z) }}
+          {{ toFixed(state?.mouse.x) }},{{ toFixed(state?.mouse.z) }}
         </div>
       </div>
     </div>

src/designer/model2DEditor/Model2DEditorJs.js

@@ -6,23 +6,20 @@ import Constract from '@/designer/Constract.js'
 
 export default defineComponent({
   name: 'Model2DEditor',
+  emits: ['viewportChanged'],
   data() {
-    const viewport = new Viewport(worldModel)
-
     return {
       Constract,
       isReady: false,
-      viewport: viewport,
+      viewport: null,
       currentFloor: '',
       searchKeyword: ''
     }
   },
   mounted() {
-    window['viewport'] = this
   },
   beforeMount() {
     this.initByFloor('')
-    delete window['viewport']
   },
   methods: {
     renderIcon,
@@ -69,6 +66,7 @@ export default defineComponent({
       window['controls'] = viewport.controls
 
       viewerDom.focus()
+      this.$emit('viewportChanged', viewport)
       this.isReady = true
     }
   },
@@ -88,7 +86,7 @@ export default defineComponent({
      * @returns {ViewportState|{}}
      */
     state() {
-      return this.viewport.state
+      return this.viewport?.state
     },
     allLevels() {
       return worldModel.state.allLevels

src/designer/model3DView/Model3DView.vue

@@ -88,7 +88,7 @@ import { renderIcon } from '@/utils/webutils.js'
 import textureUrl from '@/assets/images/conveyor/shapes/RibSideSkirtThumbnail.jpg'
 import moveUrl from '@/assets/images/conveyor/shapes/move.svg'
 import arrowRightUrl from '@/assets/images/conveyor/shapes/arrow-right.svg'
-import rackUrl from '@/assets/images/conveyor/shapes/Rack.png'
+// import rackUrl from '@/assets/images/conveyor/shapes/Rack.png'
 
 // DOM refs
 const canvasContainer = ref(null)

src/designer/viewWidgets/IWidgets.ts

@@ -1,5 +1,6 @@
 import { defineComponent } from 'vue'
 import { renderIcon } from '@/utils/webutils.js'
+import Viewport, { type ViewportState } from '@/designer/Viewport.ts'
 
 export type IWidgetData = {
   /**
@@ -16,6 +17,14 @@ export default defineComponent({
   deactivated() {
     this.isActivated = false
   },
+  props: {
+    viewport: Viewport
+  },
+  computed: {
+    state(): ViewportState {
+      return this.viewport?.state
+    }
+  },
   emits: ['close'],
   data() {
     return {

src/designer/viewWidgets/property/PropertyView.vue

@@ -61,9 +61,17 @@ export default {
   name: 'PropertyView',
   mixins: [IWidgets],
   data() {
+
     return {
       searchKeyword: ''
     }
+  },
+  watch: {
+    'state.selectedObject': {
+      handler(newVal) {
+        debugger
+      }
+    }
   }
 }
 </script>

src/model/WorldModel.ts

@@ -24,7 +24,7 @@ export default class WorldModel {
    */
   state = reactive({
     openFileName: '',
-    allLevels: null
+    allLevels: null,
   })
 
   sceneMap = new Map<string, Scene>()

src/views/ModelMain.vue

@@ -45,14 +45,15 @@
               <div class="section-item-wrap">
                 <keep-alive>
                   <component v-if="calcLeftPanel?.component" :is="calcLeftPanel.component"
-                             @close="closeMe('hideLeft')" :key="calcLeftPanel?.name" />
+                             @close="closeMe('hideLeft')" :key="calcLeftPanel?.name"
+                             :viewport="currentViewport" />
                 </keep-alive>
               </div>
             </SplitArea>
             <SplitArea class="section-center" :class="{'hidden-split':hideRight}" :size="calcCenterSize">
               <el-tabs type="card" class="section-tabs" v-model="centerActiveName" @tab-click="handleCenterTabClick">
                 <el-tab-pane label="2D视图" name="ModelEditor" lazy>
-                  <Model2DEditor />
+                  <Model2DEditor @viewportChanged="setCurrentViewport" />
                 </el-tab-pane>
                 <el-tab-pane label="3D视图" name="ModelView" lazy>
                   <ModelView />
@@ -69,7 +70,8 @@
               <div class="section-item-wrap">
                 <keep-alive>
                   <component v-if="calcRightPanel?.component" :is="calcRightPanel.component"
-                             @close="()=>closeMe('hideRight')" :key="calcRightPanel.name" />
+                             @close="()=>closeMe('hideRight')" :key="calcRightPanel.name"
+                             :viewport="currentViewport" />
                 </keep-alive>
               </div>
             </SplitArea>
@@ -79,7 +81,9 @@
           <div class="section-item-wrap">
             <keep-alive>
               <component v-if="calcBottomPanel?.component" :is="calcBottomPanel.component"
-                         @close="()=>closeMe('hideBottom')" :key="calcBottomPanel.name" />
+                         @close="()=>closeMe('hideBottom')" :key="calcBottomPanel.name"
+                         :viewport="currentViewport"
+              />
             </keep-alive>
           </div>
         </SplitArea>
@@ -110,6 +114,7 @@ import { getWidgetByName, getWidgetBySide, getAllWidget } from '@/runtime/Define
 import Model2DEditor from '@/designer/model2DEditor/Model2DEditor.vue'
 import ModelView from '@/designer/ModelView.vue'
 import { normalizeShortKey } from '@/utils/webutils.ts'
+import { markRaw } from 'vue'
 
 
 export default {
@@ -155,6 +160,7 @@ export default {
   data() {
     return {
       Logo,
+      currentViewport: null,
       calcRootMenu: getRootMenu(),
       bottomSize: 30,
       hideBottom: true,
@@ -217,6 +223,9 @@ export default {
   methods: {
     renderIcon,
     getWidgetBySide,
+    setCurrentViewport(viewport) {
+      this.currentViewport = viewport
+    },
     handleCenterTabClick(tab) {
       if (tab?.name) {
         this.centerActiveName = tab.name