@realsee/dnalogel 2.0.0-alpha.44 → 2.0.0-alpha.45

package/libs/PanoDoorLabelPlugin/Controller.js

@@ -0,0 +1,434 @@
+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: 6
+        });
+        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) => {
+                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.rooms)
+                    return;
+                const { work } = this.five;
+                let nearestIndex;
+                let nearestVector;
+                let minDistance = Infinity;
+                for (let index = 0; index < work.observers.length; index++) {
+                    if (this.rooms[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/PanoDoorLabelPlugin/DoorLabelItem.js

@@ -0,0 +1,159 @@
+/* generated by Svelte v3.49.0 */
+import {
+	SvelteComponent,
+	append,
+	append_styles,
+	attr,
+	binding_callbacks,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	null_to_empty,
+	safe_not_equal,
+	space
+} from "svelte/internal";
+
+import classnames from 'classnames';
+
+function add_css(target) {
+	append_styles(target, "svelte-6rn4em", ".plugin-DoorLabelPlugin-item.svelte-6rn4em.svelte-6rn4em{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;transition:opacity 0.3s ease}.plugin-DoorLabelPlugin-cnt.svelte-6rn4em.svelte-6rn4em{position:absolute;top:50%;left:50%;border-radius:0.125rem;background:rgba(0, 0, 0, 0.35);line-height:0.625rem;padding:0.3125rem;white-space:nowrap;font-size:0.625rem;font-style:normal;color:white;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform ease 1s, background ease 0.3s, color ease 0.3s}.plugin-DoorLabelPlugin-cnt.svelte-6rn4em.svelte-6rn4em::after{content:\"\";display:block;position:absolute;top:-1px;left:-1px;bottom:-1px;right:-1px;border-radius:0.125rem;border:1px solid rgba(0, 0, 0, 0);-o-border-image:url(\"//vrlab-image4.ljcdn.com/release/web/highlightCarouseal-border-image.14b51834.png\") 4;border-image:url(\"//vrlab-image4.ljcdn.com/release/web/highlightCarouseal-border-image.14b51834.png\") 4;transition:opacity ease 0.3s}.plugin-DoorLabelPlugin-cnt.svelte-6rn4em.svelte-6rn4em:active,.plugin-DoorLabelPlugin-cnt.svelte-6rn4em.svelte-6rn4em:focus{background:rgba(0, 0, 0, 0.5);color:rgba(255, 255, 255, 0.5)}.plugin-DoorLabelPlugin-icon.svelte-6rn4em.svelte-6rn4em{background:url(\"//vrlab-image4.ljcdn.com/release/web/DoorLabel-icon.de1304ae.svg\") no-repeat;background-size:100%;display:inline-block;width:0.52083rem;height:0.52083rem;margin-left:0.20833rem;transform-origin:center}.plugin-DoorLabelPlugin-cnt[data-camera-toward=forward].left.svelte-6rn4em .plugin-DoorLabelPlugin-icon.svelte-6rn4em{transform:rotate(90deg)}.plugin-DoorLabelPlugin-cnt[data-camera-toward=forward].right.svelte-6rn4em .plugin-DoorLabelPlugin-txt.svelte-6rn4em{order:1}.plugin-DoorLabelPlugin-cnt[data-camera-toward=forward].right.svelte-6rn4em .plugin-DoorLabelPlugin-icon.svelte-6rn4em{transform:rotate(-90deg);margin-left:0;margin-right:0.20833rem;order:0}.plugin-DoorLabelPlugin-cnt[data-camera-toward=right].forward.svelte-6rn4em .plugin-DoorLabelPlugin-icon.svelte-6rn4em{transform:rotate(90deg)}.plugin-DoorLabelPlugin-cnt[data-camera-toward=right].back.svelte-6rn4em .plugin-DoorLabelPlugin-txt.svelte-6rn4em{order:1}.plugin-DoorLabelPlugin-cnt[data-camera-toward=right].back.svelte-6rn4em .plugin-DoorLabelPlugin-icon.svelte-6rn4em{transform:rotate(-90deg);margin-left:0;margin-right:0.20833rem;order:0}.plugin-DoorLabelPlugin-cnt[data-camera-toward=left].back.svelte-6rn4em .plugin-DoorLabelPlugin-icon.svelte-6rn4em{transform:rotate(90deg)}.plugin-DoorLabelPlugin-cnt[data-camera-toward=left].forward.svelte-6rn4em .plugin-DoorLabelPlugin-txt.svelte-6rn4em{order:1}.plugin-DoorLabelPlugin-cnt[data-camera-toward=left].forward.svelte-6rn4em .plugin-DoorLabelPlugin-icon.svelte-6rn4em{transform:rotate(-90deg);margin-left:0;margin-right:0.20833rem;order:0}.plugin-DoorLabelPlugin-cnt[data-camera-toward=back].right.svelte-6rn4em .plugin-DoorLabelPlugin-icon.svelte-6rn4em{transform:rotate(90deg)}.plugin-DoorLabelPlugin-cnt[data-camera-toward=back].left.svelte-6rn4em .plugin-DoorLabelPlugin-txt.svelte-6rn4em{order:1}.plugin-DoorLabelPlugin-cnt[data-camera-toward=back].left.svelte-6rn4em .plugin-DoorLabelPlugin-icon.svelte-6rn4em{transform:rotate(-90deg);margin-left:0;margin-right:0.20833rem;order:0}.plugin-DoorLabelPlugin-cnt--customBrand.svelte-6rn4em.svelte-6rn4em{color:#f9eac1}.plugin-DoorLabelPlugin-cnt--customBrand.svelte-6rn4em .plugin-DoorLabelPlugin-icon.svelte-6rn4em{background:url(\"//vrlab-image4.ljcdn.com/release/web/arrow.6e8ec00e.svg\") no-repeat}.plugin-DoorLabelPlugin-cnt--customBrand.svelte-6rn4em.svelte-6rn4em:active,.plugin-DoorLabelPlugin-cnt--customBrand.svelte-6rn4em.svelte-6rn4em:focus{background:rgba(0, 0, 0, 0.5);color:rgba(249, 234, 193, 0.5)}");
+}
+
+function create_fragment(ctx) {
+	let div1;
+	let div0;
+	let span;
+	let t1;
+	let i;
+	let div0_class_value;
+	let div0_style_value;
+	let div1_style_value;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			div1 = element("div");
+			div0 = element("div");
+			span = element("span");
+			span.textContent = `${/*name*/ ctx[8]}`;
+			t1 = space();
+			i = element("i");
+			attr(span, "class", "plugin-DoorLabelPlugin-txt svelte-6rn4em");
+			attr(i, "class", "plugin-DoorLabelPlugin-icon svelte-6rn4em");
+			attr(div0, "class", div0_class_value = "" + (null_to_empty(classnames('plugin-DoorLabelPlugin-cnt', /*props*/ ctx[0].toward)) + " svelte-6rn4em"));
+			attr(div0, "style", div0_style_value = `transform: ${/*transform*/ ctx[6] || 'initial'};pointerEvents: ${/*inSight*/ ctx[5] ? 'auto' : 'none'};opacity: ${/*inSight*/ ctx[5] ? 1 : 0}`);
+			attr(div0, "data-camera-toward", /*cameraToward*/ ctx[7]);
+			attr(div1, "style", div1_style_value = `left: ${/*left*/ ctx[3] || 0}%;top: ${/*top*/ ctx[4] || 0}%;opacity: ${/*inSight*/ ctx[5] ? 1 : 0}`);
+			attr(div1, "class", "plugin-DoorLabelPlugin-item svelte-6rn4em");
+		},
+		m(target, anchor) {
+			insert(target, div1, anchor);
+			append(div1, div0);
+			append(div0, span);
+			append(div0, t1);
+			append(div0, i);
+			/*div1_binding*/ ctx[10](div1);
+
+			if (!mounted) {
+				dispose = listen(div0, "click", /*click_handler*/ ctx[9]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*props*/ 1 && div0_class_value !== (div0_class_value = "" + (null_to_empty(classnames('plugin-DoorLabelPlugin-cnt', /*props*/ ctx[0].toward)) + " svelte-6rn4em"))) {
+				attr(div0, "class", div0_class_value);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div1);
+			/*div1_binding*/ ctx[10](null);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { props } = $$props;
+	let { onClick } = $$props;
+	let divElement;
+	let { left, top, inSight, transform, panoIndex, cameraToward, name } = props;
+	let prevPanoIndexRef = 0;
+
+	const initPanoIndex = () => {
+		if (!left || !top || !inSight) {
+			return;
+		}
+
+		if (!divElement) return;
+		const _width = divElement.current.clientWidth / window.innerWidth * 100;
+		const _height = divElement.current.clientHeight / window.innerHeight * 100;
+
+		if (left <= _width / 2 || left >= 100 - _width / 2) {
+			return;
+		}
+
+		if (top <= _height / 2 || top >= 100 - _height / 2) {
+			return;
+		}
+
+		const prevPanoIndex = prevPanoIndexRef;
+
+		if (panoIndex !== prevPanoIndex) {
+			// 触发埋点
+			console.log('panoDoorLabelPlugin', panoIndex, '触发埋点');
+
+			// 这里触发曝光埋点
+			prevPanoIndexRef = panoIndex;
+		}
+	};
+
+	const click_handler = e => {
+		if (onClick) onClick();
+	};
+
+	function div1_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			divElement = $$value;
+			$$invalidate(2, divElement);
+		});
+	}
+
+	$$self.$$set = $$props => {
+		if ('props' in $$props) $$invalidate(0, props = $$props.props);
+		if ('onClick' in $$props) $$invalidate(1, onClick = $$props.onClick);
+	};
+
+	$: {
+		initPanoIndex();
+	}
+
+	return [
+		props,
+		onClick,
+		divElement,
+		left,
+		top,
+		inSight,
+		transform,
+		cameraToward,
+		name,
+		click_handler,
+		div1_binding
+	];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { props: 0, onClick: 1 }, add_css);
+	}
+}
+
+export default Component;

package/libs/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/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/PanoDoorLabelPlugin/typings.d.ts

@@ -0,0 +1,33 @@
+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;
+}

package/libs/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";