@realsee/dnalogel 2.0.0-alpha.30-beta → 2.0.0-alpha.31

package/libs/ItemLabelPlugin/ItemLabelItem.js

@@ -22,151 +22,205 @@ import "./events.type";
 import classNames from 'classnames';
 
 function add_css(target) {
-	append_styles(target, "svelte-1u8wokx", ".item-label-item.svelte-1u8wokx{position:absolute;z-index:0;transform:none;cursor:pointer;pointer-events:none;user-select:none;opacity:0}.item-label-item.visible.svelte-1u8wokx{opacity:1;animation:svelte-1u8wokx-fadeIn .3s ease-in}.item-label-item__text-wrap.svelte-1u8wokx{height:fit-content;padding:12px 20px 12px 12px;position:absolute;width:max-content;max-width:473px;min-height:92px;pointer-events:none;background-image:linear-gradient(269deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.60) 49%, rgba(31,38,46,0.70) 100%);border:1.5px solid rgba(255, 255, 255, .65);border-radius:3px;color:white;transform:translate(-50%, 0);display:flex;justify-content:flex-start;align-items:center;box-sizing:border-box;overflow:hidden}.item-label-item__text-wrap.visible.svelte-1u8wokx{pointer-events:all}.icon-wrap.svelte-1u8wokx{width:68px;height:100%;display:flex;justify-content:center;align-content:center}.icon.svelte-1u8wokx{width:68px;height:68px;background-repeat:no-repeat;background-size:contain;background-position:center}.item-label-text.svelte-1u8wokx{margin-left:12px;padding-left:12px;min-height:68px;height:auto;display:flex;flex-flow:column;justify-content:space-around;align-content:flex-start;border-left:solid rgba(255, 255, 255, .2) 1px;border-top:solid rgba(255, 255, 255, .2) 0;border-right:solid rgba(255, 255, 255, .2) 0;border-bottom:solid rgba(255, 255, 255, .2) 0;pointer-events:auto}.item-model.svelte-1u8wokx{white-space:nowrap;font-size:22px;font-weight:bold;line-height:30px}.item-name.svelte-1u8wokx{height:auto;word-wrap:break-word;word-break:break-all;font-size:20px;line-height:28px}.item-label-item__bar.svelte-1u8wokx{position:absolute;bottom:0;width:3px;background-image:linear-gradient(to bottom, white, rgba(255, 255, 255, 0));box-shadow:0 2px 8px 0 rgba(0,0,0,0.20);pointer-events:none}.item-label-item__bar.anchor.svelte-1u8wokx:after{content:'';position:absolute;bottom:0;width:24px;height:24px;background-image:url(\"//vrlab-public.ljcdn.com/common/file/web/67e7a198-28c9-47dc-879b-507bd3ae600c.png \");background-position:center;background-size:contain;transform:translate(-10.5px, 50%)}@keyframes svelte-1u8wokx-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}");
+	append_styles(target, "svelte-1gam1w3", ".item-label-item.svelte-1gam1w3.svelte-1gam1w3{position:absolute;z-index:0;transform:none;cursor:pointer;pointer-events:none;user-select:none;animation:svelte-1gam1w3-fadeIn .3s ease-in}.item-label-item.fold.svelte-1gam1w3>.item-label-item__text-wrap.svelte-1gam1w3{visibility:hidden}.item-label-item.fold.svelte-1gam1w3>.item-label-item__bar.anchor.svelte-1gam1w3{visibility:hidden}.item-label-item.fold.svelte-1gam1w3>.item-label-item__bar.anchor.svelte-1gam1w3:after{visibility:visible}.item-label-item__text-wrap.svelte-1gam1w3.svelte-1gam1w3{height:fit-content;padding:12px 20px 12px 12px;position:absolute;width:max-content;max-width:473px;min-height:92px;background-image:linear-gradient(269deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.60) 49%, rgba(31, 38, 46, 0.70) 100%);border:1.5px solid rgba(255, 255, 255, .65);border-radius:3px;color:white;transform:translate(-50%, 0);display:flex;justify-content:flex-start;align-items:center;box-sizing:border-box;overflow:hidden;pointer-events:all}.icon-wrap.svelte-1gam1w3.svelte-1gam1w3{width:68px;height:100%;display:flex;justify-content:center;align-content:center}.icon.svelte-1gam1w3.svelte-1gam1w3{width:68px;height:68px;background-repeat:no-repeat;background-size:contain;background-position:center}.item-label-text.svelte-1gam1w3.svelte-1gam1w3{margin-left:12px;padding-left:12px;min-height:68px;height:auto;display:flex;flex-flow:column;justify-content:space-around;align-content:flex-start;border-left:solid rgba(255, 255, 255, .2) 1px;border-top:solid rgba(255, 255, 255, .2) 0;border-right:solid rgba(255, 255, 255, .2) 0;border-bottom:solid rgba(255, 255, 255, .2) 0;pointer-events:auto}.item-model.svelte-1gam1w3.svelte-1gam1w3{white-space:nowrap;font-size:22px;font-weight:bold;line-height:30px}.item-name.svelte-1gam1w3.svelte-1gam1w3{height:auto;word-wrap:break-word;word-break:break-all;font-size:20px;line-height:28px}.item-label-item__bar.svelte-1gam1w3.svelte-1gam1w3{position:absolute;bottom:0;width:3px;background-image:linear-gradient(to bottom, white, rgba(255, 255, 255, 0));box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.20);pointer-events:none}.item-label-item__bar.anchor.svelte-1gam1w3.svelte-1gam1w3:after{content:'';position:absolute;bottom:0;width:24px;height:24px;background-image:url(\"//vrlab-public.ljcdn.com/common/file/web/67e7a198-28c9-47dc-879b-507bd3ae600c.png \");background-position:center;background-size:contain;transform:translate(-10.5px, 50%)}@keyframes svelte-1gam1w3-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}");
 }
 
-function create_fragment(ctx) {
-	let div5;
-	let div3;
+// (21:2) {#if itemLabel.icon}
+function create_if_block(ctx) {
 	let div1;
 	let div0;
 	let div0_style_value;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			div1 = element("div");
+			div0 = element("div");
+			attr(div0, "class", "icon svelte-1gam1w3");
+			attr(div0, "style", div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon})`);
+			attr(div1, "class", "icon-wrap svelte-1gam1w3");
+		},
+		m(target, anchor) {
+			insert(target, div1, anchor);
+			append(div1, div0);
+
+			if (!mounted) {
+				dispose = listen(div1, "click", /*click_handler*/ ctx[5]);
+				mounted = true;
+			}
+		},
+		p(ctx, dirty) {
+			if (dirty & /*itemLabel*/ 1 && div0_style_value !== (div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon})`)) {
+				attr(div0, "style", div0_style_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div1);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div3;
+	let div1;
 	let t0;
-	let div2;
+	let div0;
 	let span0;
-	let t1_value = (/*itemLabel*/ ctx[0].code ?? /*itemLabel*/ ctx[0].id) + "";
+	let t1_value = (/*itemLabel*/ ctx[0].code || /*itemLabel*/ ctx[0].id) + "";
 	let t1;
 	let t2;
 	let span1;
 	let t3_value = /*itemLabel*/ ctx[0].name + "";
 	let t3;
-	let div3_class_value;
+	let div1_class_value;
 	let t4;
-	let div4;
-	let div4_class_value;
-	let div5_class_value;
+	let div2;
+	let div2_class_value;
+	let div3_class_value;
 	let mounted;
 	let dispose;
+	let if_block = /*itemLabel*/ ctx[0].icon && create_if_block(ctx);
 
 	return {
 		c() {
-			div5 = element("div");
 			div3 = element("div");
 			div1 = element("div");
-			div0 = element("div");
+			if (if_block) if_block.c();
 			t0 = space();
-			div2 = element("div");
+			div0 = element("div");
 			span0 = element("span");
 			t1 = text(t1_value);
 			t2 = space();
 			span1 = element("span");
 			t3 = text(t3_value);
 			t4 = space();
-			div4 = element("div");
-			attr(div0, "class", "icon svelte-1u8wokx");
-			attr(div0, "style", div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon ?? defaultIcon})`);
-			attr(div1, "class", "icon-wrap svelte-1u8wokx");
-			attr(span0, "class", "item-model svelte-1u8wokx");
-			attr(span1, "class", "item-name svelte-1u8wokx");
-			attr(div2, "class", "item-label-text svelte-1u8wokx");
-			attr(div3, "class", div3_class_value = "" + (null_to_empty(classNames("item-label-item__text-wrap", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-1u8wokx"));
-			set_style(div3, "bottom", `${/*itemLabel*/ ctx[0].strokeLength}px`);
-			attr(div4, "class", div4_class_value = "" + (null_to_empty(classNames("item-label-item__bar", { anchor: /*anchorEnabled*/ ctx[1] })) + " svelte-1u8wokx"));
-			set_style(div4, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
-			attr(div5, "class", div5_class_value = "" + (null_to_empty(classNames("item-label-item", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-1u8wokx"));
-			set_style(div5, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
-			set_style(div5, "transform", /*itemLabel*/ ctx[0].transform, false);
+			div2 = element("div");
+			attr(span0, "class", "item-model svelte-1gam1w3");
+			attr(span1, "class", "item-name svelte-1gam1w3");
+			attr(div0, "class", "item-label-text svelte-1gam1w3");
+			attr(div1, "class", div1_class_value = "" + (null_to_empty(classNames("item-label-item__text-wrap")) + " svelte-1gam1w3"));
+			set_style(div1, "bottom", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+			attr(div2, "class", div2_class_value = "" + (null_to_empty(classNames("item-label-item__bar", { anchor: /*anchorEnabled*/ ctx[1] })) + " svelte-1gam1w3"));
+			set_style(div2, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+			attr(div3, "class", div3_class_value = "" + (null_to_empty(classNames("item-label-item", { fold: /*itemLabel*/ ctx[0].isFold })) + " svelte-1gam1w3"));
+			set_style(div3, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
+			set_style(div3, "transform", /*itemLabel*/ ctx[0].transform, false);
 		},
 		m(target, anchor) {
-			insert(target, div5, anchor);
-			append(div5, div3);
+			insert(target, div3, anchor);
 			append(div3, div1);
+			if (if_block) if_block.m(div1, null);
+			append(div1, t0);
 			append(div1, div0);
-			append(div3, t0);
-			append(div3, div2);
-			append(div2, span0);
+			append(div0, span0);
 			append(span0, t1);
-			append(div2, t2);
-			append(div2, span1);
+			append(div0, t2);
+			append(div0, span1);
 			append(span1, t3);
-			append(div5, t4);
-			append(div5, div4);
+			append(div3, t4);
+			append(div3, div2);
 
 			if (!mounted) {
-				dispose = listen(div3, "click", /*onClick*/ ctx[2]);
+				dispose = listen(div1, "click", /*onClick*/ ctx[3]);
 				mounted = true;
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*itemLabel*/ 1 && div0_style_value !== (div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon ?? defaultIcon})`)) {
-				attr(div0, "style", div0_style_value);
+			if (/*itemLabel*/ ctx[0].icon) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					if_block.m(div1, t0);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
 			}
 
-			if (dirty & /*itemLabel*/ 1 && t1_value !== (t1_value = (/*itemLabel*/ ctx[0].code ?? /*itemLabel*/ ctx[0].id) + "")) set_data(t1, t1_value);
+			if (dirty & /*itemLabel*/ 1 && t1_value !== (t1_value = (/*itemLabel*/ ctx[0].code || /*itemLabel*/ ctx[0].id) + "")) set_data(t1, t1_value);
 			if (dirty & /*itemLabel*/ 1 && t3_value !== (t3_value = /*itemLabel*/ ctx[0].name + "")) set_data(t3, t3_value);
 
-			if (dirty & /*itemLabel*/ 1 && div3_class_value !== (div3_class_value = "" + (null_to_empty(classNames("item-label-item__text-wrap", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-1u8wokx"))) {
-				attr(div3, "class", div3_class_value);
-			}
-
 			if (dirty & /*itemLabel*/ 1) {
-				set_style(div3, "bottom", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+				set_style(div1, "bottom", `${/*itemLabel*/ ctx[0].strokeLength}px`);
 			}
 
-			if (dirty & /*anchorEnabled*/ 2 && div4_class_value !== (div4_class_value = "" + (null_to_empty(classNames("item-label-item__bar", { anchor: /*anchorEnabled*/ ctx[1] })) + " svelte-1u8wokx"))) {
-				attr(div4, "class", div4_class_value);
+			if (dirty & /*anchorEnabled*/ 2 && div2_class_value !== (div2_class_value = "" + (null_to_empty(classNames("item-label-item__bar", { anchor: /*anchorEnabled*/ ctx[1] })) + " svelte-1gam1w3"))) {
+				attr(div2, "class", div2_class_value);
 			}
 
 			if (dirty & /*itemLabel*/ 1) {
-				set_style(div4, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+				set_style(div2, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
 			}
 
-			if (dirty & /*itemLabel*/ 1 && div5_class_value !== (div5_class_value = "" + (null_to_empty(classNames("item-label-item", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-1u8wokx"))) {
-				attr(div5, "class", div5_class_value);
+			if (dirty & /*itemLabel*/ 1 && div3_class_value !== (div3_class_value = "" + (null_to_empty(classNames("item-label-item", { fold: /*itemLabel*/ ctx[0].isFold })) + " svelte-1gam1w3"))) {
+				attr(div3, "class", div3_class_value);
 			}
 
 			if (dirty & /*itemLabel*/ 1) {
-				set_style(div5, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
+				set_style(div3, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
 			}
 
 			if (dirty & /*itemLabel*/ 1) {
-				set_style(div5, "transform", /*itemLabel*/ ctx[0].transform, false);
+				set_style(div3, "transform", /*itemLabel*/ ctx[0].transform, false);
 			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(div5);
+			if (detaching) detach(div3);
+			if (if_block) if_block.d();
 			mounted = false;
 			dispose();
 		}
 	};
 }
 
-const defaultIcon = '//vrlab-public.ljcdn.com/common/file/web/c8591aaa-e62b-4e31-8fed-671483ace37f.svg\n';
-
 function instance($$self, $$props, $$invalidate) {
 	let { itemLabel } = $$props;
 	let { hooks } = $$props;
 	let { anchorEnabled } = $$props;
+	let { onIconClick } = $$props;
 
+	// const defaultIcon = '//vrlab-public.ljcdn.com/common/file/web/c8591aaa-e62b-4e31-8fed-671483ace37f.svg\n'
 	function onClick() {
 		hooks.emit('onLabelClick', itemLabel);
 	}
 
+	const click_handler = e => onIconClick(itemLabel);
+
 	$$self.$$set = $$props => {
 		if ('itemLabel' in $$props) $$invalidate(0, itemLabel = $$props.itemLabel);
-		if ('hooks' in $$props) $$invalidate(3, hooks = $$props.hooks);
+		if ('hooks' in $$props) $$invalidate(4, hooks = $$props.hooks);
 		if ('anchorEnabled' in $$props) $$invalidate(1, anchorEnabled = $$props.anchorEnabled);
+		if ('onIconClick' in $$props) $$invalidate(2, onIconClick = $$props.onIconClick);
 	};
 
-	return [itemLabel, anchorEnabled, onClick, hooks];
+	return [itemLabel, anchorEnabled, onIconClick, onClick, hooks, click_handler];
 }
 
 class Component extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance, create_fragment, safe_not_equal, { itemLabel: 0, hooks: 3, anchorEnabled: 1 }, add_css);
+
+		init(
+			this,
+			options,
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				itemLabel: 0,
+				hooks: 4,
+				anchorEnabled: 1,
+				onIconClick: 2
+			},
+			add_css
+		);
 	}
 }
 

package/libs/ItemLabelPlugin/Plugin.js

@@ -2,8 +2,9 @@ import { Subscribe } from "@realsee/five";
 import ItemLabelComponent from './ItemLabelComponent';
 import { ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE } from "./typings";
 import { parseItemLabelPluginData } from "./utils/parseData";
+const defaultMaxVisibleDistance = undefined;
 export const Plugin = (five, params) => {
-    var _a, _b;
+    var _a, _b, _c;
     const pluginState = {
         container: document.createElement('div'),
         data: null,
@@ -15,6 +16,7 @@ export const Plugin = (five, params) => {
         hooks: new Subscribe(),
         modelOcclusionEnable: (_a = params === null || params === void 0 ? void 0 : params.modelOcclusionEnable) !== null && _a !== void 0 ? _a : true,
         displayStrategyType: (_b = params === null || params === void 0 ? void 0 : params.displayStrategyType) !== null && _b !== void 0 ? _b : ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.SMALL,
+        maxVisibleDistance: (_c = params === null || params === void 0 ? void 0 : params.maxVisibleDistance) !== null && _c !== void 0 ? _c : defaultMaxVisibleDistance,
     };
     pluginState.container.setAttribute('class', 'item-label-plugin-container');
     pluginState.container.style.cssText = `
@@ -74,7 +76,8 @@ export const Plugin = (five, params) => {
                     itemLabels: pluginState.itemLabels,
                     wrapper: pluginState.wrapper,
                     hooks: pluginState.hooks,
-                    displayStrategyType: pluginState.displayStrategyType
+                    displayStrategyType: pluginState.displayStrategyType,
+                    maxVisibleDistance: pluginState.maxVisibleDistance
                 }
             });
         }
@@ -87,12 +90,12 @@ export const Plugin = (five, params) => {
     };
     // 添加 five 监听
     const addListener4Five = () => {
-        five.on('modeChange', onFiveModeChange);
+        // five.on('modeChange', onFiveModeChange)
         five.once('dispose', dispose);
     };
     // 取消 five 监听
     const removeListener4Five = () => {
-        five.off('modeChange', onFiveModeChange);
+        // five.off('modeChange', onFiveModeChange)
     };
     const onFiveModeChange = (mode) => {
         if (!pluginState.enabled)

package/libs/ItemLabelPlugin/typings.d.ts

@@ -8,6 +8,7 @@ export declare enum ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE {
     EXTRA_LARGE = "x-large"
 }
 export interface ItemLabelPluginParametersType {
+    maxVisibleDistance?: number;
     modelOcclusionEnable?: boolean;
     displayStrategyType?: Partial<ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE>;
 }
@@ -30,6 +31,9 @@ export interface ItemLabel {
     modelPosition: [number, number, number];
     type?: string[];
     icon?: string;
+    observerIndex?: number | undefined;
+    visible?: boolean;
+    isFold?: boolean;
     [key: string]: any;
 }
 export interface ItemLabelPluginExportReturnsType {
@@ -51,4 +55,5 @@ export interface ItemLabelPluginState {
     hooks: Subscribe<PluginEvent>;
     modelOcclusionEnable: boolean;
     displayStrategyType: Partial<ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE>;
+    maxVisibleDistance: number | undefined;
 }

package/libs/ItemLabelPlugin/utils/getLabelTransform.d.ts

@@ -0,0 +1 @@
+export declare const getLabelTransform: (cssOffset: [number, number]) => string;

package/libs/ItemLabelPlugin/utils/getLabelTransform.js

@@ -0,0 +1,3 @@
+export const getLabelTransform = (cssOffset) => {
+    return `translate(${cssOffset[0]}px, ${cssOffset[1]}px)`;
+};

package/libs/ItemLabelPlugin/utils/getStrokeLength.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 展示策略
+ * */
+import { ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE } from "../typings";
+export declare const getStrokeLength: (itemSpaceHeight: number, type: ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE) => number;

package/libs/ItemLabelPlugin/utils/getStrokeLength.js

@@ -0,0 +1,16 @@
+/**
+ * 展示策略
+ * */
+import { ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE } from "../typings";
+export const getStrokeLength = (itemSpaceHeight, type) => {
+    switch (type) {
+        case ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.SMALL:
+            return Math.ceil(-27.78 * itemSpaceHeight + 85);
+        case ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.MIDLLE:
+            return Math.ceil(-38.9 * itemSpaceHeight + 130);
+        case ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.LARGE:
+            return Math.ceil(-44.44 * itemSpaceHeight + 140);
+        case ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.EXTRA_LARGE:
+            return Math.ceil(-92.59 * itemSpaceHeight + 300);
+    }
+};

package/libs/ItemLabelPlugin/utils/isImpacted.d.ts

@@ -0,0 +1,6 @@
+import * as THREE from 'three';
+import type { Five } from "@realsee/five";
+/**
+ * 碰撞检测可见性
+ * */
+export declare const isImpacted: (five: Five, sourceVector: THREE.Vector3, targetVector: THREE.Vector3, distance: number) => boolean;

package/libs/ItemLabelPlugin/utils/isImpacted.js

@@ -0,0 +1,13 @@
+import * as THREE from 'three';
+const { Raycaster, Vector3 } = THREE;
+/**
+ * 碰撞检测可见性
+ * */
+export const isImpacted = (five, sourceVector, targetVector, distance) => {
+    const direction = sourceVector.clone().sub(targetVector).normalize();
+    const raycaster = new Raycaster();
+    raycaster.set(targetVector, direction);
+    const [intersection] = five.model.intersectRaycaster(raycaster);
+    return intersection && intersection.distance + 0.01 < distance;
+    // return intersection && distance <= intersection.distance + 0.1
+};

package/libs/ItemLabelPlugin/utils/parseData.js

@@ -1,4 +1,4 @@
 /** @description 转成内部所需数据 */
 export function parseItemLabelPluginData(data) {
-    return data.item_labels.map(label => (Object.assign({ modelPosition: [label.position[0], label.position[1], label.position[2]] }, label)));
+    return data.item_labels.map(label => (Object.assign({ modelPosition: [label.position[0], label.position[1], label.position[2]], observerIndex: undefined }, label)));
 }

package/libs/ItemLabelPlugin/utils/transform2RenderData.d.ts

@@ -0,0 +1,3 @@
+import type { ItemLabel } from '../typings';
+/** @description 转成内部所需数据 */
+export declare function transform2RenderData(data: any): ItemLabel[];

package/libs/ItemLabelPlugin/utils/transform2RenderData.js

@@ -0,0 +1,4 @@
+/** @description 转成内部所需数据 */
+export function transform2RenderData(data) {
+    return data.map(label => (Object.assign({ observerIndex: undefined, visible: false, isFold: false }, label)));
+}

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

@@ -3,9 +3,10 @@ import type Magnifier from '../Modules/Magnifier';
 import type FiveHelper from '../Modules/FiveHelper';
 import type { Group } from 'three';
 import type { Model } from '../Model';
-import type { PluginEvent } from '../typings/event.type';
+import type { PanoMeasurePluginEvent } from '../typings/event.type';
 import type { UserDistanceItem } from '../utils/distanceDom';
 import type { Five, Intersection, IntersectMeshInterface, Subscribe } from '@realsee/five';
+import type { OpenParameter } from '../typings/data';
 export interface IControllerParams {
     five: Five;
     group: Group;
@@ -14,7 +15,8 @@ export interface IControllerParams {
     container: Element;
     magnifier: Magnifier;
     fiveHelper: FiveHelper;
-    hook: Subscribe<PluginEvent>;
+    openParams: OpenParameter;
+    hook: Subscribe<PanoMeasurePluginEvent>;
     userDistanceItemCreator?: () => UserDistanceItem;
 }
 export default abstract class BaseController {
@@ -22,6 +24,7 @@ export default abstract class BaseController {
     protected group: Group;
     protected model: Model;
     protected disposed: boolean;
+    protected isMobile: boolean;
     protected mouseGroup: Group;
     protected container: Element;
     protected fiveHelper: FiveHelper;

package/libs/PanoMeasurePlugin/Controller/BaseController.js

@@ -1,6 +1,7 @@
 import { preventDefault } from '../utils/ironbox';
 export default class BaseController {
     constructor(params) {
+        var _a, _b;
         Object.defineProperty(this, "five", {
             enumerable: true,
             configurable: true,
@@ -25,6 +26,12 @@ export default class BaseController {
             writable: true,
             value: false
         });
+        Object.defineProperty(this, "isMobile", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "mouseGroup", {
             enumerable: true,
             configurable: true,
@@ -76,6 +83,7 @@ export default class BaseController {
         this.magnifier = params.magnifier;
         this.container = params.container;
         this.fiveHelper = params.fiveHelper;
+        this.isMobile = (_b = (_a = params.openParams) === null || _a === void 0 ? void 0 : _a.isMobile) !== null && _b !== void 0 ? _b : false;
         this.userDistanceItemCreator = params.userDistanceItemCreator;
         // ==================== Groups ====================
         this.group = params.group;
@@ -113,7 +121,7 @@ export default class BaseController {
     }
     dispose() {
         this.disposed = true;
-        this.magnifier.dispose();
+        this.magnifier.remove();
         this.model.lines.forEach((line) => this.removeLine(line));
         const fiveElement = this.five.getElement();
         if (fiveElement) {

package/libs/PanoMeasurePlugin/Controller/EditController.js

@@ -80,7 +80,7 @@ export default class EditController extends BaseController {
                 const position = this.updateMouseGroup(intersection, mesh).position;
                 (_a = this.pressPoint) === null || _a === void 0 ? void 0 : _a.position.copy(position);
                 this.updateDashed();
-                requestAnimationFrame(() => this.magnifier.updateWithPoint(this.mouseGroup.position));
+                requestAnimationFrame(() => this.magnifier.renderWithPoint(this.mouseGroup.position));
                 this.five.needsRender = true;
             }, 20)
         });
@@ -123,7 +123,7 @@ export default class EditController extends BaseController {
                 // ============ revoke dashed ============
                 this.updateDashed();
                 // ============ revoke magnifier ============
-                this.magnifier.dispose();
+                this.magnifier.remove();
                 this.five.needsRender = true;
             }
         });
@@ -132,7 +132,7 @@ export default class EditController extends BaseController {
             configurable: true,
             writable: true,
             value: () => {
-                this.magnifier.dispose();
+                this.magnifier.remove();
                 this.group.remove(this.mouseGroup);
                 this.hasAppendMouseGroup = false;
                 if (this.lastPoint) {
@@ -220,7 +220,7 @@ export default class EditController extends BaseController {
                 }
                 this.pressPoint = undefined;
                 this.hasAppendMouseGroup = false;
-                this.magnifier.dispose();
+                this.magnifier.remove();
                 this.group.remove(this.mouseGroup);
                 this.updateDashed();
                 this.five.needsRender = true;

package/libs/PanoMeasurePlugin/Controller/MixedController.d.ts

@@ -0,0 +1,44 @@
+import type { LineJson } from '../typings/data';
+import { Model } from '../Model';
+import Line from '../Model/line';
+import BaseController, { IControllerParams } from './BaseController';
+export declare type State = 'watching' | 'editing';
+export interface EditEvent {
+    editedLineChange: (lines: LineJson[]) => void;
+}
+export default class MixedController extends BaseController {
+    state: State;
+    model: Model;
+    private hasAppendDashed;
+    private fiveElement?;
+    private mobileStartPoint;
+    private mobileNowPoint;
+    private highlightedLines;
+    private deleteDom;
+    /** 圆环点到上一个端点连接的虚线 */
+    private dashed;
+    constructor(params: IControllerParams);
+    dispose(): void;
+    highlightLine(line: Line): void;
+    clearHighlightLines(): void;
+    getEditingLines(): Line[];
+    /** 编辑线条发生改变时通知外部 */
+    private onLineChanged;
+    private onWantsTapGesture;
+    /** 编辑时取消走点,watch时可以走 */
+    private onWantsToMoveToPano;
+    /** 移动全景时更新 distanceItem 在屏幕上的位置 */
+    private onCameraUpdate;
+    /** mobile态时更新虚线 */
+    private updateMobileDashed;
+    /** mobile态时更新放大镜 */
+    private updateMagnifier;
+    private onGetStartPoint;
+    private onGetEndPoint;
+    private onNowPointChange;
+    private onWillChangeState;
+    private chooseLine;
+    private highlightLines;
+    private deleteDomClickCallback;
+    private cancelDeleteClickCallback;
+}