@realsee/dnalogel 2.0.0-alpha.44 → 2.0.0-alpha.45

package/libs/src/PanoRulerPlugin/style.js

@@ -1,88 +0,0 @@
-const PanoRulerStyle = `<style type="text/css">
-.PanoRulerPlugin-rule-line {
-  position: absolute;
-  transform-origin: left center;
-  width: 0;
-  height: 0.0625rem;
-}
-
-.PanoRulerPlugin-rule-line::after {
-  content: '';
-  position: absolute;
-  left: -0.125rem;
-  top: -0.1rem;
-  width: 0.25rem;
-  height: 0.25rem;
-  border-radius: 50%;
-  background: #FFFFFF;
-  z-index: 1;
-  animation: viewport-rule-point 0.1s 1s;
-  animation-fill-mode: both;
-}
-
-.PanoRulerPlugin-rule-line::before {
-  content: '';
-  position: absolute;
-  right: -0.125rem;
-  top: -0.1rem;
-  width: 0.25rem;
-  height: 0.25rem;
-  border-radius: 50%;
-  background: #FFFFFF;
-  animation: viewport-rule-point 0.1s 1.5s;
-  animation-fill-mode: both;
-}
-
-.PanoRulerPlugin-rule-line em {
-  background: #fff;
-  display: block;
-  height: 100%;
-  animation: viewport-rule-line 0.5s ease 1s;
-  animation-fill-mode: both;
-  box-shadow: 0 0 0.25rem rgb(0 0 0 / 40%);
-}
-
-.PanoRulerPlugin-rule-label {
-  position: absolute;
-  width: 0;
-  height: 0;
-  top: 0.0625rem;
-}
-
-.PanoRulerPlugin-rule-label-name {
-  position: absolute;
-  padding: 0.1875rem 0.375rem;
-  background: rgba(195,195,195,0.30);
-  backdrop-filter: blur(0.25rem);
-  -webkit-backdrop-filter: blur(0.25rem);
-  border-radius: 6.25rem;
-  border: 0.0625rem solid rgba(255,255,255,0.6);
-  white-space: nowrap;
-  overflow: hidden;
-  color: #FFFFFF;
-  font-weight: 500;
-  font-size: 0.75rem;
-  line-height: 1;
-  -webkit-animation: viewport-rule-label 0.25s ease 1s;
-  animation: viewport-rule-label 0.25s ease 1s;
-  animation-fill-mode: both;
-  box-shadow: inset 0 0 0.625rem 0 rgba(255,255,255,0.30);
-}
-
-@keyframes viewport-rule-line {
-  0% { width: 0% }
-  100% { width: 100% }
-}
-
-@keyframes viewport-rule-label {
-  0% { opacity: 0; transform: scaleX(0); }
-  100% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
-}
-
-@keyframes viewport-rule-point {
-  0% { transform: scaleX(0); }
-  100% { transform: scaleX(1); }
-}
-</style>
-`;
-export default PanoRulerStyle;

package/libs/src/PanoRulerPlugin/typings.js

@@ -1 +0,0 @@
-export {};

package/libs/src/PanoRulerProPlugin/Controller.js

@@ -1,110 +0,0 @@
-import RulerItems from './RulerItems';
-export default class Controller {
-    constructor(five, params) {
-        var _a, _b;
-        Object.defineProperty(this, "five", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "container", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: document.createElement('div')
-        });
-        Object.defineProperty(this, "panoRulerProData", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "rulerItems", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "state", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {
-                enabled: false,
-                loaded: false,
-                options: {
-                    className: '',
-                    distanceText: (distance) => `${distance.toFixed(1)}m`,
-                },
-            }
-        });
-        this.five = five;
-        this.container.classList.add('panoRulerProPlugin-container');
-        this.container.setAttribute('style', `position: absolute;pointer-events: none;width: 100%;height: 100%;left: 0;top: 0;overflow: hidden;`);
-        if (params) {
-            if (params.data) {
-                this.load(params.data);
-            }
-            this.state.options = Object.assign(Object.assign({}, this.state.options), (params.options || {}));
-            if ((_a = params.options) === null || _a === void 0 ? void 0 : _a.className)
-                this.container.classList.add((_b = params.options) === null || _b === void 0 ? void 0 : _b.className);
-        }
-        this.five.once('modelLoaded', async () => {
-            var _a, _b;
-            (_b = (_a = this.five.getElement()) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.append(this.container);
-        });
-        this.five.once('dispose', () => this.dispose());
-    }
-    async load(serverData) {
-        if (!this.five.work)
-            return;
-        const data = serverData.data;
-        if (!data)
-            throw new Error('标尺数据依赖不齐全！');
-        this.panoRulerProData = data;
-        this.state.loaded = true;
-    }
-    enable() {
-        if (!this.state.loaded)
-            return false;
-        if (this.state.enabled)
-            return true;
-        this.state.enabled = true;
-        this.render();
-        return true;
-    }
-    disable() {
-        if (!this.state.enabled)
-            return true;
-        this.state.enabled = false;
-        this.render();
-        return true;
-    }
-    async render() {
-        var _a;
-        if (this.state.enabled) {
-            if (!this.panoRulerProData || !this.container)
-                return;
-            this.rulerItems = new RulerItems({
-                target: this.container,
-                props: {
-                    five: this.five,
-                    rulerDatas: this.panoRulerProData,
-                    options: this.state.options,
-                },
-            });
-        }
-        else {
-            (_a = this.rulerItems) === null || _a === void 0 ? void 0 : _a.$destroy();
-            this.rulerItems = undefined;
-        }
-    }
-    dispose() {
-        if (this.container) {
-            this.rulerItems.$destroy();
-            this.rulerItems = undefined;
-        }
-        this.container.remove();
-    }
-}

package/libs/src/PanoRulerProPlugin/index.js

@@ -1,8 +0,0 @@
-import Controller from './Controller';
-/**
- * 全景标尺插件
- */
-export const PanoRulerProPlugin = (five, params) => {
-    return new Controller(five, params);
-};
-export default PanoRulerProPlugin;

package/libs/src/PanoRulerProPlugin/typings.js

@@ -1 +0,0 @@
-export {};

package/libs/src/PanoSpatialTagPlugin/Plugin.js

@@ -1,426 +0,0 @@
-import * as THREE from 'three';
-import { Five, Subscribe } from '@realsee/five';
-import CSS3DRenderPlugin from '../CSS3DRenderPlugin';
-import Origins from './Components/origins';
-import Tag from './Components/tag';
-import { pluginStyle } from './style';
-import render from '../shared-utils/tinyEJSrender';
-const MESH_SIZE = 0.001;
-const RAY_TOLERANT_DISTANCE = 0.01;
-const BLUR_IMAGE_URL = 'https://vrlab-image4.ljcdn.com/release/web/PanoSpatialTagPlugin__blur.png';
-/**
- * 空间游走标签插件
- */
-export const PanoSpatialTagPlugin = (five, params) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    let wrapper = params === null || params === void 0 ? void 0 : params.container;
-    let centerY = 1.4;
-    const wait = (_a = params === null || params === void 0 ? void 0 : params.wait) !== null && _a !== void 0 ? _a : 200;
-    const maxNumberOnScreen = (_b = params === null || params === void 0 ? void 0 : params.maxNumberOnScreen) !== null && _b !== void 0 ? _b : 3;
-    const minRad = (_c = params === null || params === void 0 ? void 0 : params.minRad) !== null && _c !== void 0 ? _c : Math.PI / 4;
-    const nearTolerance = (_d = params === null || params === void 0 ? void 0 : params.nearTolerance) !== null && _d !== void 0 ? _d : 100;
-    const upsideHeight = (_e = params === null || params === void 0 ? void 0 : params.upsideHeight) !== null && _e !== void 0 ? _e : 1.6;
-    const minDistance = (_f = params === null || params === void 0 ? void 0 : params.minDistance) !== null && _f !== void 0 ? _f : 1.2;
-    const maxDistance = (_g = params === null || params === void 0 ? void 0 : params.maxDistance) !== null && _g !== void 0 ? _g : 3.5;
-    // const foldPercent = params?.foldPercent ?? 20
-    const css3DRender = CSS3DRenderPlugin(five);
-    const container = document.createElement('div');
-    container.classList.add('PanoSpatialTagPlugin');
-    Object.assign(container.style, pluginStyle);
-    const hooks = new Subscribe();
-    let blurImage = new Image();
-    blurImage.src = BLUR_IMAGE_URL;
-    const state = {
-        points: [],
-        origins: [],
-        tags: [],
-        template: '',
-        events: {},
-        render,
-        folded: false,
-        enabled: true,
-        forbidden: true,
-    };
-    const origins = new Origins({
-        target: container,
-        props: { origins: state.origins },
-    });
-    const onCameraUpdate = (pose, userAction) => {
-        updateOrigins();
-        if (userAction) {
-            updateTags();
-            // state.tags.forEach(tag => {
-            //   const mouse = tag.position.clone().project(five.camera)
-            //   const top = ( - mouse.y + 1 ) / 2 * 100
-            // })
-        }
-    };
-    const onPanoArrived = () => {
-        if (state.forbidden) {
-            state.forbidden = false;
-            updateTags();
-        }
-    };
-    const onPanoWillArrive = (pano, pose) => {
-        if (state.tags.length === 0)
-            return;
-        const rotateRad = pose.longitude - five.state.longitude;
-        const camera = five.camera.clone();
-        camera.position.copy(pose.offset);
-        camera.rotateOnWorldAxis(new THREE.Vector3(0, 1, 0), rotateRad);
-        camera.updateProjectionMatrix();
-        camera.updateMatrixWorld(true);
-        const frustum = new THREE.Frustum();
-        const projScreenMatrix = new THREE.Matrix4();
-        projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
-        frustum.setFromProjectionMatrix(projScreenMatrix);
-        state.tags.forEach(tag => {
-            const distance = camera.position.clone().setY(centerY).distanceTo(tag.position);
-            if (distance < minDistance || distance > maxDistance)
-                return tag.destroying = true;
-            if (!frustum.containsPoint(tag.position))
-                return tag.destroying = true;
-            const v = tag.position.clone().sub(camera.position).setY(0);
-            if (v.angleTo(tag.normal) > Math.PI / 2 - minRad &&
-                v.angleTo(tag.normal) < Math.PI / 2 + minRad)
-                return tag.destroying = true;
-        });
-        state.tags.forEach(tag => {
-            if (tag.destroying) {
-                tag.app.$set({
-                    contentZoom: 0.1 + camera.position.distanceTo(tag.position) / maxDistance,
-                    lineWidthZoom: 0.38 * (0.01 + camera.position.distanceTo(tag.position) / maxDistance),
-                    destroying: tag.destroying,
-                });
-            }
-            else {
-                tag.app.$set({
-                    lineWidthZoom: 0.38 * (0.01 + camera.position.distanceTo(tag.position) / maxDistance),
-                    lineHeightZoom: 0.4 + (camera.position.distanceTo(tag.position) - minDistance) / maxDistance * 0.6,
-                    contentZoom: 0.1 + camera.position.distanceTo(tag.position) / maxDistance,
-                });
-            }
-        });
-        setTimeout(() => {
-            state.tags.forEach(tag => {
-                if (tag.destroying) {
-                    tag.app.$destroy();
-                    tag = null;
-                }
-            });
-            state.tags = state.tags.filter(tag => !tag.destroying);
-            updateOrigins();
-        }, 1900);
-    };
-    const onModeChange = (mode) => {
-        if (mode !== Five.Mode.Panorama && !state.forbidden) {
-            origins.$set({ origins: [] });
-            state.tags.forEach(tag => {
-                tag.app.$destroy();
-                tag = null;
-            });
-            state.origins = [];
-            state.tags = [];
-            state.forbidden = true;
-        }
-    };
-    const updateOrigins = () => {
-        if (state.forbidden || !state.enabled)
-            return;
-        const camera = five.camera;
-        const direction = camera.getWorldDirection(new THREE.Vector3());
-        state.origins = state.tags.map(tag => {
-            const mouse = tag.position.clone().project(camera);
-            const front = tag.position.clone().sub(camera.position).setY(0)
-                .angleTo(direction.setY(0)) < Math.PI / 2;
-            return {
-                id: tag.id,
-                front,
-                left: (mouse.x + 1) / 2 * 100,
-                top: (-mouse.y + 1) / 2 * 100,
-                destroying: tag.destroying,
-            };
-        });
-        origins.$set({ origins: state.origins });
-    };
-    const updateTags = () => {
-        if (state.forbidden || !state.enabled)
-            return;
-        if (state.timeoutId)
-            clearTimeout(state.timeoutId);
-        state.timeoutId = setTimeout(() => {
-            state.timeoutId = undefined;
-            const newTags = getNewTags();
-            if (newTags.length) {
-                state.tags = state.tags.concat(newTags);
-                updateOrigins();
-            }
-        }, wait);
-    };
-    const getNewTags = () => {
-        const { clientWidth, clientHeight } = five.getElement();
-        const newTags = [];
-        const camera = five.camera;
-        const frustum = new THREE.Frustum();
-        const projScreenMatrix = new THREE.Matrix4();
-        const direction = camera.getWorldDirection(new THREE.Vector3());
-        projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
-        frustum.setFromProjectionMatrix(projScreenMatrix);
-        const frontTagLength = state.tags.filter(tag => frustum.containsPoint(tag.position) && !tag.destroying).length;
-        const points = state.points.reduce((result, point) => {
-            if (state.tags.find(tag => point.id === tag.id && !tag.destroying))
-                return result;
-            const distance = camera.position.clone().setY(centerY).distanceTo(point.position);
-            if (distance < minDistance || distance > maxDistance)
-                return result;
-            if (!frustum.containsPoint(point.position))
-                return result;
-            const v = point.position.clone().sub(camera.position).setY(0);
-            if (v.angleTo(point.normal) > Math.PI / 2 - minRad &&
-                v.angleTo(point.normal) < Math.PI / 2 + minRad)
-                return result;
-            const mouse = point.position.clone().project(camera);
-            if (!state.tags.every(tag => {
-                if (tag.position.clone().sub(camera.position).setY(0)
-                    .angleTo(direction.setY(0)) > Math.PI / 2)
-                    return true;
-                const _mouse = tag.position.clone().project(camera);
-                return Math.sqrt(Math.pow((mouse.x - _mouse.x) / 2 * clientWidth, 2) +
-                    Math.pow((mouse.y - _mouse.y) / 2 * clientHeight, 2)) > nearTolerance;
-            }))
-                return result;
-            const newPoint = {
-                id: point.id,
-                position: point.position,
-                normal: point.normal,
-                replacement: point.replacement,
-                weight: point.weight,
-                distance,
-            };
-            let index;
-            for (let i = 0, l = result.length; i < l; i++) {
-                const anotherPoint = result[i];
-                if (newPoint.weight > anotherPoint.weight) {
-                    index = i;
-                    break;
-                }
-                if (newPoint.distance < anotherPoint.distance) {
-                    index = i;
-                    break;
-                }
-            }
-            if (index !== undefined)
-                result.splice(index, 0, newPoint);
-            else
-                result.push(newPoint);
-            return result;
-        }, []);
-        for (let i = 0, l = points.length; i < l; i++) {
-            if (frontTagLength + newTags.length >= maxNumberOnScreen)
-                break;
-            const point = points[i];
-            if (newTags.find(tag => point.id === tag.id))
-                continue;
-            const mouse = point.position.clone().project(camera);
-            if (!state.tags.concat(newTags).every(tag => {
-                if (tag.position.clone().sub(camera.position).setY(0)
-                    .angleTo(direction.setY(0)) > Math.PI / 2)
-                    return true;
-                const _mouse = tag.position.clone().project(camera);
-                return Math.sqrt(Math.pow((mouse.x - _mouse.x) / 2 * clientWidth, 2) +
-                    Math.pow((mouse.y - _mouse.y) / 2 * clientHeight, 2)) > nearTolerance;
-            }))
-                continue;
-            const raycaster = new THREE.Raycaster(camera.position.clone().setY(centerY), point.position.clone().sub(camera.position.clone().setY(centerY)).normalize(), 0, point.distance + RAY_TOLERANT_DISTANCE);
-            const [intersect] = state.intersectObjects ?
-                raycaster.intersectObjects(state.intersectObjects, true) :
-                (five.model.bvhs.loaded ?
-                    five.model.intersectRaycaster(raycaster) :
-                    raycaster.intersectObjects(five.model.children, true));
-            if (!intersect)
-                continue;
-            if (point.distance - intersect.distance < RAY_TOLERANT_DISTANCE) {
-                const { position, normal, id, replacement } = point;
-                const plane = new THREE.Plane().setFromNormalAndCoplanarPoint(normal, position);
-                const right = position.clone().sub(camera.position)
-                    .cross(new THREE.Vector3(0, 1, 0)).setLength(MESH_SIZE);
-                const square = [
-                    position.clone(),
-                    position.clone().add(right),
-                    position.clone().add(new THREE.Vector3(0, MESH_SIZE, 0)).add(right),
-                    position.clone().add(new THREE.Vector3(0, MESH_SIZE, 0)),
-                ].map(v => plane.projectPoint(v, new THREE.Vector3()));
-                const { container, dispose } = css3DRender.create3DDomContainer(square) || {};
-                const app = new Tag({
-                    target: container,
-                    props: {
-                        id,
-                        content: state.render(state.template, replacement),
-                        lineWidthZoom: 0.38 * (0.01 + camera.position.distanceTo(position) / maxDistance),
-                        lineHeightZoom: 0.4 + (camera.position.distanceTo(position) - minDistance) / maxDistance * 0.6,
-                        contentZoom: 0.1 + camera.position.distanceTo(position) / maxDistance,
-                        upsideDown: position.y > upsideHeight,
-                        folded: state.folded,
-                        events: state.events,
-                        hooks,
-                        dispose,
-                    },
-                });
-                newTags.push({
-                    position,
-                    normal,
-                    id,
-                    app,
-                });
-            }
-        }
-        return newTags;
-    };
-    /** 标签数据加载
-     * @param data.points {Array} 标签数据
-     * @param data.enabled {Boolean} 插件是否启用
-     * @param data.folded {Boolean} 标签是否默认展开
-     */
-    const load = (data) => {
-        state.points = data.points.map(point => {
-            var _a, _b;
-            return {
-                id: point.id,
-                position: new THREE.Vector3().fromArray(point.position),
-                normal: new THREE.Vector3().fromArray(point.normal),
-                replacement: (_a = point.replacement) !== null && _a !== void 0 ? _a : {},
-                weight: (_b = point.weight) !== null && _b !== void 0 ? _b : -1,
-            };
-        });
-        if (data.render)
-            state.render = data.render;
-        if (data.template)
-            state.template = data.template;
-        if (data.events)
-            state.events = data.events;
-        if (data.enabled === false)
-            state.enabled = data.enabled;
-        if (data.folded === true)
-            state.folded = data.folded;
-    };
-    /** 设置射线碰撞检测objects
-     *
-     */
-    const setIntersectObjects = (objects) => {
-        state.intersectObjects = objects;
-        updateTags();
-    };
-    /** 标签启用
-     * 启用插件并重新计算展示标签
-     */
-    const enable = () => {
-        state.enabled = true;
-        updateTags();
-    };
-    /** 插件禁用
-     * 1. 禁用同时会清除已展示的标签
-     * 2. 再次启用时会重新计算展示标签
-     */
-    const disable = () => {
-        state.enabled = false;
-        origins.$set({ origins: [] });
-        state.tags.forEach(tag => {
-            tag.app.$destroy();
-            tag = null;
-        });
-        state.origins = [];
-        state.tags = [];
-    };
-    /** 展开所有标签
-     * 1. 展开所有收起的标签
-     * 2. 新标签会默认展开
-     */
-    const unfoldAll = () => {
-        state.folded = false;
-        state.tags.forEach(tag => {
-            tag.app.$set({ folded: state.folded });
-        });
-    };
-    /** 收起所有标签
-     * 1. 收起所有展开的标签
-     * 2. 新标签会默认收起
-     */
-    const foldAll = () => {
-        state.folded = true;
-        state.tags.forEach(tag => {
-            tag.app.$set({ folded: state.folded });
-        });
-    };
-    /** 展开单个标签
-     * @param id {Number | String} 标签ID
-     */
-    const unfold = (id) => {
-        state.tags.forEach(tag => {
-            if (tag.id === id)
-                tag.app.$set({ folded: false });
-        });
-    };
-    /** 收起单个标签
-     * @param id {Number | String} 标签ID
-     */
-    const fold = (id) => {
-        state.tags.forEach(tag => {
-            if (tag.id === id)
-                tag.app.$set({ folded: true });
-        });
-    };
-    const onResize = () => {
-        five.once('renderFrame', updateOrigins);
-    };
-    const onModelLoaded = () => {
-        if (!wrapper)
-            wrapper = five.getElement().parentElement;
-        if (wrapper)
-            wrapper.appendChild(container);
-        state.forbidden = false;
-        centerY = five.model.bounding.getCenter(new THREE.Vector3()).y;
-        updateTags();
-        five.on('panoWillArrive', onPanoWillArrive);
-        five.on('panoArrived', onPanoArrived);
-        five.on('modeChange', onModeChange);
-        five.on('cameraUpdate', onCameraUpdate);
-    };
-    const dispose = () => {
-        blurImage = null;
-        css3DRender.disposeAll();
-        origins.$destroy();
-        state.tags.forEach(tag => {
-            tag.app.$destroy();
-            tag = null;
-        });
-        state.origins = [];
-        state.tags = [];
-        five.off('modelLoaded', onModelLoaded);
-        five.off('renderFrame', updateOrigins);
-        five.off('panoWillArrive', onPanoWillArrive);
-        five.off('panoArrived', onPanoArrived);
-        five.off('modeChange', onModeChange);
-        five.off('cameraUpdate', onCameraUpdate);
-        five.off('dispose', dispose);
-        window.removeEventListener('resize', onResize, false);
-    };
-    window.addEventListener('resize', onResize, false);
-    if ((_h = five === null || five === void 0 ? void 0 : five.model) === null || _h === void 0 ? void 0 : _h.loaded)
-        onModelLoaded();
-    else
-        five.once('modelLoaded', onModelLoaded);
-    five.on('dispose', dispose);
-    return {
-        load,
-        setIntersectObjects,
-        unfoldAll,
-        foldAll,
-        unfold,
-        fold,
-        enable,
-        disable,
-        hooks,
-        dispose,
-    };
-};
-export default PanoSpatialTagPlugin;

package/libs/src/PanoSpatialTagPlugin/index.js

@@ -1,5 +0,0 @@
-import PanoSpatialTagPlugin from './Plugin';
-export { PanoSpatialTagPlugin };
-export default PanoSpatialTagPlugin;
-// 类型导出
-export * from './typings';

package/libs/src/PanoSpatialTagPlugin/store.js

@@ -1,2 +0,0 @@
-import { writable } from 'svelte/store';
-export const currentTarget = writable(null);

package/libs/src/PanoSpatialTagPlugin/style.js

@@ -1,8 +0,0 @@
-export const pluginStyle = {
-    position: 'absolute',
-    top: '0px',
-    left: '0px',
-    width: '100%',
-    height: '100%',
-    pointerEvents: 'none',
-};

package/libs/src/PanoSpatialTagPlugin/typings.js

@@ -1 +0,0 @@
-export {};