toolbox 支持

src/designer/Viewport.ts

@@ -11,7 +11,6 @@ import { CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer'
 import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer'
 import { getAllItemTypes, type ItemTypeMeta } from '@/model/itemType/ItemTypeDefine.ts'
 import type { ItemTypeDefineOption } from '@/model/itemType/ItemTypeDefine.ts'
-import EventBus from '@/runtime/EventBus'
 
 import type Toolbox from '@/model/itemType/Toolbox.ts'
 import { calcPositionUseSnap } from '@/model/ModelUtils.ts'
@@ -206,6 +205,34 @@ export default class Viewport {
       }
       this.updateGridVisibility()
     }))
+    this.watchList.push(watch(() => this.state.cursorMode, (newVal: CursorMode) => {
+      if (!this.state.isReady) {
+        return
+      }
+      if (this.currentTool) {
+        this.currentTool.stop()
+        this.currentTool = null
+      }
+      if (newVal === 'normal' || !newVal) {
+        this.dragControl.dragControls.enabled = true
+        return
+      }
+
+      const currentTool = this.toolbox[newVal]
+      if (currentTool) {
+        // 选择标尺工具
+        this.currentTool = currentTool
+        this.dragControl.dragControls.enabled = false
+
+      } else {
+        system.showErrorDialog(`当前鼠标模式 ${newVal} 不支持`)
+      }
+
+      if (this.currentTool) {
+        this.currentTool.start(this.toolStartObject)
+        this.toolStartObject = null
+      }
+    }))
 
     // 监听窗口大小变化
     if (this.resizeObserver) {
@@ -462,7 +489,7 @@ export interface ViewportState {
   /**
    * 鼠标模式
    */
-  cursorMode: CursorMode,
+  cursorMode: string // CursorMode,
 
   /**
    * 选中的对象

src/designer/model2DEditor/tools/SelectInspect.ts

@@ -6,6 +6,7 @@ import { Line2 } from 'three/examples/jsm/lines/Line2.js'
 import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
 import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
 import { getItemTypeByName } from '@/model/itemType/ItemTypeDefine.ts'
+import EventBus from '@/runtime/EventBus'
 
 let pdFn, pmFn, puFn
 
@@ -62,52 +63,57 @@ export default class SelectInspect implements ITool {
     puFn = this.onMouseUp.bind(this)
     this.canvas.addEventListener('pointerup', puFn)
 
-    this.viewport.watchList.push(watch(() => this.viewport.state.selectedObject, (selectedObject) => {
-      this.disposeSelectionBox()
-      this.viewport.state.selectedObjectMeta = null // 清除之前的元数据
+    this.viewport.watchList.push(watch(() => this.viewport.state.selectedObject, this.updateSelectionBox.bind(this)))
+    EventBus.$on('objectChanged', (data) => {
+      this.updateSelectionBox(this.viewport.state.selectedObject)
+    })
+  }
 
-      if (selectedObject?.userData?.type) {
-        const type = selectedObject.userData.type
-        const itemTypeDefine = getItemTypeByName(type)
-        if (itemTypeDefine) {
-          this.viewport.state.selectedObjectMeta = itemTypeDefine.getMeta(selectedObject)
+  /**
+   * 更新选中对象的包围盒线框
+   */
+  updateSelectionBox(selectedObject: THREE.Object3D) {
+    this.disposeSelectionBox()
+    this.viewport.state.selectedObjectMeta = null // 清除之前的元数据
 
-          const expandAmount = 0.2 // 扩展包围盒的大小
+    if (selectedObject?.userData?.type) {
+      const type = selectedObject.userData.type
+      const itemTypeDefine = getItemTypeByName(type)
+      if (itemTypeDefine) {
+        this.viewport.state.selectedObjectMeta = itemTypeDefine.getMeta(selectedObject)
 
-          // 避免某些蒙皮网格的帧延迟效应(e.g. Michelle.glb)
-          selectedObject.updateWorldMatrix(false, true)
+        const expandAmount = 0.2 // 扩展包围盒的大小
+        // 避免某些蒙皮网格的帧延迟效应(e.g. Michelle.glb)
+        selectedObject.updateWorldMatrix(false, true)
 
-          const box = new THREE.Box3().setFromObject(selectedObject)
-          box.expandByScalar(expandAmount)
+        const box = new THREE.Box3().setFromObject(selectedObject)
+        box.expandByScalar(expandAmount)
 
-          const size = new THREE.Vector3()
-          box.getSize(size)
+        const size = new THREE.Vector3()
+        box.getSize(size)
 
-          const center = new THREE.Vector3()
-          box.getCenter(center)
+        const center = new THREE.Vector3()
+        box.getCenter(center)
 
-          // 创建包围盒几何体
-          const helperGeometry = new THREE.BoxGeometry(size.x, size.y, size.z)
-          const edgesGeometry = new THREE.EdgesGeometry(helperGeometry)
+        // 创建包围盒几何体
+        const helperGeometry = new THREE.BoxGeometry(size.x, size.y, size.z)
+        const edgesGeometry = new THREE.EdgesGeometry(helperGeometry)
 
-          // 使用 LineGeometry 包装 edgesGeometry
-          const lineGeom = new LineGeometry()
-          //@ts-ignore
-          lineGeom.setPositions(edgesGeometry.attributes.position.array)
+        // 使用 LineGeometry 包装 edgesGeometry
+        const lineGeom = new LineGeometry()
+        //@ts-ignore
+        lineGeom.setPositions(edgesGeometry.attributes.position.array)
 
-          const selectionBox = new Line2(lineGeom, this.material)
-          selectionBox.computeLineDistances()
-          selectionBox.position.copy(center)
-          selectionBox.name = 'selectionBox'
-          this.selectionBox = selectionBox
+        const selectionBox = new Line2(lineGeom, this.material)
+        selectionBox.computeLineDistances()
+        selectionBox.position.copy(center)
+        selectionBox.name = 'selectionBox'
+        this.selectionBox = selectionBox
 
-          this.viewport.scene.add(selectionBox)
+        this.viewport.scene.add(selectionBox)
 
-        }
       }
-
-
-    }))
+    }
   }
 
   destory() {