@realsee/dnalogel 0.1.7 → 2.0.0-alpha.11

package/dist/PanoRulerPlugin/index.js

@@ -0,0 +1,610 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var five = require('@realsee/five');
+var three = require('three');
+
+/**
+ * 平面几何相关数学函数
+ */
+/**
+ * 检查两个点是否位置相同
+ * @param point1
+ * @param point2
+ * @return
+ */
+function samePointAt(point1, point2) {
+    return point1.x === point2.x && point1.y === point2.y;
+}
+/**
+ * 两个计算的斜率是否相同
+ * @param  {number} k1
+ * @param  {number} k2
+ * @return
+ */
+function sameK(k1, k2) {
+    if (Math.abs(k1) === Infinity && Math.abs(k2) === Infinity)
+        return true;
+    return Math.abs(k1 - k2) < 0.001;
+}
+/**
+ * 获取两点之间的斜率
+ * @param  {point} point1
+ * @param  {point} point2
+ * @return {number}
+ */
+function getK(point1, point2) {
+    return (point2.y - point1.y) / (point2.x - point1.x);
+}
+/**
+ * 两条线段(包括延长线)的交点点
+ * @param  {linePoints} linePoints1
+ * @param  {linePoints} linePoints2
+ * @param   needIntersectionInLine 是否是延长线的相交
+ * @return {point || false}
+ */
+function intersectionOfLine(linePoints1, linePoints2, needIntersectionInLine) {
+    const k1 = getK(linePoints1[1], linePoints1[0]);
+    const k2 = getK(linePoints2[1], linePoints2[0]);
+    if (isNaN(k1) || isNaN(k2))
+        return false;
+    if (sameK(k1, k2))
+        return false;
+    if (pointOnLine(linePoints1[0], linePoints2))
+        return linePoints1[0];
+    if (pointOnLine(linePoints1[1], linePoints2))
+        return linePoints1[1];
+    if (pointOnLine(linePoints2[0], linePoints1))
+        return linePoints2[0];
+    if (pointOnLine(linePoints2[1], linePoints1))
+        return linePoints2[1];
+    //needIntersectionInLine 是否焦点在线段内
+    if (needIntersectionInLine && !isIntersect(linePoints1, linePoints2))
+        return false;
+    const p1 = linePoints1[0];
+    const p2 = linePoints2[0];
+    if (Math.abs(k1) === Infinity) {
+        return { x: p1.x, y: linePoints2[1].y - (linePoints2[1].x - p1.x) * k2 };
+    }
+    if (Math.abs(k2) === Infinity) {
+        return { x: p2.x, y: linePoints1[1].y - (linePoints1[1].x - p2.x) * k1 };
+    }
+    const x = (p2.y - p1.y + k1 * p1.x - k2 * p2.x) / (k1 - k2);
+    const y = k1 * x - k1 * p1.x + p1.y;
+    return { x, y };
+}
+/**
+ * 是否点在线段上
+ * @param  {point} point
+ * @param  {linePoints} linePoints
+ * @return
+ */
+function pointOnLine(point, linePoints) {
+    if (samePointAt(point, linePoints[0]))
+        return true;
+    if (samePointAt(point, linePoints[1]))
+        return true;
+    return ((linePoints[0].x - point.x) * (point.x - linePoints[1].x) >= 0 &&
+        (linePoints[0].y - point.y) * (point.y - linePoints[1].y) >= 0 &&
+        sameK(getK(linePoints[0], point), getK(point, linePoints[1])));
+}
+/**
+ *  判断两条线段是否相交
+ */
+function multi(p1, p2, p0) {
+    return (p1.x - p0.x) * (p2.y - p0.y) - (p2.x - p0.x) * (p1.y - p0.y);
+}
+function isIntersect(linePoints1, linePoints2) {
+    if (Math.max(linePoints1[0].x, linePoints1[1].x) >= Math.min(linePoints2[0].x, linePoints2[1].x) &&
+        Math.max(linePoints2[0].x, linePoints2[1].x) >= Math.min(linePoints1[0].x, linePoints1[1].x) &&
+        Math.max(linePoints1[0].y, linePoints1[1].y) >= Math.min(linePoints2[0].y, linePoints2[1].y) &&
+        multi(linePoints2[0], linePoints1[1], linePoints1[0]) * multi(linePoints1[1], linePoints2[1], linePoints1[0]) > 0 &&
+        multi(linePoints1[0], linePoints2[1], linePoints2[0]) * multi(linePoints2[1], linePoints1[1], linePoints2[0]) > 0)
+        return 1;
+    return 0;
+}
+
+function nextFrame(fn, delay = 0) {
+    if (delay <= 0)
+        requestAnimationFrame(fn);
+    else
+        requestAnimationFrame(() => nextFrame(fn, delay - 1));
+}
+
+/**
+ * 创建一个防抖动函数，该函数在高频调用时会每隔 wait 毫秒后调用 func 方法
+ * `throttle` 会在第一次调用时立刻调用一次
+ * @param func - 要防抖动的函数
+ * @param wait - 需要延迟的毫秒数
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function throttle(func, wait = 200) {
+    let last;
+    return function (...args) {
+        if (last)
+            return;
+        func(...args);
+        last = setTimeout(function () {
+            last = null;
+        }, wait);
+    };
+}
+
+const PanoRulerStyle = `<style type="text/css">
+.PanoRulerPlugin-rule-line {
+  position: absolute;
+  transform-origin: left center;
+  width: 0;
+  height: 0.0625rem;
+}
+
+.PanoRulerPlugin-rule-line::after {
+  content: '';
+  position: absolute;
+  left: -0.125rem;
+  top: -0.1rem;
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: 50%;
+  background: #FFFFFF;
+  z-index: 1;
+  animation: viewport-rule-point 0.1s 1s;
+  animation-fill-mode: both;
+}
+
+.PanoRulerPlugin-rule-line::before {
+  content: '';
+  position: absolute;
+  right: -0.125rem;
+  top: -0.1rem;
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: 50%;
+  background: #FFFFFF;
+  animation: viewport-rule-point 0.1s 1.5s;
+  animation-fill-mode: both;
+}
+
+.PanoRulerPlugin-rule-line em {
+  background: #fff;
+  display: block;
+  height: 100%;
+  animation: viewport-rule-line 0.5s ease 1s;
+  animation-fill-mode: both;
+  box-shadow: 0 0 0.25rem rgb(0 0 0 / 40%);
+}
+
+.PanoRulerPlugin-rule-label {
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: 0.0625rem;
+}
+
+.PanoRulerPlugin-rule-label-name {
+  position: absolute;
+  padding: 0.1875rem 0.375rem;
+  background: rgba(195,195,195,0.30);
+  backdrop-filter: blur(0.25rem);
+  -webkit-backdrop-filter: blur(0.25rem);
+  border-radius: 6.25rem;
+  border: 0.0625rem solid rgba(255,255,255,0.6);
+  white-space: nowrap;
+  overflow: hidden;
+  color: #FFFFFF;
+  font-weight: 500;
+  font-size: 0.75rem;
+  line-height: 1;
+  -webkit-animation: viewport-rule-label 0.25s ease 1s;
+  animation: viewport-rule-label 0.25s ease 1s;
+  animation-fill-mode: both;
+  box-shadow: inset 0 0 0.625rem 0 rgba(255,255,255,0.30);
+}
+
+@keyframes viewport-rule-line {
+  0% { width: 0% }
+  100% { width: 100% }
+}
+
+@keyframes viewport-rule-label {
+  0% { opacity: 0; transform: scaleX(0); }
+  100% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
+}
+
+@keyframes viewport-rule-point {
+  0% { transform: scaleX(0); }
+  100% { transform: scaleX(1); }
+}
+</style>
+`;
+
+const getDistance = (p1, p2) => {
+    return Math.sqrt(Math.pow(p1.z - p2.z, 2) + Math.pow(p1.x - p2.x, 2));
+};
+const getRoomHeightInfo = (roomInfo, five) => {
+    const roomHeightInfo = {};
+    const raycaster = new three.Raycaster();
+    const work = five.work;
+    if (!work)
+        return roomHeightInfo;
+    const observers = roomInfo.observers;
+    work.observers.forEach((observer, index) => {
+        const { standingPosition: position } = observer;
+        const point = new three.Vector3(position.x, position.y, position.z);
+        raycaster.set(point, new three.Vector3(0, 1, 0));
+        const [intersection] = five.model.intersectRaycaster(raycaster);
+        // 虚景 VR 没有天花板碰撞射线无相交，默认固定层高2.7m
+        const verticalY = intersection ? intersection.point.y : 2.7;
+        const id = observers[index];
+        if (!id)
+            return roomHeightInfo;
+        const observerRoomName = roomInfo.rooms[id].name;
+        if (roomHeightInfo[observerRoomName] === undefined) {
+            roomHeightInfo[observerRoomName] = {
+                __roof: [verticalY],
+                __floor: [point.y],
+            };
+        }
+        else {
+            roomHeightInfo[observerRoomName].__roof.push(verticalY);
+            roomHeightInfo[observerRoomName].__floor.push(point.y);
+        }
+    });
+    // 地板高度求中位数,屋顶高度取最高
+    for (const roomName in roomHeightInfo) {
+        const room = roomHeightInfo[roomName];
+        room.__roof.sort();
+        room.__floor.sort();
+        room.floor = room.__floor[~~(room.__floor.length / 2)];
+        room.roof = room.__roof[room.__roof.length - 1];
+    }
+    return roomHeightInfo;
+};
+/**
+ * 全景标尺插件
+ */
+const PanoRulerPlugin = (five$1, params) => {
+    const state = {
+        enable: false,
+        loaded: false,
+        options: params.options || {
+            distanceText: (distance) => `${distance.toFixed(1)}m`,
+        },
+    };
+    const tpl = (name, distance) => {
+        const domStr = `
+      <div class="PanoRulerPlugin-rule-line">
+        <em></em>
+        <div class="PanoRulerPlugin-rule-label">
+          <div class="PanoRulerPlugin-rule-label-name">${state.options.distanceText(distance)}</div>
+        </div>
+      </div>
+    `;
+        const res = document.createElement('div');
+        res.setAttribute('class', 'PanoRulerPlugin-rule');
+        res.setAttribute('data-name', name);
+        res.setAttribute('style', 'display: none');
+        res.innerHTML = domStr;
+        return res;
+    };
+    const $rule = document.createElement('div');
+    $rule.setAttribute('style', `position: absolute;pointer-events: none;width: 100%;height: 100%;left: 0;top: 0;overflow: hidden;`);
+    // 添加标尺样式
+    const style = document.createElement('div');
+    style.innerHTML = PanoRulerStyle;
+    $rule.appendChild(style);
+    const __rule = {};
+    const _load = (roomInfo, roomRules) => {
+        if (state.loaded) {
+            throw new Error('标尺被重复初始化！');
+        }
+        const roomHeightInfo = getRoomHeightInfo(roomInfo, five$1);
+        const work = five$1.work;
+        if (!work)
+            return false;
+        for (const obKey in roomRules) {
+            const points = roomRules[obKey];
+            const { standingPosition: defaultPosition } = work.observers[0];
+            const roomPoints = points.map(({ x, z, observers }) => {
+                const pointRoomName = observers.length > 0 ? roomInfo.rooms[roomInfo.observers[observers[0]]].name : '';
+                const medianFloorHeight = roomHeightInfo[pointRoomName] ? roomHeightInfo[pointRoomName].floor : null;
+                let minDistance = Infinity;
+                let nearestPoint = {
+                    index: 0,
+                    x: defaultPosition.x,
+                    y: defaultPosition.y,
+                    z: defaultPosition.z,
+                };
+                observers.forEach((index) => {
+                    if (!work.observers[index])
+                        return;
+                    const { standingPosition: position } = work.observers[index];
+                    const observerPoint = {
+                        index,
+                        x: position.x,
+                        y: position.y,
+                        z: position.z,
+                    };
+                    const distance = getDistance({ x, z }, observerPoint);
+                    if (medianFloorHeight) {
+                        // 取最近点时排除高度与房间平均高度差大于0.3米的点
+                        if (distance < minDistance && Math.abs(observerPoint.y - medianFloorHeight) < 0.3) {
+                            minDistance = distance;
+                            nearestPoint = observerPoint;
+                        }
+                    }
+                    else {
+                        if (distance < minDistance) {
+                            minDistance = distance;
+                            nearestPoint = observerPoint;
+                        }
+                    }
+                });
+                const _origin = new three.Vector3(x, nearestPoint.y, z);
+                Object.assign(_origin, { observers });
+                const verticalY = roomHeightInfo[pointRoomName] ? roomHeightInfo[pointRoomName].roof : null;
+                const _vertical = !verticalY ? null : new three.Vector3(x, verticalY, z);
+                if (_vertical)
+                    Object.assign(_vertical, { observers });
+                const origin = _origin;
+                const vertical = _vertical;
+                return { origin, vertical };
+            });
+            __rule[obKey] = {
+                origins: roomPoints.map((roomPoint) => roomPoint.origin),
+                rules: [],
+            };
+            for (const { origin, vertical } of roomPoints) {
+                if (!vertical)
+                    continue;
+                const $element = tpl(obKey, origin.distanceTo(vertical));
+                $rule.append($element);
+                __rule[obKey].rules.push({ vertical: true, rule: [origin, vertical], $element });
+            }
+            for (let index = 0; index < roomPoints.length; index++) {
+                let nextIndex = index + 1;
+                if (nextIndex >= roomPoints.length)
+                    nextIndex = 0;
+                const { origin } = roomPoints[index];
+                const { origin: next } = roomPoints[nextIndex];
+                const $element = tpl(obKey, origin.distanceTo(next));
+                $rule.append($element);
+                __rule[obKey].rules.push({ vertical: false, rule: [origin, next], $element });
+            }
+        }
+        state.loaded = true;
+        return true;
+    };
+    const load = async (_roomInfo, _roomRules, options) => {
+        const roomInfo = _roomInfo || params.roomInfo;
+        const roomRules = _roomRules || params.roomRules;
+        if (!roomInfo || !roomRules) {
+            throw new Error('标尺数据依赖不齐全！');
+        }
+        state.options = Object.assign({}, state.options, options || {});
+        if (five$1.model.loaded) {
+            return _load(roomInfo, roomRules);
+        }
+        else {
+            return await new Promise((resolve) => five$1.once('modelLoaded', () => resolve(_load(roomInfo, roomRules))));
+        }
+    };
+    if (params.roomInfo && params.roomRules) {
+        load(params.roomInfo, params.roomRules);
+    }
+    const getRuleScreenIntr = (startPoint, endPoint, canvasWidth, canvasHeight) => {
+        const screenLines = [
+            [
+                { x: 0, y: 0 },
+                { x: canvasWidth, y: 0 },
+            ],
+            [
+                { x: 0, y: 0 },
+                { x: 0, y: canvasHeight },
+            ],
+            [
+                { x: canvasWidth, y: 0 },
+                { x: canvasWidth, y: canvasHeight },
+            ],
+            [
+                { x: 0, y: canvasHeight },
+                { x: canvasWidth, y: canvasHeight },
+            ],
+        ];
+        const intr = [];
+        for (let i = 0; i < screenLines.length; i++) {
+            const result = intersectionOfLine([startPoint, endPoint], [screenLines[i][0], screenLines[i][1]], true);
+            if (result)
+                intr.push(result);
+        }
+        if (intr.length === 0)
+            return false;
+        else {
+            return intr;
+        }
+    };
+    const freshRule = () => {
+        const element = five$1.getElement()?.parentElement;
+        if (!element)
+            return;
+        if (!state.loaded)
+            return;
+        if (Object.keys(__rule).length <= 0)
+            return;
+        const { panoIndex, camera, currentMode } = five$1;
+        if (panoIndex === undefined)
+            return;
+        let name;
+        for (const _name in __rule) {
+            if (_name.split(',').indexOf(panoIndex.toString()) >= 0)
+                name = _name;
+        }
+        if (!name)
+            return;
+        const cameraPosition = camera.position;
+        const cameraDirection = camera.getWorldDirection(new three.Vector3());
+        const width = element.clientWidth;
+        const height = element.clientHeight;
+        // 非全景模式下隐藏所有标尺
+        if (currentMode !== five.Five.Mode.Panorama) {
+            for (const _name in __rule) {
+                for (const { $element } of __rule[_name].rules) {
+                    $element.style.display = 'none';
+                }
+            }
+            return;
+        }
+        // 隐藏非当前点位的标尺
+        for (const _name in __rule) {
+            for (const { $element } of __rule[_name].rules) {
+                $element.style.display = _name === name ? 'block' : 'none';
+            }
+        }
+        // 可以看到的角度最小的拐点
+        const [visibleOrigin] = __rule[name].origins
+            .slice()
+            .filter((point) => point.observers.indexOf(panoIndex) >= 0)
+            .sort((pointA, pointB) => {
+            const angleA = pointA.clone().setY(0).sub(cameraPosition).normalize().angleTo(cameraDirection.clone().setY(0));
+            const angleB = pointB.clone().setY(0).sub(cameraPosition).normalize().angleTo(cameraDirection.clone().setY(0));
+            return angleA - angleB;
+        });
+        for (const { rule, vertical, $element } of __rule[name].rules) {
+            const [start, end] = rule;
+            const $line = $element.querySelector('.PanoRulerPlugin-rule-line');
+            if (!$line)
+                return;
+            if (!visibleOrigin) {
+                $element.style.display = 'none';
+                continue;
+            }
+            if (start !== visibleOrigin && end !== visibleOrigin) {
+                $element.style.display = 'none';
+                continue;
+            }
+            if (start.distanceTo(end) < 0.5) {
+                $element.style.display = 'none';
+                continue;
+            }
+            if (start.observers.indexOf(panoIndex) === -1 || end.observers.indexOf(panoIndex) === -1) {
+                $element.style.display = 'none';
+                continue;
+            }
+            const startAngle = start.clone().sub(cameraPosition).normalize().angleTo(cameraDirection);
+            if (startAngle > Math.PI / 2) {
+                $element.style.display = 'none';
+                continue;
+            }
+            const endAngle = end.clone().sub(cameraPosition).normalize().angleTo(cameraDirection);
+            if (endAngle > Math.PI / 2) {
+                $element.style.display = 'none';
+                continue;
+            }
+            const ruleLength = start.distanceTo(end);
+            const midPoint = end.clone().sub(end.clone().sub(start).divide(new three.Vector3(2, 2, 2)));
+            const disFromCameraToMid = midPoint.distanceTo(cameraPosition);
+            if (disFromCameraToMid / ruleLength > 8) {
+                $element.style.display = 'none';
+                continue;
+            }
+            const mouseStart = start.clone().project(camera);
+            const startLeft = ((mouseStart.x + 1) / 2) * width;
+            const startTop = ((-mouseStart.y + 1) / 2) * height;
+            const mouseEnd = end.clone().project(camera);
+            const endLeft = ((mouseEnd.x + 1) / 2) * width;
+            const endTop = ((-mouseEnd.y + 1) / 2) * height;
+            const distance = Math.sqrt(Math.pow(endLeft - startLeft, 2) + Math.pow(endTop - startTop, 2));
+            let visibleLength = distance;
+            let labelOffset = 50;
+            const intr = getRuleScreenIntr({ x: ~~startLeft, y: ~~startTop }, {
+                x: ~~endLeft,
+                y: ~~endTop
+            }, width, height);
+            if (intr && intr.length === 1) {
+                if (visibleOrigin === start) {
+                    visibleLength = Math.sqrt(Math.pow(intr[0].x - startLeft, 2) + Math.pow(intr[0].y - startTop, 2));
+                    labelOffset = (visibleLength / distance) * 50;
+                }
+                else if (visibleOrigin === end) {
+                    visibleLength = Math.sqrt(Math.pow(intr[0].x - endLeft, 2) + Math.pow(intr[0].y - endTop, 2));
+                    labelOffset = 100 - (visibleLength / distance) * 50;
+                }
+            }
+            if (intr && intr.length === 2) {
+                const middlePoint = {
+                    x: (intr[0].x + intr[1].x) / 2,
+                    y: (intr[0].y + intr[1].y) / 2,
+                };
+                const distanceFromStart = Math.sqrt(Math.pow(middlePoint.x - startLeft, 2) + Math.pow(middlePoint.y - startTop, 2));
+                labelOffset = (distanceFromStart / distance) * 100;
+            }
+            const rad = Math.PI / 2 - Math.atan2(endLeft - startLeft, startTop - endTop);
+            const deg = (rad / Math.PI) * 180;
+            const $label = $line.querySelector('.PanoRulerPlugin-rule-label');
+            // 线的长度小于标签时或者标签与线两端点重合时隐藏,
+            const labelWidth = $label.children[0].clientWidth;
+            if (labelWidth >= distance ||
+                labelWidth / 2 >= (labelOffset / 100) * distance ||
+                labelWidth / 2 >= (1 - labelOffset / 100) * distance) {
+                $line.style.display = 'none';
+            }
+            else {
+                $line.style.display = 'block';
+                $line.style.width = distance + 'px';
+                $line.style.left = startLeft + 'px';
+                $line.style.top = startTop + 'px';
+                $line.style.transform = `rotate(${-deg}deg)`;
+                $label.style.left = `${labelOffset}%`;
+            }
+        }
+    };
+    const nextFrameFreshRule = () => nextFrame(freshRule);
+    const throttleFreshRule = throttle(freshRule, 80);
+    const enable = () => {
+        if (!state.loaded)
+            return false;
+        if (state.enable)
+            return true;
+        $rule.setAttribute('class', 'PanoRulerPlugin' + (state.options.className ? ' ' + state.options.className : ''));
+        five$1.getElement()?.parentElement?.append($rule);
+        freshRule();
+        five$1.on('panoArrived', freshRule);
+        five$1.on('modeChange', freshRule);
+        five$1.on('cameraDirectionUpdate', nextFrameFreshRule);
+        five$1.on('movingToPano', nextFrameFreshRule);
+        five$1.on('mouseWheel', throttleFreshRule);
+        five$1.on('pinchGesture', throttleFreshRule);
+        state.enable = true;
+        return true;
+    };
+    const disable = () => {
+        if (!state.enable)
+            return true;
+        five$1.off('panoArrived', freshRule);
+        five$1.off('modeChange', freshRule);
+        five$1.off('cameraDirectionUpdate', nextFrameFreshRule);
+        five$1.off('movingToPano', nextFrameFreshRule);
+        five$1.off('mouseWheel', throttleFreshRule);
+        five$1.off('pinchGesture', throttleFreshRule);
+        if ($rule) {
+            $rule.remove();
+        }
+        state.enable = false;
+        return true;
+    };
+    return {
+        enable,
+        disable,
+        load,
+        state,
+    };
+};
+const panoRulerPluginServerParams = {
+    name: 'PanoRulerPlugin',
+    version: 0,
+};
+
+exports.PanoRulerPlugin = PanoRulerPlugin;
+exports["default"] = PanoRulerPlugin;
+exports.panoRulerPluginServerParams = panoRulerPluginServerParams;

package/dist/PanoRulerPlugin/style.d.ts

@@ -0,0 +1,2 @@
+declare const PanoRulerStyle = "<style type=\"text/css\">\n.PanoRulerPlugin-rule-line {\n  position: absolute;\n  transform-origin: left center;\n  width: 0;\n  height: 0.0625rem;\n}\n\n.PanoRulerPlugin-rule-line::after {\n  content: '';\n  position: absolute;\n  left: -0.125rem;\n  top: -0.1rem;\n  width: 0.25rem;\n  height: 0.25rem;\n  border-radius: 50%;\n  background: #FFFFFF;\n  z-index: 1;\n  animation: viewport-rule-point 0.1s 1s;\n  animation-fill-mode: both;\n}\n\n.PanoRulerPlugin-rule-line::before {\n  content: '';\n  position: absolute;\n  right: -0.125rem;\n  top: -0.1rem;\n  width: 0.25rem;\n  height: 0.25rem;\n  border-radius: 50%;\n  background: #FFFFFF;\n  animation: viewport-rule-point 0.1s 1.5s;\n  animation-fill-mode: both;\n}\n\n.PanoRulerPlugin-rule-line em {\n  background: #fff;\n  display: block;\n  height: 100%;\n  animation: viewport-rule-line 0.5s ease 1s;\n  animation-fill-mode: both;\n  box-shadow: 0 0 0.25rem rgb(0 0 0 / 40%);\n}\n\n.PanoRulerPlugin-rule-label {\n  position: absolute;\n  width: 0;\n  height: 0;\n  top: 0.0625rem;\n}\n\n.PanoRulerPlugin-rule-label-name {\n  position: absolute;\n  padding: 0.1875rem 0.375rem;\n  background: rgba(195,195,195,0.30);\n  backdrop-filter: blur(0.25rem);\n  -webkit-backdrop-filter: blur(0.25rem);\n  border-radius: 6.25rem;\n  border: 0.0625rem solid rgba(255,255,255,0.6);\n  white-space: nowrap;\n  overflow: hidden;\n  color: #FFFFFF;\n  font-weight: 500;\n  font-size: 0.75rem;\n  line-height: 1;\n  -webkit-animation: viewport-rule-label 0.25s ease 1s;\n  animation: viewport-rule-label 0.25s ease 1s;\n  animation-fill-mode: both;\n  box-shadow: inset 0 0 0.625rem 0 rgba(255,255,255,0.30);\n}\n\n@keyframes viewport-rule-line {\n  0% { width: 0% }\n  100% { width: 100% }\n}\n\n@keyframes viewport-rule-label {\n  0% { opacity: 0; transform: scaleX(0); }\n  100% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }\n}\n\n@keyframes viewport-rule-point {\n  0% { transform: scaleX(0); }\n  100% { transform: scaleX(1); }\n}\n</style>\n";
+export default PanoRulerStyle;

package/dist/PanoSpatialTagPlugin/index.d.ts

@@ -0,0 +1,33 @@
+import type { FivePlugin } from '@realsee/five';
+import type { PanoSpatialTagPluginId, PanoSpatialTagPluginDataElement, PanoSpatialTagPluginContentReplacement, PanoSpatialTagPluginContentEvent } from './typings';
+export interface PanoSpatialTagPluginData {
+    folded?: boolean;
+    enabled?: boolean;
+    points: Array<PanoSpatialTagPluginDataElement>;
+    template: string;
+    events?: PanoSpatialTagPluginContentEvent;
+    render?: (template: string, replacement: PanoSpatialTagPluginContentReplacement) => string;
+}
+export interface PanoSpatialTagPluginParameterType {
+    container?: Element;
+    wait?: number;
+    maxNumberOnScreen?: number;
+    minRad?: number;
+    nearTolerance?: number;
+    upsideHeight?: number;
+}
+export interface PanoSpatialTagPluginExportType {
+    load: (data: PanoSpatialTagPluginData) => void;
+    unfoldAll: () => void;
+    foldAll: () => void;
+    unfold: (id: PanoSpatialTagPluginId) => void;
+    fold: (id: PanoSpatialTagPluginId) => void;
+    enable: () => void;
+    disable: () => void;
+    dispose: () => void;
+}
+/**
+ * 空间游走标签插件
+ */
+export declare const PanoSpatialTagPlugin: FivePlugin<PanoSpatialTagPluginParameterType, PanoSpatialTagPluginExportType>;
+export default PanoSpatialTagPlugin;