@realsee/dnalogel 3.81.13 → 4.0.0-webgpu.3

package/dist/internal/model-item-label-BwJ5Dgnp.js

@@ -0,0 +1,179 @@
+import { r as e } from "./rolldown-runtime-B0aSnxlc.js";
+import { E as t, G as n, J as r, K as i, L as a, M as o, O as s, P as c, Q as l, R as u, V as d, X as f, Y as p, b as m, h, it as g, j as _, k as v, m as y, n as b, o as x, p as S, rt as C, st as w, t as T, u as E, z as D } from "./component.svelte-D5LYqt50.js";
+import { t as O } from "./classnames-DUxZNrrI.js";
+import { t as k } from "./debounce-Dsju-hoR.js";
+import * as A from "three/webgpu";
+import { Five as j, Subscribe as M } from "@realsee/five-webgpu";
+//#region src/ModelItemLabelPlugin/typings.ts
+var N = /* @__PURE__ */ function(e) {
+	return e.SMALL = "small", e.MIDDLE = "middle", e.LARGE = "large", e.EXTRA_LARGE = "x-large", e;
+}({}), P = /* @__PURE__ */ e(O()), F = c("<div><div class=\"item-label-item__text-wrap svelte-xsavb3\"><span class=\"item-label-item__text svelte-xsavb3\"> </span></div> <div class=\"item-label-item__bar svelte-xsavb3\"></div></div>");
+function I(e, t) {
+	g(t, !1);
+	let s = b(t, "itemLabel", 8), c = b(t, "hooks", 8);
+	function l() {
+		c().emit("onLabelClick", s());
+	}
+	x();
+	var f = F();
+	let m;
+	var v = i(f), T = i(v), E = r(T, !0);
+	w(v);
+	var D = p(v, 2);
+	w(f), n((e, t) => {
+		y(f, 1, e, "svelte-xsavb3"), m = S(f, "", m, {
+			"z-index": (u(s()), d(() => s().zIndex)),
+			transform: (u(s()), d(() => s().transform))
+		}), S(v, `top: ${u(s()), d(() => `-${s().strokeLength + 26}px`) ?? ""}`), _(E, t), S(D, `height: ${u(s()), d(() => `${s().strokeLength}px`) ?? ""}`);
+	}, [() => h((u(P.default), u(s()), d(() => (0, P.default)("item-label-item", { visible: s().visible })))), () => (u(s()), d(() => s().name.length > 6 ? `${s().name.slice(0, 6)}...` : s().name))]), a("click", T, l), o(e, f), C();
+}
+//#endregion
+//#region src/ModelItemLabelPlugin/ItemLabelComponent.svelte
+var L = c("<div class=\"item-labels-container svelte-1pvptkt\"></div>");
+function R(e, r) {
+	g(r, !1);
+	let { Raycaster: i, Vector3: a } = A, c = b(r, "five", 8), u = b(r, "modelOcclusionEnable", 8), d = b(r, "itemLabels", 8), p = b(r, "hooks", 8), h = b(r, "displayStrategyType", 8), _ = null, y = f(null), T = f(), O = f(), j = [], M = f(!0), P = (e, t) => {
+		let n = new i(), r = e.camera.position.clone(), o = new a().fromArray(t.modelPosition), s = o.distanceTo(r);
+		n.set(r.clone(), o.clone().sub(r).normalize());
+		let [c] = e.model.intersectRaycaster(n);
+		return !(c && c.distance + 1 < s);
+	}, F = (e, t) => {
+		let n = new a(t.modelPosition[0], t.modelPosition[1], t.modelPosition[2]), r = e.project2d(n);
+		return [r?.x, r?.y];
+	}, R = (e) => `translate(${e[0]}px, ${e[1]}px)`, z = (e, t) => j.length !== 0 && !!j.find((n) => e[0] >= n[0] - t && e[0] <= n[0] + t || e[1] >= n[1] - 26 && e[1] <= n[1] + 26);
+	function B(e, t) {
+		switch (t) {
+			case N.SMALL: return Math.ceil(-27.78 * e + 85);
+			case N.MIDDLE: return Math.ceil(-38.9 * e + 130);
+			case N.LARGE: return Math.ceil(-44.44 * e + 140);
+			case N.EXTRA_LARGE: return Math.ceil(-92.59 * e + 300);
+		}
+	}
+	let V = (e, t) => {
+		let n = t.map((t) => {
+			let n = F(e, t), r = t.name.length * 11, i = B(t.modelPosition[1], h()), a = (!u() || P(e, t)) && !z([n[0], n[1] + i], r);
+			if (!a) return {
+				...t,
+				visible: a
+			};
+			j.push(n);
+			let o = R(n);
+			return {
+				...t,
+				visible: a,
+				transform: o,
+				strokeLength: i
+			};
+		}), r = n.filter(({ visible: e }) => e).map((t) => ({
+			itemLabelItem: t,
+			distance: new a(t.modelPosition[0], t.modelPosition[1], t.modelPosition[2]).clone().distanceTo(e.camera.position)
+		})).sort((e, t) => e.distance - t.distance);
+		return n.map((e) => {
+			let t = r.findIndex((t) => t.itemLabelItem.id === e.id);
+			return t === void 0 ? e : {
+				...e,
+				zIndex: t * 10
+			};
+		});
+	}, H = () => {
+		j = [], l(y, V(c(), D(y)));
+	};
+	t(() => {
+		K();
+	});
+	let U = () => {
+		l(M, !1), W();
+	};
+	v(() => {
+		l(y, d()), _ = d(), H(), G(), c().on("cameraUpdate", U);
+	});
+	let W = k(() => {
+		l(M, !0), H();
+	}, 300), G = () => {
+		window.addEventListener("resize", q, !1);
+	}, K = () => {
+		_ !== d() && (l(y, d()), _ = d(), H());
+	}, q = () => {
+		c().once("renderFrame", H);
+	};
+	s(() => {
+		c().off("cameraUpdate", U), window.removeEventListener("resize", q, !1);
+	}), x();
+	var J = L();
+	let Y;
+	m(J, 5, () => D(y), (e) => e.id, (e, t) => {
+		I(e, {
+			get itemLabel() {
+				return D(t);
+			},
+			get hooks() {
+				return p();
+			}
+		});
+	}), w(J), n(() => Y = S(J, "", Y, { opacity: +!!D(M) })), E(J, "clientWidth", (e) => l(T, e)), E(J, "clientHeight", (e) => l(O, e)), o(e, J), C();
+}
+//#endregion
+//#region src/ModelItemLabelPlugin/utils/parseData.ts
+function z(e) {
+	return e.model_item_labels.map((e) => ({
+		modelPosition: [
+			e.position[0],
+			e.position[1] + e.size[1],
+			e.position[2]
+		],
+		...e
+	}));
+}
+//#endregion
+//#region src/ModelItemLabelPlugin/ModelItemLabelPlugin.ts
+var B = (e, t) => {
+	let n = {
+		container: document.createElement("div"),
+		data: null,
+		enabled: !0,
+		fiveModeEnabled: void 0,
+		itemLabels: [],
+		wrapper: null,
+		app: void 0,
+		hooks: new M(),
+		modelOcclusionEnable: t?.modelOcclusionEnable ?? !0,
+		displayStrategyType: t?.displayStrategyType ?? N.SMALL
+	};
+	n.container.setAttribute("class", "model-item-label-plugin-container"), n.container.style.cssText = "\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        z-index: 5;\n    ", n.container.style.pointerEvents = "none";
+	let r = (e) => (n.wrapper = e, e.appendChild(n.container), c(), !0), i = (e) => {
+		n.itemLabels = z(e), c();
+	}, a = () => (n.enabled || (n.enabled = !0, c()), !0), o = () => (n.enabled && (n.enabled = !1, c()), !0), s = () => {
+		u(), n.container.remove();
+	}, c = () => {
+		n.wrapper && (!n.enabled || !n.fiveModeEnabled ? (n.app?.destroy(), n.app = void 0) : n.app ? n.app.update({
+			five: e,
+			itemLabels: n.itemLabels
+		}) : n.app = T(R, n.container, {
+			five: e,
+			modelOcclusionEnable: n.modelOcclusionEnable,
+			itemLabels: n.itemLabels,
+			hooks: n.hooks,
+			displayStrategyType: n.displayStrategyType
+		}));
+	}, l = () => {
+		e.on("modeChange", d), e.once("dispose", s);
+	}, u = () => {
+		e.off("modeChange", d);
+	}, d = (t) => {
+		n.enabled && (t === j.Mode.Floorplan ? e.once("initAnimationEnded", () => {
+			n.fiveModeEnabled = e.currentMode === j.Mode.Floorplan, c();
+		}) : (n.fiveModeEnabled = !1, c()));
+	};
+	return l(), {
+		appendTo: r,
+		load: i,
+		enable: a,
+		disable: o,
+		dispose: s,
+		hooks: n.hooks
+	};
+};
+//#endregion
+export { N as n, B as t };
+
+//# sourceMappingURL=model-item-label-BwJ5Dgnp.js.map

package/dist/internal/model-item-label-BwJ5Dgnp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-item-label-BwJ5Dgnp.js","names":["root","$.from_html","$.prop","$.child","$.only_child","$.sibling","$.set_style","$.deep_read_state","$.untrack","$.clsx","classNames","$.from_html","$.prop","$.mutable_source","$.get","$.set_style","$.set","__toESM","beforeUpdate","template_effect","only_child","child","event","append","onDestroy","from_html","set","deep_read_state","untrack","mutable_source","sibling","each","push","set_text","onMount","set_class","prop","init","set_style","pop","reset","mountComponent","bind_element_size","get","require_classnames","debounce","THREE","DISPLAY_STRATEGY_TYPE","\"SMALL\"","\"MIDDLE\"","\"LARGE\"","\"EXTRA_LARGE\"","import_classnames","root$1","ItemLabelItem","$$props","itemLabel","hooks","onClick","div","styles","div_1","span","text","div_2","$0","$1","clsx","$$anchor","root","ItemLabelComponent","five","modelOcclusionEnable","itemLabels","displayStrategyType","curItemLabels","renderItemLabels","containerWidth","containerHeight","cssOffsetLists","itemsVisible","getLabelVisible","raycaster","Raycaster","cameraPosition","modelPosition","Vector3","vectorDistance","intersection","getLabelCssOffset","cssPosition","getLabelTransform","cssOffset","isOverlap","item","widthOffset","getStrokeLength","type","itemSpaceHeight","getFormatedItemLabels","newLabels","labels","label","curLabelWidth","strokeLength","visible","transform","sortedItemLabelItems","a","b","sortIndex","onItemLabelUpdate","handleCameraUpdateCallback","handleCameraUpdate","addResizeListener","onResize","addDataUpdateListener","itemLabelItem","$$value","parseModelItemLabelPluginData","data","ModelItemLabelPlugin","pluginState","Subscribe","params","appendTo","wrapper","render","load","enable","disable","dispose","removeListener4Five","addListener4Five","onFiveModeChange","mode","Five"],"sources":["../../src/ModelItemLabelPlugin/typings.ts","../../src/ModelItemLabelPlugin/ItemLabelItem.svelte","../../src/ModelItemLabelPlugin/ItemLabelItem.svelte","../../src/ModelItemLabelPlugin/ItemLabelComponent.svelte","../../src/ModelItemLabelPlugin/utils/parseData.ts","../../src/ModelItemLabelPlugin/ModelItemLabelPlugin.ts"],"sourcesContent":["import type { Subscribe } from \"@realsee/five-webgpu\";\nimport type { PluginEvent } from \"./events.type\";\nimport type { MountedComponent } from '../shared-utils/svelte/component.svelte'\n\nexport enum DISPLAY_STRATEGY_TYPE {\n    SMALL= 'small',\n    MIDDLE= 'middle',\n    LARGE= 'large',\n    EXTRA_LARGE = 'x-large'\n}\n// 插件入口参数\nexport interface ModelItemLabelPluginParametersType {\n    modelOcclusionEnable?: boolean\n    displayStrategyType?: Partial<DISPLAY_STRATEGY_TYPE>\n}\n\n// 插件 load 数据\nexport interface ModelItemLabelPluginData {\n    model_item_labels: Readonly<{\n        id: string,\n        library: string,\n        name: string\n        size: [number, number, number]\n        center: [number, number, number]\n        position: [number, number, number]\n        type: string[],\n        [key: string]: any\n    }>[]\n}\n\n// 插件内部 render 数据\nexport interface ItemLabel {\n    id: string\n    library: string\n    name: string\n    size: [number, number, number]\n    center: [number, number, number]\n    position: [number, number, number]\n    type: string[]\n    // 实际展示 position\n    modelPosition: [number, number, number]\n    [key: string]: any\n}\n\n// 插件返回类型\nexport interface ModelItemLabelPluginExportReturnsType {\n    appendTo: (wrapper: Element) => void\n    load: (data: ModelItemLabelPluginData) => void\n    disable: () => void\n    enable: () => void\n    dispose: () => void\n    hooks: Subscribe<PluginEvent>\n}\n\n// 插件状态\nexport interface ModelItemLabelPluginState {\n    container: HTMLDivElement\n    data: ModelItemLabelPluginData | null\n    enabled: boolean\n    itemLabels: ItemLabel[]\n    wrapper: HTMLElement | null\n    fiveModeEnabled: boolean\n    app?: MountedComponent<any>\n    hooks: Subscribe<PluginEvent>\n    modelOcclusionEnable: boolean\n    displayStrategyType: Partial<DISPLAY_STRATEGY_TYPE>\n}\n","<script lang=\"ts\">\n  import type { ItemLabel } from './typings'\n  import type { Subscribe } from '@realsee/five-webgpu'\n  import type { PluginEvent } from './events.type'\n  import classNames from 'classnames'\n\n  export let itemLabel: ItemLabel\n  export let hooks: Subscribe<PluginEvent>\n\n  function onClick() {\n    hooks.emit('onLabelClick', itemLabel)\n  }\n</script>\n\n<div\n  class={classNames('item-label-item', { visible: itemLabel.visible })}\n  style:z-index={itemLabel.zIndex}\n  style:transform={itemLabel.transform}\n>\n  <div class=\"item-label-item__text-wrap\" style=\"top: {`-${itemLabel.strokeLength + 26}px`}\">\n    <!-- svelte-ignore a11y-click-events-have-key-events -->\n    <span class=\"item-label-item__text\" on:click={onClick}\n      >{itemLabel.name.length > 6 ? `${itemLabel.name.slice(0, 6)}...` : itemLabel.name}</span\n    >\n  </div>\n  <div class=\"item-label-item__bar\" style=\"height: {`${itemLabel.strokeLength}px`}\" />\n</div>\n\n<style>\n  .item-label-item {\n    position: absolute;\n    z-index: 0;\n    transform: none;\n    cursor: pointer;\n    pointer-events: none;\n    user-select: none;\n    opacity: 0;\n  }\n\n  .item-label-item.visible {\n    opacity: 1;\n    animation: fadeIn 0.3s ease-in;\n  }\n\n  .item-label-item__text-wrap::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 0, 0, 0.3);\n    filter: blur(1rem);\n    z-index: -1;\n  }\n\n  .item-label-item__text-wrap {\n    padding: 0.375rem 0.375rem 0;\n    position: absolute;\n    height: 1.25rem;\n    pointer-events: all;\n    background-size: 100% 100%;\n    background-repeat: no-repeat;\n    white-space: nowrap;\n    line-height: 0.625rem;\n    font-size: 0.6875rem;\n    font-weight: bold;\n    color: #ffeac0;\n    transform: translate(-50%, 0);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .item-label-item__text {\n    padding-bottom: 0.25rem;\n    border-top: 0 solid;\n    border-left: 0 solid;\n    border-right: 0 solid;\n    border-bottom: 0.0625rem solid;\n    border-image: linear-gradient(to right, rgba(234, 208, 154, 0), rgba(234, 208, 154, 100), rgba(234, 208, 154, 0)) 4.5 1 4.5;\n  }\n\n  .item-label-item__bar {\n    position: absolute;\n    bottom: 0;\n    width: 0.0625rem;\n    background-image: linear-gradient(to bottom, rgba(234, 208, 154, 0), rgba(234, 208, 154, 1));\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n</style>\n","<script lang=\"ts\">\n  import type { ItemLabel } from './typings'\n  import type { Subscribe } from '@realsee/five-webgpu'\n  import type { PluginEvent } from './events.type'\n  import classNames from 'classnames'\n\n  export let itemLabel: ItemLabel\n  export let hooks: Subscribe<PluginEvent>\n\n  function onClick() {\n    hooks.emit('onLabelClick', itemLabel)\n  }\n</script>\n\n<div\n  class={classNames('item-label-item', { visible: itemLabel.visible })}\n  style:z-index={itemLabel.zIndex}\n  style:transform={itemLabel.transform}\n>\n  <div class=\"item-label-item__text-wrap\" style=\"top: {`-${itemLabel.strokeLength + 26}px`}\">\n    <!-- svelte-ignore a11y-click-events-have-key-events -->\n    <span class=\"item-label-item__text\" on:click={onClick}\n      >{itemLabel.name.length > 6 ? `${itemLabel.name.slice(0, 6)}...` : itemLabel.name}</span\n    >\n  </div>\n  <div class=\"item-label-item__bar\" style=\"height: {`${itemLabel.strokeLength}px`}\" />\n</div>\n\n<style>\n  .item-label-item {\n    position: absolute;\n    z-index: 0;\n    transform: none;\n    cursor: pointer;\n    pointer-events: none;\n    user-select: none;\n    opacity: 0;\n  }\n\n  .item-label-item.visible {\n    opacity: 1;\n    animation: fadeIn 0.3s ease-in;\n  }\n\n  .item-label-item__text-wrap::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(0, 0, 0, 0.3);\n    filter: blur(16px);\n    z-index: -1;\n  }\n\n  .item-label-item__text-wrap {\n    padding: 6px 6px 0;\n    position: absolute;\n    height: 20px;\n    pointer-events: all;\n    background-size: 100% 100%;\n    background-repeat: no-repeat;\n    white-space: nowrap;\n    line-height: 10px;\n    font-size: 11px;\n    font-weight: bold;\n    color: #ffeac0;\n    transform: translate(-50%, 0);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .item-label-item__text {\n    padding-bottom: 4px;\n    border-top: 0 solid;\n    border-left: 0 solid;\n    border-right: 0 solid;\n    border-bottom: 1px solid;\n    border-image: linear-gradient(to right, rgba(234, 208, 154, 0), rgba(234, 208, 154, 100), rgba(234, 208, 154, 0)) 4.5 1 4.5;\n  }\n\n  .item-label-item__bar {\n    position: absolute;\n    bottom: 0;\n    width: 1px;\n    background-image: linear-gradient(to bottom, rgba(234, 208, 154, 0), rgba(234, 208, 154, 1));\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n</style>\n","<script lang=\"ts\">\n  import type { Five, Subscribe } from '@realsee/five-webgpu'\n  import type { ItemLabel } from './typings'\n  import { DISPLAY_STRATEGY_TYPE } from './typings'\n  import { beforeUpdate, onDestroy, onMount } from 'svelte'\n  import * as THREE from 'three/webgpu'\n  import ItemLabelItem from './ItemLabelItem.svelte'\n  import type { PluginEvent } from './events.type'\n  import debounce from '../shared-utils/debounce'\n\n  const { Raycaster, Vector3 } = THREE\n\n  export let five: Five\n  export let modelOcclusionEnable: boolean\n  export let itemLabels: ItemLabel[]\n  export let hooks: Subscribe<PluginEvent>\n  export let displayStrategyType: DISPLAY_STRATEGY_TYPE\n\n  let curItemLabels: ItemLabel[] = null\n  let renderItemLabels: ItemLabel[] = null\n\n  let containerWidth: number\n  let containerHeight: number\n\n  // 计算重叠\n  let cssOffsetLists: number[][] = []\n  let cssHeight = 26\n  let basicWidth = 11\n\n  // 动画过程中 itemsVisible 为 false\n  let itemsVisible = true\n\n  /**\n   * 可见性策略：\n   * 1、当前楼层(假设先不考虑多楼层)\n   * 2、模型未被遮挡（一个 box 有没有被遮挡的计算？ TODO）\n   * */\n\n  const getLabelVisible = (five: Five, itemLabel: ItemLabel) => {\n    // 虚拟 VR 仅有一层，不考虑楼层信息\n    const raycaster = new Raycaster()\n    const cameraPosition = five.camera.position.clone()\n    const modelPosition = new Vector3().fromArray(itemLabel.modelPosition)\n    // 计算点到相机的位置\n    const vectorDistance = modelPosition.distanceTo(cameraPosition)\n    raycaster.set(cameraPosition.clone(), modelPosition.clone().sub(cameraPosition).normalize())\n    const [intersection] = five.model.intersectRaycaster(raycaster)\n    return !(intersection && intersection.distance + 1 < vectorDistance)\n  }\n\n  // cssOffset 获取\n  const getLabelCssOffset = (five: Five, itemLabel: ItemLabel) => {\n    const modelPosition = new Vector3(itemLabel.modelPosition[0], itemLabel.modelPosition[1], itemLabel.modelPosition[2])\n    const cssPosition: THREE.Vector2 | null = five.project2d(modelPosition)\n    const xOffset = cssPosition?.x\n    const yOffset = cssPosition?.y\n    return [xOffset, yOffset]\n  }\n\n  const getLabelTransform = (cssOffset: [number, number]) => {\n    return `translate(${cssOffset[0]}px, ${cssOffset[1]}px)`\n  }\n\n  // 重叠计算\n  const isOverlap = (cssOffset: [number, number], widthOffset: number): boolean => {\n    if (cssOffsetLists.length === 0) {\n      return false\n    }\n\n    const hasOverlapPoint = cssOffsetLists.find(\n      (item) =>\n        (cssOffset[0] >= item[0] - widthOffset && cssOffset[0] <= item[0] + widthOffset) ||\n        (cssOffset[1] >= item[1] - cssHeight && cssOffset[1] <= item[1] + cssHeight),\n    )\n\n    return !!hasOverlapPoint\n  }\n\n  function getStrokeLength(itemSpaceHeight: number, type: DISPLAY_STRATEGY_TYPE) {\n    switch (type) {\n      case DISPLAY_STRATEGY_TYPE.SMALL:\n        return Math.ceil(-27.78 * itemSpaceHeight + 85)\n      case DISPLAY_STRATEGY_TYPE.MIDDLE:\n        return Math.ceil(-38.9 * itemSpaceHeight + 130)\n      case DISPLAY_STRATEGY_TYPE.LARGE:\n        return Math.ceil(-44.44 * itemSpaceHeight + 140)\n      case DISPLAY_STRATEGY_TYPE.EXTRA_LARGE:\n        return Math.ceil(-92.59 * itemSpaceHeight + 300)\n    }\n  }\n\n  const getFormatedItemLabels = (five: Five, labels: ItemLabel[]) => {\n    // 计算位置 & 可见性\n    const newLabels = labels.map((label) => {\n      const cssOffset = getLabelCssOffset(five, label)\n      const curLabelWidth = label.name.length * basicWidth\n      const strokeLength = getStrokeLength(label.modelPosition[1], displayStrategyType)\n\n      // 是否加入碰撞检测\n      const naturalVisible = modelOcclusionEnable ? getLabelVisible(five, label) : true\n      const visible = naturalVisible && !isOverlap([cssOffset[0], cssOffset[1] + strokeLength], curLabelWidth)\n\n      if (!visible) return { ...label, visible }\n\n      cssOffsetLists.push(cssOffset)\n\n      // position\n      const transform = getLabelTransform(cssOffset as [number, number])\n      return { ...label, visible, transform, strokeLength }\n    })\n\n    const sortedItemLabelItems = newLabels\n      .filter(({ visible }) => visible)\n      .map((label) => ({\n        itemLabelItem: label,\n        distance: new Vector3(label.modelPosition[0], label.modelPosition[1], label.modelPosition[2])\n          .clone()\n          .distanceTo(five.camera.position),\n      }))\n      .sort((a, b) => a.distance - b.distance)\n\n    return newLabels.map((label) => {\n      const sortIndex = sortedItemLabelItems.findIndex((item) => item.itemLabelItem.id === label.id)\n      if (sortIndex !== undefined) return { ...label, zIndex: sortIndex * 10 }\n      return label\n    })\n  }\n\n  const onItemLabelUpdate = () => {\n    cssOffsetLists = []\n    renderItemLabels = getFormatedItemLabels(five, renderItemLabels)\n  }\n\n  beforeUpdate(() => {\n    addDataUpdateListener()\n  })\n\n  const handleCameraUpdateCallback = () => {\n    itemsVisible = false\n    handleCameraUpdate()\n  }\n\n  onMount(() => {\n    renderItemLabels = itemLabels\n    curItemLabels = itemLabels\n    onItemLabelUpdate()\n    addResizeListener()\n\n    five.on('cameraUpdate', handleCameraUpdateCallback)\n  })\n\n  const handleCameraUpdate = debounce(() => {\n    itemsVisible = true\n    onItemLabelUpdate()\n  }, 300)\n\n  const addResizeListener = () => {\n    window.addEventListener('resize', onResize, false)\n  }\n\n  const addDataUpdateListener = () => {\n    if (curItemLabels !== itemLabels) {\n      renderItemLabels = itemLabels\n      curItemLabels = itemLabels\n      onItemLabelUpdate()\n    }\n  }\n\n  const onResize = () => {\n    five.once('renderFrame', onItemLabelUpdate)\n  }\n\n  onDestroy(() => {\n    five.off('cameraUpdate', handleCameraUpdateCallback)\n    window.removeEventListener('resize', onResize, false)\n  })\n</script>\n\n<div\n  class=\"item-labels-container\"\n  bind:clientWidth={containerWidth}\n  bind:clientHeight={containerHeight}\n  style:opacity={itemsVisible ? 1 : 0}\n>\n  {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}\n    <ItemLabelItem itemLabel={itemLabelItem} {hooks} />\n  {/each}\n</div>\n\n<style>\n  .item-labels-container {\n    width: 100%;\n    height: 100%;\n    position: relative;\n  }\n</style>\n","import type { ModelItemLabelPluginData, ItemLabel } from '../typings'\n\n/** @description 转成内部所需数据 */\nexport function parseModelItemLabelPluginData(data: ModelItemLabelPluginData): ItemLabel[] {\n    return data.model_item_labels.map(label => ({\n        modelPosition: [label.position[0], label.position[1] + label.size[1], label.position[2]],\n        ...label\n    }))\n}\n","import type { PluginEvent } from './events.type'\nimport type { FivePlugin, Mode } from '@realsee/five-webgpu'\nimport { Five, Subscribe } from '@realsee/five-webgpu'\nimport ItemLabelComponent from './ItemLabelComponent.svelte'\nimport { mountComponent, type MountedComponent } from '../shared-utils/svelte/component.svelte'\nimport type {\n  ModelItemLabelPluginState,\n  ModelItemLabelPluginData,\n  ModelItemLabelPluginExportReturnsType,\n  ModelItemLabelPluginParametersType,\n} from './typings'\nimport { DISPLAY_STRATEGY_TYPE } from './typings'\nimport { parseModelItemLabelPluginData } from './utils/parseData'\n\nexport const ModelItemLabelPlugin: FivePlugin<ModelItemLabelPluginParametersType, ModelItemLabelPluginExportReturnsType> = (\n  five: Five,\n  params,\n) => {\n  const pluginState: ModelItemLabelPluginState = {\n    container: document.createElement('div'),\n    data: null,\n    enabled: true,\n    fiveModeEnabled: undefined,\n    itemLabels: [],\n    wrapper: null,\n    app: undefined,\n    hooks: new Subscribe<PluginEvent>(),\n    modelOcclusionEnable: params?.modelOcclusionEnable ?? true,\n    displayStrategyType: params?.displayStrategyType ?? DISPLAY_STRATEGY_TYPE.SMALL,\n  }\n\n  pluginState.container.setAttribute('class', 'model-item-label-plugin-container')\n  pluginState.container.style.cssText = `\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        z-index: 5;\n    `\n  pluginState.container.style.pointerEvents = 'none' // 写到 cssText 里不生效\n\n  const appendTo = (wrapper: Element) => {\n    pluginState.wrapper = wrapper as HTMLElement\n    wrapper.appendChild(pluginState.container)\n    render()\n    return true\n  }\n\n  const load = (data: ModelItemLabelPluginData) => {\n    pluginState.itemLabels = parseModelItemLabelPluginData(data)\n    render()\n  }\n\n  const enable = () => {\n    if (pluginState.enabled) return true\n    pluginState.enabled = true\n    render()\n    return true\n  }\n\n  const disable = () => {\n    if (!pluginState.enabled) return true\n    pluginState.enabled = false\n    render()\n    return true\n  }\n\n  const dispose = () => {\n    removeListener4Five()\n    pluginState.container.remove()\n  }\n\n  const render = () => {\n    if (!pluginState.wrapper) return\n    // 只要不可展示，销毁容器\n    if (!pluginState.enabled || !pluginState.fiveModeEnabled) {\n      pluginState.app?.destroy()\n      pluginState.app = undefined\n      return\n    }\n    // 正常显示时，分为 app 存在和不存在两种情况，如果存在，传值，不存在则初始化并传值\n    if (!pluginState.app) {\n      pluginState.app = mountComponent(ItemLabelComponent, pluginState.container, {\n          five: five,\n          modelOcclusionEnable: pluginState.modelOcclusionEnable,\n          itemLabels: pluginState.itemLabels,\n          hooks: pluginState.hooks,\n          displayStrategyType: pluginState.displayStrategyType,\n        })\n    } else {\n      pluginState.app.update({\n        five: five,\n        itemLabels: pluginState.itemLabels,\n      })\n    }\n  }\n\n  // 添加 five 监听\n  const addListener4Five = () => {\n    five.on('modeChange', onFiveModeChange)\n    five.once('dispose', dispose)\n  }\n\n  // 取消 five 监听\n  const removeListener4Five = () => {\n    five.off('modeChange', onFiveModeChange)\n  }\n\n  const onFiveModeChange = (mode: Mode) => {\n    if (!pluginState.enabled) return\n    if (mode !== Five.Mode.Floorplan) {\n      pluginState.fiveModeEnabled = false\n      render()\n      return\n    }\n\n    five.once('initAnimationEnded', () => {\n      pluginState.fiveModeEnabled = five.currentMode === Five.Mode.Floorplan\n      render()\n    })\n  }\n\n  addListener4Five()\n\n  return {\n    appendTo,\n    load,\n    enable,\n    disable,\n    dispose,\n    hooks: pluginState.hooks,\n  }\n}\n\nexport default ModelItemLabelPlugin\n"],"mappings":"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"}