@realsee/dnalogel 2.0.0-beta.36 → 2.0.0

package/dist/ItemLabelPlugin/index.js

@@ -39,14 +39,96 @@ exports.ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE = void 0;
     ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE["EXTRA_LARGE"] = "x-large";
 })(exports.ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE || (exports.ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE = {}));
 
-/* src/ItemLabelPlugin/ItemLabelItem.svelte generated by Svelte v3.47.0 */
+/* src/ItemLabelPlugin/ItemLabelItem.svelte generated by Svelte v3.49.0 */
 
 function add_css$1(target) {
-	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        }}");
+	internal.append_styles(target, "svelte-1mppr0a", ".item-label-item.svelte-1mppr0a.svelte-1mppr0a{position:absolute;z-index:0;transform:none;cursor:pointer;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-animation:svelte-1mppr0a-fadeIn .3s ease-in;animation:svelte-1mppr0a-fadeIn .3s ease-in}.item-label-item.fold.svelte-1mppr0a>.item-label-item__text-wrap.svelte-1mppr0a{visibility:hidden}.item-label-item.fold.svelte-1mppr0a>.item-label-item__bar.anchor.svelte-1mppr0a{visibility:hidden}.item-label-item.fold.svelte-1mppr0a>.item-label-item__bar.anchor.svelte-1mppr0a:after{visibility:visible}.item-label-item__text-wrap.svelte-1mppr0a.svelte-1mppr0a{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}.item-label-item__custom.svelte-1mppr0a.svelte-1mppr0a{padding:0;max-width:unset;min-height:unset;background-image:unset;border:0;border-radius:0}.icon-wrap.svelte-1mppr0a.svelte-1mppr0a{width:3.54167rem;height:100%;display:flex;justify-content:center;align-content:center}.icon.svelte-1mppr0a.svelte-1mppr0a{width:3.54167rem;height:3.54167rem;background-repeat:no-repeat;background-size:contain;background-position:center}.item-label-text.svelte-1mppr0a.svelte-1mppr0a{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-1mppr0a.svelte-1mppr0a{white-space:nowrap;font-size:1.14583rem;font-weight:bold;line-height:1.5625rem}.item-name.svelte-1mppr0a.svelte-1mppr0a{height:auto;word-wrap:break-word;word-break:break-all;font-size:1.04167rem;line-height:1.45833rem}.item-label-item__bar.svelte-1mppr0a.svelte-1mppr0a{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-1mppr0a.svelte-1mppr0a: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-1mppr0a-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}@keyframes svelte-1mppr0a-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}");
 }
 
-// (21:2) {#if itemLabel.icon}
+// (34:8) {:else}
+function create_else_block(ctx) {
+	let t0;
+	let div;
+	let span0;
+	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 if_block = /*itemLabel*/ ctx[0].icon && create_if_block_1(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			t0 = internal.space();
+			div = internal.element("div");
+			span0 = internal.element("span");
+			t1 = internal.text(t1_value);
+			t2 = internal.space();
+			span1 = internal.element("span");
+			t3 = internal.text(t3_value);
+			internal.attr(span0, "class", "item-model svelte-1mppr0a");
+			internal.attr(span1, "class", "item-name svelte-1mppr0a");
+			internal.attr(div, "class", "item-label-text svelte-1mppr0a");
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			internal.insert(target, t0, anchor);
+			internal.insert(target, div, anchor);
+			internal.append(div, span0);
+			internal.append(span0, t1);
+			internal.append(div, t2);
+			internal.append(div, span1);
+			internal.append(span1, t3);
+		},
+		p(ctx, dirty) {
+			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(t0.parentNode, 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 && t3_value !== (t3_value = /*itemLabel*/ ctx[0].name + "")) internal.set_data(t3, t3_value);
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) internal.detach(t0);
+			if (detaching) internal.detach(div);
+		}
+	};
+}
+
+// (32:8) {#if Boolean(typeof itemLabel.render === 'function')}
 function create_if_block$1(ctx) {
+	let div;
+
+	return {
+		c() {
+			div = internal.element("div");
+		},
+		m(target, anchor) {
+			internal.insert(target, div, anchor);
+			/*div_binding*/ ctx[6](div);
+		},
+		p: internal.noop,
+		d(detaching) {
+			if (detaching) internal.detach(div);
+			/*div_binding*/ ctx[6](null);
+		}
+	};
+}
+
+// (35:12) {#if itemLabel.icon}
+function create_if_block_1(ctx) {
 	let div1;
 	let div0;
 	let div0_style_value;
@@ -57,16 +139,16 @@ function create_if_block$1(ctx) {
 		c() {
 			div1 = internal.element("div");
 			div0 = internal.element("div");
-			internal.attr(div0, "class", "icon svelte-4rvov0");
+			internal.attr(div0, "class", "icon svelte-1mppr0a");
 			internal.attr(div0, "style", div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon})`);
-			internal.attr(div1, "class", "icon-wrap svelte-4rvov0");
+			internal.attr(div1, "class", "icon-wrap svelte-1mppr0a");
 		},
 		m(target, anchor) {
 			internal.insert(target, div1, anchor);
 			internal.append(div1, div0);
 
 			if (!mounted) {
-				dispose = internal.listen(div1, "click", /*click_handler*/ ctx[5]);
+				dispose = internal.listen(div1, "click", /*click_handler*/ ctx[7]);
 				mounted = true;
 			}
 		},
@@ -84,115 +166,106 @@ function create_if_block$1(ctx) {
 }
 
 function create_fragment$1(ctx) {
-	let div3;
-	let div1;
-	let t0;
-	let div0;
-	let span0;
-	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 t4;
 	let div2;
+	let div0;
+	let show_if;
+	let div0_class_value;
+	let t;
+	let div1;
+	let div1_class_value;
 	let div2_class_value;
-	let div3_class_value;
 	let mounted;
 	let dispose;
-	let if_block = /*itemLabel*/ ctx[0].icon && create_if_block$1(ctx);
+
+	function select_block_type(ctx, dirty) {
+		if (dirty & /*itemLabel*/ 1) show_if = null;
+		if (show_if == null) show_if = !!Boolean(typeof /*itemLabel*/ ctx[0].render === 'function');
+		if (show_if) return create_if_block$1;
+		return create_else_block;
+	}
+
+	let current_block_type = select_block_type(ctx, -1);
+	let if_block = current_block_type(ctx);
 
 	return {
 		c() {
-			div3 = internal.element("div");
-			div1 = internal.element("div");
-			if (if_block) if_block.c();
-			t0 = internal.space();
-			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();
 			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);
+			div0 = internal.element("div");
+			if_block.c();
+			t = internal.space();
+			div1 = internal.element("div");
+
+			internal.attr(div0, "class", div0_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item__text-wrap", {
+				'item-label-item__custom': Boolean(typeof /*itemLabel*/ ctx[0].render === 'function')
+			})) + " svelte-1mppr0a"));
+
+			internal.set_style(div0, "bottom", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+			internal.attr(div1, "class", div1_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item__bar", { anchor: /*anchorEnabled*/ ctx[1] })) + " svelte-1mppr0a"));
+			internal.set_style(div1, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+			internal.attr(div2, "class", div2_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item", { fold: /*itemLabel*/ ctx[0].isFold })) + " svelte-1mppr0a"));
+			internal.set_style(div2, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
+			internal.set_style(div2, "transform", /*itemLabel*/ ctx[0].transform, false);
 		},
 		m(target, anchor) {
-			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(div0, span0);
-			internal.append(span0, t1);
-			internal.append(div0, t2);
-			internal.append(div0, span1);
-			internal.append(span1, t3);
-			internal.append(div3, t4);
-			internal.append(div3, div2);
+			internal.insert(target, div2, anchor);
+			internal.append(div2, div0);
+			if_block.m(div0, null);
+			internal.append(div2, t);
+			internal.append(div2, div1);
 
 			if (!mounted) {
-				dispose = internal.listen(div1, "click", /*onClick*/ ctx[3]);
+				dispose = internal.listen(div0, "click", /*onClick*/ ctx[4]);
 				mounted = true;
 			}
 		},
 		p(ctx, [dirty]) {
-			if (/*itemLabel*/ ctx[0].icon) {
+			if (current_block_type === (current_block_type = select_block_type(ctx, dirty)) && if_block) {
+				if_block.p(ctx, dirty);
+			} else {
+				if_block.d(1);
+				if_block = current_block_type(ctx);
+
 				if (if_block) {
-					if_block.p(ctx, dirty);
-				} else {
-					if_block = create_if_block$1(ctx);
 					if_block.c();
-					if_block.m(div1, t0);
+					if_block.m(div0, null);
 				}
-			} 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 && t3_value !== (t3_value = /*itemLabel*/ ctx[0].name + "")) internal.set_data(t3, t3_value);
+			if (dirty & /*itemLabel*/ 1 && div0_class_value !== (div0_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item__text-wrap", {
+				'item-label-item__custom': Boolean(typeof /*itemLabel*/ ctx[0].render === 'function')
+			})) + " svelte-1mppr0a"))) {
+				internal.attr(div0, "class", div0_class_value);
+			}
 
 			if (dirty & /*itemLabel*/ 1) {
-				internal.set_style(div1, "bottom", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+				internal.set_style(div0, "bottom", `${/*itemLabel*/ ctx[0].strokeLength}px`);
 			}
 
-			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 & /*anchorEnabled*/ 2 && div1_class_value !== (div1_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item__bar", { anchor: /*anchorEnabled*/ ctx[1] })) + " svelte-1mppr0a"))) {
+				internal.attr(div1, "class", div1_class_value);
 			}
 
 			if (dirty & /*itemLabel*/ 1) {
-				internal.set_style(div2, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+				internal.set_style(div1, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
 			}
 
-			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 && div2_class_value !== (div2_class_value = "" + (internal.null_to_empty(classNames__default["default"]("item-label-item", { fold: /*itemLabel*/ ctx[0].isFold })) + " svelte-1mppr0a"))) {
+				internal.attr(div2, "class", div2_class_value);
 			}
 
 			if (dirty & /*itemLabel*/ 1) {
-				internal.set_style(div3, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
+				internal.set_style(div2, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
 			}
 
 			if (dirty & /*itemLabel*/ 1) {
-				internal.set_style(div3, "transform", /*itemLabel*/ ctx[0].transform, false);
+				internal.set_style(div2, "transform", /*itemLabel*/ ctx[0].transform, false);
 			}
 		},
 		i: internal.noop,
 		o: internal.noop,
 		d(detaching) {
-			if (detaching) internal.detach(div3);
-			if (if_block) if_block.d();
+			if (detaching) internal.detach(div2);
+			if_block.d();
 			mounted = false;
 			dispose();
 		}
@@ -210,16 +283,50 @@ function instance$1($$self, $$props, $$invalidate) {
 		hooks.emit('onLabelClick', itemLabel);
 	}
 
+	let customElement;
+
+	function div_binding($$value) {
+		internal.binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			customElement = $$value;
+			$$invalidate(3, customElement);
+		});
+	}
+
 	const click_handler = e => onIconClick(itemLabel);
 
 	$$self.$$set = $$props => {
 		if ('itemLabel' in $$props) $$invalidate(0, itemLabel = $$props.itemLabel);
-		if ('hooks' in $$props) $$invalidate(4, hooks = $$props.hooks);
+		if ('hooks' in $$props) $$invalidate(5, hooks = $$props.hooks);
 		if ('anchorEnabled' in $$props) $$invalidate(1, anchorEnabled = $$props.anchorEnabled);
 		if ('onIconClick' in $$props) $$invalidate(2, onIconClick = $$props.onIconClick);
 	};
 
-	return [itemLabel, anchorEnabled, onIconClick, onClick, hooks, click_handler];
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*itemLabel, customElement*/ 9) {
+			{
+				if (typeof itemLabel.render === 'function' && customElement) {
+					if (customElement.children.length === 0) {
+						const child = itemLabel.render(itemLabel);
+
+						if (child) {
+							customElement.appendChild(child);
+						}
+					}
+				}
+			}
+		}
+	};
+
+	return [
+		itemLabel,
+		anchorEnabled,
+		onIconClick,
+		customElement,
+		onClick,
+		hooks,
+		div_binding,
+		click_handler
+	];
 }
 
 class ItemLabelItem extends internal.SvelteComponent {
@@ -234,7 +341,7 @@ class ItemLabelItem extends internal.SvelteComponent {
 			internal.safe_not_equal,
 			{
 				itemLabel: 0,
-				hooks: 4,
+				hooks: 5,
 				anchorEnabled: 1,
 				onIconClick: 2
 			},
@@ -296,7 +403,7 @@ 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 */
+/* src/ItemLabelPlugin/ItemLabelComponent.svelte generated by Svelte v3.49.0 */
 
 function add_css(target) {
 	internal.append_styles(target, "svelte-gk8s47", ".item-labels-container.svelte-gk8s47{width:100%;height:100%;position:relative}");
@@ -304,18 +411,18 @@ function add_css(target) {
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[32] = list[i];
+	child_ctx[31] = list[i];
 	return child_ctx;
 }
 
-// (248: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[32],
+				itemLabel: /*itemLabelItem*/ ctx[31],
 				hooks: /*hooks*/ ctx[0],
 				anchorEnabled: /*anchorEnabled*/ ctx[2],
 				onIconClick: /*onIconClick*/ ctx[6]
@@ -332,7 +439,7 @@ function create_if_block(ctx) {
 		},
 		p(ctx, dirty) {
 			const itemlabelitem_changes = {};
-			if (dirty[0] & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[32];
+			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 +459,12 @@ function create_if_block(ctx) {
 	};
 }
 
-// (247: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[32].visible && create_if_block(ctx);
+	let if_block = /*itemLabelItem*/ ctx[31].visible && create_if_block(ctx);
 
 	return {
 		key: key_1,
@@ -377,7 +484,7 @@ function create_each_block(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (/*itemLabelItem*/ ctx[32].visible) {
+			if (/*itemLabelItem*/ ctx[31].visible) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
@@ -424,7 +531,7 @@ function create_fragment(ctx) {
 	let div_resize_listener;
 	let current;
 	let each_value = /*renderItemLabels*/ ctx[1];
-	const get_key = ctx => /*itemLabelItem*/ ctx[32].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);
@@ -499,8 +606,8 @@ 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 { wrapper } = $$props;
 	let { hooks } = $$props;
 	let { displayStrategyType } = $$props;
 	let { maxVisibleDistance } = $$props;
@@ -511,7 +618,6 @@ function instance($$self, $$props, $$invalidate) {
 	? void 0
 	: five$1.currentMode) === five.Five.Mode.Panorama;
 
-	let wrapperSize = { width: 0, height: 0 };
 	let containerWidth;
 	let containerHeight;
 
@@ -543,9 +649,7 @@ function instance($$self, $$props, $$invalidate) {
 		}
 
 		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;
@@ -554,7 +658,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);
 	};
 
@@ -577,6 +684,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);
@@ -629,16 +741,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);
@@ -647,13 +749,12 @@ function instance($$self, $$props, $$invalidate) {
 		300
 	);
 
-	const addResizeListener = () => {
-		wrapperSize = {
-			width: wrapper.clientWidth,
-			height: wrapper.clientHeight
-		};
+	const onResize = () => {
+		five$1.once('renderFrame', onItemLabelUpdate);
+	};
 
-		resizeObserver.observe(wrapper);
+	const addResizeListener = () => {
+		window.addEventListener('resize', onResize, false);
 	};
 
 	const addDataUpdateListener = () => {
@@ -664,18 +765,6 @@ function instance($$self, $$props, $$invalidate) {
 		}
 	};
 
-	const resizeObserver = new ResizeObserver(entries => {
-			const entry = entries[0];
-			const target = entry.target;
-			const curWidth = target.clientWidth;
-			const curHeight = target.clientHeight;
-
-			if (wrapperSize.width !== curWidth || wrapperSize.height !== curHeight) {
-				wrapperSize = { width: curWidth, height: curHeight };
-				onItemLabelUpdate();
-			}
-		});
-
 	const getNearObserverPano = (fromPositionVector, observers) => {
 		let candidates = [];
 
@@ -709,11 +798,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;
 		}
 
@@ -756,13 +844,13 @@ 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);
-		resizeObserver.unobserve(wrapper);
+
+		// five.off('modeChange', onFiveModeChange)
+		window.removeEventListener('resize', onResize, false);
 	});
 
 	function div_elementresize_handler() {
@@ -775,8 +863,8 @@ 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 ('wrapper' in $$props) $$invalidate(10, wrapper = $$props.wrapper);
+		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(11, displayStrategyType = $$props.displayStrategyType);
 		if ('maxVisibleDistance' in $$props) $$invalidate(12, maxVisibleDistance = $$props.maxVisibleDistance);
@@ -792,8 +880,8 @@ function instance($$self, $$props, $$invalidate) {
 		onIconClick,
 		five$1,
 		modelOcclusionEnable,
+		onlyVisibleInPanorama,
 		itemLabels,
-		wrapper,
 		displayStrategyType,
 		maxVisibleDistance,
 		div_elementresize_handler
@@ -813,8 +901,8 @@ class ItemLabelComponent extends internal.SvelteComponent {
 			{
 				five: 7,
 				modelOcclusionEnable: 8,
-				itemLabels: 9,
-				wrapper: 10,
+				onlyVisibleInPanorama: 9,
+				itemLabels: 10,
 				hooks: 0,
 				displayStrategyType: 11,
 				maxVisibleDistance: 12
@@ -827,12 +915,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,
@@ -843,8 +931,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 = `
@@ -881,6 +970,7 @@ const Plugin = (five$1, params) => {
         return true;
     };
     const dispose = () => {
+        removeListener4Five();
         pluginState.container.remove();
     };
     const render = () => {
@@ -900,6 +990,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,
@@ -917,9 +1008,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,