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

package/dist/ItemLabelPlugin/index.js

@@ -0,0 +1,703 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var five = require('@realsee/five');
+var internal = require('svelte/internal');
+var svelte = require('svelte');
+var THREE = require('three');
+var classNames = require('classnames');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+
+exports.ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE = void 0;
+(function (ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE) {
+    ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE["SMALL"] = "small";
+    ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE["MIDLLE"] = "middle";
+    ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE["LARGE"] = "large";
+    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 */
+
+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        }}");
+}
+
+function create_fragment$1(ctx) {
+	let div5;
+	let div3;
+	let div1;
+	let div0;
+	let div0_style_value;
+	let t0;
+	let div2;
+	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 div3_class_value;
+	let t4;
+	let div4;
+	let div4_class_value;
+	let div5_class_value;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			div5 = internal.element("div");
+			div3 = internal.element("div");
+			div1 = internal.element("div");
+			div0 = internal.element("div");
+			t0 = internal.space();
+			div2 = 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);
+		},
+		m(target, anchor) {
+			internal.insert(target, div5, anchor);
+			internal.append(div5, div3);
+			internal.append(div3, div1);
+			internal.append(div1, div0);
+			internal.append(div3, t0);
+			internal.append(div3, div2);
+			internal.append(div2, span0);
+			internal.append(span0, t1);
+			internal.append(div2, t2);
+			internal.append(div2, span1);
+			internal.append(span1, t3);
+			internal.append(div5, t4);
+			internal.append(div5, div4);
+
+			if (!mounted) {
+				dispose = internal.listen(div3, "click", /*onClick*/ ctx[2]);
+				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 (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`);
+			}
+
+			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 & /*itemLabel*/ 1) {
+				internal.set_style(div4, "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) {
+				internal.set_style(div5, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
+			}
+
+			if (dirty & /*itemLabel*/ 1) {
+				internal.set_style(div5, "transform", /*itemLabel*/ ctx[0].transform, false);
+			}
+		},
+		i: internal.noop,
+		o: internal.noop,
+		d(detaching) {
+			if (detaching) internal.detach(div5);
+			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;
+
+	function onClick() {
+		hooks.emit('onLabelClick', itemLabel);
+	}
+
+	$$self.$$set = $$props => {
+		if ('itemLabel' in $$props) $$invalidate(0, itemLabel = $$props.itemLabel);
+		if ('hooks' in $$props) $$invalidate(3, hooks = $$props.hooks);
+		if ('anchorEnabled' in $$props) $$invalidate(1, anchorEnabled = $$props.anchorEnabled);
+	};
+
+	return [itemLabel, anchorEnabled, onClick, hooks];
+}
+
+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);
+	}
+}
+
+/**
+ * 创建一个防抖动函数，该函数会在 wait 毫秒后调用 func 方法
+ * @param func - 要防抖动的函数
+ * @param [wait=0] - 需要延迟的毫秒数
+ */
+function debounce(func, wait = 200) {
+    let last;
+    return function (...args) {
+        clearTimeout(last);
+        last = setTimeout(() => {
+            func(...args);
+        }, wait);
+    };
+}
+
+/* src/ItemLabelPlugin/ItemLabelComponent.svelte generated by Svelte v3.47.0 */
+
+function add_css(target) {
+	internal.append_styles(target, "svelte-gk8s47", ".item-labels-container.svelte-gk8s47{width:100%;height:100%;position:relative}");
+}
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[28] = list[i];
+	return child_ctx;
+}
+
+// (163:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+function create_each_block(key_1, ctx) {
+	let first;
+	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
+			}
+		});
+
+	return {
+		key: key_1,
+		first: null,
+		c() {
+			first = internal.empty();
+			internal.create_component(itemlabelitem.$$.fragment);
+			this.first = first;
+		},
+		m(target, anchor) {
+			internal.insert(target, first, anchor);
+			internal.mount_component(itemlabelitem, target, 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);
+		},
+		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) {
+			if (detaching) internal.detach(first);
+			internal.destroy_component(itemlabelitem, detaching);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div;
+	let each_blocks = [];
+	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;
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		let child_ctx = get_each_context(ctx, each_value, i);
+		let key = get_key(child_ctx);
+		each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));
+	}
+
+	return {
+		c() {
+			div = internal.element("div");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			internal.attr(div, "class", "item-labels-container svelte-gk8s47");
+			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[10].call(div));
+			internal.set_style(div, "opacity", /*itemsVisible*/ ctx[5] ? 1 : 0, false);
+		},
+		m(target, anchor) {
+			internal.insert(target, div, anchor);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(div, null);
+			}
+
+			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[10].bind(div));
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*renderItemLabels, hooks, five, Five*/ 7) {
+				each_value = /*renderItemLabels*/ ctx[2];
+				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) {
+				internal.set_style(div, "opacity", /*itemsVisible*/ ctx[5] ? 1 : 0, false);
+			}
+		},
+		i(local) {
+			if (current) return;
+
+			for (let i = 0; i < each_value.length; i += 1) {
+				internal.transition_in(each_blocks[i]);
+			}
+
+			current = true;
+		},
+		o(local) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				internal.transition_out(each_blocks[i]);
+			}
+
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) internal.detach(div);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].d();
+			}
+
+			div_resize_listener();
+		}
+	};
+}
+let basicWidth = 11;
+
+function instance($$self, $$props, $$invalidate) {
+	const { Raycaster, Vector3 } = THREE__namespace;
+	let { five } = $$props;
+	let { modelOcclusionEnable } = $$props;
+	let { itemLabels } = $$props;
+	let { wrapper } = $$props;
+	let { hooks } = $$props;
+	let { displayStrategyType } = $$props;
+	let curItemLabels = null;
+	let renderItemLabels = null;
+	let wrapperSize = { width: 0, height: 0 };
+	let containerWidth;
+	let containerHeight;
+
+	// 计算重叠
+	let cssOffsetLists = [];
+
+	// 动画过程中 itemsVisible 为 false
+	let itemsVisible = true;
+
+	/**
+ * 可见性策略：
+ * 1、当前楼层(假设先不考虑多楼层)
+ * 2、模型未被遮挡（一个 box 有没有被遮挡的计算？ TODO）
+ * */
+	const getLabelVisible = (five, itemLabel) => {
+		// 虚拟 VR 仅有一层，不考虑楼层信息
+		const raycaster = new Raycaster();
+
+		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);
+	};
+
+	// cssOffset 获取
+	const getLabelCssOffset = (five, itemLabel) => {
+		const modelPosition = new Vector3(itemLabel.modelPosition[0], itemLabel.modelPosition[1], itemLabel.modelPosition[2]);
+		const cssPosition = five.project2d(modelPosition);
+
+		const xOffset = cssPosition === null || cssPosition === void 0
+		? void 0
+		: cssPosition.x;
+
+		const yOffset = cssPosition === null || cssPosition === void 0
+		? void 0
+		: cssPosition.y;
+
+		return [xOffset, yOffset];
+	};
+
+	const 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 newLabels = labels.map(label => {
+			const cssOffset = getLabelCssOffset(five, label);
+			label.name.length * basicWidth;
+			const strokeLength = getStrokeLength(label.modelPosition[1], displayStrategyType);
+
+			// 是否加入碰撞检测
+			const naturalVisible = modelOcclusionEnable
+			? getLabelVisible(five, label)
+			: true;
+
+			const visible = naturalVisible;
+
+			// 关掉重叠计算
+			// const visible = naturalVisible && !isOverlap([cssOffset[0], cssOffset[1] + strokeLength], curLabelWidth)
+			if (!visible) return Object.assign(Object.assign({}, label), { visible });
+
+			cssOffsetLists.push(cssOffset);
+
+			// position
+			const transform = getLabelTransform(cssOffset);
+
+			return Object.assign(Object.assign({}, label), { visible, transform, strokeLength });
+		});
+
+		const sortedItemLabelItems = newLabels.filter(({ visible }) => visible).map(label => ({
+			itemLabelItem: label,
+			distance: new Vector3(label.modelPosition[0], label.modelPosition[1], label.modelPosition[2]).clone().distanceTo(five.camera.position)
+		})).sort((a, b) => a.distance - b.distance);
+
+		return newLabels.map(label => {
+			const sortIndex = sortedItemLabelItems.findIndex(item => item.itemLabelItem.id === label.id);
+			if (sortIndex !== undefined) return Object.assign(Object.assign({}, label), { zIndex: sortIndex * 10 });
+			return label;
+		});
+	};
+
+	const onItemLabelUpdate = () => {
+		cssOffsetLists = [];
+		$$invalidate(2, renderItemLabels = getFormatedItemLabels(five, 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 handleCameraUpdate = debounce(
+		() => {
+			$$invalidate(5, itemsVisible = true);
+			onItemLabelUpdate();
+		},
+		300
+	);
+
+	const addResizeListener = () => {
+		wrapperSize = {
+			width: wrapper.clientWidth,
+			height: wrapper.clientHeight
+		};
+
+		resizeObserver.observe(wrapper);
+	};
+
+	const addDataUpdateListener = () => {
+		if (curItemLabels !== itemLabels) {
+			$$invalidate(2, renderItemLabels = itemLabels);
+			curItemLabels = itemLabels;
+			onItemLabelUpdate();
+		}
+	};
+
+	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();
+			}
+		});
+
+	svelte.onDestroy(() => {
+		five.off('cameraUpdate', handleCameraUpdateCallback);
+		resizeObserver.unobserve(wrapper);
+	});
+
+	function div_elementresize_handler() {
+		containerWidth = this.clientWidth;
+		containerHeight = this.clientHeight;
+		$$invalidate(3, containerWidth);
+		$$invalidate(4, containerHeight);
+	}
+
+	$$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);
+	};
+
+	return [
+		five,
+		hooks,
+		renderItemLabels,
+		containerWidth,
+		containerHeight,
+		itemsVisible,
+		modelOcclusionEnable,
+		itemLabels,
+		wrapper,
+		displayStrategyType,
+		div_elementresize_handler
+	];
+}
+
+class ItemLabelComponent extends internal.SvelteComponent {
+	constructor(options) {
+		super();
+
+		internal.init(
+			this,
+			options,
+			instance,
+			create_fragment,
+			internal.safe_not_equal,
+			{
+				five: 0,
+				modelOcclusionEnable: 6,
+				itemLabels: 7,
+				wrapper: 8,
+				hooks: 1,
+				displayStrategyType: 9
+			},
+			add_css
+		);
+	}
+}
+
+/** @description 转成内部所需数据 */
+function parseItemLabelPluginData(data) {
+    return data.item_labels.map(label => (Object.assign({ modelPosition: [label.position[0], label.position[1], label.position[2]] }, label)));
+}
+
+const Plugin = (five$1, params) => {
+    var _a, _b;
+    const pluginState = {
+        container: document.createElement('div'),
+        data: null,
+        enabled: true,
+        fiveModeEnabled: true,
+        itemLabels: [],
+        wrapper: null,
+        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,
+    };
+    pluginState.container.setAttribute('class', 'item-label-plugin-container');
+    pluginState.container.style.cssText = `
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 5;
+    `;
+    pluginState.container.style.pointerEvents = 'none'; // 写到 cssText 里不生效
+    const appendTo = (wrapper) => {
+        pluginState.wrapper = wrapper;
+        wrapper.appendChild(pluginState.container);
+        render();
+        return true;
+    };
+    const load = (data) => {
+        pluginState.itemLabels = parseItemLabelPluginData(data);
+        render();
+    };
+    const enable = () => {
+        if (pluginState.enabled)
+            return true;
+        pluginState.enabled = true;
+        render();
+        return true;
+    };
+    const disable = () => {
+        if (!pluginState.enabled)
+            return true;
+        pluginState.enabled = false;
+        render();
+        return true;
+    };
+    const dispose = () => {
+        removeListener4Five();
+        pluginState.container.remove();
+    };
+    const render = () => {
+        var _a;
+        if (!pluginState.wrapper)
+            return;
+        // 只要不可展示，销毁容器
+        if (!pluginState.enabled || !pluginState.fiveModeEnabled) {
+            (_a = pluginState.app) === null || _a === void 0 ? void 0 : _a.$destroy();
+            pluginState.app = undefined;
+            return;
+        }
+        // 正常显示时，分为 app 存在和不存在两种情况，如果存在，传值，不存在则初始化并传值
+        if (!pluginState.app) {
+            pluginState.app = new ItemLabelComponent({
+                target: pluginState.container,
+                props: {
+                    five: five$1,
+                    modelOcclusionEnable: pluginState.modelOcclusionEnable,
+                    itemLabels: pluginState.itemLabels,
+                    wrapper: pluginState.wrapper,
+                    hooks: pluginState.hooks,
+                    displayStrategyType: pluginState.displayStrategyType
+                }
+            });
+        }
+        else {
+            pluginState.app.$set({
+                five: five$1,
+                itemLabels: pluginState.itemLabels
+            });
+        }
+    };
+    // 添加 five 监听
+    const addListener4Five = () => {
+        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;
+        pluginState.fiveModeEnabled = false;
+        render();
+        five$1.once('initAnimationEnded', () => {
+            pluginState.fiveModeEnabled = true;
+            render();
+        });
+    };
+    addListener4Five();
+    return {
+        appendTo,
+        load,
+        enable,
+        disable,
+        dispose,
+        hooks: pluginState.hooks
+    };
+};
+
+const itemLabelPluginServerParams = {
+    name: 'ItemLabelPlugin',
+    version: 0,
+};
+
+exports.ItemLabelPlugin = Plugin;
+exports["default"] = Plugin;
+exports.itemLabelPluginServerParams = itemLabelPluginServerParams;