@realsee/dnalogel 2.0.0-alpha.38 → 2.0.0-alpha.40

package/dist/ItemLabelPlugin/index.js

@@ -304,18 +304,18 @@ function add_css(target) {
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[30] = list[i];
+	child_ctx[31] = list[i];
 	return child_ctx;
 }
 
-// (229:2) {#if itemLabelItem.visible}
+// (234:2) {#if itemLabelItem.visible}
 function create_if_block(ctx) {
 	let itemlabelitem;
 	let current;
 
 	itemlabelitem = new ItemLabelItem({
 			props: {
-				itemLabel: /*itemLabelItem*/ ctx[30],
+				itemLabel: /*itemLabelItem*/ ctx[31],
 				hooks: /*hooks*/ ctx[0],
 				anchorEnabled: /*anchorEnabled*/ ctx[2],
 				onIconClick: /*onIconClick*/ ctx[6]
@@ -332,7 +332,7 @@ function create_if_block(ctx) {
 		},
 		p(ctx, dirty) {
 			const itemlabelitem_changes = {};
-			if (dirty[0] & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[30];
+			if (dirty[0] & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[31];
 			if (dirty[0] & /*hooks*/ 1) itemlabelitem_changes.hooks = /*hooks*/ ctx[0];
 			if (dirty[0] & /*anchorEnabled*/ 4) itemlabelitem_changes.anchorEnabled = /*anchorEnabled*/ ctx[2];
 			itemlabelitem.$set(itemlabelitem_changes);
@@ -352,12 +352,12 @@ function create_if_block(ctx) {
 	};
 }
 
-// (228:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+// (233:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
 function create_each_block(key_1, ctx) {
 	let first;
 	let if_block_anchor;
 	let current;
-	let if_block = /*itemLabelItem*/ ctx[30].visible && create_if_block(ctx);
+	let if_block = /*itemLabelItem*/ ctx[31].visible && create_if_block(ctx);
 
 	return {
 		key: key_1,
@@ -377,7 +377,7 @@ function create_each_block(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (/*itemLabelItem*/ ctx[30].visible) {
+			if (/*itemLabelItem*/ ctx[31].visible) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
@@ -424,7 +424,7 @@ function create_fragment(ctx) {
 	let div_resize_listener;
 	let current;
 	let each_value = /*renderItemLabels*/ ctx[1];
-	const get_key = ctx => /*itemLabelItem*/ ctx[30].id;
+	const get_key = ctx => /*itemLabelItem*/ ctx[31].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context(ctx, each_value, i);
@@ -441,7 +441,7 @@ function create_fragment(ctx) {
 			}
 
 			internal.attr(div, "class", "item-labels-container svelte-gk8s47");
-			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[12].call(div));
+			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[13].call(div));
 			internal.set_style(div, "opacity", /*itemsVisible*/ ctx[5] ? 1 : 0, false);
 		},
 		m(target, anchor) {
@@ -451,7 +451,7 @@ function create_fragment(ctx) {
 				each_blocks[i].m(div, null);
 			}
 
-			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[12].bind(div));
+			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[13].bind(div));
 			current = true;
 		},
 		p(ctx, dirty) {
@@ -499,6 +499,7 @@ function instance($$self, $$props, $$invalidate) {
 	const { Raycaster, Vector3 } = THREE__namespace;
 	let { five: five$1 } = $$props;
 	let { modelOcclusionEnable } = $$props;
+	let { onlyVisibleInPanorama } = $$props;
 	let { itemLabels } = $$props;
 	let { hooks } = $$props;
 	let { displayStrategyType } = $$props;
@@ -550,7 +551,10 @@ function instance($$self, $$props, $$invalidate) {
 		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);
 	};
 
@@ -573,6 +577,11 @@ function instance($$self, $$props, $$invalidate) {
 	const getFormatedItemLabels = (five$1, labels) => {
 		// 计算位置 & 可见性
 		const newLabels = labels.map(label => {
+			// 不在绑定点位则直接不可见
+			if (five$1.state.panoIndex !== label.panoIndex) {
+				return Object.assign(Object.assign({}, label), { visible: false });
+			}
+
 			const cssOffset = getLabelCssOffset(five$1, label);
 			label.name.length * basicWidth;
 			const strokeLength = getStrokeLength(label.modelPosition[1], displayStrategyType);
@@ -625,16 +634,6 @@ function instance($$self, $$props, $$invalidate) {
 		handleCameraUpdate();
 	};
 
-	const onFiveModeChange = mode => {
-		$$invalidate(5, itemsVisible = false);
-
-		five$1.once('initAnimationEnded', (panoIndex, pose, userAction) => {
-			$$invalidate(2, anchorEnabled = mode === five.Five.Mode.Panorama);
-			$$invalidate(5, itemsVisible = true);
-			if (!userAction) return; else onItemLabelUpdate();
-		});
-	};
-
 	const handleCameraUpdate = debounce(
 		() => {
 			$$invalidate(5, itemsVisible = true);
@@ -692,11 +691,10 @@ function instance($$self, $$props, $$invalidate) {
 	const onIconClick = itemLabel => {
 		if (five$1.state.mode === five.Five.Mode.Panorama) return;
 		const observers = five$1.work.observers;
-		const fromPositionVector = new Vector3(itemLabel.position[0], itemLabel.position[1], itemLabel.position[2]);
+		const fromPositionVector = new Vector3().fromArray(itemLabel.position);
 		const observer = getNearObserverPano(fromPositionVector, observers);
 
 		if (observer) {
-			console.log('--has observer--');
 			itemLabel.observerIndex = observer.panoIndex;
 		}
 
@@ -739,12 +737,12 @@ function instance($$self, $$props, $$invalidate) {
 		onItemLabelUpdate();
 		addResizeListener();
 		five$1.on('cameraUpdate', handleCameraUpdateCallback);
-		five$1.on('modeChange', onFiveModeChange);
-	});
+	}); // five.on('modeChange', onFiveModeChange)
 
 	svelte.onDestroy(() => {
 		five$1.off('cameraUpdate', handleCameraUpdateCallback);
-		five$1.off('modeChange', onFiveModeChange);
+
+		// five.off('modeChange', onFiveModeChange)
 		window.removeEventListener('resize', onResize, false);
 	});
 
@@ -758,10 +756,11 @@ function instance($$self, $$props, $$invalidate) {
 	$$self.$$set = $$props => {
 		if ('five' in $$props) $$invalidate(7, five$1 = $$props.five);
 		if ('modelOcclusionEnable' in $$props) $$invalidate(8, modelOcclusionEnable = $$props.modelOcclusionEnable);
-		if ('itemLabels' in $$props) $$invalidate(9, itemLabels = $$props.itemLabels);
+		if ('onlyVisibleInPanorama' in $$props) $$invalidate(9, onlyVisibleInPanorama = $$props.onlyVisibleInPanorama);
+		if ('itemLabels' in $$props) $$invalidate(10, itemLabels = $$props.itemLabels);
 		if ('hooks' in $$props) $$invalidate(0, hooks = $$props.hooks);
-		if ('displayStrategyType' in $$props) $$invalidate(10, displayStrategyType = $$props.displayStrategyType);
-		if ('maxVisibleDistance' in $$props) $$invalidate(11, maxVisibleDistance = $$props.maxVisibleDistance);
+		if ('displayStrategyType' in $$props) $$invalidate(11, displayStrategyType = $$props.displayStrategyType);
+		if ('maxVisibleDistance' in $$props) $$invalidate(12, maxVisibleDistance = $$props.maxVisibleDistance);
 	};
 
 	return [
@@ -774,6 +773,7 @@ function instance($$self, $$props, $$invalidate) {
 		onIconClick,
 		five$1,
 		modelOcclusionEnable,
+		onlyVisibleInPanorama,
 		itemLabels,
 		displayStrategyType,
 		maxVisibleDistance,
@@ -794,10 +794,11 @@ class ItemLabelComponent extends internal.SvelteComponent {
 			{
 				five: 7,
 				modelOcclusionEnable: 8,
-				itemLabels: 9,
+				onlyVisibleInPanorama: 9,
+				itemLabels: 10,
 				hooks: 0,
-				displayStrategyType: 10,
-				maxVisibleDistance: 11
+				displayStrategyType: 11,
+				maxVisibleDistance: 12
 			},
 			add_css,
 			[-1, -1]
@@ -807,12 +808,12 @@ class ItemLabelComponent extends internal.SvelteComponent {
 
 /** @description 转成内部所需数据 */
 function parseItemLabelPluginData(data) {
-    return data.item_labels.map(label => (Object.assign({ modelPosition: [label.position[0], label.position[1], label.position[2]], observerIndex: undefined }, label)));
+    return data.item_labels.map(label => (Object.assign(Object.assign({}, label), { modelPosition: [label.position[0], label.position[1], label.position[2]], observerIndex: undefined })));
 }
 
 const defaultMaxVisibleDistance = undefined;
 const Plugin = (five$1, params) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const pluginState = {
         container: document.createElement('div'),
         data: null,
@@ -823,8 +824,9 @@ const Plugin = (five$1, params) => {
         app: undefined,
         hooks: new five.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 : exports.ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.SMALL,
-        maxVisibleDistance: (_c = params === null || params === void 0 ? void 0 : params.maxVisibleDistance) !== null && _c !== void 0 ? _c : defaultMaxVisibleDistance,
+        onlyVisibleInPanorama: (_b = params === null || params === void 0 ? void 0 : params.onlyVisibleInPanorama) !== null && _b !== void 0 ? _b : true,
+        displayStrategyType: (_c = params === null || params === void 0 ? void 0 : params.displayStrategyType) !== null && _c !== void 0 ? _c : exports.ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.SMALL,
+        maxVisibleDistance: (_d = params === null || params === void 0 ? void 0 : params.maxVisibleDistance) !== null && _d !== void 0 ? _d : defaultMaxVisibleDistance,
     };
     pluginState.container.setAttribute('class', 'item-label-plugin-container');
     pluginState.container.style.cssText = `
@@ -861,6 +863,7 @@ const Plugin = (five$1, params) => {
         return true;
     };
     const dispose = () => {
+        removeListener4Five();
         pluginState.container.remove();
     };
     const render = () => {
@@ -880,6 +883,7 @@ const Plugin = (five$1, params) => {
                 props: {
                     five: five$1,
                     modelOcclusionEnable: pluginState.modelOcclusionEnable,
+                    onlyVisibleInPanorama: pluginState.onlyVisibleInPanorama,
                     itemLabels: pluginState.itemLabels,
                     wrapper: pluginState.wrapper,
                     hooks: pluginState.hooks,
@@ -897,9 +901,27 @@ const Plugin = (five$1, params) => {
     };
     // 添加 five 监听
     const addListener4Five = () => {
-        // five.on('modeChange', onFiveModeChange)
+        five$1.on('modeChange', onFiveModeChange);
         five$1.once('dispose', dispose);
     };
+    // 取消 five 监听
+    const removeListener4Five = () => {
+        five$1.off('modeChange', onFiveModeChange);
+    };
+    const onFiveModeChange = (mode) => {
+        // if (!pluginState.enabled) return
+        if (mode !== five.Five.Mode.Panorama) {
+            pluginState.fiveModeEnabled = false;
+            disable();
+            return;
+        }
+        // pluginState.fiveModeEnabled = false
+        // render()
+        five$1.once('initAnimationEnded', () => {
+            pluginState.fiveModeEnabled = true;
+            enable();
+        });
+    };
     addListener4Five();
     return {
         appendTo,

package/dist/ItemLabelPlugin/typings.d.ts

@@ -10,10 +10,12 @@ export declare enum ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE {
 export interface ItemLabelPluginParametersType {
     maxVisibleDistance?: number;
     modelOcclusionEnable?: boolean;
+    onlyVisibleInPanorama?: boolean;
     displayStrategyType?: Partial<ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE>;
 }
 export interface ItemLabelPluginData {
     item_labels: Readonly<{
+        panoIndex: number;
         id: string;
         code: string;
         name: string;
@@ -24,6 +26,7 @@ export interface ItemLabelPluginData {
     }>[];
 }
 export interface ItemLabel {
+    panoIndex: number;
     id: string;
     code: string;
     name: string;
@@ -54,6 +57,7 @@ export interface ItemLabelPluginState {
     app?: ItemLabelComponent | undefined;
     hooks: Subscribe<PluginEvent>;
     modelOcclusionEnable: boolean;
+    onlyVisibleInPanorama: boolean;
     displayStrategyType: Partial<ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE>;
     maxVisibleDistance: number | undefined;
 }

package/dist/index.d.ts

@@ -14,3 +14,4 @@ export * from './PanoSpatialTagPlugin';
 export * from './ModelItemLabelPlugin';
 export * from './ModelTVVideoPlugin';
 export * from './ItemLabelPlugin';
+export declare const DnalogelVersion = "2.0.0-alpha.38";

package/dist/index.es.js

@@ -15573,18 +15573,18 @@ function add_css(target) {
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[30] = list[i];
+	child_ctx[31] = list[i];
 	return child_ctx;
 }
 
-// (229:2) {#if itemLabelItem.visible}
+// (234:2) {#if itemLabelItem.visible}
 function create_if_block(ctx) {
 	let itemlabelitem;
 	let current;
 
 	itemlabelitem = new ItemLabelItem({
 			props: {
-				itemLabel: /*itemLabelItem*/ ctx[30],
+				itemLabel: /*itemLabelItem*/ ctx[31],
 				hooks: /*hooks*/ ctx[0],
 				anchorEnabled: /*anchorEnabled*/ ctx[2],
 				onIconClick: /*onIconClick*/ ctx[6]
@@ -15601,7 +15601,7 @@ function create_if_block(ctx) {
 		},
 		p(ctx, dirty) {
 			const itemlabelitem_changes = {};
-			if (dirty[0] & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[30];
+			if (dirty[0] & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[31];
 			if (dirty[0] & /*hooks*/ 1) itemlabelitem_changes.hooks = /*hooks*/ ctx[0];
 			if (dirty[0] & /*anchorEnabled*/ 4) itemlabelitem_changes.anchorEnabled = /*anchorEnabled*/ ctx[2];
 			itemlabelitem.$set(itemlabelitem_changes);
@@ -15621,12 +15621,12 @@ function create_if_block(ctx) {
 	};
 }
 
-// (228:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+// (233:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
 function create_each_block(key_1, ctx) {
 	let first;
 	let if_block_anchor;
 	let current;
-	let if_block = /*itemLabelItem*/ ctx[30].visible && create_if_block(ctx);
+	let if_block = /*itemLabelItem*/ ctx[31].visible && create_if_block(ctx);
 
 	return {
 		key: key_1,
@@ -15646,7 +15646,7 @@ function create_each_block(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (/*itemLabelItem*/ ctx[30].visible) {
+			if (/*itemLabelItem*/ ctx[31].visible) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
@@ -15693,7 +15693,7 @@ function create_fragment(ctx) {
 	let div_resize_listener;
 	let current;
 	let each_value = /*renderItemLabels*/ ctx[1];
-	const get_key = ctx => /*itemLabelItem*/ ctx[30].id;
+	const get_key = ctx => /*itemLabelItem*/ ctx[31].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context(ctx, each_value, i);
@@ -15710,7 +15710,7 @@ function create_fragment(ctx) {
 			}
 
 			attr(div, "class", "item-labels-container svelte-gk8s47");
-			add_render_callback(() => /*div_elementresize_handler*/ ctx[12].call(div));
+			add_render_callback(() => /*div_elementresize_handler*/ ctx[13].call(div));
 			set_style(div, "opacity", /*itemsVisible*/ ctx[5] ? 1 : 0, false);
 		},
 		m(target, anchor) {
@@ -15720,7 +15720,7 @@ function create_fragment(ctx) {
 				each_blocks[i].m(div, null);
 			}
 
-			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[12].bind(div));
+			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[13].bind(div));
 			current = true;
 		},
 		p(ctx, dirty) {
@@ -15768,6 +15768,7 @@ function instance($$self, $$props, $$invalidate) {
 	const { Raycaster, Vector3 } = THREE;
 	let { five } = $$props;
 	let { modelOcclusionEnable } = $$props;
+	let { onlyVisibleInPanorama } = $$props;
 	let { itemLabels } = $$props;
 	let { hooks } = $$props;
 	let { displayStrategyType } = $$props;
@@ -15819,7 +15820,10 @@ function instance($$self, $$props, $$invalidate) {
 		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);
 	};
 
@@ -15842,6 +15846,11 @@ function instance($$self, $$props, $$invalidate) {
 	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);
 			label.name.length * basicWidth;
 			const strokeLength = getStrokeLength(label.modelPosition[1], displayStrategyType);
@@ -15894,16 +15903,6 @@ function instance($$self, $$props, $$invalidate) {
 		handleCameraUpdate();
 	};
 
-	const onFiveModeChange = mode => {
-		$$invalidate(5, itemsVisible = false);
-
-		five.once('initAnimationEnded', (panoIndex, pose, userAction) => {
-			$$invalidate(2, anchorEnabled = mode === Five.Mode.Panorama);
-			$$invalidate(5, itemsVisible = true);
-			if (!userAction) return; else onItemLabelUpdate();
-		});
-	};
-
 	const handleCameraUpdate = debounce(
 		() => {
 			$$invalidate(5, itemsVisible = true);
@@ -15961,11 +15960,10 @@ function instance($$self, $$props, $$invalidate) {
 	const onIconClick = itemLabel => {
 		if (five.state.mode === Five.Mode.Panorama) return;
 		const observers = five.work.observers;
-		const fromPositionVector = new Vector3(itemLabel.position[0], itemLabel.position[1], itemLabel.position[2]);
+		const fromPositionVector = new Vector3().fromArray(itemLabel.position);
 		const observer = getNearObserverPano(fromPositionVector, observers);
 
 		if (observer) {
-			console.log('--has observer--');
 			itemLabel.observerIndex = observer.panoIndex;
 		}
 
@@ -16008,12 +16006,12 @@ function instance($$self, $$props, $$invalidate) {
 		onItemLabelUpdate();
 		addResizeListener();
 		five.on('cameraUpdate', handleCameraUpdateCallback);
-		five.on('modeChange', onFiveModeChange);
-	});
+	}); // five.on('modeChange', onFiveModeChange)
 
 	onDestroy(() => {
 		five.off('cameraUpdate', handleCameraUpdateCallback);
-		five.off('modeChange', onFiveModeChange);
+
+		// five.off('modeChange', onFiveModeChange)
 		window.removeEventListener('resize', onResize, false);
 	});
 
@@ -16027,10 +16025,11 @@ function instance($$self, $$props, $$invalidate) {
 	$$self.$$set = $$props => {
 		if ('five' in $$props) $$invalidate(7, five = $$props.five);
 		if ('modelOcclusionEnable' in $$props) $$invalidate(8, modelOcclusionEnable = $$props.modelOcclusionEnable);
-		if ('itemLabels' in $$props) $$invalidate(9, itemLabels = $$props.itemLabels);
+		if ('onlyVisibleInPanorama' in $$props) $$invalidate(9, onlyVisibleInPanorama = $$props.onlyVisibleInPanorama);
+		if ('itemLabels' in $$props) $$invalidate(10, itemLabels = $$props.itemLabels);
 		if ('hooks' in $$props) $$invalidate(0, hooks = $$props.hooks);
-		if ('displayStrategyType' in $$props) $$invalidate(10, displayStrategyType = $$props.displayStrategyType);
-		if ('maxVisibleDistance' in $$props) $$invalidate(11, maxVisibleDistance = $$props.maxVisibleDistance);
+		if ('displayStrategyType' in $$props) $$invalidate(11, displayStrategyType = $$props.displayStrategyType);
+		if ('maxVisibleDistance' in $$props) $$invalidate(12, maxVisibleDistance = $$props.maxVisibleDistance);
 	};
 
 	return [
@@ -16043,6 +16042,7 @@ function instance($$self, $$props, $$invalidate) {
 		onIconClick,
 		five,
 		modelOcclusionEnable,
+		onlyVisibleInPanorama,
 		itemLabels,
 		displayStrategyType,
 		maxVisibleDistance,
@@ -16063,10 +16063,11 @@ class ItemLabelComponent extends SvelteComponent {
 			{
 				five: 7,
 				modelOcclusionEnable: 8,
-				itemLabels: 9,
+				onlyVisibleInPanorama: 9,
+				itemLabels: 10,
 				hooks: 0,
-				displayStrategyType: 10,
-				maxVisibleDistance: 11
+				displayStrategyType: 11,
+				maxVisibleDistance: 12
 			},
 			add_css,
 			[-1, -1]
@@ -16076,12 +16077,12 @@ class ItemLabelComponent extends SvelteComponent {
 
 /** @description 转成内部所需数据 */
 function parseItemLabelPluginData(data) {
-    return data.item_labels.map(label => (Object.assign({ modelPosition: [label.position[0], label.position[1], label.position[2]], observerIndex: undefined }, label)));
+    return data.item_labels.map(label => (Object.assign(Object.assign({}, label), { modelPosition: [label.position[0], label.position[1], label.position[2]], observerIndex: undefined })));
 }
 
 const defaultMaxVisibleDistance = undefined;
 const Plugin = (five, params) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const pluginState = {
         container: document.createElement('div'),
         data: null,
@@ -16092,8 +16093,9 @@ const Plugin = (five, params) => {
         app: undefined,
         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,
+        onlyVisibleInPanorama: (_b = params === null || params === void 0 ? void 0 : params.onlyVisibleInPanorama) !== null && _b !== void 0 ? _b : true,
+        displayStrategyType: (_c = params === null || params === void 0 ? void 0 : params.displayStrategyType) !== null && _c !== void 0 ? _c : ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.SMALL,
+        maxVisibleDistance: (_d = params === null || params === void 0 ? void 0 : params.maxVisibleDistance) !== null && _d !== void 0 ? _d : defaultMaxVisibleDistance,
     };
     pluginState.container.setAttribute('class', 'item-label-plugin-container');
     pluginState.container.style.cssText = `
@@ -16130,6 +16132,7 @@ const Plugin = (five, params) => {
         return true;
     };
     const dispose = () => {
+        removeListener4Five();
         pluginState.container.remove();
     };
     const render = () => {
@@ -16149,6 +16152,7 @@ const Plugin = (five, params) => {
                 props: {
                     five: five,
                     modelOcclusionEnable: pluginState.modelOcclusionEnable,
+                    onlyVisibleInPanorama: pluginState.onlyVisibleInPanorama,
                     itemLabels: pluginState.itemLabels,
                     wrapper: pluginState.wrapper,
                     hooks: pluginState.hooks,
@@ -16166,9 +16170,27 @@ 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);
+    };
+    const onFiveModeChange = (mode) => {
+        // if (!pluginState.enabled) return
+        if (mode !== Five.Mode.Panorama) {
+            pluginState.fiveModeEnabled = false;
+            disable();
+            return;
+        }
+        // pluginState.fiveModeEnabled = false
+        // render()
+        five.once('initAnimationEnded', () => {
+            pluginState.fiveModeEnabled = true;
+            enable();
+        });
+    };
     addListener4Five();
     return {
         appendTo,
@@ -16185,4 +16207,6 @@ const itemLabelPluginServerParams = {
     version: 0,
 };
 
-export { CSS3DRenderPlugin, CameraMovementEffect, CameraMovementPlugin, DIRECTION, DISPLAY_STRATEGY_TYPE, FLOOR_PLAN_ATTACHED_TO, FLOOR_TYPE_MAP, ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE, Plugin as ItemLabelPlugin, Magnifier, ModelChassisCompassPlugin, ModelEntryDoorGuidePlugin, ModelFloorplanPlugin, ModelItemLabelPlugin, ModelRoomLabelPlugin, ModelTVVideoPlugin, ModelViewPlugin, PanoCompassPlugin, PanoCursorRaycasterPlugin, PanoFloorplanRadarPlugin, PanoMeasurePlugin, PanoRulerPlugin, PanoRulerProPlugin, PanoSpatialTagPlugin, ROOM_FETILE_TYPE_MAP, ROOM_TYPE_MAP, Rotation, TopviewFloorplanPlugin, itemLabelPluginServerParams, modelItemLabelPluginServerParams, modelRoomLabelPluginServerParams, panoCompassPluginServerParams };
+const DnalogelVersion = '2.0.0-alpha.38';
+
+export { CSS3DRenderPlugin, CameraMovementEffect, CameraMovementPlugin, DIRECTION, DISPLAY_STRATEGY_TYPE, DnalogelVersion, FLOOR_PLAN_ATTACHED_TO, FLOOR_TYPE_MAP, ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE, Plugin as ItemLabelPlugin, Magnifier, ModelChassisCompassPlugin, ModelEntryDoorGuidePlugin, ModelFloorplanPlugin, ModelItemLabelPlugin, ModelRoomLabelPlugin, ModelTVVideoPlugin, ModelViewPlugin, PanoCompassPlugin, PanoCursorRaycasterPlugin, PanoFloorplanRadarPlugin, PanoMeasurePlugin, PanoRulerPlugin, PanoRulerProPlugin, PanoSpatialTagPlugin, ROOM_FETILE_TYPE_MAP, ROOM_TYPE_MAP, Rotation, TopviewFloorplanPlugin, itemLabelPluginServerParams, modelItemLabelPluginServerParams, modelRoomLabelPluginServerParams, panoCompassPluginServerParams };