@realsee/dnalogel 2.1.0-alpha.5 → 2.1.0-alpha.6

package/libs/ItemLabelPlugin/Plugin.js

@@ -1,5 +1,5 @@
 import { Five, Subscribe } from "@realsee/five";
-import ItemLabelComponent from './ItemLabelComponent.svelte';
+import ItemLabelComponent from './ItemLabelComponent';
 import { ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE } from "./typings";
 import { parseItemLabelPluginData } from "./utils/parseData";
 const defaultMaxVisibleDistance = undefined;

package/libs/ItemLabelPlugin/typings.d.ts

@@ -1,6 +1,6 @@
 import type { Subscribe } from "@realsee/five";
 import type { PluginEvent } from "./events.type";
-import type ItemLabelComponent from './ItemLabelComponent.svelte';
+import type ItemLabelComponent from './ItemLabelComponent';
 export declare enum ITEM_LABEL_PLUGIN_DISPLAY_STRATEGY_TYPE {
     SMALL = "small",
     MIDLLE = "middle",

package/libs/ModelItemLabelPlugin/ModelItemLabelPlugin.js

@@ -1,5 +1,5 @@
 import { Five, Subscribe } from "@realsee/five";
-import ItemLabelComponent from './ItemLabelComponent.svelte';
+import ItemLabelComponent from './ItemLabelComponent';
 import { DISPLAY_STRATEGY_TYPE } from "./typings";
 import { parseModelItemLabelPluginData } from "./utils/parseData";
 export const ModelItemLabelPlugin = (five, params) => {

package/libs/ModelItemLabelPlugin/typings.d.ts

@@ -1,6 +1,6 @@
 import type { Subscribe } from "@realsee/five";
 import type { PluginEvent } from "./events.type";
-import type ItemLabelComponent from './ItemLabelComponent.svelte';
+import type ItemLabelComponent from './ItemLabelComponent';
 export declare enum DISPLAY_STRATEGY_TYPE {
     SMALL = "small",
     MIDLLE = "middle",

package/libs/ModelRoomLabelPlugin/Controller.js

@@ -1,4 +1,4 @@
-import RoomLabelItems from './RoomLabelItems.svelte';
+import RoomLabelItems from './RoomLabelItems';
 import { parseModelRoomLabelPluginData } from './utils/parseData';
 export class ModelRoomLabelController {
     constructor(five) {

package/libs/PanoDoorLabelPlugin/Controller.js

@@ -1,6 +1,6 @@
 import { Euler, Quaternion, Raycaster, Vector3 } from 'three';
 import { BasePanoPluginController } from './BaseController';
-import DoorLabelItem from './DoorLabelItem.svelte';
+import DoorLabelItem from './DoorLabelItem';
 import { getCameraToward, getDistance, getToward, isTwoRectOverlaped } from './utils';
 const defaultBaseOptions = { userAction: true };
 /**

package/libs/PanoRulerProPlugin/Controller.js

@@ -1,4 +1,4 @@
-import RulerItems from './RulerItems.svelte';
+import RulerItems from './RulerItems';
 export default class Controller {
     constructor(five, params) {
         var _a, _b;

package/libs/PanoSpatialTagPlugin/Plugin.js

@@ -1,8 +1,8 @@
 import * as THREE from 'three';
 import { Five, Subscribe } from '@realsee/five';
 import CSS3DRenderPlugin from '../CSS3DRenderPlugin';
-import Origins from './Components/origins.svelte';
-import Tag from './Components/tag.svelte';
+import Origins from './Components/origins';
+import Tag from './Components/tag';
 import { pluginStyle } from './style';
 import render from '../shared-utils/tinyEJSrender';
 const MESH_SIZE = 0.001;

package/libs/PanoTagPlugin/controller/index.js

@@ -2,8 +2,8 @@ import { Subscribe } from '@realsee/five';
 import { Quaternion } from 'three';
 import objectAssignDeep from 'object-assign-deep';
 import { writable } from 'svelte/store';
-import PointTagSvelte from '../Components/PointTag.svelte';
-import TagContentSvelte from '../Components/Tag/index.svelte';
+import PointTagSvelte from '../Components/PointTag';
+import TagContentSvelte from '../Components/Tag/index';
 import { addDebugPoints, arrayPositionToVector3, actionAfterFiveModelLoad, debounce, normalPositionToPositions, planeNormal, resizeObserver, throttle, } from '../utils';
 import { TagComputer } from './TagComputer';
 import { CSS3DRenderPlugin } from '../../CSS3DRenderPlugin';
@@ -211,7 +211,7 @@ class PanoTagPluginController extends TagComputer {
         var _a, _b, _c, _d, _e, _f;
         this.disposeAllCSS3DContainer();
         (_a = this.PointTagSvelte) === null || _a === void 0 ? void 0 : _a.$destroy();
-        this.filter3DTag().forEach((tag) => { var _a; return (_a = tag.tag3DContentSvelte) === null || _a === void 0 ? void 0 : _a.svelteApp.$destroy(); });
+        this.filter3DTag().forEach((tag) => { var _a; return (_a = tag.tag3DContentSvelte) === null || _a === void 0 ? void 0 : _aApp.$destroy(); });
         this.tags = [];
         (_b = this.store.disposers) === null || _b === void 0 ? void 0 : _b.forEach((d) => d === null || d === void 0 ? void 0 : d());
         this.store.disposers = [];
@@ -322,7 +322,7 @@ class PanoTagPluginController extends TagComputer {
         (_a = this.PointTagSvelte) === null || _a === void 0 ? void 0 : _a.$set({ tags: [] });
         this.filter3DTag().forEach((tag) => {
             var _a;
-            (_a = tag.tag3DContentSvelte) === null || _a === void 0 ? void 0 : _a.svelteApp.$destroy();
+            (_a = tag.tag3DContentSvelte) === null || _a === void 0 ? void 0 : _aApp.$destroy();
             tag.tag3DContentSvelte = undefined;
         });
     }
@@ -451,7 +451,7 @@ class PanoTagPluginController extends TagComputer {
         (_a = this.PointTagSvelte) === null || _a === void 0 ? void 0 : _a.$set({ state: this.state, temporaryState: this.temporaryState, withAnimation: this.store.visibleWithAnimation });
         this.filter3DTag().forEach((tag) => {
             var _a;
-            (_a = tag.tag3DContentSvelte) === null || _a === void 0 ? void 0 : _a.svelteApp.$set({
+            (_a = tag.tag3DContentSvelte) === null || _a === void 0 ? void 0 : _aApp.$set({
                 state: this.state,
                 temporaryState: this.temporaryState,
                 withAnimation: this.store.visibleWithAnimation,

package/libs/PanoTagPlugin/typings/controller.d.ts

@@ -1,7 +1,7 @@
 import type { PanoTagPluginController } from '../index';
 import type { ContentType, DimensionType, TagId, PointType, Tag } from '../typings';
 import type * as BasePlugin from '../../base/BasePlugin';
-import type TagContentSvelte from '../Components/Tag/index.svelte';
+import type TagContentSvelte from '../Components/Tag/index';
 import type { Vector3 } from 'three';
 import type { Create3DDomContainerReturnType } from '../../CSS3DRenderPlugin';
 import type { Writable } from 'svelte/store';

package/libs/floorplan/MapviewFloorplanPlugin/Controller.js

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import to from '../../shared-utils/to';
 import equal from '../../shared-utils/equal';
-import Main from '../Components/Main.svelte';
+import Main from '../Components/Main';
 import formatData from '../utils/formatData';
 import { CAMERA_IMAGE } from '../Assets/camera';
 import { omit } from '../../shared-utils/filter';

package/libs/floorplan/ModelFloorplanPlugin/Controller.js

@@ -1,6 +1,6 @@
 import to from '../../shared-utils/to';
 import equal from '../../shared-utils/equal';
-import Main from '../Components/Main.svelte';
+import Main from '../Components/Main';
 import formatData from '../utils/formatData';
 import { CAMERA_IMAGE } from '../Assets/camera';
 import { omit } from '../../shared-utils/filter';

package/libs/floorplan/PanoFloorplanRadarPlugin/Controller.js

@@ -1,4 +1,4 @@
-import Main from './Components/Main.svelte';
+import Main from './Components/Main';
 import equal from '../../shared-utils/equal';
 import { CAMERA_IMAGE } from '../Assets/camera';
 import * as BasePlugin from '../../base/BasePluginWithData';

package/libs/floorplan/TopviewFloorplanPlugin/Controller.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 import equal from '../../shared-utils/equal';
-import Main from '../Components/Main.svelte';
+import Main from '../Components/Main';
 import formatData from '../utils/formatData';
 import { CAMERA_IMAGE } from '../Assets/camera';
 import { omit } from '../../shared-utils/filter';

package/libs/shared-utils/Object3DHelper/Base/BaseController.d.ts

@@ -24,7 +24,7 @@ export declare abstract class BaseController<T extends BaseHelper = BaseHelper,
     updateHelperPosition(): void;
     updateHelperQuaternion(): void;
     setHelperMatrix4(matrix4: THREE.Matrix4, origin?: THREE.Vector3): void;
-    setHelperQuaternion(quaternion: THREE.Quaternion, origin: THREE.Vector3): void;
+    applyHelperQuaternion(quaternion: THREE.Quaternion, origin: THREE.Vector3): void;
     applyHelperScaleMatrix4(matrix4: THREE.Matrix4, params?: {
         origin?: THREE.Vector3;
         helperOrigin?: THREE.Vector3;

package/libs/shared-utils/Object3DHelper/Base/BaseController.js

@@ -132,7 +132,7 @@ export class BaseController {
     setHelperMatrix4(matrix4, origin) {
         this.helperObject3D.updateMatrix4(matrix4, origin);
     }
-    setHelperQuaternion(quaternion, origin) {
+    applyHelperQuaternion(quaternion, origin) {
         this.helperObject3D.applyHelperQuaternion(quaternion, origin);
     }
     applyHelperScaleMatrix4(matrix4, params) {

package/libs/shared-utils/Object3DHelper/Helper/RectangleScaleHelper.d.ts

@@ -19,6 +19,7 @@ export declare class RectangleScaleHelper<T extends OriginObjectType = OriginObj
     private enabled;
     constructor(originObject3D: T, container: Element, camera: THREE.Camera, scene: THREE.Scene);
     updatePosition(): void;
+    updateQuaternion(): void;
     updateMatrix4(matrix: THREE.Matrix4): void;
     showDraggingHelper(): void;
     applyHelperScaleMatrix4(matrix: THREE.Matrix4, params?: {

package/libs/shared-utils/Object3DHelper/Helper/RectangleScaleHelper.js

@@ -77,6 +77,10 @@ export class RectangleScaleHelper extends RectangleScaleHelperAbstract {
         (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject.position.copy(this.originObject3D.position);
         (_b = this.plane) === null || _b === void 0 ? void 0 : _b.position.copy(this.originObject3D.position);
     }
+    updateQuaternion() {
+        var _a;
+        (_a = this.plane) === null || _a === void 0 ? void 0 : _a.quaternion.copy(this.originObject3D.quaternion);
+    }
     // public setPosition(position: Vector3) {
     //   this.css3DInstance?.css3DObject.position.copy(position)
     //   this.plane?.position.copy(position)

package/libs/shared-utils/Object3DHelper/index.js

@@ -96,11 +96,11 @@ export class Object3DHelper {
                     const { quaternion, origin } = rotate;
                     if (quaternion) {
                         if (controller !== this.controllers.moveController)
-                            (_a = this.controllers.moveController) === null || _a === void 0 ? void 0 : _a.setHelperQuaternion(quaternion, origin);
+                            (_a = this.controllers.moveController) === null || _a === void 0 ? void 0 : _a.applyHelperQuaternion(quaternion, origin);
                         if (controller !== this.controllers.rotateController)
-                            (_b = this.controllers.rotateController) === null || _b === void 0 ? void 0 : _b.setHelperQuaternion(quaternion, origin);
+                            (_b = this.controllers.rotateController) === null || _b === void 0 ? void 0 : _b.applyHelperQuaternion(quaternion, origin);
                         if (controller !== this.controllers.scaleController)
-                            (_c = this.controllers.scaleController) === null || _c === void 0 ? void 0 : _c.setHelperQuaternion(quaternion, origin);
+                            (_c = this.controllers.scaleController) === null || _c === void 0 ? void 0 : _c.applyHelperQuaternion(quaternion, origin);
                         (_d = this.helpers.outlineHelper) === null || _d === void 0 ? void 0 : _d.applyQuaternion(quaternion);
                     }
                 }

package/package.json

@@ -8,7 +8,7 @@
   "repository": "https://github.com/realsee-developer/dnalogel.git",
   "description": "如视 VR 看房插件合集",
   "private": false,
-  "version": "2.1.0-alpha.5",
+  "version": "2.1.0-alpha.6",
   "license": "SEE LICENSE IN TERMS.txt",
   "scripts": {
     "build": "yarn run tsb && yarn run build:rollup && yarn run build:components && yarn build:docs",

package/libs/ItemLabelPlugin/ItemLabelComponent.svelte

@@ -1,251 +0,0 @@
-<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.svelte

@@ -1,183 +0,0 @@
-<script>import "./events.type";
-import classNames from 'classnames';
-export let itemLabel;
-export let hooks;
-export let anchorEnabled;
-export let onIconClick;
-// const defaultIcon = '//vrlab-public.ljcdn.com/common/file/web/c8591aaa-e62b-4e31-8fed-671483ace37f.svg\n'
-function onClick() {
-    hooks.emit('onLabelClick', itemLabel);
-}
-let customElement;
-$: {
-    if (typeof itemLabel.render === 'function' && customElement) {
-        if (customElement.children.length === 0) {
-            const child = itemLabel.render(itemLabel);
-            if (child) {
-                customElement.appendChild(child);
-            }
-        }
-    }
-}
-</script>
-
-<div class={classNames("item-label-item", { fold: itemLabel.isFold })}
-     style:z-index="{itemLabel.zIndex}"
-     style:transform="{itemLabel.transform}"
->
-	<div class={classNames("item-label-item__text-wrap", { 'item-label-item__custom': Boolean(typeof itemLabel.render === 'function') })}
-	     style="bottom: {`${itemLabel.strokeLength}px`}"
-	     on:click="{onClick}"
-	>
-        {#if Boolean(typeof itemLabel.render === 'function')}
-            <div bind:this={customElement}></div>
-        {:else}
-            {#if itemLabel.icon}
-                <div class="icon-wrap"
-                    on:click="{(e) => onIconClick(itemLabel)}"
-                >
-                    <div class="icon" style={`background-image: url(${itemLabel.icon})`} ></div>
-                </div>
-            {/if}
-            <div class="item-label-text">
-                <span class="item-model">{itemLabel.code || itemLabel.id}</span>
-                <span class="item-name">{itemLabel.name}</span>
-            </div>
-        {/if}
-		
-	</div>
-	<div class={classNames("item-label-item__bar", { anchor: anchorEnabled })}
-	     style="height: {`${itemLabel.strokeLength}px`}">
-	</div>
-</div>
-
-<style>
-    .item-label-item {
-        position: absolute;
-        z-index: 0;
-        transform: none;
-        cursor: pointer;
-        pointer-events: none;
-        user-select: none;
-        animation: fadeIn .3s ease-in;
-    }
-
-    .item-label-item.fold >.item-label-item__text-wrap  {
-	    visibility: hidden;
-    }
-
-    .item-label-item.fold >.item-label-item__bar.anchor {
-	    visibility: hidden;
-    }
-
-    .item-label-item.fold >.item-label-item__bar.anchor:after  {
-	    visibility: visible;
-    }
-
-    .item-label-item__text-wrap {
-        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;
-    }
-
-    .item-label-item__custom {
-        padding: 0;
-        max-width: unset;
-        min-height: unset;
-        background-image: unset;
-        border: 0;
-        border-radius: 0;
-    }
-
-    .icon-wrap {
-        width: 68px;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-content: center;
-    }
-
-    .icon {
-        width: 68px;
-        height: 68px;
-        background-repeat: no-repeat;
-        background-size: contain;
-        background-position: center;
-    }
-
-    .item-label-text {
-        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 {
-        white-space: nowrap;
-        font-size: 22px;
-        font-weight: bold;
-        line-height: 30px;
-    }
-
-    .item-name {
-        height: auto;
-        word-wrap: break-word;
-        word-break: break-all;
-        font-size: 20px;
-        line-height: 28px;
-    }
-
-    .item-label-item__bar {
-        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: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 fadeIn {
-        from {
-            opacity: 0
-        }
-        to {
-            opacity: 1
-        }
-    }
-</style>
-