@aibee/owlly 1.0.25

package/src/owlly/view/view.ts

@@ -0,0 +1,409 @@
+import { NS_THREE, Externals } from '../stage/externals';
+import { Screen } from '../screen/screen';
+import { Stage } from '../stage/stage';
+import { Overlay } from '../overlay/overlay';
+// #if WEB_ONLY
+import { Owlly2D } from '../owlly-2d';
+// #endif
+import { OwllyEvents } from '../utils/events';
+import { EventHubClassic } from '../utils/event-hub';
+import { PoiOverlay } from '..';
+
+/** @ignore */
+interface View {
+  camera?: NS_THREE.Camera;
+  renderer?: NS_THREE.WebGL1Renderer | NS_THREE.WebGLRenderer | null;
+}
+
+/** @ignore */
+abstract class View extends EventHubClassic {
+  protected enabled: boolean;
+
+  private overlays: Overlay[];
+
+  private listeners: {
+    mouseDown: EventListener;
+    mouseMove: EventListener;
+    mouseUp: EventListener;
+    mouseWheel: EventListener;
+    touchStart: EventListener;
+    touchMove: EventListener;
+    touchEnd: EventListener;
+    contextMenu: EventListener;
+    dblclick: EventListener;
+  };
+
+  protected rendererOffset: NS_THREE.Vector4;
+
+  protected rendererOffsetDefault: NS_THREE.Vector4;
+
+  /**
+   * View 的父级 Screen, 可能不存在
+   */
+  public parent: Screen | null;
+
+  /**
+   * 是否渲染 Stage 内内容, 用于只希望渲染 Overlay 的情况
+   */
+  public renderStage: boolean;
+
+  /**
+   * 该 View 在父级 Screen 的渲染顺序, 值越大渲染顺序越靠后, 即更高层级
+   */
+  public renderOrder: number;
+
+  /**
+   * View 所关联的 Stage
+   */
+  public stage: Stage;
+
+  /**
+   * @param screen 指定 View 所绘制的 Screen
+   * @param renderStage 是否渲染所绑定场景
+   */
+  constructor(screen?: Screen, renderStage = true) {
+    super();
+    this.overlays = [];
+    this.enabled = true;
+    this.renderStage = renderStage;
+    this.renderOrder = 0;
+
+    this.listeners = {
+      mouseDown: this.mouseDown.bind(this),
+      mouseMove: this.mouseMove.bind(this),
+      mouseUp: this.mouseUp.bind(this),
+      mouseWheel: this.mouseWheel.bind(this),
+      touchStart: this.touchStart.bind(this),
+      touchMove: this.touchMove.bind(this),
+      touchEnd: this.touchEnd.bind(this),
+      contextMenu: this.contextMenu.bind(this),
+      dblclick: this.dblclick.bind(this),
+    };
+    const { THREE } = Externals.getInstance();
+
+    // 初始化
+    this.rendererOffsetDefault = new THREE.Vector4(0, 0, 0, 0);
+
+    if (screen) this.bindScreen(screen);
+  }
+
+  private mouseDown(e: MouseEvent): void {
+    if (this.isInView(e.offsetX, e.offsetY)) this.emit(OwllyEvents.MOUSE_DOWN, e);
+  }
+
+  private mouseMove(e: MouseEvent): void {
+    this.emit(OwllyEvents.MOUSE_MOVE, e);
+  }
+
+  private mouseUp(e: MouseEvent): void {
+    this.emit(OwllyEvents.MOUSE_UP, e);
+  }
+
+  private mouseWheel(e: WheelEvent): void {
+    if (this.isInView(e.offsetX, e.offsetY)) this.emit(OwllyEvents.MOUSE_WHEEL, e);
+  }
+
+  private touchStart(e: TouchEvent): void {
+    if (this.isTouchInView(e)) this.emit(OwllyEvents.TOUCH_START, e);
+  }
+
+  private touchMove(e: TouchEvent): void {
+    this.emit(OwllyEvents.TOUCH_MOVE, e);
+  }
+
+  private touchEnd(e: TouchEvent): void {
+    this.emit(OwllyEvents.TOUCH_END, e);
+  }
+
+  private contextMenu(e: MouseEvent): void {
+    if (this.isInView(e.offsetX, e.offsetY)) this.emit(OwllyEvents.CONTEXT_MENU, e);
+  }
+
+  private dblclick(e: MouseEvent): void {
+    this.emit(OwllyEvents.DBLCLICK, e);
+  }
+
+  public set render3D(value: boolean) {
+    this.renderStage = value;
+  }
+
+  public get container(): HTMLElement {
+    if (!this.parent) throw new Error('will be removed');
+    return this.parent.container;
+  }
+
+  public get canvas(): HTMLCanvasElement {
+    if (!this.parent) throw new Error('will be removed');
+    return this.parent.canvas;
+  }
+
+  /**
+   * 事件是否在当前view裁剪区域内触发
+   */
+  private isInView(eX: number, eY: number): boolean {
+    const {
+      x, y, z, w,
+    } = this.rendererOffset || this.rendererOffsetDefault;
+    const viewY = this.parent!.height - eY; // three的y坐标和屏幕坐标是反着的
+    return eX > x && eX < (x + z) && viewY > y && viewY < (y + w);
+  }
+
+  /**
+   * 事件是否在当前view裁剪区域内触发
+   * 移动端，判断多个点
+   */
+  private isTouchInView(e: TouchEvent): boolean {
+    let isIn = false;
+    const target = e.target as HTMLElement;
+    if (!e.target) return isIn;
+    const box = target.getBoundingClientRect();
+    for (let i = 0; i < e.touches.length; i++) {
+      if (this.isInView(e.touches[i].clientX - box.x, e.touches[i].clientY - box.y)) {
+        isIn = true;
+        break;
+      }
+    }
+    return isIn;
+  }
+
+  /**
+   * 绑定 Screen
+   */
+  public bindScreen(screen: Screen): void {
+    if (this.parent) this.unbindScreen();
+    this.parent = screen;
+    this.registerScreenEvents();
+    this.parent.addView(this);
+    this.renderer = this.parent.renderer;
+    const { THREE } = Externals.getInstance();
+    // 默认裁剪区域，为canvas全部区域
+    this.rendererOffsetDefault = new THREE.Vector4(
+      0,
+      0,
+      this.parent.width,
+      this.parent.height,
+    );
+  }
+
+  /**
+   * 解绑 Screen
+   */
+  public unbindScreen(): void {
+    if (!this.parent) return;
+    this.unregisterScreenEvents();
+    this.parent.removeView(this);
+    this.parent = null;
+    this.renderer = null;
+  }
+
+  /**
+   * @ignore
+   */
+  public registerScreenEvents(): void {
+    if (!this.parent) return;
+    this.parent.on(OwllyEvents.MOUSE_DOWN, this.listeners.mouseDown);
+    this.parent.on(OwllyEvents.MOUSE_MOVE, this.listeners.mouseMove);
+    this.parent.on(OwllyEvents.MOUSE_UP, this.listeners.mouseUp);
+    this.parent.on(OwllyEvents.MOUSE_WHEEL, this.listeners.mouseWheel);
+    this.parent.on(OwllyEvents.TOUCH_START, this.listeners.touchStart);
+    this.parent.on(OwllyEvents.TOUCH_MOVE, this.listeners.touchMove);
+    this.parent.on(OwllyEvents.TOUCH_END, this.listeners.touchEnd);
+    this.parent.on(OwllyEvents.CONTEXT_MENU, this.listeners.contextMenu);
+    this.parent.on(OwllyEvents.DBLCLICK, this.listeners.dblclick);
+  }
+
+  /**
+   * @ignore
+   */
+  public unregisterScreenEvents(): void {
+    if (!this.parent) return;
+    this.parent.off(OwllyEvents.MOUSE_DOWN, this.listeners.mouseDown);
+    this.parent.off(OwllyEvents.MOUSE_MOVE, this.listeners.mouseMove);
+    this.parent.off(OwllyEvents.MOUSE_UP, this.listeners.mouseUp);
+    this.parent.off(OwllyEvents.MOUSE_WHEEL, this.listeners.mouseWheel);
+    this.parent.off(OwllyEvents.TOUCH_START, this.listeners.touchStart);
+    this.parent.off(OwllyEvents.TOUCH_MOVE, this.listeners.touchMove);
+    this.parent.off(OwllyEvents.TOUCH_END, this.listeners.touchEnd);
+    this.parent.off(OwllyEvents.CONTEXT_MENU, this.listeners.contextMenu);
+    this.parent.off(OwllyEvents.DBLCLICK, this.listeners.dblclick);
+  }
+
+  /**
+   * 销毁 View
+   */
+  public dispose(): void {
+    this.overlays.forEach((o) => { o.dispose(); });
+    this.overlays = [];
+    // #if WEB_ONLY
+    if (this.container) Owlly2D.disposeStage(this.container);
+    // #endif
+    this.unbindScreen();
+  }
+
+  /**
+   * 添加 Overlay, Overlay 渲染顺序与添加顺序一致
+   * @param overlay 需要添加的 Overlay
+   */
+  public addOverlay(overlay: Overlay): void {
+    overlay.init(this);
+    this.overlays.push(overlay);
+  }
+
+  /**
+   * 移除 Overlay
+   * @param overlay 需要移除的 Overlay
+   */
+  public removeOverlay(overlay: Overlay): void {
+    const index = this.overlays.indexOf(overlay);
+    if (index !== -1) {
+      overlay.dispose();
+      this.overlays.splice(index, 1);
+    }
+  }
+
+  /**
+   * 设置 View 的渲染尺寸
+   * @param containerWidth 宽度, 单位 px
+   * @param containerHeight 高度, 单位 px
+   */
+  public resize(containerWidth: number, containerHeight: number): void {
+    const {
+      z, w,
+    } = this.rendererOffsetDefault;
+    this.rendererOffsetDefault.set(0, 0, containerWidth, containerHeight);
+    if (this.rendererOffset) {
+      const scaleX = this.rendererOffset.z / z;
+      const scaleY = this.rendererOffset.w / w;
+      const { THREE } = Externals.getInstance();
+      this.rendererOffset.multiply(new THREE.Vector4(scaleX, scaleY, scaleX, scaleY));
+    }
+    this.overlays.forEach(
+      (o) => o.resize && o.resize(containerWidth, containerHeight),
+    );
+  }
+
+  /**
+   * 钩子函数, 更新 View, 每一个 tick 执行
+   * @ignore
+   */
+  public update(): boolean {
+    if (!this.enabled) return false;
+    let result = false;
+    result = this.overlays.reduce((tf, e) => (e.update() || tf), false);
+    return result;
+  }
+
+  abstract render(scene?: NS_THREE.Scene): void;
+
+  /**
+   * 渲染该 View
+   * @ignore
+   */
+  public renderView(): void {
+    if (!this.enabled) return;
+    if (this.renderStage) {
+      this.stage.resizeElements(this.getViewWidth(), this.getViewHeight());
+      this.stage.renderElements();
+      if (this.renderer) {
+        this.renderer.clearDepth();
+      }
+      this.render();
+      this.overlays.forEach((o) => {
+        if (o instanceof PoiOverlay) {
+          o.forceRenderInThisFrame();
+        }
+        o.render();
+      });
+    }
+  }
+
+  /**
+   * 设置当前View是否工作
+   * @param value 开关值
+   */
+  public setEnabled(value: boolean): void {
+    this.enabled = value;
+  }
+
+  /**
+   * 绑定 Stage
+   * @param stage 需要绑定的 Stage
+   */
+  public bindStage(stage: Stage): void {
+    this.stage = stage;
+  }
+
+  /**
+   * 设置 View的 裁剪区域，外部调用
+   * @param rendererOffset 裁剪配置
+   */
+  public setViewport(rendererOffset: NS_THREE.Vector4): void {
+    this.rendererOffset = rendererOffset;
+    if (!this.parent) console.warn('view.setViewport() is before bind screen'); // eslint-disable-line
+  }
+
+  /**
+   * 设置renderer的裁剪区域，screen调用
+   * @ignore
+   */
+  public setRendererPort(): void {
+    if (!this.renderer || !this.rendererOffset) return;
+    const r = this.renderer;
+    r.setScissorTest(true);
+    r.setViewport(
+      this.rendererOffset.x,
+      this.rendererOffset.y,
+      this.rendererOffset.z,
+      this.rendererOffset.w,
+    );
+    r.setScissor(
+      this.rendererOffset.x,
+      this.rendererOffset.y,
+      this.rendererOffset.z,
+      this.rendererOffset.w,
+    );
+    r.setScissorTest(false);
+  }
+
+  /**
+   * 清空renderer的裁剪区域，screen调用
+   * @ignore
+   */
+  public clearRendererPort(): void {
+    if (!this.renderer || !this.rendererOffset) return;
+    const r = this.renderer;
+    r.setScissorTest(true);
+    r.setViewport(this.rendererOffsetDefault);
+    r.setScissor(this.rendererOffsetDefault);
+    r.setScissorTest(false);
+  }
+
+  /**
+   * 获取view的实际宽度
+   */
+  public getViewWidth(): number {
+    return this.rendererOffset ? this.rendererOffset.z : this.rendererOffsetDefault.z;
+  }
+
+  /**
+   * 获取view的实际高度
+   */
+  public getViewHeight(): number {
+    return this.rendererOffset ? this.rendererOffset.w : this.rendererOffsetDefault.w;
+  }
+
+  /**
+   * 获取view的实际与screen的偏离
+   */
+  public getViewOffset(): [number, number] {
+    return this.rendererOffset
+      ? [this.rendererOffset.x, this.rendererOffset.y]
+      : [this.rendererOffsetDefault.x, this.rendererOffsetDefault.y];
+  }
+
+  public setRenderOrder(renderOrder: number): void {
+    this.renderOrder = renderOrder || 0;
+  }
+}
+
+export { View };