@realsee/dnalogel 2.1.0-alpha.4 → 2.1.0-alpha.5

package/libs/PanoRulerProPlugin/RulerItems.svelte

@@ -0,0 +1,212 @@
+<script>var _a, _b, _c, _d;
+import { Five } from '@realsee/five';
+import { nextFrame } from '../shared-utils/animationFrame';
+import equal from '../shared-utils/equal';
+import { intersectionOfLine } from '../shared-utils/math/planimetry';
+import throttle from '../shared-utils/throttle';
+import { onDestroy, onMount } from 'svelte';
+import { Vector3 } from 'three';
+import RulerItem from './RulerItem.svelte';
+export let five;
+export let rulerDatas;
+export let options;
+let rulerItemProp = [];
+const canvasWidth = ((_b = (_a = five.getElement()) === null || _a === void 0 ? void 0 : _a.parentElement) === null || _b === void 0 ? void 0 : _b.clientWidth) || 0;
+const canvasHeight = ((_d = (_c = five.getElement()) === null || _c === void 0 ? void 0 : _c.parentElement) === null || _d === void 0 ? void 0 : _d.clientHeight) || 0;
+const getRuleScreenIntr = (startPoint, endPoint) => {
+    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 getPosition = (start, end) => {
+    const startPoint = start.clone().project(five.camera);
+    const startLeft = ((startPoint.x + 1) / 2) * canvasWidth;
+    const startTop = ((-startPoint.y + 1) / 2) * canvasHeight;
+    const endPoint = end.clone().project(five.camera);
+    const endLeft = ((endPoint.x + 1) / 2) * canvasWidth;
+    const endTop = ((-endPoint.y + 1) / 2) * canvasHeight;
+    const distance = Math.sqrt(Math.pow(endLeft - startLeft, 2) + Math.pow(endTop - startTop, 2));
+    return {
+        startLeft,
+        startTop,
+        endLeft,
+        endTop,
+        distance,
+    };
+};
+const getPositionAndVisible = (start, end, visibleOrigin) => {
+    const cameraPosition = five.camera.position;
+    const cameraDirection = five.camera.getWorldDirection(new Vector3());
+    const startAngle = start.clone().sub(cameraPosition).normalize().angleTo(cameraDirection);
+    const endAngle = end.clone().sub(cameraPosition).normalize().angleTo(cameraDirection);
+    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);
+    const { startLeft, startTop, endLeft, endTop, distance } = getPosition(start, end);
+    const rad = Math.PI / 2 - Math.atan2(endLeft - startLeft, startTop - endTop);
+    const deg = -(rad / Math.PI) * 180;
+    let visible = true;
+    if (!visibleOrigin)
+        visible = false;
+    // 只显示拐点相连的线
+    if (!equal(start, visibleOrigin) && !equal(end, visibleOrigin)) {
+        visible = false;
+    }
+    // 线小于0.3m隐藏
+    if (ruleLength < 0.3) {
+        visible = false;
+    }
+    if (startAngle > Math.PI / 2) {
+        visible = false;
+    }
+    if (endAngle > Math.PI / 2) {
+        visible = false;
+    }
+    if (disFromCameraToMid / ruleLength > 8) {
+        visible = false;
+    }
+    let labelOffset = 50;
+    let visibleLength = distance;
+    const intr = getRuleScreenIntr({ x: ~~startLeft, y: ~~startTop }, { x: ~~endLeft, y: ~~endTop });
+    if (intr && intr.length === 1) {
+        if (equal(start, visibleOrigin)) {
+            visibleLength = Math.sqrt(Math.pow(intr[0].x - startLeft, 2) + Math.pow(intr[0].y - startTop, 2));
+            labelOffset = (visibleLength / distance) * 50;
+        }
+        else if (equal(end, visibleOrigin)) {
+            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;
+    }
+    return {
+        startLeft,
+        startTop,
+        distance,
+        deg,
+        visible,
+        labelOffset,
+        ruleLength,
+    };
+};
+const updatePanoRulerData = () => {
+    const panoIndex = five.panoIndex;
+    const rulerData = rulerDatas.find((data) => data.panoIndex === panoIndex);
+    if (!rulerData)
+        return (rulerItemProp = []);
+    // 非全景模式下隐藏所有标尺
+    if (five.currentMode !== Five.Mode.Panorama)
+        return (rulerItemProp = []);
+    const cameraPosition = five.camera.position;
+    const cameraDirection = five.camera.getWorldDirection(new Vector3());
+    const startPoints = rulerData.lines.map((v) => new Vector3(v.start[0], -v.start[1], -v.start[2]));
+    const endPoints = rulerData.lines.map((v) => new Vector3(v.end[0], -v.end[1], -v.end[2]));
+    // 可以看到的角度最小的拐点
+    const [visibleOrigin] = startPoints.concat(endPoints).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 data = rulerData.lines.map((line) => {
+        var _a, _b;
+        const start = line.start;
+        const end = line.end;
+        const { startLeft, startTop, distance, deg, visible, labelOffset, ruleLength } = getPositionAndVisible(new Vector3(start[0], -start[1], -start[2]), new Vector3(end[0], -end[1], -end[2]), visibleOrigin);
+        const children = [];
+        if (line.children && ((_a = line.children) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            (_b = line.children) === null || _b === void 0 ? void 0 : _b.forEach((l) => {
+                const start = l.start;
+                const end = l.end;
+                const { distance } = getPosition(new Vector3(start[0], -start[1], -start[2]), new Vector3(end[0], -end[1], -end[2]));
+                children.push({
+                    width: distance,
+                    state: l.state,
+                });
+            });
+        }
+        return {
+            width: distance,
+            left: startLeft,
+            top: startTop,
+            rotateDeg: deg,
+            state: line.state,
+            children,
+            labelOffset,
+            visible,
+            labelElement: options.distanceText(ruleLength),
+        };
+    });
+    rulerItemProp = data;
+};
+const nextFrameFreshRule = () => nextFrame(updatePanoRulerData);
+const throttleFreshRule = throttle(updatePanoRulerData, 80);
+onMount(() => {
+    updatePanoRulerData();
+    five.on('panoArrived', updatePanoRulerData);
+    five.on('modeChange', updatePanoRulerData);
+    five.on('cameraDirectionUpdate', nextFrameFreshRule);
+    five.on('movingToPano', nextFrameFreshRule);
+    five.on('mouseWheel', () => throttleFreshRule());
+    five.on('pinchGesture', () => throttleFreshRule());
+});
+onDestroy(() => {
+    five.off('panoArrived', updatePanoRulerData);
+    five.off('modeChange', updatePanoRulerData);
+    five.off('cameraDirectionUpdate', nextFrameFreshRule);
+    five.off('movingToPano', nextFrameFreshRule);
+    five.off('mouseWheel', () => throttleFreshRule());
+    five.off('pinchGesture', () => throttleFreshRule());
+});
+</script>
+
+<div>
+  {#each rulerItemProp as itemData}
+    <RulerItem rulerItemProp="{itemData}" />
+  {/each}
+</div>
+
+<style>
+</style>

package/libs/PanoSpatialTagPlugin/Components/origins.svelte

@@ -0,0 +1,58 @@
+<script>import { currentTarget } from '../store';
+export let origins;
+const handleClick = (id) => {
+    currentTarget.update(() => `${id}-PanoSpatialTagPlugin-${Date.now()}`);
+};
+</script>
+
+{#each origins as origin}
+  <i 
+    class:PanoSpatialTagPlugin__tag-origin={true}
+    class:PanoSpatialTagPlugin__tag-origin-destroy={origin.destroying}
+    style:top="{origin.top}%"
+    style:left="{origin.left}%"
+    style:visibility="{origin.front ? 'visible' : 'hidden'}"
+    on:click="{() => handleClick(origin.id)}"
+  />
+{/each}
+
+<style>
+  .PanoSpatialTagPlugin__tag-origin {
+    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: PanoSpatialTagPlugin__tag-origin 1.2s forwards;
+    pointer-events: auto;
+  }
+
+  .PanoSpatialTagPlugin__tag-origin:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    height: 50%;
+    width: 2rem;
+    height: 2rem;
+    transform: translate(-50%, -50%);
+  }
+
+  .PanoSpatialTagPlugin__tag-origin-destroy {
+    transform: translate(-50%, -50%) scale(0.6);
+    animation: PanoSpatialTagPlugin__tag-origin-destroy 1.2s forwards .7s;
+  }
+
+  @keyframes PanoSpatialTagPlugin__tag-origin {
+    0% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
+    100% { transform: translate(-50%, -50%) scale(0.6); opacity: 1 }
+  }
+
+  @keyframes 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; }
+  }
+</style>

package/libs/PanoSpatialTagPlugin/Components/tag.svelte

@@ -0,0 +1,292 @@
+<script>import { onMount, onDestroy, afterUpdate } from 'svelte';
+import '../typings';
+import { currentTarget } from '../store';
+export let id;
+export let upsideDown;
+export let content;
+export let contentZoom;
+export let lineWidthZoom;
+export let lineHeightZoom;
+export let destroying = false;
+export let folded;
+export let dispose;
+export let events;
+export let hooks;
+let contentWidth = 0;
+let contentHeight = 0;
+let contentDom;
+let show;
+let timeoutId = setTimeout(() => {
+    if (!folded)
+        show = true;
+    timeoutId = undefined;
+}, 100);
+const handleClickContent = event => {
+    const eventsName = Object.keys(events);
+    let node = event.target;
+    while (node) {
+        const classNames = node.getAttribute('class');
+        if (!classNames) {
+            node = node.parentNode;
+            continue;
+        }
+        if (classNames.includes('PanoSpatialTagPlugin__tag-content')) {
+            node = null;
+            break;
+        }
+        eventsName.forEach(key => {
+            if (classNames.includes(key))
+                events[key](id);
+        });
+        node = node.parentNode;
+    }
+};
+onMount(() => {
+    hooks.emit('initTag', { id });
+});
+const unsubscribe = currentTarget.subscribe((str) => {
+    if (str === null)
+        return;
+    const [currentId, date] = str.split('-PanoSpatialTagPlugin-');
+    if (id === currentId) {
+        hooks.emit('clickOrigin', { id, show });
+        if (!timeoutId) {
+            show = folded;
+            folded = !folded;
+            timeoutId = setTimeout(() => {
+                timeoutId = undefined;
+            }, 1500);
+        }
+    }
+});
+afterUpdate(() => {
+    contentWidth = contentDom.offsetWidth;
+    contentHeight = contentDom.offsetHeight;
+    if (timeoutId)
+        return;
+    show = !folded;
+});
+onDestroy(() => {
+    hooks.emit('destroyTag', { id });
+    unsubscribe();
+    dispose();
+});
+</script>
+
+<div
+  class:PanoSpatialTagPlugin__tag-x={true}
+  class:PanoSpatialTagPlugin__tag-upside-down={upsideDown}
+  class:PanoSpatialTagPlugin__tag-show={show}
+  class:PanoSpatialTagPlugin__tag-hide={show === false || destroying}
+  id={'PanoSpatialTagPlugin__' + id}
+  style="height: {20 * lineHeightZoom}rem"
+>
+  <div class="PanoSpatialTagPlugin__tag-shadow"
+    style="transform: translate({contentWidth / 2 * contentZoom * 3}px, {
+      contentHeight / 2 * (upsideDown ? -1 : 1) * contentZoom * 3
+    }px) scale({1 / contentZoom})"
+  />
+  <div class="PanoSpatialTagPlugin__tag-line">
+    <i class="PanoSpatialTagPlugin__tag-flagpole"
+      style="width: {lineWidthZoom}rem;"
+    />
+    <i class="PanoSpatialTagPlugin__tag-line1"/>
+    <i class="PanoSpatialTagPlugin__tag-line2"/>
+  </div>
+  <div class="PanoSpatialTagPlugin__tag-animate" style="transform: scale({contentZoom * 3})">
+    <div class="PanoSpatialTagPlugin__tag-content" on:click="{handleClickContent}" bind:this={contentDom}>
+      {@html content}
+    </div>
+  </div>
+</div>
+
+<style>
+  .PanoSpatialTagPlugin__tag-x {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    white-space: nowrap;
+    box-sizing: border-box;
+    width: 25rem;
+    height: 14rem;
+    color: #FFF;
+    transform: translate(0, -100%);
+    transition: height .5s linear;
+  }
+
+  .PanoSpatialTagPlugin__tag-shadow {
+    content: '';
+    position: absolute;
+    width: 30rem;
+    height: 30rem;
+    top: -15rem;
+    left: -15rem;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity .8s .6s;
+    background: url('https://vrlab-image4.ljcdn.com/release/web/PanoSpatialTagPlugin__blur.png');
+    background-size: 30rem 30rem;
+  }
+
+  .PanoSpatialTagPlugin__tag-line {
+    position: absolute;
+    left: -1rem;
+    width: 2rem;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .PanoSpatialTagPlugin__tag-flagpole {
+    position: absolute;
+    top: 0;
+    left: 1rem;
+    height: calc(100% - 1.5rem);
+    width: .15rem;
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, .1));
+    box-shadow: 0 .1rem .5rem rgba(0, 0, 0, .2);
+    opacity: 0;
+    transform: translate(-50%, 60%) scaleY(0);
+    transition: transform .4s cubic-bezier(.44,.44,.74,.98) , opacity .4s cubic-bezier(.44,.44,.74,.98), width .5s linear, height .5s linear ;
+    transform-origin: center bottom;
+  }
+
+  .PanoSpatialTagPlugin__tag-line1 {
+    position: absolute;
+    top: 0;
+    left: 0.3rem;
+    height: 1.8rem;
+    width: .1rem;
+    background: #fff;
+    opacity: 0;
+    transform: translate(-50%, 200%) scaleY(0);
+    transform-origin: center top;
+  }
+
+  .PanoSpatialTagPlugin__tag-line2 {
+    position: absolute;
+    top: 0;
+    left: 0.5rem;
+    height: 1.8rem;
+    width: .1rem;
+    background: #fff;
+    opacity: 0;
+    transform: translate(-50%, 200%) scaleY(0);
+    transform-origin: center top;
+  }
+
+  .PanoSpatialTagPlugin__tag-show .PanoSpatialTagPlugin__tag-line1 {
+    animation: PanoSpatialTagPlugin__tag-line1 linear .5s forwards .45s;
+  }
+
+  .PanoSpatialTagPlugin__tag-show .PanoSpatialTagPlugin__tag-line2 {
+    animation: PanoSpatialTagPlugin__tag-line2 linear .5s forwards .65s;
+  }
+
+  .PanoSpatialTagPlugin__tag-x.PanoSpatialTagPlugin__tag-upside-down {
+    transform: translate(0, 0);
+  }
+
+  .PanoSpatialTagPlugin__tag-upside-down .PanoSpatialTagPlugin__tag-line {
+    transform: scaleY(-1);
+  }
+
+  .PanoSpatialTagPlugin__tag-animate {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    transform-origin: left top;
+    transition: transform .5s linear;
+  }
+
+  .PanoSpatialTagPlugin__tag-upside-down .PanoSpatialTagPlugin__tag-animate{
+    transform-origin: left bottom;
+  }
+
+  .PanoSpatialTagPlugin__tag-content {
+    position: absolute;
+    display: inline-block;
+    transform: translate(-100%, 0);
+    transition: transform .9s cubic-bezier(0,.65,.16,1.08) .6s;
+    padding-left: .5rem;
+    font-size: 1rem;
+  }
+
+  .PanoSpatialTagPlugin__tag-upside-down .PanoSpatialTagPlugin__tag-content{
+    bottom: 0;
+  }
+
+  .PanoSpatialTagPlugin__tag-show .PanoSpatialTagPlugin__tag-flagpole {
+    opacity: 1;
+    transform: translate(-50%, 0) scaleY(1);
+  }
+
+  .PanoSpatialTagPlugin__tag-upside-down .PanoSpatialTagPlugin__tag-shadow {
+    top: unset;
+    bottom: -15rem;
+  }
+
+  .PanoSpatialTagPlugin__tag-show .PanoSpatialTagPlugin__tag-shadow {
+    opacity: .32;
+  }
+
+  .PanoSpatialTagPlugin__tag-show .PanoSpatialTagPlugin__tag-content {
+    transform: translate(0, 0);
+  }
+
+  .PanoSpatialTagPlugin__tag-hide .PanoSpatialTagPlugin__tag-flagpole {
+    opacity: 0;
+    transform: translate(-50%, 60%) scaleY(0);
+    transition: transform .5s .55s, opacity .4s .55s;
+  }
+
+  .PanoSpatialTagPlugin__tag-hide .PanoSpatialTagPlugin__tag-shadow {
+    opacity: 0;
+    transition: opacity .8s;
+  }
+
+  .PanoSpatialTagPlugin__tag-hide .PanoSpatialTagPlugin__tag-content {
+    transform: translate(-100%, 0);
+    transition: transform .6s cubic-bezier(.53,.06,.88,.59);
+  }
+
+  .PanoSpatialTagPlugin__tag-hide .PanoSpatialTagPlugin__tag-content * {
+    pointer-events: none;
+  }
+
+  .PanoSpatialTagPlugin__tag-hide .PanoSpatialTagPlugin__tag-line1 {
+    opacity: 0.5;
+    transform: translate(-50%, 10%) scaleY(0);
+    animation: PanoSpatialTagPlugin__tag-line1-hide linear .28s forwards .3s;
+  }
+
+  .PanoSpatialTagPlugin__tag-hide .PanoSpatialTagPlugin__tag-line2 {
+    opacity: 0.5;
+    transform: translate(-50%, 0) scaleY(0);
+    animation: PanoSpatialTagPlugin__tag-line2-hide linear .28s forwards .45s;
+  }
+
+  @keyframes PanoSpatialTagPlugin__tag-line1 {
+    0% { opacity: 0; transform: translate(-50%, 250%) scaleY(1); }
+    50% { opacity: 0.5; transform: translate(-50%, 135%) scaleY(1); }
+    100% { opacity: 0.5; transform: translate(-50%, 20%) scaleY(0); }
+  }
+
+  @keyframes PanoSpatialTagPlugin__tag-line2 {
+    0% { opacity: 0; transform: translate(-50%, 250%) scaleY(1); }
+    50% { opacity: 0.5; transform: translate(-50%, 125%) scaleY(1); }
+    100% { opacity: 0.5; transform: translate(-50%, 0) scaleY(0); }
+  }
+
+  @keyframes PanoSpatialTagPlugin__tag-line1-hide {
+    0% { opacity: 0.5; transform: translate(-50%, 10%) scaleY(0); }
+    50% { opacity: 0.2; transform: translate(-50%, 105%) scaleY(1); }
+    100% { opacity: 0; transform: translate(-50%, 200%) scaleY(0); }
+  }
+
+  @keyframes PanoSpatialTagPlugin__tag-line2-hide {
+    0% { opacity: 0.5; transform: translate(-50%, 0) scaleY(0); }
+    50% { opacity: 0.2; transform: translate(-50%, 100%) scaleY(1); }
+    100% { opacity: 0; transform: translate(-50%, 200%) scaleY(0); }
+  }
+</style>

package/libs/PanoSpatialTagPlugin/Plugin.js

@@ -1,8 +1,8 @@
 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 Origins from './Components/origins.svelte';
+import Tag from './Components/tag.svelte';
 import { pluginStyle } from './style';
 import render from '../shared-utils/tinyEJSrender';
 const MESH_SIZE = 0.001;

package/libs/PanoTagPlugin/Components/Common/Arrow.svelte

@@ -0,0 +1,56 @@
+<script>import { fade } from 'svelte/transition';
+import { Image_Arrow } from '../../Assets/Icon';
+import { cubicInOut } from 'svelte/easing';
+import Shadow from './Shadow.svelte';
+export let direction = 'right';
+export let visible = true;
+export let duration = 0;
+export let inDelay = 0;
+export let outDelay = 0;
+</script>
+
+{#if visible}
+  <div class="arrow-wrapper">
+    <Shadow center blurRadius={9} spreadRadius={3} />
+    <div
+      on:click
+      in:fade|local={{ duration, delay: inDelay, easing: cubicInOut }}
+      out:fade|local={{ duration, delay: outDelay, easing: cubicInOut }}
+      class="arrow {direction}"
+      style="background-image: url({Image_Arrow});"
+    />
+  </div>
+{/if}
+
+<style>
+  .arrow {
+    width: 100%;
+    height: 100%;
+    background-size: 100%;
+    transition: transform 400ms ease-in-out;
+    cursor: pointer;
+    pointer-events: auto;
+  }
+
+  .arrow-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .arrow.left {
+    transform: rotate(0deg);
+  }
+
+  .arrow.right {
+    transform: rotate(-180deg);
+  }
+
+  .arrow.top {
+    transform: rotate(90deg);
+  }
+
+  .arrow.bottom {
+    transform: rotate(-90deg);
+  }
+</style>