@aibee/owlly 1.0.26 → 1.0.29

package/lib/owlly/view/view.js

@@ -0,0 +1,317 @@
+import { Externals } from '../stage/externals';
+// #if WEB_ONLY
+import { Owlly2D } from '../owlly-2d';
+// #endif
+import { OwllyEvents } from '../utils/events';
+import { EventHubClassic } from '../utils/event-hub';
+import { PoiOverlay } from '..';
+/** @ignore */
+class View extends EventHubClassic {
+    /**
+     * @param screen 指定 View 所绘制的 Screen
+     * @param renderStage 是否渲染所绑定场景
+     */
+    constructor(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);
+    }
+    mouseDown(e) {
+        if (this.isInView(e.offsetX, e.offsetY))
+            this.emit(OwllyEvents.MOUSE_DOWN, e);
+    }
+    mouseMove(e) {
+        this.emit(OwllyEvents.MOUSE_MOVE, e);
+    }
+    mouseUp(e) {
+        this.emit(OwllyEvents.MOUSE_UP, e);
+    }
+    mouseWheel(e) {
+        if (this.isInView(e.offsetX, e.offsetY))
+            this.emit(OwllyEvents.MOUSE_WHEEL, e);
+    }
+    touchStart(e) {
+        if (this.isTouchInView(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) {
+        if (this.isInView(e.offsetX, e.offsetY))
+            this.emit(OwllyEvents.CONTEXT_MENU, e);
+    }
+    dblclick(e) {
+        this.emit(OwllyEvents.DBLCLICK, e);
+    }
+    set render3D(value) {
+        this.renderStage = value;
+    }
+    get container() {
+        if (!this.parent)
+            throw new Error('will be removed');
+        return this.parent.container;
+    }
+    get canvas() {
+        if (!this.parent)
+            throw new Error('will be removed');
+        return this.parent.canvas;
+    }
+    /**
+     * 事件是否在当前view裁剪区域内触发
+     */
+    isInView(eX, eY) {
+        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裁剪区域内触发
+     * 移动端，判断多个点
+     */
+    isTouchInView(e) {
+        let isIn = false;
+        const target = e.target;
+        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
+     */
+    bindScreen(screen) {
+        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
+     */
+    unbindScreen() {
+        if (!this.parent)
+            return;
+        this.unregisterScreenEvents();
+        this.parent.removeView(this);
+        this.parent = null;
+        this.renderer = null;
+    }
+    /**
+     * @ignore
+     */
+    registerScreenEvents() {
+        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
+     */
+    unregisterScreenEvents() {
+        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
+     */
+    dispose() {
+        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
+     */
+    addOverlay(overlay) {
+        overlay.init(this);
+        this.overlays.push(overlay);
+    }
+    /**
+     * 移除 Overlay
+     * @param overlay 需要移除的 Overlay
+     */
+    removeOverlay(overlay) {
+        const index = this.overlays.indexOf(overlay);
+        if (index !== -1) {
+            overlay.dispose();
+            this.overlays.splice(index, 1);
+        }
+    }
+    /**
+     * 设置 View 的渲染尺寸
+     * @param containerWidth 宽度, 单位 px
+     * @param containerHeight 高度, 单位 px
+     */
+    resize(containerWidth, containerHeight) {
+        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
+     */
+    update() {
+        if (!this.enabled)
+            return false;
+        let result = false;
+        result = this.overlays.reduce((tf, e) => (e.update() || tf), false);
+        return result;
+    }
+    /**
+     * 渲染该 View
+     * @ignore
+     */
+    renderView() {
+        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 开关值
+     */
+    setEnabled(value) {
+        this.enabled = value;
+    }
+    /**
+     * 绑定 Stage
+     * @param stage 需要绑定的 Stage
+     */
+    bindStage(stage) {
+        this.stage = stage;
+    }
+    /**
+     * 设置 View的 裁剪区域，外部调用
+     * @param rendererOffset 裁剪配置
+     */
+    setViewport(rendererOffset) {
+        this.rendererOffset = rendererOffset;
+        if (!this.parent)
+            console.warn('view.setViewport() is before bind screen'); // eslint-disable-line
+    }
+    /**
+     * 设置renderer的裁剪区域，screen调用
+     * @ignore
+     */
+    setRendererPort() {
+        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
+     */
+    clearRendererPort() {
+        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的实际宽度
+     */
+    getViewWidth() {
+        return this.rendererOffset ? this.rendererOffset.z : this.rendererOffsetDefault.z;
+    }
+    /**
+     * 获取view的实际高度
+     */
+    getViewHeight() {
+        return this.rendererOffset ? this.rendererOffset.w : this.rendererOffsetDefault.w;
+    }
+    /**
+     * 获取view的实际与screen的偏离
+     */
+    getViewOffset() {
+        return this.rendererOffset
+            ? [this.rendererOffset.x, this.rendererOffset.y]
+            : [this.rendererOffsetDefault.x, this.rendererOffsetDefault.y];
+    }
+    setRenderOrder(renderOrder) {
+        this.renderOrder = renderOrder || 0;
+    }
+}
+export { View };