@realsee/dnalogel 2.2.0-alpha.1 → 2.2.0

package/dist/PanoSpatialTagPlugin/index.js

@@ -1,1908 +0,0 @@
-'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 createSymbol(description) {
-    // @ts-ignore
-    return typeof Symbol === 'undefined' ? `$Symbol<${description}>$` : Symbol(description);
-}
-const EVENT_SYMBOL = createSymbol('$$EVENT$$');
-function __generateEventIfNotExisted(instance) {
-    if (!instance[EVENT_SYMBOL]) {
-        instance[EVENT_SYMBOL] = {};
-    }
-    return instance[EVENT_SYMBOL];
-}
-function __removeEventIfNotExisted(instance) {
-    if (!instance[EVENT_SYMBOL]) {
-        delete instance[EVENT_SYMBOL];
-    }
-}
-/**
- * 监听者模式
- * @template T - 预设的监听回调类型
- * @example
- * ```
- * new Subscribe<{
- * "foo": [arg1: number, arg2: string],
- * "bar": [arg: boolean],
- * }>()
- * ```
- */
-class Subscribe {
-    /**
-     * 判断是否注册了事件
-     * @param name - 事件类型
-     */
-    hasListener(name) {
-        const events = __generateEventIfNotExisted(this);
-        return Boolean((events === null || events === void 0 ? void 0 : events[name]) && events[name].length > 0);
-    }
-    /**
-     * 注册事件
-     * @param name - 事件类型
-     * @param callback - 事件回调函数
-     * @param once - 是否只执行一次
-     * @returns 解除事件
-     * @template K - 预设的监听事件名称
-     * @template C - 回调函数函数上下文
-     */
-    on(name, callback, once) {
-        const events = __generateEventIfNotExisted(this);
-        if (!events[name])
-            events[name] = [];
-        events[name].push([callback, once || false]);
-        return () => this.off(name, callback);
-    }
-    /**
-     * 注册事件(是否只执行一次)
-     * @param name - 事件类型
-     * @param callback - 事件回调函数
-     * @returns 解除事件
-     * @template K - 预设的监听事件名称
-     * @template C - 回调函数函数上下文
-     */
-    once(name, callback) {
-        return this.on(name, callback, true);
-    }
-    /**
-     * 解除事件
-     *
-     * 如果 name 不传的话解除对应所有事件
-     * 如果 name, callback 不传的话解除所有name的所有事件
-     * @param name - 事件类型
-     * @param callback - 事件回调函数
-     * @template K - 预设的监听事件名称
-     */
-    off(name, callback) {
-        if (name === undefined) {
-            __removeEventIfNotExisted(this);
-            return;
-        }
-        const events = __generateEventIfNotExisted(this);
-        if (!events[name])
-            events[name] = [];
-        if (callback === undefined) {
-            events[name].length = 0;
-            return;
-        }
-        let index = 0;
-        for (; index < events[name].length; index++) {
-            if (events[name][index][0] === callback)
-                break;
-        }
-        if (index < events[name].length) {
-            events[name].splice(index, 1);
-        }
-    }
-    /**
-     * 触发事件
-     * @param name - 事件类型
-     * @param data - 触发事件的数据
-     * @returns canceled 是否被触发取消
-     * @template K - 预设的监听事件名称
-     */
-    emit(name, ...data) {
-        let canceled = false;
-        const events = __generateEventIfNotExisted(this);
-        const event = events[name] || [];
-        for (let one of event.slice()) {
-            const [callback, once = false] = one;
-            const result = callback(...data);
-            if (once)
-                this.off(name, callback);
-            if (result === false)
-                canceled = true;
-        }
-        return canceled;
-    }
-}
-
-function centerPoint(point1, point2) {
-    return new THREE.Vector3((point1.x + point2.x) / 2, (point1.y + point2.y) / 2, (point1.z + point2.z) / 2);
-}
-
-function evenNumber(num, config) {
-    const roundNum = Math.round(num);
-    return roundNum % 2 === 0 ? roundNum : roundNum + Number((config === null || config === void 0 ? void 0 : config.smaller) ? -1 : 1);
-}
-
-function random() {
-    return Math.random().toString(36).slice(-6);
-}
-
-const positionToVector3 = ({ x, y, z }) => new THREE.Vector3(x, y, z);
-const arrayPositionToVector3 = ([x, y, z]) => new THREE.Vector3(x, y, z);
-const anyPositionToVector3 = (position) => {
-    if (position instanceof THREE.Vector3)
-        return position;
-    else if (Array.isArray(position))
-        return arrayPositionToVector3(position);
-    else
-        return positionToVector3(position);
-};
-
-const VERSION$1 = '1.0.0';
-const NAME = `CSS3DObjectPlus@${VERSION$1}`;
-const MinRatio = 0.00216;
-const DefaultRatio = 0.003;
-class CSS3DObjectPlus extends CSS3DRenderer.CSS3DObject {
-    constructor(container, cornerPoints, ratio = DefaultRatio, dpr = 1) {
-        const realRatio = Math.max(MinRatio, ratio);
-        const planeWidth = cornerPoints[0].distanceTo(cornerPoints[1]);
-        const planeHeight = cornerPoints[1].distanceTo(cornerPoints[2]);
-        const domWidthPx = evenNumber((planeWidth / ratio) * dpr);
-        const domHeightPx = evenNumber((planeHeight / ratio) * dpr);
-        const centerPosition = centerPoint(cornerPoints[0], cornerPoints[2]);
-        let css3DObjectElement;
-        if (realRatio === ratio) {
-            container.style.width = `${domWidthPx}px`;
-            container.style.height = `${domHeightPx}px`;
-            css3DObjectElement = container;
-        }
-        else {
-            // 兼容ratio小于0.00216的情况
-            const element = document.createElement('div');
-            element.style.width = `${domWidthPx}px`;
-            element.style.height = `${domHeightPx}px`;
-            element.style.pointerEvents = 'none';
-            const scale = ratio / realRatio;
-            container.style.position = 'absolute';
-            container.style.left = '0';
-            container.style.top = '0';
-            container.style.width = `${scale * domWidthPx}px`;
-            container.style.height = `${scale * domHeightPx}px`;
-            element.appendChild(container);
-            css3DObjectElement = element;
-        }
-        super(css3DObjectElement);
-        Object.defineProperty(this, "version", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: VERSION$1
-        });
-        Object.defineProperty(this, "width", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "height", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "domWidthPx", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "domHeightPx", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "cornerPoints", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "ratio", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "container", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "centerPosition", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        this.scale.set(realRatio, realRatio, realRatio);
-        // set public property
-        this.cornerPoints = cornerPoints;
-        this.ratio = ratio;
-        this.container = container;
-        if (realRatio === ratio) {
-            this.width = planeWidth;
-            this.height = planeHeight;
-            this.domWidthPx = domWidthPx;
-            this.domHeightPx = domHeightPx;
-            this.centerPosition = centerPosition;
-        }
-        else {
-            const scale = ratio / realRatio;
-            this.width = scale * planeWidth;
-            this.height = scale * planeHeight;
-            this.domWidthPx = scale * domWidthPx;
-            this.domHeightPx = scale * domHeightPx;
-            this.centerPosition = new THREE.Vector3()
-                .subVectors(centerPosition.clone(), cornerPoints[0].clone())
-                .multiplyScalar(scale)
-                .add(cornerPoints[0]);
-        }
-        // end
-        container.classList.add(`${NAME}__container`);
-        // 旋转前
-        const startVector01 = new THREE.Vector3(1, 0, 0); // dom初始01点向量
-        const startVector12 = new THREE.Vector3(0, 1, 0); // dom初始12点向量
-        // 旋转后
-        const endVector01 = new THREE.Vector3().subVectors(cornerPoints[1], cornerPoints[0]); // 点0 -> 点1 的向量
-        const endVector12 = new THREE.Vector3().subVectors(cornerPoints[2], cornerPoints[1]); // 点1 -> 点2 的向量
-        // 使Vector01重合
-        const vector01Quaternion = new THREE__namespace.Quaternion().setFromUnitVectors(startVector01.normalize(), endVector01.normalize());
-        this.applyQuaternion(vector01Quaternion);
-        startVector12.applyQuaternion(vector01Quaternion);
-        // 使Vector12重合
-        const vector12Quaternion = new THREE__namespace.Quaternion().setFromUnitVectors(startVector12.normalize(), endVector12.normalize());
-        this.applyQuaternion(vector12Quaternion);
-        // set position
-        this.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
-    }
-}
-
-const VERSION = 'v1.1.0';
-const PLUGIN_NAME$1 = 'CSS3DRenderer';
-const PLUGIN = `${PLUGIN_NAME$1}@${VERSION}`;
-const pluginFlag = (name) => `${PLUGIN}--${name}`;
-const globalStore = {};
-class CSS3DRender {
-    constructor() {
-        Object.defineProperty(this, "hooks", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Subscribe()
-        });
-        Object.defineProperty(this, "state", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {
-                enabled: true,
-                visible: true,
-                disposed: false,
-            }
-        });
-        Object.defineProperty(this, "store", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {
-                disposers: [],
-                frontModeCSS3DObjects: {},
-                behindModeCSS3DObjects: {},
-            }
-        });
-        /**
-         * @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
-         * @param { Vector3Position[] } points 矩形四个点坐标
-         * @param config 均为可选值
-         * @config_document `config` 均为可选值
-         *  | key                   | type                       | defaultValue        | comment |
-         *  | -                     | -                          | -                   | -       |
-         *  | `ratio`               | *`number`*                 | `0.00216`           | 1px对应多少米，默认为 0.00216，即1px对应2.16mm |
-         *  | `devicePixelRatio`    | *`number`*                 | `1`                 | 设备的物理像素分辨率与CSS像素分辨率的比值 |
-         *  | `container`           | *`HTMLElement`*            | `undefined`         | 自定义 return 中的 `container`
-         *  | `pointerEvents`       | *`'none'\|'auto'`*         | `'none'`            | container 的 css属性：`pointer-events` 的值 |
-         *  | `autoRender`          | *`boolean`*                | `true`              | 是否自动渲染，通常为true |
-         *  | `mode`                | *`'front'\|'behind'`*      | `front`             | 两种模式:|
-         *  |                                                                          | | | `front`  模式：DOM 处于 five Canvas 上方，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐 |
-         *  |                                                                          | | | `behind` 模式：DOM 处于 five Canvas 下方，可以模拟真实的遮挡效果，但是 DOM 必须是非透明的 |
-         *  | `scene`               | *`THREE.Scene`*            | `undefined`         | 如果 mode 为 `behind`，需要传入 |
-         *
-         * @return
-         * ```typescript
-         *    {
-         *      id: string,                             // id
-         *      container: HTMLDIVElement               // dom容器
-         *      dispose: () => void                     // 销毁
-         *      css3DObject: CSS3DObject                // THREE.CSS3DObject 实例
-         *      render?: () => void                     // 渲染函数，当 config.autoRender = true || undefined 时为 undefined
-         *      setVisible: (visible: boolean) => void  // 设置显隐, 同 setVisibleById(id, visible)
-         *      show: () => void                        // 同 setVisible(true)
-         *      hide: () => void                        // 同 setVisible(false)
-         *      setEnabled: (enabled: boolean) => void   // 添加/移除 container, 同 setEnabledById(id, enabled)
-         *      enable: () => void                      // 同 setEnabled(true)
-         *      disable: () => void                     // 同 setEnabled(false)
-         *    } | void
-         * ```
-         */
-        Object.defineProperty(this, "create3DElement", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (camera, points, config) => {
-                if (this.state.disposed)
-                    return this.disposedErrorLog();
-                // ==== init ====
-                const mergeConfig = (() => {
-                    const defaultConfig = {
-                        ratio: 0.00216,
-                        devicePixelRatio: 1,
-                        mode: 'front',
-                        autoRender: true,
-                        container: document.createElement('div'),
-                        pointerEvents: 'none',
-                    };
-                    return Object.assign(defaultConfig, config);
-                })();
-                const vector3Points = points.map(anyPositionToVector3);
-                if ((vector3Points === null || vector3Points === void 0 ? void 0 : vector3Points.length) < 4)
-                    return console.error(`${PLUGIN}: requires 4 point but params may have fewer`);
-                const { ratio, devicePixelRatio: dpr, mode, autoRender, container, pointerEvents } = mergeConfig;
-                const disposers = [];
-                // ==== init END ====
-                // 获取css3DObject, 如果mode为behind的话，也一起获取mesh
-                const { css3DObject, opacityMesh } = this.createObject(vector3Points, {
-                    ratio,
-                    dpr,
-                    container,
-                    mode,
-                    pointerEvents,
-                });
-                container.id = `container--${css3DObject.uuid}`;
-                const frontModeAndFrontModeUnInited = mode === 'front' && !globalStore.frontModeStore;
-                const behindModeAndBehindModeUnInited = mode === 'behind' && !globalStore.behindModeStore;
-                if (behindModeAndBehindModeUnInited) {
-                    globalStore.behindModeStore = {
-                        scene: mergeConfig.scene,
-                        css3DScene: new THREE__namespace.Scene(),
-                        css3DRenderer: new CSS3DRenderer.CSS3DRenderer(),
-                    };
-                }
-                if (frontModeAndFrontModeUnInited) {
-                    globalStore.frontModeStore = { css3DScene: new THREE__namespace.Scene(), css3DRenderer: new CSS3DRenderer.CSS3DRenderer() };
-                }
-                const modeStore = mode === 'front' ? globalStore.frontModeStore : globalStore.behindModeStore;
-                const { css3DScene, css3DRenderer } = modeStore;
-                const render = (() => {
-                    const renderCSS3DObject = () => {
-                        if (mode === 'front') {
-                            this.store.frontModeCSS3DObjects[css3DObject.uuid] = {
-                                visible: true,
-                                enabled: true,
-                                css3DObject,
-                                mode: 'front',
-                            };
-                        }
-                        else {
-                            this.store.behindModeCSS3DObjects[css3DObject.uuid] = {
-                                visible: true,
-                                enabled: true,
-                                css3DObject,
-                                opacityMesh: opacityMesh,
-                                mode: 'behind',
-                                scene: mergeConfig.scene,
-                            };
-                        }
-                        css3DScene.add(css3DObject);
-                        if (mode === 'behind' && opacityMesh) {
-                            mergeConfig.scene.add(opacityMesh);
-                            disposers.push(() => opacityMesh && mergeConfig.scene.remove(opacityMesh));
-                        }
-                    };
-                    if (frontModeAndFrontModeUnInited || behindModeAndBehindModeUnInited) {
-                        css3DRenderer.domElement.style.position = 'absolute';
-                        css3DRenderer.domElement.style.top = '0';
-                        css3DRenderer.domElement.style.userSelect = 'none';
-                        css3DRenderer.domElement.style.pointerEvents = 'none';
-                        css3DRenderer.domElement.classList.add(pluginFlag(mode));
-                        const renderEveryFrame = () => {
-                            const requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
-                            modeStore.requestAnimationFrameId = requestAnimationFrameId;
-                            css3DRenderer.render(css3DScene, camera);
-                        };
-                        return () => {
-                            renderCSS3DObject();
-                            renderEveryFrame();
-                        };
-                    }
-                    return () => renderCSS3DObject();
-                })();
-                const wrapper = mode === 'front' ? globalStore.frontModeContainer : globalStore.behindModeContainer;
-                if (wrapper) {
-                    this.appendToElement(wrapper, mode);
-                    const store = mode === 'front' ? globalStore.frontModeStore : globalStore.behindModeStore;
-                    if (store)
-                        store.appendedToPage = true;
-                }
-                const setVisible = (visible) => this.setVisibleById(css3DObject.uuid, visible);
-                const setEnabled = (enabled) => this.setEnabledById(css3DObject.uuid, enabled);
-                const show = () => setVisible(true);
-                const hide = () => setVisible(false);
-                const enable = () => setEnabled(true);
-                const disable = () => setEnabled(false);
-                const dispose = () => {
-                    delete this.store.frontModeCSS3DObjects[css3DObject.uuid];
-                    delete this.store.behindModeCSS3DObjects[css3DObject.uuid];
-                    disposers.forEach((d) => d === null || d === void 0 ? void 0 : d());
-                    css3DScene.remove(css3DObject);
-                    // 如果全没了，就清除父容器
-                    if (css3DScene.children.length === 0) {
-                        if (typeof modeStore.requestAnimationFrameId === 'number') {
-                            cancelAnimationFrame(modeStore.requestAnimationFrameId);
-                        }
-                        css3DRenderer.domElement.remove();
-                        if (mode === 'front')
-                            globalStore.frontModeStore = undefined;
-                        if (mode === 'behind')
-                            globalStore.behindModeStore = undefined;
-                    }
-                    return true;
-                };
-                this.store.disposers.push(dispose);
-                if (autoRender)
-                    render();
-                return {
-                    id: css3DObject.uuid,
-                    container,
-                    dispose,
-                    css3DObject,
-                    render: autoRender ? undefined : render,
-                    show,
-                    hide,
-                    setVisible,
-                    disable,
-                    enable,
-                    setEnabled,
-                    appendToElement: (container) => this.appendToElement(container, mode),
-                };
-            }
-        });
-        Object.defineProperty(this, "setVisibleById", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (id, visible) => {
-                var _a;
-                const data = (_a = this.store.frontModeCSS3DObjects[id]) !== null && _a !== void 0 ? _a : this.store.behindModeCSS3DObjects[id];
-                if (!data)
-                    return;
-                data.css3DObject.visible = visible;
-                data.visible = visible;
-                if (data.mode === 'behind')
-                    data.opacityMesh.visible = visible;
-            }
-        });
-        Object.defineProperty(this, "setEnabledById", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (id, enabled) => {
-                var _a, _b, _c;
-                const data = (_a = this.store.frontModeCSS3DObjects[id]) !== null && _a !== void 0 ? _a : this.store.behindModeCSS3DObjects[id];
-                if (!data)
-                    return;
-                const css3DScene = data.mode === 'front' ? (_b = globalStore.frontModeStore) === null || _b === void 0 ? void 0 : _b.css3DScene : (_c = globalStore.behindModeStore) === null || _c === void 0 ? void 0 : _c.css3DScene;
-                if (!css3DScene)
-                    return;
-                if (enabled) {
-                    css3DScene.add(data.css3DObject);
-                    if (data.mode === 'behind')
-                        data.scene.add(data.opacityMesh);
-                }
-                else {
-                    css3DScene.remove(data.css3DObject);
-                    if (data.mode === 'behind')
-                        data.scene.remove(data.opacityMesh);
-                }
-                data.enabled = enabled;
-            }
-        });
-        Object.defineProperty(this, "createObject", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (points, config) => {
-                const { ratio, dpr, container, mode, pointerEvents } = config;
-                const css3DObject = new CSS3DObjectPlus(container, points, ratio, dpr);
-                container.style.pointerEvents = pointerEvents;
-                container.classList.add(`${PLUGIN_NAME$1}__container`);
-                const { domWidthPx, domHeightPx } = css3DObject;
-                // 生成透明Mesh
-                const opacityMesh = (() => {
-                    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);
-                        const mesh = new THREE__namespace.Mesh(geometry, material);
-                        mesh.name = pluginFlag('mesh');
-                        mesh.position.copy(css3DObject.position);
-                        mesh.rotation.copy(css3DObject.rotation);
-                        mesh.scale.copy(css3DObject.scale);
-                        return mesh;
-                    }
-                })();
-                return { css3DObject, opacityMesh };
-            }
-        });
-        Object.defineProperty(this, "createResizeObserver", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (element, resizeHandler, fireImmediately = true) => {
-                if (!element || !ResizeObserver)
-                    return { observe: () => { }, unobserve: () => { } };
-                const resizeObserverHandler = () => {
-                    /**
-                     * 这里evenNumber策略是遇到奇数会加1，在某些浏览器中会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
-                     * 所以为了规避上面这种情况，evenNumber设置了一个参数，遇到奇数可选择减一
-                     */
-                    const width = evenNumber(element.clientWidth, { smaller: true });
-                    const height = evenNumber(element.clientHeight, { smaller: true });
-                    resizeHandler(width, height);
-                };
-                const observer = new ResizeObserver(resizeObserverHandler);
-                if (fireImmediately)
-                    resizeObserverHandler();
-                return {
-                    observe: () => observer.observe(element),
-                    unobserve: () => observer.unobserve(element),
-                };
-            }
-        });
-        Object.defineProperty(this, "disposedErrorLog", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => {
-                console.error(`${PLUGIN} is disposed`);
-            }
-        });
-    }
-    getCurrentState() {
-        return this.state;
-    }
-    setState(state, options = { userAction: true }) {
-        if (this.state.disposed)
-            return this.disposedErrorLog();
-        const prevState = Object.assign({}, this.state);
-        this.state = Object.assign(this.state, state);
-        if (prevState.visible !== this.state.visible) {
-            state.visible ? this.handleShow() : this.handleHide();
-        }
-        if (prevState.enabled !== this.state.enabled) {
-            state.enabled ? this.handleEnable() : this.handleDisable();
-        }
-        this.hooks.emit('stateChange', { state: this.state, prevState, userAction: options.userAction });
-    }
-    dispose() {
-        this.store.disposers.forEach((d) => d === null || d === void 0 ? void 0 : d());
-        this.store.disposers = [];
-        this.hooks.emit('dispose');
-        this.state.disposed = true;
-    }
-    async show({ userAction } = { userAction: true }) {
-        if (this.state.disposed)
-            return this.disposedErrorLog();
-        this.setState({ visible: true }, { userAction });
-        this.hooks.emit('show', { userAction });
-    }
-    async hide({ userAction } = { userAction: true }) {
-        if (this.state.disposed)
-            return this.disposedErrorLog();
-        this.setState({ visible: false }, { userAction });
-        this.hooks.emit('hide', { userAction });
-    }
-    enable({ userAction } = { userAction: true }) {
-        if (this.state.disposed)
-            return this.disposedErrorLog();
-        this.setState({ enabled: true }, { userAction });
-        this.hooks.emit('enable', { userAction });
-    }
-    disable({ userAction } = { userAction: true }) {
-        if (this.state.disposed)
-            return this.disposedErrorLog();
-        this.setState({ enabled: false }, { userAction });
-        this.hooks.emit('disable', { userAction });
-    }
-    appendToElement(container, mode) {
-        if (!container)
-            throw new Error(`${PLUGIN} Cannot append to container: container is ${container}`);
-        const store = mode === 'front' ? globalStore.frontModeStore : globalStore.behindModeStore;
-        if (!store) {
-            if (mode === 'front')
-                globalStore.frontModeContainer = container;
-            if (mode === 'behind')
-                globalStore.behindModeContainer = container;
-            return;
-        }
-        if (store.appendedToPage)
-            return;
-        container.appendChild(store.css3DRenderer.domElement);
-        if (!globalStore.resizeObserver) {
-            const { observe, unobserve } = this.createResizeObserver(container, store.css3DRenderer.setSize, true);
-            globalStore.resizeObserver = { observe, unobserve };
-            observe();
-            this.store.disposers.push(unobserve);
-        }
-        store.appendedToPage = true;
-    }
-    async handleShow() {
-        Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
-            value.css3DObject.visible = value.visible;
-        });
-        Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
-            value.css3DObject.visible = value.visible;
-            value.opacityMesh.visible = value.visible;
-        });
-    }
-    async handleHide() {
-        Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
-            value.css3DObject.visible = false;
-        });
-        Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
-            value.css3DObject.visible = false;
-            value.opacityMesh.visible = false;
-        });
-    }
-    handleEnable() {
-        Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
-            var _a;
-            if (!value.enabled)
-                return;
-            (_a = globalStore.frontModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.add(value.css3DObject);
-        });
-        Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
-            var _a, _b;
-            if (!value.enabled)
-                return;
-            (_a = globalStore.behindModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.add(value.css3DObject);
-            (_b = globalStore.behindModeStore) === null || _b === void 0 ? void 0 : _b.scene.add(value.opacityMesh);
-        });
-    }
-    handleDisable() {
-        Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
-            var _a;
-            (_a = globalStore.frontModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.remove(value.css3DObject);
-        });
-        Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
-            var _a, _b;
-            (_a = globalStore.behindModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.remove(value.css3DObject);
-            (_b = globalStore.behindModeStore) === null || _b === void 0 ? void 0 : _b.scene.remove(value.opacityMesh);
-        });
-    }
-}
-
-const PLUGIN_NAME = `CSS3DRenderPlugin-${random()}@${VERSION}`;
-class Controller extends CSS3DRender {
-    constructor(five) {
-        super();
-        Object.defineProperty(this, "five", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        /**
-         * @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
-         * @param { Vector3Position[] } points 矩形四个点坐标
-         * @param config 均为可选值
-         * @config_document `config` 均为可选值
-         *  | key                   | type                       | defaultValue        | comment |
-         *  | -                     | -                          | -                   | -       |
-         *  | `ratio`               | *`number`*                 | `0.00216`           | 1px对应多少米，默认为 0.00216，即1px对应2.16mm |
-         *  | ~~`dpr`~~             | ~~*`number`*~~             | ~~`undefined`~~     | ~~**已改名**，请使用~~ `devicePixelRatio` |
-         *  | `devicePixelRatio`    | *`number`*                 | `1`                 | 设备的物理像素分辨率与CSS像素分辨率的比值 |
-         *  | `container`           | *`HTMLElement`*            | `undefined`         | 自定义 return 中的 `container`
-         *  | `pointerEvents`       | *`'none'\|'auto'`*         | `'none'`            | container 的 css属性：`pointer-events` 的值 |
-         *  | `autoRender`          | *`boolean`*                | `true`              | 是否自动渲染，通常为true |
-         *  | `mode`                | *`'front'\|'behind'`*      | `front`             | 两种模式:|
-         *  |                                                                          | | | `front`  模式：DOM 处于 five Canvas 上方，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐 |
-         *  |                                                                          | | | `behind` 模式：DOM 处于 five Canvas 下方，可以模拟真实的遮挡效果，但是 DOM 必须是非透明的 |
-         *  | `behindFiveContainer` | *`HTMLElement`*            | `undefined`         | 如果 mode 为 `behind`，需要传入容器，并确保此容器位five下方，且中间无其他不透明的dom元素遮挡 |
-         *
-         * @return
-         * ```typescript
-         *    {
-         *      id: string,                             // id
-         *      container: HTMLDIVElement               // dom容器
-         *      dispose: () => void                     // 销毁
-         *      css3DObject: CSS3DObject                // THREE.CSS3DObject 实例
-         *      render?: () => void                     // 渲染函数，当 config.autoRender = true || undefined 时为 undefined
-         *      setVisible: (visible: boolean) => void  // 设置显隐, 同 setVisibleById(id, visible)
-         *      show: () => void                        // 同 setVisible(true)
-         *      hide: () => void                        // 同 setVisible(false)
-         *      setEnabled: (enabled: boolean) => void  // 添加/移除 container, 同 setEnabledById(id, enabled)
-         *      enable: () => void                      // 同 setEnabled(true)
-         *      disable: () => void                     // 同 setEnabled(false)
-         *    } | void
-         * ```
-         */
-        Object.defineProperty(this, "create3DDomContainer", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (points, config) => {
-                if (this.state.disposed)
-                    return;
-                // ==== init ====
-                const mergeConfig = (() => {
-                    var _a;
-                    if ((config === null || config === void 0 ? void 0 : config.dpr) !== undefined)
-                        console.warn(`${PLUGIN_NAME}: please use "config.devicePixelRatio" replace "config.dpr"`);
-                    const defaultconfig = {
-                        ratio: 0.00216,
-                        devicePixelRatio: (_a = config === null || config === void 0 ? void 0 : config.dpr) !== null && _a !== void 0 ? _a : 1,
-                        mode: 'front',
-                        autoRender: true,
-                    };
-                    return Object.assign(defaultconfig, config, (config === null || config === void 0 ? void 0 : config.mode) === 'behind' ? { scene: this.five.scene } : undefined);
-                })();
-                const fiveElement = this.five.getElement();
-                if (!fiveElement)
-                    return console.error(`${PLUGIN_NAME}: five.getElement() is ${fiveElement}`);
-                const { autoRender, mode } = mergeConfig;
-                // 自动添加dom
-                const wrapper = mode === 'front' ? fiveElement.parentElement : mergeConfig.behindFiveContainer;
-                this.appendToElement(wrapper || document.body, mode);
-                const create3DElementResault = this.create3DElement(this.five.camera, points, Object.assign(Object.assign({}, mergeConfig), { autoRender: false }));
-                if (!create3DElementResault)
-                    return;
-                const oldRender = create3DElementResault.render;
-                const newRender = () => {
-                    var _a;
-                    if (mode === 'front') {
-                        oldRender();
-                    }
-                    if (mode === 'behind') {
-                        if ((_a = this.five.model) === null || _a === void 0 ? void 0 : _a.loaded)
-                            oldRender();
-                        else
-                            this.five.once('modelLoaded', () => oldRender());
-                    }
-                };
-                if (autoRender)
-                    newRender();
-                return Object.assign(Object.assign({}, create3DElementResault), { render: autoRender ? undefined : newRender });
-            }
-        });
-        this.five = five;
-    }
-    /** @deprecated disposeAll() renamed as dispose() */
-    disposeAll() {
-        return this.dispose();
-    }
-    setState(...params) {
-        const result = super.setState(...params);
-        this.five.needsRender = true;
-        return result;
-    }
-}
-
-const CSS3DRenderPlugin = (five) => new Controller(five);
-
-const currentTarget = store.writable(null);
-
-/* src/PanoSpatialTagPlugin/Components/origins.svelte generated by Svelte v3.50.1 */
-
-function add_css$1(target) {
-	internal.append_styles(target, "svelte-1kuu68s", ".PanoSpatialTagPlugin__tag-origin.svelte-1kuu68s{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;-webkit-animation:svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin 1.2s forwards;animation:svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin 1.2s forwards;pointer-events:auto}.PanoSpatialTagPlugin__tag-origin.svelte-1kuu68s:after{content:'';position:absolute;top:50%;height:50%;width:2rem;height:2rem;transform:translate(-50%, -50%)}.PanoSpatialTagPlugin__tag-origin-destroy.svelte-1kuu68s{transform:translate(-50%, -50%) scale(0.6);-webkit-animation:svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin-destroy 1.2s forwards .7s;animation:svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin-destroy 1.2s forwards .7s}@-webkit-keyframes svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin{0%{transform:translate(-50%, -50%) scale(1);opacity:0}100%{transform:translate(-50%, -50%) scale(0.6);opacity:1 }}@keyframes svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin{0%{transform:translate(-50%, -50%) scale(1);opacity:0}100%{transform:translate(-50%, -50%) scale(0.6);opacity:1 }}@-webkit-keyframes svelte-1kuu68s-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}}@keyframes svelte-1kuu68s-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-1kuu68s");
-			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.50.1 */
-
-function add_css(target) {
-	internal.append_styles(target, "svelte-eb8bdm", ".PanoSpatialTagPlugin__tag-x.svelte-eb8bdm.svelte-eb8bdm{position:absolute;top:0;left:0;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-eb8bdm.svelte-eb8bdm{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-eb8bdm.svelte-eb8bdm{position:absolute;left:-1rem;width:2rem;height:100%;overflow:hidden}.PanoSpatialTagPlugin__tag-flagpole.svelte-eb8bdm.svelte-eb8bdm{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-eb8bdm.svelte-eb8bdm{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-eb8bdm.svelte-eb8bdm{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-eb8bdm .PanoSpatialTagPlugin__tag-line1.svelte-eb8bdm{-webkit-animation:svelte-eb8bdm-PanoSpatialTagPlugin__tag-line1 linear .5s forwards .45s;animation:svelte-eb8bdm-PanoSpatialTagPlugin__tag-line1 linear .5s forwards .45s}.PanoSpatialTagPlugin__tag-show.svelte-eb8bdm .PanoSpatialTagPlugin__tag-line2.svelte-eb8bdm{-webkit-animation:svelte-eb8bdm-PanoSpatialTagPlugin__tag-line2 linear .5s forwards .65s;animation:svelte-eb8bdm-PanoSpatialTagPlugin__tag-line2 linear .5s forwards .65s}.PanoSpatialTagPlugin__tag-x.PanoSpatialTagPlugin__tag-upside-down.svelte-eb8bdm.svelte-eb8bdm{transform:translate(0, 0)}.PanoSpatialTagPlugin__tag-upside-down.svelte-eb8bdm .PanoSpatialTagPlugin__tag-line.svelte-eb8bdm{transform:scaleY(-1)}.PanoSpatialTagPlugin__tag-animate.svelte-eb8bdm.svelte-eb8bdm{position:relative;height:100%;overflow:hidden;transform-origin:left top;transition:transform .5s linear}.PanoSpatialTagPlugin__tag-upside-down.svelte-eb8bdm .PanoSpatialTagPlugin__tag-animate.svelte-eb8bdm{transform-origin:left bottom}.PanoSpatialTagPlugin__tag-content.svelte-eb8bdm.svelte-eb8bdm{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-eb8bdm .PanoSpatialTagPlugin__tag-content.svelte-eb8bdm{bottom:0}.PanoSpatialTagPlugin__tag-show.svelte-eb8bdm .PanoSpatialTagPlugin__tag-flagpole.svelte-eb8bdm{opacity:1;transform:translate(-50%, 0) scaleY(1)}.PanoSpatialTagPlugin__tag-upside-down.svelte-eb8bdm .PanoSpatialTagPlugin__tag-shadow.svelte-eb8bdm{top:unset;bottom:-15rem}.PanoSpatialTagPlugin__tag-show.svelte-eb8bdm .PanoSpatialTagPlugin__tag-shadow.svelte-eb8bdm{opacity:.32}.PanoSpatialTagPlugin__tag-show.svelte-eb8bdm .PanoSpatialTagPlugin__tag-content.svelte-eb8bdm{transform:translate(0, 0)}.PanoSpatialTagPlugin__tag-hide.svelte-eb8bdm .PanoSpatialTagPlugin__tag-flagpole.svelte-eb8bdm{opacity:0;transform:translate(-50%, 60%) scaleY(0);transition:transform .5s .55s, opacity .4s .55s}.PanoSpatialTagPlugin__tag-hide.svelte-eb8bdm .PanoSpatialTagPlugin__tag-shadow.svelte-eb8bdm{opacity:0;transition:opacity .8s}.PanoSpatialTagPlugin__tag-hide.svelte-eb8bdm .PanoSpatialTagPlugin__tag-content.svelte-eb8bdm{transform:translate(-100%, 0);transition:transform .6s cubic-bezier(.53,.06,.88,.59)}.PanoSpatialTagPlugin__tag-hide.svelte-eb8bdm .PanoSpatialTagPlugin__tag-content .svelte-eb8bdm{pointer-events:none}.PanoSpatialTagPlugin__tag-hide.svelte-eb8bdm .PanoSpatialTagPlugin__tag-line1.svelte-eb8bdm{opacity:0.5;transform:translate(-50%, 10%) scaleY(0);-webkit-animation:svelte-eb8bdm-PanoSpatialTagPlugin__tag-line1-hide linear .28s forwards .3s;animation:svelte-eb8bdm-PanoSpatialTagPlugin__tag-line1-hide linear .28s forwards .3s}.PanoSpatialTagPlugin__tag-hide.svelte-eb8bdm .PanoSpatialTagPlugin__tag-line2.svelte-eb8bdm{opacity:0.5;transform:translate(-50%, 0) scaleY(0);-webkit-animation:svelte-eb8bdm-PanoSpatialTagPlugin__tag-line2-hide linear .28s forwards .45s;animation:svelte-eb8bdm-PanoSpatialTagPlugin__tag-line2-hide linear .28s forwards .45s}@-webkit-keyframes svelte-eb8bdm-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-eb8bdm-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)}}@-webkit-keyframes svelte-eb8bdm-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-eb8bdm-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)}}@-webkit-keyframes svelte-eb8bdm-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-eb8bdm-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)}}@-webkit-keyframes svelte-eb8bdm-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)}}@keyframes svelte-eb8bdm-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-eb8bdm");
-			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) scale(" + 1 / /*contentZoom*/ ctx[3] + ")");
-			internal.attr(i0, "class", "PanoSpatialTagPlugin__tag-flagpole svelte-eb8bdm");
-			internal.set_style(i0, "width", /*lineWidthZoom*/ ctx[4] + "rem");
-			internal.attr(i1, "class", "PanoSpatialTagPlugin__tag-line1 svelte-eb8bdm");
-			internal.attr(i2, "class", "PanoSpatialTagPlugin__tag-line2 svelte-eb8bdm");
-			internal.attr(div1, "class", "PanoSpatialTagPlugin__tag-line svelte-eb8bdm");
-			internal.attr(div2, "class", "PanoSpatialTagPlugin__tag-content svelte-eb8bdm");
-			internal.attr(div3, "class", "PanoSpatialTagPlugin__tag-animate svelte-eb8bdm");
-			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-eb8bdm");
-			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) scale(" + 1 / /*contentZoom*/ ctx[3] + ")");
-			}
-
-			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 {
-    constructor(text) {
-        Object.defineProperty(this, "templateText", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "mode", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
-        Object.defineProperty(this, "truncate", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "currentLine", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: 1
-        });
-        Object.defineProperty(this, "source", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: ''
-        });
-        Object.defineProperty(this, "regex", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new RegExp(REGEX_STRING)
-        });
-        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_TOLERANT_DISTANCE = 0.01;
-const BLUR_IMAGE_URL = 'https://vrlab-image4.ljcdn.com/release/web/PanoSpatialTagPlugin__blur.png';
-/**
- * 空间游走标签插件
- */
-const PanoSpatialTagPlugin = (five$1, params) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    let wrapper = params === null || params === void 0 ? void 0 : params.container;
-    let centerY = 1.4;
-    const wait = (_a = params === null || params === void 0 ? void 0 : params.wait) !== null && _a !== void 0 ? _a : 200;
-    const maxNumberOnScreen = (_b = params === null || params === void 0 ? void 0 : params.maxNumberOnScreen) !== null && _b !== void 0 ? _b : 3;
-    const minRad = (_c = params === null || params === void 0 ? void 0 : params.minRad) !== null && _c !== void 0 ? _c : Math.PI / 4;
-    const nearTolerance = (_d = params === null || params === void 0 ? void 0 : params.nearTolerance) !== null && _d !== void 0 ? _d : 100;
-    const upsideHeight = (_e = params === null || params === void 0 ? void 0 : params.upsideHeight) !== null && _e !== void 0 ? _e : 1.6;
-    const minDistance = (_f = params === null || params === void 0 ? void 0 : params.minDistance) !== null && _f !== void 0 ? _f : 1.2;
-    const maxDistance = (_g = params === null || params === void 0 ? void 0 : params.maxDistance) !== null && _g !== void 0 ? _g : 3.5;
-    // 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(centerY).distanceTo(tag.position);
-            if (distance < minDistance || distance > maxDistance)
-                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) / maxDistance,
-                    lineWidthZoom: 0.38 * (0.01 + camera.position.distanceTo(tag.position) / maxDistance),
-                    destroying: tag.destroying,
-                });
-            }
-            else {
-                tag.app.$set({
-                    lineWidthZoom: 0.38 * (0.01 + camera.position.distanceTo(tag.position) / maxDistance),
-                    lineHeightZoom: 0.4 + (camera.position.distanceTo(tag.position) - minDistance) / maxDistance * 0.6,
-                    contentZoom: 0.1 + camera.position.distanceTo(tag.position) / maxDistance,
-                });
-            }
-        });
-        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(centerY).distanceTo(point.position);
-            if (distance < minDistance || distance > maxDistance)
-                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(centerY), point.position.clone().sub(camera.position.clone().setY(centerY)).normalize(), 0, point.distance + RAY_TOLERANT_DISTANCE);
-            const [intersect] = state.intersectObjects ?
-                raycaster.intersectObjects(state.intersectObjects, true) :
-                (five$1.model.bvhs.loaded ?
-                    five$1.model.intersectRaycaster(raycaster) :
-                    raycaster.intersectObjects(five$1.model.children, true));
-            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) / maxDistance),
-                        lineHeightZoom: 0.4 + (camera.position.distanceTo(position) - minDistance) / maxDistance * 0.6,
-                        contentZoom: 0.1 + camera.position.distanceTo(position) / maxDistance,
-                        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 => {
-            var _a, _b;
-            return {
-                id: point.id,
-                position: new THREE__namespace.Vector3().fromArray(point.position),
-                normal: new THREE__namespace.Vector3().fromArray(point.normal),
-                replacement: (_a = point.replacement) !== null && _a !== void 0 ? _a : {},
-                weight: (_b = point.weight) !== null && _b !== void 0 ? _b : -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;
-    };
-    /** 设置射线碰撞检测objects
-     *
-     */
-    const setIntersectObjects = (objects) => {
-        state.intersectObjects = objects;
-        updateTags();
-    };
-    /** 标签启用
-     * 启用插件并重新计算展示标签
-     */
-    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 onResize = () => {
-        five$1.once('renderFrame', updateOrigins);
-    };
-    const onModelLoaded = () => {
-        if (!wrapper)
-            wrapper = five$1.getElement().parentElement;
-        if (wrapper)
-            wrapper.appendChild(container);
-        state.forbidden = false;
-        centerY = five$1.model.bounding.getCenter(new THREE__namespace.Vector3()).y;
-        updateTags();
-        five$1.on('panoWillArrive', onPanoWillArrive);
-        five$1.on('panoArrived', onPanoArrived);
-        five$1.on('modeChange', onModeChange);
-        five$1.on('cameraUpdate', onCameraUpdate);
-    };
-    const dispose = () => {
-        blurImage = null;
-        css3DRender.disposeAll();
-        origins.$destroy();
-        state.tags.forEach(tag => {
-            tag.app.$destroy();
-            tag = null;
-        });
-        state.origins = [];
-        state.tags = [];
-        five$1.off('modelLoaded', onModelLoaded);
-        five$1.off('renderFrame', updateOrigins);
-        five$1.off('panoWillArrive', onPanoWillArrive);
-        five$1.off('panoArrived', onPanoArrived);
-        five$1.off('modeChange', onModeChange);
-        five$1.off('cameraUpdate', onCameraUpdate);
-        five$1.off('dispose', dispose);
-        window.removeEventListener('resize', onResize, false);
-    };
-    window.addEventListener('resize', onResize, false);
-    if ((_h = five$1 === null || five$1 === void 0 ? void 0 : five$1.model) === null || _h === void 0 ? void 0 : _h.loaded)
-        onModelLoaded();
-    else
-        five$1.once('modelLoaded', onModelLoaded);
-    five$1.on('dispose', dispose);
-    return {
-        load,
-        setIntersectObjects,
-        unfoldAll,
-        foldAll,
-        unfold,
-        fold,
-        enable,
-        disable,
-        hooks,
-        dispose,
-    };
-};
-
-exports.PanoSpatialTagPlugin = PanoSpatialTagPlugin;
-exports["default"] = PanoSpatialTagPlugin;