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

package/dist/ItemLabelPlugin/index.js

@@ -42,151 +42,204 @@ exports.ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE = void 0;
 /* src/ItemLabelPlugin/ItemLabelItem.svelte generated by Svelte v3.47.0 */
 
 function add_css$1(target) {
-	internal.append_styles(target, "svelte-1s5p8g", ".item-label-item.svelte-1s5p8g{position:absolute;z-index:0;transform:none;cursor:pointer;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0}.item-label-item.visible.svelte-1s5p8g{opacity:1;-webkit-animation:svelte-1s5p8g-fadeIn .3s ease-in;animation:svelte-1s5p8g-fadeIn .3s ease-in}.item-label-item__text-wrap.svelte-1s5p8g{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0.625rem 1.04167rem 0.625rem 0.625rem;position:absolute;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:24.63542rem;min-height:4.79167rem;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:0.15625rem;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-1s5p8g{pointer-events:all}.icon-wrap.svelte-1s5p8g{width:3.54167rem;height:100%;display:flex;justify-content:center;align-content:center}.icon.svelte-1s5p8g{width:3.54167rem;height:3.54167rem;background-repeat:no-repeat;background-size:contain;background-position:center}.item-label-text.svelte-1s5p8g{margin-left:0.625rem;padding-left:0.625rem;min-height:3.54167rem;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-1s5p8g{white-space:nowrap;font-size:1.14583rem;font-weight:bold;line-height:1.5625rem}.item-name.svelte-1s5p8g{height:auto;word-wrap:break-word;word-break:break-all;font-size:1.04167rem;line-height:1.45833rem}.item-label-item__bar.svelte-1s5p8g{position:absolute;bottom:0;width:0.15625rem;background-image:linear-gradient(to bottom, white, rgba(255, 255, 255, 0));box-shadow:0 2px 0.41667rem 0 rgba(0,0,0,0.20);pointer-events:none}.item-label-item__bar.anchor.svelte-1s5p8g:after{content:'';position:absolute;bottom:0;width:1.25rem;height:1.25rem;background-image:url(\"//vrlab-public.ljcdn.com/common/file/web/67e7a198-28c9-47dc-879b-507bd3ae600c.png \");background-position:center;background-size:contain;transform:translate(-0.54688rem, 50%)}@-webkit-keyframes svelte-1s5p8g-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}@keyframes svelte-1s5p8g-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}");
+	internal.append_styles(target, "svelte-4rvov0", ".item-label-item.svelte-4rvov0.svelte-4rvov0{position:absolute;z-index:0;transform:none;cursor:pointer;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-animation:svelte-4rvov0-fadeIn .3s ease-in;animation:svelte-4rvov0-fadeIn .3s ease-in}.item-label-item.fold.svelte-4rvov0>.item-label-item__text-wrap.svelte-4rvov0{visibility:hidden}.item-label-item.fold.svelte-4rvov0>.item-label-item__bar.anchor.svelte-4rvov0{visibility:hidden}.item-label-item.fold.svelte-4rvov0>.item-label-item__bar.anchor.svelte-4rvov0:after{visibility:visible}.item-label-item__text-wrap.svelte-4rvov0.svelte-4rvov0{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0.625rem 1.04167rem 0.625rem 0.625rem;position:absolute;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:24.63542rem;min-height:4.79167rem;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:0.15625rem;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-4rvov0.svelte-4rvov0{width:3.54167rem;height:100%;display:flex;justify-content:center;align-content:center}.icon.svelte-4rvov0.svelte-4rvov0{width:3.54167rem;height:3.54167rem;background-repeat:no-repeat;background-size:contain;background-position:center}.item-label-text.svelte-4rvov0.svelte-4rvov0{margin-left:0.625rem;padding-left:0.625rem;min-height:3.54167rem;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-4rvov0.svelte-4rvov0{white-space:nowrap;font-size:1.14583rem;font-weight:bold;line-height:1.5625rem}.item-name.svelte-4rvov0.svelte-4rvov0{height:auto;word-wrap:break-word;word-break:break-all;font-size:1.04167rem;line-height:1.45833rem}.item-label-item__bar.svelte-4rvov0.svelte-4rvov0{position:absolute;bottom:0;width:0.15625rem;background-image:linear-gradient(to bottom, white, rgba(255, 255, 255, 0));box-shadow:0 2px 0.41667rem 0 rgba(0, 0, 0, 0.20);pointer-events:none}.item-label-item__bar.anchor.svelte-4rvov0.svelte-4rvov0:after{content:'';position:absolute;bottom:0;width:1.25rem;height:1.25rem;background-image:url(\"//vrlab-public.ljcdn.com/common/file/web/67e7a198-28c9-47dc-879b-507bd3ae600c.png \");background-position:center;background-size:contain;transform:translate(-0.54688rem, 50%)}@-webkit-keyframes svelte-4rvov0-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}@keyframes svelte-4rvov0-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}");
 }
 
-function create_fragment$1(ctx) {
-	let div5;
-	let div3;
+// (21:2) {#if itemLabel.icon}
+function create_if_block$1(ctx) {
 	let div1;
 	let div0;
 	let div0_style_value;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			div1 = internal.element("div");
+			div0 = internal.element("div");
+			internal.attr(div0, "class", "icon svelte-4rvov0");
+			internal.attr(div0, "style", div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon})`);
+			internal.attr(div1, "class", "icon-wrap svelte-4rvov0");
+		},
+		m(target, anchor) {
+			internal.insert(target, div1, anchor);
+			internal.append(div1, div0);
+
+			if (!mounted) {
+				dispose = internal.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})`)) {
+				internal.attr(div0, "style", div0_style_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) internal.detach(div1);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function create_fragment$1(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 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$1(ctx);
 
 	return {
 		c() {
-			div5 = internal.element("div");
 			div3 = internal.element("div");
 			div1 = internal.element("div");
-			div0 = internal.element("div");
+			if (if_block) if_block.c();
 			t0 = internal.space();
-			div2 = internal.element("div");
+			div0 = internal.element("div");
 			span0 = internal.element("span");
 			t1 = internal.text(t1_value);
 			t2 = internal.space();
 			span1 = internal.element("span");
 			t3 = internal.text(t3_value);
 			t4 = internal.space();
-			div4 = internal.element("div");
-			internal.attr(div0, "class", "icon svelte-1s5p8g");
-			internal.attr(div0, "style", div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon ?? defaultIcon})`);
-			internal.attr(div1, "class", "icon-wrap svelte-1s5p8g");
-			internal.attr(span0, "class", "item-model svelte-1s5p8g");
-			internal.attr(span1, "class", "item-name svelte-1s5p8g");
-			internal.attr(div2, "class", "item-label-text svelte-1s5p8g");
-			internal.attr(div3, "class", div3_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item__text-wrap", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-1s5p8g"));
-			internal.set_style(div3, "bottom", `${/*itemLabel*/ ctx[0].strokeLength}px`);
-			internal.attr(div4, "class", div4_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item__bar", { anchor: /*anchorEnabled*/ ctx[1] })) + " svelte-1s5p8g"));
-			internal.set_style(div4, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
-			internal.attr(div5, "class", div5_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-1s5p8g"));
-			internal.set_style(div5, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
-			internal.set_style(div5, "transform", /*itemLabel*/ ctx[0].transform, false);
+			div2 = internal.element("div");
+			internal.attr(span0, "class", "item-model svelte-4rvov0");
+			internal.attr(span1, "class", "item-name svelte-4rvov0");
+			internal.attr(div0, "class", "item-label-text svelte-4rvov0");
+			internal.attr(div1, "class", "" + (internal.null_to_empty(classNames__default["default"]("item-label-item__text-wrap")) + " svelte-4rvov0"));
+			internal.set_style(div1, "bottom", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+			internal.attr(div2, "class", div2_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item__bar", { anchor: /*anchorEnabled*/ ctx[1] })) + " svelte-4rvov0"));
+			internal.set_style(div2, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+			internal.attr(div3, "class", div3_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item", { fold: /*itemLabel*/ ctx[0].isFold })) + " svelte-4rvov0"));
+			internal.set_style(div3, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
+			internal.set_style(div3, "transform", /*itemLabel*/ ctx[0].transform, false);
 		},
 		m(target, anchor) {
-			internal.insert(target, div5, anchor);
-			internal.append(div5, div3);
+			internal.insert(target, div3, anchor);
 			internal.append(div3, div1);
+			if (if_block) if_block.m(div1, null);
+			internal.append(div1, t0);
 			internal.append(div1, div0);
-			internal.append(div3, t0);
-			internal.append(div3, div2);
-			internal.append(div2, span0);
+			internal.append(div0, span0);
 			internal.append(span0, t1);
-			internal.append(div2, t2);
-			internal.append(div2, span1);
+			internal.append(div0, t2);
+			internal.append(div0, span1);
 			internal.append(span1, t3);
-			internal.append(div5, t4);
-			internal.append(div5, div4);
+			internal.append(div3, t4);
+			internal.append(div3, div2);
 
 			if (!mounted) {
-				dispose = internal.listen(div3, "click", /*onClick*/ ctx[2]);
+				dispose = internal.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})`)) {
-				internal.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$1(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) + "")) internal.set_data(t1, t1_value);
+			if (dirty & /*itemLabel*/ 1 && t1_value !== (t1_value = (/*itemLabel*/ ctx[0].code || /*itemLabel*/ ctx[0].id) + "")) internal.set_data(t1, t1_value);
 			if (dirty & /*itemLabel*/ 1 && t3_value !== (t3_value = /*itemLabel*/ ctx[0].name + "")) internal.set_data(t3, t3_value);
 
-			if (dirty & /*itemLabel*/ 1 && div3_class_value !== (div3_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item__text-wrap", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-1s5p8g"))) {
-				internal.attr(div3, "class", div3_class_value);
-			}
-
 			if (dirty & /*itemLabel*/ 1) {
-				internal.set_style(div3, "bottom", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+				internal.set_style(div1, "bottom", `${/*itemLabel*/ ctx[0].strokeLength}px`);
 			}
 
-			if (dirty & /*anchorEnabled*/ 2 && div4_class_value !== (div4_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item__bar", { anchor: /*anchorEnabled*/ ctx[1] })) + " svelte-1s5p8g"))) {
-				internal.attr(div4, "class", div4_class_value);
+			if (dirty & /*anchorEnabled*/ 2 && div2_class_value !== (div2_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item__bar", { anchor: /*anchorEnabled*/ ctx[1] })) + " svelte-4rvov0"))) {
+				internal.attr(div2, "class", div2_class_value);
 			}
 
 			if (dirty & /*itemLabel*/ 1) {
-				internal.set_style(div4, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+				internal.set_style(div2, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
 			}
 
-			if (dirty & /*itemLabel*/ 1 && div5_class_value !== (div5_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-1s5p8g"))) {
-				internal.attr(div5, "class", div5_class_value);
+			if (dirty & /*itemLabel*/ 1 && div3_class_value !== (div3_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item", { fold: /*itemLabel*/ ctx[0].isFold })) + " svelte-4rvov0"))) {
+				internal.attr(div3, "class", div3_class_value);
 			}
 
 			if (dirty & /*itemLabel*/ 1) {
-				internal.set_style(div5, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
+				internal.set_style(div3, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
 			}
 
 			if (dirty & /*itemLabel*/ 1) {
-				internal.set_style(div5, "transform", /*itemLabel*/ ctx[0].transform, false);
+				internal.set_style(div3, "transform", /*itemLabel*/ ctx[0].transform, false);
 			}
 		},
 		i: internal.noop,
 		o: internal.noop,
 		d(detaching) {
-			if (detaching) internal.detach(div5);
+			if (detaching) internal.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$1($$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 ItemLabelItem extends internal.SvelteComponent {
 	constructor(options) {
 		super();
-		internal.init(this, options, instance$1, create_fragment$1, internal.safe_not_equal, { itemLabel: 0, hooks: 3, anchorEnabled: 1 }, add_css$1);
+
+		internal.init(
+			this,
+			options,
+			instance$1,
+			create_fragment$1,
+			internal.safe_not_equal,
+			{
+				itemLabel: 0,
+				hooks: 4,
+				anchorEnabled: 1,
+				onIconClick: 2
+			},
+			add_css$1
+		);
 	}
 }
 
@@ -205,6 +258,44 @@ function debounce(func, wait = 200) {
     };
 }
 
+const { Raycaster, Vector3 } = THREE__namespace;
+/**
+ * 碰撞检测可见性
+ * */
+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
+};
+
+/**
+ * 展示策略
+ * */
+const getStrokeLength = (itemSpaceHeight, type) => {
+    switch (type) {
+        case exports.ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.SMALL:
+            return Math.ceil(-27.78 * itemSpaceHeight + 85);
+        case exports.ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.MIDLLE:
+            return Math.ceil(-38.9 * itemSpaceHeight + 130);
+        case exports.ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.LARGE:
+            return Math.ceil(-44.44 * itemSpaceHeight + 140);
+        case exports.ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.EXTRA_LARGE:
+            return Math.ceil(-92.59 * itemSpaceHeight + 300);
+    }
+};
+
+const getLabelTransform = (cssOffset) => {
+    return `translate(${cssOffset[0]}px, ${cssOffset[1]}px)`;
+};
+
+/** @description 转成内部所需数据 */
+function transform2RenderData(data) {
+    return data.map(label => (Object.assign({ observerIndex: undefined, visible: false, isFold: false }, label)));
+}
+
 /* src/ItemLabelPlugin/ItemLabelComponent.svelte generated by Svelte v3.47.0 */
 
 function add_css(target) {
@@ -213,57 +304,115 @@ function add_css(target) {
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[28] = list[i];
+	child_ctx[32] = list[i];
 	return child_ctx;
 }
 
-// (163:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
-function create_each_block(key_1, ctx) {
-	let first;
+// (248:2) {#if itemLabelItem.visible}
+function create_if_block(ctx) {
 	let itemlabelitem;
 	let current;
 
 	itemlabelitem = new ItemLabelItem({
 			props: {
-				itemLabel: /*itemLabelItem*/ ctx[28],
-				hooks: /*hooks*/ ctx[1],
-				anchorEnabled: /*five*/ ctx[0].currentMode === five.Five.Mode.Panorama
+				itemLabel: /*itemLabelItem*/ ctx[32],
+				hooks: /*hooks*/ ctx[0],
+				anchorEnabled: /*anchorEnabled*/ ctx[2],
+				onIconClick: /*onIconClick*/ ctx[6]
 			}
 		});
 
+	return {
+		c() {
+			internal.create_component(itemlabelitem.$$.fragment);
+		},
+		m(target, anchor) {
+			internal.mount_component(itemlabelitem, target, anchor);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const itemlabelitem_changes = {};
+			if (dirty[0] & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[32];
+			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);
+		},
+		i(local) {
+			if (current) return;
+			internal.transition_in(itemlabelitem.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			internal.transition_out(itemlabelitem.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			internal.destroy_component(itemlabelitem, detaching);
+		}
+	};
+}
+
+// (247: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[32].visible && create_if_block(ctx);
+
 	return {
 		key: key_1,
 		first: null,
 		c() {
 			first = internal.empty();
-			internal.create_component(itemlabelitem.$$.fragment);
+			if (if_block) if_block.c();
+			if_block_anchor = internal.empty();
 			this.first = first;
 		},
 		m(target, anchor) {
 			internal.insert(target, first, anchor);
-			internal.mount_component(itemlabelitem, target, anchor);
+			if (if_block) if_block.m(target, anchor);
+			internal.insert(target, if_block_anchor, anchor);
 			current = true;
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
-			const itemlabelitem_changes = {};
-			if (dirty & /*renderItemLabels*/ 4) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[28];
-			if (dirty & /*hooks*/ 2) itemlabelitem_changes.hooks = /*hooks*/ ctx[1];
-			if (dirty & /*five*/ 1) itemlabelitem_changes.anchorEnabled = /*five*/ ctx[0].currentMode === five.Five.Mode.Panorama;
-			itemlabelitem.$set(itemlabelitem_changes);
+
+			if (/*itemLabelItem*/ ctx[32].visible) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+
+					if (dirty[0] & /*renderItemLabels*/ 2) {
+						internal.transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					internal.transition_in(if_block, 1);
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			} else if (if_block) {
+				internal.group_outros();
+
+				internal.transition_out(if_block, 1, 1, () => {
+					if_block = null;
+				});
+
+				internal.check_outros();
+			}
 		},
 		i(local) {
 			if (current) return;
-			internal.transition_in(itemlabelitem.$$.fragment, local);
+			internal.transition_in(if_block);
 			current = true;
 		},
 		o(local) {
-			internal.transition_out(itemlabelitem.$$.fragment, local);
+			internal.transition_out(if_block);
 			current = false;
 		},
 		d(detaching) {
 			if (detaching) internal.detach(first);
-			internal.destroy_component(itemlabelitem, detaching);
+			if (if_block) if_block.d(detaching);
+			if (detaching) internal.detach(if_block_anchor);
 		}
 	};
 }
@@ -274,8 +423,8 @@ function create_fragment(ctx) {
 	let each_1_lookup = new Map();
 	let div_resize_listener;
 	let current;
-	let each_value = /*renderItemLabels*/ ctx[2];
-	const get_key = ctx => /*itemLabelItem*/ ctx[28].id;
+	let each_value = /*renderItemLabels*/ ctx[1];
+	const get_key = ctx => /*itemLabelItem*/ ctx[32].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context(ctx, each_value, i);
@@ -292,7 +441,7 @@ function create_fragment(ctx) {
 			}
 
 			internal.attr(div, "class", "item-labels-container svelte-gk8s47");
-			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[10].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) {
@@ -302,18 +451,18 @@ function create_fragment(ctx) {
 				each_blocks[i].m(div, null);
 			}
 
-			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[10].bind(div));
+			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[13].bind(div));
 			current = true;
 		},
-		p(ctx, [dirty]) {
-			if (dirty & /*renderItemLabels, hooks, five, Five*/ 7) {
-				each_value = /*renderItemLabels*/ ctx[2];
+		p(ctx, dirty) {
+			if (dirty[0] & /*renderItemLabels, hooks, anchorEnabled, onIconClick*/ 71) {
+				each_value = /*renderItemLabels*/ ctx[1];
 				internal.group_outros();
 				each_blocks = internal.update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, internal.outro_and_destroy_block, create_each_block, null, get_each_context);
 				internal.check_outros();
 			}
 
-			if (dirty & /*itemsVisible*/ 32) {
+			if (dirty[0] & /*itemsVisible*/ 32) {
 				internal.set_style(div, "opacity", /*itemsVisible*/ ctx[5] ? 1 : 0, false);
 			}
 		},
@@ -348,14 +497,20 @@ let basicWidth = 11;
 
 function instance($$self, $$props, $$invalidate) {
 	const { Raycaster, Vector3 } = THREE__namespace;
-	let { five } = $$props;
+	let { five: five$1 } = $$props;
 	let { modelOcclusionEnable } = $$props;
 	let { itemLabels } = $$props;
 	let { wrapper } = $$props;
 	let { hooks } = $$props;
 	let { displayStrategyType } = $$props;
+	let { maxVisibleDistance } = $$props;
 	let curItemLabels = null;
 	let renderItemLabels = null;
+
+	let anchorEnabled = (five$1 === null || five$1 === void 0
+	? void 0
+	: five$1.currentMode) === five.Five.Mode.Panorama;
+
 	let wrapperSize = { width: 0, height: 0 };
 	let containerWidth;
 	let containerHeight;
@@ -371,19 +526,36 @@ function instance($$self, $$props, $$invalidate) {
  * 1、当前楼层(假设先不考虑多楼层)
  * 2、模型未被遮挡（一个 box 有没有被遮挡的计算？ TODO）
  * */
-	const getLabelVisible = (five, itemLabel) => {
+	const judgeImpacted = (five$1, itemLabel) => {
 		// 虚拟 VR 仅有一层，不考虑楼层信息
-		const raycaster = new Raycaster();
+		const cameraPosition = five$1.camera.position.clone();
 
-		const cameraPosition = five.camera.position.clone();
 		const modelPosition = new Vector3(itemLabel.modelPosition[0], itemLabel.modelPosition[1], itemLabel.modelPosition[2]);
 
 		// 计算点到相机的位置
 		const vectorDistance = modelPosition.distanceTo(cameraPosition);
 
-		raycaster.set(cameraPosition.clone(), modelPosition.clone().sub(cameraPosition).normalize());
-		const [intersection] = five.model.intersectRaycaster(raycaster);
-		return !(intersection && intersection.distance + 1 < vectorDistance);
+		// 判断距离，大于最大可见距离直接不可见 TODO 把距离计算和碰撞拆分开
+		if (maxVisibleDistance !== undefined && five$1.state.mode === five.Five.Mode.Panorama) {
+			if (vectorDistance > maxVisibleDistance) {
+				return false;
+			}
+		}
+
+		return isImpacted(five$1, modelPosition.clone().sub(cameraPosition).normalize(), cameraPosition, vectorDistance);
+	}; // raycaster.set(cameraPosition.clone(), modelPosition.clone().sub(cameraPosition).normalize())
+	// const [intersection] = five.model.intersectRaycaster(raycaster)
+	// return !(intersection && intersection.distance + 1 < vectorDistance);
+
+	const judgeInViewport = modelPoint => {
+		const { camera, model } = five$1;
+		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 获取
@@ -402,36 +574,26 @@ function instance($$self, $$props, $$invalidate) {
 		return [xOffset, yOffset];
 	};
 
-	const getLabelTransform = cssOffset => {
-		return `translate(${cssOffset[0]}px, ${cssOffset[1]}px)`;
-	};
-
-	function getStrokeLength(itemSpaceHeight, type) {
-		switch (type) {
-			case exports.ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.SMALL:
-				return Math.ceil(-27.78 * itemSpaceHeight + 85);
-			case exports.ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.MIDLLE:
-				return Math.ceil(-38.9 * itemSpaceHeight + 130);
-			case exports.ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.LARGE:
-				return Math.ceil(-44.44 * itemSpaceHeight + 140);
-			case exports.ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE.EXTRA_LARGE:
-				return Math.ceil(-92.59 * itemSpaceHeight + 300);
-		}
-	}
-
-	const getFormatedItemLabels = (five, labels) => {
+	const getFormatedItemLabels = (five$1, labels) => {
 		// 计算位置 & 可见性
 		const newLabels = labels.map(label => {
-			const cssOffset = getLabelCssOffset(five, label);
+			const cssOffset = getLabelCssOffset(five$1, label);
 			label.name.length * basicWidth;
 			const strokeLength = getStrokeLength(label.modelPosition[1], displayStrategyType);
 
 			// 是否加入碰撞检测
-			const naturalVisible = modelOcclusionEnable
-			? getLabelVisible(five, label)
+			// 配置加入碰撞检测，则判断碰撞检测
+			// 在可见范围内， 仅在 Panorama 模态计算
+			const isInViewport = five$1.currentMode === five.Five.Mode.Panorama
+			? judgeInViewport(new Vector3(label.position[0], label.position[1], label.position[2]))
 			: true;
 
-			const visible = naturalVisible;
+			// 碰撞
+			const isBlocked = modelOcclusionEnable
+			? judgeImpacted(five$1, label)
+			: false;
+
+			const visible = isInViewport && !isBlocked;
 
 			// 关掉重叠计算
 			// const visible = naturalVisible && !isOverlap([cssOffset[0], cssOffset[1] + strokeLength], curLabelWidth)
@@ -447,7 +609,7 @@ function instance($$self, $$props, $$invalidate) {
 
 		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)
+			distance: new Vector3(label.modelPosition[0], label.modelPosition[1], label.modelPosition[2]).clone().distanceTo(five$1.camera.position)
 		})).sort((a, b) => a.distance - b.distance);
 
 		return newLabels.map(label => {
@@ -459,25 +621,23 @@ function instance($$self, $$props, $$invalidate) {
 
 	const onItemLabelUpdate = () => {
 		cssOffsetLists = [];
-		$$invalidate(2, renderItemLabels = getFormatedItemLabels(five, renderItemLabels));
+		$$invalidate(1, renderItemLabels = getFormatedItemLabels(five$1, renderItemLabels));
 	};
 
-	svelte.beforeUpdate(() => {
-		addDataUpdateListener();
-	});
-
 	const handleCameraUpdateCallback = () => {
 		$$invalidate(5, itemsVisible = false);
 		handleCameraUpdate();
 	};
 
-	svelte.onMount(() => {
-		$$invalidate(2, renderItemLabels = itemLabels);
-		curItemLabels = itemLabels;
-		onItemLabelUpdate();
-		addResizeListener();
-		five.on('cameraUpdate', handleCameraUpdateCallback);
-	});
+	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(
 		() => {
@@ -498,7 +658,7 @@ function instance($$self, $$props, $$invalidate) {
 
 	const addDataUpdateListener = () => {
 		if (curItemLabels !== itemLabels) {
-			$$invalidate(2, renderItemLabels = itemLabels);
+			$$invalidate(1, renderItemLabels = transform2RenderData(itemLabels));
 			curItemLabels = itemLabels;
 			onItemLabelUpdate();
 		}
@@ -516,8 +676,92 @@ function instance($$self, $$props, $$invalidate) {
 			}
 		});
 
+	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$1.state.mode !== five.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$1, fromPositionVector, obVector, distance);
+
+			if (!isImpactedRes) {
+				observerIndex = panoIndex;
+				break;
+			}
+		}
+
+		return typeof observerIndex === "number"
+		? observers[observerIndex]
+		: undefined;
+	};
+
+	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 observer = getNearObserverPano(fromPositionVector, observers);
+
+		if (observer) {
+			console.log('--has 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$1.setState(Object.assign(Object.assign({}, cameraCoord), {
+				mode: five.Five.Mode.Panorama,
+				panoIndex: itemLabel.observerIndex
+			}));
+
+			// 游走结束更新 render list
+			five$1.once('initAnimationEnded', () => {
+				$$invalidate(1, renderItemLabels = renderItemLabels.map(item => {
+					return Object.assign(Object.assign({}, item), { isFold: item.id !== itemLabel.id });
+				}));
+
+				five$1.once('cameraUpdate', () => {
+					$$invalidate(1, renderItemLabels = renderItemLabels.map(item => {
+						return Object.assign(Object.assign({}, item), { isFold: false });
+					}));
+				});
+			});
+		}
+	};
+
+	svelte.beforeUpdate(() => {
+		addDataUpdateListener();
+	});
+
+	svelte.onMount(() => {
+		$$invalidate(1, renderItemLabels = transform2RenderData(itemLabels));
+		curItemLabels = itemLabels;
+		onItemLabelUpdate();
+		addResizeListener();
+		five$1.on('cameraUpdate', handleCameraUpdateCallback);
+		five$1.on('modeChange', onFiveModeChange);
+	});
+
 	svelte.onDestroy(() => {
-		five.off('cameraUpdate', handleCameraUpdateCallback);
+		five$1.off('cameraUpdate', handleCameraUpdateCallback);
+		five$1.off('modeChange', onFiveModeChange);
 		resizeObserver.unobserve(wrapper);
 	});
 
@@ -529,25 +773,29 @@ function instance($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('five' in $$props) $$invalidate(0, five = $$props.five);
-		if ('modelOcclusionEnable' in $$props) $$invalidate(6, modelOcclusionEnable = $$props.modelOcclusionEnable);
-		if ('itemLabels' in $$props) $$invalidate(7, itemLabels = $$props.itemLabels);
-		if ('wrapper' in $$props) $$invalidate(8, wrapper = $$props.wrapper);
-		if ('hooks' in $$props) $$invalidate(1, hooks = $$props.hooks);
-		if ('displayStrategyType' in $$props) $$invalidate(9, displayStrategyType = $$props.displayStrategyType);
+		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 ('wrapper' in $$props) $$invalidate(10, wrapper = $$props.wrapper);
+		if ('hooks' in $$props) $$invalidate(0, hooks = $$props.hooks);
+		if ('displayStrategyType' in $$props) $$invalidate(11, displayStrategyType = $$props.displayStrategyType);
+		if ('maxVisibleDistance' in $$props) $$invalidate(12, maxVisibleDistance = $$props.maxVisibleDistance);
 	};
 
 	return [
-		five,
 		hooks,
 		renderItemLabels,
+		anchorEnabled,
 		containerWidth,
 		containerHeight,
 		itemsVisible,
+		onIconClick,
+		five$1,
 		modelOcclusionEnable,
 		itemLabels,
 		wrapper,
 		displayStrategyType,
+		maxVisibleDistance,
 		div_elementresize_handler
 	];
 }
@@ -563,25 +811,28 @@ class ItemLabelComponent extends internal.SvelteComponent {
 			create_fragment,
 			internal.safe_not_equal,
 			{
-				five: 0,
-				modelOcclusionEnable: 6,
-				itemLabels: 7,
-				wrapper: 8,
-				hooks: 1,
-				displayStrategyType: 9
+				five: 7,
+				modelOcclusionEnable: 8,
+				itemLabels: 9,
+				wrapper: 10,
+				hooks: 0,
+				displayStrategyType: 11,
+				maxVisibleDistance: 12
 			},
-			add_css
+			add_css,
+			[-1, -1]
 		);
 	}
 }
 
 /** @description 转成内部所需数据 */
 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)));
 }
 
+const defaultMaxVisibleDistance = undefined;
 const Plugin = (five$1, params) => {
-    var _a, _b;
+    var _a, _b, _c;
     const pluginState = {
         container: document.createElement('div'),
         data: null,
@@ -593,6 +844,7 @@ const Plugin = (five$1, params) => {
         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,
     };
     pluginState.container.setAttribute('class', 'item-label-plugin-container');
     pluginState.container.style.cssText = `
@@ -629,7 +881,6 @@ const Plugin = (five$1, params) => {
         return true;
     };
     const dispose = () => {
-        removeListener4Five();
         pluginState.container.remove();
     };
     const render = () => {
@@ -652,7 +903,8 @@ const Plugin = (five$1, params) => {
                     itemLabels: pluginState.itemLabels,
                     wrapper: pluginState.wrapper,
                     hooks: pluginState.hooks,
-                    displayStrategyType: pluginState.displayStrategyType
+                    displayStrategyType: pluginState.displayStrategyType,
+                    maxVisibleDistance: pluginState.maxVisibleDistance
                 }
             });
         }
@@ -665,23 +917,9 @@ const Plugin = (five$1, params) => {
     };
     // 添加 five 监听
     const addListener4Five = () => {
-        five$1.on('modeChange', onFiveModeChange);
+        // five.on('modeChange', onFiveModeChange)
         five$1.once('dispose', dispose);
     };
-    // 取消 five 监听
-    const removeListener4Five = () => {
-        five$1.off('modeChange', onFiveModeChange);
-    };
-    const onFiveModeChange = (mode) => {
-        if (!pluginState.enabled)
-            return;
-        pluginState.fiveModeEnabled = false;
-        render();
-        five$1.once('initAnimationEnded', () => {
-            pluginState.fiveModeEnabled = true;
-            render();
-        });
-    };
     addListener4Five();
     return {
         appendTo,