@aibee/owlly 1.0.25

package/src/owlly/controller/aerial-element-controller.ts

@@ -0,0 +1,277 @@
+import { OrbitControls } from '../../external/orbit-controls';
+import { Externals, NS_THREE } from '../stage/externals';
+import { OrthographicView } from '../view/orthographic-view';
+import { Element } from '../element/element';
+import { ListenerSet, Controller } from './controller';
+import { OwllyEvents, Events } from '../utils/events';
+
+/** @ignore */
+enum STATE {
+  IDLE,
+  TO_MOVE_ELEMENT,
+  MOVE_ELEMENT,
+}
+
+/**
+ * 俯视图元素控制器, 不应再被维护
+ * @deprecated
+ */
+class AerialElementController extends Controller {
+  private controls: OrbitControls;
+
+  private view: OrthographicView;
+
+  private renderFrame: boolean | undefined;
+
+  private elements: Set<Element>;
+
+  private target: HTMLElement;
+
+  private enabled: boolean;
+
+  private mouseRatio: NS_THREE.Vector2;
+
+  private mouseDownRatio: NS_THREE.Vector2;
+
+  private elementMouseCorrection: NS_THREE.Vector3;
+
+  private state: STATE;
+
+  private listeners: ListenerSet;
+
+  private targetElement: Element | null;
+
+  private elementMovable: boolean;
+
+  private movingNewElement: boolean;
+
+  private intersectables: { object: NS_THREE.Object3D; parent: Element }[];
+
+  /**
+   * @param view 平行视图
+   */
+  constructor(view: OrthographicView) {
+    super();
+    const { THREE } = Externals.getInstance();
+    this.elements = new Set<Element>();
+    this.enabled = false;
+    this.mouseRatio = new THREE.Vector2();
+    this.mouseDownRatio = new THREE.Vector2();
+    this.elementMouseCorrection = new THREE.Vector3();
+    this.state = STATE.IDLE;
+    this.targetElement = null;
+    this.elementMovable = true;
+    this.listeners = {
+      pointerdown: (e): void => { this.onPointerDown(e); },
+      pointerup: (): void => { this.onPointerUpOrLeave(); },
+      pointerleave: (): void => { this.onPointerUpOrLeave(); },
+      pointermove: (e): void => { this.onPointerMove(e); },
+    };
+    this.intersectables = [];
+    if (view) this.bindView(view);
+  }
+
+  /**
+   * 绑定视图到当前控制器
+   * @param view 需要绑定的视图
+   */
+  bindView(view: OrthographicView): void {
+    if (!view.camera || !view.renderer) {
+      throw new Error('No Camera or Renderer found in view');
+    }
+    const { THREE } = Externals.getInstance();
+    this.view = view;
+    this.controls = new OrbitControls(view.camera, view.renderer.domElement);
+    this.controls.addEventListener('start', () => { this.renderFrame = true; });
+    this.controls.addEventListener('end', () => { this.renderFrame = true; });
+    this.controls.addEventListener('change', () => { this.renderFrame = true; });
+    this.controls.enableKeys = false;
+    this.controls.enableDamping = false;
+    this.controls.enableRotate = false;
+    this.controls.mouseButtons = {
+      LEFT: THREE.MOUSE.ROTATE,
+      MIDDLE: THREE.MOUSE.DOLLY,
+      RIGHT: THREE.MOUSE.PAN,
+    };
+    this.controls.update();
+
+    this.target = view.renderer.domElement;
+    this.setEnabled(true);
+  }
+
+  unbind(): void {
+    super.unbind();
+    this.controls.dispose();
+  }
+
+  /**
+   * @ignore
+   */
+  update(): boolean {
+    this.controls.update();
+    let result = true;
+    if (!this.enabled || !this.renderFrame) result = false;
+    this.renderFrame = false;
+    return result;
+  }
+
+  private onPointerDown(e: PointerEvent): void {
+    const { offsetX, offsetY, button } = e;
+    if (button !== 0) return;
+    const { clientWidth, clientHeight } = this.target;
+    this.mouseDownRatio.x = offsetX / clientWidth - 0.5;
+    this.mouseDownRatio.y = -offsetY / clientHeight + 0.5;
+    e.stopPropagation();
+    e.preventDefault();
+    if (this.state !== STATE.IDLE) return;
+    if (this.view.camera) {
+      const { THREE } = Externals.getInstance();
+      const { x, y } = this.mouseDownRatio;
+      const raycaster = new THREE.Raycaster();
+      const pointerPosition = this.view.camera.position.clone();
+      const { zoom } = this.view.camera;
+      pointerPosition.set(
+        pointerPosition.x + this.view.getViewWidth() * x / zoom,
+        pointerPosition.y + this.view.getViewHeight() * y / zoom,
+        pointerPosition.z,
+      );
+      raycaster.set(pointerPosition, new THREE.Vector3(0, 0, -1));
+      const intersections = raycaster.intersectObjects(this.intersectables.map(({ object }) => object));
+      if (!intersections || !intersections.length) return;
+      let target = null;
+      let index = 0;
+      while (!(target instanceof Element) && index < intersections.length) {
+        target = intersections[index].object;
+        while (!(target instanceof Element) && target.parent) target = target.parent;
+        index += 1;
+      }
+      this.targetElement = target as Element;
+      this.elementMouseCorrection = this.targetElement.position.clone().add(pointerPosition.clone().multiplyScalar(-1));
+      this.emit(OwllyEvents.ELEMENT_SELECTED, this.targetElement);
+      this.renderFrame = true;
+      if (this.elementMovable) this.state = STATE.TO_MOVE_ELEMENT;
+    }
+  }
+
+  private onPointerUpOrLeave(): void {
+    if (this.state === STATE.IDLE) return;
+    if (this.state === STATE.MOVE_ELEMENT) {
+      this.emit(
+        Events.ELEMENT_POSITION_UPDATED,
+        this.targetElement!.position.clone(),
+        this.targetElement!,
+        this.targetElement!.getUUID(),
+      );
+    }
+    this.state = STATE.IDLE;
+    this.movingNewElement = false;
+  }
+
+  private onPointerMove(e: PointerEvent): void {
+    const { offsetX, offsetY } = e;
+    const { clientWidth, clientHeight } = this.target;
+    this.mouseRatio.x = offsetX / clientWidth - 0.5;
+    this.mouseRatio.y = -offsetY / clientHeight + 0.5;
+    e.stopPropagation();
+    e.preventDefault();
+
+    if (!this.targetElement) return;
+    if (this.state === STATE.TO_MOVE_ELEMENT) {
+      this.targetElement.visible = true;
+      this.state = STATE.MOVE_ELEMENT;
+    }
+    if (this.state === STATE.MOVE_ELEMENT) {
+      const { x, y } = this.mouseRatio;
+      const cameraPosition = this.view.camera.position.clone();
+      const { zoom } = this.view.camera;
+      this.targetElement.position.set(
+        cameraPosition.x + this.view.getViewWidth() * x / zoom + this.elementMouseCorrection.x,
+        cameraPosition.y + this.view.getViewHeight() * y / zoom + this.elementMouseCorrection.y,
+        this.targetElement.position.z,
+      );
+    }
+  }
+
+  bindElement(element: Element | Element[]): void {
+    if (element instanceof Array) {
+      element.forEach((e) => { this.bindElement(e); });
+    } else {
+      this.elements.add(element);
+      if (element.intersectables && element.intersectables.length) {
+        element.intersectables.forEach((object) => {
+          this.intersectables.push({ object, parent: element });
+        });
+      } else {
+        element.children.filter((c) => (c as NS_THREE.Mesh).isMesh).forEach((object) => {
+          this.intersectables.push({ object, parent: element });
+        });
+      }
+    }
+  }
+
+  unbindElement(element: Element | Element[]): void {
+    if (element instanceof Array) {
+      element.forEach((e) => { this.unbindElement(e); });
+    } else {
+      this.elements.delete(element);
+      this.intersectables = this.intersectables.filter((i) => i.parent !== element);
+    }
+  }
+
+  /**
+   * 启用/禁用该控制器
+   * @param enabled 目标值
+   */
+  public setEnabled(enabled: boolean): void {
+    if (!this.target) return;
+    this.enabled = enabled;
+    if (enabled) {
+      Object.entries(this.listeners).forEach(([e, callback]) => {
+        this.target.addEventListener(e, callback);
+      });
+      this.renderFrame = true;
+    } else {
+      Object.entries(this.listeners).forEach(([e, callback]) => {
+        this.target.removeEventListener(e, callback);
+      });
+    }
+  }
+
+  /**
+   * 移动目标元素, 调用该函数后目标元素会吸附到鼠标.
+   * 若setElementMovable(false);, 该函数无效.
+   * @param element 需要移动的元素
+   * @returns 需要移除的元素
+   */
+  public moveElement(element: Element, isNewElement?: boolean): void {
+    if (!this.elementMovable) return;
+    if (this.targetElement) this.cancelMoveElement();
+    if (!this.elements.has(element)) this.elements.add(element);
+    element.visible = false;
+    this.state = STATE.TO_MOVE_ELEMENT;
+    this.targetElement = element;
+    this.emit(OwllyEvents.ELEMENT_SELECTED, this.targetElement);
+    this.movingNewElement = isNewElement!;
+  }
+
+  /**
+   * 取消正在移动的元素
+   */
+  public cancelMoveElement(): void {
+    if (this.state !== STATE.IDLE && this.movingNewElement) {
+      this.emit(OwllyEvents.DISPOSE_ELEMENT, this.targetElement);
+    }
+    if (this.targetElement) this.targetElement = null;
+    this.state = STATE.IDLE;
+  }
+
+  /**
+   * 设置是否允许鼠标控制元素移动
+   * @param value 开关值
+   */
+  public setElementMovable(value: boolean): void {
+    this.elementMovable = value;
+  }
+}
+
+export { AerialElementController };