@realsee/dnalogel 2.1.0-alpha.10 → 2.1.0-alpha.12

package/libs/PanoTagPlugin/controller/index.js

@@ -9,9 +9,10 @@ import { TagComputer } from './TagComputer';
 import { CSS3DRenderPlugin } from '../../CSS3DRenderPlugin';
 import { DimensionType, PointType } from '../typings';
 // declare const __APP_VERSION__: string
-const VERSION = '0.3.6';
+const VERSION = '1.0.0';
 const PLUGIN_NAME = `DnalogelPlugin-PanoTagPlugin@${VERSION}`;
-const TAG_INITIAL_UNFOLDED = true;
+// 初始是否展开
+const TAG_INITIAL_UNFOLDED = false;
 export const pluginFlag = (name) => `${PLUGIN_NAME}--${name}`;
 class PanoTagPluginController extends TagComputer {
     constructor(five, params) {
@@ -121,8 +122,9 @@ class PanoTagPluginController extends TagComputer {
     /**
      * @description: 加载数据
      */
-    load(data) {
+    load(data, config) {
         var _a, _b;
+        this.clearTags();
         console.log(PLUGIN_NAME, 'load:', { data });
         if (this.params.mergePluginDefaultConfigToLoadDataConfig) {
             this.config = objectAssignDeep({}, this.config, {
@@ -136,17 +138,15 @@ class PanoTagPluginController extends TagComputer {
             if (data.contentTypeConfig)
                 this.config.contentTypeConfig = data.contentTypeConfig;
         }
-        this.clearCache();
-        this.disposeAllCSS3DContainer();
-        this.tags = [];
-        this.addTag(data.tagList);
+        this.addTag(data.tagList, config);
+        // debug
         if (this.debug)
             addDebugPoints(this.five, this.tags);
     }
     /**
      * @description: 添加标签
      */
-    addTag(tag) {
+    addTag(tag, config) {
         const tags = Array.isArray(tag) ? tag : [tag];
         const _tags = tags
             .map((tag) => {
@@ -156,7 +156,7 @@ class PanoTagPluginController extends TagComputer {
             .filter((tag) => tag.position);
         this.tags.push(..._tags);
         actionAfterFiveModelLoad(this.five, () => {
-            var _a, _b;
+            var _a, _b, _c;
             // 添加事件
             if (this.store.eventListenerDisposer) {
                 (_b = (_a = this.store).eventListenerDisposer) === null || _b === void 0 ? void 0 : _b.call(_a);
@@ -172,10 +172,18 @@ class PanoTagPluginController extends TagComputer {
                 }, 200);
             }
             this.checkPanelTag();
-            this.setVisibleAndUnfoldedByPanoIndex();
-            this.updateRenderAllTag();
+            // v0.3.8 新增 withAnimation，默认 false
+            // v1.0.0 withAnimation 默认值改为 true
+            this.setVisibleAndUnfolded({ withAnimation: (_c = config === null || config === void 0 ? void 0 : config.withAnimation) !== null && _c !== void 0 ? _c : true }).then(() => this.updateRenderAllTags());
+            this.updateRenderAllTags();
         });
     }
+    clearTags() {
+        this.tags = [];
+        this.clearCache();
+        this.disposeAllCSS3DContainer();
+        this.updateRenderAllTags();
+    }
     async show(params) {
         const { userAction = true, withAnimation = false } = params !== null && params !== void 0 ? params : {};
         if (this.store.disposed)
@@ -266,7 +274,7 @@ class PanoTagPluginController extends TagComputer {
         }
         // 3D 转 2D 的时候要销毁 3D container
         this.checkPanelTag();
-        this.updateRenderAllTag();
+        this.updateRenderAllTags();
     }
     /**
      * @description: 改变tag任意属性
@@ -284,7 +292,7 @@ class PanoTagPluginController extends TagComputer {
         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.updateRenderAllTags();
         this.checkPanelTag();
     }
     /**
@@ -298,12 +306,31 @@ class PanoTagPluginController extends TagComputer {
                 return;
             this.tags.splice(index, 1);
         });
-        this.updateRenderAllTag();
+        this.updateRenderAllTags();
     }
     /** 暂停当前标签内进行的所有多媒体 */
     pauseCurrentMedia() {
         this.mediaStore.set({ currentMediaUrl: '' });
     }
+    /**
+     * @description: 设置 visible 和 unfolded
+     */
+    async setVisibleAndUnfolded({ withAnimation } = { withAnimation: false }) {
+        this.setVisibleByPanoIndex();
+        if (withAnimation) {
+            return new Promise((resolve, reject) => {
+                // setTimeout 初始隐藏，然后展开，而不是一步到位，要不就没动画了
+                setTimeout(() => {
+                    this.setUnfoldedByPanoIndex();
+                    resolve();
+                }, 10); // 10ms 是等待 TextTag onMount
+            });
+        }
+        else {
+            this.setUnfoldedByPanoIndex();
+            return Promise.resolve();
+        }
+    }
     handleShow() {
         this.state.visible = true;
         this.updateTagContainerVisible();
@@ -314,7 +341,7 @@ class PanoTagPluginController extends TagComputer {
     }
     handleEnable() {
         this.state.enabled = true;
-        this.updateRenderAllTag();
+        this.updateRenderAllTags();
     }
     handleDisable() {
         var _a;
@@ -360,7 +387,7 @@ class PanoTagPluginController extends TagComputer {
         // resize
         const show = () => {
             this.show();
-            this.updateRenderAllTag();
+            this.updateRenderAllTags();
         };
         const { observe: hideObserve, unobserve: hideUnobserve } = resizeObserver(throttle(() => {
             /**
@@ -398,7 +425,7 @@ class PanoTagPluginController extends TagComputer {
                 tag.temporaryState = Object.assign(Object.assign({}, tag.temporaryState), { visible: false });
             }
         });
-        this.updateRenderAllTag();
+        this.updateRenderAllTags();
     }
     /**
      * @description: 走点/切换模型后显示
@@ -436,13 +463,13 @@ class PanoTagPluginController extends TagComputer {
                         tag.state.unfolded = false;
                 });
             }
-            this.updateRenderAllTag();
+            this.updateRenderAllTags();
         }
     }
     /**
      * @description: 更新所有标签
      */
-    updateRenderAllTag() {
+    updateRenderAllTags() {
         this.updateRenderPointTag();
         this.updateRenderPlaneTag();
     }
@@ -463,20 +490,20 @@ class PanoTagPluginController extends TagComputer {
             // 设置展开/收起
             this.setUnfoldedByCamera();
             // 渲染
-            this.updateRenderAllTag();
+            this.updateRenderAllTags();
         }, 100);
     }
     handleFiveCameraUpdate() {
         // 渲染
         this.updateRenderPointTag();
     }
-    handleFivePanoArrived() {
-        this.setVisibleAndUnfoldedByPanoIndex();
+    async handleFivePanoArrived() {
+        await this.setVisibleAndUnfolded();
         this.tags.forEach((tag) => {
             tag.temporaryState = Object.assign(Object.assign({}, tag.temporaryState), { visible: true });
         });
         // 渲染
-        this.updateRenderAllTag();
+        this.updateRenderAllTags();
     }
     setUnfoldedByCamera() {
         let hasTagUnfolded = false; // 是否有标签由于camera的转动而展开

package/libs/PanoTagPlugin/mocks/mock1.d.ts

@@ -16,7 +16,6 @@ declare const _default: {
             audioUrl?: undefined;
             linkType?: undefined;
         };
-        element: HTMLParagraphElement;
         style: {
             point: {
                 style: string;
@@ -31,11 +30,15 @@ declare const _default: {
         position: number[];
         data: {
             text: string;
-            mediaData: {
+            mediaData: ({
                 url: string;
                 videoCoverUrl: string;
                 type: string;
-            }[];
+            } | {
+                url: string;
+                type: string;
+                videoCoverUrl?: undefined;
+            })[];
             title?: undefined;
             brandTags?: undefined;
             tags?: undefined;
@@ -45,7 +48,6 @@ declare const _default: {
             audioUrl?: undefined;
             linkType?: undefined;
         };
-        element?: undefined;
         style?: undefined;
         normal?: undefined;
     } | {
@@ -54,11 +56,15 @@ declare const _default: {
         contentType: string;
         position: number[][];
         data: {
-            mediaData: {
+            mediaData: ({
                 url: string;
                 videoCoverUrl: string;
                 type: string;
-            }[];
+            } | {
+                url: string;
+                type: string;
+                videoCoverUrl?: undefined;
+            })[];
             text?: undefined;
             title?: undefined;
             brandTags?: undefined;
@@ -69,7 +75,6 @@ declare const _default: {
             audioUrl?: undefined;
             linkType?: undefined;
         };
-        element?: undefined;
         style?: undefined;
         normal?: undefined;
     } | {
@@ -98,7 +103,6 @@ declare const _default: {
                 iconUrl: string;
             };
         };
-        element?: undefined;
         normal?: undefined;
     } | {
         dimensionType: string;
@@ -118,7 +122,6 @@ declare const _default: {
             audioUrl?: undefined;
             linkType?: undefined;
         };
-        element?: undefined;
         style?: undefined;
     } | {
         dimensionType: string;
@@ -137,7 +140,6 @@ declare const _default: {
             price?: undefined;
             linkType?: undefined;
         };
-        element?: undefined;
         style?: undefined;
         normal?: undefined;
     } | {
@@ -157,7 +159,6 @@ declare const _default: {
             price?: undefined;
             audioUrl?: undefined;
         };
-        element?: undefined;
         style?: undefined;
         normal?: undefined;
     }) & {

package/libs/PanoTagPlugin/mocks/mock1.js

@@ -12,17 +12,16 @@ const tagList = [
         // normal: [-1.3472052051879881, -0.22353184120423517, -0.4423657342911711],
         // position: [2.4858952, 0.12852754341132364, -3.848354251670743],
         data: {
-            text: 'wtqyiuegdhkjaxbcznm标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标',
+            text: '🙋‍♂️123标题标题🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️标题标🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️🙋‍♂️题标题标题标题标题标',
         },
         // element: (content: HTMLElement) => {
-        //   console.log(content)
         //   const a = document.createElement('p')
         //   a.style.width = '100px'
         //   a.style.height = '100px'
         //   a.style.background = 'red'
         //   content.appendChild(a)
         // },
-        element: document.createElement('p'),
+        // element: document.createElement('p'),
         style: {
             point: {
                 style: 'CustomIcon',
@@ -46,8 +45,11 @@ const tagList = [
                     type: 'Video',
                 },
                 {
-                    url: '//vrlab-static.ljcdn.com/release/web/jsl/test.65720b34.png',
-                    videoCoverUrl: '//vrlab-static.ljcdn.com/release/web/jsl/test.65720b34.png',
+                    url: '//vrlab-static.ljcdn.com/release/web/arrow.c5d028e4.png',
+                    type: 'Image',
+                },
+                {
+                    url: '//vrlab-static.ljcdn.com/release/web/arrow.c5d028e4.png',
                     type: 'Image',
                 },
             ],
@@ -66,8 +68,11 @@ const tagList = [
                     type: 'Video',
                 },
                 {
-                    url: '//vrlab-static.ljcdn.com/release/web/jsl/test.65720b34.png',
-                    videoCoverUrl: '//vrlab-static.ljcdn.com/release/web/jsl/test.65720b34.png',
+                    url: '//vrlab-static.ljcdn.com/release/web/arrow.c5d028e4.png',
+                    type: 'Image',
+                },
+                {
+                    url: '//vrlab-static.ljcdn.com/release/web/arrow.c5d028e4.png',
                     type: 'Image',
                 },
             ],

package/libs/PanoTagPlugin/mocks/mock3.d.ts

@@ -1,14 +1,22 @@
 declare const _default: {
     tagList: {
         id: number;
-        pointType: string;
         dimensionType: string;
+        pointType: string;
+        contentType: string;
         position: number[];
         data: {
             text: string;
+            mediaData: ({
+                url: string;
+                videoCoverUrl: string;
+                type: string;
+            } | {
+                url: string;
+                type: string;
+                videoCoverUrl?: undefined;
+            })[];
         };
-        normal: number[];
-        contentType: string;
     }[];
 };
 export default _default;

package/libs/PanoTagPlugin/mocks/mock3.js

@@ -1,31 +1,30 @@
 export default {
     tagList: [
-        {
-            id: 2,
-            pointType: 'PointTag',
-            dimensionType: '3D',
-            position: [-0.8998534645219779, -0.053330655526465105, 0.9791677844715473],
-            data: {
-                text: '我是一个3d文字标签',
-            },
-            // style: {
-            //   point: {
-            //     style: 'CustomIcon',
-            //     iconUrl: '//vrlab-static.ljcdn.com/release/web/carTagDotContent.08ace25e.png',
-            //   },
-            // },
-            normal: [0.6766569516112458, 0, -0.7362984244422746],
-            contentType: 'Text',
-        },
         {
             id: 1,
-            dimensionType: '3D',
+            dimensionType: '2D',
             pointType: 'PointTag',
-            contentType: 'Text',
-            normal: [-1.3472052051879881, -0.22353184120423517, -0.4423657342911711],
-            position: [2.4858952, 0.12852754341132364, -3.848354251670743],
+            contentType: 'ImageText',
+            position: [1.1163144338520299, -1.4289252462321484, -7.767970762686076],
+            // normal: [-1.3472052051879881, -0.22353184120423517, -0.4423657342911711],
+            // position: [2.4858952, 0.12852754341132364, -3.848354251670743],
             data: {
-                text: '112123',
+                text: '哈哈哈',
+                mediaData: [
+                    {
+                        url: '//vrlab-static.ljcdn.com/release/web/jsl/test.69dacffb.mp4',
+                        videoCoverUrl: '//vrlab-static.ljcdn.com/release/web/jsl/test.65720b34.png',
+                        type: 'Video',
+                    },
+                    {
+                        url: '//vrlab-static.ljcdn.com/release/web/arrow.c5d028e4.png',
+                        type: 'Image',
+                    },
+                    {
+                        url: '//vrlab-static.ljcdn.com/release/web/arrow.c5d028e4.png',
+                        type: 'Image',
+                    },
+                ],
             },
         },
     ],

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

@@ -12,6 +12,9 @@ export declare type Hooks = InstanceType<typeof PanoTagPluginController>['hooks'
 declare type NonNullable<T> = T extends null | undefined | void ? never : T;
 export interface State extends BasePlugin.State {
 }
+export interface AddTagConfig {
+    withAnimation?: boolean;
+}
 export interface TemporaryState {
     visible?: boolean;
 }

package/libs/PanoTagPlugin/typings/tag.d.ts

@@ -211,6 +211,16 @@ interface ContentTypeMap {
         adaptationMode?: 'stretch' | 'proportional';
         /** object-fit doc {@link https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit} */
         objectFit?: ObjectFit;
+        /**
+         * @description 是否开启自动轮播
+         * @param autoplay true: 开启自动轮播, false: 关闭自动播放
+         * @param autoplayVideo 自动轮播时，如果是视频， 则自动播放视频
+         * @default 默认值 { autoplay: true, autoplayVideo: false }
+         */
+        autoplayConfig?: {
+            autoplay: boolean;
+            autoplayVideo: boolean;
+        };
         mediaData: MediaData[];
         extraData?: Object;
     };

package/libs/PanoTagPlugin/utils/constants.d.ts

@@ -0,0 +1,3 @@
+export declare function random(): string;
+declare const RANDON_STRING: string;
+export { RANDON_STRING };

package/libs/PanoTagPlugin/utils/constants.js

@@ -0,0 +1,5 @@
+export function random() {
+    return Math.random().toString(36).slice(-6);
+}
+const RANDON_STRING = random();
+export { RANDON_STRING };

package/libs/PanoTagPlugin/utils/noTypecheck.d.ts

@@ -1 +1 @@
-export declare const noTypecheck: (x: any) => any;
+export declare const noTypecheck: <T = any>(x: T) => any;

package/package.json

@@ -8,7 +8,7 @@
   "repository": "https://github.com/realsee-developer/dnalogel.git",
   "description": "如视 VR 看房插件合集",
   "private": false,
-  "version": "2.1.0-alpha.10",
+  "version": "2.1.0-alpha.12",
   "license": "SEE LICENSE IN TERMS.txt",
   "scripts": {
     "build": "yarn run tsb && yarn run build:rollup && yarn run build:components && yarn build:docs",

package/libs/CSS3DRenderPlugin/Plugin.d.ts

@@ -1,49 +0,0 @@
-import type { FivePlugin } from '@realsee/five';
-import type { Vector3Position } from '../typings/math.type';
-import { Vector3 } from 'three';
-import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
-export declare type CSS3DRenderPluginParameterType = undefined;
-export interface CSS3DRenderPluginExportType {
-    /**
-     * @description: 根据传入的四个点位创建一个3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
-     * @param {Five} five
-     * @param {Vector3[] | Vector3Position[]} points: 矩形四个点坐标
-     * @param {number} config.ratio: 1px对应多少米，默认为 0.002，即1px对应2mm
-     * @param {number} config.dpr: dpr, 默认为1
-     * @param {HTMLElement} config.container: HTMLElement
-     * @param {number} config.autoRender: 默认为true，如果需要手动render则传false
-     * @param {'front' | 'behind'} config.mode: 两种模式
-     * @param {HTMLElement} config.behindFiveContainer: 如果config.mode为'behind'，需要传入容器，并确保此容器位five下方，且中间没有其他dom元素遮挡
-     * @return {{ container: HTMLElement; dispose: () => void }}: container: dom容器, dispose: 清理函数
-     */
-    create3DDomContainer: (points: Vector3[] | Vector3Position[], config?: {
-        ratio?: number;
-        dpr?: number;
-        autoRender?: boolean;
-        container?: HTMLElement;
-        [key: string]: any;
-    } & ({
-        mode?: 'front';
-    } | {
-        mode: 'behind';
-        behindFiveContainer: HTMLElement;
-    })) => {
-        container: HTMLElement;
-        dispose: () => void;
-        css3DObject: CSS3DObject;
-        render?: () => void;
-    } | void;
-    /**
-     * @description: 销毁所有的渲染内容
-     * @return {void}
-     */
-    disposeAll: () => void;
-}
-/**
- * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
- * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
- *
- * @returns
- */
-export declare const CSS3DRenderPlugin: FivePlugin<CSS3DRenderPluginParameterType, CSS3DRenderPluginExportType>;
-export default CSS3DRenderPlugin;