@realsee/dnalogel 2.0.0-alpha.1 → 2.0.0-alpha.12

package/libs/PanoRulerPlugin/style.js

@@ -0,0 +1,88 @@
+const PanoRulerStyle = `<style type="text/css">
+.PanoRulerPlugin-rule-line {
+  position: absolute;
+  transform-origin: left center;
+  width: 0;
+  height: 0.0625rem;
+}
+
+.PanoRulerPlugin-rule-line::after {
+  content: '';
+  position: absolute;
+  left: -0.125rem;
+  top: -0.1rem;
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: 50%;
+  background: #FFFFFF;
+  z-index: 1;
+  animation: viewport-rule-point 0.1s 1s;
+  animation-fill-mode: both;
+}
+
+.PanoRulerPlugin-rule-line::before {
+  content: '';
+  position: absolute;
+  right: -0.125rem;
+  top: -0.1rem;
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: 50%;
+  background: #FFFFFF;
+  animation: viewport-rule-point 0.1s 1.5s;
+  animation-fill-mode: both;
+}
+
+.PanoRulerPlugin-rule-line em {
+  background: #fff;
+  display: block;
+  height: 100%;
+  animation: viewport-rule-line 0.5s ease 1s;
+  animation-fill-mode: both;
+  box-shadow: 0 0 0.25rem rgb(0 0 0 / 40%);
+}
+
+.PanoRulerPlugin-rule-label {
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: 0.0625rem;
+}
+
+.PanoRulerPlugin-rule-label-name {
+  position: absolute;
+  padding: 0.1875rem 0.375rem;
+  background: rgba(195,195,195,0.30);
+  backdrop-filter: blur(0.25rem);
+  -webkit-backdrop-filter: blur(0.25rem);
+  border-radius: 6.25rem;
+  border: 0.0625rem solid rgba(255,255,255,0.6);
+  white-space: nowrap;
+  overflow: hidden;
+  color: #FFFFFF;
+  font-weight: 500;
+  font-size: 0.75rem;
+  line-height: 1;
+  -webkit-animation: viewport-rule-label 0.25s ease 1s;
+  animation: viewport-rule-label 0.25s ease 1s;
+  animation-fill-mode: both;
+  box-shadow: inset 0 0 0.625rem 0 rgba(255,255,255,0.30);
+}
+
+@keyframes viewport-rule-line {
+  0% { width: 0% }
+  100% { width: 100% }
+}
+
+@keyframes viewport-rule-label {
+  0% { opacity: 0; transform: scaleX(0); }
+  100% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
+}
+
+@keyframes viewport-rule-point {
+  0% { transform: scaleX(0); }
+  100% { transform: scaleX(1); }
+}
+</style>
+`;
+export default PanoRulerStyle;

package/libs/PanoRulerPlugin/typings.d.ts

@@ -0,0 +1,21 @@
+export interface Room {
+    id: string;
+    name: string;
+    localName: string;
+    area: number;
+}
+export interface Rooms {
+    [key: string]: Room;
+}
+export declare type RoomObservers = string[];
+export interface RoomInfo {
+    rooms: Rooms;
+    observers: RoomObservers;
+}
+export interface RoomRules {
+    [key: string]: {
+        x: number;
+        z: number;
+        observers: number[];
+    }[];
+}

package/libs/PanoRulerPlugin/typings.js

@@ -0,0 +1 @@
+export {};

package/libs/PanoSpatialTagPlugin/Components/origins.js

@@ -0,0 +1,168 @@
+/* generated by Svelte v3.47.0 */
+import {
+	SvelteComponent,
+	append_styles,
+	attr,
+	destroy_each,
+	detach,
+	element,
+	empty,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal,
+	set_style,
+	toggle_class
+} from "svelte/internal";
+
+import { currentTarget } from '../store';
+
+function add_css(target) {
+	append_styles(target, "svelte-scnx9u", ".PanoSpatialTagPlugin__tag-origin.svelte-scnx9u{position:absolute;width:0.5rem;height:0.5rem;border-radius:50%;background:#fff;box-shadow:0 0 .6rem #fff;transform:translate(-50%, -50%) scale(1);transform-origin:center center;animation:svelte-scnx9u-PanoSpatialTagPlugin__tag-origin 1.2s forwards;pointer-events:auto}.PanoSpatialTagPlugin__tag-origin.svelte-scnx9u:after{content:'';position:absolute;top:50%;height:50%;width:2rem;height:2rem;transform:translate(-50%, -50%)}.PanoSpatialTagPlugin__tag-origin-destroy.svelte-scnx9u{transform:translate(-50%, -50%) scale(0.6);animation:svelte-scnx9u-PanoSpatialTagPlugin__tag-origin-destroy 1.2s forwards .7s}@keyframes svelte-scnx9u-PanoSpatialTagPlugin__tag-origin{0%{transform:translate(-50%, -50%) scale(1);opacity:0}100%{transform:translate(-50%, -50%) scale(0.6);opacity:1 }}@keyframes svelte-scnx9u-PanoSpatialTagPlugin__tag-origin-destroy{0%{transform:translate(-50%, -50%) scale(0.6);opacity:1}10%{transform:translate(-50%, -50%) scale(1);opacity:0.9}100%{transform:translate(-50%, -50%) scale(1);opacity:0}}");
+}
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[3] = list[i];
+	return child_ctx;
+}
+
+// (8:0) {#each origins as origin}
+function create_each_block(ctx) {
+	let i;
+	let style_top = `${/*origin*/ ctx[3].top}%`;
+	let style_left = `${/*origin*/ ctx[3].left}%`;
+	let mounted;
+	let dispose;
+
+	function click_handler() {
+		return /*click_handler*/ ctx[2](/*origin*/ ctx[3]);
+	}
+
+	return {
+		c() {
+			i = element("i");
+			attr(i, "class", "svelte-scnx9u");
+			toggle_class(i, "PanoSpatialTagPlugin__tag-origin", true);
+			toggle_class(i, "PanoSpatialTagPlugin__tag-origin-destroy", /*origin*/ ctx[3].destroying);
+			set_style(i, "top", style_top, false);
+			set_style(i, "left", style_left, false);
+			set_style(i, "visibility", /*origin*/ ctx[3].front ? 'visible' : 'hidden', false);
+		},
+		m(target, anchor) {
+			insert(target, i, anchor);
+
+			if (!mounted) {
+				dispose = listen(i, "click", click_handler);
+				mounted = true;
+			}
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+
+			if (dirty & /*origins*/ 1) {
+				toggle_class(i, "PanoSpatialTagPlugin__tag-origin-destroy", /*origin*/ ctx[3].destroying);
+			}
+
+			if (dirty & /*origins*/ 1 && style_top !== (style_top = `${/*origin*/ ctx[3].top}%`)) {
+				set_style(i, "top", style_top, false);
+			}
+
+			if (dirty & /*origins*/ 1 && style_left !== (style_left = `${/*origin*/ ctx[3].left}%`)) {
+				set_style(i, "left", style_left, false);
+			}
+
+			if (dirty & /*origins*/ 1) {
+				set_style(i, "visibility", /*origin*/ ctx[3].front ? 'visible' : 'hidden', false);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(i);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let each_1_anchor;
+	let each_value = /*origins*/ ctx[0];
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+	}
+
+	return {
+		c() {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			each_1_anchor = empty();
+		},
+		m(target, anchor) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(target, anchor);
+			}
+
+			insert(target, each_1_anchor, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*origins, handleClick*/ 3) {
+				each_value = /*origins*/ ctx[0];
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			destroy_each(each_blocks, detaching);
+			if (detaching) detach(each_1_anchor);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { origins } = $$props;
+
+	const handleClick = id => {
+		currentTarget.update(() => `${id}-PanoSpatialTagPlugin-${Date.now()}`);
+	};
+
+	const click_handler = origin => handleClick(origin.id);
+
+	$$self.$$set = $$props => {
+		if ('origins' in $$props) $$invalidate(0, origins = $$props.origins);
+	};
+
+	return [origins, handleClick, click_handler];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { origins: 0 }, add_css);
+	}
+}
+
+export default Component;

package/libs/PanoSpatialTagPlugin/Components/tag.js

@@ -0,0 +1,302 @@
+/* generated by Svelte v3.47.0 */
+import {
+	SvelteComponent,
+	append,
+	append_styles,
+	attr,
+	binding_callbacks,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal,
+	set_style,
+	space,
+	toggle_class
+} from "svelte/internal";
+
+import { onMount, onDestroy, afterUpdate } from 'svelte';
+import '../typings';
+import { currentTarget } from '../store';
+
+function add_css(target) {
+	append_styles(target, "svelte-1c0xhg0", ".PanoSpatialTagPlugin__tag-x.svelte-1c0xhg0.svelte-1c0xhg0{position:relative;display:block;white-space:nowrap;box-sizing:border-box;width:25rem;height:14rem;color:#FFF;transform:translate(0, -100%);transition:height .5s linear}.PanoSpatialTagPlugin__tag-shadow.svelte-1c0xhg0.svelte-1c0xhg0{content:'';position:absolute;width:30rem;height:30rem;top:-15rem;left:-15rem;z-index:-1;opacity:0;transition:opacity .8s .6s;background:url('https://vrlab-image4.ljcdn.com/release/web/PanoSpatialTagPlugin__blur.png');background-size:30rem 30rem}.PanoSpatialTagPlugin__tag-line.svelte-1c0xhg0.svelte-1c0xhg0{position:absolute;left:-1rem;width:2rem;height:100%;overflow:hidden}.PanoSpatialTagPlugin__tag-flagpole.svelte-1c0xhg0.svelte-1c0xhg0{position:absolute;top:0;left:1rem;height:calc(100% - 1.5rem);width:.15rem;background:linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, .1));box-shadow:0 .1rem .5rem rgba(0, 0, 0, .2);opacity:0;transform:translate(-50%, 60%) scaleY(0);transition:transform .4s cubic-bezier(.44,.44,.74,.98) , opacity .4s cubic-bezier(.44,.44,.74,.98), width .5s linear, height .5s linear ;transform-origin:center bottom}.PanoSpatialTagPlugin__tag-line1.svelte-1c0xhg0.svelte-1c0xhg0{position:absolute;top:0;left:0.3rem;height:1.8rem;width:.1rem;background:#fff;opacity:0;transform:translate(-50%, 200%) scaleY(0);transform-origin:center top}.PanoSpatialTagPlugin__tag-line2.svelte-1c0xhg0.svelte-1c0xhg0{position:absolute;top:0;left:0.5rem;height:1.8rem;width:.1rem;background:#fff;opacity:0;transform:translate(-50%, 200%) scaleY(0);transform-origin:center top}.PanoSpatialTagPlugin__tag-show.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-line1.svelte-1c0xhg0{animation:svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line1 linear .5s forwards .45s}.PanoSpatialTagPlugin__tag-show.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-line2.svelte-1c0xhg0{animation:svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line2 linear .5s forwards .65s}.PanoSpatialTagPlugin__tag-x.PanoSpatialTagPlugin__tag-upside-down.svelte-1c0xhg0.svelte-1c0xhg0{transform:translate(0, 0)}.PanoSpatialTagPlugin__tag-upside-down.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-line.svelte-1c0xhg0{transform:scaleY(-1)}.PanoSpatialTagPlugin__tag-animate.svelte-1c0xhg0.svelte-1c0xhg0{position:relative;height:100%;overflow:hidden;transform-origin:left top;transition:transform .5s linear}.PanoSpatialTagPlugin__tag-upside-down.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-animate.svelte-1c0xhg0{transform-origin:left bottom}.PanoSpatialTagPlugin__tag-content.svelte-1c0xhg0.svelte-1c0xhg0{position:absolute;display:inline-block;transform:translate(-100%, 0);transition:transform .9s cubic-bezier(0,.65,.16,1.08) .6s;padding-left:.5rem;font-size:1rem}.PanoSpatialTagPlugin__tag-upside-down.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-content.svelte-1c0xhg0{bottom:0}.PanoSpatialTagPlugin__tag-show.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-flagpole.svelte-1c0xhg0{opacity:1;transform:translate(-50%, 0) scaleY(1)}.PanoSpatialTagPlugin__tag-upside-down.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-shadow.svelte-1c0xhg0{top:unset;bottom:-15rem}.PanoSpatialTagPlugin__tag-show.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-shadow.svelte-1c0xhg0{opacity:.32}.PanoSpatialTagPlugin__tag-show.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-content.svelte-1c0xhg0{transform:translate(0, 0)}.PanoSpatialTagPlugin__tag-hide.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-flagpole.svelte-1c0xhg0{opacity:0;transform:translate(-50%, 60%) scaleY(0);transition:transform .5s .55s, opacity .4s .55s}.PanoSpatialTagPlugin__tag-hide.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-shadow.svelte-1c0xhg0{opacity:0;transition:opacity .8s}.PanoSpatialTagPlugin__tag-hide.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-content.svelte-1c0xhg0{transform:translate(-100%, 0);transition:transform .6s cubic-bezier(.53,.06,.88,.59)}.PanoSpatialTagPlugin__tag-hide.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-content .svelte-1c0xhg0{pointer-events:none}.PanoSpatialTagPlugin__tag-hide.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-line1.svelte-1c0xhg0{opacity:0.5;transform:translate(-50%, 10%) scaleY(0);animation:svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line1-hide linear .28s forwards .3s}.PanoSpatialTagPlugin__tag-hide.svelte-1c0xhg0 .PanoSpatialTagPlugin__tag-line2.svelte-1c0xhg0{opacity:0.5;transform:translate(-50%, 0) scaleY(0);animation:svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line2-hide linear .28s forwards .45s}@keyframes svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line1{0%{opacity:0;transform:translate(-50%, 250%) scaleY(1)}50%{opacity:0.5;transform:translate(-50%, 135%) scaleY(1)}100%{opacity:0.5;transform:translate(-50%, 20%) scaleY(0)}}@keyframes svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line2{0%{opacity:0;transform:translate(-50%, 250%) scaleY(1)}50%{opacity:0.5;transform:translate(-50%, 125%) scaleY(1)}100%{opacity:0.5;transform:translate(-50%, 0) scaleY(0)}}@keyframes svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line1-hide{0%{opacity:0.5;transform:translate(-50%, 10%) scaleY(0)}50%{opacity:0.2;transform:translate(-50%, 105%) scaleY(1)}100%{opacity:0;transform:translate(-50%, 200%) scaleY(0)}}@keyframes svelte-1c0xhg0-PanoSpatialTagPlugin__tag-line2-hide{0%{opacity:0.5;transform:translate(-50%, 0) scaleY(0)}50%{opacity:0.2;transform:translate(-50%, 100%) scaleY(1)}100%{opacity:0;transform:translate(-50%, 200%) scaleY(0)}}");
+}
+
+function create_fragment(ctx) {
+	let div4;
+	let div0;
+	let t0;
+	let div1;
+	let i0;
+	let t1;
+	let i1;
+	let t2;
+	let i2;
+	let t3;
+	let div3;
+	let div2;
+	let div4_id_value;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			div4 = element("div");
+			div0 = element("div");
+			t0 = space();
+			div1 = element("div");
+			i0 = element("i");
+			t1 = space();
+			i1 = element("i");
+			t2 = space();
+			i2 = element("i");
+			t3 = space();
+			div3 = element("div");
+			div2 = element("div");
+			attr(div0, "class", "PanoSpatialTagPlugin__tag-shadow svelte-1c0xhg0");
+			set_style(div0, "transform", "translate(" + /*contentWidth*/ ctx[7] / 2 * /*contentZoom*/ ctx[3] * 3 + "px, " + /*contentHeight*/ ctx[8] / 2 * (/*upsideDown*/ ctx[1] ? -1 : 1) * /*contentZoom*/ ctx[3] * 3 + "px)");
+			attr(i0, "class", "PanoSpatialTagPlugin__tag-flagpole svelte-1c0xhg0");
+			set_style(i0, "width", /*lineWidthZoom*/ ctx[4] + "rem");
+			attr(i1, "class", "PanoSpatialTagPlugin__tag-line1 svelte-1c0xhg0");
+			attr(i2, "class", "PanoSpatialTagPlugin__tag-line2 svelte-1c0xhg0");
+			attr(div1, "class", "PanoSpatialTagPlugin__tag-line svelte-1c0xhg0");
+			attr(div2, "class", "PanoSpatialTagPlugin__tag-content svelte-1c0xhg0");
+			attr(div3, "class", "PanoSpatialTagPlugin__tag-animate svelte-1c0xhg0");
+			set_style(div3, "transform", "scale(" + /*contentZoom*/ ctx[3] * 3 + ")");
+			attr(div4, "id", div4_id_value = 'PanoSpatialTagPlugin__' + /*id*/ ctx[0]);
+			set_style(div4, "height", 20 * /*lineHeightZoom*/ ctx[5] + "rem");
+			attr(div4, "class", "svelte-1c0xhg0");
+			toggle_class(div4, "PanoSpatialTagPlugin__tag-x", true);
+			toggle_class(div4, "PanoSpatialTagPlugin__tag-upside-down", /*upsideDown*/ ctx[1]);
+			toggle_class(div4, "PanoSpatialTagPlugin__tag-show", /*show*/ ctx[10]);
+			toggle_class(div4, "PanoSpatialTagPlugin__tag-hide", /*show*/ ctx[10] === false || /*destroying*/ ctx[6]);
+		},
+		m(target, anchor) {
+			insert(target, div4, anchor);
+			append(div4, div0);
+			append(div4, t0);
+			append(div4, div1);
+			append(div1, i0);
+			append(div1, t1);
+			append(div1, i1);
+			append(div1, t2);
+			append(div1, i2);
+			append(div4, t3);
+			append(div4, div3);
+			append(div3, div2);
+			div2.innerHTML = /*content*/ ctx[2];
+			/*div2_binding*/ ctx[16](div2);
+
+			if (!mounted) {
+				dispose = listen(div2, "click", /*handleClickContent*/ ctx[11]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*contentWidth, contentZoom, contentHeight, upsideDown*/ 394) {
+				set_style(div0, "transform", "translate(" + /*contentWidth*/ ctx[7] / 2 * /*contentZoom*/ ctx[3] * 3 + "px, " + /*contentHeight*/ ctx[8] / 2 * (/*upsideDown*/ ctx[1] ? -1 : 1) * /*contentZoom*/ ctx[3] * 3 + "px)");
+			}
+
+			if (dirty & /*lineWidthZoom*/ 16) {
+				set_style(i0, "width", /*lineWidthZoom*/ ctx[4] + "rem");
+			}
+
+			if (dirty & /*content*/ 4) div2.innerHTML = /*content*/ ctx[2];;
+
+			if (dirty & /*contentZoom*/ 8) {
+				set_style(div3, "transform", "scale(" + /*contentZoom*/ ctx[3] * 3 + ")");
+			}
+
+			if (dirty & /*id*/ 1 && div4_id_value !== (div4_id_value = 'PanoSpatialTagPlugin__' + /*id*/ ctx[0])) {
+				attr(div4, "id", div4_id_value);
+			}
+
+			if (dirty & /*lineHeightZoom*/ 32) {
+				set_style(div4, "height", 20 * /*lineHeightZoom*/ ctx[5] + "rem");
+			}
+
+			if (dirty & /*upsideDown*/ 2) {
+				toggle_class(div4, "PanoSpatialTagPlugin__tag-upside-down", /*upsideDown*/ ctx[1]);
+			}
+
+			if (dirty & /*show*/ 1024) {
+				toggle_class(div4, "PanoSpatialTagPlugin__tag-show", /*show*/ ctx[10]);
+			}
+
+			if (dirty & /*show, destroying*/ 1088) {
+				toggle_class(div4, "PanoSpatialTagPlugin__tag-hide", /*show*/ ctx[10] === false || /*destroying*/ ctx[6]);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div4);
+			/*div2_binding*/ ctx[16](null);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { id } = $$props;
+	let { upsideDown } = $$props;
+	let { content } = $$props;
+	let { contentZoom } = $$props;
+	let { lineWidthZoom } = $$props;
+	let { lineHeightZoom } = $$props;
+	let { destroying = false } = $$props;
+	let { folded } = $$props;
+	let { dispose } = $$props;
+	let { events } = $$props;
+	let { hooks } = $$props;
+	let contentWidth = 0;
+	let contentHeight = 0;
+	let contentDom;
+	let show;
+
+	let timeoutId = setTimeout(
+		() => {
+			if (!folded) $$invalidate(10, show = true);
+			timeoutId = undefined;
+		},
+		100
+	);
+
+	const handleClickContent = event => {
+		const eventsName = Object.keys(events);
+		let node = event.target;
+
+		while (node) {
+			const classNames = node.getAttribute('class');
+
+			if (!classNames) {
+				node = node.parentNode;
+				continue;
+			}
+
+			if (classNames.includes('PanoSpatialTagPlugin__tag-content')) {
+				node = null;
+				break;
+			}
+
+			eventsName.forEach(key => {
+				if (classNames.includes(key)) events[key](id);
+			});
+
+			node = node.parentNode;
+		}
+	};
+
+	onMount(() => {
+		hooks.emit('initTag', { id });
+	});
+
+	const unsubscribe = currentTarget.subscribe(str => {
+		if (str === null) return;
+		const [currentId, date] = str.split('-PanoSpatialTagPlugin-');
+
+		if (id === currentId) {
+			hooks.emit('clickOrigin', { id, show });
+
+			if (!timeoutId) {
+				$$invalidate(10, show = folded);
+				$$invalidate(12, folded = !folded);
+
+				timeoutId = setTimeout(
+					() => {
+						timeoutId = undefined;
+					},
+					1500
+				);
+			}
+		}
+	});
+
+	afterUpdate(() => {
+		$$invalidate(7, contentWidth = contentDom.offsetWidth);
+		$$invalidate(8, contentHeight = contentDom.offsetHeight);
+		if (timeoutId) return;
+		$$invalidate(10, show = !folded);
+	});
+
+	onDestroy(() => {
+		hooks.emit('destroyTag', { id });
+		unsubscribe();
+		dispose();
+	});
+
+	function div2_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			contentDom = $$value;
+			$$invalidate(9, contentDom);
+		});
+	}
+
+	$$self.$$set = $$props => {
+		if ('id' in $$props) $$invalidate(0, id = $$props.id);
+		if ('upsideDown' in $$props) $$invalidate(1, upsideDown = $$props.upsideDown);
+		if ('content' in $$props) $$invalidate(2, content = $$props.content);
+		if ('contentZoom' in $$props) $$invalidate(3, contentZoom = $$props.contentZoom);
+		if ('lineWidthZoom' in $$props) $$invalidate(4, lineWidthZoom = $$props.lineWidthZoom);
+		if ('lineHeightZoom' in $$props) $$invalidate(5, lineHeightZoom = $$props.lineHeightZoom);
+		if ('destroying' in $$props) $$invalidate(6, destroying = $$props.destroying);
+		if ('folded' in $$props) $$invalidate(12, folded = $$props.folded);
+		if ('dispose' in $$props) $$invalidate(13, dispose = $$props.dispose);
+		if ('events' in $$props) $$invalidate(14, events = $$props.events);
+		if ('hooks' in $$props) $$invalidate(15, hooks = $$props.hooks);
+	};
+
+	return [
+		id,
+		upsideDown,
+		content,
+		contentZoom,
+		lineWidthZoom,
+		lineHeightZoom,
+		destroying,
+		contentWidth,
+		contentHeight,
+		contentDom,
+		show,
+		handleClickContent,
+		folded,
+		dispose,
+		events,
+		hooks,
+		div2_binding
+	];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			options,
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				id: 0,
+				upsideDown: 1,
+				content: 2,
+				contentZoom: 3,
+				lineWidthZoom: 4,
+				lineHeightZoom: 5,
+				destroying: 6,
+				folded: 12,
+				dispose: 13,
+				events: 14,
+				hooks: 15
+			},
+			add_css
+		);
+	}
+}
+
+export default Component;

package/libs/PanoSpatialTagPlugin/index.d.ts

@@ -0,0 +1,33 @@
+import type { FivePlugin } from '@realsee/five';
+import type { PanoSpatialTagPluginId, PanoSpatialTagPluginDataElement, PanoSpatialTagPluginContentReplacement, PanoSpatialTagPluginContentEvent } from './typings';
+export interface PanoSpatialTagPluginData {
+    folded?: boolean;
+    enabled?: boolean;
+    points: Array<PanoSpatialTagPluginDataElement>;
+    template: string;
+    events?: PanoSpatialTagPluginContentEvent;
+    render?: (template: string, replacement: PanoSpatialTagPluginContentReplacement) => string;
+}
+export interface PanoSpatialTagPluginParameterType {
+    container?: Element;
+    wait?: number;
+    maxNumberOnScreen?: number;
+    minRad?: number;
+    nearTolerance?: number;
+    upsideHeight?: number;
+}
+export interface PanoSpatialTagPluginExportType {
+    load: (data: PanoSpatialTagPluginData) => void;
+    unfoldAll: () => void;
+    foldAll: () => void;
+    unfold: (id: PanoSpatialTagPluginId) => void;
+    fold: (id: PanoSpatialTagPluginId) => void;
+    enable: () => void;
+    disable: () => void;
+    dispose: () => void;
+}
+/**
+ * 空间游走标签插件
+ */
+export declare const PanoSpatialTagPlugin: FivePlugin<PanoSpatialTagPluginParameterType, PanoSpatialTagPluginExportType>;
+export default PanoSpatialTagPlugin;