@realsee/dnalogel 2.0.0-alpha.43 → 2.0.0-alpha.44

package/libs/ItemLabelPlugin/ItemLabelComponent.js

@@ -36,7 +36,7 @@ import { getLabelTransform } from './utils/getLabelTransform';
 import { transform2RenderData } from "./utils/transform2RenderData";
 
 function add_css(target) {
-	append_styles(target, "svelte-rmdeb", ".item-labels-container.svelte-rmdeb{width:100%;height:100%;position:relative}");
+	append_styles(target, "svelte-gk8s47", ".item-labels-container.svelte-gk8s47{width:100%;height:100%;position:relative}");
 }
 
 function get_each_context(ctx, list, i) {
@@ -177,7 +177,7 @@ function create_fragment(ctx) {
 				each_blocks[i].c();
 			}
 
-			attr(div, "class", "item-labels-container svelte-rmdeb");
+			attr(div, "class", "item-labels-container svelte-gk8s47");
 			add_render_callback(() => /*div_elementresize_handler*/ ctx[13].call(div));
 			set_style(div, "opacity", /*itemsVisible*/ ctx[5] ? 1 : 0, false);
 		},

package/libs/ItemLabelPlugin/ItemLabelComponent.svelte

@@ -0,0 +1,251 @@
+<script>import { Five } from '@realsee/five';
+import "./typings";
+import { beforeUpdate, onDestroy, onMount } from "svelte";
+import * as THREE from 'three';
+import ItemLabelItem from './ItemLabelItem.svelte';
+import "./events.type";
+import debounce from '../shared-utils/debounce';
+import { isImpacted } from "./utils/isImpacted";
+import { getStrokeLength } from "./utils/getStrokeLength";
+import { getLabelTransform } from './utils/getLabelTransform';
+import { transform2RenderData } from "./utils/transform2RenderData";
+const { Raycaster, Vector3 } = THREE;
+export let five;
+export let modelOcclusionEnable;
+export let onlyVisibleInPanorama;
+export let itemLabels;
+export let hooks;
+export let displayStrategyType;
+export let maxVisibleDistance;
+let curItemLabels = null;
+let renderItemLabels = null;
+let anchorEnabled = (five === null || five === void 0 ? void 0 : five.currentMode) === Five.Mode.Panorama;
+let containerWidth;
+let containerHeight;
+// 计算重叠
+let cssOffsetLists = [];
+let cssHeight = 26;
+let basicWidth = 11;
+// 动画过程中 itemsVisible 为 false
+let itemsVisible = true;
+/**
+ * 可见性策略：
+ * 1、当前楼层(假设先不考虑多楼层)
+ * 2、模型未被遮挡（一个 box 有没有被遮挡的计算？ TODO）
+ * */
+const judgeImpacted = (five, itemLabel) => {
+    // 虚拟 VR 仅有一层，不考虑楼层信息
+    const cameraPosition = five.camera.position.clone();
+    const modelPosition = new Vector3(itemLabel.modelPosition[0], itemLabel.modelPosition[1], itemLabel.modelPosition[2]);
+    // 计算点到相机的位置
+    const vectorDistance = modelPosition.distanceTo(cameraPosition);
+    // 判断距离，大于最大可见距离直接不可见 TODO 把距离计算和碰撞拆分开
+    if (maxVisibleDistance !== undefined && five.state.mode === Five.Mode.Panorama) {
+        if (vectorDistance > maxVisibleDistance) {
+            return false;
+        }
+    }
+    return isImpacted(five, modelPosition.clone().sub(cameraPosition).normalize(), cameraPosition, vectorDistance);
+};
+const judgeInViewport = (modelPoint) => {
+    const { camera, model } = five;
+    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 获取
+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 isOverlap = (cssOffset, widthOffset) => {
+    if (cssOffsetLists.length === 0) {
+        return false;
+    }
+    const hasOverlapPoint = cssOffsetLists.find(item => ((cssOffset[0] >= item[0] - widthOffset && cssOffset[0] <= item[0] + widthOffset)
+        || (cssOffset[1] >= item[1] - cssHeight && cssOffset[1] <= item[1] + cssHeight)));
+    return !!hasOverlapPoint;
+};
+const getFormatedItemLabels = (five, labels) => {
+    // 计算位置 & 可见性
+    const newLabels = labels.map(label => {
+        // 不在绑定点位则直接不可见
+        if (five.state.panoIndex !== label.panoIndex) {
+            return Object.assign(Object.assign({}, label), { visible: false });
+        }
+        const cssOffset = getLabelCssOffset(five, label);
+        const curLabelWidth = label.name.length * basicWidth;
+        const strokeLength = getStrokeLength(label.modelPosition[1], displayStrategyType);
+        // 是否加入碰撞检测
+        // 配置加入碰撞检测，则判断碰撞检测
+        // 在可见范围内， 仅在 Panorama 模态计算
+        const isInViewport = five.currentMode === Five.Mode.Panorama
+            ? judgeInViewport(new Vector3(label.position[0], label.position[1], label.position[2]))
+            : true;
+        // 碰撞
+        const isBlocked = modelOcclusionEnable
+            ? judgeImpacted(five, label)
+            : false;
+        const visible = isInViewport && !isBlocked;
+        // 关掉重叠计算
+        // 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 = [];
+    renderItemLabels = getFormatedItemLabels(five, renderItemLabels);
+};
+const handleCameraUpdateCallback = () => {
+    itemsVisible = false;
+    handleCameraUpdate();
+};
+const onFiveModeChange = (mode) => {
+    itemsVisible = false;
+    five.once('initAnimationEnded', (panoIndex, pose, userAction) => {
+        anchorEnabled = mode === Five.Mode.Panorama;
+        itemsVisible = true;
+        if (!userAction)
+            return;
+        else
+            onItemLabelUpdate();
+    });
+};
+const handleCameraUpdate = debounce(() => {
+    itemsVisible = true;
+    onItemLabelUpdate();
+}, 300);
+const onResize = () => {
+    five.once('renderFrame', onItemLabelUpdate);
+};
+const addResizeListener = () => {
+    window.addEventListener('resize', onResize, false);
+};
+const addDataUpdateListener = () => {
+    if (curItemLabels !== itemLabels) {
+        renderItemLabels = transform2RenderData(itemLabels);
+        curItemLabels = itemLabels;
+        onItemLabelUpdate();
+    }
+};
+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.state.mode !== 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, fromPositionVector, obVector, distance);
+        if (!isImpactedRes) {
+            observerIndex = panoIndex;
+            break;
+        }
+    }
+    return typeof observerIndex === "number" ? observers[observerIndex] : undefined;
+};
+const onIconClick = (itemLabel) => {
+    if (five.state.mode === Five.Mode.Panorama)
+        return;
+    const observers = five.work.observers;
+    const fromPositionVector = new Vector3().fromArray(itemLabel.position);
+    const observer = getNearObserverPano(fromPositionVector, observers);
+    if (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.setState(Object.assign(Object.assign({}, cameraCoord), { mode: Five.Mode.Panorama, panoIndex: itemLabel.observerIndex }));
+        // 游走结束更新 render list
+        five.once('initAnimationEnded', () => {
+            renderItemLabels = renderItemLabels.map(item => {
+                return Object.assign(Object.assign({}, item), { isFold: item.id !== itemLabel.id });
+            });
+            five.once('cameraUpdate', () => {
+                renderItemLabels = renderItemLabels.map(item => {
+                    return Object.assign(Object.assign({}, item), { isFold: false });
+                });
+            });
+        });
+    }
+};
+beforeUpdate(() => {
+    addDataUpdateListener();
+});
+onMount(() => {
+    renderItemLabels = transform2RenderData(itemLabels);
+    curItemLabels = itemLabels;
+    onItemLabelUpdate();
+    addResizeListener();
+    five.on('cameraUpdate', handleCameraUpdateCallback);
+    // five.on('modeChange', onFiveModeChange)
+});
+onDestroy(() => {
+    five.off('cameraUpdate', handleCameraUpdateCallback);
+    // five.off('modeChange', onFiveModeChange)
+    window.removeEventListener('resize', onResize, false);
+});
+</script>
+
+<div class="item-labels-container" bind:clientWidth="{containerWidth}" bind:clientHeight="{containerHeight}"
+     style:opacity="{itemsVisible ? 1 : 0}">
+	{#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+		{#if itemLabelItem.visible}
+			<ItemLabelItem
+					itemLabel="{itemLabelItem}"
+					hooks="{hooks}"
+					anchorEnabled="{anchorEnabled}"
+					onIconClick="{onIconClick}"
+			/>
+		{/if}
+	{/each}
+</div>
+
+<style>
+    .item-labels-container {
+        width: 100%;
+        height: 100%;
+        position: relative;
+    }
+</style>

package/libs/ItemLabelPlugin/ItemLabelItem.js

@@ -1,11 +1,13 @@
 /* generated by Svelte v3.49.0 */
 import {
+	HtmlTag,
 	SvelteComponent,
 	append,
 	append_styles,
 	attr,
 	detach,
 	element,
+	empty,
 	init,
 	insert,
 	listen,
@@ -18,15 +20,103 @@ import {
 	text
 } from "svelte/internal";
 
-import "./events.type";
+import './events.type';
 import classNames from 'classnames';
 
 function add_css(target) {
-	append_styles(target, "svelte-1gam1w3", ".item-label-item.svelte-1gam1w3.svelte-1gam1w3{position:absolute;z-index:0;transform:none;cursor:pointer;pointer-events:none;user-select:none;animation:svelte-1gam1w3-fadeIn .3s ease-in}.item-label-item.fold.svelte-1gam1w3>.item-label-item__text-wrap.svelte-1gam1w3{visibility:hidden}.item-label-item.fold.svelte-1gam1w3>.item-label-item__bar.anchor.svelte-1gam1w3{visibility:hidden}.item-label-item.fold.svelte-1gam1w3>.item-label-item__bar.anchor.svelte-1gam1w3:after{visibility:visible}.item-label-item__text-wrap.svelte-1gam1w3.svelte-1gam1w3{height:fit-content;padding:12px 20px 12px 12px;position:absolute;width:max-content;max-width:473px;min-height:92px;background-image:linear-gradient(269deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.60) 49%, rgba(31, 38, 46, 0.70) 100%);border:1.5px solid rgba(255, 255, 255, .65);border-radius:3px;color:white;transform:translate(-50%, 0);display:flex;justify-content:flex-start;align-items:center;box-sizing:border-box;overflow:hidden;pointer-events:all}.icon-wrap.svelte-1gam1w3.svelte-1gam1w3{width:68px;height:100%;display:flex;justify-content:center;align-content:center}.icon.svelte-1gam1w3.svelte-1gam1w3{width:68px;height:68px;background-repeat:no-repeat;background-size:contain;background-position:center}.item-label-text.svelte-1gam1w3.svelte-1gam1w3{margin-left:12px;padding-left:12px;min-height:68px;height:auto;display:flex;flex-flow:column;justify-content:space-around;align-content:flex-start;border-left:solid rgba(255, 255, 255, .2) 1px;border-top:solid rgba(255, 255, 255, .2) 0;border-right:solid rgba(255, 255, 255, .2) 0;border-bottom:solid rgba(255, 255, 255, .2) 0;pointer-events:auto}.item-model.svelte-1gam1w3.svelte-1gam1w3{white-space:nowrap;font-size:22px;font-weight:bold;line-height:30px}.item-name.svelte-1gam1w3.svelte-1gam1w3{height:auto;word-wrap:break-word;word-break:break-all;font-size:20px;line-height:28px}.item-label-item__bar.svelte-1gam1w3.svelte-1gam1w3{position:absolute;bottom:0;width:3px;background-image:linear-gradient(to bottom, white, rgba(255, 255, 255, 0));box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.20);pointer-events:none}.item-label-item__bar.anchor.svelte-1gam1w3.svelte-1gam1w3:after{content:'';position:absolute;bottom:0;width:24px;height:24px;background-image:url(\"//vrlab-public.ljcdn.com/common/file/web/67e7a198-28c9-47dc-879b-507bd3ae600c.png \");background-position:center;background-size:contain;transform:translate(-10.5px, 50%)}@keyframes svelte-1gam1w3-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}");
+	append_styles(target, "svelte-fxbyy", ".item-label-item.svelte-fxbyy.svelte-fxbyy{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-fxbyy-fadeIn 0.3s ease-in;animation:svelte-fxbyy-fadeIn 0.3s ease-in}.item-label-item.fold.svelte-fxbyy>.item-label-item__text-wrap.svelte-fxbyy{visibility:hidden}.item-label-item.fold.svelte-fxbyy>.item-label-item__bar.anchor.svelte-fxbyy{visibility:hidden}.item-label-item.fold.svelte-fxbyy>.item-label-item__bar.anchor.svelte-fxbyy:after{visibility:visible}.item-label-item__text-wrap.svelte-fxbyy.svelte-fxbyy{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(\n      269deg,\n      rgba(0, 0, 0, 0.5) 0%,\n      rgba(0, 0, 0, 0.6) 49%,\n      rgba(31, 38, 46, 0.7) 100%\n    );border:1.5px solid rgba(255, 255, 255, 0.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-fxbyy.svelte-fxbyy{width:3.54167rem;height:100%;display:flex;justify-content:center;align-content:center}.icon.svelte-fxbyy.svelte-fxbyy{width:3.54167rem;height:3.54167rem;background-repeat:no-repeat;background-size:contain;background-position:center}.item-label-text.svelte-fxbyy.svelte-fxbyy{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, 0.2) 1px;border-top:solid rgba(255, 255, 255, 0.2) 0;border-right:solid rgba(255, 255, 255, 0.2) 0;border-bottom:solid rgba(255, 255, 255, 0.2) 0;pointer-events:auto}.item-model.svelte-fxbyy.svelte-fxbyy{white-space:nowrap;font-size:1.14583rem;font-weight:bold;line-height:1.5625rem}.item-name.svelte-fxbyy.svelte-fxbyy{height:auto;word-wrap:break-word;word-break:break-all;font-size:1.04167rem;line-height:1.45833rem}.item-label-item__bar.svelte-fxbyy.svelte-fxbyy{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.2);pointer-events:none}.item-label-item__bar.anchor.svelte-fxbyy.svelte-fxbyy: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-fxbyy-fadeIn{from{opacity:0}to{opacity:1}}@keyframes svelte-fxbyy-fadeIn{from{opacity:0}to{opacity:1}}");
 }
 
-// (21:2) {#if itemLabel.icon}
+// (25:4) {: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 = space();
+			div = element("div");
+			span0 = element("span");
+			t1 = text(t1_value);
+			t2 = space();
+			span1 = element("span");
+			t3 = text(t3_value);
+			attr(span0, "class", "item-model svelte-fxbyy");
+			attr(span1, "class", "item-name svelte-fxbyy");
+			attr(div, "class", "item-label-text svelte-fxbyy");
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, t0, anchor);
+			insert(target, div, anchor);
+			append(div, span0);
+			append(span0, t1);
+			append(div, t2);
+			append(div, span1);
+			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) + "")) set_data(t1, t1_value);
+			if (dirty & /*itemLabel*/ 1 && t3_value !== (t3_value = /*itemLabel*/ ctx[0].name + "")) set_data(t3, t3_value);
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(t0);
+			if (detaching) detach(div);
+		}
+	};
+}
+
+// (23:4) {#if itemLabel.customElement}
 function create_if_block(ctx) {
+	let html_tag;
+	let raw_value = /*itemLabel*/ ctx[0].customElement + "";
+	let html_anchor;
+
+	return {
+		c() {
+			html_tag = new HtmlTag(false);
+			html_anchor = empty();
+			html_tag.a = html_anchor;
+		},
+		m(target, anchor) {
+			html_tag.m(raw_value, target, anchor);
+			insert(target, html_anchor, anchor);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*itemLabel*/ 1 && raw_value !== (raw_value = /*itemLabel*/ ctx[0].customElement + "")) html_tag.p(raw_value);
+		},
+		d(detaching) {
+			if (detaching) detach(html_anchor);
+			if (detaching) html_tag.d();
+		}
+	};
+}
+
+// (26:6) {#if itemLabel.icon}
+function create_if_block_1(ctx) {
 	let div1;
 	let div0;
 	let div0_style_value;
@@ -37,9 +127,9 @@ function create_if_block(ctx) {
 		c() {
 			div1 = element("div");
 			div0 = element("div");
-			attr(div0, "class", "icon svelte-1gam1w3");
+			attr(div0, "class", "icon svelte-fxbyy");
 			attr(div0, "style", div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon})`);
-			attr(div1, "class", "icon-wrap svelte-1gam1w3");
+			attr(div1, "class", "icon-wrap svelte-fxbyy");
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
@@ -64,116 +154,93 @@ function create_if_block(ctx) {
 }
 
 function create_fragment(ctx) {
-	let div3;
-	let div1;
-	let t0;
+	let div2;
 	let div0;
-	let span0;
-	let t1_value = (/*itemLabel*/ ctx[0].code || /*itemLabel*/ ctx[0].id) + "";
-	let t1;
-	let t2;
-	let span1;
-	let t3_value = /*itemLabel*/ ctx[0].name + "";
-	let t3;
+	let div0_class_value;
+	let t;
+	let div1;
 	let div1_class_value;
-	let t4;
-	let div2;
 	let div2_class_value;
-	let div3_class_value;
 	let mounted;
 	let dispose;
-	let if_block = /*itemLabel*/ ctx[0].icon && create_if_block(ctx);
+
+	function select_block_type(ctx, dirty) {
+		if (/*itemLabel*/ ctx[0].customElement) return create_if_block;
+		return create_else_block;
+	}
+
+	let current_block_type = select_block_type(ctx, -1);
+	let if_block = current_block_type(ctx);
 
 	return {
 		c() {
-			div3 = element("div");
-			div1 = element("div");
-			if (if_block) if_block.c();
-			t0 = space();
-			div0 = element("div");
-			span0 = element("span");
-			t1 = text(t1_value);
-			t2 = space();
-			span1 = element("span");
-			t3 = text(t3_value);
-			t4 = space();
 			div2 = element("div");
-			attr(span0, "class", "item-model svelte-1gam1w3");
-			attr(span1, "class", "item-name svelte-1gam1w3");
-			attr(div0, "class", "item-label-text svelte-1gam1w3");
-			attr(div1, "class", div1_class_value = "" + (null_to_empty(classNames("item-label-item__text-wrap")) + " svelte-1gam1w3"));
-			set_style(div1, "bottom", `${/*itemLabel*/ ctx[0].strokeLength}px`);
-			attr(div2, "class", div2_class_value = "" + (null_to_empty(classNames("item-label-item__bar", { anchor: /*anchorEnabled*/ ctx[1] })) + " svelte-1gam1w3"));
-			set_style(div2, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
-			attr(div3, "class", div3_class_value = "" + (null_to_empty(classNames("item-label-item", { fold: /*itemLabel*/ ctx[0].isFold })) + " svelte-1gam1w3"));
-			set_style(div3, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
-			set_style(div3, "transform", /*itemLabel*/ ctx[0].transform, false);
+			div0 = element("div");
+			if_block.c();
+			t = space();
+			div1 = element("div");
+			attr(div0, "class", div0_class_value = "" + (null_to_empty(classNames('item-label-item__text-wrap')) + " svelte-fxbyy"));
+			set_style(div0, "bottom", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+			attr(div1, "class", div1_class_value = "" + (null_to_empty(classNames('item-label-item__bar', { anchor: /*anchorEnabled*/ ctx[1] })) + " svelte-fxbyy"));
+			set_style(div1, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+			attr(div2, "class", div2_class_value = "" + (null_to_empty(classNames('item-label-item', { fold: /*itemLabel*/ ctx[0].isFold })) + " svelte-fxbyy"));
+			set_style(div2, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
+			set_style(div2, "transform", /*itemLabel*/ ctx[0].transform, false);
 		},
 		m(target, anchor) {
-			insert(target, div3, anchor);
-			append(div3, div1);
-			if (if_block) if_block.m(div1, null);
-			append(div1, t0);
-			append(div1, div0);
-			append(div0, span0);
-			append(span0, t1);
-			append(div0, t2);
-			append(div0, span1);
-			append(span1, t3);
-			append(div3, t4);
-			append(div3, div2);
+			insert(target, div2, anchor);
+			append(div2, div0);
+			if_block.m(div0, null);
+			append(div2, t);
+			append(div2, div1);
 
 			if (!mounted) {
-				dispose = listen(div1, "click", /*onClick*/ ctx[3]);
+				dispose = listen(div0, "click", /*onClick*/ ctx[3]);
 				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(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) + "")) set_data(t1, t1_value);
-			if (dirty & /*itemLabel*/ 1 && t3_value !== (t3_value = /*itemLabel*/ ctx[0].name + "")) set_data(t3, t3_value);
-
 			if (dirty & /*itemLabel*/ 1) {
-				set_style(div1, "bottom", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+				set_style(div0, "bottom", `${/*itemLabel*/ ctx[0].strokeLength}px`);
 			}
 
-			if (dirty & /*anchorEnabled*/ 2 && div2_class_value !== (div2_class_value = "" + (null_to_empty(classNames("item-label-item__bar", { anchor: /*anchorEnabled*/ ctx[1] })) + " svelte-1gam1w3"))) {
-				attr(div2, "class", div2_class_value);
+			if (dirty & /*anchorEnabled*/ 2 && div1_class_value !== (div1_class_value = "" + (null_to_empty(classNames('item-label-item__bar', { anchor: /*anchorEnabled*/ ctx[1] })) + " svelte-fxbyy"))) {
+				attr(div1, "class", div1_class_value);
 			}
 
 			if (dirty & /*itemLabel*/ 1) {
-				set_style(div2, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+				set_style(div1, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
 			}
 
-			if (dirty & /*itemLabel*/ 1 && div3_class_value !== (div3_class_value = "" + (null_to_empty(classNames("item-label-item", { fold: /*itemLabel*/ ctx[0].isFold })) + " svelte-1gam1w3"))) {
-				attr(div3, "class", div3_class_value);
+			if (dirty & /*itemLabel*/ 1 && div2_class_value !== (div2_class_value = "" + (null_to_empty(classNames('item-label-item', { fold: /*itemLabel*/ ctx[0].isFold })) + " svelte-fxbyy"))) {
+				attr(div2, "class", div2_class_value);
 			}
 
 			if (dirty & /*itemLabel*/ 1) {
-				set_style(div3, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
+				set_style(div2, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
 			}
 
 			if (dirty & /*itemLabel*/ 1) {
-				set_style(div3, "transform", /*itemLabel*/ ctx[0].transform, false);
+				set_style(div2, "transform", /*itemLabel*/ ctx[0].transform, false);
 			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(div3);
-			if (if_block) if_block.d();
+			if (detaching) detach(div2);
+			if_block.d();
 			mounted = false;
 			dispose();
 		}