@realsee/dnalogel 2.1.0-alpha.13 → 2.1.0-alpha.16

package/libs/PanoSpatialTagPlugin/Components/origins.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.50.1 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append_styles,
@@ -19,7 +19,7 @@ import {
 import { currentTarget } from '../store';
 
 function add_css(target) {
-	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}}");
+	append_styles(target, "svelte-19zi46m", ".PanoSpatialTagPlugin__tag-origin.svelte-19zi46m{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-19zi46m-PanoSpatialTagPlugin__tag-origin 1.2s forwards;pointer-events:auto}.PanoSpatialTagPlugin__tag-origin.svelte-19zi46m:after{content:'';position:absolute;top:50%;height:50%;width:2rem;height:2rem;transform:translate(-50%, -50%)}.PanoSpatialTagPlugin__tag-origin-destroy.svelte-19zi46m{transform:translate(-50%, -50%) scale(0.6);animation:svelte-19zi46m-PanoSpatialTagPlugin__tag-origin-destroy 1.2s forwards .7s}@keyframes svelte-19zi46m-PanoSpatialTagPlugin__tag-origin{0%{transform:translate(-50%, -50%) scale(1);opacity:0}100%{transform:translate(-50%, -50%) scale(0.6);opacity:1 }}@keyframes svelte-19zi46m-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,12 +43,12 @@ function create_each_block(ctx) {
 	return {
 		c() {
 			i = element("i");
-			attr(i, "class", "svelte-1kuu68s");
+			attr(i, "class", "svelte-19zi46m");
 			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);
+			set_style(i, "top", style_top);
+			set_style(i, "left", style_left);
+			set_style(i, "visibility", /*origin*/ ctx[3].front ? 'visible' : 'hidden');
 		},
 		m(target, anchor) {
 			insert(target, i, anchor);
@@ -66,15 +66,15 @@ function create_each_block(ctx) {
 			}
 
 			if (dirty & /*origins*/ 1 && style_top !== (style_top = `${/*origin*/ ctx[3].top}%`)) {
-				set_style(i, "top", style_top, false);
+				set_style(i, "top", style_top);
 			}
 
 			if (dirty & /*origins*/ 1 && style_left !== (style_left = `${/*origin*/ ctx[3].left}%`)) {
-				set_style(i, "left", style_left, false);
+				set_style(i, "left", style_left);
 			}
 
 			if (dirty & /*origins*/ 1) {
-				set_style(i, "visibility", /*origin*/ ctx[3].front ? 'visible' : 'hidden', false);
+				set_style(i, "visibility", /*origin*/ ctx[3].front ? 'visible' : 'hidden');
 			}
 		},
 		d(detaching) {

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.50.1 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append,
@@ -22,7 +22,7 @@ import '../typings';
 import { currentTarget } from '../store';
 
 function add_css(target) {
-	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)}}");
+	append_styles(target, "svelte-1i5h9zh", ".PanoSpatialTagPlugin__tag-x.svelte-1i5h9zh.svelte-1i5h9zh{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-1i5h9zh.svelte-1i5h9zh{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-1i5h9zh.svelte-1i5h9zh{position:absolute;left:-1rem;width:2rem;height:100%;overflow:hidden}.PanoSpatialTagPlugin__tag-flagpole.svelte-1i5h9zh.svelte-1i5h9zh{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-1i5h9zh.svelte-1i5h9zh{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-1i5h9zh.svelte-1i5h9zh{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-1i5h9zh .PanoSpatialTagPlugin__tag-line1.svelte-1i5h9zh{animation:svelte-1i5h9zh-PanoSpatialTagPlugin__tag-line1 linear .5s forwards .45s}.PanoSpatialTagPlugin__tag-show.svelte-1i5h9zh .PanoSpatialTagPlugin__tag-line2.svelte-1i5h9zh{animation:svelte-1i5h9zh-PanoSpatialTagPlugin__tag-line2 linear .5s forwards .65s}.PanoSpatialTagPlugin__tag-x.PanoSpatialTagPlugin__tag-upside-down.svelte-1i5h9zh.svelte-1i5h9zh{transform:translate(0, 0)}.PanoSpatialTagPlugin__tag-upside-down.svelte-1i5h9zh .PanoSpatialTagPlugin__tag-line.svelte-1i5h9zh{transform:scaleY(-1)}.PanoSpatialTagPlugin__tag-animate.svelte-1i5h9zh.svelte-1i5h9zh{position:relative;height:100%;overflow:hidden;transform-origin:left top;transition:transform .5s linear}.PanoSpatialTagPlugin__tag-upside-down.svelte-1i5h9zh .PanoSpatialTagPlugin__tag-animate.svelte-1i5h9zh{transform-origin:left bottom}.PanoSpatialTagPlugin__tag-content.svelte-1i5h9zh.svelte-1i5h9zh{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-1i5h9zh .PanoSpatialTagPlugin__tag-content.svelte-1i5h9zh{bottom:0}.PanoSpatialTagPlugin__tag-show.svelte-1i5h9zh .PanoSpatialTagPlugin__tag-flagpole.svelte-1i5h9zh{opacity:1;transform:translate(-50%, 0) scaleY(1)}.PanoSpatialTagPlugin__tag-upside-down.svelte-1i5h9zh .PanoSpatialTagPlugin__tag-shadow.svelte-1i5h9zh{top:unset;bottom:-15rem}.PanoSpatialTagPlugin__tag-show.svelte-1i5h9zh .PanoSpatialTagPlugin__tag-shadow.svelte-1i5h9zh{opacity:.32}.PanoSpatialTagPlugin__tag-show.svelte-1i5h9zh .PanoSpatialTagPlugin__tag-content.svelte-1i5h9zh{transform:translate(0, 0)}.PanoSpatialTagPlugin__tag-hide.svelte-1i5h9zh .PanoSpatialTagPlugin__tag-flagpole.svelte-1i5h9zh{opacity:0;transform:translate(-50%, 60%) scaleY(0);transition:transform .5s .55s, opacity .4s .55s}.PanoSpatialTagPlugin__tag-hide.svelte-1i5h9zh .PanoSpatialTagPlugin__tag-shadow.svelte-1i5h9zh{opacity:0;transition:opacity .8s}.PanoSpatialTagPlugin__tag-hide.svelte-1i5h9zh .PanoSpatialTagPlugin__tag-content.svelte-1i5h9zh{transform:translate(-100%, 0);transition:transform .6s cubic-bezier(.53,.06,.88,.59)}.PanoSpatialTagPlugin__tag-hide.svelte-1i5h9zh .PanoSpatialTagPlugin__tag-content .svelte-1i5h9zh{pointer-events:none}.PanoSpatialTagPlugin__tag-hide.svelte-1i5h9zh .PanoSpatialTagPlugin__tag-line1.svelte-1i5h9zh{opacity:0.5;transform:translate(-50%, 10%) scaleY(0);animation:svelte-1i5h9zh-PanoSpatialTagPlugin__tag-line1-hide linear .28s forwards .3s}.PanoSpatialTagPlugin__tag-hide.svelte-1i5h9zh .PanoSpatialTagPlugin__tag-line2.svelte-1i5h9zh{opacity:0.5;transform:translate(-50%, 0) scaleY(0);animation:svelte-1i5h9zh-PanoSpatialTagPlugin__tag-line2-hide linear .28s forwards .45s}@keyframes svelte-1i5h9zh-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-1i5h9zh-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-1i5h9zh-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-1i5h9zh-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-eb8bdm");
+			attr(div0, "class", "PanoSpatialTagPlugin__tag-shadow svelte-1i5h9zh");
 			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-eb8bdm");
+			attr(i0, "class", "PanoSpatialTagPlugin__tag-flagpole svelte-1i5h9zh");
 			set_style(i0, "width", /*lineWidthZoom*/ ctx[4] + "rem");
-			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");
+			attr(i1, "class", "PanoSpatialTagPlugin__tag-line1 svelte-1i5h9zh");
+			attr(i2, "class", "PanoSpatialTagPlugin__tag-line2 svelte-1i5h9zh");
+			attr(div1, "class", "PanoSpatialTagPlugin__tag-line svelte-1i5h9zh");
+			attr(div2, "class", "PanoSpatialTagPlugin__tag-content svelte-1i5h9zh");
+			attr(div3, "class", "PanoSpatialTagPlugin__tag-animate svelte-1i5h9zh");
 			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-eb8bdm");
+			attr(div4, "class", "svelte-1i5h9zh");
 			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/PanoTagPlugin/Components/Common/Arrow.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.50.1 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	add_render_callback,

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>

package/libs/PanoTagPlugin/Components/Common/Audio.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.50.1 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	add_render_callback,
@@ -35,7 +35,7 @@ import Shadow from './Shadow';
 import { getContext } from 'svelte';
 
 function add_css(target) {
-	append_styles(target, "svelte-tlcvd7", ".audio.svelte-tlcvd7.svelte-tlcvd7{position:relative;width:100%;height:100%;cursor:pointer}@-webkit-keyframes svelte-tlcvd7-playing{25%{background-image:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='9' r='8' transform='translate(-1 -1)' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E\")}50%{background-image:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM5.533 6.685L4.169 8.049l1.414 1.413a2.078 2.078 0 0 0-.05-2.777z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E\")}75%{background-image:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm-.656 4.874l-.906.905A3.35 3.35 0 0 1 7.369 8.1c0 .875-.333 1.67-.88 2.268l.906.906A4.628 4.628 0 0 0 8.65 8.101a4.627 4.627 0 0 0-1.306-3.227zm-1.811 1.81L4.169 8.05l1.414 1.413a2.078 2.078 0 0 0-.05-2.777z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E\")}}@keyframes svelte-tlcvd7-playing{25%{background-image:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='9' r='8' transform='translate(-1 -1)' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E\")}50%{background-image:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM5.533 6.685L4.169 8.049l1.414 1.413a2.078 2.078 0 0 0-.05-2.777z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E\")}75%{background-image:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm-.656 4.874l-.906.905A3.35 3.35 0 0 1 7.369 8.1c0 .875-.333 1.67-.88 2.268l.906.906A4.628 4.628 0 0 0 8.65 8.101a4.627 4.627 0 0 0-1.306-3.227zm-1.811 1.81L4.169 8.05l1.414 1.413a2.078 2.078 0 0 0-.05-2.777z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E\")}}.paused.svelte-tlcvd7 .audio-icon.svelte-tlcvd7{-webkit-animation:none;animation:none}.audio-icon.svelte-tlcvd7.svelte-tlcvd7{width:100%;height:100%;border-radius:50%;background-size:100%;-webkit-animation:svelte-tlcvd7-playing 2s steps(1) infinite;animation:svelte-tlcvd7-playing 2s steps(1) infinite;background-image:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm1.428 2.79l-.953.952a6.222 6.222 0 0 1 1.775 4.36c0 1.571-.58 3.006-1.538 4.103l-.184.202.793.794a7.344 7.344 0 0 0 2.21-5.26A7.341 7.341 0 0 0 9.428 2.79zM7.344 4.873l-.906.905A3.35 3.35 0 0 1 7.369 8.1c0 .802-.28 1.537-.748 2.115l-.132.153.906.906A4.628 4.628 0 0 0 8.65 8.101a4.627 4.627 0 0 0-1.306-3.227zm-1.811 1.81L4.169 8.05l1.414 1.413a2.078 2.078 0 0 0-.05-2.777z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E\")}");
+	append_styles(target, "svelte-1ku3wt4", ".audio.svelte-1ku3wt4.svelte-1ku3wt4{position:relative;width:100%;height:100%;cursor:pointer}@keyframes svelte-1ku3wt4-playing{25%{background-image:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='9' r='8' transform='translate(-1 -1)' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E\")}50%{background-image:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM5.533 6.685L4.169 8.049l1.414 1.413a2.078 2.078 0 0 0-.05-2.777z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E\")}75%{background-image:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm-.656 4.874l-.906.905A3.35 3.35 0 0 1 7.369 8.1c0 .875-.333 1.67-.88 2.268l.906.906A4.628 4.628 0 0 0 8.65 8.101a4.627 4.627 0 0 0-1.306-3.227zm-1.811 1.81L4.169 8.05l1.414 1.413a2.078 2.078 0 0 0-.05-2.777z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E\")}}.paused.svelte-1ku3wt4 .audio-icon.svelte-1ku3wt4{animation:none}.audio-icon.svelte-1ku3wt4.svelte-1ku3wt4{width:100%;height:100%;border-radius:50%;background-size:100%;animation:svelte-1ku3wt4-playing 2s steps(1) infinite;background-image:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm1.428 2.79l-.953.952a6.222 6.222 0 0 1 1.775 4.36c0 1.571-.58 3.006-1.538 4.103l-.184.202.793.794a7.344 7.344 0 0 0 2.21-5.26A7.341 7.341 0 0 0 9.428 2.79zM7.344 4.873l-.906.905A3.35 3.35 0 0 1 7.369 8.1c0 .802-.28 1.537-.748 2.115l-.132.153.906.906A4.628 4.628 0 0 0 8.65 8.101a4.627 4.627 0 0 0-1.306-3.227zm-1.811 1.81L4.169 8.05l1.414 1.413a2.078 2.078 0 0 0-.05-2.777z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E\")}");
 }
 
 // (34:0) {#if unfolded}
@@ -71,11 +71,11 @@ function create_if_block(ctx) {
 			div0 = element("div");
 			t1 = space();
 			audio_1 = element("audio");
-			attr(div0, "class", "audio-icon svelte-tlcvd7");
+			attr(div0, "class", "audio-icon svelte-1ku3wt4");
 			audio_1.controls = audio_1_controls_value = false;
 			attr(audio_1, "playsinline", "");
 			if (!src_url_equal(audio_1.src, audio_1_src_value = /*url*/ ctx[3])) attr(audio_1, "src", audio_1_src_value);
-			attr(div1, "class", "audio svelte-tlcvd7");
+			attr(div1, "class", "audio svelte-1ku3wt4");
 			toggle_class(div1, "paused", /*paused*/ ctx[6]);
 		},
 		m(target, anchor) {

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

@@ -0,0 +1,82 @@
+<script>import { fade } from 'svelte/transition';
+import { cubicInOut } from 'svelte/easing';
+import Shadow from './Shadow.svelte';
+import { getContext } from 'svelte';
+export let inDelay = 0;
+export let outDelay = 0;
+export let duration = 0;
+export let url;
+export let unfolded;
+export let mediaStore;
+export let hooksInfo = {};
+const hooks = getContext('hooks');
+let audio;
+let paused = true;
+mediaStore.subscribe(({ currentMediaUrl }) => {
+    if (currentMediaUrl !== url)
+        audio === null || audio === void 0 ? void 0 : audio.pause();
+});
+$: {
+    if (!unfolded)
+        audio === null || audio === void 0 ? void 0 : audio.pause();
+}
+function onClick(event) {
+    mediaStore.set({ currentMediaUrl: url });
+    if (!audio)
+        return;
+    hooks.emit('click', Object.assign({ event, target: 'AudioTagPlayIcon', audioInstance: audio }, hooksInfo));
+    audio.paused ? audio.play() : audio.pause();
+    audio.onplay = (event) => hooks.emit('playStateChange', Object.assign({ event, state: 'playing', mediaInstance: audio }, hooksInfo));
+    audio.onpause = (event) => hooks.emit('playStateChange', Object.assign({ event, state: 'paused', mediaInstance: audio }, hooksInfo));
+}
+</script>
+
+{#if unfolded}
+  <div
+    class="audio"
+    class:paused
+    on:click|stopPropagation={onClick}
+    in:fade|local={{ duration, delay: inDelay, easing: cubicInOut }}
+    out:fade|local={{ duration, delay: outDelay, easing: cubicInOut }}
+  >
+    <Shadow center blurRadius={15} spreadRadius={6} />
+    <div class="audio-icon" />
+    <audio bind:this={audio} bind:paused controls={false} playsInline src={url} />
+  </div>
+{/if}
+
+<style>
+  .audio {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
+
+  @keyframes playing {
+    25% {
+      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='9' r='8' transform='translate(-1 -1)' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+    }
+
+    50% {
+      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM5.533 6.685L4.169 8.049l1.414 1.413a2.078 2.078 0 0 0-.05-2.777z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+    }
+
+    75% {
+      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm-.656 4.874l-.906.905A3.35 3.35 0 0 1 7.369 8.1c0 .875-.333 1.67-.88 2.268l.906.906A4.628 4.628 0 0 0 8.65 8.101a4.627 4.627 0 0 0-1.306-3.227zm-1.811 1.81L4.169 8.05l1.414 1.413a2.078 2.078 0 0 0-.05-2.777z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+    }
+  }
+
+  .paused .audio-icon {
+    animation: none;
+  }
+
+  .audio-icon {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-size: 100%;
+    animation: playing 2s steps(1) infinite;
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm1.428 2.79l-.953.952a6.222 6.222 0 0 1 1.775 4.36c0 1.571-.58 3.006-1.538 4.103l-.184.202.793.794a7.344 7.344 0 0 0 2.21-5.26A7.341 7.341 0 0 0 9.428 2.79zM7.344 4.873l-.906.905A3.35 3.35 0 0 1 7.369 8.1c0 .802-.28 1.537-.748 2.115l-.132.153.906.906A4.628 4.628 0 0 0 8.65 8.101a4.627 4.627 0 0 0-1.306-3.227zm-1.811 1.81L4.169 8.05l1.414 1.413a2.078 2.078 0 0 0-.05-2.777z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
+  }
+</style>