@realsee/dnalogel 2.0.2-alpha → 2.1.0-alpha.2

package/libs/PanoTagPlugin/controller/TagComputer.js

@@ -0,0 +1,418 @@
+import objectAssignDeep from 'object-assign-deep';
+import * as THREE from 'three';
+import { DefaultConfig } from '.';
+import { PointType, DimensionType, } from '../typings';
+import { planeNormal, anyPositionToVector3, tagPosition, checkRange } from '../utils';
+import { arrayPositionToVector3 } from '../utils';
+import { TagCacheController } from './TagCacheController';
+export class TagComputer extends TagCacheController {
+    constructor(five) {
+        super(five);
+        Object.defineProperty(this, "tags", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "config", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: DefaultConfig
+        });
+        Object.defineProperty(this, "raycaster", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new THREE.Raycaster()
+        });
+    }
+    /**
+     * @description: 改变配置
+     */
+    changeConfig(config, merge = true) {
+        if (merge) {
+            this.config = objectAssignDeep({}, this.config, config);
+        }
+        else {
+            this.config = config;
+        }
+        // 配置改变后要清空缓存，重新计算
+        this.clearCache();
+    }
+    /**
+     * @description: 改变全局配置
+     */
+    changeGlobalConfig(globalConfig, merge = true) {
+        if (merge) {
+            this.config.globalConfig = objectAssignDeep({}, this.config.globalConfig, globalConfig);
+        }
+        else {
+            this.config.globalConfig = globalConfig;
+        }
+        // 配置改变后要清空缓存，重新计算
+        this.clearCache();
+    }
+    /**
+     * @description: 改变类型配置
+     */
+    changeContentTypeConfig(key, contentTypeConfig, merge = true) {
+        if (!this.config.contentTypeConfig)
+            this.config.contentTypeConfig = {};
+        if (merge) {
+            this.config.contentTypeConfig[key] = objectAssignDeep({}, this.config.contentTypeConfig[key], contentTypeConfig);
+        }
+        else {
+            this.config.contentTypeConfig[key] = contentTypeConfig;
+        }
+        // 配置改变后要清空缓存，重新计算
+        this.clearCache();
+    }
+    /**
+     * @description: 获取是否可见
+     */
+    getVisibleByPanoIndex(tag, panoIndex) {
+        var _a;
+        const cache = this.getCaches({ panoIndex, id: tag.id });
+        const fivePanoIndex = (_a = this.five.panoIndex) !== null && _a !== void 0 ? _a : panoIndex;
+        if (cache.visible !== undefined)
+            return cache.visible;
+        else {
+            const visible = (() => {
+                var _a, _b, _c, _d, _e;
+                const config = (_a = this.getTagConfig(tag).visibleConfig) !== null && _a !== void 0 ? _a : {};
+                const distance = this.getDistance(tag);
+                if (typeof config === 'function') {
+                    return config(this.five, { tag, distance });
+                }
+                else {
+                    // console.log(tag.id, '点位检测', tag)
+                    // 点位检测
+                    if (config.visiblePanoIndex !== undefined) {
+                        if (fivePanoIndex === undefined)
+                            return false;
+                        if (!config.visiblePanoIndex.includes(fivePanoIndex))
+                            return false;
+                    }
+                    // console.log(tag.id, '距离检测', tag)
+                    // 距离检测
+                    if (config.visibleDistance !== undefined) {
+                        if (config.visibleDistance !== 'unLimited') {
+                            const visible = checkRange(distance, config.visibleDistance);
+                            if (visible === false)
+                                return false;
+                        }
+                    }
+                    // console.log(tag.id, '碰撞检测', tag)
+                    // 碰撞检测
+                    if (((_b = config.intersectRaycaster) === null || _b === void 0 ? void 0 : _b.enabled) !== false) {
+                        // console.log(tag.id, '进入碰撞检测', tag)
+                        if (fivePanoIndex === undefined)
+                            return false;
+                        const observerPosition = (_c = this.five.work.observers[fivePanoIndex]) === null || _c === void 0 ? void 0 : _c.position;
+                        if (observerPosition === undefined)
+                            throw new Error(`getVisible(): observerPosition is ${observerPosition}`);
+                        const direction = tagPosition(tag.position).sub(observerPosition).normalize(); // 向量相减得到相机到模型的射线
+                        this.raycaster.set(observerPosition, direction);
+                        const [intersection] = this.five.model.intersectRaycaster(this.raycaster);
+                        // console.log(this.five.model.intersectRaycaster(this.raycaster), this.five.model, this.raycaster, this.five.model.loaded)
+                        const distanceError = (_e = (_d = config.intersectRaycaster) === null || _d === void 0 ? void 0 : _d.distanceAccuracy) !== null && _e !== void 0 ? _e : 0.01; // 标签误差
+                        if (intersection && intersection.distance + distanceError < distance)
+                            return false;
+                    }
+                    // console.log(tag.id, '角度检测', tag)
+                    // 角度检测
+                    if (tag.dimensionType === DimensionType.Three) {
+                        const visible = checkRange(this.getAngle(tag), config.angleRange);
+                        if (visible === false)
+                            return false;
+                    }
+                    // 结束
+                    // console.log(tag.id, '结束', tag)
+                    return true;
+                }
+            })();
+            // console.log(tag.id, 'end', tag, visible)
+            cache.visible = visible;
+            return cache.visible;
+        }
+    }
+    /**
+     * @description: 获取是否展开
+     */
+    getUnfoldedByPanoIndex(tag, panoIndex) {
+        const visible = this.getVisibleByPanoIndex(tag);
+        if (!visible)
+            return;
+        const cache = this.getCaches({ panoIndex, id: tag.id });
+        if (cache.unfolded !== undefined)
+            return cache.unfolded;
+        else {
+            const config = this.getTagConfig(tag).unfoldedConfig;
+            if (!config)
+                return;
+            const unfolded = (() => {
+                const distance = this.getDistance(tag);
+                if (typeof config === 'function') {
+                    return config(this.five, { tag, distance });
+                }
+                else {
+                    if (config.disableUnfold === true)
+                        return false;
+                    if (config.disableFold === true)
+                        return true;
+                    // 距离检测
+                    if (config.unfoldDistance) {
+                        const unfolded = checkRange(distance, config.unfoldDistance);
+                        if (unfolded === false)
+                            return false;
+                    }
+                }
+            })();
+            cache.unfolded = unfolded;
+            const unfoldedByCamera = this.getUnfoldedByCamera(tag);
+            if (unfoldedByCamera !== undefined)
+                return unfoldedByCamera;
+            return cache.unfolded;
+        }
+    }
+    /**
+     * @description: 获取是否展开
+     */
+    getUnfoldedByCamera(tag) {
+        const visible = this.getVisibleByPanoIndex(tag);
+        if (!visible)
+            return;
+        const unfolded = (() => {
+            var _a;
+            const distance = this.getDistance(tag);
+            const config = this.getTagConfig(tag).unfoldedConfig;
+            if (!config)
+                return;
+            if (typeof config === 'function') {
+                return config(this.five, { tag, distance });
+            }
+            else {
+                if (config.disableUnfold === true)
+                    return false;
+                if (config.disableFold === true)
+                    return true;
+                if (config.autoUnfold === undefined)
+                    return;
+                // 屏幕位置检测
+                if (config.autoUnfold.strategy === 'ScreenPostion') {
+                    const project = this.getTagProject(tag);
+                    if (project) {
+                        const unfolded = checkRange(project.x, config.autoUnfold.autoUnfoldProjectX);
+                        if (unfolded === false)
+                            return false;
+                    }
+                }
+                // 最近距离检测
+                if (config.autoUnfold.strategy === 'MinimumDistance') {
+                    const pointTag = this.filterPointTag();
+                    const sameStrategyTags = pointTag
+                        .filter((t) => this.getVisibleByPanoIndex(t)) // 筛选可见标签
+                        .filter((t) => {
+                        const project = this.getTagProject(t);
+                        if (!project)
+                            return false;
+                        const { x, y, z } = project;
+                        return !(Math.abs(z) > 1 || Math.abs(x) > 1 || Math.abs(y) > 1);
+                    })
+                        .filter((t) => {
+                        var _a;
+                        const tagConfig = this.getTagConfig(t).unfoldedConfig;
+                        return typeof tagConfig === 'object' && ((_a = tagConfig.autoUnfold) === null || _a === void 0 ? void 0 : _a.strategy) === 'MinimumDistance';
+                    }) // 筛选 MinimumDistance 标签
+                        .map((t) => ({ id: t.id, distance: this.getDistance(t) })) // map
+                        .filter((t) => t.distance !== undefined) // 过滤
+                        .sort((a, b) => a.distance - b.distance); // 距离排序
+                    const index = sameStrategyTags.findIndex((t) => t.id === tag.id);
+                    if (index === -1)
+                        return false;
+                    const unfolded = index <= ((_a = config.autoUnfold.maxNumber) !== null && _a !== void 0 ? _a : 1) - 1;
+                    if (unfolded === false)
+                        return false;
+                }
+                return true;
+            }
+        })();
+        return unfolded;
+    }
+    /**
+     * @description: 获取距离
+     */
+    getDistance(tag, panoIndex) {
+        var _a, _b, _c;
+        const fivePanoIndex = (_a = this.five.panoIndex) !== null && _a !== void 0 ? _a : panoIndex;
+        if (fivePanoIndex === undefined)
+            throw new Error(`getDistance(): fivePanoIndex is ${fivePanoIndex}`);
+        const cache = this.getCaches({ panoIndex, id: tag.id });
+        if (cache.distance !== undefined)
+            return cache.distance;
+        else {
+            const observerPosition = (_c = (_b = this.five.work) === null || _b === void 0 ? void 0 : _b.observers[fivePanoIndex]) === null || _c === void 0 ? void 0 : _c.position;
+            if (observerPosition === undefined)
+                throw new Error(`getDistance(): observerPosition is ${observerPosition}`);
+            const position = (() => {
+                if (tag.pointType === PointType.PointTag) {
+                    return arrayPositionToVector3(tag === null || tag === void 0 ? void 0 : tag.position);
+                }
+                else {
+                    return tagPosition(tag.position);
+                }
+            })();
+            const distance = observerPosition.distanceTo(position);
+            cache.distance = distance;
+            return distance;
+        }
+    }
+    /**
+     * @description: 获取角度
+     */
+    getAngle(tag, panoIndex) {
+        var _a, _b, _c;
+        const fivePanoIndex = (_a = this.five.panoIndex) !== null && _a !== void 0 ? _a : panoIndex;
+        if (fivePanoIndex === undefined)
+            throw new Error(`getDistance(): fivePanoIndex is ${fivePanoIndex}`);
+        const cache = this.getCaches({ panoIndex, id: tag.id });
+        if (cache.angle !== undefined)
+            return cache.angle;
+        else {
+            const observerPosition = (_c = (_b = this.five.work) === null || _b === void 0 ? void 0 : _b.observers[fivePanoIndex]) === null || _c === void 0 ? void 0 : _c.position;
+            if (observerPosition === undefined)
+                throw new Error(`getAngleRange(): observerPosition is ${observerPosition}`);
+            const normal = (() => {
+                if (tag.pointType === PointType.PointTag)
+                    return anyPositionToVector3(tag.normal);
+                else
+                    return planeNormal(tag.position);
+            })();
+            if (!normal)
+                return;
+            const tagToCameraVector3 = new THREE.Vector3().copy(observerPosition).sub(tagPosition(tag.position)); // 标签点到相机的向量
+            const angle = (normal.angleTo(tagToCameraVector3) * 180) / Math.PI;
+            cache.angle = angle;
+            return cache.angle;
+        }
+    }
+    // TODO:  缓存
+    /**
+     * @description: 获取merge后的配置
+     */
+    getTagConfig(tag) {
+        var _a;
+        if (!tag)
+            return (_a = this.config.globalConfig) !== null && _a !== void 0 ? _a : {};
+        const contentTypeConfig = {};
+        if (this.config.contentTypeConfig) {
+            Object.keys(this.config.contentTypeConfig).forEach((_key) => {
+                const key = _key;
+                if (contentTypeConfig[key])
+                    return;
+                const keys = key.split('-');
+                const [dimensionTypeInkey = 'Any', contenttypeInKey = 'Any', pointTypeInkey = 'Any'] = keys || [];
+                if ((tag.dimensionType === dimensionTypeInkey || dimensionTypeInkey === 'Any') &&
+                    (tag.contentType === contenttypeInKey || contenttypeInKey === 'Any') &&
+                    (tag.pointType === pointTypeInkey || pointTypeInkey === 'Any')) {
+                    contentTypeConfig[key] = this.config.contentTypeConfig[key]; // 加!是因为前面已经 if (this.config.contentTypeConfig) 过了
+                }
+            });
+        }
+        // merge config
+        const mergeConfig = objectAssignDeep({}, this.config.globalConfig, ...Object.values(contentTypeConfig), tag.config);
+        return mergeConfig;
+    }
+    /**
+     * @description: 一个点的标签
+     */
+    setPointTagPosition() {
+        const tags = this.filterPointTag();
+        if (tags.length === 0)
+            return;
+        tags.forEach((tag) => {
+            var _a;
+            if (!((_a = tag.state) === null || _a === void 0 ? void 0 : _a.visible)) {
+                tag.pointTagStyle = undefined;
+                return;
+            }
+            const project = this.getTagProject(tag);
+            if (!project) {
+                tag.pointTagStyle = undefined;
+                return;
+            }
+            tag.pointTagStyle = { leftPercent: ((project.x + 1) / 2) * 100, topPercent: ((-project.y + 1) / 2) * 100 };
+        });
+    }
+    setVisibleByPanoIndex() {
+        this.tags.forEach((tag) => {
+            const visible = this.getVisibleByPanoIndex(tag);
+            if (tag.state)
+                tag.state.visible = visible;
+        });
+    }
+    setUnfoldedByPanoIndex() {
+        this.tags.forEach((tag) => {
+            const unfolded = this.getUnfoldedByPanoIndex(tag);
+            if (!tag.state)
+                return;
+            if (unfolded === undefined)
+                return;
+            tag.state.unfolded = unfolded;
+        });
+    }
+    setVisibleAndUnfoldedByPanoIndex() {
+        this.setVisibleByPanoIndex();
+        this.setUnfoldedByPanoIndex();
+        this.tags.forEach((tag) => {
+            var _a, _b;
+            // 如果标签展开但不可见，就要判断autoUnfoldWhenHide
+            if (((_a = tag.state) === null || _a === void 0 ? void 0 : _a.unfolded) && !((_b = tag.state) === null || _b === void 0 ? void 0 : _b.visible)) {
+                const config = this.getTagConfig(tag);
+                if (typeof config.unfoldedConfig === 'object' && config.unfoldedConfig.autoUnfoldWhenHide !== false) {
+                    tag.state.unfolded = false;
+                }
+            }
+        });
+    }
+    /**
+     * @description: 一个点的标签
+     */
+    getTagProject(tag) {
+        const visible = this.getVisibleByPanoIndex(tag);
+        if (!visible)
+            return;
+        const vector3Position = tagPosition(tag.position);
+        const { x, y, z } = vector3Position.project(this.five.camera);
+        if (z > 1)
+            return;
+        return { x, y, z };
+    }
+    getTagById(id) {
+        const tag = this.tags.find((tag) => {
+            return tag.id === id;
+        });
+        if (!tag) {
+            console.error(`getTagById(): tag is ${tag}, id is ${id}`);
+            return undefined;
+        }
+        return tag;
+    }
+    // TODO: 优化点：下面这些函数，调用比较频繁，可以按点位加缓存
+    filterPointTag() {
+        return this.tags.filter((tag) => tag.pointType === PointType.PointTag);
+    }
+    filterTag2D() {
+        return this.tags.filter((tag) => tag.dimensionType === DimensionType.Two);
+    }
+    filter3DPointTag() {
+        return this.tags.filter((tag) => tag.dimensionType === DimensionType.Three && tag.pointType === PointType.PointTag);
+    }
+    filter3DTag() {
+        return this.tags.filter((tag) => tag.dimensionType === DimensionType.Three);
+    }
+    filterPlaneTag() {
+        return this.tags.filter((tag) => tag.dimensionType === DimensionType.Three && tag.pointType === PointType.PlaneTag);
+    }
+}

package/libs/PanoTagPlugin/controller/index.d.ts

@@ -0,0 +1,136 @@
+import type { Five } from '@realsee/five';
+import type { Tag, ContentType, PartialDeep, TagId, Tags, State } from '../typings';
+import { TagComputer } from './TagComputer';
+import { ArrayPosition } from '..';
+export declare const DefaultConfig: {
+    globalConfig?: Tags['globalConfig'];
+    contentTypeConfig?: Tags['contentTypeConfig'];
+};
+export declare const pluginFlag: (name: string) => string;
+declare class PanoTagPluginController extends TagComputer {
+    /** 版本号 */
+    version: string;
+    /** state */
+    state: {
+        enabled: boolean;
+        visible: boolean;
+    };
+    /** 插件参数 */
+    private params;
+    /** debug */
+    private debug;
+    /** css3DRenderPlugin */
+    private css3DRenderPlugin?;
+    /** 点标签 */
+    private PointTagSvelte?;
+    /** 临时状态 */
+    private temporaryState;
+    private mediaStore;
+    private store;
+    constructor(five: Five, params?: {
+        debug?: boolean;
+        mergePluginDefaultConfigToLoadDataConfig?: boolean;
+        config?: {
+            globalConfig?: Tags['globalConfig'];
+            contentTypeConfig?: Tags['contentTypeConfig'];
+        };
+    });
+    /**
+     * @description: 加载数据
+     */
+    load(data: Tags): void;
+    /**
+     * @description: 添加标签
+     */
+    addTag(tag: Tag | Tag[]): void;
+    show(params?: {
+        userAction?: boolean;
+        withAnimation?: boolean;
+    }): Promise<void>;
+    hide(params?: {
+        userAction?: boolean;
+        withAnimation?: boolean;
+    }): Promise<void>;
+    enable(params?: {
+        userAction?: boolean;
+    }): void;
+    disable(params?: {
+        userAction?: boolean;
+    }): void;
+    /**
+     * @description: 销毁
+     */
+    dispose(): void;
+    setState(state: Partial<State>, params: {
+        userAction?: boolean;
+        visibleWithAnimation?: boolean;
+    }): void;
+    /**
+     * @description: 修改3D标签normal
+     */
+    changeTagNormalById(id: TagId, normal: ArrayPosition): void;
+    /**
+     * @description: 改变data
+     */
+    changeDataById<C extends ContentType = ContentType.Custom>(id: TagId, data: PartialDeep<Tag<C>['data']>, deepMerge?: boolean): void;
+    /**
+     * @description: 改变tag任意属性
+     */
+    changeTagById<C extends ContentType = ContentType.Custom>(id: TagId, tag: PartialDeep<{
+        [P in keyof Pick<Tag<C>, 'enabled' | 'style' | 'dimensionType' | 'contentType' | 'data' | 'normal'>]: Tag[P];
+    }>, deepMerge?: boolean): void;
+    /**
+     * @description: 销毁tag
+     */
+    destroyTagById(id: TagId | TagId[]): void;
+    /** 暂停当前标签内进行的所有多媒体 */
+    pauseCurrentMedia(): void;
+    private handleShow;
+    private handleHide;
+    private handleEnable;
+    private handleDisable;
+    private disposedErrorLog;
+    /**
+     * @description: 添加 cameraUpdate, panoArrived 等事件监听
+     */
+    private addEventListener;
+    private addResizeObserver;
+    /**
+     * @description: 切换模式处理函数
+     */
+    private handleFiveModeChange;
+    private handleFiveWantsMoveToPano;
+    /**
+     * @description: 走点/切换模型后显示
+     */
+    private temporaryShow;
+    /**
+     * @description: 走点/切换模型时临时隐藏
+     */
+    private temporaryHide;
+    private clickhandler;
+    /**
+     * @description: 更新所有标签
+     */
+    private updateRenderAllTag;
+    private updateTagContainerVisible;
+    private handleFiveCameraUpdateDebounce;
+    private handleFiveCameraUpdate;
+    private handleFivePanoArrived;
+    private setUnfoldedByCamera;
+    /**
+     * @description: 渲染单个点的标签
+     */
+    private updateRenderPointTag;
+    /**
+     * @description: 渲染3D贴片
+     */
+    private updateRenderPlaneTag;
+    private disposeAllCSS3DContainer;
+    /**
+     * @description: 检查并销毁不用的3D贴片
+     */
+    private checkPanelTag;
+}
+export default PanoTagPluginController;
+export { PanoTagPluginController };