@realsee/dnalogel 2.0.0-alpha.1 → 2.0.0-alpha.12

package/libs/PanoSpatialTagPlugin/index.js

@@ -0,0 +1,411 @@
+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_ORIGIN_Y = 1.4;
+const RAY_TOLERANT_DISTANCE = 0.01;
+const BLUR_IMAGE_URL = 'https://vrlab-image4.ljcdn.com/release/web/PanoSpatialTagPlugin__blur.png';
+const MIN_DISTANCE = 1.2;
+const MAX_DISTANCE = 3.5;
+/**
+ * 空间游走标签插件
+ */
+export const PanoSpatialTagPlugin = (five, params) => {
+    let wrapper = params?.container;
+    const wait = params?.wait ?? 200;
+    const maxNumberOnScreen = params?.maxNumberOnScreen ?? 3;
+    const minRad = params?.minRad ?? Math.PI / 4;
+    const nearTolerance = params?.nearTolerance ?? 100;
+    const upsideHeight = params?.upsideHeight ?? 1.6;
+    // 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(RAY_ORIGIN_Y).distanceTo(tag.position);
+            if (distance < MIN_DISTANCE || distance > MAX_DISTANCE)
+                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) / MAX_DISTANCE,
+                    lineWidthZoom: 0.38 * (0.01 + camera.position.distanceTo(tag.position) / MAX_DISTANCE),
+                    destroying: tag.destroying,
+                });
+            }
+            else {
+                tag.app.$set({
+                    lineWidthZoom: 0.38 * (0.01 + camera.position.distanceTo(tag.position) / MAX_DISTANCE),
+                    lineHeightZoom: 0.4 + (camera.position.distanceTo(tag.position) - MIN_DISTANCE) / MAX_DISTANCE * 0.6,
+                    contentZoom: 0.1 + camera.position.distanceTo(tag.position) / MAX_DISTANCE,
+                });
+            }
+        });
+        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(RAY_ORIGIN_Y).distanceTo(point.position);
+            if (distance < MIN_DISTANCE || distance > MAX_DISTANCE)
+                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(RAY_ORIGIN_Y), point.position.clone().sub(camera.position.clone().setY(RAY_ORIGIN_Y)).normalize(), 0, point.distance + RAY_TOLERANT_DISTANCE);
+            const [intersect] = five.model.intersectRaycaster(raycaster);
+            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) / MAX_DISTANCE),
+                        lineHeightZoom: 0.4 + (camera.position.distanceTo(position) - MIN_DISTANCE) / MAX_DISTANCE * 0.6,
+                        contentZoom: 0.1 + camera.position.distanceTo(position) / MAX_DISTANCE,
+                        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 => {
+            return {
+                id: point.id,
+                position: new THREE.Vector3().fromArray(point.position),
+                normal: new THREE.Vector3().fromArray(point.normal),
+                replacement: point.replacement ?? {},
+                weight: point.weight ?? -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;
+    };
+    /** 标签启用
+    * 启用插件并重新计算展示标签
+    */
+    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 dispose = () => {
+        blurImage = null;
+        css3DRender.disposeAll();
+        origins.$destroy();
+        state.tags.forEach(tag => {
+            tag.app.$destroy();
+            tag = null;
+        });
+        state.origins = [];
+        state.tags = [];
+        five.off('panoWillArrive', onPanoWillArrive);
+        five.off('panoArrived', onPanoArrived);
+        five.off('modeChange', onModeChange);
+        five.off('cameraUpdate', onCameraUpdate);
+    };
+    if (five?.model?.loaded) {
+        if (!wrapper)
+            wrapper = five.getElement().parentElement;
+        wrapper.appendChild(container);
+        state.forbidden = false;
+        updateTags();
+        five.on('panoWillArrive', onPanoWillArrive);
+        five.on('panoArrived', onPanoArrived);
+        five.on('modeChange', onModeChange);
+        five.on('cameraUpdate', onCameraUpdate);
+    }
+    else {
+        five.once('modelBvhLoaded', () => {
+            if (!wrapper)
+                wrapper = five.getElement().parentElement;
+            wrapper.appendChild(container);
+            state.forbidden = false;
+            updateTags();
+            five.on('panoWillArrive', onPanoWillArrive);
+            five.on('panoArrived', onPanoArrived);
+            five.on('modeChange', onModeChange);
+            five.on('cameraUpdate', onCameraUpdate);
+        });
+    }
+    five.on('dispose', dispose);
+    return {
+        load,
+        unfoldAll,
+        foldAll,
+        unfold,
+        fold,
+        enable,
+        disable,
+        hooks,
+        dispose,
+    };
+};
+export default PanoSpatialTagPlugin;

package/libs/PanoSpatialTagPlugin/store.d.ts

@@ -0,0 +1 @@
+export declare const currentTarget: import("svelte/store").Writable<any>;

package/libs/PanoSpatialTagPlugin/store.js

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

package/libs/PanoSpatialTagPlugin/style.d.ts

@@ -0,0 +1 @@
+export declare const pluginStyle: Partial<CSSStyleDeclaration>;

package/libs/PanoSpatialTagPlugin/style.js

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

package/libs/PanoSpatialTagPlugin/typings.d.ts

@@ -0,0 +1,40 @@
+import * as THREE from 'three';
+export declare type PanoSpatialTagPluginId = string | number;
+export interface PanoSpatialTagPluginContentReplacement {
+    [key: string]: string;
+}
+interface PanoSpatialTagPluginAppData {
+    replacement: PanoSpatialTagPluginContentReplacement;
+    weight?: number;
+}
+export interface PanoSpatialTagPluginDataElement extends PanoSpatialTagPluginAppData {
+    id: PanoSpatialTagPluginId;
+    position: number[];
+    normal: number[];
+}
+export interface PanoSpatialTagPluginTagElement {
+    id: PanoSpatialTagPluginId;
+    position: THREE.Vector3;
+    normal: THREE.Vector3;
+    app: any;
+    destroying?: boolean;
+}
+export interface PanoSpatialTagPluginOriginElement {
+    id: PanoSpatialTagPluginId;
+    front: boolean;
+    left: number;
+    top: number;
+    destroying?: boolean;
+}
+export interface PanoSpatialTagPluginContentEvent {
+    [className: string]: (id: PanoSpatialTagPluginId) => any;
+}
+export interface PanoSpatialTagPluginPointElement {
+    id: PanoSpatialTagPluginId;
+    position: THREE.Vector3;
+    normal: THREE.Vector3;
+    replacement: PanoSpatialTagPluginContentReplacement;
+    weight: number;
+    distance?: number;
+}
+export {};

package/libs/PanoSpatialTagPlugin/typings.js

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

package/libs/floorplan/Components/BaseImage.js

@@ -0,0 +1,217 @@
+/* generated by Svelte v3.47.0 */
+import {
+	SvelteComponent,
+	append_styles,
+	attr,
+	check_outros,
+	create_component,
+	destroy_component,
+	detach,
+	element,
+	group_outros,
+	init,
+	insert,
+	mount_component,
+	safe_not_equal,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+import NormalImage from './Normalmage';
+import SvgImage from './SvgImage';
+
+function add_css(target) {
+	append_styles(target, "svelte-126ja8e", ".floorplan-plugin__base-image.svelte-126ja8e{position:absolute;z-index:10;width:100%;height:100%;pointer-events:none}");
+}
+
+// (12:22) 
+function create_if_block_1(ctx) {
+	let normalimage;
+	let current;
+	normalimage = new NormalImage({ props: { url: /*imageData*/ ctx[1].url } });
+
+	return {
+		c() {
+			create_component(normalimage.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(normalimage, target, anchor);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const normalimage_changes = {};
+			if (dirty & /*imageData*/ 2) normalimage_changes.url = /*imageData*/ ctx[1].url;
+			normalimage.$set(normalimage_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(normalimage.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(normalimage.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(normalimage, detaching);
+		}
+	};
+}
+
+// (10:2) {#if svgContent}
+function create_if_block(ctx) {
+	let svgimage;
+	let current;
+
+	svgimage = new SvgImage({
+			props: { content: /*svgContent*/ ctx[0] }
+		});
+
+	return {
+		c() {
+			create_component(svgimage.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(svgimage, target, anchor);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const svgimage_changes = {};
+			if (dirty & /*svgContent*/ 1) svgimage_changes.content = /*svgContent*/ ctx[0];
+			svgimage.$set(svgimage_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(svgimage.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(svgimage.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(svgimage, detaching);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div;
+	let current_block_type_index;
+	let if_block;
+	let current;
+	const if_block_creators = [create_if_block, create_if_block_1];
+	const if_blocks = [];
+
+	function select_block_type(ctx, dirty) {
+		if (/*svgContent*/ ctx[0]) return 0;
+		if (/*imageData*/ ctx[1]) return 1;
+		return -1;
+	}
+
+	if (~(current_block_type_index = select_block_type(ctx, -1))) {
+		if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+	}
+
+	return {
+		c() {
+			div = element("div");
+			if (if_block) if_block.c();
+			attr(div, "class", "floorplan-plugin__base-image svelte-126ja8e");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+
+			if (~current_block_type_index) {
+				if_blocks[current_block_type_index].m(div, null);
+			}
+
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			let previous_block_index = current_block_type_index;
+			current_block_type_index = select_block_type(ctx, dirty);
+
+			if (current_block_type_index === previous_block_index) {
+				if (~current_block_type_index) {
+					if_blocks[current_block_type_index].p(ctx, dirty);
+				}
+			} else {
+				if (if_block) {
+					group_outros();
+
+					transition_out(if_blocks[previous_block_index], 1, 1, () => {
+						if_blocks[previous_block_index] = null;
+					});
+
+					check_outros();
+				}
+
+				if (~current_block_type_index) {
+					if_block = if_blocks[current_block_type_index];
+
+					if (!if_block) {
+						if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+						if_block.c();
+					} else {
+						if_block.p(ctx, dirty);
+					}
+
+					transition_in(if_block, 1);
+					if_block.m(div, null);
+				} else {
+					if_block = null;
+				}
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(if_block);
+			current = true;
+		},
+		o(local) {
+			transition_out(if_block);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+
+			if (~current_block_type_index) {
+				if_blocks[current_block_type_index].d();
+			}
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let imageData;
+	let svgContent;
+	let { floorIndex } = $$props;
+	let { floorplanData } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('floorIndex' in $$props) $$invalidate(2, floorIndex = $$props.floorIndex);
+		if ('floorplanData' in $$props) $$invalidate(3, floorplanData = $$props.floorplanData);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 12) {
+			$: $$invalidate(1, imageData = floorplanData.outlines[floorIndex]);
+		}
+
+		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 12) {
+			$: $$invalidate(0, svgContent = floorplanData.outlines?.[floorIndex]?.svgContent);
+		}
+	};
+
+	return [svgContent, imageData, floorIndex, floorplanData];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { floorIndex: 2, floorplanData: 3 }, add_css);
+	}
+}
+
+export default Component;