EsDragControl2 拖拽管理器完成

src/core/ModelUtils.ts

@@ -191,7 +191,22 @@ export function escByKeyboard() {
     return
   }
 
+  if (viewport.interactionManager.currentTool) {
+    // 1.退出当前交互
     viewport.interactionManager.exitInteraction()
+
+  } else if (viewport.dragControl.isDragging) {
+    // 2.取消拖拽
+    viewport.dragControl.cancelDrag()
+
+  } else if (viewport.state.multiSelectedEntityIds?.length > 0) {
+    // 3.取消多选
+    viewport.selectInspect.cancelMultiSelect()
+
+  } else if (viewport.state.selectedEntityId) {
+    // 4.取消单选
+    viewport.selectInspect.cancelSelect()
+  }
   system.msg('操作已取消')
 }
 
@@ -258,7 +273,7 @@ export function moveSelectedItem(direct: '↑' | '↓' | '←' | '→') {
         // 根据方向移动
         switch (direct) {
           case '↑':
-            console.log('向上移动', item.tf[0][2],'-=', delta)
+            console.log('向上移动', item.tf[0][2], '-=', delta)
             item.tf[0][2] -= delta // 向上移动
             break
           case '↓':

src/core/controls/EsDragControl2.ts

@@ -10,9 +10,9 @@ import EventBus from '@/runtime/EventBus.ts'
  */
 export default class DragControl2 implements IControls {
   private viewport: Viewport
-  private enabled: boolean = true
-
-  private isDragging: boolean = false
+  private _is_enabled: boolean = true
+  private domElement: HTMLElement
+  public isDragging: boolean = false
   private isPointerDown: boolean = false
   private dragStartMouse: THREE.Vector2 = new THREE.Vector2()
 
@@ -28,48 +28,50 @@ export default class DragControl2 implements IControls {
     domElement.addEventListener('pointerleave', this.onPointerLeave)
 
     domElement.style.cursor = 'auto'
+    this.domElement = domElement
   }
 
 
   /**
    * 设置启用/禁用
    */
-  set enable(value: boolean) {
-    this.enabled = value
+  public set enabled(value: boolean) {
+    this._is_enabled = value
     if (!value) {
       this.cleanupDrag()
     }
   }
 
-  get enable(): boolean {
-    return this.enabled
+  public get enabled(): boolean {
+    return this._is_enabled
   }
 
   /**
    * 卸载资源
    */
   dispose(): void {
-    const domElement = this.viewport.renderer.domElement
-    domElement.removeEventListener('pointermove', this.onPointerMove)
-    domElement.removeEventListener('pointerdown', this.onPointerDown)
-    domElement.removeEventListener('pointerup', this.onPointerUp)
-    domElement.removeEventListener('pointerleave', this.onPointerLeave)
+    if (this.domElement) {
+      this.domElement.removeEventListener('pointermove', this.onPointerMove)
+      this.domElement.removeEventListener('pointerdown', this.onPointerDown)
+      this.domElement.removeEventListener('pointerup', this.onPointerUp)
+      this.domElement.removeEventListener('pointerleave', this.onPointerLeave)
 
       this.cleanupDrag()
-    domElement.style.cursor = 'auto'
+      this.domElement.style.cursor = 'auto'
+      this.viewport = null
+    }
   }
 
   /**
    * 清理拖拽状态
    */
   private cleanupDrag(): void {
-    if (this.isDragging || this.isPointerDown) {
+    this.viewport.renderer.domElement.style.cursor = 'auto'
     this.isDragging = false
     this.isPointerDown = false
     this.dragStartMouse.set(NaN, NaN)
     this.removeShadows()
   }
-  }
 
   /**
    * 获取当前鼠标坐标（归一化设备坐标）
@@ -262,4 +264,15 @@ export default class DragControl2 implements IControls {
     if (!this.enabled) return
     this.cleanupDrag()
   }
+
+  /**
+   * 取消当前拖拽状态
+   */
+  cancelDrag(): void {
+    if (this.isDragging || this.isPointerDown) {
+      this.cleanupDrag()
+      this.viewport.renderer.domElement.style.cursor = 'auto'
+      this.viewport.controls.enabled = true
+    }
+  }
 }

src/core/controls/SelectInspect.ts

@@ -351,7 +351,7 @@ export default class SelectInspect implements IControls {
             selectedObject: this.viewport.state.selectedObject,
             selectedItem: this.viewport.state.selectedItem,
             selectedEntityId: this.viewport.state.selectedEntityId,
-            selectedObjectSetter: this.viewport.state.selectedObjectSetter,
+            selectedObjectSetter: this.viewport.state.selectedObjectSetter
           })
         }
       } else {
@@ -365,7 +365,7 @@ export default class SelectInspect implements IControls {
           selectedObject: null,
           selectedItem: null,
           selectedEntityId: null,
-          selectedObjectSetter: null,
+          selectedObjectSetter: null
         })
       }
     }
@@ -421,4 +421,31 @@ export default class SelectInspect implements IControls {
   }
 
 
+  cancelMultiSelect() {
+    this.viewport.state.multiSelectedObjects = []
+    this.viewport.state.multiSelectedItems = []
+    this.viewport.state.multiSelectedEntityIds = []
+    this.viewport.state.multiSelectedObjectMetas = []
+    EventBus.dispatch('multiSelectedObjectsChanged', {
+      viewport: markRaw(this.viewport),
+      multiSelectedObjects: [],
+      multiSelectedItems: [],
+      multiSelectedEntityIds: [],
+      multiSelectedObjectMetas: []
+    })
+  }
+
+  cancelSelect() {
+    this.viewport.state.selectedObject = null
+    this.viewport.state.selectedItem = null
+    this.viewport.state.selectedEntityId = null
+    this.viewport.state.selectedObjectSetter = null
+    EventBus.dispatch('selectedObjectChanged', {
+      viewport: markRaw(this.viewport),
+      selectedObject: null,
+      selectedItem: null,
+      selectedEntityId: null,
+      selectedObjectSetter: null
+    })
+  }
 }

src/core/engine/Viewport.ts

@@ -23,7 +23,7 @@ import EventBus from '@/runtime/EventBus.ts'
 import Constract from '@/core/Constract.ts'
 import type { IMeta } from '@/core/base/IMeta.ts'
 import DragControl2 from '@/core/controls/EsDragControl2.ts'
-import type { PropertySetter } from "@/core/base/PropertyTypes.ts";
+import type { PropertySetter } from '@/core/base/PropertyTypes.ts'
 
 /**
  * 视窗对象
@@ -462,6 +462,15 @@ export default class Viewport {
   dispose() {
     this.state.isReady = false
 
+    if (this.tools) {
+      for (const tool of this.tools) {
+        if (tool.dispose) {
+          tool.dispose()
+        }
+      }
+      this.tools = []
+    }
+
     if (this.animationFrameId !== null) {
       cancelAnimationFrame(this.animationFrameId)
       this.animationFrameId = null
@@ -476,14 +485,6 @@ export default class Viewport {
       this.watchList = []
     }
 
-    if (this.tools) {
-      for (const tool of this.tools) {
-        if (tool.dispose) {
-          tool.dispose()
-        }
-      }
-      this.tools = []
-    }
 
     if (this.resizeObserver) {
       this.resizeObserver.unobserve(this.viewerDom)

src/core/manager/InteractionManager.ts

@@ -53,7 +53,7 @@ export default class InteractionManager implements IControls {
     }
 
     this.viewport.state.cursorMode = 'normal'
-    this.viewport.dragControl.dragControls.enabled = true
+    this.viewport.dragControl.enabled = true
 
     this.viewport.viewerDom.style.cursor = ''
     this.option = undefined
@@ -90,7 +90,7 @@ export default class InteractionManager implements IControls {
 
     // 初始化交互
     this.currentTool = interaction
-    this.viewport.dragControl.dragControls.enabled = false
+    this.viewport.dragControl.enabled = false
 
     this.currentTool.start(this.viewport, this.option)