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

package/libs/PanoSpatialTagPlugin/Components/tag.js

@@ -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]);

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/floorplan/Components/BaseImage.js

@@ -21,7 +21,7 @@ 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}");
+	append_styles(target, "svelte-ozpg4a", ".floorplan-plugin__base-image.svelte-ozpg4a{position:absolute;z-index:10;width:100%;height:100%;pointer-events:none}");
 }
 
 // (13:22) 
@@ -117,7 +117,7 @@ function create_fragment(ctx) {
 		c() {
 			div = element("div");
 			if (if_block) if_block.c();
-			attr(div, "class", "floorplan-plugin__base-image svelte-126ja8e");
+			attr(div, "class", "floorplan-plugin__base-image svelte-ozpg4a");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);

package/libs/floorplan/Components/BaseImage.svelte

@@ -0,0 +1,26 @@
+<script>var _a, _b;
+import NormalImage from './Normalmage.svelte';
+import SvgImage from './SvgImage.svelte';
+export let floorIndex;
+export let floorplanData;
+$: imageData = floorplanData.outlines[floorIndex];
+$: svgContent = (_b = (_a = floorplanData.outlines) === null || _a === void 0 ? void 0 : _a[floorIndex]) === null || _b === void 0 ? void 0 : _b.svgContent;
+</script>
+
+<div class="floorplan-plugin__base-image">
+  {#if svgContent}
+    <SvgImage content={svgContent} />
+  {:else if imageData}
+    <NormalImage url={imageData.url} />
+  {/if}
+</div>
+
+<style>
+  .floorplan-plugin__base-image {
+    position: absolute;
+    z-index: 10;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+</style>

package/libs/floorplan/Components/Camera.js

@@ -17,7 +17,7 @@ import { CAMERA_IMAGE } from '../Assets/camera';
 import rad2Deg from '../../shared-utils/math/rad2Deg';
 
 function add_css(target) {
-	append_styles(target, "svelte-e8a2kn", ".floorplan__camera-position.svelte-e8a2kn{position:absolute;width:0;height:0}.floorplan__camera-rotate.svelte-e8a2kn{position:absolute;background-repeat:no-repeat;background-size:100%}");
+	append_styles(target, "svelte-17cl35n", ".floorplan__camera-position.svelte-17cl35n{position:absolute;width:0;height:0}.floorplan__camera-rotate.svelte-17cl35n{position:absolute;background-repeat:no-repeat;background-size:100%}");
 }
 
 function create_fragment(ctx) {
@@ -28,7 +28,7 @@ function create_fragment(ctx) {
 		c() {
 			div1 = element("div");
 			div0 = element("div");
-			attr(div0, "class", "floorplan__camera-rotate svelte-e8a2kn");
+			attr(div0, "class", "floorplan__camera-rotate svelte-17cl35n");
 			set_style(div0, "background-image", `url(${/*cameraImageUrl*/ ctx[0] || CAMERA_IMAGE})`);
 			set_style(div0, "width", /*domSizeStyle*/ ctx[4], false);
 			set_style(div0, "height", /*domSizeStyle*/ ctx[4], false);
@@ -36,7 +36,7 @@ function create_fragment(ctx) {
 			set_style(div0, "top", '-' + /*domSizeStyle*/ ctx[4], false);
 			set_style(div0, "transform", `rotate(${/*rotate*/ ctx[3]}deg)`, false);
 			set_style(div0, "transform-origin", `${/*domSizeStyle*/ ctx[4]} ${/*domSizeStyle*/ ctx[4]}`, false);
-			attr(div1, "class", "floorplan__camera-position svelte-e8a2kn");
+			attr(div1, "class", "floorplan__camera-position svelte-17cl35n");
 			set_style(div1, "left", /*positionLeft*/ ctx[1], false);
 			set_style(div1, "top", /*positionTop*/ ctx[2], false);
 		},

package/libs/floorplan/Components/Camera.svelte

@@ -0,0 +1,46 @@
+<script>import { CAMERA_IMAGE } from '../Assets/camera';
+import rad2Deg from '../../shared-utils/math/rad2Deg';
+export let panoIndex;
+export let floorplanData;
+export let lastPanoramaLongitude;
+export let cameraImageUrl;
+const { observers } = floorplanData;
+const observer = observers[panoIndex];
+const leftRatio = observer.positionInImage.x;
+const topRatio = observer.positionInImage.y;
+const positionLeft = leftRatio * 100 + '%';
+const positionTop = topRatio * 100 + '%';
+const rotate = -rad2Deg(lastPanoramaLongitude) + 45;
+// TODO: 统一这里的判断条件，目前写了多处
+const bodyWidth = document.body.clientWidth;
+const bodyHeight = document.body.clientHeight;
+const size = bodyWidth < 500 || bodyHeight < 500 ? 17 : 37;
+const domSizeStyle = `${size / 16}rem`;
+</script>
+
+<div class="floorplan__camera-position" style:left={positionLeft} style:top={positionTop}>
+  <div
+    class="floorplan__camera-rotate"
+    style:width={domSizeStyle}
+    style:height={domSizeStyle}
+    style:left={'-' + domSizeStyle}
+    style:top={'-' + domSizeStyle}
+    style:transform={`rotate(${rotate}deg)`}
+    style:transform-origin={`${domSizeStyle} ${domSizeStyle}`}
+    style="background-image: {`url(${cameraImageUrl || CAMERA_IMAGE})`}"
+  />
+</div>
+
+<style lang="postcss">
+  .floorplan__camera-position {
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+
+  .floorplan__camera-rotate {
+    position: absolute;
+    background-repeat: no-repeat;
+    background-size: 100%;
+  }
+</style>

package/libs/floorplan/Components/Compass.js

@@ -20,7 +20,7 @@ import {
 import { COMPASS_IMAGE } from '../Assets/compass';
 
 function add_css(target) {
-	append_styles(target, "svelte-p7yk9v", ".floorplan-plugin__compass.svelte-p7yk9v{position:absolute;left:50%;top:-46px;width:231px;height:41px;will-change:opacity;transform-origin:center 184px}.floorplan-plugin__compass-image.svelte-p7yk9v{width:100%;height:100%;position:absolute;left:0;top:0;opacity:0.1;background-repeat:no-repeat;background-size:100% 100%}.floorplan-plugin__compass-text.svelte-p7yk9v{position:absolute;left:50%;top:15px;transform:translateX(-50%);opacity:0.2;font-weight:bold;font-size:10px;color:#fff}");
+	append_styles(target, "svelte-z9kwkx", ".floorplan-plugin__compass.svelte-z9kwkx{position:absolute;left:50%;top:-2.39583rem;width:12.03125rem;height:2.13542rem;will-change:opacity;transform-origin:center 9.58333rem}.floorplan-plugin__compass-image.svelte-z9kwkx{width:100%;height:100%;position:absolute;left:0;top:0;opacity:0.1;background-repeat:no-repeat;background-size:100% 100%}.floorplan-plugin__compass-text.svelte-z9kwkx{position:absolute;left:50%;top:0.78125rem;transform:translateX(-50%);opacity:0.2;font-weight:bold;font-size:0.52083rem;color:#fff}");
 }
 
 // (14:0) {#if canCompassShow}
@@ -38,10 +38,10 @@ function create_if_block(ctx) {
 			t0 = space();
 			span = element("span");
 			t1 = text(/*northDesc*/ ctx[0]);
-			attr(div0, "class", "floorplan-plugin__compass-image svelte-p7yk9v");
+			attr(div0, "class", "floorplan-plugin__compass-image svelte-z9kwkx");
 			set_style(div0, "background-image", `url(${COMPASS_IMAGE})`);
-			attr(span, "class", "floorplan-plugin__compass-text svelte-p7yk9v");
-			attr(div1, "class", "floorplan-plugin__compass svelte-p7yk9v");
+			attr(span, "class", "floorplan-plugin__compass-text svelte-z9kwkx");
+			attr(div1, "class", "floorplan-plugin__compass svelte-z9kwkx");
 			set_style(div1, "transform", /*compassTransformStyle*/ ctx[2], false);
 		},
 		m(target, anchor) {

package/libs/floorplan/Components/Compass.svelte

@@ -0,0 +1,51 @@
+<script>var _a;
+import { COMPASS_IMAGE } from '../Assets/compass';
+function rad2Deg(rad) {
+    return (rad / Math.PI) * 180;
+}
+export let floorplanData;
+export let northDesc;
+const northRad = (_a = floorplanData.entrance) === null || _a === void 0 ? void 0 : _a.northRad;
+const canCompassShow = typeof northRad === 'number';
+const rotate = !northRad ? 0 : rad2Deg(northRad);
+const compassTransformStyle = `translateX(-50%) translateZ(10px) rotate(${-rotate + 90}deg)`;
+</script>
+
+{#if canCompassShow}
+  <div class="floorplan-plugin__compass" style:transform={compassTransformStyle}>
+    <div class="floorplan-plugin__compass-image" style="background-image: {`url(${COMPASS_IMAGE})`}" />
+    <span class="floorplan-plugin__compass-text"> {northDesc} </span>
+  </div>
+{/if}
+
+<style>
+  .floorplan-plugin__compass {
+    position: absolute;
+    left: 50%;
+    top: -46px;
+    width: 231px;
+    height: 41px;
+    will-change: opacity;
+    transform-origin: center 184px;
+  }
+  .floorplan-plugin__compass-image {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    opacity: 0.1;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+  .floorplan-plugin__compass-text {
+    position: absolute;
+    left: 50%;
+    top: 15px;
+    transform: translateX(-50%);
+    opacity: 0.2;
+    font-weight: bold;
+    font-size: 10px;
+    color: #fff;
+  }
+</style>

package/libs/floorplan/Components/CurrentFloor.js

@@ -30,7 +30,7 @@ import RoomMaterial from './RoomMaterials/RoomMaterial';
 import RoomHighlight from './RoomHighlight/RoomHighlight';
 
 function add_css(target) {
-	append_styles(target, "svelte-1oamigj", ".floorplan-plugin__floor.svelte-1oamigj{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none}.floorplan-plugin__floor--is-current.svelte-1oamigj{opacity:1;pointer-events:auto}");
+	append_styles(target, "svelte-bl8zrz", ".floorplan-plugin__floor.svelte-bl8zrz{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none}.floorplan-plugin__floor--is-current.svelte-bl8zrz{opacity:1;pointer-events:auto}");
 }
 
 // (20:2) {#if hoverEnable}
@@ -265,7 +265,7 @@ function create_fragment(ctx) {
 
 			attr(div, "class", div_class_value = "" + (null_to_empty(`floorplan-plugin__floor${/*isCurrent*/ ctx[0]
 			? ' floorplan-plugin__floor--is-current'
-			: ''}`) + " svelte-1oamigj"));
+			: ''}`) + " svelte-bl8zrz"));
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -374,7 +374,7 @@ function create_fragment(ctx) {
 
 			if (!current || dirty & /*isCurrent*/ 1 && div_class_value !== (div_class_value = "" + (null_to_empty(`floorplan-plugin__floor${/*isCurrent*/ ctx[0]
 			? ' floorplan-plugin__floor--is-current'
-			: ''}`) + " svelte-1oamigj"))) {
+			: ''}`) + " svelte-bl8zrz"))) {
 				attr(div, "class", div_class_value);
 			}
 		},

package/libs/floorplan/Components/CurrentFloor.svelte

@@ -0,0 +1,46 @@
+<script>import { writable } from 'svelte/store';
+import BaseImage from './BaseImage.svelte';
+import RoomLabels from './RoomLabels/RoomLabels.svelte';
+import RuleLabels from './RuleLabels/RuleLabels.svelte';
+import RoomMaterial from './RoomMaterials/RoomMaterial.svelte';
+import RoomHighlight from './RoomHighlight/RoomHighlight.svelte';
+export let isCurrent;
+export let floorIndex;
+export let hoverEnable;
+export let roomLabelsEnable;
+export let ruleLabelsEnable;
+export let floorplanData;
+export let getLabelElement;
+export let adaptiveRoomLabelVisibleEnable;
+const hoveredRoom = writable(undefined);
+</script>
+
+<div class={`floorplan-plugin__floor${isCurrent ? ' floorplan-plugin__floor--is-current' : ''}`}>
+  <RoomMaterial {...{ floorIndex, floorplanData }} />
+  {#if hoverEnable}
+    <RoomHighlight {...{ floorIndex, floorplanData, hoveredRoom }} />
+  {/if}
+  <BaseImage {...{ floorplanData, floorIndex }} />
+  {#if roomLabelsEnable}
+    <RoomLabels {...{ floorplanData, floorIndex, getLabelElement, hoveredRoom, adaptiveRoomLabelVisibleEnable }} />
+  {/if}
+  {#if ruleLabelsEnable}
+    <RuleLabels {...{ floorplanData, floorIndex }} />
+  {/if}
+</div>
+
+<style>
+  .floorplan-plugin__floor {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    pointer-events: none;
+  }
+  .floorplan-plugin__floor--is-current {
+    opacity: 1;
+    pointer-events: auto;
+  }
+</style>

package/libs/floorplan/Components/Main.js

@@ -32,7 +32,7 @@ import Compass from './Compass';
 import CurrentFloor from './CurrentFloor';
 
 function add_css(target) {
-	append_styles(target, "svelte-iyx1nn", ".floorplan-main.svelte-iyx1nn{width:100%;height:100%;pointer-events:none}");
+	append_styles(target, "svelte-86bqav", ".floorplan-main.svelte-86bqav{width:100%;height:100%;pointer-events:none}");
 }
 
 function get_each_context(ctx, list, i) {
@@ -90,7 +90,7 @@ function create_if_block(ctx) {
 			create_component(camera.$$.fragment);
 			t1 = space();
 			if (if_block) if_block.c();
-			attr(div, "class", "floorplan-main svelte-iyx1nn");
+			attr(div, "class", "floorplan-main svelte-86bqav");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);