@aibee/owlly 1.0.25

package/src/owlly/controller/transform-controller.ts

@@ -0,0 +1,684 @@
+import { Externals, NS_THREE } from '../stage/externals';
+import { View } from '../view/view';
+import { Element } from '../element/element';
+import { Events, OwllyEvents } from '../utils/events';
+import { BasicTools } from '../utils/basic-tools';
+import { Controller } from './controller';
+import { Placeable2D } from '../element/placeable-2d';
+import { FloorModel } from '../element/floor-model';
+import { TransformControls } from '../../external/transform-controls';
+
+enum MouseState {
+  IDLE,
+  DOWN,
+  MOVE,
+}
+
+class TransformControlsInjected extends TransformControls {
+  pointerDownSuper: Function;
+
+  pointerHoverSuper: Function;
+
+  pointerMoveSuper: Function;
+
+  pointerUpSuper: Function;
+
+  disposeSuper: Function;
+
+  private visibilityMap: Map<View, { showX: boolean; showY: boolean; showZ: boolean }>;
+
+  private bindingView: View;
+
+  constructor(view: View, object: NS_THREE.Camera, domElement?: HTMLElement) {
+    super(object, domElement);
+    this.bindingView = view;
+    this.visibilityMap = new Map();
+    this.pointerDownSuper = this.pointerDown;
+    this.pointerHoverSuper = this.pointerHover;
+    this.pointerMoveSuper = this.pointerMove;
+    this.pointerUpSuper = this.pointerUp;
+    this.disposeSuper = this.dispose;
+    this.pointerDown = function pointerDown(pointer: { x: number; y: number; button: number }): void {
+      const { showX, showY, showZ } = this;
+      const { showX: x, showY: y, showZ: z } = this.visibilityMap.get(this.bindingView)!;
+      this.showX = x; this.showY = y; this.showZ = z;
+      if (this.object && this.object.parent) this.updateMatrixWorld();
+      this.pointerDownSuper(pointer);
+      this.showX = showX; this.showY = showY; this.showZ = showZ;
+      if (this.object && this.object.parent) this.updateMatrixWorld();
+    };
+    this.pointerHover = function pointerHover(pointer: { x: number; y: number; button: number }): void {
+      const { showX, showY, showZ } = this;
+      const { showX: x, showY: y, showZ: z } = this.visibilityMap.get(this.bindingView)!;
+      this.showX = x; this.showY = y; this.showZ = z;
+      if (this.object && this.object.parent) this.updateMatrixWorld();
+      this.pointerHoverSuper(pointer);
+      this.showX = showX; this.showY = showY; this.showZ = showZ;
+      if (this.object && this.object.parent) this.updateMatrixWorld();
+    };
+    this.pointerMove = function pointerMove(pointer: { x: number; y: number; button: number }): void {
+      const { showX, showY, showZ } = this;
+      const { showX: x, showY: y, showZ: z } = this.visibilityMap.get(this.bindingView)!;
+      this.showX = x; this.showY = y; this.showZ = z;
+      if (this.object && this.object.parent) this.updateMatrixWorld();
+      this.pointerMoveSuper(pointer);
+      this.showX = showX; this.showY = showY; this.showZ = showZ;
+      if (this.object && this.object.parent) this.updateMatrixWorld();
+    };
+    this.pointerUp = function pointerUp(pointer: { x: number; y: number; button: number }): void {
+      const { showX, showY, showZ } = this;
+      const { showX: x, showY: y, showZ: z } = this.visibilityMap.get(this.bindingView)!;
+      this.showX = x; this.showY = y; this.showZ = z;
+      if (this.object && this.object.parent) this.updateMatrixWorld();
+      this.pointerUpSuper(pointer);
+      this.showX = showX; this.showY = showY; this.showZ = showZ;
+      if (this.object && this.object.parent) this.updateMatrixWorld();
+    };
+    this.dispose = function dispose(): void {
+      this.visibilityMap.clear();
+      this.disposeSuper();
+    };
+  }
+
+  updateViewVisibilitySettings(
+    conf: { showX: boolean; showY: boolean; showZ: boolean },
+    view?: View,
+  ): void {
+    if (view) {
+      this.visibilityMap.set(view, conf);
+    } else {
+      this.visibilityMap.forEach((_, k) => {
+        this.visibilityMap.set(k, conf);
+      });
+    }
+  }
+
+  getViewVisibilitySettings(view: View): { showX: boolean; showY: boolean; showZ: boolean } | undefined {
+    return this.visibilityMap.get(view);
+  }
+
+  removeViewVisibilitySettings(view: View): void {
+    this.visibilityMap.delete(view);
+  }
+}
+
+/**
+ * Element变换控制器
+ */
+class TransformController extends Controller {
+  private transformControl: TransformControlsInjected;
+
+  private scene: NS_THREE.Scene;
+
+  private activeElement: Element;
+
+  private renderFrame: boolean | undefined;
+
+  private mouseState: MouseState;
+
+  private button: number;
+
+  private mousePositionBuffer: NS_THREE.Vector2;
+
+  private controlMode: string;
+
+  private snapToObject: NS_THREE.Object3D;
+
+  private detectOnMove: boolean;
+
+  private transformActivated: boolean;
+
+  protected mouseEventHandlers: {
+    onPointerDown: (ev: PointerEvent) => void;
+    onPointerMove: (ev: PointerEvent) => void;
+    onPointerUp: (ev: PointerEvent) => void;
+  };
+
+  protected touchEventHandlers: {
+    onTouchStart: (ev: TouchEvent) => void;
+    onTouchMove: (ev: TouchEvent) => void;
+    onTouchEnd: (ev: TouchEvent) => void;
+  };
+
+  private selectableElements: Set<Element>;
+
+  private selectableElementsOnScreen: Set<Element>;
+
+  private selectedElement: Element | null;
+
+  private selectedElementIntersection: NS_THREE.Intersection | null;
+
+  private view: View;
+
+  private elementResponseDistance2D: number;
+
+  private elementWorldDetectionDistance: number;
+
+  private onScreenElementWorldDetectionDistance: number;
+
+  // private eventListeners: {
+  //   onViewChangedListener: Function;
+  // };
+
+  constructor(view: View) {
+    super();
+    const { THREE } = Externals.getInstance();
+    this.mouseState = MouseState.IDLE;
+    this.mouseEventHandlers = {
+      onPointerDown: (e): void => { this.onPointerDown(e); },
+      onPointerMove: (e): void => { this.onPointerMove(e); },
+      onPointerUp: (e): void => { this.onPointerUp(e); },
+    };
+    this.touchEventHandlers = {
+      onTouchStart: (e): void => { this.onTouchStart(e); },
+      onTouchMove: (e): void => { this.onTouchMove(e); },
+      onTouchEnd: (): void => { this.onTouchEnd(); },
+    };
+    this.selectableElements = new Set<Element>();
+    this.selectableElementsOnScreen = new Set<Element>();
+    this.elementResponseDistance2D = 30;
+    this.elementWorldDetectionDistance = -1;
+    this.onScreenElementWorldDetectionDistance = 13;
+    this.mousePositionBuffer = new THREE.Vector2();
+    this.detectOnMove = false;
+    // this.eventListeners = {
+    //   onViewChangedListener: (v: View): void => {
+    //     const conf = this.transformControl.getViewVisibilitySettings(v)
+    //       || this.transformControl.getViewVisibilitySettings(this.view)!;
+    //     if (!conf) return;
+    //     const { showX, showY, showZ } = conf;
+    //     this.transformControl.showX = showX;
+    //     this.transformControl.showY = showY;
+    //     this.transformControl.showZ = showZ;
+    //   },
+    // };
+    // EventHub.on(OwllyEvents.RENDERING_VIEW_CHANGED, this.eventListeners.onViewChangedListener);
+    this.bindView(view);
+  }
+
+  private registerPointerEvents(dom: HTMLElement): void {
+    dom.addEventListener('pointerdown', this.mouseEventHandlers.onPointerDown);
+    dom.addEventListener('pointermove', this.mouseEventHandlers.onPointerMove);
+    dom.addEventListener('pointerup', this.mouseEventHandlers.onPointerUp);
+    dom.addEventListener('touchstart', this.touchEventHandlers.onTouchStart);
+    dom.addEventListener('touchmove', this.touchEventHandlers.onTouchMove);
+    dom.addEventListener('touchend', this.touchEventHandlers.onTouchEnd);
+  }
+
+  private unregisterPointerEvents(dom: HTMLElement): void {
+    dom.removeEventListener('pointerdown', this.mouseEventHandlers.onPointerDown);
+    dom.removeEventListener('pointermove', this.mouseEventHandlers.onPointerMove);
+    dom.removeEventListener('pointerup', this.mouseEventHandlers.onPointerUp);
+    dom.removeEventListener('touchstart', this.touchEventHandlers.onTouchStart);
+    dom.removeEventListener('touchmove', this.touchEventHandlers.onTouchMove);
+    dom.removeEventListener('touchend', this.touchEventHandlers.onTouchEnd);
+  }
+
+  private snapActiveElement(x: number, y: number, clientWidth: number, clientHeight: number): boolean {
+    if (this.controlMode !== 'snap' || !this.activeElement || !this.snapToObject) {
+      return false;
+    }
+    const { THREE } = Externals.getInstance();
+    const raycaster = new THREE.Raycaster();
+    raycaster.setFromCamera({ x: 2 * x / clientWidth - 1, y: 1 - 2 * y / clientHeight }, this.view.camera!);
+    const intersections = raycaster.intersectObject(this.snapToObject, true);
+    if (intersections && intersections.length > 0) {
+      intersections.sort((a: NS_THREE.Intersection, b: NS_THREE.Intersection) => a.distance - b.distance);
+      // console.info('#Snap# snapActiveElement intersections[0]=', intersections[0]);
+      this.activeElement.position.copy(intersections[0].point);
+      this.emit(
+        Events.ELEMENT_POSITION_UPDATED,
+        this.activeElement.position.clone(),
+        this.activeElement,
+        this.view,
+      );
+    }
+    return true;
+  }
+
+  private onPointerDown(e: PointerEvent): void {
+    if (e.pointerType !== 'mouse') return;
+    this.mouseState = MouseState.DOWN;
+    this.button = e.button;
+    const { clientX, clientY } = e;
+    const { clientWidth, clientHeight } = this.view.container;
+    const { left: rectX, top: rectY } = this.view.container.getBoundingClientRect();
+    const x = clientX - rectX;
+    const y = clientY - rectY;
+    const { THREE } = Externals.getInstance();
+
+    this.mousePositionBuffer.set(x, y);
+    if (this.controlMode === 'collision') {
+      const raycaster = new THREE.Raycaster();
+      raycaster.setFromCamera({ x: 2 * x / clientWidth - 1, y: 1 - 2 * y / clientHeight }, this.view.camera!);
+      if (this.snapToObject instanceof FloorModel) {
+        const result = this.snapToObject.intersectRay(raycaster.ray.origin, raycaster.ray.direction, true);
+        if (result && result.length) {
+          const intersection = result[0];
+          const data = {
+            distance: intersection.intersectionPoint.distanceTo(raycaster.ray.origin),
+            point: intersection.intersectionPoint,
+            object: this.snapToObject,
+          };
+          this.selectedElement = this.snapToObject;
+          this.selectedElementIntersection = data;
+        }
+      } else {
+        const intersections = raycaster.intersectObject(this.snapToObject, true);
+        if (intersections && intersections.length > 0) {
+          intersections.sort((a: NS_THREE.Intersection, b: NS_THREE.Intersection) => a.distance - b.distance);
+          this.selectedElement = this.snapToObject as Element;
+          [this.selectedElementIntersection] = intersections;
+        }
+      }
+    }
+    if (this.snapActiveElement(x, y, clientWidth, clientHeight)) {
+      return;
+    }
+    let elements = Array.from(this.selectableElementsOnScreen);
+
+    const boundingBoxes: Map<NS_THREE.Object3D | Element, [number, number]> = new Map();
+    elements.forEach((ele) => {
+      if (ele instanceof Placeable2D && ele.isDomElement) {
+        const size = ele.getSize();
+        boundingBoxes.set(ele, [size[0], size[1]]);
+      }
+    });
+
+    const intersectionObject = BasicTools.getMouseIntersectionOnScreen(
+      elements,
+      { x, y },
+      { screenWidth: clientWidth, screenHeight: clientHeight },
+      2 * this.elementResponseDistance2D,
+      this.view.camera!,
+      elements,
+      this.onScreenElementWorldDetectionDistance,
+      boundingBoxes,
+    );
+
+    if (intersectionObject && intersectionObject instanceof Element) {
+      this.mouseState = MouseState.DOWN;
+      this.selectedElement = intersectionObject;
+      this.selectedElementIntersection = BasicTools.getMouseIntersection(
+        [intersectionObject],
+        { x: 2 * x / clientWidth - 1, y: 1 - 2 * y / clientHeight },
+        this.view.camera!,
+        elements,
+        this.elementWorldDetectionDistance,
+      );
+      return;
+    }
+
+    elements = Array.from(this.selectableElements);
+    const intersection = BasicTools.getMouseIntersection(
+      elements,
+      { x: 2 * x / clientWidth - 1, y: 1 - 2 * y / clientHeight },
+      this.view.camera!,
+      elements,
+      this.elementWorldDetectionDistance,
+    );
+    if (intersection && intersection.object instanceof Element) {
+      this.mouseState = MouseState.DOWN;
+      this.selectedElement = intersection.object;
+      this.selectedElementIntersection = intersection;
+    }
+  }
+
+  private onPointerMove(e: PointerEvent): void {
+    if (e.pointerType !== 'mouse') return;
+    if (this.mouseState !== MouseState.DOWN && this.mouseState !== MouseState.MOVE && !this.detectOnMove) return;
+    const { clientX, clientY } = e;
+    const { clientWidth, clientHeight } = this.view.container;
+    const { left: rectX, top: rectY } = this.view.container.getBoundingClientRect();
+    const x = clientX - rectX;
+    const y = clientY - rectY;
+    const { THREE } = Externals.getInstance();
+
+    const distance = new THREE.Vector2(x, y).distanceToSquared(this.mousePositionBuffer);
+    if (this.mouseState === MouseState.DOWN && distance > 100) this.mouseState = MouseState.MOVE;
+    this.snapActiveElement(x, y, clientWidth, clientHeight);
+
+    if (
+      this.controlMode === 'collision'
+      && (this.mouseState === MouseState.MOVE || this.detectOnMove)
+    ) {
+      const raycaster = new THREE.Raycaster();
+      raycaster.setFromCamera({ x: 2 * x / clientWidth - 1, y: 1 - 2 * y / clientHeight }, this.view.camera!);
+      if (this.snapToObject instanceof FloorModel) {
+        const result = this.snapToObject.intersectRay(raycaster.ray.origin, raycaster.ray.direction, true);
+        if (result && result.length) {
+          const intersection = result[0];
+          const data = {
+            distance: intersection.intersectionPoint.distanceTo(raycaster.ray.origin),
+            point: intersection.intersectionPoint,
+            object: this.snapToObject,
+          };
+          this.emit(Events.ELEMENT_SELECTED, this.snapToObject, data);
+        }
+      } else {
+        const intersections = raycaster.intersectObject(this.snapToObject, true);
+        if (intersections && intersections.length > 0) {
+          intersections.sort((a: NS_THREE.Intersection, b: NS_THREE.Intersection) => a.distance - b.distance);
+          this.emit(Events.ELEMENT_SELECTED, this.snapToObject, intersections[0]);
+        }
+      }
+    }
+  }
+
+  private onPointerUp(e: PointerEvent): void {
+    if (e.pointerType !== 'mouse' || this.transformActivated) return;
+    if (this.mouseState === MouseState.DOWN) {
+      this.emit(Events.ELEMENT_SELECTED, this.selectedElement, this.selectedElementIntersection, this.button);
+    }
+    this.mouseState = MouseState.IDLE;
+    this.selectedElement = null;
+    this.selectedElementIntersection = null;
+  }
+
+  private onTouchStart(e: TouchEvent): void {
+    this.mouseState = MouseState.DOWN;
+    const { clientX, clientY } = e.touches[0];
+    const { clientWidth, clientHeight } = this.view.container;
+    const { left: rectX, top: rectY } = this.view.container.getBoundingClientRect();
+    const x = clientX - rectX;
+    const y = clientY - rectY;
+
+    this.mousePositionBuffer.set(x, y);
+
+    if (this.snapActiveElement(x, y, clientWidth, clientHeight)) {
+      return;
+    }
+    let elements = Array.from(this.selectableElementsOnScreen);
+
+    const boundingBoxes: Map<NS_THREE.Object3D | Element, [number, number]> = new Map();
+    elements.forEach((ele) => {
+      if (ele instanceof Placeable2D && ele.isDomElement) {
+        const size = ele.getSize();
+        boundingBoxes.set(ele, [size[0], size[1]]);
+      }
+    });
+
+    const intersectionObject = BasicTools.getMouseIntersectionOnScreen(
+      elements,
+      { x, y },
+      { screenWidth: clientWidth, screenHeight: clientHeight },
+      2 * this.elementResponseDistance2D,
+      this.view.camera!,
+      elements,
+      this.onScreenElementWorldDetectionDistance,
+      boundingBoxes,
+    );
+
+    if (intersectionObject && intersectionObject instanceof Element) {
+      this.mouseState = MouseState.DOWN;
+      this.selectedElement = intersectionObject;
+      this.selectedElementIntersection = BasicTools.getMouseIntersection(
+        [intersectionObject],
+        { x: 2 * x / clientWidth - 1, y: 1 - 2 * y / clientHeight },
+        this.view.camera!,
+        elements,
+        this.elementWorldDetectionDistance,
+      );
+      return;
+    }
+
+    elements = Array.from(this.selectableElements);
+    const intersection = BasicTools.getMouseIntersection(
+      elements,
+      { x: 2 * x / clientWidth - 1, y: 1 - 2 * y / clientHeight },
+      this.view.camera!,
+      elements,
+      this.elementWorldDetectionDistance,
+    );
+    if (intersection && intersection.object instanceof Element) {
+      this.mouseState = MouseState.DOWN;
+      this.selectedElement = intersection.object;
+      this.selectedElementIntersection = intersection;
+    }
+  }
+
+  private onTouchMove(e: TouchEvent): void {
+    if (this.mouseState !== MouseState.DOWN) return;
+    const { clientX, clientY } = e.touches[0];
+    const { clientWidth, clientHeight } = this.view.container;
+    const { left: rectX, top: rectY } = this.view.container.getBoundingClientRect();
+    const x = clientX - rectX;
+    const y = clientY - rectY;
+    const { THREE } = Externals.getInstance();
+
+    if (new THREE.Vector2(x, y).distanceToSquared(this.mousePositionBuffer) > 100) this.mouseState = MouseState.MOVE;
+
+    this.snapActiveElement(x, y, clientWidth, clientHeight);
+  }
+
+  private onTouchEnd(): void {
+    if (this.mouseState === MouseState.DOWN) {
+      this.emit(Events.ELEMENT_SELECTED, this.selectedElement, this.selectedElementIntersection);
+    }
+    this.mouseState = MouseState.IDLE;
+    this.selectedElement = null;
+    this.selectedElementIntersection = null;
+  }
+
+  unbind(): void {
+    super.unbind();
+    this.scene.remove(this.transformControl);
+    this.transformControl.dispose();
+    this.unregisterPointerEvents(this.view.container);
+    // EventHub.off(OwllyEvents.RENDERING_VIEW_CHANGED, this.eventListeners.onViewChangedListener);
+  }
+
+  /** @ignore */
+  update(): boolean {
+    const result = !!this.renderFrame;
+    this.renderFrame = false;
+    return result;
+  }
+
+  /**
+   * 绑定视图
+   * @param view 需要绑定的View
+   */
+  bindView(view: View): void {
+    // super.bindView(view);
+    if (!view.camera || !view.renderer) {
+      throw new Error('No Camera or Renderer found in view');
+    }
+    this.view = view;
+    this.transformControl = new TransformControlsInjected(view, view.camera, view.container);
+    this.transformControl.addEventListener('objectChange', () => {
+      this.emit(
+        OwllyEvents.ELEMENT_POSITION_UPDATED,
+        this.activeElement.position.clone(),
+        this.activeElement,
+        this.view,
+      );
+    });
+    this.transformControl.addEventListener('change', () => { this.renderFrame = true; });
+    this.transformControl.addEventListener('mouseUp', () => {
+      const mode = this.controlMode;
+      if (mode === 'translate') {
+        this.emit(
+          Events.ELEMENT_POSITION_UPDATED,
+          this.activeElement.position.clone(),
+          this.activeElement,
+        );
+      } else if (mode === 'rotate') {
+        this.emit(
+          Events.ELEMENT_POSE_UPDATED,
+          this.activeElement.quaternion.clone(),
+          this.activeElement,
+        );
+      } else if (mode === 'scale') {
+        // TODO(jyfang): do nothing now, add scale event
+      }
+      this.transformActivated = false;
+      this.emit(Events.TRANSFORM_DEACTIVATED);
+    });
+    this.transformControl.addEventListener('mouseDown', () => {
+      this.transformActivated = true;
+      this.emit(Events.TRANSFORM_ACTIVATED);
+    });
+    // (this.transformControl as {
+    //   pointerHover: (pointer: { x: number; y: number }) => void;
+    // })!.pointerHover = (pointer): void => {}
+    // this.transformControl.addEventListener('dragging-changed', (event) => {
+    //   super.setEnabled(!event.value);
+    // });
+    this.registerPointerEvents(view.container);
+    this.controlMode = this.transformControl.getMode();
+
+    this.transformControl.updateViewVisibilitySettings(
+      { showX: true, showY: true, showZ: true },
+      view,
+    );
+  }
+
+  renderingViewChanged(v: View): void {
+    const conf = this.transformControl.getViewVisibilitySettings(v)
+      || this.transformControl.getViewVisibilitySettings(this.view)!;
+    if (!conf) return;
+    const { showX, showY, showZ } = conf;
+    this.transformControl.showX = showX;
+    this.transformControl.showY = showY;
+    this.transformControl.showZ = showZ;
+  }
+
+  /** @ignore */
+  public initWithScene(scene: NS_THREE.Scene): void {
+    this.scene = scene;
+    this.scene.add(this.transformControl);
+  }
+
+  /**
+   * 将控制杆附着至元素
+   * @param element 需要调整的元素
+   */
+  public attach(element: Element): void {
+    if (this.activeElement) this.transformControl.detach();
+    this.activeElement = element;
+    this.transformControl.attach(this.activeElement);
+  }
+
+  /**
+   * 解除控制杆
+   */
+  public detach(): void {
+    this.setMode('translate');
+    this.mouseState = MouseState.IDLE;
+    this.transformControl.detach();
+  }
+
+  /**
+   * 获取编辑模式
+   */
+  public getMode(): string {
+    return this.controlMode;
+  }
+
+  /**
+   * 设置编辑模式
+   * @param mode 编辑模式, 值为 "translate"(移动), "rotate"(旋转), "scale"(缩放), "snap"(自动吸附到Mesh), "collision"(碰撞) 其一.
+   */
+  public setMode(
+    mode: string,
+    snapToObject?: NS_THREE.Object3D,
+    detectOnMove = false,
+  ): void {
+    this.controlMode = mode;
+    if (mode === 'snap' || mode === 'collision') {
+      if (snapToObject) {
+        this.snapToObject = snapToObject;
+        this.transformControl.detach();
+      }
+    } else {
+      if (this.activeElement) {
+        this.transformControl.attach(this.activeElement);
+      }
+      this.transformControl.setMode(mode);
+    }
+    this.detectOnMove = detectOnMove;
+  }
+
+  /**
+   * 设置控制杆尺寸
+   * @param size 控制杆尺寸 默认为1
+   */
+  public setSize(size: number): void {
+    this.transformControl.setSize(size);
+  }
+
+  /**
+   * 设置X, Y, Z轴控制杆可见性
+   * @param x X轴控制杆可见性
+   * @param y Y轴控制杆可见性
+   * @param z Z轴控制杆可见性
+   */
+  public setStickVisibility(x: boolean, y: boolean, z: boolean, view?: View): void {
+    this.transformControl.updateViewVisibilitySettings({ showX: x, showY: y, showZ: z }, view);
+  }
+
+  /**
+   * 设置平移时移动的最小单位
+   * @param snap 移动最小单位, 默认值为null
+   */
+  public setTransitionSnap(snap: number | null): void {
+    this.transformControl.setTranslationSnap(snap);
+  }
+
+  /**
+   * 设置旋转时的最小旋转单位
+   * @param snap 旋转最小单位, 单位为弧度, 默认值为null
+   */
+  public setRotationSnap(snap: number | null): void {
+    this.transformControl.setRotationSnap(snap);
+  }
+
+  public setEnabled(value: boolean): void {
+    // super.setEnabled(value);
+    this.transformControl.enabled = value;
+    if (value) {
+      this.unregisterPointerEvents(this.view.container);
+      this.registerPointerEvents(this.view.container);
+    } else {
+      this.unregisterPointerEvents(this.view.container);
+    }
+  }
+
+  public bindElement(e: Element | Element[], detectOnScreen?: boolean): void {
+    if (detectOnScreen === true) {
+      if (Array.isArray(e)) {
+        e.forEach((ele) => { this.selectableElementsOnScreen.add(ele); });
+      } else this.selectableElementsOnScreen.add(e);
+    } else if (Array.isArray(e)) {
+      e.forEach((ele) => { this.selectableElements.add(ele); });
+    } else this.selectableElements.add(e);
+  }
+
+  public unbindElement(e: Element | Element[]): void {
+    if (Array.isArray(e)) {
+      e.forEach((ele) => {
+        if (ele === this.activeElement) this.detach();
+        this.selectableElements.delete(ele);
+        this.selectableElementsOnScreen.delete(ele);
+      });
+    } else {
+      if (e === this.activeElement) this.detach();
+      this.selectableElements.delete(e);
+      this.selectableElementsOnScreen.delete(e);
+    }
+  }
+
+  public set2DElementDetectionRadius(distance: number): void {
+    this.elementResponseDistance2D = distance;
+  }
+
+  public setElementWorldDetectionDistance(distance: number): void {
+    this.elementWorldDetectionDistance = distance;
+  }
+
+  public setOnScreenElementWorldDetectionDistance(distance: number): void {
+    this.onScreenElementWorldDetectionDistance = distance;
+  }
+}
+export { TransformController };