@aibee/owlly 1.0.25

package/src/owlly/owlly-2d/index.ts

@@ -0,0 +1,108 @@
+import { NS_KONVA, Externals } from '../stage/externals';
+
+/**
+ * 为统一2D渲染所提供的解决方案，将会在一段时间后弃用（不再依赖 Konva）
+ */
+class Owlly2D {
+  private static containerMap: Map<HTMLElement, Owlly2D>;
+
+  private konvaContainer: HTMLDivElement;
+
+  stage: NS_KONVA.Stage;
+
+  // private renderMap: Map<Konva.Layer, boolean>;
+
+  private constructor(container: HTMLElement) {
+    const { Konva } = Externals.getInstance();
+    this.konvaContainer = document.createElement('div');
+    this.konvaContainer.style.cssText = `
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    `;
+    container.appendChild(this.konvaContainer);
+    this.stage = new Konva.Stage({
+      container: this.konvaContainer,
+    });
+    const { clientWidth, clientHeight } = container;
+    this.resize(clientWidth, clientHeight);
+    // this.renderMap = new Map<Konva.Layer, boolean>();
+  }
+
+  public static getInstance(container: HTMLElement): Owlly2D {
+    if (!this.containerMap) this.containerMap = new Map();
+    if (!this.containerMap.has(container)) {
+      this.containerMap.set(container, new Owlly2D(container));
+    }
+    return this.containerMap.get(container)!;
+  }
+
+  public static get initialized(): boolean {
+    return this.containerMap && !!this.containerMap.size;
+  }
+
+  public static resize(): void {
+    this.containerMap.forEach((instance, container) => {
+      if (!instance) return;
+      const { clientHeight, clientWidth } = container;
+      instance.resize(clientWidth, clientHeight);
+    });
+  }
+
+  public static dispose(): void {
+    if (!this.containerMap) return;
+    this.containerMap.forEach((instance, container) => {
+      instance.stage.destroy();
+      container.removeChild(instance.konvaContainer);
+    });
+    this.containerMap.clear();
+  }
+
+  public static disposeStage(container: HTMLElement): void {
+    if (this.containerMap && this.containerMap.has(container)) {
+      const instance = this.containerMap.get(container);
+      instance!.stage.destroy();
+      container.removeChild(instance!.konvaContainer);
+      this.containerMap.delete(container);
+    }
+  }
+
+  // public render(): void {
+  //   this.renderMap.forEach((needRender, layer) => {
+  //     if (needRender) layer.draw();
+  //   });
+  // }
+
+  public resize(containerWidth: number, containerHeight: number): void {
+    this.stage.size({ width: containerWidth, height: containerHeight });
+  }
+
+  public addLayer(): NS_KONVA.Layer {
+    const { Konva } = Externals.getInstance();
+    const newLayer = new Konva.Layer();
+    this.stage.add(newLayer);
+    // this.renderMap.set(newLayer, true);
+    return newLayer;
+  }
+
+  /**
+   * 打开交互
+   * pointer-events = auto
+   */
+  public openInteraction(): void {
+    this.konvaContainer.style.pointerEvents = 'auto';
+  }
+
+  /**
+   * 关闭交互
+   * pointer-events = none
+   */
+  public closeInteraction(): void {
+    this.konvaContainer.style.pointerEvents = 'none';
+  }
+}
+
+export { Owlly2D };

package/src/owlly/screen/index.ts

@@ -0,0 +1 @@
+export * from './screen';

package/src/owlly/screen/screen.ts

@@ -0,0 +1,323 @@
+import { NS_THREE, Externals } from '../stage/externals';
+import { Owlly } from '../stage/owlly';
+import { EventHubClassic } from '../utils/event-hub';
+import { Env, EnvironmentUtils } from '../utils/environment-utils';
+import { View } from '../view/view';
+import { OwllyEvents } from '../utils/events';
+
+/** 窗口, 用于描述一个 Canvas / Renderer @ignore */
+class Screen extends EventHubClassic {
+  private views: Set<View>;
+
+  private listeners: {
+    mouseDown: EventListener;
+    mouseMove: EventListener;
+    mouseUp: EventListener;
+    mouseWheel: EventListener;
+    touchStart: EventListener;
+    touchMove: EventListener;
+    touchEnd: EventListener;
+    contextMenu: EventListener;
+    dblclick: EventListener;
+  };
+
+  public renderer: NS_THREE.WebGL1Renderer | NS_THREE.WebGLRenderer;
+
+  public container: HTMLElement;
+
+  public canvas: HTMLCanvasElement;
+
+  public width: number;
+
+  public height: number;
+
+  public enabled: boolean;
+
+  public eventOnContainer: boolean;
+
+  public eventEnable = false;
+
+  constructor(
+    container?: HTMLElement,
+    options: {
+      isCanvas?: boolean;
+      preserveDrawingBuffer?: boolean;
+      logarithmicDepthBuffer?: boolean;
+      width?: number;
+      height?: number;
+      eventOnContainer?: boolean;
+    } = {},
+  ) {
+    super();
+    this.createRenderer(container, options);
+
+    this.enabled = true;
+    this.views = new Set();
+    this.eventOnContainer = !!options.eventOnContainer;
+
+    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),
+    };
+
+    this.setEventEnable(true);
+
+    Owlly.GetSharedInstance().registerScreen(this);
+  }
+
+  private createRenderer(
+    container?: HTMLElement,
+    options: {
+      isCanvas?: boolean;
+      preserveDrawingBuffer?: boolean;
+      logarithmicDepthBuffer?: boolean;
+      width?: number;
+      height?: number;
+    } = {},
+  ): void {
+    const { THREE } = Externals.getInstance();
+
+    const rendererParams = this.getRenderParams(container, options);
+
+    this.renderer = THREE.WebGL1Renderer
+      ? new THREE.WebGL1Renderer(rendererParams)
+      : new THREE.WebGLRenderer(rendererParams);
+    this.renderer.setPixelRatio(EnvironmentUtils.GetGlobalDPR());
+    this.renderer.autoClear = false;
+
+    if (this.container) {
+      this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
+      this.container.appendChild(this.renderer.domElement);
+      this.width = this.container.clientWidth;
+      this.height = this.container.clientHeight;
+      this.canvas = this.renderer.domElement;
+    } else {
+      const canvasWidth = options.width;
+      const canvasHeight = options.height;
+
+      if (EnvironmentUtils.GetEnv() === Env.Miniapp && (!canvasWidth || !canvasHeight)) {
+        throw new Error('[Owlly] Cannot initialize View without canvas dimensions in miniapp.');
+      }
+
+      this.renderer.setSize(canvasWidth!, canvasHeight!);
+      this.width = canvasWidth!;
+      this.height = canvasHeight!;
+    }
+  }
+
+  /**
+   * 设置清屏时的颜色
+   * @param color 颜色
+   * @param alpha 不透明度
+   */
+  public setClearColor(color: number | string, alpha = 1): void {
+    if (!this.renderer) return;
+    const { THREE } = Externals.getInstance();
+    this.renderer.setClearColor(new THREE.Color(color), alpha);
+  }
+
+  private getRenderParams(
+    container?: HTMLElement,
+    options: {
+      isCanvas?: boolean;
+      preserveDrawingBuffer?: boolean;
+      width?: number;
+      height?: number;
+      logarithmicDepthBuffer?: boolean;
+    } = {},
+  ): NS_THREE.WebGLRendererParameters {
+    const rendererParams = {
+      alpha: true,
+      antialias: true,
+      precision: 'highp',
+      preserveDrawingBuffer: options && options.preserveDrawingBuffer,
+      logarithmicDepthBuffer: options && options.logarithmicDepthBuffer,
+    };
+
+    const isCanvas = options && options.isCanvas;
+
+    if (EnvironmentUtils.GetEnv() === Env.Miniapp && !isCanvas) {
+      throw new Error('[Owlly] Cannot initialize View without canvas in miniapp.');
+    }
+
+    if (isCanvas) {
+      this.canvas = container as HTMLCanvasElement;
+      Object.assign(rendererParams, { canvas: this.canvas });
+    } else {
+      this.container = container!;
+    }
+
+    return rendererParams;
+  }
+
+  /**
+   * 设置事件在容器上
+   * @param eventOnContainer 事件在容器S
+   */
+  public setEventOnContainer(eventOnContainer: boolean): void{
+    if (this.eventOnContainer !== eventOnContainer) {
+      this.setEventEnable(false);
+      this.eventOnContainer = eventOnContainer;
+      this.setEventEnable(true);
+    }
+  }
+
+  /**
+   * 设置事件有效
+   * @param enable 有效
+   */
+  public setEventEnable(enable: boolean): void {
+    if (this.eventEnable !== enable) {
+      this.eventEnable = enable;
+      if (enable) {
+        this.registerEvents();
+      } else {
+        this.unregisterEvents();
+      }
+    }
+  }
+
+  private registerEvents(): void {
+    const target = this.eventOnContainer ? this.container : this.canvas;
+    target.addEventListener('mousedown', this.listeners.mouseDown, false);
+    target.addEventListener('mousemove', this.listeners.mouseMove, false);
+    target.addEventListener('mouseup', this.listeners.mouseUp, false);
+    target.addEventListener('mousewheel', this.listeners.mouseWheel, false);
+    target.addEventListener('touchstart', this.listeners.touchStart, false);
+    target.addEventListener('touchmove', this.listeners.touchMove, false);
+    target.addEventListener('touchend', this.listeners.touchEnd, false);
+    target.addEventListener('contextmenu', this.listeners.contextMenu, false);
+    target.addEventListener('dblclick', this.listeners.dblclick, false);
+  }
+
+  private unregisterEvents(): void {
+    const target = this.eventOnContainer ? this.container : this.canvas;
+    target.removeEventListener('mousedown', this.listeners.mouseDown, false);
+    target.removeEventListener('mousemove', this.listeners.mouseMove, false);
+    target.removeEventListener('mouseup', this.listeners.mouseUp, false);
+    target.removeEventListener('mousewheel', this.listeners.mouseWheel, false);
+    target.removeEventListener('touchstart', this.listeners.touchStart, false);
+    target.removeEventListener('touchmove', this.listeners.touchMove, false);
+    target.removeEventListener('touchend', this.listeners.touchEnd, false);
+    target.removeEventListener('contextmenu', this.listeners.contextMenu, false);
+    target.removeEventListener('dblclick', this.listeners.dblclick, false);
+  }
+
+  public mouseDown(e: MouseEvent): void {
+    this.emit(OwllyEvents.MOUSE_DOWN, e);
+  }
+
+  public mouseMove(e: MouseEvent): void {
+    this.emit(OwllyEvents.MOUSE_MOVE, e);
+  }
+
+  public mouseUp(e: MouseEvent): void {
+    this.emit(OwllyEvents.MOUSE_UP, e);
+  }
+
+  public mouseWheel(e: WheelEvent): void {
+    this.emit(OwllyEvents.MOUSE_WHEEL, e);
+  }
+
+  public touchStart(e: TouchEvent): void {
+    this.emit(OwllyEvents.TOUCH_START, e);
+  }
+
+  public touchMove(e: TouchEvent): void {
+    this.emit(OwllyEvents.TOUCH_MOVE, e);
+  }
+
+  public touchEnd(e: TouchEvent): void {
+    this.emit(OwllyEvents.TOUCH_END, e);
+  }
+
+  public contextMenu(e: MouseEvent): void {
+    this.emit(OwllyEvents.CONTEXT_MENU, e);
+  }
+
+  public dblclick(e: MouseEvent): void {
+    this.emit(OwllyEvents.DBLCLICK, e);
+  }
+
+  public dispose(): void {
+    this.unregisterEvents();
+    this.views.forEach((view) => { view.dispose(); });
+    this.views.clear();
+    if (this.container) this.container.removeChild(this.renderer.domElement);
+    this.renderer.dispose();
+    Owlly.GetSharedInstance().unregisterScreen(this);
+    this.container = null as unknown as HTMLElement;
+    this.canvas = null as unknown as HTMLCanvasElement;
+    this.renderer.domElement = null as unknown as HTMLCanvasElement;
+    this.renderer.state = null as unknown as NS_THREE.WebGLState;
+    this.renderer = null as unknown as NS_THREE.WebGLRenderer;
+  }
+
+  public resize(width?: number, height?: number): void {
+    let targetWidth: number;
+    let targetHeight: number;
+    if (this.container) {
+      targetWidth = width || this.container.clientWidth;
+      targetHeight = height || this.container.clientHeight;
+    } else {
+      if (!width || !height) throw new Error('[Owlly] Width and Height must be passed in when using canvas mode');
+      targetWidth = width;
+      targetHeight = height;
+    }
+    this.renderer.setSize(targetWidth, targetHeight);
+    this.views.forEach((view) => { view.resize(targetWidth, targetHeight); });
+    this.width = targetWidth;
+    this.height = targetHeight;
+  }
+
+  /**
+   * 添加 View
+   * @param view 需要添加到 Screen 的 View
+   */
+  public addView(view: View): void {
+    // console.log('add view', view);
+    this.views.add(view);
+  }
+
+  /**
+   * 删除 View
+   * @param view 需要删除的 View
+   */
+  public removeView(view: View): void {
+    this.views.delete(view);
+  }
+
+  public update(): boolean {
+    if (!this.enabled) return false;
+    return Array.from(this.views).reduce((tf, e) => (e.update() || tf), false);
+  }
+
+  public renderScreen(): void {
+    if (!this.enabled) return;
+    this.renderer.clear();
+    const views = Array.from(this.views);
+    views.sort((a, b) => (a.renderOrder - b.renderOrder > 0 ? 1 : -1));
+    views.forEach((view) => {
+      view.setRendererPort();
+      view.renderView();
+      view.clearRendererPort();
+    });
+  }
+
+  /**
+   * 设置当前 Screen 是否工作
+   * @param value 开关值
+   */
+  public setEnabled(value: boolean): void {
+    this.enabled = value;
+  }
+}
+
+export { Screen };

package/src/owlly/stage/__test__/stage.spec.ts

@@ -0,0 +1,15 @@
+import { Stage } from '..';
+import { Camera } from '../../element';
+
+describe('Class Stage', () => {
+  const stage = new Stage();
+  test('Stage类应正常初始化', () => {
+    expect(stage.render).not.toBeUndefined();
+  });
+  test('Stage类可以绑定Element对象', () => {
+    const camera = new Camera();
+    const bindFn = jest.fn(() => { stage.bindElement(camera); });
+    bindFn();
+    expect(bindFn).toHaveReturned();
+  });
+});

package/src/owlly/stage/externals.ts

@@ -0,0 +1,45 @@
+import * as THREE from 'three';
+import Konva from 'konva';
+import * as GLTFLoader from 'three/examples/jsm/loaders/GLTFLoader';
+
+/**
+ * 外部库
+ */
+class Externals {
+  private static instance: Externals;
+
+  Konva: typeof Konva;
+
+  THREE: typeof THREE;
+
+  setKonvaInstance(konva: typeof Konva): void {
+    this.Konva = konva;
+  }
+
+  setThreeInstance(three: typeof THREE): void {
+    this.THREE = three;
+  }
+
+  static getInstance(): Externals {
+    if (!this.instance) this.instance = new Externals();
+    return this.instance;
+  }
+}
+
+function SetExternal(
+  three: typeof THREE,
+  optionals: {
+    konva?: typeof Konva;
+    gltfLoader?: typeof GLTFLoader;
+  } = {},
+): void {
+  Externals.getInstance().setThreeInstance(three);
+  if (optionals && optionals.konva) Externals.getInstance().setKonvaInstance(optionals.konva);
+}
+
+export {
+  Externals,
+  THREE as NS_THREE,
+  Konva as NS_KONVA,
+  SetExternal,
+};

package/src/owlly/stage/index.ts

@@ -0,0 +1,12 @@
+export * from './stage';
+// #if WEB_ONLY
+export {
+  NS_THREE as THREE,
+  NS_KONVA as Konva,
+} from './externals';
+// #endif
+export {
+  Externals,
+  SetExternal,
+} from './externals';
+export { updateTick } from './owlly';