@aibee/owlly 1.0.25 → 1.0.29

package/lib/owlly/overlay/label-overlay.d.ts

@@ -0,0 +1,62 @@
+import { NS_THREE } from '../stage/externals';
+import { Overlay } from './overlay';
+import { View } from '../view/view';
+/**
+ * 该文件应被舍弃, 不再使用
+ * @deprecated
+ */
+declare class LabelOverlay extends Overlay {
+    private container;
+    private parent;
+    private overlay;
+    private iconPoints;
+    private labelPoints;
+    private bubblePoint;
+    private renderThisFrame;
+    init(parent: View, container?: HTMLElement): void;
+    update(): boolean;
+    render(): void;
+    setRenderOrder(order: number): void;
+    dispose(): void;
+    static getBiggerPos(arr: number[][], target: number, index: number): number;
+    static getSmallerPos(arr: number[][], target: number, index: number): number;
+    setBubble({ position, message, imageStyle, messageStyle, fontSize, }: {
+        position: NS_THREE.Vector3;
+        message: string | null;
+        fontSize: number;
+        imageStyle: {
+            left: number;
+            top: number;
+            width: number;
+            height: number;
+        };
+        messageStyle: {
+            left: number;
+            top: number;
+            width: number;
+            height: number;
+        };
+    }): void;
+    setIconPoints(points: {
+        position: NS_THREE.Vector3;
+        src: string;
+        width: number;
+        height: number;
+        offsetX: number;
+        offsetY: number;
+    }[]): void;
+    setLabelPoints(points: {
+        position: NS_THREE.Vector3;
+        name: string;
+        nodeId: string;
+        color?: string;
+        pointSize?: number;
+        offsetX?: number;
+        offsetY?: number;
+        showGuideline?: boolean;
+        fontSize?: number;
+        alwaysShow?: boolean;
+    }[]): void;
+    setPriorLabelPoints(ids: string[]): void;
+}
+export { LabelOverlay };

package/lib/owlly/overlay/label-overlay.js

@@ -0,0 +1,328 @@
+import { Overlay } from './overlay';
+import { Events } from '../utils/events';
+/**
+ * 该文件应被舍弃, 不再使用
+ * @deprecated
+ */
+class LabelOverlay extends Overlay {
+    init(parent, container = new HTMLElement()) {
+        this.container = container;
+        this.parent = parent;
+        if (!this.parent.camera) {
+            throw new Error('Parent view should have a camera to rely on');
+        }
+        this.iconPoints = [];
+        this.labelPoints = [];
+        this.renderThisFrame = false;
+        this.overlay = document.createElement('div');
+        this.overlay.style.cssText = `
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    `;
+        this.container.appendChild(this.overlay);
+    }
+    update() {
+        this.labelPoints.forEach(({ labelElement, ready }, i) => {
+            if (ready)
+                return;
+            const { width, height } = labelElement.getBoundingClientRect();
+            labelElement.style.setProperty('left', `${-width * 0.5}px`);
+            labelElement.style.setProperty('top', `${-height - 4}px`);
+            this.labelPoints[i].ready = true;
+        });
+        if (this.renderThisFrame) {
+            this.renderThisFrame = false;
+            return true;
+        }
+        return false;
+    }
+    render() {
+        const { clientWidth, clientHeight } = this.container;
+        const widthHalf = clientWidth / 2;
+        const heightHalf = clientHeight / 2;
+        this.iconPoints.forEach(({ element, position, offsetX, offsetY, }) => {
+            if (!this.parent.camera)
+                return;
+            const p = position.clone();
+            p.project(this.parent.camera);
+            element.style.setProperty('left', `${(p.x + 1) * widthHalf - 20 + offsetX}px`);
+            element.style.setProperty('top', `${(1 - p.y) * heightHalf - 40 + offsetY}px`);
+        });
+        this.emit(Events.LABEL_ICONS_POSITION_UPDATED, this.iconPoints.map((p) => (p.element)));
+        if (this.bubblePoint
+            && this.bubblePoint.message
+            && this.bubblePoint.message.length
+            && this.parent.camera) {
+            const p = this.bubblePoint.position.clone();
+            p.project(this.parent.camera);
+            this.bubblePoint.element.style.setProperty('left', `${(p.x + 1) * widthHalf}px`);
+            this.bubblePoint.element.style.setProperty('top', `${(1 - p.y) * heightHalf}px`);
+        }
+        const range = [];
+        this.labelPoints.forEach(({ element, labelElement, position, pointElement, alwaysShow, }, i) => {
+            if (!this.parent.camera)
+                return;
+            const p = position.clone();
+            p.project(this.parent.camera);
+            if (!Number.isFinite(p.x) || !Number.isFinite(p.y))
+                return;
+            const posX = (p.x + 1) * widthHalf;
+            const posY = (1 - p.y) * heightHalf;
+            element.style.setProperty('left', `${posX}px`);
+            element.style.setProperty('top', `${posY}px`);
+            const { width, height } = labelElement.getBoundingClientRect();
+            const leftX = posX - width / 2 - 8;
+            const rightX = posX + width / 2 + 8;
+            const topY = posY - height - 4 - 8;
+            const bottomY = posY - 4 + 8;
+            if (i === 0) {
+                range.push([leftX, rightX, topY, bottomY]);
+                return;
+            }
+            const valid = alwaysShow || !range.some(([lx, rx, ty, by]) => {
+                if (leftX >= lx && leftX >= rx)
+                    return false;
+                if (leftX <= rx && rightX <= lx)
+                    return false;
+                if (topY >= ty && topY >= by)
+                    return false;
+                if (topY <= by && bottomY <= ty)
+                    return false;
+                return true;
+            });
+            if (valid) {
+                range.push([leftX, rightX, topY, bottomY]);
+                labelElement.style.setProperty('opacity', '1');
+                pointElement.style.setProperty('opacity', '1');
+            }
+            else {
+                labelElement.style.setProperty('opacity', '0');
+                pointElement.style.setProperty('opacity', '0');
+            }
+        });
+    }
+    setRenderOrder(order) {
+        this.overlay.style.setProperty('z-index', `${order}`);
+    }
+    dispose() {
+        if (this.container)
+            this.container.removeChild(this.overlay);
+        delete this.overlay; // eslint-disable-line
+    }
+    static getBiggerPos(arr, target, index) {
+        let i = 0;
+        let j = arr.length - 1;
+        while (i !== j) {
+            const p = Math.ceil((i + j) / 2);
+            const v = arr[p][index];
+            if (target >= v) {
+                i = p;
+            }
+            else {
+                j = p - 1;
+            }
+        }
+        return i;
+    }
+    static getSmallerPos(arr, target, index) {
+        let i = 0;
+        let j = arr.length - 1;
+        while (i !== j) {
+            const p = Math.floor((i + j) / 2);
+            const v = arr[p][index];
+            if (target >= v) {
+                i = p + 1;
+            }
+            else {
+                j = p;
+            }
+        }
+        return i;
+    }
+    setBubble({ position, message, imageStyle, messageStyle, fontSize, }) {
+        if (this.bubblePoint
+            && this.bubblePoint.message
+            && this.bubblePoint.message.length) {
+            this.overlay.removeChild(this.bubblePoint.element);
+            this.bubblePoint.message = '';
+        }
+        if (!message || !message.length)
+            return;
+        this.bubblePoint = {
+            element: document.createElement('div'),
+            imageElement: document.createElement('img'),
+            messageElement: document.createElement('div'),
+            position,
+            message,
+        };
+        this.bubblePoint.element.style.cssText = `
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 0;
+      height: 0;
+      z-index: 2;
+    `;
+        this.bubblePoint.imageElement.src = 'imgs/bubble.png';
+        this.bubblePoint.imageElement.style.cssText = `
+      pointer-events: none;
+      position: absolute;
+      top: ${imageStyle.top || -110}px;
+      left: ${imageStyle.left || -103.5}px;
+      width: ${imageStyle.width || 207}px;
+      height: ${imageStyle.height || 85}px;
+      object-fit: contain;
+      z-index: 2;
+    `;
+        this.bubblePoint.messageElement.innerHTML = `
+      <span style="text-align: center;">
+        ${message}
+      </span>
+    `;
+        this.bubblePoint.messageElement.style.cssText = `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      top: ${messageStyle.top || -104}px;
+      left: ${messageStyle.left || -82}px;
+      width: ${messageStyle.width || 164}px;
+      height: ${messageStyle.height || 42}px;
+      color: #000;
+      font-size: ${fontSize}px;
+      z-index: 3;
+    `;
+        this.bubblePoint.element.appendChild(this.bubblePoint.imageElement);
+        this.bubblePoint.element.appendChild(this.bubblePoint.messageElement);
+        this.overlay.appendChild(this.bubblePoint.element);
+        this.renderThisFrame = true;
+    }
+    setIconPoints(points) {
+        const srcSet = new Set();
+        const srcMap = new Map();
+        points.forEach(({ src }) => { srcSet.add(src); });
+        while (this.iconPoints.length) {
+            const p = this.iconPoints.pop();
+            if (p) {
+                const s = p.element.src;
+                if (srcSet.has(s))
+                    srcMap.set(s, p);
+                else
+                    this.overlay.removeChild(p.element);
+            }
+        }
+        this.iconPoints.push(...srcMap.values());
+        points.forEach(({ position, src, width, height, offsetX, offsetY, }) => {
+            if (srcMap.has(src)) {
+                srcMap.get(src).position = position;
+                return;
+            }
+            const point = {
+                element: document.createElement('img'), position, offsetX, offsetY,
+            };
+            point.element.src = src;
+            point.element.style.cssText = `
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: ${width || 40}px;
+        height: ${height || 40}px;
+        object-fit: contain;
+        z-index: 2;
+      `;
+            this.iconPoints.push(point);
+            this.overlay.appendChild(point.element);
+        });
+        this.renderThisFrame = true;
+    }
+    setLabelPoints(points) {
+        while (this.labelPoints.length) {
+            const p = this.labelPoints.pop();
+            if (p)
+                this.overlay.removeChild(p.element);
+        }
+        points.forEach(({ position, name, nodeId, color, pointSize, offsetX, offsetY, showGuideline, fontSize, alwaysShow, }) => {
+            const pSize = pointSize || 4;
+            const offX = offsetX || 0;
+            const offY = offsetY || 0;
+            const point = {
+                element: document.createElement('div'),
+                labelElement: document.createElement('div'),
+                pointElement: document.createElement('div'),
+                position,
+                name,
+                size: [0, 0],
+                ready: false,
+                id: nodeId,
+                priority: 0,
+                alwaysShow: !!alwaysShow,
+            };
+            point.element.style.cssText = `
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: auto;
+        height: auto;
+        z-index: 1;
+      `;
+            point.labelElement.innerHTML = name;
+            // TODO(jyfang): Free color settings.
+            point.labelElement.style.cssText = `
+        position: absolute;
+        font-size: ${fontSize || 16}px;
+        white-space: nowrap;
+        color: ${color || '#A57D50'};
+        font-weight: 500;
+        text-shadow: 0 1px white, 1px 0 white, -1px 0 white, 0 -1px white;
+        transform: translate(${offX}px, ${offY}px);
+      `;
+            point.pointElement.style.cssText = `
+        display: inline-block;
+        position: absolute;
+        top: -${pSize / 2}px;
+        left: -${pSize / 2}px;
+        height: ${pSize}px;
+        width: ${pSize}px;
+        background-color: ${color || '#A57D50'};
+        border-radius: 50%;
+        box-shadow: 0 0 1px 2px #fff;
+      `;
+            point.element.appendChild(point.labelElement);
+            point.element.appendChild(point.pointElement);
+            if (showGuideline) {
+                point.guidelineElement = document.createElement('div');
+                point.guidelineElement.style.cssText = `
+          position: absolute;
+          width: 2px;
+          height: ${Math.abs(offY) - 20}px;
+          top: ${Math.sign(offY) * (Math.abs(offY) - 20)}px;
+          left: -1px;
+          background-color: #fff;
+        `;
+                point.element.appendChild(point.guidelineElement);
+            }
+            this.labelPoints.push(point);
+            this.overlay.appendChild(point.element);
+        });
+        this.renderThisFrame = true;
+    }
+    setPriorLabelPoints(ids) {
+        const idSet = new Set();
+        ids.forEach((id) => { idSet.add(id); });
+        this.labelPoints.forEach((p) => {
+            if (idSet.has(p.id))
+                p.priority = 999;
+            else
+                p.priority = 0;
+        });
+        this.labelPoints.sort((a, b) => b.priority - a.priority);
+    }
+}
+export { LabelOverlay };

package/lib/owlly/overlay/overlay.d.ts

@@ -0,0 +1,14 @@
+import { NS_THREE } from '../stage/externals';
+import { View } from '../view/view';
+import { EventHubClassic } from '../utils/event-hub';
+declare class Overlay extends EventHubClassic {
+}
+interface Overlay {
+    init(parent: View): void;
+    update(): boolean;
+    render(scene?: NS_THREE.Scene): void;
+    setRenderOrder(order: number): void;
+    resize?(containerWidth: number, containerHeight: number): void;
+    dispose(): void;
+}
+export { Overlay };

package/lib/owlly/overlay/overlay.js

@@ -0,0 +1,4 @@
+import { EventHubClassic } from '../utils/event-hub';
+class Overlay extends EventHubClassic {
+}
+export { Overlay };

package/lib/owlly/overlay/path-overlay.d.ts

@@ -0,0 +1,39 @@
+import { NS_THREE } from '../stage/externals';
+import { Overlay } from './overlay';
+import { View } from '../view/view';
+/**
+ * 该类应该被舍弃, 不再使用
+ * @deprecated
+ */
+declare class PathOverlay extends Overlay {
+    private container;
+    private parent;
+    private canvas;
+    private context;
+    private devicePixelRatio;
+    private path;
+    private showEndPoints;
+    private startColor;
+    private endColor;
+    private lineWidth;
+    private setCanvasHeight;
+    init(parent: View, container?: HTMLElement): void;
+    resize(containerWidth: number, containerHeight: number): void;
+    update(): boolean;
+    render(): void;
+    setRenderOrder(order: number): void;
+    dispose(): void;
+    setPath3D(path: NS_THREE.Vector3[]): void;
+    setEndPointsVisible(value: boolean): void;
+    setColors(start: {
+        r: number;
+        g: number;
+        b: number;
+    }, end: {
+        r: number;
+        g: number;
+        b: number;
+    }): void;
+    setLineWidth(lineWidth: number): void;
+}
+export { PathOverlay };

package/lib/owlly/overlay/path-overlay.js

@@ -0,0 +1,124 @@
+import { Overlay } from './overlay';
+/**
+ * 该类应该被舍弃, 不再使用
+ * @deprecated
+ */
+class PathOverlay extends Overlay {
+    setCanvasHeight(containerWidth, containerHeight) {
+        this.canvas.width = containerWidth * this.devicePixelRatio;
+        this.canvas.height = containerHeight * this.devicePixelRatio;
+        this.canvas.style.width = `${containerWidth}px`;
+        this.canvas.style.height = `${containerHeight}px`;
+    }
+    init(parent, container = new HTMLElement()) {
+        this.container = container;
+        this.parent = parent;
+        this.devicePixelRatio = window.devicePixelRatio;
+        this.canvas = document.createElement('canvas');
+        this.path = [];
+        this.context = this.canvas.getContext('2d');
+        this.showEndPoints = true;
+        // this.forceRender = false;
+        this.canvas.style.cssText = `
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 0;
+    `;
+        const { clientWidth, clientHeight } = this.container;
+        this.setCanvasHeight(clientWidth, clientHeight);
+        this.container.appendChild(this.canvas);
+        this.startColor = { r: 109, g: 150, b: 253 };
+        this.endColor = { r: 109, g: 150, b: 253 };
+        this.lineWidth = 9;
+    }
+    resize(containerWidth, containerHeight) {
+        this.setCanvasHeight(containerWidth, containerHeight);
+    }
+    update() {
+        return false;
+    }
+    render() {
+        if (!this.context)
+            return;
+        const widthHalf = this.canvas.width / 2;
+        const heightHalf = this.canvas.height / 2;
+        const renderPath = [];
+        this.path.forEach((v) => {
+            if (!this.parent.camera)
+                return;
+            const p = v.clone();
+            p.project(this.parent.camera);
+            renderPath.push([(p.x + 1) * widthHalf, (1 - p.y) * heightHalf]);
+        });
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        if (!renderPath.length)
+            return;
+        this.context.lineCap = 'round';
+        this.context.lineJoin = 'round';
+        const diff = {
+            r: this.endColor.r - this.startColor.r,
+            g: this.endColor.g - this.startColor.g,
+            b: this.endColor.b - this.startColor.b,
+        };
+        diff.r /= (renderPath.length - 1);
+        diff.g /= (renderPath.length - 1);
+        diff.b /= (renderPath.length - 1);
+        const currentColor = Object.assign({}, this.startColor);
+        this.context.lineWidth = this.lineWidth;
+        this.context.beginPath();
+        renderPath.forEach((p, i) => {
+            if (!this.context)
+                return;
+            if (i === 0) {
+                this.context.moveTo(...p);
+            }
+            else {
+                this.context.lineTo(...p);
+                currentColor.r += diff.r;
+                currentColor.g += diff.g;
+                currentColor.b += diff.b;
+                this.context.strokeStyle = `rgb(${currentColor.r}, ${currentColor.g}, ${currentColor.b})`;
+                this.context.stroke();
+                this.context.beginPath();
+                this.context.moveTo(...p);
+            }
+        });
+        if (!this.showEndPoints)
+            return;
+        this.context.fillStyle = '#6F8DFF';
+        this.context.beginPath();
+        this.context.arc(renderPath[0][0], renderPath[0][1], 16, 0, Math.PI * 2);
+        this.context.arc(renderPath[renderPath.length - 1][0], renderPath[renderPath.length - 1][1], 16, 0, Math.PI * 2);
+        this.context.fill();
+        this.context.fillStyle = '#FFFFFF';
+        this.context.strokeStyle = 'none';
+        this.context.beginPath();
+        this.context.arc(renderPath[0][0], renderPath[0][1], 8, 0, Math.PI * 2);
+        this.context.arc(renderPath[renderPath.length - 1][0], renderPath[renderPath.length - 1][1], 8, 0, Math.PI * 2);
+        this.context.fill();
+    }
+    setRenderOrder(order) {
+        this.canvas.style.setProperty('z-index', `${order}`);
+    }
+    dispose() {
+        if (this.container)
+            this.container.removeChild(this.canvas);
+        delete this.canvas; // eslint-disable-line
+    }
+    setPath3D(path) {
+        this.path = path;
+        this.render();
+    }
+    setEndPointsVisible(value) {
+        this.showEndPoints = value;
+    }
+    setColors(start, end) {
+        this.startColor = start;
+        this.endColor = end;
+    }
+    setLineWidth(lineWidth) {
+        this.lineWidth = lineWidth;
+    }
+}
+export { PathOverlay };

package/lib/owlly/overlay/path-overlay2.d.ts

@@ -0,0 +1,35 @@
+import { NS_THREE } from '../stage/externals';
+import { Overlay } from './overlay';
+import { View } from '../view/view';
+import { MeshLine2D } from '../element';
+/**
+ * POI覆盖层, 画线用
+ * @example
+ * ```typescript
+ * const PathOverlay2 = new PathOverlay2();
+ * // 任意View
+ * view.addOverlay(PathOverlay2);
+ * ```
+ */
+declare class PathOverlay2 extends Overlay {
+    private parent;
+    private renderThisFrame;
+    private pathMap;
+    private enabled;
+    static instanceId: number;
+    camera: NS_THREE.Camera;
+    scene: NS_THREE.Scene;
+    renderer: NS_THREE.Renderer;
+    constructor();
+    init(parent: View): void;
+    update(): boolean;
+    private handleElementUpdate;
+    render(): void;
+    resize(containerWidth: number, containerHeight: number): void;
+    setEnabled(value: boolean): void;
+    createPath(points: [number, number, number][], options: any, ifClear?: boolean): Set<MeshLine2D>;
+    removePath(path: MeshLine2D): void;
+    clearPaths(): void;
+    dispose(): void;
+}
+export { PathOverlay2 };