@aibee/owlly 1.0.25 → 1.0.29

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

@@ -0,0 +1,28 @@
+import { NS_KONVA } from '../stage/externals';
+/**
+ * 为统一2D渲染所提供的解决方案，将会在一段时间后弃用（不再依赖 Konva）
+ */
+declare class Owlly2D {
+    private static containerMap;
+    private konvaContainer;
+    stage: NS_KONVA.Stage;
+    private constructor();
+    static getInstance(container: HTMLElement): Owlly2D;
+    static get initialized(): boolean;
+    static resize(): void;
+    static dispose(): void;
+    static disposeStage(container: HTMLElement): void;
+    resize(containerWidth: number, containerHeight: number): void;
+    addLayer(): NS_KONVA.Layer;
+    /**
+     * 打开交互
+     * pointer-events = auto
+     */
+    openInteraction(): void;
+    /**
+     * 关闭交互
+     * pointer-events = none
+     */
+    closeInteraction(): void;
+}
+export { Owlly2D };

package/lib/owlly/owlly-2d/index.js

@@ -0,0 +1,92 @@
+import { Externals } from '../stage/externals';
+/**
+ * 为统一2D渲染所提供的解决方案，将会在一段时间后弃用（不再依赖 Konva）
+ */
+class Owlly2D {
+    // private renderMap: Map<Konva.Layer, boolean>;
+    constructor(container) {
+        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>();
+    }
+    static getInstance(container) {
+        if (!this.containerMap)
+            this.containerMap = new Map();
+        if (!this.containerMap.has(container)) {
+            this.containerMap.set(container, new Owlly2D(container));
+        }
+        return this.containerMap.get(container);
+    }
+    static get initialized() {
+        return this.containerMap && !!this.containerMap.size;
+    }
+    static resize() {
+        this.containerMap.forEach((instance, container) => {
+            if (!instance)
+                return;
+            const { clientHeight, clientWidth } = container;
+            instance.resize(clientWidth, clientHeight);
+        });
+    }
+    static dispose() {
+        if (!this.containerMap)
+            return;
+        this.containerMap.forEach((instance, container) => {
+            instance.stage.destroy();
+            container.removeChild(instance.konvaContainer);
+        });
+        this.containerMap.clear();
+    }
+    static disposeStage(container) {
+        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();
+    //   });
+    // }
+    resize(containerWidth, containerHeight) {
+        this.stage.size({ width: containerWidth, height: containerHeight });
+    }
+    addLayer() {
+        const { Konva } = Externals.getInstance();
+        const newLayer = new Konva.Layer();
+        this.stage.add(newLayer);
+        // this.renderMap.set(newLayer, true);
+        return newLayer;
+    }
+    /**
+     * 打开交互
+     * pointer-events = auto
+     */
+    openInteraction() {
+        this.konvaContainer.style.pointerEvents = 'auto';
+    }
+    /**
+     * 关闭交互
+     * pointer-events = none
+     */
+    closeInteraction() {
+        this.konvaContainer.style.pointerEvents = 'none';
+    }
+}
+export { Owlly2D };

package/lib/owlly/screen/index.d.ts

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

package/lib/owlly/screen/index.js

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

package/lib/owlly/screen/screen.d.ts

@@ -0,0 +1,73 @@
+import { NS_THREE } from '../stage/externals';
+import { EventHubClassic } from '../utils/event-hub';
+import { View } from '../view/view';
+/** 窗口, 用于描述一个 Canvas / Renderer @ignore */
+declare class Screen extends EventHubClassic {
+    private views;
+    private listeners;
+    renderer: NS_THREE.WebGL1Renderer | NS_THREE.WebGLRenderer;
+    container: HTMLElement;
+    canvas: HTMLCanvasElement;
+    width: number;
+    height: number;
+    enabled: boolean;
+    eventOnContainer: boolean;
+    eventEnable: boolean;
+    constructor(container?: HTMLElement, options?: {
+        isCanvas?: boolean;
+        preserveDrawingBuffer?: boolean;
+        logarithmicDepthBuffer?: boolean;
+        width?: number;
+        height?: number;
+        eventOnContainer?: boolean;
+    });
+    private createRenderer;
+    /**
+     * 设置清屏时的颜色
+     * @param color 颜色
+     * @param alpha 不透明度
+     */
+    setClearColor(color: number | string, alpha?: number): void;
+    private getRenderParams;
+    /**
+     * 设置事件在容器上
+     * @param eventOnContainer 事件在容器S
+     */
+    setEventOnContainer(eventOnContainer: boolean): void;
+    /**
+     * 设置事件有效
+     * @param enable 有效
+     */
+    setEventEnable(enable: boolean): void;
+    private registerEvents;
+    private unregisterEvents;
+    mouseDown(e: MouseEvent): void;
+    mouseMove(e: MouseEvent): void;
+    mouseUp(e: MouseEvent): void;
+    mouseWheel(e: WheelEvent): void;
+    touchStart(e: TouchEvent): void;
+    touchMove(e: TouchEvent): void;
+    touchEnd(e: TouchEvent): void;
+    contextMenu(e: MouseEvent): void;
+    dblclick(e: MouseEvent): void;
+    dispose(): void;
+    resize(width?: number, height?: number): void;
+    /**
+     * 添加 View
+     * @param view 需要添加到 Screen 的 View
+     */
+    addView(view: View): void;
+    /**
+     * 删除 View
+     * @param view 需要删除的 View
+     */
+    removeView(view: View): void;
+    update(): boolean;
+    renderScreen(): void;
+    /**
+     * 设置当前 Screen 是否工作
+     * @param value 开关值
+     */
+    setEnabled(value: boolean): void;
+}
+export { Screen };

package/lib/owlly/screen/screen.js

@@ -0,0 +1,236 @@
+import { Externals } from '../stage/externals';
+import { Owlly } from '../stage/owlly';
+import { EventHubClassic } from '../utils/event-hub';
+import { Env, EnvironmentUtils } from '../utils/environment-utils';
+import { OwllyEvents } from '../utils/events';
+/** 窗口, 用于描述一个 Canvas / Renderer @ignore */
+class Screen extends EventHubClassic {
+    constructor(container, options = {}) {
+        super();
+        this.eventEnable = false;
+        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);
+    }
+    createRenderer(container, options = {}) {
+        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 不透明度
+     */
+    setClearColor(color, alpha = 1) {
+        if (!this.renderer)
+            return;
+        const { THREE } = Externals.getInstance();
+        this.renderer.setClearColor(new THREE.Color(color), alpha);
+    }
+    getRenderParams(container, options = {}) {
+        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;
+            Object.assign(rendererParams, { canvas: this.canvas });
+        }
+        else {
+            this.container = container;
+        }
+        return rendererParams;
+    }
+    /**
+     * 设置事件在容器上
+     * @param eventOnContainer 事件在容器S
+     */
+    setEventOnContainer(eventOnContainer) {
+        if (this.eventOnContainer !== eventOnContainer) {
+            this.setEventEnable(false);
+            this.eventOnContainer = eventOnContainer;
+            this.setEventEnable(true);
+        }
+    }
+    /**
+     * 设置事件有效
+     * @param enable 有效
+     */
+    setEventEnable(enable) {
+        if (this.eventEnable !== enable) {
+            this.eventEnable = enable;
+            if (enable) {
+                this.registerEvents();
+            }
+            else {
+                this.unregisterEvents();
+            }
+        }
+    }
+    registerEvents() {
+        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);
+    }
+    unregisterEvents() {
+        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);
+    }
+    mouseDown(e) {
+        this.emit(OwllyEvents.MOUSE_DOWN, e);
+    }
+    mouseMove(e) {
+        this.emit(OwllyEvents.MOUSE_MOVE, e);
+    }
+    mouseUp(e) {
+        this.emit(OwllyEvents.MOUSE_UP, e);
+    }
+    mouseWheel(e) {
+        this.emit(OwllyEvents.MOUSE_WHEEL, e);
+    }
+    touchStart(e) {
+        this.emit(OwllyEvents.TOUCH_START, e);
+    }
+    touchMove(e) {
+        this.emit(OwllyEvents.TOUCH_MOVE, e);
+    }
+    touchEnd(e) {
+        this.emit(OwllyEvents.TOUCH_END, e);
+    }
+    contextMenu(e) {
+        this.emit(OwllyEvents.CONTEXT_MENU, e);
+    }
+    dblclick(e) {
+        this.emit(OwllyEvents.DBLCLICK, e);
+    }
+    dispose() {
+        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;
+        this.canvas = null;
+        this.renderer.domElement = null;
+        this.renderer.state = null;
+        this.renderer = null;
+    }
+    resize(width, height) {
+        let targetWidth;
+        let targetHeight;
+        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
+     */
+    addView(view) {
+        // console.log('add view', view);
+        this.views.add(view);
+    }
+    /**
+     * 删除 View
+     * @param view 需要删除的 View
+     */
+    removeView(view) {
+        this.views.delete(view);
+    }
+    update() {
+        if (!this.enabled)
+            return false;
+        return Array.from(this.views).reduce((tf, e) => (e.update() || tf), false);
+    }
+    renderScreen() {
+        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 开关值
+     */
+    setEnabled(value) {
+        this.enabled = value;
+    }
+}
+export { Screen };

package/lib/owlly/stage/externals.d.ts

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

package/lib/owlly/stage/externals.js

@@ -0,0 +1,24 @@
+import * as THREE from 'three';
+import Konva from 'konva';
+/**
+ * 外部库
+ */
+class Externals {
+    setKonvaInstance(konva) {
+        this.Konva = konva;
+    }
+    setThreeInstance(three) {
+        this.THREE = three;
+    }
+    static getInstance() {
+        if (!this.instance)
+            this.instance = new Externals();
+        return this.instance;
+    }
+}
+function SetExternal(three, optionals = {}) {
+    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/lib/owlly/stage/index.d.ts

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

package/lib/owlly/stage/index.js

@@ -0,0 +1,6 @@
+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';

package/lib/owlly/stage/owlly.d.ts

@@ -0,0 +1,38 @@
+import { Stage } from './stage';
+import { Screen } from '../screen/screen';
+import { Controller } from '../controller/controller';
+declare class Owlly {
+    private static SHARED_INSTANCE;
+    private static RequestAnimationFrame;
+    private stages;
+    private screens;
+    private controllers;
+    private timeProfiler;
+    private statsEnabled;
+    private selfManageTick;
+    private forceRender;
+    private listeners;
+    private constructor();
+    static GetSharedInstance(): Owlly;
+    /**
+     * 时钟函数
+     * @param time 距离上一帧的时间, ms
+     */
+    tick(time: number): void;
+    private registerEvents;
+    private onWindowResize;
+    private beforeWindowUnload;
+    registerStage(stage: Stage): void;
+    unregisterStage(stage: Stage): void;
+    registerScreen(screen: Screen): void;
+    unregisterScreen(screen: Screen): void;
+    registerController(controller: Controller): void;
+    unregisterController(controller: Controller): void;
+    setStatsEnabled(value: boolean): void;
+    setRequestAnimationFrameFunction(requestAnimationFrame: Function): void;
+    toggleTickSelfManagement(value: boolean): void;
+    renderNextFrame(): void;
+}
+declare function updateTick(): void;
+declare function forceRender(): void;
+export { Owlly, updateTick, forceRender };