diff --git a/src/designer/Viewport.ts b/src/designer/Viewport.ts index 9fcbb0b..adfac22 100644 --- a/src/designer/Viewport.ts +++ b/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, /** * 选中的对象 diff --git a/src/designer/model2DEditor/tools/SelectInspect.ts b/src/designer/model2DEditor/tools/SelectInspect.ts index 0d1785c..85e6352 100644 --- a/src/designer/model2DEditor/tools/SelectInspect.ts +++ b/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() {