@realsee/dnalogel 0.1.7 → 2.0.0-alpha.11

package/dist/PanoSpatialTagPlugin/index.js

@@ -0,0 +1,1259 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var THREE = require('three');
+var five = require('@realsee/five');
+var CSS3DRenderer = require('three/examples/jsm/renderers/CSS3DRenderer');
+var internal = require('svelte/internal');
+var store = require('svelte/store');
+var svelte = require('svelte');
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+
+function evenNumber(num, config) {
+    const roundNum = Math.round(num);
+    return roundNum % 2 === 0 ? roundNum : roundNum + Number(config?.smaller ? -1 : 1);
+}
+
+function centerPoint(point1, point2) {
+    return new THREE.Vector3((point1.x + point2.x) / 2, (point1.y + point2.y) / 2, (point1.z + point2.z) / 2);
+}
+
+const transformPositionToVector3 = ({ x, y, z }) => new THREE.Vector3(x, y, z);
+
+/**
+ * @description: 究极简陋的 ResizeObserver polyfill
+ */
+function createResizeObserver(func, element) {
+    if (!element || typeof ResizeObserver === 'undefined') {
+        return {
+            observe: () => window.addEventListener('resize', func),
+            unobserve: () => window.removeEventListener('resize', func),
+        };
+    }
+    else {
+        const observer = new ResizeObserver(func);
+        return {
+            observe: () => observer.observe(element),
+            unobserve: () => observer.unobserve(element),
+        };
+    }
+}
+
+/**
+ * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
+ * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
+ *
+ * @returns
+ */
+const CSS3DRenderPlugin = (five) => {
+    const state = { disposeCallbacks: [] };
+    const create3DDomContainer = (...params) => {
+        const points = params[0].map((point) => (point instanceof THREE.Vector3 ? point : transformPositionToVector3(point)));
+        const config = params[1];
+        if (points?.length < 4)
+            return console.error('points must be equal or greater than than 4');
+        if (!five?.model?.loaded)
+            return console.error('five.model.loaded is: ', five?.model?.loaded);
+        const fiveElement = five.getElement();
+        if (!fiveElement)
+            return console.error('five.getElement() is ' + fiveElement);
+        const disposers = [];
+        const ratio = config?.ratio || 0.00216;
+        if (ratio <= 0.00215)
+            console.warn('if you need click css3DElement on safari, ratio must be greater than 0.00215');
+        const dpr = config?.dpr || 1;
+        const mode = config?.mode || 'front';
+        const autoRender = config?.autoRender ?? true;
+        const behindFiveContainer = config?.behindFiveContainer || fiveElement.parentElement || document.body;
+        const container = config?.container || document.createElement('div');
+        container.classList.add('__Dnalogel-plugin--CSS3DRenderPlugin');
+        // 获取css3DObject, 如果mode为behind的话，一起获取mesh
+        const { css3DObject, mesh } = createObject(points, { ratio, dpr, container, mode });
+        // ======= INIT START =======
+        let resizeObserver;
+        const frontModeUnInited = mode === 'front' && !state.frontMode;
+        const behindModeUnInited = mode === 'behind' && !state.behindMode;
+        const inited = !(frontModeUnInited || behindModeUnInited);
+        if (behindModeUnInited) {
+            state.behindMode = { scene: new THREE.Scene(), css3DRenderer: new CSS3DRenderer.CSS3DRenderer() };
+        }
+        if (frontModeUnInited) {
+            state.frontMode = { scene: new THREE.Scene(), css3DRenderer: new CSS3DRenderer.CSS3DRenderer() };
+        }
+        const stateMode = mode === 'behind' ? state.behindMode : state.frontMode;
+        const { scene, css3DRenderer } = stateMode;
+        const render = (() => {
+            if (!inited) {
+                const css3DRendererSetSize = () => {
+                    // 这里evenNumber策略是遇到奇数会加1，不知道为啥会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
+                    // 为了规避上面这种情况，evenNumber设置了一个参数，遇到奇数可选择减一
+                    const rendererWidth = evenNumber(fiveElement.clientWidth, { smaller: true });
+                    const rendererHeight = evenNumber(fiveElement.clientHeight, { smaller: true });
+                    css3DRenderer.setSize(rendererWidth, rendererHeight);
+                };
+                css3DRendererSetSize();
+                resizeObserver = createResizeObserver(css3DRendererSetSize, fiveElement);
+                css3DRenderer.domElement.style.position = 'absolute';
+                css3DRenderer.domElement.style.top = '0';
+                css3DRenderer.domElement.style.userSelect = 'none';
+                css3DRenderer.domElement.style.pointerEvents = 'none';
+                const renderEveryFrame = () => {
+                    const requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
+                    stateMode.requestAnimationFrameId = requestAnimationFrameId;
+                    css3DRenderer.render(scene, five.camera);
+                };
+                return () => {
+                    scene.add(css3DObject);
+                    resizeObserver?.observe?.();
+                    renderEveryFrame();
+                    if (mode === 'behind' && mesh) {
+                        five.scene.add(mesh);
+                        disposers.push(() => mesh && five.scene.remove(mesh));
+                    }
+                };
+            }
+            else {
+                return () => {
+                    scene.add(css3DObject);
+                };
+            }
+        })();
+        if (frontModeUnInited) {
+            const wrapper = fiveElement.parentElement || document.body;
+            wrapper.appendChild(css3DRenderer.domElement);
+        }
+        if (behindModeUnInited) {
+            const wrapper = behindFiveContainer;
+            wrapper.appendChild(css3DRenderer.domElement);
+        }
+        // ======= INIT END =======
+        const dispose = () => {
+            disposers.forEach((d) => d?.());
+            scene.remove(css3DObject);
+            if (scene.children.length === 0) {
+                if (typeof stateMode.requestAnimationFrameId === 'number') {
+                    cancelAnimationFrame(stateMode.requestAnimationFrameId);
+                }
+                css3DRenderer.domElement.remove();
+                if (mode === 'front')
+                    state.frontMode = undefined;
+                if (mode === 'behind')
+                    state.behindMode = undefined;
+                if (!state.behindMode && !state.frontMode) {
+                    resizeObserver?.unobserve?.();
+                }
+            }
+            return true;
+        };
+        const idx = state.disposeCallbacks.findIndex((item) => item === dispose);
+        if (idx !== -1) {
+            state.disposeCallbacks.splice(idx, 1);
+        }
+        else {
+            state.disposeCallbacks.push(dispose);
+        }
+        if (autoRender)
+            render();
+        return { container, dispose, css3DObject, render: autoRender ? undefined : render };
+    };
+    const createObject = (points, config) => {
+        const { ratio, dpr, container: element, mode } = config;
+        const planeWidth = points[0].distanceTo(points[1]);
+        const planeHeight = points[1].distanceTo(points[2]);
+        const domWidthPx = evenNumber((planeWidth / ratio) * dpr);
+        const domHeightPx = evenNumber((planeHeight / ratio) * dpr);
+        const css3DObject = new CSS3DRenderer.CSS3DObject(element);
+        css3DObject.scale.set(ratio, ratio, ratio);
+        element.style.width = domWidthPx + 'px';
+        element.style.height = domHeightPx + 'px';
+        element.style.pointerEvents = 'none';
+        const centerPosition = centerPoint(points[0], points[2]);
+        const vector01 = points[1].clone().sub(points[0]); // 点0 -> 点1 的向量
+        const vector12 = points[2].clone().sub(points[1]); // 点1 -> 点2 的向量
+        // 旋转
+        const rotateXAngle = new THREE.Vector3(0, 1, 0).angleTo(new THREE.Vector3(0, vector12.y, vector12.z));
+        const rotateYAngle = new THREE.Vector3(1, 0, 0).angleTo(new THREE.Vector3(vector01.x, 0, vector01.z));
+        const rotateZAngle = vector01.angleTo(new THREE.Vector3(vector01.x, 0, vector01.z));
+        /**
+         * [0,1,0] => [0,0,1]  为rotate Worldx正方向
+         * [0,0,1] => [0,1,0]  为rotate Worldy正方向
+         * [0,1,1] => [-1,0,0] 为rotate Worldz正方向
+         */
+        const rotateX = (vector12.z > 0 ? -1 : 1) * rotateXAngle;
+        const rotateY = (vector01.z < 0 ? 1 : -1) * rotateYAngle;
+        const rotateZ = ((vector01.x > 0 && vector01.y < 0) || (vector01.x < 0 && vector01.y > 0) ? -1 : 1) * rotateZAngle;
+        css3DObject.rotateOnWorldAxis(new THREE.Vector3(1, 0, 0), rotateX); // x
+        css3DObject.rotateOnWorldAxis(new THREE.Vector3(0, 1, 0), rotateY); // y
+        css3DObject.rotateOnWorldAxis(new THREE.Vector3(0, 0, 1), rotateZ); // z
+        css3DObject.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
+        let mesh;
+        if (mode === 'behind') {
+            const material = new THREE__namespace.MeshBasicMaterial({
+                opacity: 0,
+                transparent: false,
+                side: THREE__namespace.DoubleSide,
+            });
+            const geometry = new THREE__namespace.PlaneGeometry(domWidthPx, domHeightPx);
+            mesh = new THREE__namespace.Mesh(geometry, material);
+            mesh.name = 'CSS3DRenderPlugin-mesh';
+            mesh.position.copy(css3DObject.position);
+            mesh.rotation.copy(css3DObject.rotation);
+            mesh.scale.copy(css3DObject.scale);
+        }
+        return { css3DObject, mesh };
+    };
+    return {
+        create3DDomContainer,
+        disposeAll: () => {
+            state.disposeCallbacks.forEach((d) => d?.());
+            state.disposeCallbacks = [];
+        },
+    };
+};
+
+const currentTarget = store.writable(null);
+
+/* src/PanoSpatialTagPlugin/Components/origins.svelte generated by Svelte v3.47.0 */
+
+function add_css$1(target) {
+	internal.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 = internal.element("i");
+			internal.attr(i, "class", "svelte-scnx9u");
+			internal.toggle_class(i, "PanoSpatialTagPlugin__tag-origin", true);
+			internal.toggle_class(i, "PanoSpatialTagPlugin__tag-origin-destroy", /*origin*/ ctx[3].destroying);
+			internal.set_style(i, "top", style_top, false);
+			internal.set_style(i, "left", style_left, false);
+			internal.set_style(i, "visibility", /*origin*/ ctx[3].front ? 'visible' : 'hidden', false);
+		},
+		m(target, anchor) {
+			internal.insert(target, i, anchor);
+
+			if (!mounted) {
+				dispose = internal.listen(i, "click", click_handler);
+				mounted = true;
+			}
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+
+			if (dirty & /*origins*/ 1) {
+				internal.toggle_class(i, "PanoSpatialTagPlugin__tag-origin-destroy", /*origin*/ ctx[3].destroying);
+			}
+
+			if (dirty & /*origins*/ 1 && style_top !== (style_top = `${/*origin*/ ctx[3].top}%`)) {
+				internal.set_style(i, "top", style_top, false);
+			}
+
+			if (dirty & /*origins*/ 1 && style_left !== (style_left = `${/*origin*/ ctx[3].left}%`)) {
+				internal.set_style(i, "left", style_left, false);
+			}
+
+			if (dirty & /*origins*/ 1) {
+				internal.set_style(i, "visibility", /*origin*/ ctx[3].front ? 'visible' : 'hidden', false);
+			}
+		},
+		d(detaching) {
+			if (detaching) internal.detach(i);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function create_fragment$1(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 = internal.empty();
+		},
+		m(target, anchor) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(target, anchor);
+			}
+
+			internal.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: internal.noop,
+		o: internal.noop,
+		d(detaching) {
+			internal.destroy_each(each_blocks, detaching);
+			if (detaching) internal.detach(each_1_anchor);
+		}
+	};
+}
+
+function instance$1($$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 Origins extends internal.SvelteComponent {
+	constructor(options) {
+		super();
+		internal.init(this, options, instance$1, create_fragment$1, internal.safe_not_equal, { origins: 0 }, add_css$1);
+	}
+}
+
+/* src/PanoSpatialTagPlugin/Components/tag.svelte generated by Svelte v3.47.0 */
+
+function add_css(target) {
+	internal.append_styles(target, "svelte-1xmyxaa", ".PanoSpatialTagPlugin__tag-x.svelte-1xmyxaa.svelte-1xmyxaa{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-1xmyxaa.svelte-1xmyxaa{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-1xmyxaa.svelte-1xmyxaa{position:absolute;left:-1rem;width:2rem;height:100%;overflow:hidden}.PanoSpatialTagPlugin__tag-flagpole.svelte-1xmyxaa.svelte-1xmyxaa{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-1xmyxaa.svelte-1xmyxaa{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-1xmyxaa.svelte-1xmyxaa{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-1xmyxaa .PanoSpatialTagPlugin__tag-line1.svelte-1xmyxaa{animation:svelte-1xmyxaa-PanoSpatialTagPlugin__tag-line1 linear .5s forwards .45s}.PanoSpatialTagPlugin__tag-show.svelte-1xmyxaa .PanoSpatialTagPlugin__tag-line2.svelte-1xmyxaa{animation:svelte-1xmyxaa-PanoSpatialTagPlugin__tag-line2 linear .5s forwards .65s}.PanoSpatialTagPlugin__tag-x.PanoSpatialTagPlugin__tag-upside-down.svelte-1xmyxaa.svelte-1xmyxaa{transform:translate(0, 0)}.PanoSpatialTagPlugin__tag-upside-down.svelte-1xmyxaa .PanoSpatialTagPlugin__tag-line.svelte-1xmyxaa{transform:scaleY(-1)}.PanoSpatialTagPlugin__tag-animate.svelte-1xmyxaa.svelte-1xmyxaa{position:relative;height:100%;overflow:hidden;transform-origin:left top;transition:transform .5s linear}.PanoSpatialTagPlugin__tag-upside-down.svelte-1xmyxaa .PanoSpatialTagPlugin__tag-animate.svelte-1xmyxaa{transform-origin:left bottom}.PanoSpatialTagPlugin__tag-content.svelte-1xmyxaa.svelte-1xmyxaa{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-1xmyxaa .PanoSpatialTagPlugin__tag-content.svelte-1xmyxaa{bottom:0}.PanoSpatialTagPlugin__tag-show.svelte-1xmyxaa .PanoSpatialTagPlugin__tag-flagpole.svelte-1xmyxaa{opacity:1;transform:translate(-50%, 0) scaleY(1)}.PanoSpatialTagPlugin__tag-upside-down.svelte-1xmyxaa .PanoSpatialTagPlugin__tag-shadow.svelte-1xmyxaa{top:unset;bottom:-15rem}.PanoSpatialTagPlugin__tag-show.svelte-1xmyxaa .PanoSpatialTagPlugin__tag-shadow.svelte-1xmyxaa{opacity:.32}.PanoSpatialTagPlugin__tag-show.svelte-1xmyxaa .PanoSpatialTagPlugin__tag-content.svelte-1xmyxaa{transform:translate(0, 0)}.PanoSpatialTagPlugin__tag-hide.svelte-1xmyxaa .PanoSpatialTagPlugin__tag-flagpole.svelte-1xmyxaa{opacity:0;transform:translate(-50%, 60%) scaleY(0);transition:transform .5s .55s, opacity .4s .55s}.PanoSpatialTagPlugin__tag-hide.svelte-1xmyxaa .PanoSpatialTagPlugin__tag-shadow.svelte-1xmyxaa{opacity:0;transition:opacity .8s}.PanoSpatialTagPlugin__tag-hide.svelte-1xmyxaa .PanoSpatialTagPlugin__tag-content.svelte-1xmyxaa{transform:translate(-100%, 0);transition:transform .6s cubic-bezier(.53,.06,.88,.59)}.PanoSpatialTagPlugin__tag-hide.svelte-1xmyxaa .PanoSpatialTagPlugin__tag-content .svelte-1xmyxaa{pointer-events:none}.PanoSpatialTagPlugin__tag-hide.svelte-1xmyxaa .PanoSpatialTagPlugin__tag-line1.svelte-1xmyxaa{opacity:0.5;transform:translate(-50%, 10%) scaleY(0);animation:svelte-1xmyxaa-PanoSpatialTagPlugin__tag-line1-hide linear .28s forwards .3s}.PanoSpatialTagPlugin__tag-hide.svelte-1xmyxaa .PanoSpatialTagPlugin__tag-line2.svelte-1xmyxaa{opacity:0.5;transform:translate(-50%, 0) scaleY(0);animation:svelte-1xmyxaa-PanoSpatialTagPlugin__tag-line2-hide linear .28s forwards .45s}@keyframes svelte-1xmyxaa-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-1xmyxaa-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-1xmyxaa-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-1xmyxaa-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 = internal.element("div");
+			div0 = internal.element("div");
+			t0 = internal.space();
+			div1 = internal.element("div");
+			i0 = internal.element("i");
+			t1 = internal.space();
+			i1 = internal.element("i");
+			t2 = internal.space();
+			i2 = internal.element("i");
+			t3 = internal.space();
+			div3 = internal.element("div");
+			div2 = internal.element("div");
+			internal.attr(div0, "class", "PanoSpatialTagPlugin__tag-shadow svelte-1xmyxaa");
+			internal.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)");
+			internal.attr(i0, "class", "PanoSpatialTagPlugin__tag-flagpole svelte-1xmyxaa");
+			internal.set_style(i0, "width", /*lineWidthZoom*/ ctx[4] + "rem");
+			internal.attr(i1, "class", "PanoSpatialTagPlugin__tag-line1 svelte-1xmyxaa");
+			internal.attr(i2, "class", "PanoSpatialTagPlugin__tag-line2 svelte-1xmyxaa");
+			internal.attr(div1, "class", "PanoSpatialTagPlugin__tag-line svelte-1xmyxaa");
+			internal.attr(div2, "class", "PanoSpatialTagPlugin__tag-content svelte-1xmyxaa");
+			internal.attr(div3, "class", "PanoSpatialTagPlugin__tag-animate svelte-1xmyxaa");
+			internal.set_style(div3, "transform", "scale(" + /*contentZoom*/ ctx[3] * 3 + ")");
+			internal.attr(div4, "id", div4_id_value = 'PanoSpatialTagPlugin__' + /*id*/ ctx[0]);
+			internal.set_style(div4, "height", 20 * /*lineHeightZoom*/ ctx[5] + "rem");
+			internal.attr(div4, "class", "svelte-1xmyxaa");
+			internal.toggle_class(div4, "PanoSpatialTagPlugin__tag-x", true);
+			internal.toggle_class(div4, "PanoSpatialTagPlugin__tag-upside-down", /*upsideDown*/ ctx[1]);
+			internal.toggle_class(div4, "PanoSpatialTagPlugin__tag-show", /*show*/ ctx[10]);
+			internal.toggle_class(div4, "PanoSpatialTagPlugin__tag-hide", /*show*/ ctx[10] === false || /*destroying*/ ctx[6]);
+		},
+		m(target, anchor) {
+			internal.insert(target, div4, anchor);
+			internal.append(div4, div0);
+			internal.append(div4, t0);
+			internal.append(div4, div1);
+			internal.append(div1, i0);
+			internal.append(div1, t1);
+			internal.append(div1, i1);
+			internal.append(div1, t2);
+			internal.append(div1, i2);
+			internal.append(div4, t3);
+			internal.append(div4, div3);
+			internal.append(div3, div2);
+			div2.innerHTML = /*content*/ ctx[2];
+			/*div2_binding*/ ctx[16](div2);
+
+			if (!mounted) {
+				dispose = internal.listen(div2, "click", /*handleClickContent*/ ctx[11]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*contentWidth, contentZoom, contentHeight, upsideDown*/ 394) {
+				internal.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) {
+				internal.set_style(i0, "width", /*lineWidthZoom*/ ctx[4] + "rem");
+			}
+
+			if (dirty & /*content*/ 4) div2.innerHTML = /*content*/ ctx[2];
+			if (dirty & /*contentZoom*/ 8) {
+				internal.set_style(div3, "transform", "scale(" + /*contentZoom*/ ctx[3] * 3 + ")");
+			}
+
+			if (dirty & /*id*/ 1 && div4_id_value !== (div4_id_value = 'PanoSpatialTagPlugin__' + /*id*/ ctx[0])) {
+				internal.attr(div4, "id", div4_id_value);
+			}
+
+			if (dirty & /*lineHeightZoom*/ 32) {
+				internal.set_style(div4, "height", 20 * /*lineHeightZoom*/ ctx[5] + "rem");
+			}
+
+			if (dirty & /*upsideDown*/ 2) {
+				internal.toggle_class(div4, "PanoSpatialTagPlugin__tag-upside-down", /*upsideDown*/ ctx[1]);
+			}
+
+			if (dirty & /*show*/ 1024) {
+				internal.toggle_class(div4, "PanoSpatialTagPlugin__tag-show", /*show*/ ctx[10]);
+			}
+
+			if (dirty & /*show, destroying*/ 1088) {
+				internal.toggle_class(div4, "PanoSpatialTagPlugin__tag-hide", /*show*/ ctx[10] === false || /*destroying*/ ctx[6]);
+			}
+		},
+		i: internal.noop,
+		o: internal.noop,
+		d(detaching) {
+			if (detaching) internal.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;
+		}
+	};
+
+	svelte.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
+				);
+			}
+		}
+	});
+
+	svelte.afterUpdate(() => {
+		$$invalidate(7, contentWidth = contentDom.offsetWidth);
+		$$invalidate(8, contentHeight = contentDom.offsetHeight);
+		if (timeoutId) return;
+		$$invalidate(10, show = !folded);
+	});
+
+	svelte.onDestroy(() => {
+		hooks.emit('destroyTag', { id });
+		unsubscribe();
+		dispose();
+	});
+
+	function div2_binding($$value) {
+		internal.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 Tag extends internal.SvelteComponent {
+	constructor(options) {
+		super();
+
+		internal.init(
+			this,
+			options,
+			instance,
+			create_fragment,
+			internal.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
+		);
+	}
+}
+
+const pluginStyle = {
+    position: 'absolute',
+    top: '0px',
+    left: '0px',
+    width: '100%',
+    height: '100%',
+    pointerEvents: 'none',
+};
+
+const DEFAULT_OPEN_DELIMITER = '<';
+const DEFAULT_CLOSE_DELIMITER = '>';
+const DEFAULT_DELIMITER = '%';
+const DEFAULT_LOCALS_NAME = 'locals';
+const REGEX_STRING = '(<%%|%%>|<%=|<%-|<%_|<%#|<%|%>|-%>|_%>)';
+const ENCODE_HTML_RULES = {
+    '&': '&amp',
+    '<': '&lt',
+    '>': '&gt',
+    '"': '&#34',
+    "'": '&#39'
+};
+const TEMPLATE_MODES = {
+    EVAL: 'eval',
+    ESCAPED: 'escaped',
+    RAW: 'raw',
+    COMMENT: 'comment',
+    LITERAL: 'literal',
+};
+function stripSemi(str) {
+    return str.replace(/;(\s*$)/, '$1');
+}
+function render(template, data) {
+    const templ = new Template(template);
+    return templ.compileFunction()(data);
+}
+class Template {
+    templateText;
+    mode = null;
+    truncate = false;
+    currentLine = 1;
+    source = '';
+    regex = new RegExp(REGEX_STRING);
+    constructor(text) {
+        this.templateText = text;
+    }
+    compileFunction() {
+        let src;
+        const prepended = '  var __output = "";\n' +
+            '  function __append(s) { if (s !== undefined && s !== null) __output += s }\n' +
+            '  with (' + DEFAULT_LOCALS_NAME + ' || {}) {' + '\n';
+        const appended = '  }' + '\n  return __output;' + '\n';
+        const escapeFn = function (markup) {
+            return markup == undefined
+                ? ''
+                : String(markup)
+                    .replace(/[&<>'"]/g, function (c) {
+                    return ENCODE_HTML_RULES[c] || c;
+                });
+        };
+        this._generateSource();
+        this.source = prepended + this.source + appended;
+        src = this.source;
+        src = 'escapeFn = escapeFn || ' + escapeFn.toString() + ';' + '\n' + src;
+        return new Function(DEFAULT_LOCALS_NAME + ', escapeFn', src);
+    }
+    _generateSource() {
+        this.templateText =
+            this.templateText.replace(/[ \t]*<%_/gm, '<%_').replace(/_%>[ \t]*/gm, '_%>');
+        const matches = this._parseTemplateText();
+        const d = DEFAULT_DELIMITER;
+        const o = DEFAULT_OPEN_DELIMITER;
+        const c = DEFAULT_CLOSE_DELIMITER;
+        if (matches && matches.length) {
+            matches.forEach((line, index) => {
+                let closing;
+                if (line.indexOf(o + d) === 0
+                    && line.indexOf(o + d + d) !== 0) {
+                    closing = matches[index + 2];
+                    if (!(closing == d + c || closing == '-' + d + c || closing == '_' + d + c)) {
+                        throw new Error('Could not find matching close tag for "' + line + '".');
+                    }
+                }
+                this._scanLine(line);
+            });
+        }
+    }
+    _parseTemplateText() {
+        let str = this.templateText;
+        const pat = this.regex;
+        let result = pat.exec(str);
+        const arr = [];
+        let firstPos;
+        while (result) {
+            firstPos = result.index;
+            if (firstPos !== 0) {
+                arr.push(str.substring(0, firstPos));
+                str = str.slice(firstPos);
+            }
+            arr.push(result[0]);
+            str = str.slice(result[0].length);
+            result = pat.exec(str);
+        }
+        if (str) {
+            arr.push(str);
+        }
+        return arr;
+    }
+    _addOutput(line) {
+        if (this.truncate) {
+            line = line.replace(/^(?:\r\n|\r|\n)/, '');
+            this.truncate = false;
+        }
+        if (!line)
+            return line;
+        line = line.replace(/\\/g, '\\\\');
+        line = line.replace(/\n/g, '\\n');
+        line = line.replace(/\r/g, '\\r');
+        line = line.replace(/"/g, '\\"');
+        this.source += '    ; __append("' + line + '")' + '\n';
+    }
+    _scanLine(line) {
+        const d = DEFAULT_DELIMITER;
+        const o = DEFAULT_OPEN_DELIMITER;
+        const c = DEFAULT_CLOSE_DELIMITER;
+        line.split('\n').length - 1;
+        switch (line) {
+            case o + d:
+            case o + d + '_':
+                this.mode = TEMPLATE_MODES.EVAL;
+                break;
+            case o + d + '=':
+                this.mode = TEMPLATE_MODES.ESCAPED;
+                break;
+            case o + d + '-':
+                this.mode = TEMPLATE_MODES.RAW;
+                break;
+            case o + d + '#':
+                this.mode = TEMPLATE_MODES.COMMENT;
+                break;
+            case o + d + d:
+                this.mode = TEMPLATE_MODES.LITERAL;
+                this.source += '    ; __append("' + line.replace(o + d + d, o + d) + '")' + '\n';
+                break;
+            case d + d + c:
+                this.mode = TEMPLATE_MODES.LITERAL;
+                this.source += '    ; __append("' + line.replace(d + d + c, d + c) + '")' + '\n';
+                break;
+            case d + c:
+            case '-' + d + c:
+            case '_' + d + c:
+                if (this.mode == TEMPLATE_MODES.LITERAL) {
+                    this._addOutput(line);
+                }
+                this.mode = null;
+                this.truncate = line.indexOf('-') === 0 || line.indexOf('_') === 0;
+                break;
+            default:
+                if (this.mode) {
+                    switch (this.mode) {
+                        case TEMPLATE_MODES.EVAL:
+                        case TEMPLATE_MODES.ESCAPED:
+                        case TEMPLATE_MODES.RAW:
+                            if (line.lastIndexOf('//') > line.lastIndexOf('\n')) {
+                                line += '\n';
+                            }
+                    }
+                    switch (this.mode) {
+                        case TEMPLATE_MODES.EVAL:
+                            this.source += '    ; ' + line + '\n';
+                            break;
+                        case TEMPLATE_MODES.ESCAPED:
+                            this.source += '    ; __append(escapeFn(' + stripSemi(line) + '))' + '\n';
+                            break;
+                        case TEMPLATE_MODES.RAW:
+                            this.source += '    ; __append(' + stripSemi(line) + ')' + '\n';
+                            break;
+                        case TEMPLATE_MODES.COMMENT:
+                            break;
+                        case TEMPLATE_MODES.LITERAL:
+                            this._addOutput(line);
+                            break;
+                    }
+                }
+                else {
+                    this._addOutput(line);
+                }
+        }
+    }
+}
+
+const MESH_SIZE = 0.001;
+const RAY_ORIGIN_Y = 1.4;
+const RAY_TOLERANT_DISTANCE = 0.01;
+const BLUR_IMAGE_URL = 'https://vrlab-image4.ljcdn.com/release/web/PanoSpatialTagPlugin__blur.png';
+const MIN_DISTANCE = 1.2;
+const MAX_DISTANCE = 3.5;
+/**
+ * 空间游走标签插件
+ */
+const PanoSpatialTagPlugin = (five$1, params) => {
+    let wrapper = params?.container;
+    const wait = params?.wait ?? 200;
+    const maxNumberOnScreen = params?.maxNumberOnScreen ?? 3;
+    const minRad = params?.minRad ?? Math.PI / 4;
+    const nearTolerance = params?.nearTolerance ?? 100;
+    const upsideHeight = params?.upsideHeight ?? 1.6;
+    // const foldPercent = params?.foldPercent ?? 20
+    const css3DRender = CSS3DRenderPlugin(five$1);
+    const container = document.createElement('div');
+    container.classList.add('PanoSpatialTagPlugin');
+    Object.assign(container.style, pluginStyle);
+    const hooks = new five.Subscribe();
+    let blurImage = new Image();
+    blurImage.src = BLUR_IMAGE_URL;
+    const state = {
+        points: [],
+        origins: [],
+        tags: [],
+        template: '',
+        events: {},
+        render,
+        folded: false,
+        enabled: true,
+        forbidden: true,
+    };
+    const origins = new Origins({
+        target: container,
+        props: { origins: state.origins },
+    });
+    const onCameraUpdate = (pose, userAction) => {
+        updateOrigins();
+        if (userAction) {
+            updateTags();
+            // state.tags.forEach(tag => {
+            //   const mouse = tag.position.clone().project(five.camera)
+            //   const top = ( - mouse.y + 1 ) / 2 * 100
+            // })
+        }
+    };
+    const onPanoArrived = () => {
+        if (state.forbidden) {
+            state.forbidden = false;
+            updateTags();
+        }
+    };
+    const onPanoWillArrive = (pano, pose) => {
+        if (state.tags.length === 0)
+            return;
+        const rotateRad = pose.longitude - five$1.state.longitude;
+        const camera = five$1.camera.clone();
+        camera.position.copy(pose.offset);
+        camera.rotateOnWorldAxis(new THREE__namespace.Vector3(0, 1, 0), rotateRad);
+        camera.updateProjectionMatrix();
+        camera.updateMatrixWorld(true);
+        const frustum = new THREE__namespace.Frustum();
+        const projScreenMatrix = new THREE__namespace.Matrix4();
+        projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+        frustum.setFromProjectionMatrix(projScreenMatrix);
+        state.tags.forEach(tag => {
+            const distance = camera.position.clone().setY(RAY_ORIGIN_Y).distanceTo(tag.position);
+            if (distance < MIN_DISTANCE || distance > MAX_DISTANCE)
+                return tag.destroying = true;
+            if (!frustum.containsPoint(tag.position))
+                return tag.destroying = true;
+            const v = tag.position.clone().sub(camera.position).setY(0);
+            if (v.angleTo(tag.normal) > Math.PI / 2 - minRad &&
+                v.angleTo(tag.normal) < Math.PI / 2 + minRad)
+                return tag.destroying = true;
+        });
+        state.tags.forEach(tag => {
+            if (tag.destroying) {
+                tag.app.$set({
+                    contentZoom: 0.1 + camera.position.distanceTo(tag.position) / MAX_DISTANCE,
+                    lineWidthZoom: 0.38 * (0.01 + camera.position.distanceTo(tag.position) / MAX_DISTANCE),
+                    destroying: tag.destroying,
+                });
+            }
+            else {
+                tag.app.$set({
+                    lineWidthZoom: 0.38 * (0.01 + camera.position.distanceTo(tag.position) / MAX_DISTANCE),
+                    lineHeightZoom: 0.4 + (camera.position.distanceTo(tag.position) - MIN_DISTANCE) / MAX_DISTANCE * 0.6,
+                    contentZoom: 0.1 + camera.position.distanceTo(tag.position) / MAX_DISTANCE,
+                });
+            }
+        });
+        setTimeout(() => {
+            state.tags.forEach(tag => {
+                if (tag.destroying) {
+                    tag.app.$destroy();
+                    tag = null;
+                }
+            });
+            state.tags = state.tags.filter(tag => !tag.destroying);
+            updateOrigins();
+        }, 1900);
+    };
+    const onModeChange = (mode) => {
+        if (mode !== five.Five.Mode.Panorama && !state.forbidden) {
+            origins.$set({ origins: [] });
+            state.tags.forEach(tag => {
+                tag.app.$destroy();
+                tag = null;
+            });
+            state.origins = [];
+            state.tags = [];
+            state.forbidden = true;
+        }
+    };
+    const updateOrigins = () => {
+        if (state.forbidden || !state.enabled)
+            return;
+        const camera = five$1.camera;
+        const direction = camera.getWorldDirection(new THREE__namespace.Vector3());
+        state.origins = state.tags.map(tag => {
+            const mouse = tag.position.clone().project(camera);
+            const front = tag.position.clone().sub(camera.position).setY(0)
+                .angleTo(direction.setY(0)) < Math.PI / 2;
+            return {
+                id: tag.id,
+                front,
+                left: (mouse.x + 1) / 2 * 100,
+                top: (-mouse.y + 1) / 2 * 100,
+                destroying: tag.destroying,
+            };
+        });
+        origins.$set({ origins: state.origins });
+    };
+    const updateTags = () => {
+        if (state.forbidden || !state.enabled)
+            return;
+        if (state.timeoutId)
+            clearTimeout(state.timeoutId);
+        state.timeoutId = setTimeout(() => {
+            state.timeoutId = undefined;
+            const newTags = getNewTags();
+            if (newTags.length) {
+                state.tags = state.tags.concat(newTags);
+                updateOrigins();
+            }
+        }, wait);
+    };
+    const getNewTags = () => {
+        const { clientWidth, clientHeight } = five$1.getElement();
+        const newTags = [];
+        const camera = five$1.camera;
+        const frustum = new THREE__namespace.Frustum();
+        const projScreenMatrix = new THREE__namespace.Matrix4();
+        const direction = camera.getWorldDirection(new THREE__namespace.Vector3());
+        projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
+        frustum.setFromProjectionMatrix(projScreenMatrix);
+        const frontTagLength = state.tags.filter(tag => frustum.containsPoint(tag.position) && !tag.destroying).length;
+        const points = state.points.reduce((result, point) => {
+            if (state.tags.find(tag => point.id === tag.id && !tag.destroying))
+                return result;
+            const distance = camera.position.clone().setY(RAY_ORIGIN_Y).distanceTo(point.position);
+            if (distance < MIN_DISTANCE || distance > MAX_DISTANCE)
+                return result;
+            if (!frustum.containsPoint(point.position))
+                return result;
+            const v = point.position.clone().sub(camera.position).setY(0);
+            if (v.angleTo(point.normal) > Math.PI / 2 - minRad &&
+                v.angleTo(point.normal) < Math.PI / 2 + minRad)
+                return result;
+            const mouse = point.position.clone().project(camera);
+            if (!state.tags.every(tag => {
+                if (tag.position.clone().sub(camera.position).setY(0)
+                    .angleTo(direction.setY(0)) > Math.PI / 2)
+                    return true;
+                const _mouse = tag.position.clone().project(camera);
+                return Math.sqrt(Math.pow((mouse.x - _mouse.x) / 2 * clientWidth, 2) +
+                    Math.pow((mouse.y - _mouse.y) / 2 * clientHeight, 2)) > nearTolerance;
+            }))
+                return result;
+            const newPoint = {
+                id: point.id,
+                position: point.position,
+                normal: point.normal,
+                replacement: point.replacement,
+                weight: point.weight,
+                distance,
+            };
+            let index;
+            for (let i = 0, l = result.length; i < l; i++) {
+                const anotherPoint = result[i];
+                if (newPoint.weight > anotherPoint.weight) {
+                    index = i;
+                    break;
+                }
+                if (newPoint.distance < anotherPoint.distance) {
+                    index = i;
+                    break;
+                }
+            }
+            if (index !== undefined)
+                result.splice(index, 0, newPoint);
+            else
+                result.push(newPoint);
+            return result;
+        }, []);
+        for (let i = 0, l = points.length; i < l; i++) {
+            if (frontTagLength + newTags.length >= maxNumberOnScreen)
+                break;
+            const point = points[i];
+            if (newTags.find(tag => point.id === tag.id))
+                continue;
+            const mouse = point.position.clone().project(camera);
+            if (!state.tags.concat(newTags).every(tag => {
+                if (tag.position.clone().sub(camera.position).setY(0)
+                    .angleTo(direction.setY(0)) > Math.PI / 2)
+                    return true;
+                const _mouse = tag.position.clone().project(camera);
+                return Math.sqrt(Math.pow((mouse.x - _mouse.x) / 2 * clientWidth, 2) +
+                    Math.pow((mouse.y - _mouse.y) / 2 * clientHeight, 2)) > nearTolerance;
+            }))
+                continue;
+            const raycaster = new THREE__namespace.Raycaster(camera.position.clone().setY(RAY_ORIGIN_Y), point.position.clone().sub(camera.position.clone().setY(RAY_ORIGIN_Y)).normalize(), 0, point.distance + RAY_TOLERANT_DISTANCE);
+            const [intersect] = five$1.model.intersectRaycaster(raycaster);
+            if (!intersect)
+                continue;
+            if (point.distance - intersect.distance < RAY_TOLERANT_DISTANCE) {
+                const { position, normal, id, replacement } = point;
+                const plane = new THREE__namespace.Plane().setFromNormalAndCoplanarPoint(normal, position);
+                const right = position.clone().sub(camera.position)
+                    .cross(new THREE__namespace.Vector3(0, 1, 0)).setLength(MESH_SIZE);
+                const square = [
+                    position.clone(),
+                    position.clone().add(right),
+                    position.clone().add(new THREE__namespace.Vector3(0, MESH_SIZE, 0)).add(right),
+                    position.clone().add(new THREE__namespace.Vector3(0, MESH_SIZE, 0)),
+                ].map(v => plane.projectPoint(v, new THREE__namespace.Vector3()));
+                const { container, dispose } = css3DRender.create3DDomContainer(square) || {};
+                const app = new Tag({
+                    target: container,
+                    props: {
+                        id,
+                        content: state.render(state.template, replacement),
+                        lineWidthZoom: 0.38 * (0.01 + camera.position.distanceTo(position) / MAX_DISTANCE),
+                        lineHeightZoom: 0.4 + (camera.position.distanceTo(position) - MIN_DISTANCE) / MAX_DISTANCE * 0.6,
+                        contentZoom: 0.1 + camera.position.distanceTo(position) / MAX_DISTANCE,
+                        upsideDown: position.y > upsideHeight,
+                        folded: state.folded,
+                        events: state.events,
+                        hooks,
+                        dispose,
+                    },
+                });
+                newTags.push({
+                    position,
+                    normal,
+                    id,
+                    app,
+                });
+            }
+        }
+        return newTags;
+    };
+    /** 标签数据加载
+    * @param data.points {Array} 标签数据
+    * @param data.enabled {Boolean} 插件是否启用
+    * @param data.folded {Boolean} 标签是否默认展开
+    */
+    const load = (data) => {
+        state.points = data.points.map(point => {
+            return {
+                id: point.id,
+                position: new THREE__namespace.Vector3().fromArray(point.position),
+                normal: new THREE__namespace.Vector3().fromArray(point.normal),
+                replacement: point.replacement ?? {},
+                weight: point.weight ?? -1,
+            };
+        });
+        if (data.render)
+            state.render = data.render;
+        if (data.template)
+            state.template = data.template;
+        if (data.events)
+            state.events = data.events;
+        if (data.enabled === false)
+            state.enabled = data.enabled;
+        if (data.folded === true)
+            state.folded = data.folded;
+    };
+    /** 标签启用
+    * 启用插件并重新计算展示标签
+    */
+    const enable = () => {
+        state.enabled = true;
+        updateTags();
+    };
+    /** 插件禁用
+    * 1. 禁用同时会清除已展示的标签
+    * 2. 再次启用时会重新计算展示标签
+    */
+    const disable = () => {
+        state.enabled = false;
+        origins.$set({ origins: [] });
+        state.tags.forEach(tag => {
+            tag.app.$destroy();
+            tag = null;
+        });
+        state.origins = [];
+        state.tags = [];
+    };
+    /** 展开所有标签
+    * 1. 展开所有收起的标签
+    * 2. 新标签会默认展开
+    */
+    const unfoldAll = () => {
+        state.folded = false;
+        state.tags.forEach(tag => {
+            tag.app.$set({ folded: state.folded });
+        });
+    };
+    /** 收起所有标签
+    * 1. 收起所有展开的标签
+    * 2. 新标签会默认收起
+    */
+    const foldAll = () => {
+        state.folded = true;
+        state.tags.forEach(tag => {
+            tag.app.$set({ folded: state.folded });
+        });
+    };
+    /** 展开单个标签
+    * @param id {Number | String} 标签ID
+    */
+    const unfold = (id) => {
+        state.tags.forEach(tag => {
+            if (tag.id === id)
+                tag.app.$set({ folded: false });
+        });
+    };
+    /** 收起单个标签
+    * @param id {Number | String} 标签ID
+    */
+    const fold = (id) => {
+        state.tags.forEach(tag => {
+            if (tag.id === id)
+                tag.app.$set({ folded: true });
+        });
+    };
+    const dispose = () => {
+        blurImage = null;
+        css3DRender.disposeAll();
+        origins.$destroy();
+        state.tags.forEach(tag => {
+            tag.app.$destroy();
+            tag = null;
+        });
+        state.origins = [];
+        state.tags = [];
+        five$1.off('panoWillArrive', onPanoWillArrive);
+        five$1.off('panoArrived', onPanoArrived);
+        five$1.off('modeChange', onModeChange);
+        five$1.off('cameraUpdate', onCameraUpdate);
+    };
+    if (five$1?.model?.loaded) {
+        if (!wrapper)
+            wrapper = five$1.getElement().parentElement;
+        wrapper.appendChild(container);
+        state.forbidden = false;
+        updateTags();
+        five$1.on('panoWillArrive', onPanoWillArrive);
+        five$1.on('panoArrived', onPanoArrived);
+        five$1.on('modeChange', onModeChange);
+        five$1.on('cameraUpdate', onCameraUpdate);
+    }
+    else {
+        five$1.once('modelBvhLoaded', () => {
+            if (!wrapper)
+                wrapper = five$1.getElement().parentElement;
+            wrapper.appendChild(container);
+            state.forbidden = false;
+            updateTags();
+            five$1.on('panoWillArrive', onPanoWillArrive);
+            five$1.on('panoArrived', onPanoArrived);
+            five$1.on('modeChange', onModeChange);
+            five$1.on('cameraUpdate', onCameraUpdate);
+        });
+    }
+    five$1.on('dispose', dispose);
+    return {
+        load,
+        unfoldAll,
+        foldAll,
+        unfold,
+        fold,
+        enable,
+        disable,
+        hooks,
+        dispose,
+    };
+};
+
+exports.PanoSpatialTagPlugin = PanoSpatialTagPlugin;
+exports["default"] = PanoSpatialTagPlugin;