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

package/libs/PanoRulerProPlugin/RulerItem.svelte

@@ -0,0 +1,166 @@
+<script>export let rulerItemProp;
+let _visible = true;
+let labelWidth;
+$: {
+    if (labelWidth >= rulerItemProp.width ||
+        labelWidth / 2 >= (rulerItemProp.labelOffset / 100) * rulerItemProp.width ||
+        labelWidth / 2 >= (1 - rulerItemProp.labelOffset / 100) * rulerItemProp.width) {
+        _visible = false;
+    }
+    else {
+        _visible = true;
+    }
+}
+let EM_DOTTED_BG = `data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjQiIHdpZHRoPSIxMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PGZpbHRlciBpZD0icHJlZml4X19hIiBoZWlnaHQ9IjQwMCUiIHdpZHRoPSIxMzcuNCUiIHg9Ii0xOC43JSIgeT0iLTE1MCUiPjxmZU1vcnBob2xvZ3kgaW49IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0iZGlsYXRlIiByYWRpdXM9Ii41IiByZXN1bHQ9InNoYWRvd1NwcmVhZE91dGVyMSIvPjxmZU9mZnNldCBpbj0ic2hhZG93U3ByZWFkT3V0ZXIxIiByZXN1bHQ9InNoYWRvd09mZnNldE91dGVyMSIvPjxmZU1vcnBob2xvZ3kgaW49IlNvdXJjZUFscGhhIiByYWRpdXM9IjEiIHJlc3VsdD0ic2hhZG93SW5uZXIiLz48ZmVPZmZzZXQgaW49InNoYWRvd0lubmVyIiByZXN1bHQ9InNoYWRvd0lubmVyIi8+PGZlQ29tcG9zaXRlIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIGluMj0ic2hhZG93SW5uZXIiIG9wZXJhdG9yPSJvdXQiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlR2F1c3NpYW5CbHVyIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiIHJlc3VsdD0ic2hhZG93Qmx1ck91dGVyMSIgc3RkRGV2aWF0aW9uPSIuNSIvPjxmZUNvbG9yTWF0cml4IGluPSJzaGFkb3dCbHVyT3V0ZXIxIiB2YWx1ZXM9IjAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAuMiAwIi8+PC9maWx0ZXI+PHBhdGggaWQ9InByZWZpeF9fYiIgZD0iTS44ODkgMkgxMS41OCIvPjwvZGVmcz48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1kYXNoYXJyYXk9IjUgNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNwcmVmaXhfX2EpIiB4bGluazpocmVmPSIjcHJlZml4X19iIi8+PHVzZSBzdHJva2U9IiNmZmYiIHN0cm9rZS1vcGFjaXR5PSIuNCIgeGxpbms6aHJlZj0iI3ByZWZpeF9fYiIvPjwvZz48L3N2Zz4=`;
+$: vars = `--background-image: url(${EM_DOTTED_BG})`;
+</script>
+
+<div
+  class="PanoRulerPlugin-rule-line"
+  style:width="{rulerItemProp.width}px"
+  style:left="{rulerItemProp.left}px"
+  style:top="{rulerItemProp.top}px"
+  style:transform="rotate({rulerItemProp.rotateDeg}deg)"
+  style:display="{rulerItemProp.visible && _visible ? 'block' : 'none'}"
+>
+  {#if rulerItemProp.children.length === 0}
+    <em class="{rulerItemProp.state ? 'em-solid' : 'em-dotted'}" style="{vars}"></em>
+  {:else}
+    <div class="rule-mixed-line">
+      {#each rulerItemProp.children as child}
+        <div style:width="{child.width}px" class="{child.state ? 'em-solid' : 'em-dotted'}" style="{vars}"></div>
+      {/each}
+    </div>
+  {/if}
+  <div
+    class="PanoRulerPlugin-rule-label"
+    style:left="{rulerItemProp.labelOffset}%"
+  >
+    <div class="PanoRulerPlugin-rule-label-name" bind:offsetWidth="{labelWidth}">
+      {rulerItemProp.labelElement}
+    </div>
+  </div>
+</div>
+
+<style>
+  .PanoRulerPlugin-rule-line {
+    position: absolute;
+    transform-origin: left 0.0625rem;
+    width: 0;
+    height: 0.125rem;
+    pointer-events: none;
+  }
+
+  .PanoRulerPlugin-rule-line::after {
+    content: '';
+    position: absolute;
+    left: -0.125rem;
+    top: -0.1rem;
+    width: 0.25rem;
+    height: 0.25rem;
+    border-radius: 50%;
+    background: #fff;
+    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: #fff;
+    z-index: 1;
+    animation: viewport-rule-point 0.1s 1.5s;
+    animation-fill-mode: both;
+  }
+
+  .PanoRulerPlugin-rule-line em {
+    display: block;
+    height: 0.0625rem;
+    animation: viewport-rule-line 0.5s ease 1s;
+    animation-fill-mode: both;
+    box-shadow: 0 0 0.25rem rgb(0 0 0 / 40%);
+    position: relative;
+  }
+
+  .rule-mixed-line {
+    display: flex;
+    height: 0.0625rem;
+    animation: viewport-rule-line 0.5s ease 1s;
+    animation-fill-mode: both;
+    align-items: center;
+  }
+
+  .em-solid {
+    height: 100%;
+    background: #ffffff;
+  }
+  .em-dotted {
+    height: 0.125rem;
+    background: var(--background-image);
+    background-position: center;
+    background-repeat: repeat;
+  }
+
+  .PanoRulerPlugin-rule-label {
+    position: absolute;
+    width: 0;
+    height: 0;
+    top: 0.0625rem;
+    pointer-events: none;
+  }
+
+  .PanoRulerPlugin-rule-label-name {
+    position: absolute;
+    padding: 0.1875rem 0.375rem;
+    background: rgba(195, 195, 195, 0.3);
+    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.3);
+  }
+
+  @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>

package/libs/PanoRulerProPlugin/RulerItems.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.47.0 */
+/* generated by Svelte v3.49.0 */
 import {
 	SvelteComponent,
 	check_outros,

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.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.47.0 */
+/* generated by Svelte v3.49.0 */
 import {
 	SvelteComponent,
 	append_styles,
@@ -19,7 +19,7 @@ import {
 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}}");
+	append_styles(target, "svelte-1kuu68s", ".PanoSpatialTagPlugin__tag-origin.svelte-1kuu68s{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;-webkit-animation:svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin 1.2s forwards;animation:svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin 1.2s forwards;pointer-events:auto}.PanoSpatialTagPlugin__tag-origin.svelte-1kuu68s:after{content:'';position:absolute;top:50%;height:50%;width:2rem;height:2rem;transform:translate(-50%, -50%)}.PanoSpatialTagPlugin__tag-origin-destroy.svelte-1kuu68s{transform:translate(-50%, -50%) scale(0.6);-webkit-animation:svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin-destroy 1.2s forwards .7s;animation:svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin-destroy 1.2s forwards .7s}@-webkit-keyframes svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin{0%{transform:translate(-50%, -50%) scale(1);opacity:0}100%{transform:translate(-50%, -50%) scale(0.6);opacity:1 }}@keyframes svelte-1kuu68s-PanoSpatialTagPlugin__tag-origin{0%{transform:translate(-50%, -50%) scale(1);opacity:0}100%{transform:translate(-50%, -50%) scale(0.6);opacity:1 }}@-webkit-keyframes svelte-1kuu68s-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}}@keyframes svelte-1kuu68s-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) {
@@ -43,7 +43,7 @@ function create_each_block(ctx) {
 	return {
 		c() {
 			i = element("i");
-			attr(i, "class", "svelte-scnx9u");
+			attr(i, "class", "svelte-1kuu68s");
 			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);

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.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.47.0 */
+/* generated by Svelte v3.49.0 */
 import {
 	SvelteComponent,
 	append,
@@ -22,7 +22,7 @@ import '../typings';
 import { currentTarget } from '../store';
 
 function add_css(target) {
-	append_styles(target, "svelte-8ki8yx", ".PanoSpatialTagPlugin__tag-x.svelte-8ki8yx.svelte-8ki8yx{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.svelte-8ki8yx.svelte-8ki8yx{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.svelte-8ki8yx.svelte-8ki8yx{position:absolute;left:-1rem;width:2rem;height:100%;overflow:hidden}.PanoSpatialTagPlugin__tag-flagpole.svelte-8ki8yx.svelte-8ki8yx{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.svelte-8ki8yx.svelte-8ki8yx{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.svelte-8ki8yx.svelte-8ki8yx{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.svelte-8ki8yx .PanoSpatialTagPlugin__tag-line1.svelte-8ki8yx{animation:svelte-8ki8yx-PanoSpatialTagPlugin__tag-line1 linear .5s forwards .45s}.PanoSpatialTagPlugin__tag-show.svelte-8ki8yx .PanoSpatialTagPlugin__tag-line2.svelte-8ki8yx{animation:svelte-8ki8yx-PanoSpatialTagPlugin__tag-line2 linear .5s forwards .65s}.PanoSpatialTagPlugin__tag-x.PanoSpatialTagPlugin__tag-upside-down.svelte-8ki8yx.svelte-8ki8yx{transform:translate(0, 0)}.PanoSpatialTagPlugin__tag-upside-down.svelte-8ki8yx .PanoSpatialTagPlugin__tag-line.svelte-8ki8yx{transform:scaleY(-1)}.PanoSpatialTagPlugin__tag-animate.svelte-8ki8yx.svelte-8ki8yx{position:relative;height:100%;overflow:hidden;transform-origin:left top;transition:transform .5s linear}.PanoSpatialTagPlugin__tag-upside-down.svelte-8ki8yx .PanoSpatialTagPlugin__tag-animate.svelte-8ki8yx{transform-origin:left bottom}.PanoSpatialTagPlugin__tag-content.svelte-8ki8yx.svelte-8ki8yx{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.svelte-8ki8yx .PanoSpatialTagPlugin__tag-content.svelte-8ki8yx{bottom:0}.PanoSpatialTagPlugin__tag-show.svelte-8ki8yx .PanoSpatialTagPlugin__tag-flagpole.svelte-8ki8yx{opacity:1;transform:translate(-50%, 0) scaleY(1)}.PanoSpatialTagPlugin__tag-upside-down.svelte-8ki8yx .PanoSpatialTagPlugin__tag-shadow.svelte-8ki8yx{top:unset;bottom:-15rem}.PanoSpatialTagPlugin__tag-show.svelte-8ki8yx .PanoSpatialTagPlugin__tag-shadow.svelte-8ki8yx{opacity:.32}.PanoSpatialTagPlugin__tag-show.svelte-8ki8yx .PanoSpatialTagPlugin__tag-content.svelte-8ki8yx{transform:translate(0, 0)}.PanoSpatialTagPlugin__tag-hide.svelte-8ki8yx .PanoSpatialTagPlugin__tag-flagpole.svelte-8ki8yx{opacity:0;transform:translate(-50%, 60%) scaleY(0);transition:transform .5s .55s, opacity .4s .55s}.PanoSpatialTagPlugin__tag-hide.svelte-8ki8yx .PanoSpatialTagPlugin__tag-shadow.svelte-8ki8yx{opacity:0;transition:opacity .8s}.PanoSpatialTagPlugin__tag-hide.svelte-8ki8yx .PanoSpatialTagPlugin__tag-content.svelte-8ki8yx{transform:translate(-100%, 0);transition:transform .6s cubic-bezier(.53,.06,.88,.59)}.PanoSpatialTagPlugin__tag-hide.svelte-8ki8yx .PanoSpatialTagPlugin__tag-content .svelte-8ki8yx{pointer-events:none}.PanoSpatialTagPlugin__tag-hide.svelte-8ki8yx .PanoSpatialTagPlugin__tag-line1.svelte-8ki8yx{opacity:0.5;transform:translate(-50%, 10%) scaleY(0);animation:svelte-8ki8yx-PanoSpatialTagPlugin__tag-line1-hide linear .28s forwards .3s}.PanoSpatialTagPlugin__tag-hide.svelte-8ki8yx .PanoSpatialTagPlugin__tag-line2.svelte-8ki8yx{opacity:0.5;transform:translate(-50%, 0) scaleY(0);animation:svelte-8ki8yx-PanoSpatialTagPlugin__tag-line2-hide linear .28s forwards .45s}@keyframes svelte-8ki8yx-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 svelte-8ki8yx-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 svelte-8ki8yx-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 svelte-8ki8yx-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)}}");
+	append_styles(target, "svelte-eb8bdm", ".PanoSpatialTagPlugin__tag-x.svelte-eb8bdm.svelte-eb8bdm{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.svelte-eb8bdm.svelte-eb8bdm{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.svelte-eb8bdm.svelte-eb8bdm{position:absolute;left:-1rem;width:2rem;height:100%;overflow:hidden}.PanoSpatialTagPlugin__tag-flagpole.svelte-eb8bdm.svelte-eb8bdm{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.svelte-eb8bdm.svelte-eb8bdm{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.svelte-eb8bdm.svelte-eb8bdm{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.svelte-eb8bdm .PanoSpatialTagPlugin__tag-line1.svelte-eb8bdm{-webkit-animation:svelte-eb8bdm-PanoSpatialTagPlugin__tag-line1 linear .5s forwards .45s;animation:svelte-eb8bdm-PanoSpatialTagPlugin__tag-line1 linear .5s forwards .45s}.PanoSpatialTagPlugin__tag-show.svelte-eb8bdm .PanoSpatialTagPlugin__tag-line2.svelte-eb8bdm{-webkit-animation:svelte-eb8bdm-PanoSpatialTagPlugin__tag-line2 linear .5s forwards .65s;animation:svelte-eb8bdm-PanoSpatialTagPlugin__tag-line2 linear .5s forwards .65s}.PanoSpatialTagPlugin__tag-x.PanoSpatialTagPlugin__tag-upside-down.svelte-eb8bdm.svelte-eb8bdm{transform:translate(0, 0)}.PanoSpatialTagPlugin__tag-upside-down.svelte-eb8bdm .PanoSpatialTagPlugin__tag-line.svelte-eb8bdm{transform:scaleY(-1)}.PanoSpatialTagPlugin__tag-animate.svelte-eb8bdm.svelte-eb8bdm{position:relative;height:100%;overflow:hidden;transform-origin:left top;transition:transform .5s linear}.PanoSpatialTagPlugin__tag-upside-down.svelte-eb8bdm .PanoSpatialTagPlugin__tag-animate.svelte-eb8bdm{transform-origin:left bottom}.PanoSpatialTagPlugin__tag-content.svelte-eb8bdm.svelte-eb8bdm{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.svelte-eb8bdm .PanoSpatialTagPlugin__tag-content.svelte-eb8bdm{bottom:0}.PanoSpatialTagPlugin__tag-show.svelte-eb8bdm .PanoSpatialTagPlugin__tag-flagpole.svelte-eb8bdm{opacity:1;transform:translate(-50%, 0) scaleY(1)}.PanoSpatialTagPlugin__tag-upside-down.svelte-eb8bdm .PanoSpatialTagPlugin__tag-shadow.svelte-eb8bdm{top:unset;bottom:-15rem}.PanoSpatialTagPlugin__tag-show.svelte-eb8bdm .PanoSpatialTagPlugin__tag-shadow.svelte-eb8bdm{opacity:.32}.PanoSpatialTagPlugin__tag-show.svelte-eb8bdm .PanoSpatialTagPlugin__tag-content.svelte-eb8bdm{transform:translate(0, 0)}.PanoSpatialTagPlugin__tag-hide.svelte-eb8bdm .PanoSpatialTagPlugin__tag-flagpole.svelte-eb8bdm{opacity:0;transform:translate(-50%, 60%) scaleY(0);transition:transform .5s .55s, opacity .4s .55s}.PanoSpatialTagPlugin__tag-hide.svelte-eb8bdm .PanoSpatialTagPlugin__tag-shadow.svelte-eb8bdm{opacity:0;transition:opacity .8s}.PanoSpatialTagPlugin__tag-hide.svelte-eb8bdm .PanoSpatialTagPlugin__tag-content.svelte-eb8bdm{transform:translate(-100%, 0);transition:transform .6s cubic-bezier(.53,.06,.88,.59)}.PanoSpatialTagPlugin__tag-hide.svelte-eb8bdm .PanoSpatialTagPlugin__tag-content .svelte-eb8bdm{pointer-events:none}.PanoSpatialTagPlugin__tag-hide.svelte-eb8bdm .PanoSpatialTagPlugin__tag-line1.svelte-eb8bdm{opacity:0.5;transform:translate(-50%, 10%) scaleY(0);-webkit-animation:svelte-eb8bdm-PanoSpatialTagPlugin__tag-line1-hide linear .28s forwards .3s;animation:svelte-eb8bdm-PanoSpatialTagPlugin__tag-line1-hide linear .28s forwards .3s}.PanoSpatialTagPlugin__tag-hide.svelte-eb8bdm .PanoSpatialTagPlugin__tag-line2.svelte-eb8bdm{opacity:0.5;transform:translate(-50%, 0) scaleY(0);-webkit-animation:svelte-eb8bdm-PanoSpatialTagPlugin__tag-line2-hide linear .28s forwards .45s;animation:svelte-eb8bdm-PanoSpatialTagPlugin__tag-line2-hide linear .28s forwards .45s}@-webkit-keyframes svelte-eb8bdm-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 svelte-eb8bdm-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)}}@-webkit-keyframes svelte-eb8bdm-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 svelte-eb8bdm-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)}}@-webkit-keyframes svelte-eb8bdm-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 svelte-eb8bdm-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)}}@-webkit-keyframes svelte-eb8bdm-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)}}@keyframes svelte-eb8bdm-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)}}");
 }
 
 function create_fragment(ctx) {
@@ -56,19 +56,19 @@ function create_fragment(ctx) {
 			t3 = space();
 			div3 = element("div");
 			div2 = element("div");
-			attr(div0, "class", "PanoSpatialTagPlugin__tag-shadow svelte-8ki8yx");
+			attr(div0, "class", "PanoSpatialTagPlugin__tag-shadow svelte-eb8bdm");
 			set_style(div0, "transform", "translate(" + /*contentWidth*/ ctx[7] / 2 * /*contentZoom*/ ctx[3] * 3 + "px, " + /*contentHeight*/ ctx[8] / 2 * (/*upsideDown*/ ctx[1] ? -1 : 1) * /*contentZoom*/ ctx[3] * 3 + "px) scale(" + 1 / /*contentZoom*/ ctx[3] + ")");
-			attr(i0, "class", "PanoSpatialTagPlugin__tag-flagpole svelte-8ki8yx");
+			attr(i0, "class", "PanoSpatialTagPlugin__tag-flagpole svelte-eb8bdm");
 			set_style(i0, "width", /*lineWidthZoom*/ ctx[4] + "rem");
-			attr(i1, "class", "PanoSpatialTagPlugin__tag-line1 svelte-8ki8yx");
-			attr(i2, "class", "PanoSpatialTagPlugin__tag-line2 svelte-8ki8yx");
-			attr(div1, "class", "PanoSpatialTagPlugin__tag-line svelte-8ki8yx");
-			attr(div2, "class", "PanoSpatialTagPlugin__tag-content svelte-8ki8yx");
-			attr(div3, "class", "PanoSpatialTagPlugin__tag-animate svelte-8ki8yx");
+			attr(i1, "class", "PanoSpatialTagPlugin__tag-line1 svelte-eb8bdm");
+			attr(i2, "class", "PanoSpatialTagPlugin__tag-line2 svelte-eb8bdm");
+			attr(div1, "class", "PanoSpatialTagPlugin__tag-line svelte-eb8bdm");
+			attr(div2, "class", "PanoSpatialTagPlugin__tag-content svelte-eb8bdm");
+			attr(div3, "class", "PanoSpatialTagPlugin__tag-animate svelte-eb8bdm");
 			set_style(div3, "transform", "scale(" + /*contentZoom*/ ctx[3] * 3 + ")");
 			attr(div4, "id", div4_id_value = 'PanoSpatialTagPlugin__' + /*id*/ ctx[0]);
 			set_style(div4, "height", 20 * /*lineHeightZoom*/ ctx[5] + "rem");
-			attr(div4, "class", "svelte-8ki8yx");
+			attr(div4, "class", "svelte-eb8bdm");
 			toggle_class(div4, "PanoSpatialTagPlugin__tag-x", true);
 			toggle_class(div4, "PanoSpatialTagPlugin__tag-upside-down", /*upsideDown*/ ctx[1]);
 			toggle_class(div4, "PanoSpatialTagPlugin__tag-show", /*show*/ ctx[10]);