@realsee/dnalogel 2.0.1 → 2.2.0-alpha.1

package/libs/PanoTagPlugin/controller/index.js

@@ -0,0 +1,618 @@
+import { Quaternion } from 'three';
+import 'three';
+import objectAssignDeep from 'object-assign-deep';
+import { writable } from 'svelte/store';
+import PointTagSvelte from '../Components/PointTag';
+import TagContentSvelte from '../Components/Tag/index';
+import { addDebugPoints, arrayPositionToVector3, actionAfterFiveModelLoad, debounce, normalPositionToPositions, planeNormal, random, resizeObserver, throttle, } from '../utils';
+import { TagComputer } from './TagComputer';
+import { CSS3DRenderPlugin } from '../../CSS3DRenderPlugin';
+import { DimensionType, PointType } from '..';
+const VERSION = '0.1.1';
+const PLUGIN_NAME = `DnalogelPlugin-PanoTagPlugin-${random()}@${VERSION}`;
+const TAG_INITIAL_UNFOLDED = true;
+export const DefaultConfig = {
+    globalConfig: {
+        initialState: {
+        // unfolded: false,
+        },
+        visibleConfig: {
+            visibleDistance: { max: 5 },
+            angleRange: { min: -45, max: 45 },
+        },
+        unfoldedConfig: {
+            autoUnfold: {
+                strategy: 'MinimumDistance',
+            },
+        },
+        tag3DConfig: {
+            ratio: 0.0035,
+            devicePixelRatio: window.devicePixelRatio,
+        },
+    },
+    contentTypeConfig: {
+        'Any-Link-Any': {
+            unfoldedConfig: {
+                disableFold: true,
+                autoUnfold: undefined,
+            },
+            initialState: {
+                unfolded: true,
+            },
+        },
+        'Any-Marketing-Any': {
+            unfoldedConfig: undefined,
+        },
+    },
+};
+export const pluginFlag = (name) => `${PLUGIN_NAME}--${name}`;
+class PanoTagPluginController extends TagComputer {
+    constructor(five, params) {
+        super(five);
+        /** 版本号 */
+        Object.defineProperty(this, "version", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: VERSION
+        });
+        /** state */
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { enabled: true, visible: true }
+        });
+        /** 插件参数 */
+        Object.defineProperty(this, "params", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** debug */
+        Object.defineProperty(this, "debug", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** css3DRenderPlugin */
+        Object.defineProperty(this, "css3DRenderPlugin", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** 点标签 */
+        Object.defineProperty(this, "PointTagSvelte", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /** 临时状态 */
+        Object.defineProperty(this, "temporaryState", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { visible: true }
+        });
+        Object.defineProperty(this, "mediaStore", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: writable({
+                currentMediaUrl: '',
+            })
+        });
+        Object.defineProperty(this, "store", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {
+                disposers: [],
+                disposed: false,
+                css3DRenderDisposer: new Map(),
+            }
+        });
+        Object.defineProperty(this, "disposedErrorLog", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                console.error(`${PLUGIN_NAME} is disposed`);
+            }
+        });
+        this.params = Object.assign({ debug: false, mergePluginDefaultConfigToLoadDataConfig: false, config: this.config }, params);
+        this.debug = this.params.debug;
+        this.config = this.params.config;
+        Object.assign(window, { __PANOTAGPLUGIN_DEBUG__: this });
+    }
+    /**
+     * @description: 加载数据
+     */
+    load(data) {
+        var _a, _b;
+        console.log(PLUGIN_NAME, 'load:', { data });
+        if (this.params.mergePluginDefaultConfigToLoadDataConfig) {
+            this.config = objectAssignDeep({}, this.config, {
+                globalConfig: (_a = data.globalConfig) !== null && _a !== void 0 ? _a : {},
+                contentTypeConfig: (_b = data.contentTypeConfig) !== null && _b !== void 0 ? _b : {},
+            });
+        }
+        else {
+            if (data.globalConfig)
+                this.config.globalConfig = data.globalConfig;
+            if (data.contentTypeConfig)
+                this.config.contentTypeConfig = data.contentTypeConfig;
+        }
+        this.clearCache();
+        this.disposeAllCSS3DContainer();
+        this.tags = [];
+        this.addTag(data.tagList);
+        if (this.debug)
+            addDebugPoints(this.five, this.tags);
+    }
+    /**
+     * @description: 添加标签
+     */
+    addTag(tag) {
+        const tags = Array.isArray(tag) ? tag : [tag];
+        const _tags = tags
+            .map((tag) => {
+            const config = this.getTagConfig(tag);
+            return Object.assign(Object.assign({}, tag), { state: Object.assign({ visible: undefined, unfolded: TAG_INITIAL_UNFOLDED }, config.initialState) });
+        })
+            .filter((tag) => tag.position);
+        this.tags.push(..._tags);
+        actionAfterFiveModelLoad(this.five, () => {
+            var _a, _b;
+            // 添加事件
+            if (this.store.eventListenerDisposer) {
+                (_b = (_a = this.store).eventListenerDisposer) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }
+            this.store.eventListenerDisposer = this.addEventListener();
+            if (!this.store.resizeObserverDisposer) {
+                const resizeObserverDisposer = this.addResizeObserver();
+                setTimeout(() => {
+                    this.store.resizeObserverDisposer = resizeObserverDisposer;
+                }, 200);
+            }
+            this.checkPanelTag();
+            this.setVisibleAndUnfoldedByPanoIndex();
+            this.updateRenderAllTag();
+        });
+    }
+    async show(params) {
+        const { userAction = true, withAnimation = false } = params !== null && params !== void 0 ? params : {};
+        if (this.store.disposed)
+            return this.disposedErrorLog();
+        this.setState({ visible: true }, { userAction, visibleWithAnimation: withAnimation });
+        this.hooks.emit('show', { userAction, withAnimation });
+    }
+    async hide(params) {
+        const { userAction = true, withAnimation = false } = params !== null && params !== void 0 ? params : {};
+        if (this.store.disposed)
+            return this.disposedErrorLog();
+        this.setState({ visible: false }, { userAction, visibleWithAnimation: withAnimation });
+        this.hooks.emit('hide', { userAction, withAnimation });
+    }
+    enable(params) {
+        const { userAction = true } = params !== null && params !== void 0 ? params : {};
+        if (this.store.disposed)
+            return this.disposedErrorLog();
+        this.setState({ enabled: true }, { userAction });
+        this.hooks.emit('enable', { userAction });
+    }
+    disable(params) {
+        const { userAction = true } = params !== null && params !== void 0 ? params : {};
+        if (this.store.disposed)
+            return this.disposedErrorLog();
+        this.setState({ enabled: false }, { userAction });
+        this.hooks.emit('disable', { userAction });
+    }
+    /**
+     * @description: 销毁
+     */
+    dispose() {
+        var _a, _b, _c, _d, _e, _f;
+        this.disposeAllCSS3DContainer();
+        (_a = this.PointTagSvelte) === null || _a === void 0 ? void 0 : _a.$destroy();
+        this.filter3DTag().forEach((tag) => { var _a; return (_a = tag.tag3DContentSvelte) === null || _a === void 0 ? void 0 : _aApp.$destroy(); });
+        this.tags = [];
+        (_b = this.store.disposers) === null || _b === void 0 ? void 0 : _b.forEach((d) => d === null || d === void 0 ? void 0 : d());
+        this.store.disposers = [];
+        this.store.disposed = true;
+        (_d = (_c = this.store).eventListenerDisposer) === null || _d === void 0 ? void 0 : _d.call(_c);
+        this.store.eventListenerDisposer = undefined;
+        (_f = (_e = this.store).resizeObserverDisposer) === null || _f === void 0 ? void 0 : _f.call(_e);
+        this.store.resizeObserverDisposer = undefined;
+        this.clearCache();
+        this.hooks.emit('dispose');
+    }
+    setState(state, params) {
+        if (this.store.disposed)
+            return this.disposedErrorLog();
+        const { userAction = true, visibleWithAnimation = false } = params;
+        const prevState = Object.assign({}, this.state);
+        this.state = Object.assign(this.state, state);
+        this.store.visibleWithAnimation = visibleWithAnimation;
+        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 });
+    }
+    /**
+     * @description: 修改3D标签normal
+     */
+    changeTagNormalById(id, normal) {
+        const tag = this.getTagById(id);
+        if (!tag)
+            return;
+        if (!tag.tag3DContentSvelte)
+            return;
+        tag.tag3DContentSvelte.currentNormal = arrayPositionToVector3(normal);
+        this.updateRenderPlaneTag();
+    }
+    /**
+     * @description: 改变data
+     */
+    changeDataById(id, data, deepMerge = true) {
+        const tag = this.getTagById(id);
+        if (!tag)
+            return;
+        if (deepMerge) {
+            tag.data = objectAssignDeep({}, tag.data, data);
+        }
+        else {
+            Object.assign(tag.data, data);
+        }
+        // 3D 转 2D 的时候要销毁 3D container
+        this.checkPanelTag();
+        this.updateRenderAllTag();
+    }
+    /**
+     * @description: 改变tag任意属性
+     */
+    changeTagById(id, tag, deepMerge = true) {
+        const currentTag = this.getTagById(id);
+        if (!tag)
+            return;
+        if (deepMerge) {
+            objectAssignDeep(currentTag, tag);
+        }
+        else {
+            Object.assign(currentTag, tag);
+        }
+        if ((currentTag === null || currentTag === void 0 ? void 0 : currentTag.tag3DContentSvelte) && (tag === null || tag === void 0 ? void 0 : tag.normal)) {
+            currentTag.tag3DContentSvelte.currentNormal = arrayPositionToVector3(tag.normal);
+        }
+        this.updateRenderAllTag();
+        this.checkPanelTag();
+    }
+    /**
+     * @description: 销毁tag
+     */
+    destroyTagById(id) {
+        const ids = Array.isArray(id) ? id : [id];
+        ids.forEach((id) => {
+            const index = this.tags.findIndex((tag) => tag.id === id);
+            if (index === -1)
+                return;
+            this.tags.splice(index, 1);
+        });
+        this.updateRenderAllTag();
+    }
+    /** 暂停当前标签内进行的所有多媒体 */
+    pauseCurrentMedia() {
+        this.mediaStore.set({ currentMediaUrl: '' });
+    }
+    handleShow() {
+        this.state.visible = true;
+        this.updateTagContainerVisible();
+    }
+    handleHide() {
+        this.state.visible = false;
+        this.updateTagContainerVisible();
+    }
+    handleEnable() {
+        this.state.enabled = true;
+        this.updateRenderAllTag();
+    }
+    handleDisable() {
+        var _a;
+        this.state.enabled = false;
+        (_a = this.PointTagSvelte) === null || _a === void 0 ? void 0 : _a.$set({ tags: [] });
+        this.filter3DTag().forEach((tag) => {
+            var _a;
+            (_a = tag.tag3DContentSvelte) === null || _a === void 0 ? void 0 : _aApp.$destroy();
+            tag.tag3DContentSvelte = undefined;
+        });
+    }
+    /**
+     * @description: 添加 cameraUpdate, panoArrived 等事件监听
+     */
+    addEventListener() {
+        const { five, hooks } = this;
+        const handleFiveWantsMoveToPano = this.handleFiveWantsMoveToPano.bind(this);
+        const handleFiveModeChange = this.handleFiveModeChange.bind(this);
+        const handleFiveCameraUpdate = this.handleFiveCameraUpdate.bind(this);
+        const handleFiveCameraUpdateDebounce = this.handleFiveCameraUpdateDebounce();
+        const handleFivePanoArrived = this.handleFivePanoArrived.bind(this);
+        const clickhandler = this.clickhandler.bind(this);
+        // 走点/切换模型时临时隐藏
+        five.on('wantsMoveToPano', handleFiveWantsMoveToPano);
+        five.on('modeChange', handleFiveModeChange);
+        // Five旋转时更新位置
+        five.on('cameraUpdate', handleFiveCameraUpdate);
+        five.on('cameraUpdate', handleFiveCameraUpdateDebounce);
+        five.on('panoArrived', handleFivePanoArrived);
+        hooks.on('click', clickhandler);
+        return () => {
+            five.off('wantsMoveToPano', handleFiveWantsMoveToPano);
+            five.off('modeChange', handleFiveModeChange);
+            five.off('cameraUpdate', handleFiveCameraUpdate);
+            five.off('cameraUpdate', handleFiveCameraUpdateDebounce);
+            five.off('panoArrived', handleFivePanoArrived);
+            hooks.off('click', clickhandler);
+            this.store.eventListenerDisposer = undefined;
+        };
+    }
+    addResizeObserver() {
+        const observerELement = this.five.getElement();
+        // resize
+        const show = () => {
+            this.show();
+            this.updateRenderAllTag();
+        };
+        const { observe: hideObserve, unobserve: hideUnobserve } = resizeObserver(throttle(() => {
+            /**
+             * 加这个判断是因为，第一次添加监听的时候会触发此函数，本来是没问题的，hide()后立马show()，但是show()加了debounce，所以resize触发后先hide，再过500ms才show，就有问题，所以加了这么一个限制
+             * 在addTag函数中，先addResizeObserver()，过150ms再设置this.store.resizeObserverDisposer，200ms是resizeObserver添加时间到检测到resize触发resizeObserver的时间，大约100ms，这里加一点
+             */
+            if (!this.store.resizeObserverDisposer)
+                return;
+            this.hide();
+        }, 500), observerELement);
+        const { observe: showObserve, unobserve: showUnobserve } = resizeObserver(debounce(() => show(), 400), observerELement);
+        hideObserve();
+        showObserve();
+        return () => {
+            hideUnobserve();
+            showUnobserve();
+        };
+    }
+    /**
+     * @description: 切换模式处理函数
+     */
+    handleFiveModeChange(mode) {
+        if (mode === 'Panorama')
+            this.five.once('panoArrived', () => this.temporaryShow());
+        else
+            this.temporaryHide();
+    }
+    handleFiveWantsMoveToPano() {
+        this.tags.forEach((tag) => {
+            const config = this.getTagConfig(tag);
+            if (typeof config.visibleConfig === 'object' && config.visibleConfig.alwaysShowWhenMovePano) {
+                tag.temporaryState = Object.assign(Object.assign({}, tag.temporaryState), { visible: true });
+            }
+            else {
+                tag.temporaryState = Object.assign(Object.assign({}, tag.temporaryState), { visible: false });
+            }
+        });
+        this.updateRenderAllTag();
+    }
+    /**
+     * @description: 走点/切换模型后显示
+     */
+    temporaryShow() {
+        this.temporaryState.visible = true;
+    }
+    /**
+     * @description: 走点/切换模型时临时隐藏
+     */
+    temporaryHide() {
+        this.temporaryState.visible = false;
+    }
+    clickhandler(params) {
+        if (params.target === 'TagPoint') {
+            if (!params.tag.state)
+                return;
+            // 先检查一下能不能关闭
+            const config = this.getTagConfig(params.tag);
+            if (typeof config.unfoldedConfig === 'object' && config.unfoldedConfig.disableUnfold) {
+                if (!params.tag.state.unfolded) {
+                    return;
+                }
+            }
+            else {
+                // 展开/收起 点击的标签
+                params.tag.state.unfolded = !params.tag.state.unfolded;
+            }
+            // 点开的话，收起其他标签
+            if (params.tag.state.unfolded) {
+                this.tags.forEach((tag) => {
+                    if (tag.id === params.tag.id)
+                        return;
+                    if (tag.state)
+                        tag.state.unfolded = false;
+                });
+            }
+            this.updateRenderAllTag();
+        }
+    }
+    /**
+     * @description: 更新所有标签
+     */
+    updateRenderAllTag() {
+        this.updateRenderPointTag();
+        this.updateRenderPlaneTag();
+    }
+    updateTagContainerVisible() {
+        var _a;
+        (_a = this.PointTagSvelte) === null || _a === void 0 ? void 0 : _a.$set({ state: this.state, temporaryState: this.temporaryState, withAnimation: this.store.visibleWithAnimation });
+        this.filter3DTag().forEach((tag) => {
+            var _a;
+            (_a = tag.tag3DContentSvelte) === null || _a === void 0 ? void 0 : _aApp.$set({
+                state: this.state,
+                temporaryState: this.temporaryState,
+                withAnimation: this.store.visibleWithAnimation,
+            });
+        });
+    }
+    handleFiveCameraUpdateDebounce() {
+        return debounce(() => {
+            // 设置展开/收起
+            this.setUnfoldedByCamera();
+            // 渲染
+            this.updateRenderAllTag();
+        }, 100);
+    }
+    handleFiveCameraUpdate() {
+        // 渲染
+        this.updateRenderPointTag();
+    }
+    handleFivePanoArrived() {
+        this.setVisibleAndUnfoldedByPanoIndex();
+        this.tags.forEach((tag) => {
+            tag.temporaryState = Object.assign(Object.assign({}, tag.temporaryState), { visible: true });
+        });
+        // 渲染
+        this.updateRenderAllTag();
+    }
+    setUnfoldedByCamera() {
+        let hasTagUnfolded = false; // 是否有标签由于camera的转动而展开
+        this.tags.forEach((tag) => {
+            const unfolded = this.getUnfoldedByCamera(tag);
+            if (!tag.state)
+                return;
+            if (unfolded === undefined)
+                return;
+            if (unfolded === true)
+                hasTagUnfolded = true;
+            tag.state.unfolded = unfolded;
+        });
+        if (hasTagUnfolded) {
+            this.tags.forEach((tag) => {
+                const unfoldedConfig = this.getTagConfig(tag).unfoldedConfig;
+                if (typeof unfoldedConfig === 'object') {
+                    if (unfoldedConfig.autoUnfold)
+                        return; // 如果有标签由于camera的转动而展开，则将所有没有配置autoUnfold的标签收起
+                    if (unfoldedConfig.disableFold)
+                        return; // 不收起disableFold标签
+                }
+                if (tag.state)
+                    tag.state.unfolded = false;
+            });
+        }
+    }
+    /**
+     * @description: 渲染单个点的标签
+     */
+    updateRenderPointTag() {
+        var _a;
+        const tags = this.filterPointTag();
+        this.setPointTagPosition();
+        if (!this.PointTagSvelte) {
+            const tag2DContainer = (_a = this.five.getElement()) === null || _a === void 0 ? void 0 : _a.parentElement;
+            if (!tag2DContainer)
+                return console.error('updateRenderPlaneTag: tag2DContainer not found');
+            this.PointTagSvelte = new PointTagSvelte({
+                target: tag2DContainer,
+                props: { hooks: this.hooks, tags, state: this.state, temporaryState: this.temporaryState, mediaStore: this.mediaStore },
+            });
+        }
+        else {
+            this.PointTagSvelte.$set({ tags, state: this.state, temporaryState: this.temporaryState });
+        }
+    }
+    /**
+     * @description: 渲染3D贴片
+     */
+    updateRenderPlaneTag() {
+        const planeTags = [...this.filterPlaneTag(), ...this.filter3DPointTag()];
+        planeTags.forEach((tag) => {
+            var _a;
+            // 初始化 TagContentSvelte
+            if (!tag.tag3DContentSvelte) {
+                if (((_a = tag.state) === null || _a === void 0 ? void 0 : _a.visible) === false)
+                    return;
+                if (!this.css3DRenderPlugin)
+                    this.css3DRenderPlugin = CSS3DRenderPlugin(this.five);
+                if (tag.pointType === PointType.PointTag && !tag.normal)
+                    return console.error('updateRenderPlaneTag: 三维点标签缺少法向量！');
+                // 四个点
+                const positions = tag.pointType === PointType.PlaneTag
+                    ? tag.position
+                    : normalPositionToPositions(this.five.camera.position, arrayPositionToVector3(tag.position), arrayPositionToVector3(tag.normal));
+                const normal = tag.pointType === PointType.PlaneTag ? planeNormal(tag.position) : arrayPositionToVector3(tag.normal);
+                const create3DDomContainerConfig = this.getTagConfig(tag).tag3DConfig;
+                const domContainer = this.css3DRenderPlugin.create3DDomContainer(positions, create3DDomContainerConfig);
+                if (!domContainer)
+                    return;
+                this.store.css3DRenderDisposer.set(tag.id, domContainer.dispose);
+                tag.tag3DContentSvelte = {
+                    svelteApp: new TagContentSvelte({
+                        target: domContainer.container,
+                        props: {
+                            tag: tag,
+                            hooks: this.hooks,
+                            state: this.state,
+                            mediaStore: this.mediaStore,
+                            temporaryState: this.temporaryState,
+                        },
+                    }),
+                    domContainer,
+                    initialNormal: normal,
+                    currentNormal: normal,
+                };
+            }
+            else {
+                const { svelteApp, domContainer, initialNormal, currentNormal } = tag.tag3DContentSvelte;
+                svelteApp.$set({
+                    tag: tag,
+                    hooks: this.hooks,
+                    state: this.state,
+                    temporaryState: this.temporaryState,
+                });
+                if (!initialNormal.equals(currentNormal)) {
+                    const quaternion = new Quaternion().setFromUnitVectors(initialNormal, currentNormal);
+                    domContainer.css3DObject.setRotationFromQuaternion(quaternion);
+                }
+            }
+        });
+        this.checkPanelTag();
+    }
+    disposeAllCSS3DContainer() {
+        for (const [id, disposer] of this.store.css3DRenderDisposer)
+            disposer === null || disposer === void 0 ? void 0 : disposer();
+        this.store.css3DRenderDisposer = new Map();
+    }
+    /**
+     * @description: 检查并销毁不用的3D贴片
+     */
+    checkPanelTag() {
+        // 3D 转 2D 的时候要销毁 3D container
+        this.tags.forEach((tag) => {
+            var _a;
+            if (tag.dimensionType === DimensionType.Two && tag.pointType === PointType.PointTag) {
+                (_a = tag.tag3DContentSvelte) === null || _a === void 0 ? void 0 : _a.domContainer.dispose();
+                tag.tag3DContentSvelte = undefined;
+            }
+        });
+        for (const [id, disposer] of this.store.css3DRenderDisposer) {
+            const tag = this.getTagById(id);
+            if (!tag || tag.dimensionType !== DimensionType.Three) {
+                disposer === null || disposer === void 0 ? void 0 : disposer();
+                this.store.css3DRenderDisposer.delete(id);
+            }
+        }
+    }
+}
+export default PanoTagPluginController;
+export { PanoTagPluginController };

package/libs/PanoTagPlugin/index.d.ts

@@ -0,0 +1,8 @@
+import type { FivePlugin } from '@realsee/five';
+import PanoTagPluginController from './controller';
+export * from './typings';
+export * from './controller';
+export declare type PanoTagPluginExportInterface = InstanceType<typeof PanoTagPluginController>;
+export declare type PanoTagPluginParamsInterface = ConstructorParameters<typeof PanoTagPluginController>[1];
+export declare const PanoTagPlugin: FivePlugin<PanoTagPluginParamsInterface, PanoTagPluginExportInterface>;
+export default PanoTagPlugin;

package/libs/PanoTagPlugin/index.js

@@ -0,0 +1,8 @@
+import PanoTagPluginController from './controller';
+export * from './typings';
+export * from './controller';
+import objectAssignDeep from 'object-assign-deep';
+// DELETE
+Object.assign(window, { objectAssignDeep });
+export const PanoTagPlugin = (five, params) => new PanoTagPluginController(five, params);
+export default PanoTagPlugin;