@realsee/dnalogel 2.0.0-alpha.52 → 2.0.0-alpha.55

package/libs/PanoTagPlugin/controller/index.js

@@ -1,618 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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;