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

package/libs/PanoSpatialTagPlugin/Components/origins.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.51.0 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append_styles,
@@ -46,9 +46,9 @@ function create_each_block(ctx) {
 			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.51.0 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append,

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.51.0 */
+/* 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.51.0 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	add_render_callback,

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>

package/libs/PanoTagPlugin/Components/Common/Line/Polyline.js

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

package/libs/PanoTagPlugin/Components/Common/Line/Polyline.svelte

@@ -0,0 +1,36 @@
+<script>import uuid from '../../../../shared-utils/uuid';
+import { draw } from 'svelte/transition';
+import { cubicOut, cubicInOut } from 'svelte/easing';
+export let inDelay = 0;
+export let duration = 0;
+export let outDelay = 0;
+export let unfolded;
+const defsID = uuid();
+</script>
+
+<svg class="line" viewBox="0 0 105 21">
+  <defs>
+    <linearGradient id={defsID} gradientUnits="userSpaceOnUse">
+      <stop offset="25%" stop-color="white" stop-opacity="1" />
+      <stop offset="100%" stop-color="white" stop-opacity="0.5" />
+    </linearGradient>
+  </defs>
+  {#if unfolded}
+    <path
+      in:draw|local={{ duration, delay: inDelay, easing: cubicOut }}
+      out:draw|local={{ duration, delay: outDelay, easing: cubicInOut }}
+      fill="none"
+      stroke="url(#{defsID})"
+      stroke-width="1"
+      d="M0 21 L14 0.5 L105 0.5"
+    />
+  {/if}
+</svg>
+
+<style>
+  .line {
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+</style>

package/libs/PanoTagPlugin/Components/Common/Line/Straight.js

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

package/libs/PanoTagPlugin/Components/Common/Line/Straight.svelte

@@ -0,0 +1,36 @@
+<script>import { draw } from 'svelte/transition';
+import uuid from '../../../../shared-utils/uuid';
+export let inDelay = 0;
+export let duration = 0;
+export let outDelay = 0;
+export let unfolded;
+const defsID = uuid();
+</script>
+
+<svg class="straight-line" viewBox="0 0 148 1" preserveAspectRatio="none">
+  <defs>
+    <linearGradient id={defsID} gradientUnits="userSpaceOnUse">
+      <stop offset="25%" stop-color="white" stop-opacity="1" />
+      <stop offset="100%" stop-color="white" stop-opacity="0.5" />
+    </linearGradient>
+  </defs>
+  {#if unfolded}
+    <path
+      in:draw|local={{ duration, delay: inDelay }}
+      out:draw|local={{ duration, delay: outDelay }}
+      fill="none"
+      stroke="url(#{defsID})"
+      stroke-width="1"
+      d="M0 0.5 L 148 0.5"
+    />
+  {/if}
+</svg>
+
+<style>
+  .straight-line {
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: visible;
+  }
+</style>

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

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