@realsee/dnalogel 2.1.0-alpha.13 → 2.1.0-alpha.15

package/libs/src/PanoDoorLabelPlugin/Controller.js

@@ -0,0 +1,439 @@
+import { Euler, Quaternion, Raycaster, Vector3 } from 'three';
+import { BasePanoPluginController } from './BaseController';
+import DoorLabelItem from './DoorLabelItem';
+import { getCameraToward, getDistance, getToward, isTwoRectOverlaped } from './utils';
+const defaultBaseOptions = { userAction: true };
+/**
+ * 分间标签插件
+ * @author kyleju
+ */
+export class PanoDoorLabelPluginController extends BasePanoPluginController {
+    constructor(five) {
+        super(five);
+        Object.defineProperty(this, "MinVisibledistance", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 1.8
+        });
+        Object.defineProperty(this, "MaxVisibledistance", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 5
+        });
+        Object.defineProperty(this, "OffsetHeight", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: -1.3
+        }); // 标签页面高度偏移值
+        Object.defineProperty(this, "rooms", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "floorplanServerData", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** 标签项 */
+        Object.defineProperty(this, "doorLabelItems", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** 每个点位 visible 标签的缓存 */
+        Object.defineProperty(this, "visibleLabelMap", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
+        });
+        /** 标签项Prop值 */
+        Object.defineProperty(this, "labelItems", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        /** 数据 */
+        Object.defineProperty(this, "doorLabels", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "roomObservers", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "loadData", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (floorplanServerData, doorLabelConfig) => {
+                if (doorLabelConfig) {
+                    this.MaxVisibledistance = doorLabelConfig.MaxVisibledistance;
+                    this.MinVisibledistance = doorLabelConfig.MinVisibledistance;
+                    this.OffsetHeight = doorLabelConfig.OffsetHeight;
+                }
+                if (this.doorLabelItems && this.doorLabelItems.length > 0) {
+                    this.doorLabelItems.forEach((doorItem) => {
+                        doorItem.$destroy();
+                    });
+                }
+                this.labelItems = [];
+                this.doorLabels = [];
+                this.doorLabelItems = [];
+                this.floorplanServerData = floorplanServerData;
+                this.five.once('panoArrived', () => {
+                    console.log('doorplugin', 'panoArrived');
+                    this.initData();
+                });
+            }
+        });
+        Object.defineProperty(this, "initRoomObservers", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                var _a, _b;
+                const floorDatas = this.floorplanServerData.computed_data.floor_datas || [];
+                const observers = ((_b = (_a = this.five) === null || _a === void 0 ? void 0 : _a.work) === null || _b === void 0 ? void 0 : _b.observers) || [];
+                const roomObservers = observers
+                    // eslint-disable-next-line array-callback-return
+                    .map((ob) => {
+                    const panoIndex = ob.panoIndex;
+                    const floorIndex = ob.floorIndex;
+                    const floor = floorDatas === null || floorDatas === void 0 ? void 0 : floorDatas.find((d) => d.floor_index === floorIndex);
+                    if (floor) {
+                        const room = floor.rooms.find((r) => r.observer_indexs.includes(panoIndex));
+                        if (room) {
+                            return { panoIndex, floorIndex, name: room.name };
+                        }
+                    }
+                })
+                    .filter(Boolean);
+                this.roomObservers = roomObservers;
+            }
+        });
+        Object.defineProperty(this, "hideAllLabels", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.labelItems.forEach((item) => {
+                    item.visible = false;
+                    item.inSight = false;
+                });
+                this.render();
+            }
+        });
+        Object.defineProperty(this, "fixDoorVisibleAndPosition", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                this.initRoomObservers();
+                const { panoIndex } = this.five;
+                if (!this.visible)
+                    return;
+                if (this.five.model.empty)
+                    return;
+                if (panoIndex === null)
+                    return;
+                if (!this.roomObservers.find((item) => item.panoIndex === panoIndex))
+                    return;
+                const roomObserver = this.roomObservers.find((item) => {
+                    return item.panoIndex === panoIndex;
+                });
+                const position = this.five.work.observers.find((item) => item.panoIndex === panoIndex).position;
+                const targetPoint = position.clone();
+                const visibleLabelIds = (() => {
+                    if (this.visibleLabelMap.has(panoIndex)) {
+                        /** 使用缓存 */
+                        return this.visibleLabelMap.get(panoIndex);
+                    }
+                    else {
+                        const visibleDoorIds = [];
+                        this.doorLabels.forEach((doorLabelItem, index) => {
+                            // step1 校验分间
+                            if (doorLabelItem.roomName === roomObserver.name)
+                                return;
+                            // step2 校验最大最小值
+                            const doorPosition = doorLabelItem.position.clone();
+                            const distance = doorPosition.distanceTo(targetPoint);
+                            if (distance < this.MinVisibledistance || distance > this.MaxVisibledistance)
+                                return;
+                            // step3 碰撞检测是否有遮挡
+                            const raycaster = new Raycaster();
+                            const direction = doorPosition.clone().sub(targetPoint).normalize();
+                            raycaster.set(targetPoint, direction);
+                            const [intersection] = this.five.model.intersectRaycaster(raycaster);
+                            if (intersection && intersection.distance + 0.1 < distance)
+                                return;
+                            // 🥳 最终剩下的就是当前点位可见的标签
+                            visibleDoorIds.push(index);
+                        });
+                        this.visibleLabelMap.set(panoIndex, visibleDoorIds);
+                        return visibleDoorIds;
+                    }
+                })();
+                this.labelItems.forEach((data, index) => {
+                    data.visible = visibleLabelIds.includes(index);
+                });
+                this.fixDoorPosition();
+            }
+        });
+        Object.defineProperty(this, "fixDoorPosition", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                const { panoIndex, camera } = this.five;
+                if (panoIndex === null)
+                    return;
+                if (this.five.currentMode !== 'Panorama')
+                    return this.hideAllLabels();
+                const fiveElement = this.five.getElement();
+                const canvasWidth = fiveElement.clientWidth;
+                const canvasHeight = fiveElement.clientHeight;
+                const cameraDirection = camera.getWorldDirection(new Vector3());
+                const neverOverlapLabels = [];
+                const labelItems = [...this.labelItems];
+                labelItems.forEach((doorLabel, index) => {
+                    if (doorLabel.visible) {
+                        const disFromCameraToLabel = camera.position.distanceTo(doorLabel.position);
+                        const labelPosition = doorLabel.position.clone().add(new Vector3(0, this.OffsetHeight, 0));
+                        const direction = labelPosition.clone().sub(camera.position).normalize();
+                        const angle = direction.angleTo(cameraDirection);
+                        const mouse = labelPosition.clone().project(camera);
+                        const left = ((mouse.x + 1) / 2.2) * 100;
+                        const top = ((-mouse.y + 1) / 2.2) * 100;
+                        const visible = left >= 0 &&
+                            left <= 100 &&
+                            top >= 0 &&
+                            top <= 100 &&
+                            disFromCameraToLabel > this.MinVisibledistance &&
+                            disFromCameraToLabel <= this.MaxVisibledistance;
+                        doorLabel.left = left;
+                        doorLabel.top = top;
+                        doorLabel.inSight = visible && angle < Math.PI / 2;
+                        doorLabel.cameraToward = getCameraToward(this.five);
+                        if (visible)
+                            neverOverlapLabels.push({ disFromCameraToLabel, left, top, index });
+                        else
+                            doorLabel.transform = 'translate(-50%, -50%)';
+                    }
+                    else {
+                        doorLabel.inSight = false;
+                    }
+                });
+                // 视线内多标签防重叠单独处理
+                if (neverOverlapLabels.length > 1) {
+                    let heightLevel = 0;
+                    neverOverlapLabels.sort((a, b) => b.disFromCameraToLabel - a.disFromCameraToLabel);
+                    for (let i = 1; i < neverOverlapLabels.length; i++) {
+                        const { index: idx1, left: l1, top: t1 } = neverOverlapLabels[i - 1];
+                        const { index: idx2, left: l2, top: t2 } = neverOverlapLabels[i];
+                        const rectDom1 = this.container.children[idx1];
+                        const rectDom2 = this.container.children[idx2];
+                        if (!rectDom1 || !rectDom2)
+                            return;
+                        const rect1 = {
+                            left: (canvasWidth * l1) / 100,
+                            top: (canvasHeight * t1) / 100,
+                            width: rectDom1.children[0].clientWidth,
+                            height: rectDom1.children[0].clientHeight,
+                        };
+                        const rect2 = {
+                            left: (canvasWidth * l2) / 100,
+                            top: (canvasHeight * t2) / 100,
+                            width: rectDom2.children[0].clientWidth,
+                            height: rectDom2.children[0].clientHeight,
+                        };
+                        if (isTwoRectOverlaped(rect1, rect2)) {
+                            heightLevel++;
+                            labelItems[idx1].transform = `translate(-50%, ${(heightLevel - 1) * 100 - 50}%)`;
+                            labelItems[idx2].transform = `translate(-50%, ${heightLevel * 100 - 50}%)`;
+                        }
+                    }
+                }
+                this.labelItems = labelItems;
+                this.render();
+            }
+        });
+        Object.defineProperty(this, "onClick", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (roomName, position) => {
+                if (!this.roomObservers)
+                    return;
+                const { work } = this.five;
+                let nearestIndex;
+                let nearestVector;
+                let minDistance = Infinity;
+                for (let index = 0; index < work.observers.length; index++) {
+                    if (this.roomObservers[index].name !== roomName)
+                        continue;
+                    const observer = work.observers[index];
+                    const observerPoint = observer.standingPosition;
+                    const distance = position.distanceTo(observerPoint);
+                    if (distance < minDistance) {
+                        nearestIndex = index;
+                        nearestVector = observerPoint.clone().sub(position).normalize();
+                        minDistance = distance;
+                    }
+                }
+                if (nearestVector !== null && nearestIndex !== null) {
+                    const options = {};
+                    if (minDistance > 0) {
+                        const fromVector = new Vector3(0, 0, -1);
+                        const toVector = nearestVector.clone();
+                        const quaternion = new Quaternion();
+                        quaternion.setFromUnitVectors(fromVector, toVector);
+                        const euler = new Euler();
+                        euler.setFromQuaternion(quaternion, 'YXZ');
+                        options.longitude = euler.y;
+                    }
+                    const canceled = this.five.emit('wantsToMoveToPano', nearestIndex, {}, true);
+                    if (!canceled) {
+                        this.five.moveToPano(nearestIndex, { longitude: options.longitude });
+                    }
+                }
+            }
+        });
+        Object.defineProperty(this, "initData", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                var _a;
+                this.doorLabels = [];
+                const pano_index = this.five.panoIndex;
+                const floor_index = this.floorplanServerData.computed_data.observers[pano_index].floor_index;
+                const rooms = floor_index !== undefined &&
+                    ((_a = this.floorplanServerData.computed_data.floor_datas[floor_index]) === null || _a === void 0 ? void 0 : _a.rooms);
+                this.rooms = rooms;
+                if (this.rooms && this.rooms.length > 0) {
+                    this.rooms.forEach((room) => {
+                        var _a;
+                        const doors = (_a = this.floorplanServerData.computed_data.doors) === null || _a === void 0 ? void 0 : _a.filter((doorItem) => {
+                            if (doorItem && doorItem.name === room.name) {
+                                return true;
+                            }
+                            return false;
+                        });
+                        const observersInRoom = this.five.work.observers.filter((observer, index) => {
+                            if (room.observer_indexs.find((item) => item === index))
+                                return true;
+                            return false;
+                        });
+                        if (doors) {
+                            doors.forEach((door) => {
+                                const doorPoint = door.position;
+                                let minDistance = Infinity;
+                                let nearestPoint;
+                                // 遍历门所在房间所有的点，找到离门最近的点
+                                observersInRoom.forEach((observer) => {
+                                    const position = observer.standingPosition;
+                                    const observerPoint = {
+                                        x: position.x,
+                                        y: position.y,
+                                        z: position.z,
+                                    };
+                                    const distance = getDistance(doorPoint, observerPoint);
+                                    if (distance < minDistance) {
+                                        minDistance = distance;
+                                        nearestPoint = observerPoint;
+                                    }
+                                });
+                                if (nearestPoint)
+                                    doorPoint.y = nearestPoint.y + 0.01;
+                                const position = new Vector3(doorPoint.x, doorPoint.y, doorPoint.z);
+                                position.add(new Vector3(-0.2, 1.8, 0).applyEuler(new Euler(0, door.rad, 0)));
+                                this.doorLabels.push({
+                                    roomName: room.name,
+                                    name: door.name,
+                                    position,
+                                    toward: getToward(door.rad),
+                                });
+                            });
+                        }
+                    });
+                }
+                this.labelItems = this.doorLabels.map((data) => (Object.assign(Object.assign({}, data), { left: 0, top: 0, visible: false, inSight: false, transform: '', cameraToward: '' })));
+                console.log('doorplugin', 'labelItems', this.labelItems);
+                this.five.on('wantsToMoveToPano', this.hideAllLabels);
+                this.five.on('modelLoaded', this.fixDoorVisibleAndPosition);
+                this.five.on('panoArrived', this.fixDoorVisibleAndPosition);
+                this.five.on('initAnimationEnded', this.fixDoorPosition);
+                this.five.on('cameraUpdate', this.fixDoorPosition);
+                this.five.on('mouseWheel', this.fixDoorPosition);
+                this.five.on('pinchGesture', this.fixDoorPosition);
+                this.fixDoorVisibleAndPosition();
+            }
+        });
+    }
+    stateChangedCallback(prevState, options) {
+        if (this.hooks.hasListener('stateChange')) {
+            const optionParams = {
+                state: this.state,
+                prevState,
+                userAction: options ? options.userAction : defaultBaseOptions.userAction,
+            };
+            this.hooks.emit('stateChange', optionParams);
+        }
+    }
+    render() {
+        if (!this.enabled) {
+            this.doorLabelItems &&
+                this.doorLabelItems.length > 0 &&
+                this.doorLabelItems.forEach((item) => {
+                    item === null || item === void 0 ? void 0 : item.$destroy();
+                });
+            this.doorLabels = undefined;
+            return;
+        }
+        if (this.doorLabelItems) {
+            this.doorLabelItems.forEach((item) => {
+                item.$destroy();
+            });
+        }
+        this.doorLabelItems = [];
+        this.labelItems.forEach((item) => {
+            this.doorLabelItems.push(new DoorLabelItem({
+                target: this.container,
+                props: {
+                    props: item,
+                    onClick: () => {
+                        this.onClick(item.name, item.position);
+                    },
+                },
+            }));
+        });
+    }
+    initState() {
+        return { enabled: true, visible: true };
+    }
+    dispose() {
+        if (this.five) {
+            this.five.off('wantsToMoveToPano', this.hideAllLabels);
+            this.five.off('modelLoaded', this.fixDoorVisibleAndPosition);
+            this.five.off('panoArrived', this.fixDoorVisibleAndPosition);
+            this.five.off('initAnimationEnded', this.fixDoorPosition);
+            this.five.off('cameraUpdate', this.fixDoorPosition);
+            this.five.off('mouseWheel', this.fixDoorPosition);
+            this.five.off('pinchGesture', this.fixDoorPosition);
+            super.dispose();
+        }
+    }
+}

package/libs/src/PanoDoorLabelPlugin/index.d.ts

@@ -0,0 +1,7 @@
+import type { FivePlugin } from '@realsee/five';
+import type { FloorplanServerData } from '../floorplan';
+import type { PanoDoorLabelPluginController } from './Controller';
+export type { FloorplanServerData, FloorplanServerRoomItem, } from 'src/floorplan/typings/floorplanServerData';
+declare const PanoDoorLabelPlugin: FivePlugin<FloorplanServerData, PanoDoorLabelPluginController>;
+export { PanoDoorLabelPlugin };
+export default PanoDoorLabelPlugin;

package/libs/src/PanoDoorLabelPlugin/index.js

@@ -0,0 +1,6 @@
+import * as Controller from './Controller';
+const PanoDoorLabelPlugin = (five) => {
+    return new Controller.PanoDoorLabelPluginController(five);
+};
+export { PanoDoorLabelPlugin };
+export default PanoDoorLabelPlugin;

package/libs/src/PanoDoorLabelPlugin/typings.d.ts

@@ -0,0 +1,38 @@
+import type * as THREE from 'three';
+export interface DoorLabel {
+    /** 观察点的房间 */
+    roomName: string;
+    /** 标签展示的房间名 */
+    name: string;
+    /** 标签的三维坐标位置 */
+    position: THREE.Vector3;
+    /** 标签的朝向 */
+    toward: '' | 'left' | 'right' | 'back' | 'forward';
+    [props: string]: any;
+}
+export interface LabelItemProp extends DoorLabel {
+    /** css left */
+    left: number;
+    /** css top */
+    top: number;
+    /** css transform */
+    transform: string;
+    /** 当前点位有哪些标签可以展示 */
+    visible: boolean;
+    /** 是否能够展示在用户视线内（inSight 是 visible 的一个子集，当切换户型图模式或是有模型遮挡时，inSight 为 false） */
+    inSight: boolean;
+    /** icon 朝向 */
+    cameraToward: '' | 'left' | 'right' | 'back' | 'forward';
+}
+export interface NeverOverlapLabel {
+    left: number;
+    top: number;
+    disFromCameraToLabel: number;
+    index: number;
+    transform?: string;
+}
+export interface DoorLabelConfig {
+    MinVisibledistance: number;
+    MaxVisibledistance: number;
+    OffsetHeight: number;
+}

package/libs/src/PanoDoorLabelPlugin/typings.js

@@ -0,0 +1 @@
+export {};

package/libs/src/PanoDoorLabelPlugin/utils.d.ts

@@ -0,0 +1,5 @@
+import type { Five } from '@realsee/five';
+export declare function isTwoRectOverlaped(rect1: any, rect2: any): boolean;
+export declare function getCameraToward(five: Five): "" | "right" | "left" | "back" | "forward";
+export declare function getDistance(p1: any, p2: any): number;
+export declare function getToward(rad: number): "" | "right" | "left" | "back" | "forward";

package/libs/src/PanoDoorLabelPlugin/utils.js

@@ -0,0 +1,55 @@
+import { Vector3 } from 'three';
+export function isTwoRectOverlaped(rect1, rect2) {
+    // 两矩形的中心点水平及垂直距离
+    const verticalDistance = Math.abs(rect1.top + rect1.height / 2 - rect2.top - rect2.height / 2);
+    const horizontalDistance = Math.abs(rect1.left + rect1.width / 2 - rect2.left - rect2.width / 2);
+    const verticalThreshold = (rect1.height + rect2.height) / 2;
+    const horizontalThroshold = (rect1.width + rect2.width) / 2;
+    if (verticalDistance > verticalThreshold && horizontalDistance > horizontalThroshold) {
+        return false;
+    }
+    return true;
+}
+export function getCameraToward(five) {
+    const { camera } = five;
+    const cameraDirection = camera.getWorldDirection(new Vector3());
+    let angel = (Math.atan(cameraDirection.z / cameraDirection.x) * 180) / Math.PI;
+    let toward = '';
+    if (cameraDirection.x < 0)
+        angel += 180;
+    if (angel < 0)
+        angel += 360;
+    if (angel > 315 || angel <= 45) {
+        toward = 'right';
+    }
+    else if (angel > 45 && angel <= 135) {
+        toward = 'back';
+    }
+    else if (angel > 135 && angel <= 225) {
+        toward = 'left';
+    }
+    else if (angel > 225 && angel <= 315) {
+        toward = 'forward';
+    }
+    return toward;
+}
+export function getDistance(p1, p2) {
+    return Math.sqrt(Math.pow(p1.z - p2.z, 2) + Math.pow(p1.x - p2.x, 2));
+}
+// left、right、forward、back 是 roomLabel 的朝向
+export function getToward(rad) {
+    const pi_4 = Math.PI / 4;
+    if (rad > -pi_4 && rad <= pi_4) {
+        return 'left';
+    }
+    else if (rad > pi_4 * 3 || rad <= -pi_4 * 3) {
+        return 'right';
+    }
+    else if (rad > -pi_4 * 3 && rad <= -pi_4) {
+        return 'forward';
+    }
+    else if (rad > pi_4 && rad <= pi_4 * 3) {
+        return 'back';
+    }
+    return '';
+}

package/libs/src/PanoMeasurePlugin/Controller/BaseController.d.ts

@@ -0,0 +1,39 @@
+import type Line from '../Model/line';
+import type Magnifier from '../Modules/Magnifier';
+import type FiveHelper from '../Modules/FiveHelper';
+import type { Group } from 'three';
+import type { Model } from '../Model';
+import type { PanoMeasurePluginEvent } from '../typings/event.type';
+import type { UserDistanceItem } from '../utils/distanceDom';
+import type { Five, Intersection, IntersectMeshInterface, Subscribe } from '@realsee/five';
+import type { OpenParameter } from '../typings/data';
+export interface IControllerParams {
+    five: Five;
+    group: Group;
+    model: Model;
+    mouseGroup: Group;
+    container: Element;
+    magnifier: Magnifier;
+    fiveHelper: FiveHelper;
+    openParams: OpenParameter;
+    hook: Subscribe<PanoMeasurePluginEvent>;
+    userDistanceItemCreator?: () => UserDistanceItem;
+}
+export default abstract class BaseController {
+    protected five: Five;
+    protected group: Group;
+    protected model: Model;
+    protected disposed: boolean;
+    protected isMobile: boolean;
+    protected mouseGroup: Group;
+    protected container: Element;
+    protected fiveHelper: FiveHelper;
+    protected hook: IControllerParams['hook'];
+    protected magnifier: IControllerParams['magnifier'];
+    protected userDistanceItemCreator: IControllerParams['userDistanceItemCreator'];
+    constructor(params: IControllerParams);
+    protected removeLine(line: Line): void;
+    protected updateDistanceUI: () => void;
+    protected updateMouseGroup(intersection: Intersection, mesh?: IntersectMeshInterface): Group;
+    protected dispose(): void;
+}