@realsee/dnalogel 2.0.0-alpha.4 → 2.0.0-alpha.42

package/libs/shared-utils/tinyEJSrender.js

@@ -0,0 +1,210 @@
+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');
+}
+export default 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;
+        const newLineCount = 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);
+                }
+        }
+    }
+}

package/libs/shared-utils/to.js

@@ -1,18 +1,29 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 /**
  * 传入一个 Promise
  * 无异常，返回 [null, data]
  * 有异常，则返回 [Error, undefined]
  * 用于替代 try&catch 处理 await 异常的方案
  */
-export async function to(promise) {
-    try {
-        const data = await promise;
-        return [null, data];
-    }
-    catch (error) {
-        if (error instanceof Error)
-            return [error, null];
-        return [new Error(''), null];
-    }
+export function to(promise) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            const data = yield promise;
+            return [null, data];
+        }
+        catch (error) {
+            if (error instanceof Error)
+                return [error, null];
+            return [new Error(''), null];
+        }
+    });
 }
 export default to;

package/libs/shared-utils/uuid.d.ts

@@ -2,3 +2,4 @@
  * 随机生成一个uuid值
  */
 export default function uuid(): string;
+export { uuid };

package/libs/shared-utils/uuid.js

@@ -9,3 +9,4 @@ export default function uuid() {
     // then to call it, plus stitch in '4' in the third group
     return (S4() + S4() + '-' + S4() + '-4' + S4().substr(0, 3) + '-' + S4() + '-' + S4() + S4() + S4()).toLowerCase();
 }
+export { uuid };

package/libs/shared-utils/vectorTocoordinates.d.ts

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import type * as THREE from 'three';
 /** 单位向量转换成坐标 */
 declare function vectorTocoordinates(vector: THREE.Vector3): {
     longitude: number;

package/libs/src/CSS3DRenderPlugin/Plugin.d.ts

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

package/libs/src/CSS3DRenderPlugin/Plugin.js

@@ -0,0 +1,182 @@
+import * as THREE from 'three';
+import { Scene, Vector3 } from 'three';
+import { CSS3DObject, CSS3DRenderer } from 'three/examples/jsm/renderers/CSS3DRenderer';
+import evenNumber from '../shared-utils/math/evenNumber';
+import centerPoint from '../shared-utils/three/centerPoint';
+import transformPositionToVector3 from '../shared-utils/three/transformPositionToVector3';
+import createResizeObserver from './utils/createResizeObserver';
+/**
+ * **CSS3DRenderPlugin** 提供矩形区域（三维空间四个坐标点），你可以在此矩形区域中渲染 DOM 内容。
+ * 实现原理参考[CSS3DRenderer](https://threejs.org/docs/index.html?q=CSS3D#examples/en/renderers/CSS3DRenderer)。
+ *
+ * @returns
+ */
+export const CSS3DRenderPlugin = (five) => {
+    const state = { disposeCallbacks: [] };
+    const create3DDomContainer = (...params) => {
+        var _a, _b, _c;
+        const points = params[0].map((point) => (point instanceof Vector3 ? point : transformPositionToVector3(point)));
+        const config = params[1];
+        if ((points === null || points === void 0 ? void 0 : points.length) < 4)
+            return console.error('points must be equal or greater than than 4');
+        if (!((_a = five === null || five === void 0 ? void 0 : five.model) === null || _a === void 0 ? void 0 : _a.loaded))
+            return console.error('five.model.loaded is: ', (_b = five === null || five === void 0 ? void 0 : five.model) === null || _b === void 0 ? void 0 : _b.loaded);
+        const fiveElement = five.getElement();
+        if (!fiveElement)
+            return console.error('five.getElement() is ' + fiveElement);
+        const disposers = [];
+        const ratio = (config === null || config === void 0 ? void 0 : config.ratio) || 0.00216;
+        if (ratio <= 0.00215)
+            console.warn('if you need click css3DElement on safari, ratio must be greater than 0.00215');
+        const dpr = (config === null || config === void 0 ? void 0 : config.dpr) || 1;
+        const mode = (config === null || config === void 0 ? void 0 : config.mode) || 'front';
+        const autoRender = (_c = config === null || config === void 0 ? void 0 : config.autoRender) !== null && _c !== void 0 ? _c : true;
+        const behindFiveContainer = (config === null || config === void 0 ? void 0 : config.behindFiveContainer) || fiveElement.parentElement || document.body;
+        const container = (config === null || config === void 0 ? void 0 : config.container) || document.createElement('div');
+        container.classList.add('__Dnalogel-plugin--CSS3DRenderPlugin');
+        // 获取css3DObject, 如果mode为behind的话，一起获取mesh
+        const { css3DObject, mesh } = createObject(points, { ratio, dpr, container, mode });
+        // ======= INIT START =======
+        let resizeObserver;
+        const frontModeUnInited = mode === 'front' && !state.frontMode;
+        const behindModeUnInited = mode === 'behind' && !state.behindMode;
+        const inited = !(frontModeUnInited || behindModeUnInited);
+        if (behindModeUnInited) {
+            state.behindMode = { scene: new Scene(), css3DRenderer: new CSS3DRenderer() };
+        }
+        if (frontModeUnInited) {
+            state.frontMode = { scene: new Scene(), css3DRenderer: new CSS3DRenderer() };
+        }
+        const stateMode = mode === 'behind' ? state.behindMode : state.frontMode;
+        const { scene, css3DRenderer } = stateMode;
+        const render = (() => {
+            if (!inited) {
+                const css3DRendererSetSize = () => {
+                    // 这里evenNumber策略是遇到奇数会加1，不知道为啥会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
+                    // 为了规避上面这种情况，evenNumber设置了一个参数，遇到奇数可选择减一
+                    const rendererWidth = evenNumber(fiveElement.clientWidth, { smaller: true });
+                    const rendererHeight = evenNumber(fiveElement.clientHeight, { smaller: true });
+                    css3DRenderer.setSize(rendererWidth, rendererHeight);
+                };
+                css3DRendererSetSize();
+                resizeObserver = createResizeObserver(css3DRendererSetSize, fiveElement);
+                css3DRenderer.domElement.style.position = 'absolute';
+                css3DRenderer.domElement.style.top = '0';
+                css3DRenderer.domElement.style.userSelect = 'none';
+                css3DRenderer.domElement.style.pointerEvents = 'none';
+                const renderEveryFrame = () => {
+                    const requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
+                    stateMode.requestAnimationFrameId = requestAnimationFrameId;
+                    css3DRenderer.render(scene, five.camera);
+                };
+                return () => {
+                    var _a;
+                    scene.add(css3DObject);
+                    (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
+                    renderEveryFrame();
+                    if (mode === 'behind' && mesh) {
+                        five.scene.add(mesh);
+                        disposers.push(() => mesh && five.scene.remove(mesh));
+                    }
+                };
+            }
+            else {
+                return () => {
+                    scene.add(css3DObject);
+                };
+            }
+        })();
+        if (frontModeUnInited) {
+            const wrapper = fiveElement.parentElement || document.body;
+            wrapper.appendChild(css3DRenderer.domElement);
+        }
+        if (behindModeUnInited) {
+            const wrapper = behindFiveContainer;
+            wrapper.appendChild(css3DRenderer.domElement);
+        }
+        // ======= INIT END =======
+        const dispose = () => {
+            var _a;
+            disposers.forEach((d) => d === null || d === void 0 ? void 0 : d());
+            scene.remove(css3DObject);
+            if (scene.children.length === 0) {
+                if (typeof stateMode.requestAnimationFrameId === 'number') {
+                    cancelAnimationFrame(stateMode.requestAnimationFrameId);
+                }
+                css3DRenderer.domElement.remove();
+                if (mode === 'front')
+                    state.frontMode = undefined;
+                if (mode === 'behind')
+                    state.behindMode = undefined;
+                if (!state.behindMode && !state.frontMode) {
+                    (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
+                }
+            }
+            return true;
+        };
+        const idx = state.disposeCallbacks.findIndex((item) => item === dispose);
+        if (idx !== -1) {
+            state.disposeCallbacks.splice(idx, 1);
+        }
+        else {
+            state.disposeCallbacks.push(dispose);
+        }
+        if (autoRender)
+            render();
+        return { container, dispose, css3DObject, render: autoRender ? undefined : render };
+    };
+    const createObject = (points, config) => {
+        const { ratio, dpr, container: element, mode } = config;
+        const planeWidth = points[0].distanceTo(points[1]);
+        const planeHeight = points[1].distanceTo(points[2]);
+        const domWidthPx = evenNumber((planeWidth / ratio) * dpr);
+        const domHeightPx = evenNumber((planeHeight / ratio) * dpr);
+        const css3DObject = new CSS3DObject(element);
+        css3DObject.scale.set(ratio, ratio, ratio);
+        element.style.width = domWidthPx + 'px';
+        element.style.height = domHeightPx + 'px';
+        element.style.pointerEvents = 'none';
+        const centerPosition = centerPoint(points[0], points[2]);
+        const vector01 = points[1].clone().sub(points[0]); // 点0 -> 点1 的向量
+        const vector12 = points[2].clone().sub(points[1]); // 点1 -> 点2 的向量
+        // 旋转
+        const rotateXAngle = new Vector3(0, 1, 0).angleTo(new Vector3(0, vector12.y, vector12.z));
+        const rotateYAngle = new Vector3(1, 0, 0).angleTo(new Vector3(vector01.x, 0, vector01.z));
+        const rotateZAngle = vector01.angleTo(new Vector3(vector01.x, 0, vector01.z));
+        /**
+         * [0,1,0] => [0,0,1]  为rotate Worldx正方向
+         * [0,0,1] => [0,1,0]  为rotate Worldy正方向
+         * [0,1,1] => [-1,0,0] 为rotate Worldz正方向
+         */
+        const rotateX = (vector12.z > 0 ? -1 : 1) * rotateXAngle;
+        const rotateY = (vector01.z < 0 ? 1 : -1) * rotateYAngle;
+        const rotateZ = ((vector01.x > 0 && vector01.y < 0) || (vector01.x < 0 && vector01.y > 0) ? -1 : 1) * rotateZAngle;
+        css3DObject.rotateOnWorldAxis(new Vector3(1, 0, 0), rotateX); // x
+        css3DObject.rotateOnWorldAxis(new Vector3(0, 1, 0), rotateY); // y
+        css3DObject.rotateOnWorldAxis(new Vector3(0, 0, 1), rotateZ); // z
+        css3DObject.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
+        let mesh;
+        if (mode === 'behind') {
+            const material = new THREE.MeshBasicMaterial({
+                opacity: 0,
+                transparent: false,
+                side: THREE.DoubleSide,
+            });
+            const geometry = new THREE.PlaneGeometry(domWidthPx, domHeightPx);
+            mesh = new THREE.Mesh(geometry, material);
+            mesh.name = 'CSS3DRenderPlugin-mesh';
+            mesh.position.copy(css3DObject.position);
+            mesh.rotation.copy(css3DObject.rotation);
+            mesh.scale.copy(css3DObject.scale);
+        }
+        return { css3DObject, mesh };
+    };
+    return {
+        create3DDomContainer,
+        disposeAll: () => {
+            state.disposeCallbacks.forEach((d) => d === null || d === void 0 ? void 0 : d());
+            state.disposeCallbacks = [];
+        },
+    };
+};
+export default CSS3DRenderPlugin;

package/libs/src/CSS3DRenderPlugin/index.d.ts

@@ -0,0 +1,4 @@
+import CSS3DRenderPlugin from './Plugin';
+export { CSS3DRenderPlugin };
+export default CSS3DRenderPlugin;
+export type { CSS3DRenderPluginExportType } from './Plugin';

package/libs/src/CSS3DRenderPlugin/index.js

@@ -0,0 +1,3 @@
+import CSS3DRenderPlugin from './Plugin';
+export { CSS3DRenderPlugin };
+export default CSS3DRenderPlugin;

package/libs/src/CSS3DRenderPlugin/utils/createResizeObserver.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @description: 究极简陋的 ResizeObserver polyfill
+ */
+export default function createResizeObserver(func: () => any, element?: HTMLElement): {
+    observe: () => void;
+    unobserve: () => void;
+};

package/libs/src/CSS3DRenderPlugin/utils/createResizeObserver.js

@@ -0,0 +1,18 @@
+/**
+ * @description: 究极简陋的 ResizeObserver polyfill
+ */
+export default function createResizeObserver(func, element) {
+    if (!element || typeof ResizeObserver === 'undefined') {
+        return {
+            observe: () => window.addEventListener('resize', func),
+            unobserve: () => window.removeEventListener('resize', func),
+        };
+    }
+    else {
+        const observer = new ResizeObserver(func);
+        return {
+            observe: () => observer.observe(element),
+            unobserve: () => observer.unobserve(element),
+        };
+    }
+}

package/libs/src/CameraMovementPlugin/CameraMovementPlugin.d.ts

@@ -0,0 +1,7 @@
+import type { FivePlugin } from '@realsee/five';
+import { CameraMovementPluginExportType, CameraMovementPluginParameterType } from './typing';
+/**
+ * **运镜插件** 模拟类似于电影运镜效果。
+ */
+export declare const CameraMovementPlugin: FivePlugin<CameraMovementPluginParameterType, CameraMovementPluginExportType>;
+export default CameraMovementPlugin;