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

package/libs/PanoCompassPlugin/Plugin.js

@@ -1,267 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import * as THREE from 'three';
-import { getRoomInfoInstance } from './getRoomInfoInstance';
-import { loadTexture } from '../shared-utils/three/loadTexture';
-import CSS3DRenderPlugin from '../CSS3DRenderPlugin';
-import { tweenProgress } from '../shared-utils/animationFrame/BetterTween';
-export const PanoCompassPlugin = function (five, config) {
-    return new PanoCompassController(five, config);
-};
-export default PanoCompassPlugin;
-class PanoCompassController {
-    constructor(five, config) {
-        Object.defineProperty(this, "five", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "data", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "config", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "group", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new THREE.Group()
-        });
-        Object.defineProperty(this, "modelLoaded", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "roomInfoInstance", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "roomInfoWrapperInstance", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "compassMeshTween", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "compassMesh", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "entryDoorMesh", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "dispose", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                var _a, _b, _c, _d;
-                this.five.scene.remove(this.group);
-                this.group.remove(...this.group.children);
-                (_b = (_a = this.compassMesh) === null || _a === void 0 ? void 0 : _a.material.map) === null || _b === void 0 ? void 0 : _b.dispose();
-                (_d = (_c = this.entryDoorMesh) === null || _c === void 0 ? void 0 : _c.material.map) === null || _d === void 0 ? void 0 : _d.dispose();
-                this.five.off('dispose', this.dispose);
-                this.five.off('modelLoaded', this.onFiveFistPanoLoaded);
-                this.five.off('panoArrived', this.onFivePanoArrived);
-                this.five.off('panoWillArrive', this.onFivePanoWillArrive);
-                this.five.off('cameraDirectionUpdate', this.onFiveCameraDirectionUpdate);
-            }
-        });
-        Object.defineProperty(this, "onFiveFistPanoLoaded", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                this.modelLoaded = true;
-                if (this.data)
-                    this.init();
-            }
-        });
-        Object.defineProperty(this, "onFivePanoWillArrive", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (panoIndex) => {
-                var _a, _b;
-                if (panoIndex === this.five.panoIndex)
-                    return;
-                (_a = this.compassMeshTween) === null || _a === void 0 ? void 0 : _a.dispose();
-                (_b = this.compassMesh) === null || _b === void 0 ? void 0 : _b.material.setValues({ opacity: 0 });
-            }
-        });
-        Object.defineProperty(this, "onFivePanoArrived", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (panoIndex) => {
-                var _a, _b, _c, _d;
-                // ======== fix compass position ========
-                const standingPosition = this.five.work.observers[panoIndex].standingPosition;
-                if (this.compassMesh) {
-                    // 指南针上移 0.01m，防止与地板重合
-                    this.compassMesh.position.copy(standingPosition.clone().setY(standingPosition.y + 0.01));
-                    if (this.compassMesh.material.opacity !== 0)
-                        return;
-                    (_a = this.compassMeshTween) === null || _a === void 0 ? void 0 : _a.dispose();
-                    this.compassMeshTween = tweenProgress(1000)
-                        .onUpdate(({ progress }) => {
-                        var _a;
-                        (_a = this.compassMesh) === null || _a === void 0 ? void 0 : _a.material.setValues({ opacity: progress });
-                        this.five.needsRender = true;
-                    })
-                        .play();
-                }
-                // ======== fix entry door label position and rotation ========
-                if (this.entryDoorMesh) {
-                    const entryDoorPosition = new THREE.Vector3(this.data.entrance.position.x, this.data.entrance.position.y, this.data.entrance.position.z);
-                    const panoToEntryDoorVector = entryDoorPosition
-                        .clone()
-                        .setY(standingPosition.y)
-                        .sub(standingPosition)
-                        .normalize();
-                    const compassEntryDoorPosition = standingPosition
-                        .clone()
-                        .add(panoToEntryDoorVector.clone().multiplyScalar(0.7))
-                        .setY(standingPosition.y + 0.01);
-                    this.entryDoorMesh.rotation.z = new THREE.Vector3(0, 0, -1).angleTo(panoToEntryDoorVector);
-                    this.entryDoorMesh.position.copy(compassEntryDoorPosition);
-                    // 不是客厅时，隐藏入户门指引
-                    ((_b = this.data) === null || _b === void 0 ? void 0 : _b.room_observers[panoIndex].room.type) === 1
-                        ? (_c = this.entryDoorMesh) === null || _c === void 0 ? void 0 : _c.material.setValues({ opacity: 1 })
-                        : (_d = this.entryDoorMesh) === null || _d === void 0 ? void 0 : _d.material.setValues({ opacity: 0 });
-                }
-                // ======== fix room info ========
-                if (this.roomInfoInstance && this.roomInfoWrapperInstance) {
-                    this.roomInfoWrapperInstance.css3DObject.position.copy(standingPosition.clone().setY(standingPosition.y + 0.01));
-                    this.roomInfoInstance.setRoom(this.data.room_observers[panoIndex].room);
-                }
-                this.five.needsRender = true;
-            }
-        });
-        Object.defineProperty(this, "onFiveCameraDirectionUpdate", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ({ longitude, latitude, }) => {
-                var _a, _b;
-                if (!this.roomInfoWrapperInstance)
-                    return;
-                this.roomInfoWrapperInstance.css3DObject.rotation.z = longitude;
-                latitude > 0.66 && this.five.getCurrentState().mode === 'Panorama'
-                    ? (_a = this.roomInfoInstance) === null || _a === void 0 ? void 0 : _a.show()
-                    : (_b = this.roomInfoInstance) === null || _b === void 0 ? void 0 : _b.hide();
-            }
-        });
-        this.five = five;
-        this.config = config;
-        this.five.scene.add(this.group);
-        this.five.once('dispose', this.dispose);
-        this.five.once('modelLoaded', this.onFiveFistPanoLoaded);
-        this.five.on('panoArrived', this.onFivePanoArrived);
-        this.five.on('panoWillArrive', this.onFivePanoWillArrive);
-        this.five.on('cameraDirectionUpdate', this.onFiveCameraDirectionUpdate);
-    }
-    load(data) {
-        this.data = data;
-        if (this.modelLoaded)
-            this.init();
-    }
-    init() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.data || !this.modelLoaded)
-                return;
-            const northRad = this.data.north_rad;
-            if (northRad != null) {
-                this.compassMesh = yield this.loadCompassMesh();
-                this.compassMesh.rotateX(-Math.PI / 2);
-                this.compassMesh.rotateZ(northRad - Math.PI / 2);
-                this.group.add(this.compassMesh);
-            }
-            if (this.data.entrance != null) {
-                this.entryDoorMesh = yield this.loadEntryDoorMesh();
-                this.roomInfoWrapperInstance = this.loadRoomInfo();
-                this.roomInfoInstance = getRoomInfoInstance();
-                this.entryDoorMesh.rotateX(-Math.PI / 2);
-                if (this.roomInfoWrapperInstance)
-                    this.roomInfoInstance.appendTo(this.roomInfoWrapperInstance.container);
-                this.group.add(this.entryDoorMesh);
-            }
-            this.onFivePanoArrived(this.five.panoIndex || 0);
-            this.five.needsRender = true;
-        });
-    }
-    loadCompassMesh() {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            const compassImageUrl = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.compassImageUrl) ||
-                '//vrlab-image4.ljcdn.com/release/web/v3/north-point-circle.96498e69.png';
-            const compassTexture = yield loadTexture(compassImageUrl);
-            const compassGeometry = new THREE.CircleGeometry(0.7, 32);
-            const compassMaterial = new THREE.MeshBasicMaterial({
-                map: compassTexture,
-                transparent: true,
-                opacity: 0,
-                depthTest: false,
-            });
-            const compassMesh = new THREE.Mesh(compassGeometry, compassMaterial);
-            compassMesh.name = 'pano-compass-mesh';
-            return compassMesh;
-        });
-    }
-    loadEntryDoorMesh() {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            const entryDoorImageUrl = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.entryDoorImageUrl) ||
-                '//vrlab-image4.ljcdn.com/release/web/enterDoor.831b8208.png';
-            const entryDoorTexture = yield loadTexture(entryDoorImageUrl);
-            const entryDoorGeometry = new THREE.PlaneGeometry(0.2, 0.16);
-            const entryDoorMaterial = new THREE.MeshBasicMaterial({
-                map: entryDoorTexture,
-                transparent: true,
-                opacity: 0.8,
-                depthTest: false,
-            });
-            const entryDoorMesh = new THREE.Mesh(entryDoorGeometry, entryDoorMaterial);
-            entryDoorMesh.name = 'pano-compass-entry-door';
-            return entryDoorMesh;
-        });
-    }
-    loadRoomInfo() {
-        const points = [
-            new THREE.Vector3(-0.7, 0, -0.7),
-            new THREE.Vector3(0.7, 0, -0.7),
-            new THREE.Vector3(0.7, 0, 0.7),
-            new THREE.Vector3(-0.7, 0, 0.7),
-        ];
-        const roomInfo = CSS3DRenderPlugin(this.five).create3DDomContainer(points);
-        return roomInfo;
-    }
-}

package/libs/PanoRulerProPlugin/RulerItem.svelte

@@ -1,166 +0,0 @@
-<script>export let rulerItemProp;
-let _visible = true;
-let labelWidth;
-$: {
-    if (labelWidth >= rulerItemProp.width ||
-        labelWidth / 2 >= (rulerItemProp.labelOffset / 100) * rulerItemProp.width ||
-        labelWidth / 2 >= (1 - rulerItemProp.labelOffset / 100) * rulerItemProp.width) {
-        _visible = false;
-    }
-    else {
-        _visible = true;
-    }
-}
-let EM_DOTTED_BG = `data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjQiIHdpZHRoPSIxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGZpbHRlciBpZD0icHJlZml4X19hIiBoZWlnaHQ9IjQwMCUiIHdpZHRoPSIxMzcuNCUiIHg9Ii0xOC43JSIgeT0iLTE1MCUiPjxmZU1vcnBob2xvZ3kgaW49IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0iZGlsYXRlIiByYWRpdXM9Ii41IiByZXN1bHQ9InNoYWRvd1NwcmVhZE91dGVyMSIvPjxmZU9mZnNldCBpbj0ic2hhZG93U3ByZWFkT3V0ZXIxIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZU1vcnBob2xvZ3kgaW49IlNvdXJjZUFscGhhIiByYWRpdXM9IjEiIHJlc3VsdD0ic2hhZG93SW5uZXIiLz48ZmVPZmZzZXQgaW49InNoYWRvd0lubmVyIiByZXN1bHQ9InNoYWRvd0lubmVyIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIGluMj0ic2hhZG93SW5uZXIiIG9wZXJhdG9yPSJvdXQiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIgc3RkRGV2aWF0aW9uPSIuNSIvPjxmZUNvbG9yTWF0cml4IGluPSJzaGFkb3dCbHVyT3V0ZXIxIiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMiAwIi8+PC9maWx0ZXI+PHBhdGggaWQ9InByZWZpeF9fYiIgZD0iTS44ODkgMkgxMS41OCIvPjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1kYXNoYXJyYXk9IjUgNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNwcmVmaXhfX2EpIiB4bGluazpocmVmPSIjcHJlZml4X19iIi8+PHVzZSBzdHJva2U9IiNmZmYiIHN0cm9rZS1vcGFjaXR5PSIuNCIgeGxpbms6aHJlZj0iI3ByZWZpeF9fYiIvPjwvZz48L3N2Zz4=`;
-$: vars = `--background-image: url(${EM_DOTTED_BG})`;
-</script>
-
-<div
-  class="PanoRulerPlugin-rule-line"
-  style:width="{rulerItemProp.width}px"
-  style:left="{rulerItemProp.left}px"
-  style:top="{rulerItemProp.top}px"
-  style:transform="rotate({rulerItemProp.rotateDeg}deg)"
-  style:display="{rulerItemProp.visible && _visible ? 'block' : 'none'}"
->
-  {#if rulerItemProp.children.length === 0}
-    <em class="{rulerItemProp.state ? 'em-solid' : 'em-dotted'}" style="{vars}"></em>
-  {:else}
-    <div class="rule-mixed-line">
-      {#each rulerItemProp.children as child}
-        <div style:width="{child.width}px" class="{child.state ? 'em-solid' : 'em-dotted'}" style="{vars}"></div>
-      {/each}
-    </div>
-  {/if}
-  <div
-    class="PanoRulerPlugin-rule-label"
-    style:left="{rulerItemProp.labelOffset}%"
-  >
-    <div class="PanoRulerPlugin-rule-label-name" bind:offsetWidth="{labelWidth}">
-      {rulerItemProp.labelElement}
-    </div>
-  </div>
-</div>
-
-<style>
-  .PanoRulerPlugin-rule-line {
-    position: absolute;
-    transform-origin: left 0.0625rem;
-    width: 0;
-    height: 0.125rem;
-    pointer-events: none;
-  }
-
-  .PanoRulerPlugin-rule-line::after {
-    content: '';
-    position: absolute;
-    left: -0.125rem;
-    top: -0.1rem;
-    width: 0.25rem;
-    height: 0.25rem;
-    border-radius: 50%;
-    background: #fff;
-    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: #fff;
-    z-index: 1;
-    animation: viewport-rule-point 0.1s 1.5s;
-    animation-fill-mode: both;
-  }
-
-  .PanoRulerPlugin-rule-line em {
-    display: block;
-    height: 0.0625rem;
-    animation: viewport-rule-line 0.5s ease 1s;
-    animation-fill-mode: both;
-    box-shadow: 0 0 0.25rem rgb(0 0 0 / 40%);
-    position: relative;
-  }
-
-  .rule-mixed-line {
-    display: flex;
-    height: 0.0625rem;
-    animation: viewport-rule-line 0.5s ease 1s;
-    animation-fill-mode: both;
-    align-items: center;
-  }
-
-  .em-solid {
-    height: 100%;
-    background: #ffffff;
-  }
-  .em-dotted {
-    height: 0.125rem;
-    background: var(--background-image);
-    background-position: center;
-    background-repeat: repeat;
-  }
-
-  .PanoRulerPlugin-rule-label {
-    position: absolute;
-    width: 0;
-    height: 0;
-    top: 0.0625rem;
-    pointer-events: none;
-  }
-
-  .PanoRulerPlugin-rule-label-name {
-    position: absolute;
-    padding: 0.1875rem 0.375rem;
-    background: rgba(195, 195, 195, 0.3);
-    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.3);
-  }
-
-  @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>

package/libs/PanoRulerProPlugin/RulerItems.svelte

@@ -1,212 +0,0 @@
-<script>var _a, _b, _c, _d;
-import { Five } from '@realsee/five';
-import { nextFrame } from '../shared-utils/animationFrame';
-import equal from '../shared-utils/equal';
-import { intersectionOfLine } from '../shared-utils/math/planimetry';
-import throttle from '../shared-utils/throttle';
-import { onDestroy, onMount } from 'svelte';
-import { Vector3 } from 'three';
-import RulerItem from './RulerItem.svelte';
-export let five;
-export let rulerDatas;
-export let options;
-let rulerItemProp = [];
-const canvasWidth = ((_b = (_a = five.getElement()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0;
-const canvasHeight = ((_d = (_c = five.getElement()) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.clientHeight) || 0;
-const getRuleScreenIntr = (startPoint, endPoint) => {
-    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 getPosition = (start, end) => {
-    const startPoint = start.clone().project(five.camera);
-    const startLeft = ((startPoint.x + 1) / 2) * canvasWidth;
-    const startTop = ((-startPoint.y + 1) / 2) * canvasHeight;
-    const endPoint = end.clone().project(five.camera);
-    const endLeft = ((endPoint.x + 1) / 2) * canvasWidth;
-    const endTop = ((-endPoint.y + 1) / 2) * canvasHeight;
-    const distance = Math.sqrt(Math.pow(endLeft - startLeft, 2) + Math.pow(endTop - startTop, 2));
-    return {
-        startLeft,
-        startTop,
-        endLeft,
-        endTop,
-        distance,
-    };
-};
-const getPositionAndVisible = (start, end, visibleOrigin) => {
-    const cameraPosition = five.camera.position;
-    const cameraDirection = five.camera.getWorldDirection(new Vector3());
-    const startAngle = start.clone().sub(cameraPosition).normalize().angleTo(cameraDirection);
-    const endAngle = end.clone().sub(cameraPosition).normalize().angleTo(cameraDirection);
-    const ruleLength = start.distanceTo(end);
-    const midPoint = end.clone().sub(end.clone().sub(start).divide(new Vector3(2, 2, 2)));
-    const disFromCameraToMid = midPoint.distanceTo(cameraPosition);
-    const { startLeft, startTop, endLeft, endTop, distance } = getPosition(start, end);
-    const rad = Math.PI / 2 - Math.atan2(endLeft - startLeft, startTop - endTop);
-    const deg = -(rad / Math.PI) * 180;
-    let visible = true;
-    if (!visibleOrigin)
-        visible = false;
-    // 只显示拐点相连的线
-    if (!equal(start, visibleOrigin) && !equal(end, visibleOrigin)) {
-        visible = false;
-    }
-    // 线小于0.3m隐藏
-    if (ruleLength < 0.3) {
-        visible = false;
-    }
-    if (startAngle > Math.PI / 2) {
-        visible = false;
-    }
-    if (endAngle > Math.PI / 2) {
-        visible = false;
-    }
-    if (disFromCameraToMid / ruleLength > 8) {
-        visible = false;
-    }
-    let labelOffset = 50;
-    let visibleLength = distance;
-    const intr = getRuleScreenIntr({ x: ~~startLeft, y: ~~startTop }, { x: ~~endLeft, y: ~~endTop });
-    if (intr && intr.length === 1) {
-        if (equal(start, visibleOrigin)) {
-            visibleLength = Math.sqrt(Math.pow(intr[0].x - startLeft, 2) + Math.pow(intr[0].y - startTop, 2));
-            labelOffset = (visibleLength / distance) * 50;
-        }
-        else if (equal(end, visibleOrigin)) {
-            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;
-    }
-    return {
-        startLeft,
-        startTop,
-        distance,
-        deg,
-        visible,
-        labelOffset,
-        ruleLength,
-    };
-};
-const updatePanoRulerData = () => {
-    const panoIndex = five.panoIndex;
-    const rulerData = rulerDatas.find((data) => data.panoIndex === panoIndex);
-    if (!rulerData)
-        return (rulerItemProp = []);
-    // 非全景模式下隐藏所有标尺
-    if (five.currentMode !== Five.Mode.Panorama)
-        return (rulerItemProp = []);
-    const cameraPosition = five.camera.position;
-    const cameraDirection = five.camera.getWorldDirection(new Vector3());
-    const startPoints = rulerData.lines.map((v) => new Vector3(v.start[0], -v.start[1], -v.start[2]));
-    const endPoints = rulerData.lines.map((v) => new Vector3(v.end[0], -v.end[1], -v.end[2]));
-    // 可以看到的角度最小的拐点
-    const [visibleOrigin] = startPoints.concat(endPoints).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;
-    });
-    const data = rulerData.lines.map((line) => {
-        var _a, _b;
-        const start = line.start;
-        const end = line.end;
-        const { startLeft, startTop, distance, deg, visible, labelOffset, ruleLength } = getPositionAndVisible(new Vector3(start[0], -start[1], -start[2]), new Vector3(end[0], -end[1], -end[2]), visibleOrigin);
-        const children = [];
-        if (line.children && ((_a = line.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-            (_b = line.children) === null || _b === void 0 ? void 0 : _b.forEach((l) => {
-                const start = l.start;
-                const end = l.end;
-                const { distance } = getPosition(new Vector3(start[0], -start[1], -start[2]), new Vector3(end[0], -end[1], -end[2]));
-                children.push({
-                    width: distance,
-                    state: l.state,
-                });
-            });
-        }
-        return {
-            width: distance,
-            left: startLeft,
-            top: startTop,
-            rotateDeg: deg,
-            state: line.state,
-            children,
-            labelOffset,
-            visible,
-            labelElement: options.distanceText(ruleLength),
-        };
-    });
-    rulerItemProp = data;
-};
-const nextFrameFreshRule = () => nextFrame(updatePanoRulerData);
-const throttleFreshRule = throttle(updatePanoRulerData, 80);
-onMount(() => {
-    updatePanoRulerData();
-    five.on('panoArrived', updatePanoRulerData);
-    five.on('modeChange', updatePanoRulerData);
-    five.on('cameraDirectionUpdate', nextFrameFreshRule);
-    five.on('movingToPano', nextFrameFreshRule);
-    five.on('mouseWheel', () => throttleFreshRule());
-    five.on('pinchGesture', () => throttleFreshRule());
-});
-onDestroy(() => {
-    five.off('panoArrived', updatePanoRulerData);
-    five.off('modeChange', updatePanoRulerData);
-    five.off('cameraDirectionUpdate', nextFrameFreshRule);
-    five.off('movingToPano', nextFrameFreshRule);
-    five.off('mouseWheel', () => throttleFreshRule());
-    five.off('pinchGesture', () => throttleFreshRule());
-});
-</script>
-
-<div>
-  {#each rulerItemProp as itemData}
-    <RulerItem rulerItemProp="{itemData}" />
-  {/each}
-</div>
-
-<style>
-</style>