@realsee/dnalogel 2.0.2 → 2.0.4-dev.1

package/libs/ModelItemLabelPlugin/ItemLabelComponent.js

@@ -1,389 +1,196 @@
-/* generated by Svelte v3.50.1 */
-import {
-	SvelteComponent,
-	add_render_callback,
-	add_resize_listener,
-	append_styles,
-	attr,
-	check_outros,
-	create_component,
-	destroy_component,
-	detach,
-	element,
-	empty,
-	group_outros,
-	init,
-	insert,
-	mount_component,
-	outro_and_destroy_block,
-	safe_not_equal,
-	set_style,
-	transition_in,
-	transition_out,
-	update_keyed_each
-} from "svelte/internal";
-
-import { DISPLAY_STRATEGY_TYPE } from "./typings";
-import { beforeUpdate, onDestroy, onMount } from "svelte";
-import * as THREE from 'three';
-import ItemLabelItem from './ItemLabelItem';
-import "./events.type";
-import debounce from '../shared-utils/debounce';
-
-function add_css(target) {
-	append_styles(target, "svelte-gk8s47", ".item-labels-container.svelte-gk8s47{width:100%;height:100%;position:relative}");
+import { S as J, i as K, s as N, a as Q, e as Z, b as $, z as ee, q as z, c as M, A as te, B as ne, d as se, f as C, t as S, g as U, O as oe, F as ie, P as ae, r as re, j as le, m as ce, k as de, h as me, C as ue } from "../index.d6d7690a.js";
+import { DISPLAY_STRATEGY_TYPE as k } from "./typings.js";
+import * as fe from "three";
+import he from "./ItemLabelItem.js";
+import _e from "../shared-utils/debounce.js";
+import "../index.f2f85d71.js";
+function be(d) {
+  Q(d, "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[26] = list[i];
-	return child_ctx;
+function R(d, n, e) {
+  const l = d.slice();
+  return l[26] = n[e], l;
 }
-
-// (144: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[26],
-				hooks: /*hooks*/ ctx[0]
-			}
-		});
-
-	return {
-		key: key_1,
-		first: null,
-		c() {
-			first = empty();
-			create_component(itemlabelitem.$$.fragment);
-			this.first = first;
-		},
-		m(target, anchor) {
-			insert(target, first, anchor);
-			mount_component(itemlabelitem, target, anchor);
-			current = true;
-		},
-		p(new_ctx, dirty) {
-			ctx = new_ctx;
-			const itemlabelitem_changes = {};
-			if (dirty & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[26];
-			if (dirty & /*hooks*/ 1) itemlabelitem_changes.hooks = /*hooks*/ ctx[0];
-			itemlabelitem.$set(itemlabelitem_changes);
-		},
-		i(local) {
-			if (current) return;
-			transition_in(itemlabelitem.$$.fragment, local);
-			current = true;
-		},
-		o(local) {
-			transition_out(itemlabelitem.$$.fragment, local);
-			current = false;
-		},
-		d(detaching) {
-			if (detaching) detach(first);
-			destroy_component(itemlabelitem, detaching);
-		}
-	};
+function j(d, n) {
+  let e, l, h;
+  return l = new he({
+    props: {
+      itemLabel: n[26],
+      hooks: n[0]
+    }
+  }), {
+    key: d,
+    first: null,
+    c() {
+      e = re(), le(l.$$.fragment), this.first = e;
+    },
+    m(i, c) {
+      M(i, e, c), ce(l, i, c), h = !0;
+    },
+    p(i, c) {
+      n = i;
+      const m = {};
+      c & 2 && (m.itemLabel = n[26]), c & 1 && (m.hooks = n[0]), l.$set(m);
+    },
+    i(i) {
+      h || (C(l.$$.fragment, i), h = !0);
+    },
+    o(i) {
+      S(l.$$.fragment, i), h = !1;
+    },
+    d(i) {
+      i && U(e), de(l, i);
+    }
+  };
 }
-
-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[1];
-	const get_key = ctx => /*itemLabelItem*/ ctx[26].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 = element("div");
-
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].c();
-			}
-
-			attr(div, "class", "item-labels-container svelte-gk8s47");
-			add_render_callback(() => /*div_elementresize_handler*/ ctx[9].call(div));
-			set_style(div, "opacity", /*itemsVisible*/ ctx[4] ? 1 : 0, false);
-		},
-		m(target, anchor) {
-			insert(target, div, anchor);
-
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].m(div, null);
-			}
-
-			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[9].bind(div));
-			current = true;
-		},
-		p(ctx, [dirty]) {
-			if (dirty & /*renderItemLabels, hooks*/ 3) {
-				each_value = /*renderItemLabels*/ ctx[1];
-				group_outros();
-				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, outro_and_destroy_block, create_each_block, null, get_each_context);
-				check_outros();
-			}
-
-			if (dirty & /*itemsVisible*/ 16) {
-				set_style(div, "opacity", /*itemsVisible*/ ctx[4] ? 1 : 0, false);
-			}
-		},
-		i(local) {
-			if (current) return;
-
-			for (let i = 0; i < each_value.length; i += 1) {
-				transition_in(each_blocks[i]);
-			}
-
-			current = true;
-		},
-		o(local) {
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				transition_out(each_blocks[i]);
-			}
-
-			current = false;
-		},
-		d(detaching) {
-			if (detaching) detach(div);
-
-			for (let i = 0; i < each_blocks.length; i += 1) {
-				each_blocks[i].d();
-			}
-
-			div_resize_listener();
-		}
-	};
+function ge(d) {
+  let n, e = [], l = /* @__PURE__ */ new Map(), h, i, c = d[1];
+  const m = (a) => a[26].id;
+  for (let a = 0; a < c.length; a += 1) {
+    let s = R(d, c, a), _ = m(s);
+    l.set(_, e[a] = j(_, s));
+  }
+  return {
+    c() {
+      n = Z("div");
+      for (let a = 0; a < e.length; a += 1)
+        e[a].c();
+      $(n, "class", "item-labels-container svelte-gk8s47"), ee(() => d[9].call(n)), z(n, "opacity", d[4] ? 1 : 0);
+    },
+    m(a, s) {
+      M(a, n, s);
+      for (let _ = 0; _ < e.length; _ += 1)
+        e[_].m(n, null);
+      h = te(n, d[9].bind(n)), i = !0;
+    },
+    p(a, [s]) {
+      s & 3 && (c = a[1], me(), e = ne(e, s, m, 1, a, c, l, n, ue, j, null, R), se()), s & 16 && z(n, "opacity", a[4] ? 1 : 0);
+    },
+    i(a) {
+      if (!i) {
+        for (let s = 0; s < c.length; s += 1)
+          C(e[s]);
+        i = !0;
+      }
+    },
+    o(a) {
+      for (let s = 0; s < e.length; s += 1)
+        S(e[s]);
+      i = !1;
+    },
+    d(a) {
+      a && U(n);
+      for (let s = 0; s < e.length; s += 1)
+        e[s].d();
+      h();
+    }
+  };
 }
-
-let cssHeight = 26;
-let basicWidth = 11;
-
-function instance($$self, $$props, $$invalidate) {
-	const { Raycaster, Vector3 } = THREE;
-	let { five } = $$props;
-	let { modelOcclusionEnable } = $$props;
-	let { itemLabels } = $$props;
-	let { hooks } = $$props;
-	let { displayStrategyType } = $$props;
-	let curItemLabels = null;
-	let renderItemLabels = null;
-	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().fromArray(itemLabel.modelPosition);
-
-		// 计算点到相机的位置
-		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)`;
-	};
-
-	// 重叠计算
-	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;
-	};
-
-	function getStrokeLength(itemSpaceHeight, type) {
-		switch (type) {
-			case DISPLAY_STRATEGY_TYPE.SMALL:
-				return Math.ceil(-27.78 * itemSpaceHeight + 85);
-			case DISPLAY_STRATEGY_TYPE.MIDLLE:
-				return Math.ceil(-38.9 * itemSpaceHeight + 130);
-			case DISPLAY_STRATEGY_TYPE.LARGE:
-				return Math.ceil(-44.44 * itemSpaceHeight + 140);
-			case 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);
-			const curLabelWidth = label.name.length * basicWidth;
-			const strokeLength = getStrokeLength(label.modelPosition[1], displayStrategyType);
-
-			// 是否加入碰撞检测
-			const naturalVisible = modelOcclusionEnable
-			? getLabelVisible(five, label)
-			: true;
-
-			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(1, renderItemLabels = getFormatedItemLabels(five, renderItemLabels));
-	};
-
-	beforeUpdate(() => {
-		addDataUpdateListener();
-	});
-
-	const handleCameraUpdateCallback = () => {
-		$$invalidate(4, itemsVisible = false);
-		handleCameraUpdate();
-	};
-
-	onMount(() => {
-		$$invalidate(1, renderItemLabels = itemLabels);
-		curItemLabels = itemLabels;
-		onItemLabelUpdate();
-		addResizeListener();
-		five.on('cameraUpdate', handleCameraUpdateCallback);
-	});
-
-	const handleCameraUpdate = debounce(
-		() => {
-			$$invalidate(4, itemsVisible = true);
-			onItemLabelUpdate();
-		},
-		300
-	);
-
-	const addResizeListener = () => {
-		window.addEventListener('resize', onResize, false);
-	};
-
-	const addDataUpdateListener = () => {
-		if (curItemLabels !== itemLabels) {
-			$$invalidate(1, renderItemLabels = itemLabels);
-			curItemLabels = itemLabels;
-			onItemLabelUpdate();
-		}
-	};
-
-	const onResize = () => {
-		five.once('renderFrame', onItemLabelUpdate);
-	};
-
-	onDestroy(() => {
-		five.off('cameraUpdate', handleCameraUpdateCallback);
-		window.removeEventListener('resize', onResize, false);
-	});
-
-	function div_elementresize_handler() {
-		containerWidth = this.clientWidth;
-		containerHeight = this.clientHeight;
-		$$invalidate(2, containerWidth);
-		$$invalidate(3, containerHeight);
-	}
-
-	$$self.$$set = $$props => {
-		if ('five' in $$props) $$invalidate(5, five = $$props.five);
-		if ('modelOcclusionEnable' in $$props) $$invalidate(6, modelOcclusionEnable = $$props.modelOcclusionEnable);
-		if ('itemLabels' in $$props) $$invalidate(7, itemLabels = $$props.itemLabels);
-		if ('hooks' in $$props) $$invalidate(0, hooks = $$props.hooks);
-		if ('displayStrategyType' in $$props) $$invalidate(8, displayStrategyType = $$props.displayStrategyType);
-	};
-
-	return [
-		hooks,
-		renderItemLabels,
-		containerWidth,
-		containerHeight,
-		itemsVisible,
-		five,
-		modelOcclusionEnable,
-		itemLabels,
-		displayStrategyType,
-		div_elementresize_handler
-	];
+let A = 26, Le = 11;
+function ye(d, n, e) {
+  const { Raycaster: l, Vector3: h } = fe;
+  let { five: i } = n, { modelOcclusionEnable: c } = n, { itemLabels: m } = n, { hooks: a } = n, { displayStrategyType: s } = n, _ = null, L = null, P, I, y = [], E = !0;
+  const D = (t, f) => {
+    const b = new l(), r = t.camera.position.clone(), o = new h().fromArray(f.modelPosition), u = o.distanceTo(r);
+    b.set(r.clone(), o.clone().sub(r).normalize());
+    const [g] = t.model.intersectRaycaster(b);
+    return !(g && g.distance + 1 < u);
+  }, V = (t, f) => {
+    const b = new h(f.modelPosition[0], f.modelPosition[1], f.modelPosition[2]), r = t.project2d(b), o = r == null ? void 0 : r.x, u = r == null ? void 0 : r.y;
+    return [o, u];
+  }, W = (t) => `translate(${t[0]}px, ${t[1]}px)`, F = (t, f) => y.length === 0 ? !1 : !!y.find((r) => t[0] >= r[0] - f && t[0] <= r[0] + f || t[1] >= r[1] - A && t[1] <= r[1] + A);
+  function G(t, f) {
+    switch (f) {
+      case k.SMALL:
+        return Math.ceil(-27.78 * t + 85);
+      case k.MIDLLE:
+        return Math.ceil(-38.9 * t + 130);
+      case k.LARGE:
+        return Math.ceil(-44.44 * t + 140);
+      case k.EXTRA_LARGE:
+        return Math.ceil(-92.59 * t + 300);
+    }
+  }
+  const Y = (t, f) => {
+    const b = f.map((o) => {
+      const u = V(t, o), g = o.name.length * Le, T = G(o.modelPosition[1], s), O = (c ? D(t, o) : !0) && !F([u[0], u[1] + T], g);
+      if (!O)
+        return Object.assign(Object.assign({}, o), { visible: O });
+      y.push(u);
+      const X = W(u);
+      return Object.assign(Object.assign({}, o), { visible: O, transform: X, strokeLength: T });
+    }), r = b.filter(({ visible: o }) => o).map((o) => ({
+      itemLabelItem: o,
+      distance: new h(o.modelPosition[0], o.modelPosition[1], o.modelPosition[2]).clone().distanceTo(t.camera.position)
+    })).sort((o, u) => o.distance - u.distance);
+    return b.map((o) => {
+      const u = r.findIndex((g) => g.itemLabelItem.id === o.id);
+      return u !== void 0 ? Object.assign(Object.assign({}, o), { zIndex: u * 10 }) : o;
+    });
+  }, p = () => {
+    y = [], e(1, L = Y(i, L));
+  };
+  oe(() => {
+    B();
+  });
+  const v = () => {
+    e(4, E = !1), q();
+  };
+  ie(() => {
+    e(1, L = m), _ = m, p(), x(), i.on("cameraUpdate", v);
+  });
+  const q = _e(
+    () => {
+      e(4, E = !0), p();
+    },
+    300
+  ), x = () => {
+    window.addEventListener("resize", w, !1);
+  }, B = () => {
+    _ !== m && (e(1, L = m), _ = m, p());
+  }, w = () => {
+    i.once("renderFrame", p);
+  };
+  ae(() => {
+    i.off("cameraUpdate", v), window.removeEventListener("resize", w, !1);
+  });
+  function H() {
+    P = this.clientWidth, I = this.clientHeight, e(2, P), e(3, I);
+  }
+  return d.$$set = (t) => {
+    "five" in t && e(5, i = t.five), "modelOcclusionEnable" in t && e(6, c = t.modelOcclusionEnable), "itemLabels" in t && e(7, m = t.itemLabels), "hooks" in t && e(0, a = t.hooks), "displayStrategyType" in t && e(8, s = t.displayStrategyType);
+  }, [
+    a,
+    L,
+    P,
+    I,
+    E,
+    i,
+    c,
+    m,
+    s,
+    H
+  ];
 }
-
-class Component extends SvelteComponent {
-	constructor(options) {
-		super();
-
-		init(
-			this,
-			options,
-			instance,
-			create_fragment,
-			safe_not_equal,
-			{
-				five: 5,
-				modelOcclusionEnable: 6,
-				itemLabels: 7,
-				hooks: 0,
-				displayStrategyType: 8
-			},
-			add_css
-		);
-	}
+class ve extends J {
+  constructor(n) {
+    super(), K(
+      this,
+      n,
+      ye,
+      ge,
+      N,
+      {
+        five: 5,
+        modelOcclusionEnable: 6,
+        itemLabels: 7,
+        hooks: 0,
+        displayStrategyType: 8
+      },
+      be
+    );
+  }
 }
-
-export default Component;
+export {
+  ve as default
+};