@realsee/dnalogel 2.1.0-alpha.5 → 2.1.0-alpha.7

package/libs/shared-utils/Object3DHelper/Controller/RectangleScaleController.js

@@ -2,8 +2,9 @@ import { BaseController } from '../Base/BaseController';
 import * as THREE from 'three';
 import { getMouseRaycaster, vectorIsEqual } from '../utils';
 import { Vector3 } from 'three';
-import { negateScale } from '../utils/negateScale';
+import '../utils/negateScale';
 import '../utils/getPoint';
+import '../utils/finiteNumber';
 export class RectangleScaleController extends BaseController {
     constructor(...params) {
         super(...params);
@@ -40,10 +41,6 @@ export class RectangleScaleController extends BaseController {
             plane.setFromNormalAndCoplanarPoint(this.originObject3D.getWorldDirection(new Vector3()), positions[0]);
         else
             plane.setFromCoplanarPoints(positions[0], positions[1], positions[2]);
-        // const p0 = getPoint(positions[0]!, 0)
-        // const p1 = getPoint(positions[1]!, 1)
-        // const p2 = getPoint(positions[2]!, 2)
-        // this.scene.add(p0, p1, p2)
         return plane;
     }
     dragStart(mousePoint, point) {
@@ -53,6 +50,7 @@ export class RectangleScaleController extends BaseController {
         if (!plane)
             return this.dragEnd();
         this.startInfo = { startPoint: { position: point.position.clone(), direction: point.direction }, plane };
+        // this.scene.add(getPoint(point.position.clone(), 3))
         this.hooks.emit('scaleStart');
         this.needsRender();
         this.isDragging = true;
@@ -65,7 +63,7 @@ export class RectangleScaleController extends BaseController {
         if (!raycaster)
             return this.dragEnd();
         this.scale(raycaster);
-        console.log('%c RectangleScaleController dragging', 'color: #49de1b');
+        // console.log('%c RectangleScaleController dragging', 'color: #49de1b')
     }
     scale(raycaster) {
         var _a, _b;
@@ -81,100 +79,108 @@ export class RectangleScaleController extends BaseController {
             return;
         if (vectorIsEqual(planeIntersection, this.camera.position))
             return;
-        const referencePosition = cornerPositions[0].clone();
         const planeCenter = new Vector3().addVectors(cornerPositions[0], cornerPositions[2]).divideScalar(2);
         const { position: startPosition, direction } = startPoint;
-        const ewVector = new Vector3().subVectors(cornerPositions[1], referencePosition); // west -> east vector
-        const nsVector = new Vector3().subVectors(cornerPositions[3], referencePosition); // south -> north vector
+        const ewVector = new Vector3().subVectors(cornerPositions[1], cornerPositions[0]); // west -> east vector
+        const nsVector = new Vector3().subVectors(cornerPositions[3], cornerPositions[0]); // south -> north vector
         // eslint-disable-next-line complexity
-        const getScale = (direction) => {
+        const getOffset = (direction) => {
+            const defaultVector = new Vector3(0, 0, 0);
+            if (!this.startInfo)
+                return defaultVector;
             const baseVector = (direction === 'ew' ? ewVector : nsVector).clone();
             const startPositionProject = startPosition.clone().projectOnVector(baseVector);
             const nowPositionProject = planeIntersection.clone().projectOnVector(baseVector);
             const planeCenterProject = planeCenter.clone().projectOnVector(baseVector);
-            if (this.startInfo) {
-                if (direction === 'ns' && typeof this.startInfo.nsMoveIsNegative !== 'boolean') {
-                    const offset = new Vector3().subVectors(nowPositionProject, planeCenterProject);
-                    const xIsNegative = offset.x < 0 && baseVector.x >= 0;
-                    const yIsNegative = offset.y < 0 && baseVector.y >= 0;
-                    const zIsNegative = offset.z < 0 && baseVector.z >= 0;
-                    this.startInfo.nsMoveIsNegative = xIsNegative || yIsNegative || zIsNegative;
+            // this.scene.add(getPoint(startPosition, 0))
+            // this.scene.add(getPoint(planeIntersection, 0))
+            if (nowPositionProject.equals(startPositionProject))
+                return defaultVector;
+            if (direction === 'ns' && typeof this.startInfo.dragPointInCenterBottom !== 'boolean') {
+                const offset = new Vector3().subVectors(nowPositionProject, planeCenterProject);
+                const xIsNegative = offset.x < 0 && baseVector.x >= 0;
+                const yIsNegative = offset.y < 0 && baseVector.y >= 0;
+                const zIsNegative = offset.z < 0 && baseVector.z >= 0;
+                this.startInfo.dragPointInCenterBottom = xIsNegative || yIsNegative || zIsNegative;
+            }
+            if (direction === 'ew' && typeof this.startInfo.dragPointInCenterLeft !== 'boolean') {
+                const offset = new Vector3().subVectors(nowPositionProject, planeCenterProject);
+                const xIsNegative = offset.x < 0 && baseVector.x >= 0;
+                const yIsNegative = offset.y < 0 && baseVector.y >= 0;
+                const zIsNegative = offset.z < 0 && baseVector.z >= 0;
+                this.startInfo.dragPointInCenterLeft = xIsNegative || yIsNegative || zIsNegative;
+            }
+            const offset = new Vector3().subVectors(nowPositionProject, startPositionProject);
+            // TODO
+            if (offset.length() > 0.1)
+                return defaultVector;
+            return offset;
+        };
+        const ewOffset = getOffset('ew');
+        const nsOffset = getOffset('ns');
+        const setEWScale = () => {
+            const offset = ewOffset;
+            this.helperObject3D.cornerPositions.forEach((position, index) => {
+                var _a;
+                if ((_a = this.startInfo) === null || _a === void 0 ? void 0 : _a.dragPointInCenterLeft) {
+                    if (index === 0 || index === 3)
+                        position.add(offset); // 拖左边，只改左边点
                 }
-                if (direction === 'ew' && typeof this.startInfo.ewMoveIsNegative !== 'boolean') {
-                    const offset = new Vector3().subVectors(nowPositionProject, planeCenterProject);
-                    const xIsNegative = offset.x < 0 && baseVector.x >= 0;
-                    const yIsNegative = offset.y < 0 && baseVector.y >= 0;
-                    const zIsNegative = offset.z < 0 && baseVector.z >= 0;
-                    this.startInfo.ewMoveIsNegative = xIsNegative || yIsNegative || zIsNegative;
+                else {
+                    if (index === 1 || index === 2)
+                        position.add(offset); // 拖右边，只改右边点
                 }
-            }
-            if (nowPositionProject.equals(startPositionProject))
-                return;
-            const startPositionProjectOffset = new Vector3().subVectors(startPositionProject, planeCenterProject);
-            const nowPositionProjectOffset = new Vector3().subVectors(nowPositionProject, planeCenterProject);
-            const scale = nowPositionProjectOffset.clone().divide(startPositionProjectOffset);
-            scale.x = isNaN(scale.x) ? 1 : scale.x;
-            scale.y = isNaN(scale.y) ? 1 : scale.y;
-            scale.z = isNaN(scale.z) ? 1 : scale.z;
-            return scale;
+            });
         };
-        const nsScale = (_a = getScale('ns')) !== null && _a !== void 0 ? _a : new Vector3(1, 1, 1);
-        const ewScale = (_b = getScale('ew')) !== null && _b !== void 0 ? _b : new Vector3(1, 1, 1);
-        const scale = (() => {
-            switch (direction) {
-                case 'ew':
-                    return ewScale;
-                case 'ns':
-                    return nsScale;
-                case 'nesw':
-                case 'nwse':
-                    return new Vector3().multiplyVectors(nsScale, ewScale);
-            }
-        })();
-        const halfScale = scale.clone().sub(new Vector3(1, 1, 1)).multiplyScalar(0.5).add(new Vector3(1, 1, 1));
-        const scaleMatrix = new THREE.Matrix4().scale(halfScale);
+        const setNSScale = () => {
+            const offset = nsOffset;
+            this.helperObject3D.cornerPositions.forEach((position, index) => {
+                var _a;
+                if ((_a = this.startInfo) === null || _a === void 0 ? void 0 : _a.dragPointInCenterBottom) {
+                    if (index === 0 || index === 1)
+                        position.add(offset); // 拖下边，只改下边点
+                }
+                else {
+                    if (index === 2 || index === 3)
+                        position.add(offset); // 拖上边，只改上边点
+                }
+            });
+        };
+        switch (direction) {
+            case 'ew':
+                setEWScale();
+                break;
+            case 'ns':
+                setNSScale();
+                break;
+            case 'nesw':
+            case 'nwse':
+                setEWScale();
+                setNSScale();
+        }
+        (_b = (_a = this.helperObject3D).updatePoints) === null || _b === void 0 ? void 0 : _b.call(_a);
+        // this.helperObject3D.cornerPositions.forEach((position, index) => {
+        //   this.scene.add(getPoint(position, index))
+        // })
+        const scaleX = new Vector3().subVectors(cornerPositions[1], cornerPositions[0]).length() / ewVector.length();
+        const scaleY = new Vector3().subVectors(cornerPositions[3], cornerPositions[0]).length() / nsVector.length();
+        const scaleXY = new Vector3(scaleX, scaleY, 1);
+        console.log(scaleXY);
+        const scaleMatrix = new THREE.Matrix4().scale(scaleXY);
         const newScale = object.scale.clone().applyMatrix4(scaleMatrix);
-        // const minScale = 0.000001
-        // newScale.x = Math.max(newScale.x, minScale)
-        // newScale.y = Math.max(newScale.y, minScale)
-        // newScale.z = Math.max(newScale.z, minScale)
-        // if (direction === 'ew' || direction === 'ns') {
-        //   if (newScale.x === minScale || newScale.y === minScale || newScale.z === minScale) return
-        // }
-        // if (direction === 'nesw' || direction === 'nwse') {
-        //   if (newScale.x === minScale && newScale.y === minScale) return
-        //   if (newScale.x === minScale && newScale.z === minScale) return
-        //   if (newScale.y === minScale && newScale.z === minScale) return
-        // }
         object.scale.copy(newScale); // 或者 object.scale.applyMatrix4(scaleMatrix)
-        startPoint.position.copy(planeIntersection);
         this.hooks.emit('scaleUpdate', { matrix4: scaleMatrix, helperOrigin: planeCenter });
+        startPoint.position.copy(planeIntersection);
+        // =================================================================================================================================================================
+        // =================================================================================================================================================================
         // 移动位置
-        if (referencePosition) {
-            const ewMoveScale = this.startInfo.ewMoveIsNegative ? negateScale(ewScale) : ewScale;
-            const nsMoveScale = this.startInfo.nsMoveIsNegative ? negateScale(nsScale) : nsScale;
-            const moveScale = (() => {
-                switch (direction) {
-                    case 'ew':
-                        return ewMoveScale;
-                    case 'ns':
-                        return nsMoveScale;
-                    case 'nesw':
-                    case 'nwse':
-                        return new Vector3().multiplyVectors(ewMoveScale, nsMoveScale);
-                }
-            })();
-            const halfMoveScale = moveScale.clone().sub(new Vector3(1, 1, 1)).multiplyScalar(0.5).add(new Vector3(1, 1, 1));
-            const objectPosition = object.position.clone();
-            const newPosition = new Vector3()
-                .subVectors(objectPosition, referencePosition)
-                .multiply(halfMoveScale)
-                .add(referencePosition)
-                .sub(objectPosition);
-            const transform = new THREE.Matrix4().setPosition(newPosition);
-            object.applyMatrix4(transform);
-            this.hooks.emit('positionUpdate', { matrix4: transform });
-        }
+        const centerPosition = new Vector3().addVectors(cornerPositions[0], cornerPositions[2]).divideScalar(2);
+        const offset = new Vector3().subVectors(centerPosition, planeCenter);
+        const transform = new THREE.Matrix4().setPosition(offset);
+        object.applyMatrix4(transform);
+        // this.hooks.emit('scaleUpdate', { matrix4: scaleMatrix, helperOrigin: planeCenter })
+        this.hooks.emit('positionUpdate', { matrix4: transform });
+        // 移动位置end
         this.needsRender();
     }
     dragEnd() {

package/libs/shared-utils/Object3DHelper/Controller/RotateController.d.ts

@@ -3,10 +3,11 @@ import type { RotateHelperAbstract } from '../Helper';
 export declare class RotateController<T extends RotateHelperAbstract = RotateHelperAbstract> extends BaseController<T> {
     private startInfo?;
     private lastRotation?;
+    private a?;
     private rotations;
-    private a;
     private helperObject3DQuaternion;
     constructor(...params: ConstructorParameters<typeof BaseController<T>>);
+    initialHelperQuaternion(): void;
     /**
      * @description: 拖动开始，找出拖的Direction
      */

package/libs/shared-utils/Object3DHelper/Controller/RotateController.js

@@ -17,23 +17,23 @@ export class RotateController extends BaseController {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "rotations", {
+        Object.defineProperty(this, "a", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: []
+            value: void 0
         });
-        Object.defineProperty(this, "a", {
+        Object.defineProperty(this, "rotations", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: []
         });
         Object.defineProperty(this, "helperObject3DQuaternion", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: this.helperObject3D.quaternion.clone()
+            value: this.originObject3D.quaternion.clone()
         });
         // add hover listener
         const helper = this.helperObject3D;
@@ -45,6 +45,10 @@ export class RotateController extends BaseController {
         document.addEventListener('mousemove', dragging);
         document.addEventListener('mouseup', dragEnd);
     }
+    initialHelperQuaternion() {
+        this.helperObject3D.updateAngleHelperQuaternion();
+        this.helperObject3D.applyHelperQuaternion(this.originObject3D.quaternion);
+    }
     /**
      * @description: 拖动开始，找出拖的Direction
      */
@@ -69,9 +73,9 @@ export class RotateController extends BaseController {
         this.setTipsPosition(tipsPosition);
         // end
         // init plane
-        const directionX = new THREE.Vector3(1, 0, 0).applyQuaternion(this.helperObject3DQuaternion.clone());
-        const directionY = new THREE.Vector3(0, 1, 0).applyQuaternion(this.helperObject3DQuaternion.clone());
-        const directionZ = new THREE.Vector3(0, 0, 1).applyQuaternion(this.helperObject3DQuaternion.clone());
+        const directionX = new THREE.Vector3(1, 0, 0).applyQuaternion(this.helperObject3DQuaternion);
+        const directionY = new THREE.Vector3(0, 1, 0).applyQuaternion(this.helperObject3DQuaternion);
+        const directionZ = new THREE.Vector3(0, 0, 1).applyQuaternion(this.helperObject3DQuaternion);
         const directionVector = (() => {
             switch (direction) {
                 case 'x':
@@ -83,6 +87,11 @@ export class RotateController extends BaseController {
             }
         })();
         const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(directionVector, startIntersect);
+        // this.a && this.scene.remove(this.a)
+        // const h = new THREE.PlaneHelper(plane, 1)
+        // console.log(h.position)
+        // this.scene.add(h)
+        // this.a = h
         // end
         // init startVectorProject
         const projectPoint = new THREE.Vector3();

package/libs/shared-utils/Object3DHelper/Helper/RectangleScaleHelper.d.ts

@@ -19,6 +19,7 @@ export declare class RectangleScaleHelper<T extends OriginObjectType = OriginObj
     private enabled;
     constructor(originObject3D: T, container: Element, camera: THREE.Camera, scene: THREE.Scene);
     updatePosition(): void;
+    updateQuaternion(): void;
     updateMatrix4(matrix: THREE.Matrix4): void;
     showDraggingHelper(): void;
     applyHelperScaleMatrix4(matrix: THREE.Matrix4, params?: {

package/libs/shared-utils/Object3DHelper/Helper/RectangleScaleHelper.js

@@ -4,6 +4,7 @@ import { RectangleScaleHelperAbstract } from '.';
 import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
 import { rectangleScaleDom } from './HTML/rectangleScaleDom';
 import { CSS3DObjectPlus } from '../../../CSS3DRenderPlugin/utils/CSS3DObjectPlus';
+import '../utils/getPoint';
 export class RectangleScaleHelper extends RectangleScaleHelperAbstract {
     constructor(originObject3D, container, camera, scene) {
         super(originObject3D);
@@ -77,6 +78,10 @@ export class RectangleScaleHelper extends RectangleScaleHelperAbstract {
         (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject.position.copy(this.originObject3D.position);
         (_b = this.plane) === null || _b === void 0 ? void 0 : _b.position.copy(this.originObject3D.position);
     }
+    updateQuaternion() {
+        var _a;
+        (_a = this.plane) === null || _a === void 0 ? void 0 : _a.quaternion.copy(this.originObject3D.quaternion);
+    }
     // public setPosition(position: Vector3) {
     //   this.css3DInstance?.css3DObject.position.copy(position)
     //   this.plane?.position.copy(position)
@@ -94,13 +99,6 @@ export class RectangleScaleHelper extends RectangleScaleHelperAbstract {
         var _a, _b;
         (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject.scale.applyMatrix4(matrix);
         (_b = this.plane) === null || _b === void 0 ? void 0 : _b.scale.applyMatrix4(matrix);
-        const { origin, helperOrigin } = params !== null && params !== void 0 ? params : {};
-        if (!helperOrigin)
-            return;
-        this.cornerPositions.forEach((position) => {
-            position.subVectors(position, helperOrigin).applyMatrix4(matrix).add(helperOrigin);
-        });
-        this.updatePoints();
     }
     updatePoints() {
         const position8 = this.calculatePointPosition(this.cornerPositions);

package/libs/shared-utils/Object3DHelper/index.js

@@ -96,11 +96,11 @@ export class Object3DHelper {
                     const { quaternion, origin } = rotate;
                     if (quaternion) {
                         if (controller !== this.controllers.moveController)
-                            (_a = this.controllers.moveController) === null || _a === void 0 ? void 0 : _a.setHelperQuaternion(quaternion, origin);
+                            (_a = this.controllers.moveController) === null || _a === void 0 ? void 0 : _a.applyHelperQuaternion(quaternion, origin);
                         if (controller !== this.controllers.rotateController)
-                            (_b = this.controllers.rotateController) === null || _b === void 0 ? void 0 : _b.setHelperQuaternion(quaternion, origin);
+                            (_b = this.controllers.rotateController) === null || _b === void 0 ? void 0 : _b.applyHelperQuaternion(quaternion, origin);
                         if (controller !== this.controllers.scaleController)
-                            (_c = this.controllers.scaleController) === null || _c === void 0 ? void 0 : _c.setHelperQuaternion(quaternion, origin);
+                            (_c = this.controllers.scaleController) === null || _c === void 0 ? void 0 : _c.applyHelperQuaternion(quaternion, origin);
                         (_d = this.helpers.outlineHelper) === null || _d === void 0 ? void 0 : _d.applyQuaternion(quaternion);
                     }
                 }

package/libs/shared-utils/Object3DHelper/utils/finiteNumber.d.ts

@@ -0,0 +1 @@
+export default function finiteNumber(value: number | undefined | null | void, defaultValue?: number): number;

package/libs/shared-utils/Object3DHelper/utils/finiteNumber.js

@@ -0,0 +1,9 @@
+export default function finiteNumber(value, defaultValue = 0) {
+    if (typeof value === 'undefined' || value === null)
+        return defaultValue;
+    if (typeof value === 'number') {
+        if (Number.isNaN(value) || !Number.isFinite(value))
+            return defaultValue;
+    }
+    return value;
+}

package/package.json

@@ -8,7 +8,7 @@
   "repository": "https://github.com/realsee-developer/dnalogel.git",
   "description": "如视 VR 看房插件合集",
   "private": false,
-  "version": "2.1.0-alpha.5",
+  "version": "2.1.0-alpha.7",
   "license": "SEE LICENSE IN TERMS.txt",
   "scripts": {
     "build": "yarn run tsb && yarn run build:rollup && yarn run build:components && yarn build:docs",

package/libs/ItemLabelPlugin/ItemLabelComponent.svelte

@@ -1,251 +0,0 @@
-<script>import { Five } from '@realsee/five';
-import "./typings";
-import { beforeUpdate, onDestroy, onMount } from "svelte";
-import * as THREE from 'three';
-import ItemLabelItem from './ItemLabelItem.svelte';
-import "./events.type";
-import debounce from '../shared-utils/debounce';
-import { isImpacted } from "./utils/isImpacted";
-import { getStrokeLength } from "./utils/getStrokeLength";
-import { getLabelTransform } from './utils/getLabelTransform';
-import { transform2RenderData } from "./utils/transform2RenderData";
-const { Raycaster, Vector3 } = THREE;
-export let five;
-export let modelOcclusionEnable;
-export let onlyVisibleInPanorama;
-export let itemLabels;
-export let hooks;
-export let displayStrategyType;
-export let maxVisibleDistance;
-let curItemLabels = null;
-let renderItemLabels = null;
-let anchorEnabled = (five === null || five === void 0 ? void 0 : five.currentMode) === Five.Mode.Panorama;
-let containerWidth;
-let containerHeight;
-// 计算重叠
-let cssOffsetLists = [];
-let cssHeight = 26;
-let basicWidth = 11;
-// 动画过程中 itemsVisible 为 false
-let itemsVisible = true;
-/**
- * 可见性策略：
- * 1、当前楼层(假设先不考虑多楼层)
- * 2、模型未被遮挡（一个 box 有没有被遮挡的计算？ TODO）
- * */
-const judgeImpacted = (five, itemLabel) => {
-    // 虚拟 VR 仅有一层，不考虑楼层信息
-    const cameraPosition = five.camera.position.clone();
-    const modelPosition = new Vector3(itemLabel.modelPosition[0], itemLabel.modelPosition[1], itemLabel.modelPosition[2]);
-    // 计算点到相机的位置
-    const vectorDistance = modelPosition.distanceTo(cameraPosition);
-    // 判断距离，大于最大可见距离直接不可见 TODO 把距离计算和碰撞拆分开
-    if (maxVisibleDistance !== undefined && five.state.mode === Five.Mode.Panorama) {
-        if (vectorDistance > maxVisibleDistance) {
-            return false;
-        }
-    }
-    return isImpacted(five, modelPosition.clone().sub(cameraPosition).normalize(), cameraPosition, vectorDistance);
-};
-const judgeInViewport = (modelPoint) => {
-    const { camera, model } = five;
-    const { x: offsetXFromCenter, y: offsetYFromCenter, z: offsetZFromCenter, } = modelPoint.clone().project(camera);
-    const ratioFromLeft = (offsetXFromCenter + 1) / 2;
-    const ratioFromTop = (2 - (offsetYFromCenter + 1)) / 2;
-    const isFront = Math.abs(offsetZFromCenter) < 1;
-    const cssOffset = [ratioFromLeft, ratioFromTop];
-    // 只计算在前面就行
-    const isInViewport = isFront && cssOffset.every((ratio) => ratio < 1 && ratio >= 0);
-    return Boolean(isInViewport);
-};
-// cssOffset 获取
-const getLabelCssOffset = (five, itemLabel) => {
-    const modelPosition = new Vector3(itemLabel.modelPosition[0], itemLabel.modelPosition[1], itemLabel.modelPosition[2]);
-    const cssPosition = five.project2d(modelPosition);
-    const xOffset = cssPosition === null || cssPosition === void 0 ? void 0 : cssPosition.x;
-    const yOffset = cssPosition === null || cssPosition === void 0 ? void 0 : cssPosition.y;
-    return [xOffset, yOffset];
-};
-// 重叠计算
-const isOverlap = (cssOffset, widthOffset) => {
-    if (cssOffsetLists.length === 0) {
-        return false;
-    }
-    const hasOverlapPoint = cssOffsetLists.find(item => ((cssOffset[0] >= item[0] - widthOffset && cssOffset[0] <= item[0] + widthOffset)
-        || (cssOffset[1] >= item[1] - cssHeight && cssOffset[1] <= item[1] + cssHeight)));
-    return !!hasOverlapPoint;
-};
-const getFormatedItemLabels = (five, labels) => {
-    // 计算位置 & 可见性
-    const newLabels = labels.map(label => {
-        // 不在绑定点位则直接不可见
-        if (five.state.panoIndex !== label.panoIndex) {
-            return Object.assign(Object.assign({}, label), { visible: false });
-        }
-        const cssOffset = getLabelCssOffset(five, label);
-        const curLabelWidth = label.name.length * basicWidth;
-        const strokeLength = getStrokeLength(label.modelPosition[1], displayStrategyType);
-        // 是否加入碰撞检测
-        // 配置加入碰撞检测，则判断碰撞检测
-        // 在可见范围内， 仅在 Panorama 模态计算
-        const isInViewport = five.currentMode === Five.Mode.Panorama
-            ? judgeInViewport(new Vector3(label.position[0], label.position[1], label.position[2]))
-            : true;
-        // 碰撞
-        const isBlocked = modelOcclusionEnable
-            ? judgeImpacted(five, label)
-            : false;
-        const visible = isInViewport && !isBlocked;
-        // 关掉重叠计算
-        // const visible = naturalVisible && !isOverlap([cssOffset[0], cssOffset[1] + strokeLength], curLabelWidth)
-        if (!visible)
-            return Object.assign(Object.assign({}, label), { visible });
-        cssOffsetLists.push(cssOffset);
-        // position
-        const transform = getLabelTransform(cssOffset);
-        return Object.assign(Object.assign({}, label), { visible, transform, strokeLength });
-    });
-    const sortedItemLabelItems = newLabels
-        .filter(({ visible }) => visible)
-        .map(label => ({
-        itemLabelItem: label,
-        distance: new Vector3(label.modelPosition[0], label.modelPosition[1], label.modelPosition[2]).clone().distanceTo(five.camera.position)
-    }))
-        .sort((a, b) => a.distance - b.distance);
-    return newLabels.map(label => {
-        const sortIndex = sortedItemLabelItems.findIndex(item => item.itemLabelItem.id === label.id);
-        if (sortIndex !== undefined)
-            return Object.assign(Object.assign({}, label), { zIndex: sortIndex * 10 });
-        return label;
-    });
-};
-const onItemLabelUpdate = () => {
-    cssOffsetLists = [];
-    renderItemLabels = getFormatedItemLabels(five, renderItemLabels);
-};
-const handleCameraUpdateCallback = () => {
-    itemsVisible = false;
-    handleCameraUpdate();
-};
-const onFiveModeChange = (mode) => {
-    itemsVisible = false;
-    five.once('initAnimationEnded', (panoIndex, pose, userAction) => {
-        anchorEnabled = mode === Five.Mode.Panorama;
-        itemsVisible = true;
-        if (!userAction)
-            return;
-        else
-            onItemLabelUpdate();
-    });
-};
-const handleCameraUpdate = debounce(() => {
-    itemsVisible = true;
-    onItemLabelUpdate();
-}, 300);
-const onResize = () => {
-    five.once('renderFrame', onItemLabelUpdate);
-};
-const addResizeListener = () => {
-    window.addEventListener('resize', onResize, false);
-};
-const addDataUpdateListener = () => {
-    if (curItemLabels !== itemLabels) {
-        renderItemLabels = transform2RenderData(itemLabels);
-        curItemLabels = itemLabels;
-        onItemLabelUpdate();
-    }
-};
-const getNearObserverPano = (fromPositionVector, observers) => {
-    let candidates = [];
-    for (let i = 0; i < observers.length; i++) {
-        const { position: obVector, panoIndex } = observers[i];
-        const distance = fromPositionVector.distanceTo(obVector);
-        if (maxVisibleDistance === undefined || distance <= maxVisibleDistance || five.state.mode !== Five.Mode.Panorama) {
-            candidates.push({
-                panoIndex,
-                obVector,
-                distance
-            });
-        }
-    }
-    candidates = candidates.sort((a, b) => a.distance - b.distance);
-    let observerIndex;
-    for (let i = 0; i < candidates.length; i++) {
-        const { obVector, distance, panoIndex } = candidates[i];
-        const isImpactedRes = isImpacted(five, fromPositionVector, obVector, distance);
-        if (!isImpactedRes) {
-            observerIndex = panoIndex;
-            break;
-        }
-    }
-    return typeof observerIndex === "number" ? observers[observerIndex] : undefined;
-};
-const onIconClick = (itemLabel) => {
-    if (five.state.mode === Five.Mode.Panorama)
-        return;
-    const observers = five.work.observers;
-    const fromPositionVector = new Vector3().fromArray(itemLabel.position);
-    const observer = getNearObserverPano(fromPositionVector, observers);
-    if (observer) {
-        itemLabel.observerIndex = observer.panoIndex;
-    }
-    if (typeof itemLabel.observerIndex === "number") {
-        const observer = observers[itemLabel.observerIndex];
-        const direction = fromPositionVector.clone().sub(observer.position).normalize();
-        const cameraCoord = {
-            longitude: Math.PI + Math.atan2(direction.x, direction.z),
-            latitude: Math.acos(direction.y / direction.length()) - Math.PI / 2,
-        };
-        five.setState(Object.assign(Object.assign({}, cameraCoord), { mode: Five.Mode.Panorama, panoIndex: itemLabel.observerIndex }));
-        // 游走结束更新 render list
-        five.once('initAnimationEnded', () => {
-            renderItemLabels = renderItemLabels.map(item => {
-                return Object.assign(Object.assign({}, item), { isFold: item.id !== itemLabel.id });
-            });
-            five.once('cameraUpdate', () => {
-                renderItemLabels = renderItemLabels.map(item => {
-                    return Object.assign(Object.assign({}, item), { isFold: false });
-                });
-            });
-        });
-    }
-};
-beforeUpdate(() => {
-    addDataUpdateListener();
-});
-onMount(() => {
-    renderItemLabels = transform2RenderData(itemLabels);
-    curItemLabels = itemLabels;
-    onItemLabelUpdate();
-    addResizeListener();
-    five.on('cameraUpdate', handleCameraUpdateCallback);
-    // five.on('modeChange', onFiveModeChange)
-});
-onDestroy(() => {
-    five.off('cameraUpdate', handleCameraUpdateCallback);
-    // five.off('modeChange', onFiveModeChange)
-    window.removeEventListener('resize', onResize, false);
-});
-</script>
-
-<div class="item-labels-container" bind:clientWidth="{containerWidth}" bind:clientHeight="{containerHeight}"
-     style:opacity="{itemsVisible ? 1 : 0}">
-	{#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
-		{#if itemLabelItem.visible}
-			<ItemLabelItem
-					itemLabel="{itemLabelItem}"
-					hooks="{hooks}"
-					anchorEnabled="{anchorEnabled}"
-					onIconClick="{onIconClick}"
-			/>
-		{/if}
-	{/each}
-</div>
-
-<style>
-    .item-labels-container {
-        width: 100%;
-        height: 100%;
-        position: relative;
-    }
-</style>