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

package/libs/PanoSpatialTagPlugin/Components/tag.svelte

@@ -1,292 +0,0 @@
-<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/PanoTagPlugin/Components/Common/Arrow.svelte

@@ -1,56 +0,0 @@
-<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.svelte

@@ -1,82 +0,0 @@
-<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.svelte

@@ -1,36 +0,0 @@
-<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.svelte

@@ -1,36 +0,0 @@
-<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.svelte

@@ -1,70 +0,0 @@
-<script>import { fly } from 'svelte/transition';
-import { Image_Play } from '../../Assets/Icon';
-import { linear } from 'svelte/easing';
-import { notNil } from '../../../shared-utils/isNil';
-export let mediaData;
-export let inDelay = 0;
-export let outDelay = 0;
-export let duration = 0;
-export let unfolded = true;
-export let animation = true;
-export let objectFit = 'cover';
-export let enableCarousel = true;
-$: mediaDataList = (enableCarousel ? mediaData : [mediaData[0]]).filter(notNil);
-</script>
-
-{#if unfolded}
-  <div
-    class="media"
-    class:unfolded
-    in:fly|local={animation ? { y: 4, duration, delay: inDelay, easing: linear } : undefined}
-    out:fly|local={animation ? { y: 4, duration, delay: outDelay, easing: linear } : undefined}
-  >
-    {#each mediaDataList as media}
-      <div class="carousel-item" style={`object-fit: ${objectFit};`}>
-        {#if media.type === 'Image'}
-          <img class="media-content carousel-indicator-item" src={media.url} alt={media.name} />
-        {:else if media.type === 'Video' && media.videoCoverUrl}
-          <img class="media-content" src={media.videoCoverUrl} alt={media.name} />
-        {:else if media.type === 'Video' && !media.videoCoverUrl}
-          <!-- eslint-disable-next-line prettier/prettier -->
-            <video class="media-content" src={media.url} poster={media.videoCoverUrl} playsinline paused loop={false} preload="auto" crossorigin="" controls={false} muted />
-        {/if}
-        {#if media.type === 'Video'}
-          <div class="video-icon" style="background-image: url({Image_Play});" />
-        {/if}
-      </div>
-    {/each}
-  </div>
-{/if}
-
-<style>
-  .media {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    overflow: hidden;
-    border-radius: 2px;
-  }
-
-  .carousel-item {
-    height: 100%;
-  }
-
-  .media-content {
-    width: 100%;
-    height: 100%;
-    user-select: none;
-    object-fit: inherit;
-  }
-
-  .video-icon {
-    width: 28px;
-    height: 28px;
-    background-size: 100%;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-</style>

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

@@ -1,56 +0,0 @@
-<script>import Text from '../Common/Text.svelte';
-import Arrow from '../Common/Arrow.svelte';
-export let visible = false;
-export let textUnfolded = false;
-export let textItems;
-let textElement;
-let translateY = 0;
-let lineHeight = 0;
-let textHeight = 0;
-$: translateY = textUnfolded ? lineHeight - textHeight : 0;
-$: transform = `translateY(${translateY}px)`;
-$: arrowDirection = textUnfolded ? 'left' : 'right';
-$: foldTextDelay = textUnfolded ? 450 : 0;
-$: {
-    if (textElement) {
-        const { height: heightString, lineHeight: lineHeightString } = getComputedStyle(textElement);
-        textHeight = Number(heightString.replace('px', ''));
-        lineHeight = Number(lineHeightString.replace('px', ''));
-    }
-}
-</script>
-
-{#each textItems as { id, content } (id)}
-  <div bind:this={textElement} class="text" style:transform>
-    <Text unfolded={visible} {content} inDelay={500} outDelay={foldTextDelay} />
-  </div>
-{/each}
-{#if lineHeight < textHeight}
-  <div class="arrow">
-    <Arrow direction={arrowDirection} {visible} inDelay={600} duration={1000} />
-  </div>
-{/if}
-
-<style>
-  .text {
-    pointer-events: auto;
-    box-sizing: border-box;
-    display: inline-block;
-    max-width: 120px;
-    transition: transform 400ms ease-in-out;
-    font-size: 12px;
-    line-height: 18px;
-    white-space: initial;
-    cursor: pointer;
-  }
-
-  .arrow {
-    pointer-events: auto;
-    display: inline-block;
-    vertical-align: top;
-    width: 14px;
-    height: 14px;
-    margin-left: 2px;
-    margin-top: 2px;
-  }
-</style>