@realsee/dnalogel 2.0.0-alpha.7 → 2.0.0-beta.36

package/libs/PanoRulerPlugin/index.js

@@ -1,398 +1,3 @@
-import { Five } from '@realsee/five';
-import { Raycaster, Vector3 } from 'three';
-import { intersectionOfLine } from '../shared-utils/math/planimetry';
-import { nextFrame } from '../shared-utils/nextFrame';
-import throttle from '../shared-utils/throttle';
-import PanoRulerStyle from './style';
-const getDistance = (p1, p2) => {
-    return Math.sqrt(Math.pow(p1.z - p2.z, 2) + Math.pow(p1.x - p2.x, 2));
-};
-const getRoomHeightInfo = (roomInfo, five) => {
-    const roomHeightInfo = {};
-    const raycaster = new Raycaster();
-    const work = five.work;
-    if (!work)
-        return roomHeightInfo;
-    const observers = roomInfo.observers;
-    work.observers.forEach((observer, index) => {
-        const { standingPosition: position } = observer;
-        const point = new Vector3(position.x, position.y, position.z);
-        raycaster.set(point, new Vector3(0, 1, 0));
-        const [intersection] = five.model.intersectRaycaster(raycaster);
-        // 虚景 VR 没有天花板碰撞射线无相交，默认固定层高2.7m
-        const verticalY = intersection ? intersection.point.y : 2.7;
-        const id = observers[index];
-        if (!id)
-            return roomHeightInfo;
-        const observerRoomName = roomInfo.rooms[id].name;
-        if (roomHeightInfo[observerRoomName] === undefined) {
-            roomHeightInfo[observerRoomName] = {
-                __roof: [verticalY],
-                __floor: [point.y],
-            };
-        }
-        else {
-            roomHeightInfo[observerRoomName].__roof.push(verticalY);
-            roomHeightInfo[observerRoomName].__floor.push(point.y);
-        }
-    });
-    // 地板高度求中位数,屋顶高度取最高
-    for (const roomName in roomHeightInfo) {
-        const room = roomHeightInfo[roomName];
-        room.__roof.sort();
-        room.__floor.sort();
-        room.floor = room.__floor[~~(room.__floor.length / 2)];
-        room.roof = room.__roof[room.__roof.length - 1];
-    }
-    return roomHeightInfo;
-};
-/**
- * 全景标尺插件
- */
-export const PanoRulerPlugin = (five, params) => {
-    const state = {
-        enable: false,
-        loaded: false,
-        options: params.options || {
-            distanceText: (distance) => `${distance.toFixed(1)}m`,
-        },
-    };
-    const tpl = (name, distance) => {
-        const domStr = `
-      <div class="PanoRulerPlugin-rule-line">
-        <em></em>
-        <div class="PanoRulerPlugin-rule-label">
-          <div class="PanoRulerPlugin-rule-label-name">${state.options.distanceText(distance)}</div>
-        </div>
-      </div>
-    `;
-        const res = document.createElement('div');
-        res.setAttribute('class', 'PanoRulerPlugin-rule');
-        res.setAttribute('data-name', name);
-        res.setAttribute('style', 'display: none');
-        res.innerHTML = domStr;
-        return res;
-    };
-    const $rule = document.createElement('div');
-    $rule.setAttribute('style', `position: absolute;pointer-events: none;width: 100%;height: 100%;left: 0;top: 0;overflow: hidden;`);
-    // 添加标尺样式
-    const style = document.createElement('div');
-    style.innerHTML = PanoRulerStyle;
-    $rule.appendChild(style);
-    const __rule = {};
-    const _load = (roomInfo, roomRules) => {
-        if (state.loaded) {
-            throw new Error('标尺被重复初始化！');
-        }
-        const roomHeightInfo = getRoomHeightInfo(roomInfo, five);
-        const work = five.work;
-        if (!work)
-            return false;
-        for (const obKey in roomRules) {
-            const points = roomRules[obKey];
-            const { standingPosition: defaultPosition } = work.observers[0];
-            const roomPoints = points.map(({ x, z, observers }) => {
-                const pointRoomName = observers.length > 0 ? roomInfo.rooms[roomInfo.observers[observers[0]]].name : '';
-                const medianFloorHeight = roomHeightInfo[pointRoomName] ? roomHeightInfo[pointRoomName].floor : null;
-                let minDistance = Infinity;
-                let nearestPoint = {
-                    index: 0,
-                    x: defaultPosition.x,
-                    y: defaultPosition.y,
-                    z: defaultPosition.z,
-                };
-                observers.forEach((index) => {
-                    if (!work.observers[index])
-                        return;
-                    const { standingPosition: position } = work.observers[index];
-                    const observerPoint = {
-                        index,
-                        x: position.x,
-                        y: position.y,
-                        z: position.z,
-                    };
-                    const distance = getDistance({ x, z }, observerPoint);
-                    if (medianFloorHeight) {
-                        // 取最近点时排除高度与房间平均高度差大于0.3米的点
-                        if (distance < minDistance && Math.abs(observerPoint.y - medianFloorHeight) < 0.3) {
-                            minDistance = distance;
-                            nearestPoint = observerPoint;
-                        }
-                    }
-                    else {
-                        if (distance < minDistance) {
-                            minDistance = distance;
-                            nearestPoint = observerPoint;
-                        }
-                    }
-                });
-                const _origin = new Vector3(x, nearestPoint.y, z);
-                Object.assign(_origin, { observers });
-                const verticalY = roomHeightInfo[pointRoomName] ? roomHeightInfo[pointRoomName].roof : null;
-                const _vertical = !verticalY ? null : new Vector3(x, verticalY, z);
-                if (_vertical)
-                    Object.assign(_vertical, { observers });
-                const origin = _origin;
-                const vertical = _vertical;
-                return { origin, vertical };
-            });
-            __rule[obKey] = {
-                origins: roomPoints.map((roomPoint) => roomPoint.origin),
-                rules: [],
-            };
-            for (const { origin, vertical } of roomPoints) {
-                if (!vertical)
-                    continue;
-                const $element = tpl(obKey, origin.distanceTo(vertical));
-                $rule.append($element);
-                __rule[obKey].rules.push({ vertical: true, rule: [origin, vertical], $element });
-            }
-            for (let index = 0; index < roomPoints.length; index++) {
-                let nextIndex = index + 1;
-                if (nextIndex >= roomPoints.length)
-                    nextIndex = 0;
-                const { origin } = roomPoints[index];
-                const { origin: next } = roomPoints[nextIndex];
-                const $element = tpl(obKey, origin.distanceTo(next));
-                $rule.append($element);
-                __rule[obKey].rules.push({ vertical: false, rule: [origin, next], $element });
-            }
-        }
-        state.loaded = true;
-        return true;
-    };
-    const load = async (_roomInfo, _roomRules, options) => {
-        const roomInfo = _roomInfo || params.roomInfo;
-        const roomRules = _roomRules || params.roomRules;
-        if (!roomInfo || !roomRules) {
-            throw new Error('标尺数据依赖不齐全！');
-        }
-        state.options = Object.assign({}, state.options, options || {});
-        if (five.model.loaded) {
-            return _load(roomInfo, roomRules);
-        }
-        else {
-            return await new Promise((resolve) => five.once('modelLoaded', () => resolve(_load(roomInfo, roomRules))));
-        }
-    };
-    if (params.roomInfo && params.roomRules) {
-        load(params.roomInfo, params.roomRules);
-    }
-    const getRuleScreenIntr = (startPoint, endPoint, canvasWidth, canvasHeight) => {
-        const screenLines = [
-            [
-                { x: 0, y: 0 },
-                { x: canvasWidth, y: 0 },
-            ],
-            [
-                { x: 0, y: 0 },
-                { x: 0, y: canvasHeight },
-            ],
-            [
-                { x: canvasWidth, y: 0 },
-                { x: canvasWidth, y: canvasHeight },
-            ],
-            [
-                { x: 0, y: canvasHeight },
-                { x: canvasWidth, y: canvasHeight },
-            ],
-        ];
-        const intr = [];
-        for (let i = 0; i < screenLines.length; i++) {
-            const result = intersectionOfLine([startPoint, endPoint], [screenLines[i][0], screenLines[i][1]], true);
-            if (result)
-                intr.push(result);
-        }
-        if (intr.length === 0)
-            return false;
-        else {
-            return intr;
-        }
-    };
-    const freshRule = () => {
-        const element = five.getElement()?.parentElement;
-        if (!element)
-            return;
-        if (!state.loaded)
-            return;
-        if (Object.keys(__rule).length <= 0)
-            return;
-        const { panoIndex, camera, currentMode } = five;
-        if (panoIndex === undefined)
-            return;
-        let name;
-        for (const _name in __rule) {
-            if (_name.split(',').indexOf(panoIndex.toString()) >= 0)
-                name = _name;
-        }
-        if (!name)
-            return;
-        const cameraPosition = camera.position;
-        const cameraDirection = camera.getWorldDirection(new Vector3());
-        const width = element.clientWidth;
-        const height = element.clientHeight;
-        // 非全景模式下隐藏所有标尺
-        if (currentMode !== Five.Mode.Panorama) {
-            for (const _name in __rule) {
-                for (const { $element } of __rule[_name].rules) {
-                    $element.style.display = 'none';
-                }
-            }
-            return;
-        }
-        // 隐藏非当前点位的标尺
-        for (const _name in __rule) {
-            for (const { $element } of __rule[_name].rules) {
-                $element.style.display = _name === name ? 'block' : 'none';
-            }
-        }
-        const verticalLines = [];
-        // 可以看到的角度最小的拐点
-        const [visibleOrigin] = __rule[name].origins
-            .slice()
-            .filter((point) => point.observers.indexOf(panoIndex) >= 0)
-            .sort((pointA, pointB) => {
-            const angleA = pointA.clone().setY(0).sub(cameraPosition).normalize().angleTo(cameraDirection.clone().setY(0));
-            const angleB = pointB.clone().setY(0).sub(cameraPosition).normalize().angleTo(cameraDirection.clone().setY(0));
-            return angleA - angleB;
-        });
-        const shownNotVerticalRules = [];
-        for (const { rule, vertical, $element } of __rule[name].rules) {
-            const [start, end] = rule;
-            const $line = $element.querySelector('.PanoRulerPlugin-rule-line');
-            if (!$line)
-                return;
-            if (!visibleOrigin) {
-                $element.style.display = 'none';
-                continue;
-            }
-            if (start !== visibleOrigin && end !== visibleOrigin) {
-                $element.style.display = 'none';
-                continue;
-            }
-            if (start.distanceTo(end) < 0.5) {
-                $element.style.display = 'none';
-                continue;
-            }
-            if (start.observers.indexOf(panoIndex) === -1 || end.observers.indexOf(panoIndex) === -1) {
-                $element.style.display = 'none';
-                continue;
-            }
-            const startAngle = start.clone().sub(cameraPosition).normalize().angleTo(cameraDirection);
-            if (startAngle > Math.PI / 2) {
-                $element.style.display = 'none';
-                continue;
-            }
-            const endAngle = end.clone().sub(cameraPosition).normalize().angleTo(cameraDirection);
-            if (endAngle > Math.PI / 2) {
-                $element.style.display = 'none';
-                continue;
-            }
-            const ruleLength = start.distanceTo(end);
-            const midPoint = end.clone().sub(end.clone().sub(start).divide(new Vector3(2, 2, 2)));
-            const disFromCameraToMid = midPoint.distanceTo(cameraPosition);
-            if (disFromCameraToMid / ruleLength > 8) {
-                $element.style.display = 'none';
-                continue;
-            }
-            if (!vertical)
-                shownNotVerticalRules.push(rule);
-            if (vertical)
-                verticalLines.push({ $element, startAngle });
-            const mouseStart = start.clone().project(camera);
-            const startLeft = ((mouseStart.x + 1) / 2) * width;
-            const startTop = ((-mouseStart.y + 1) / 2) * height;
-            const mouseEnd = end.clone().project(camera);
-            const endLeft = ((mouseEnd.x + 1) / 2) * width;
-            const endTop = ((-mouseEnd.y + 1) / 2) * height;
-            const distance = Math.sqrt(Math.pow(endLeft - startLeft, 2) + Math.pow(endTop - startTop, 2));
-            let visibleLength = distance;
-            let labelOffset = 50;
-            const intr = getRuleScreenIntr({ x: ~~startLeft, y: ~~startTop }, {
-                x: ~~endLeft,
-                y: ~~endTop
-            }, width, height);
-            if (intr && intr.length === 1) {
-                if (visibleOrigin === start) {
-                    visibleLength = Math.sqrt(Math.pow(intr[0].x - startLeft, 2) + Math.pow(intr[0].y - startTop, 2));
-                    labelOffset = (visibleLength / distance) * 50;
-                }
-                else if (visibleOrigin === end) {
-                    visibleLength = Math.sqrt(Math.pow(intr[0].x - endLeft, 2) + Math.pow(intr[0].y - endTop, 2));
-                    labelOffset = 100 - (visibleLength / distance) * 50;
-                }
-            }
-            if (intr && intr.length === 2) {
-                const middlePoint = {
-                    x: (intr[0].x + intr[1].x) / 2,
-                    y: (intr[0].y + intr[1].y) / 2,
-                };
-                const distanceFromStart = Math.sqrt(Math.pow(middlePoint.x - startLeft, 2) + Math.pow(middlePoint.y - startTop, 2));
-                labelOffset = (distanceFromStart / distance) * 100;
-            }
-            const rad = Math.PI / 2 - Math.atan2(endLeft - startLeft, startTop - endTop);
-            const deg = (rad / Math.PI) * 180;
-            const $label = $line.querySelector('.PanoRulerPlugin-rule-label');
-            // 线的长度小于标签时或者标签与线两端点重合时隐藏,
-            const labelWidth = $label.children[0].clientWidth;
-            if (labelWidth >= distance ||
-                labelWidth / 2 >= (labelOffset / 100) * distance ||
-                labelWidth / 2 >= (1 - labelOffset / 100) * distance) {
-                $line.style.display = 'none';
-            }
-            else {
-                $line.style.display = 'block';
-                $line.style.width = distance + 'px';
-                $line.style.left = startLeft + 'px';
-                $line.style.top = startTop + 'px';
-                $line.style.transform = `rotate(${-deg}deg)`;
-                $label.style.left = `${labelOffset}%`;
-            }
-        }
-    };
-    const nextFrameFreshRule = () => nextFrame(freshRule);
-    const throttleFreshRule = throttle(freshRule, 80);
-    const enable = () => {
-        if (!state.loaded)
-            return false;
-        if (state.enable)
-            return true;
-        $rule.setAttribute('class', 'PanoRulerPlugin' + (state.options.className ? ' ' + state.options.className : ''));
-        five.getElement()?.parentElement?.append($rule);
-        freshRule();
-        five.on('panoArrived', freshRule);
-        five.on('modeChange', freshRule);
-        five.on('cameraDirectionUpdate', nextFrameFreshRule);
-        five.on('movingToPano', nextFrameFreshRule);
-        five.on('mouseWheel', throttleFreshRule);
-        five.on('pinchGesture', throttleFreshRule);
-        state.enable = true;
-        return true;
-    };
-    const disable = () => {
-        if (!state.enable)
-            return true;
-        five.off('panoArrived', freshRule);
-        five.off('modeChange', freshRule);
-        five.off('cameraDirectionUpdate', nextFrameFreshRule);
-        five.off('movingToPano', nextFrameFreshRule);
-        five.off('mouseWheel', throttleFreshRule);
-        five.off('pinchGesture', throttleFreshRule);
-        if ($rule) {
-            $rule.remove();
-        }
-        state.enable = false;
-        return true;
-    };
-    return {
-        enable,
-        disable,
-        load,
-        state,
-    };
-};
-export const panoRulerPluginServerParams = {
-    name: 'PanoRulerPlugin',
-    version: 0,
-};
+import PanoRulerPlugin from './Plugin';
+export { PanoRulerPlugin };
 export default PanoRulerPlugin;

package/libs/PanoSpatialTagPlugin/Components/origins.js

@@ -0,0 +1,168 @@
+/* generated by Svelte v3.47.0 */
+import {
+	SvelteComponent,
+	append_styles,
+	attr,
+	destroy_each,
+	detach,
+	element,
+	empty,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal,
+	set_style,
+	toggle_class
+} from "svelte/internal";
+
+import { currentTarget } from '../store';
+
+function add_css(target) {
+	append_styles(target, "svelte-scnx9u", ".PanoSpatialTagPlugin__tag-origin.svelte-scnx9u{position:absolute;width:0.5rem;height:0.5rem;border-radius:50%;background:#fff;box-shadow:0 0 .6rem #fff;transform:translate(-50%, -50%) scale(1);transform-origin:center center;animation:svelte-scnx9u-PanoSpatialTagPlugin__tag-origin 1.2s forwards;pointer-events:auto}.PanoSpatialTagPlugin__tag-origin.svelte-scnx9u:after{content:'';position:absolute;top:50%;height:50%;width:2rem;height:2rem;transform:translate(-50%, -50%)}.PanoSpatialTagPlugin__tag-origin-destroy.svelte-scnx9u{transform:translate(-50%, -50%) scale(0.6);animation:svelte-scnx9u-PanoSpatialTagPlugin__tag-origin-destroy 1.2s forwards .7s}@keyframes svelte-scnx9u-PanoSpatialTagPlugin__tag-origin{0%{transform:translate(-50%, -50%) scale(1);opacity:0}100%{transform:translate(-50%, -50%) scale(0.6);opacity:1 }}@keyframes svelte-scnx9u-PanoSpatialTagPlugin__tag-origin-destroy{0%{transform:translate(-50%, -50%) scale(0.6);opacity:1}10%{transform:translate(-50%, -50%) scale(1);opacity:0.9}100%{transform:translate(-50%, -50%) scale(1);opacity:0}}");
+}
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[3] = list[i];
+	return child_ctx;
+}
+
+// (8:0) {#each origins as origin}
+function create_each_block(ctx) {
+	let i;
+	let style_top = `${/*origin*/ ctx[3].top}%`;
+	let style_left = `${/*origin*/ ctx[3].left}%`;
+	let mounted;
+	let dispose;
+
+	function click_handler() {
+		return /*click_handler*/ ctx[2](/*origin*/ ctx[3]);
+	}
+
+	return {
+		c() {
+			i = element("i");
+			attr(i, "class", "svelte-scnx9u");
+			toggle_class(i, "PanoSpatialTagPlugin__tag-origin", true);
+			toggle_class(i, "PanoSpatialTagPlugin__tag-origin-destroy", /*origin*/ ctx[3].destroying);
+			set_style(i, "top", style_top, false);
+			set_style(i, "left", style_left, false);
+			set_style(i, "visibility", /*origin*/ ctx[3].front ? 'visible' : 'hidden', false);
+		},
+		m(target, anchor) {
+			insert(target, i, anchor);
+
+			if (!mounted) {
+				dispose = listen(i, "click", click_handler);
+				mounted = true;
+			}
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+
+			if (dirty & /*origins*/ 1) {
+				toggle_class(i, "PanoSpatialTagPlugin__tag-origin-destroy", /*origin*/ ctx[3].destroying);
+			}
+
+			if (dirty & /*origins*/ 1 && style_top !== (style_top = `${/*origin*/ ctx[3].top}%`)) {
+				set_style(i, "top", style_top, false);
+			}
+
+			if (dirty & /*origins*/ 1 && style_left !== (style_left = `${/*origin*/ ctx[3].left}%`)) {
+				set_style(i, "left", style_left, false);
+			}
+
+			if (dirty & /*origins*/ 1) {
+				set_style(i, "visibility", /*origin*/ ctx[3].front ? 'visible' : 'hidden', false);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(i);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let each_1_anchor;
+	let each_value = /*origins*/ ctx[0];
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+	}
+
+	return {
+		c() {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			each_1_anchor = empty();
+		},
+		m(target, anchor) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(target, anchor);
+			}
+
+			insert(target, each_1_anchor, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*origins, handleClick*/ 3) {
+				each_value = /*origins*/ ctx[0];
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
+					}
+				}
+
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
+				}
+
+				each_blocks.length = each_value.length;
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			destroy_each(each_blocks, detaching);
+			if (detaching) detach(each_1_anchor);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { origins } = $$props;
+
+	const handleClick = id => {
+		currentTarget.update(() => `${id}-PanoSpatialTagPlugin-${Date.now()}`);
+	};
+
+	const click_handler = origin => handleClick(origin.id);
+
+	$$self.$$set = $$props => {
+		if ('origins' in $$props) $$invalidate(0, origins = $$props.origins);
+	};
+
+	return [origins, handleClick, click_handler];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { origins: 0 }, add_css);
+	}
+}
+
+export default Component;