@aibee/owlly 1.0.25 → 1.0.29

package/lib/owlly/view/orthographic-view.d.ts

@@ -0,0 +1,40 @@
+import { NS_THREE } from '../stage/externals';
+import { View } from './view';
+import { Screen } from '../screen/screen';
+/** 透视投影视图 */
+declare class OrthographicView extends View {
+    camera: NS_THREE.OrthographicCamera;
+    renderer: NS_THREE.WebGL1Renderer | NS_THREE.WebGLRenderer;
+    createCamera(): void;
+    /** @ignore */
+    resize(clientWidth: number, clientHeight: number): void;
+    bindScreen(screen: Screen): void;
+    unbindScreen(): void;
+    /** @ignore */
+    render(): void;
+    dispose(): void;
+    /**
+    * 设置View的裁剪区域，外部调用
+    */
+    setViewport(rendererOffset: NS_THREE.Vector4): void;
+    /**
+    * 更新相机和渲染区域的裁剪比例一致
+    */
+    private updateCameraAspect;
+    /**
+     * 设置相机姿态
+     * @param worldMatrix 相机的姿态矩阵
+     */
+    setCameraWorldMatrix(worldMatrix: number[]): void;
+    /**
+     * 设置相机裁剪
+     * @param fullWidth 多视图的全宽设置
+     * @param fullHeight 多视图的全高设置
+     * @param x 副摄像机的水平偏移
+     * @param y 副摄像机的垂直偏移
+     * @param width 副摄像机的宽度
+     * @param height 副摄像机的高度
+     */
+    setCameraViewPort(fullWidth: number, fullHeight: number, x: number, y: number, width: number, height: number): void;
+}
+export { OrthographicView };

package/lib/owlly/view/orthographic-view.js

@@ -0,0 +1,94 @@
+import { Externals } from '../stage/externals';
+import { View } from './view';
+/** 透视投影视图 */
+class OrthographicView extends View {
+    createCamera() {
+        if (this.camera)
+            return;
+        const { THREE } = Externals.getInstance();
+        const width = this.getViewWidth();
+        const height = this.getViewHeight();
+        this.camera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 0.1, 5000);
+        this.camera.up.set(0, 0, 1);
+        this.camera.position.set(0, 0, 100);
+        this.camera.lookAt(0, 0, 0);
+    }
+    /** @ignore */
+    resize(clientWidth, clientHeight) {
+        // 相机和渲染区域的裁剪比例一致
+        super.resize(clientWidth, clientHeight);
+        const { z, w } = this.rendererOffset || this.rendererOffsetDefault;
+        this.updateCameraAspect();
+        this.renderer.setSize(z, w);
+    }
+    bindScreen(screen) {
+        super.bindScreen(screen);
+        this.createCamera();
+    }
+    unbindScreen() {
+        super.unbindScreen();
+    }
+    /** @ignore */
+    render() {
+        if (!this.enabled || !this.renderer)
+            return;
+        this.renderer.render(this.stage.scene, this.camera);
+    }
+    dispose() {
+        super.dispose();
+    }
+    /**
+    * 设置View的裁剪区域，外部调用
+    */
+    setViewport(rendererOffset) {
+        super.setViewport(rendererOffset);
+        this.updateCameraAspect();
+    }
+    /**
+    * 更新相机和渲染区域的裁剪比例一致
+    */
+    updateCameraAspect() {
+        const width = this.getViewWidth();
+        const height = this.getViewHeight();
+        this.camera.left = -width / 2;
+        this.camera.right = width / 2;
+        this.camera.top = height / 2;
+        this.camera.bottom = -height / 2;
+        this.camera.updateProjectionMatrix();
+    }
+    /**
+     * 设置相机姿态
+     * @param worldMatrix 相机的姿态矩阵
+     */
+    setCameraWorldMatrix(worldMatrix) {
+        const { THREE } = Externals.getInstance();
+        this.camera.matrixAutoUpdate = false;
+        const position = new THREE.Vector3();
+        const scale = new THREE.Vector3();
+        const quaternion = new THREE.Quaternion();
+        new THREE.Matrix4().fromArray(worldMatrix).decompose(position, quaternion, scale);
+        this.camera.position.copy(position);
+        this.camera.quaternion.copy(quaternion);
+        this.camera.scale.copy(scale);
+        this.camera.updateMatrixWorld(true);
+        this.camera.matrixAutoUpdate = true;
+    }
+    /**
+     * 设置相机裁剪
+     * @param fullWidth 多视图的全宽设置
+     * @param fullHeight 多视图的全高设置
+     * @param x 副摄像机的水平偏移
+     * @param y 副摄像机的垂直偏移
+     * @param width 副摄像机的宽度
+     * @param height 副摄像机的高度
+     */
+    setCameraViewPort(fullWidth, fullHeight, x, y, width, height) {
+        if (!this.camera) {
+            console.warn('view.setCameraViewPort() is before bind screen'); // eslint-disable-line
+            return;
+        }
+        this.camera.setViewOffset(fullWidth, fullHeight, x, y, width, height);
+        this.updateCameraAspect();
+    }
+}
+export { OrthographicView };

package/lib/owlly/view/perspective-view.d.ts

@@ -0,0 +1,40 @@
+import { NS_THREE } from '../stage/externals';
+import { View } from './view';
+import { Screen } from '../screen/screen';
+/** 透视投影视图 */
+declare class PerspectiveView extends View {
+    camera: NS_THREE.PerspectiveCamera;
+    renderer: NS_THREE.WebGL1Renderer | NS_THREE.WebGLRenderer | null;
+    createCamera(): void;
+    /** @ignore */
+    resize(clientWidth: number, clientHeight: number): void;
+    bindScreen(screen: Screen): void;
+    unbindScreen(): void;
+    /** @ignore */
+    render(): void;
+    dispose(): void;
+    /**
+    * 设置View的裁剪区域，外部调用
+    */
+    setViewport(rendererOffset: NS_THREE.Vector4): void;
+    /**
+    * 更新相机和渲染区域的裁剪比例一致
+    */
+    private updateCameraAspect;
+    /**
+     * 设置相机姿态
+     * @param worldMatrix 相机的姿态矩阵
+     */
+    setCameraWorldMatrix(worldMatrix: number[]): void;
+    /**
+     * 设置相机裁剪
+     * @param fullWidth 多视图的全宽设置
+     * @param fullHeight 多视图的全高设置
+     * @param x 副摄像机的水平偏移
+     * @param y 副摄像机的垂直偏移
+     * @param width 副摄像机的宽度
+     * @param height 副摄像机的高度
+     */
+    setCameraViewPort(fullWidth: number, fullHeight: number, x: number, y: number, width: number, height: number): void;
+}
+export { PerspectiveView };

package/lib/owlly/view/perspective-view.js

@@ -0,0 +1,95 @@
+import { Externals } from '../stage/externals';
+import { View } from './view';
+/** 透视投影视图 */
+class PerspectiveView extends View {
+    // /**
+    //  * @param container 目标容器
+    //  */
+    // constructor(screen: Screen) {
+    //   super(screen);
+    // }
+    createCamera() {
+        if (this.camera)
+            return;
+        const { THREE } = Externals.getInstance();
+        this.camera = new THREE.PerspectiveCamera(60, 1, 0.01, 2000);
+        this.camera.up.set(0, 0, 1);
+        this.camera.position.set(0, 0, 100);
+        this.camera.lookAt(0, 0, 0);
+    }
+    /** @ignore */
+    resize(clientWidth, clientHeight) {
+        // 相机和渲染区域的裁剪比例一致
+        super.resize(clientWidth, clientHeight);
+        const { z, w } = this.rendererOffset || this.rendererOffsetDefault;
+        this.updateCameraAspect();
+        this.renderer.setSize(z, w);
+    }
+    bindScreen(screen) {
+        super.bindScreen(screen);
+        this.createCamera();
+        this.resize(screen.width, screen.height);
+    }
+    unbindScreen() {
+        super.unbindScreen();
+    }
+    /** @ignore */
+    render() {
+        if (!this.enabled || !this.renderer)
+            return;
+        this.renderer.render(this.stage.scene, this.camera);
+    }
+    dispose() {
+        super.dispose();
+    }
+    /**
+    * 设置View的裁剪区域，外部调用
+    */
+    setViewport(rendererOffset) {
+        super.setViewport(rendererOffset);
+        this.updateCameraAspect();
+    }
+    /**
+    * 更新相机和渲染区域的裁剪比例一致
+    */
+    updateCameraAspect() {
+        const { z, w } = this.rendererOffset || this.rendererOffsetDefault;
+        this.camera.aspect = z / w;
+        this.camera.updateProjectionMatrix();
+    }
+    /**
+     * 设置相机姿态
+     * @param worldMatrix 相机的姿态矩阵
+     */
+    setCameraWorldMatrix(worldMatrix) {
+        const { THREE } = Externals.getInstance();
+        this.camera.matrixAutoUpdate = false;
+        const position = new THREE.Vector3();
+        const scale = new THREE.Vector3();
+        const quaternion = new THREE.Quaternion();
+        new THREE.Matrix4().fromArray(worldMatrix).decompose(position, quaternion, scale);
+        this.camera.position.copy(position);
+        this.camera.quaternion.copy(quaternion);
+        this.camera.scale.copy(scale);
+        this.camera.updateMatrixWorld(true);
+        this.camera.matrixAutoUpdate = true;
+    }
+    /**
+     * 设置相机裁剪
+     * @param fullWidth 多视图的全宽设置
+     * @param fullHeight 多视图的全高设置
+     * @param x 副摄像机的水平偏移
+     * @param y 副摄像机的垂直偏移
+     * @param width 副摄像机的宽度
+     * @param height 副摄像机的高度
+     */
+    setCameraViewPort(fullWidth, fullHeight, x, y, width, height) {
+        if (!this.camera) {
+            console.warn('view.setCameraViewPort() is before bind screen'); // eslint-disable-line
+            return;
+        }
+        this.camera.setViewOffset(fullWidth, fullHeight, x, y, width, height);
+        this.updateCameraAspect();
+    }
+}
+export { PerspectiveView };

package/lib/owlly/view/svg-map-view.d.ts

@@ -0,0 +1,46 @@
+import { NS_THREE } from '../stage/externals';
+import { View } from './view';
+import { ModelSvgMapping } from '../utils/svgutils';
+/**
+ * 该 View 为早期为 BI 制作的专属 View, 可以不再进行维护. 其组成为两个定制开发的 Overlay. 这些 Overlay 也可以不再维护.
+ */
+declare class SvgMapView extends View {
+    camera: NS_THREE.PerspectiveCamera;
+    container: HTMLElement;
+    renderer: NS_THREE.WebGL1Renderer;
+    private pathOverlay;
+    private labelOverlay;
+    constructor(container: HTMLElement, shadowEnabled?: boolean);
+    update(): boolean;
+    setCameraPosition(x: number, y: number, z: number): void;
+    setCameraLookAt(x: number, y: number, z: number): void;
+    resize(): void;
+    render(scene: NS_THREE.Scene): void;
+    dispose(): void;
+    setPath(path: NS_THREE.Vector3[], startPointType: string | null, endPointType: string | null, message: string | null, fontSize: number, imageStyle: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    }, messageStyle: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+    }, iconStyle: {
+        width: number;
+        height: number;
+    }): void;
+    setStores(stores: {
+        position: NS_THREE.Vector3;
+        name: string;
+        nodeId: string;
+        fontSize?: number;
+    }[]): void;
+    setPriorNodes(ids: string[]): void;
+    getCameraInfo(target: NS_THREE.Object3D): {
+        position: NS_THREE.Vector3;
+        lookAt: NS_THREE.Vector3 | null;
+    };
+}
+export { SvgMapView, ModelSvgMapping };

package/lib/owlly/view/svg-map-view.js

@@ -0,0 +1,144 @@
+import { Externals } from '../stage/externals';
+// import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
+// import { SSAARenderPass } from 'three/examples/jsm/postprocessing/SSAARenderPass';
+import { View } from './view';
+import { PathOverlay } from '../overlay/path-overlay';
+import { LabelOverlay } from '../overlay/label-overlay';
+/**
+ * 该 View 为早期为 BI 制作的专属 View, 可以不再进行维护. 其组成为两个定制开发的 Overlay. 这些 Overlay 也可以不再维护.
+ */
+class SvgMapView extends View {
+    constructor(container, shadowEnabled = false) {
+        super();
+        const { THREE } = Externals.getInstance();
+        // init renderer
+        this.container = container;
+        this.renderer = new THREE.WebGL1Renderer({ antialias: true });
+        this.renderer.setPixelRatio(window.devicePixelRatio);
+        this.renderer.autoClear = false;
+        this.renderer.setSize(container.clientWidth, container.clientHeight);
+        this.renderer.shadowMap.enabled = shadowEnabled;
+        // this.renderer.shadowMap.type = PCFSoftShadowMap;
+        this.container.appendChild(this.renderer.domElement);
+        // init camera
+        this.camera = new THREE.PerspectiveCamera(60, this.container.clientWidth / this.container.clientHeight, 0.01, 2000);
+        this.camera.up.set(0, 0, 1);
+        this.camera.updateProjectionMatrix();
+        // overlay
+        this.pathOverlay = new PathOverlay();
+        this.labelOverlay = new LabelOverlay();
+        this.addOverlay(this.pathOverlay);
+        this.addOverlay(this.labelOverlay);
+    }
+    // private initPostProcessors(scene: Scene): void {
+    //   // post processing
+    //   this.composer = new EffectComposer(this.renderer);
+    //   this.ssaaRenderPass = new SSAARenderPass(scene, this.camera, 'black', 1.0);
+    //   this.ssaaRenderPass.unbiased = true;
+    //   this.ssaaRenderPass.sampleLevel = 2;
+    //   this.composer.addPass(this.ssaaRenderPass);
+    // }
+    update() {
+        const parentUpdate = super.update();
+        return parentUpdate;
+    }
+    setCameraPosition(x, y, z) {
+        this.camera.position.set(x, y, z);
+    }
+    setCameraLookAt(x, y, z) {
+        this.camera.lookAt(x, y, z);
+    }
+    resize() {
+        const { clientWidth, clientHeight } = this.container;
+        super.resize(clientWidth, clientHeight);
+        const containerAspect = clientWidth / clientHeight;
+        this.camera.aspect = containerAspect;
+        this.camera.updateProjectionMatrix();
+        this.renderer.setSize(clientWidth, clientHeight);
+        // if (this.composer) this.composer.setSize(clientWidth, clientHeight);
+    }
+    render(scene) {
+        if (!this.enabled)
+            return;
+        this.renderer.clear();
+        // if (!this.composer) this.initPostProcessors(scene);
+        // this.composer.render();
+        this.renderer.render(scene, this.camera);
+    }
+    dispose() {
+        super.dispose();
+        this.container.removeChild(this.renderer.domElement);
+        this.renderer.dispose();
+    }
+    setPath(path, startPointType, endPointType, message, fontSize, imageStyle, messageStyle, iconStyle) {
+        const { THREE } = Externals.getInstance();
+        this.pathOverlay.setPath3D(path);
+        const iconPoints = [];
+        if (path.length) {
+            if (startPointType && startPointType.length) {
+                iconPoints.push({
+                    position: path[0].clone(),
+                    src: `imgs/${startPointType}.png`,
+                    width: iconStyle.width,
+                    height: iconStyle.height,
+                    offsetX: 0,
+                    offsetY: 0,
+                });
+            }
+            if (endPointType && endPointType.length) {
+                iconPoints.push({
+                    position: path[path.length - 1].clone(),
+                    src: `imgs/${endPointType}.png`,
+                    width: iconStyle.width,
+                    height: iconStyle.height,
+                    offsetX: 0,
+                    offsetY: 0,
+                });
+                this.labelOverlay.setBubble({
+                    position: path[path.length - 1].clone(),
+                    message,
+                    fontSize,
+                    imageStyle,
+                    messageStyle,
+                });
+            }
+            else {
+                this.labelOverlay.setBubble({
+                    position: new THREE.Vector3(),
+                    message: null,
+                    fontSize,
+                    imageStyle,
+                    messageStyle,
+                });
+            }
+        }
+        else {
+            // TODO(jyfang): need refactoring
+            this.labelOverlay.setBubble({
+                position: new THREE.Vector3(),
+                message: null,
+                fontSize,
+                imageStyle,
+                messageStyle,
+            });
+        }
+        this.labelOverlay.setIconPoints(iconPoints);
+    }
+    setStores(stores) {
+        this.labelOverlay.setLabelPoints(stores);
+    }
+    setPriorNodes(ids) {
+        this.labelOverlay.setPriorLabelPoints(ids);
+    }
+    getCameraInfo(target) {
+        const { THREE } = Externals.getInstance();
+        const lookAtVec = new THREE.Vector3(0, 0, -1);
+        lookAtVec.applyQuaternion(this.camera.quaternion);
+        const raycaster = new THREE.Raycaster();
+        raycaster.set(this.camera.position.clone(), lookAtVec);
+        const hits = raycaster.intersectObject(target, true);
+        const lookAt = hits.length ? hits[0].point : null;
+        return { position: this.camera.position.clone(), lookAt };
+    }
+}
+export { SvgMapView };

package/lib/owlly/view/view.d.ts

@@ -0,0 +1,146 @@
+import { NS_THREE } from '../stage/externals';
+import { Screen } from '../screen/screen';
+import { Stage } from '../stage/stage';
+import { Overlay } from '../overlay/overlay';
+import { EventHubClassic } from '../utils/event-hub';
+/** @ignore */
+interface View {
+    camera?: NS_THREE.Camera;
+    renderer?: NS_THREE.WebGL1Renderer | NS_THREE.WebGLRenderer | null;
+}
+/** @ignore */
+declare abstract class View extends EventHubClassic {
+    protected enabled: boolean;
+    private overlays;
+    private listeners;
+    protected rendererOffset: NS_THREE.Vector4;
+    protected rendererOffsetDefault: NS_THREE.Vector4;
+    /**
+     * View 的父级 Screen, 可能不存在
+     */
+    parent: Screen | null;
+    /**
+     * 是否渲染 Stage 内内容, 用于只希望渲染 Overlay 的情况
+     */
+    renderStage: boolean;
+    /**
+     * 该 View 在父级 Screen 的渲染顺序, 值越大渲染顺序越靠后, 即更高层级
+     */
+    renderOrder: number;
+    /**
+     * View 所关联的 Stage
+     */
+    stage: Stage;
+    /**
+     * @param screen 指定 View 所绘制的 Screen
+     * @param renderStage 是否渲染所绑定场景
+     */
+    constructor(screen?: Screen, renderStage?: boolean);
+    private mouseDown;
+    private mouseMove;
+    private mouseUp;
+    private mouseWheel;
+    private touchStart;
+    private touchMove;
+    private touchEnd;
+    private contextMenu;
+    private dblclick;
+    set render3D(value: boolean);
+    get container(): HTMLElement;
+    get canvas(): HTMLCanvasElement;
+    /**
+     * 事件是否在当前view裁剪区域内触发
+     */
+    private isInView;
+    /**
+     * 事件是否在当前view裁剪区域内触发
+     * 移动端，判断多个点
+     */
+    private isTouchInView;
+    /**
+     * 绑定 Screen
+     */
+    bindScreen(screen: Screen): void;
+    /**
+     * 解绑 Screen
+     */
+    unbindScreen(): void;
+    /**
+     * @ignore
+     */
+    registerScreenEvents(): void;
+    /**
+     * @ignore
+     */
+    unregisterScreenEvents(): void;
+    /**
+     * 销毁 View
+     */
+    dispose(): void;
+    /**
+     * 添加 Overlay, Overlay 渲染顺序与添加顺序一致
+     * @param overlay 需要添加的 Overlay
+     */
+    addOverlay(overlay: Overlay): void;
+    /**
+     * 移除 Overlay
+     * @param overlay 需要移除的 Overlay
+     */
+    removeOverlay(overlay: Overlay): void;
+    /**
+     * 设置 View 的渲染尺寸
+     * @param containerWidth 宽度, 单位 px
+     * @param containerHeight 高度, 单位 px
+     */
+    resize(containerWidth: number, containerHeight: number): void;
+    /**
+     * 钩子函数, 更新 View, 每一个 tick 执行
+     * @ignore
+     */
+    update(): boolean;
+    abstract render(scene?: NS_THREE.Scene): void;
+    /**
+     * 渲染该 View
+     * @ignore
+     */
+    renderView(): void;
+    /**
+     * 设置当前View是否工作
+     * @param value 开关值
+     */
+    setEnabled(value: boolean): void;
+    /**
+     * 绑定 Stage
+     * @param stage 需要绑定的 Stage
+     */
+    bindStage(stage: Stage): void;
+    /**
+     * 设置 View的 裁剪区域，外部调用
+     * @param rendererOffset 裁剪配置
+     */
+    setViewport(rendererOffset: NS_THREE.Vector4): void;
+    /**
+     * 设置renderer的裁剪区域，screen调用
+     * @ignore
+     */
+    setRendererPort(): void;
+    /**
+     * 清空renderer的裁剪区域，screen调用
+     * @ignore
+     */
+    clearRendererPort(): void;
+    /**
+     * 获取view的实际宽度
+     */
+    getViewWidth(): number;
+    /**
+     * 获取view的实际高度
+     */
+    getViewHeight(): number;
+    /**
+     * 获取view的实际与screen的偏离
+     */
+    getViewOffset(): [number, number];
+    setRenderOrder(renderOrder: number): void;
+}
+export { View };