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

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

@@ -0,0 +1,70 @@
+<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

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

package/libs/PanoTagPlugin/Components/Common/Point/CustomPoint.svelte

@@ -0,0 +1,120 @@
+<script>import 'svelte/easing';
+import Shadow from '../Shadow.svelte';
+export let unfolded;
+export let iconUrl;
+export let foldDelay = 800;
+$: folded = !unfolded;
+</script>
+
+<div class="point" class:folded class:unfolded>
+  <Shadow center blurRadius={12} spreadRadius={5} />
+  <!-- 小点 -->
+  <div class="small-point" style:transition-delay={folded ? foldDelay + 'ms' : '0ms'} />
+  <!-- 带图标的大圈 -->
+  <div class="big-point" style="--iconUrl: url({iconUrl});" style:transition-delay={folded ? foldDelay + 'ms' : '0ms'} />
+</div>
+
+<style>
+  .point {
+    width: 24px;
+    height: 24px;
+  }
+  .small-point,
+  .big-point {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: all 500ms;
+  }
+  .big-point {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+
+  .folded.point {
+    animation: breathing 2s linear infinite;
+  }
+
+  .big-point::before,
+  .big-point::after {
+    content: '';
+    display: block;
+    position: absolute;
+    background-size: contain;
+    background-repeat: no-repeat;
+    pointer-events: none;
+  }
+
+  /* 光圈 */
+  .big-point::before {
+    width: 100%;
+    height: 100%;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAqFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8j1z1tAAAAOHRSTlMABgoNFBsYIhEmHyksMoJ6RZ5aXzpnU03AtqaZjLuGN+zcifnW0cjEqnA+lOZzbWLhkH6i8rGuagnOwPMAAAQOSURBVFjDrZiHctpAEIYXYzvGOvXeUe+IYuD93ywrJAIhFJX8M8zoBHzz757utHvwTETJHJPfGQZfWJXILWCMPuqNbuu6vj+khrHjed40TWvFfQ2jvCl8nGha6lQCl7s07UqcUlfOZrOxVtKsN2a+0uJYK+ScEIqiFifhBSGSsnJ8f8u99cLMVnEUHTKXIOMX6vuk5gpphFYyhmHzHpzcDqNUJGgEER+oz5OaK8ShNcIdt+zx1ys7lhdqiDlRkPF+JaSdWIhasaz6lLPQ1qFDIwYpDeTr62veCS8bGLIQRSsVK78/5nDeOlYIYhovHeOtU0dDXw2KSGiKesQRyjJ10Q66QcyZMTvpTEMUumpMieyWvs9ZLZcmodAOYlorsysBflpjiEJTFBEY5+7sicul34T1iak5U25momN9Ya4wPCT57r8cteW0dk4YuKMTqjXVkgjciFr+8B3ngnmM6kii5X/efB0F+jUHnuiatLJY+Et84EnUNacfiaKZjQhX4oJAwPlqOB3mJaoh4dxxG5Nc3Q8DkywunP6kBalN53J7G3g0JqiNC3qpjQ7TRPvmn2U3L3/kU4JaTn/SKU0qb76dDf0kGNjHJbD+wX1gcMxO6fZVrzXUcQaROkvt3+pljIYugQ0LDi1ZBgeN9JK9MjTCkmgwgPou19I5QzBI5yy5RvqOw6xMMbKzoeGWmnQfBBwa6woj6wyNsYSx7R0chWuOwsjOqR6aboyNyvcpgOsl3ZzNhoNm3bztdAK1x5NuzmCwunkjjq4AEzKXFI1NUmVnwIfydJBoW7CPVAR1uR6XbVwlmgF2xF1yPTbbubYHLZamgyTNhiSmp4PoJIEk+R+gOAFb+x+hxRoctHw6iItsMLT/Mf3RHixbnP5AyhEPmZ1NB+E6A0V3pi9aPqyB6Pz0bSTxXID0kE/d2DgvxBFzEKdutdXawJGSMlM3/3Sd4fA93bnTXkfSuvwGFGOI016QbKm3VdbOn/bKjpd1e6Pg1SlFhPzjdXWNwjNTyprkhz33i4Wpji600FA5h05q4Ywv/bxge7mNRe7YYtQMwqt/kMLixpXHQhBwcCXBYukxBbvkBTv4S5V/HNNC6EF089tPxxGHNzV8sKTgRhSzVYa2Wf5yeadHphlWGdb4IUeEO5K2SHrUiqJuW9GiLFdwVzRbCXTf5tg11mvhYdufZbLUr11XEi/k4KHexUxWSY8DBCby7AU8E3eUhfzVkYZgR6H/agF8C3KNqCeHLIIRR7oEr0XXsixy9P1jH/doJLF2nPXbIlw5y1aC6t4eROW1pduaLs/7b6NEqFiWrWpBzaXuaOy4Nfe6bRfqGwzSXBJZhnF8y9oUhcnzOyM9pI7wCWP0LSkyy1iFWWwsFp8LeKLfd4doRyTLRacAAAAASUVORK5CYII=);
+  }
+  .folded .big-point::before {
+    animation: rotate 2s linear infinite;
+  }
+  /* 自定义icon */
+  .big-point::after {
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    background-image: var(--iconUrl);
+  }
+
+  .small-point::before {
+    content: '';
+    display: block;
+    position: absolute;
+    pointer-events: none;
+    width: 4px;
+    height: 4px;
+    border-radius: 100%;
+    background-color: white;
+  }
+
+  /** 动画 */
+  .folded .big-point {
+    opacity: 1;
+    scale: 1;
+  }
+
+  .unfolded .big-point {
+    opacity: 0;
+    scale: 0;
+  }
+
+  .folded .small-point {
+    opacity: 0;
+    scale: 6;
+  }
+
+  .unfolded .small-point {
+    opacity: 1;
+    scale: 1;
+  }
+
+  @keyframes rotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes breathing {
+    0% {
+      transform: scale(1);
+    }
+    25% {
+      transform: scale(0.9);
+    }
+    50% {
+      transform: scale(1);
+    }
+  }
+</style>

package/libs/PanoTagPlugin/Components/Common/Point/DefaultPoint.svelte

@@ -0,0 +1,81 @@
+<script>import 'svelte/easing';
+import Shadow from '../Shadow.svelte';
+export let unfolded;
+/** 收起时的delay */
+export let foldDelay = 800;
+$: folded = !unfolded;
+</script>
+
+<div class="point" class:unfolded class:folded>
+  <Shadow center blurRadius={12} spreadRadius={5} />
+  <!-- 小点 -->
+  <div class="small-point" style:transition-delay={folded ? foldDelay + 'ms' : '0ms'} />
+  <!-- 大圈 -->
+  <div class="big-point" style:transition-delay={folded ? foldDelay + 'ms' : '0ms'} />
+</div>
+
+<style>
+  .point {
+    width: 16px;
+    height: 16px;
+  }
+  .small-point,
+  .big-point {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transition: all 500ms;
+  }
+
+  .big-point::before,
+  .big-point::after {
+    content: '';
+    display: block;
+    position: absolute;
+    background-size: contain;
+    background-repeat: no-repeat;
+    pointer-events: none;
+  }
+
+  /* 光圈 */
+  .big-point::before {
+    width: 100%;
+    height: 100%;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAqFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8j1z1tAAAAOHRSTlMABgoNFBsYIhEmHyksMoJ6RZ5aXzpnU03AtqaZjLuGN+zcifnW0cjEqnA+lOZzbWLhkH6i8rGuagnOwPMAAAQOSURBVFjDrZiHctpAEIYXYzvGOvXeUe+IYuD93ywrJAIhFJX8M8zoBHzz757utHvwTETJHJPfGQZfWJXILWCMPuqNbuu6vj+khrHjed40TWvFfQ2jvCl8nGha6lQCl7s07UqcUlfOZrOxVtKsN2a+0uJYK+ScEIqiFifhBSGSsnJ8f8u99cLMVnEUHTKXIOMX6vuk5gpphFYyhmHzHpzcDqNUJGgEER+oz5OaK8ShNcIdt+zx1ys7lhdqiDlRkPF+JaSdWIhasaz6lLPQ1qFDIwYpDeTr62veCS8bGLIQRSsVK78/5nDeOlYIYhovHeOtU0dDXw2KSGiKesQRyjJ10Q66QcyZMTvpTEMUumpMieyWvs9ZLZcmodAOYlorsysBflpjiEJTFBEY5+7sicul34T1iak5U25momN9Ya4wPCT57r8cteW0dk4YuKMTqjXVkgjciFr+8B3ngnmM6kii5X/efB0F+jUHnuiatLJY+Et84EnUNacfiaKZjQhX4oJAwPlqOB3mJaoh4dxxG5Nc3Q8DkywunP6kBalN53J7G3g0JqiNC3qpjQ7TRPvmn2U3L3/kU4JaTn/SKU0qb76dDf0kGNjHJbD+wX1gcMxO6fZVrzXUcQaROkvt3+pljIYugQ0LDi1ZBgeN9JK9MjTCkmgwgPou19I5QzBI5yy5RvqOw6xMMbKzoeGWmnQfBBwa6woj6wyNsYSx7R0chWuOwsjOqR6aboyNyvcpgOsl3ZzNhoNm3bztdAK1x5NuzmCwunkjjq4AEzKXFI1NUmVnwIfydJBoW7CPVAR1uR6XbVwlmgF2xF1yPTbbubYHLZamgyTNhiSmp4PoJIEk+R+gOAFb+x+hxRoctHw6iItsMLT/Mf3RHixbnP5AyhEPmZ1NB+E6A0V3pi9aPqyB6Pz0bSTxXID0kE/d2DgvxBFzEKdutdXawJGSMlM3/3Sd4fA93bnTXkfSuvwGFGOI016QbKm3VdbOn/bKjpd1e6Pg1SlFhPzjdXWNwjNTyprkhz33i4Wpji600FA5h05q4Ywv/bxge7mNRe7YYtQMwqt/kMLixpXHQhBwcCXBYukxBbvkBTv4S5V/HNNC6EF089tPxxGHNzV8sKTgRhSzVYa2Wf5yeadHphlWGdb4IUeEO5K2SHrUiqJuW9GiLFdwVzRbCXTf5tg11mvhYdufZbLUr11XEi/k4KHexUxWSY8DBCby7AU8E3eUhfzVkYZgR6H/agF8C3KNqCeHLIIRR7oEr0XXsixy9P1jH/doJLF2nPXbIlw5y1aC6t4eROW1pduaLs/7b6NEqFiWrWpBzaXuaOy4Nfe6bRfqGwzSXBJZhnF8y9oUhcnzOyM9pI7wCWP0LSkyy1iFWWwsFp8LeKLfd4doRyTLRacAAAAASUVORK5CYII=);
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+  .small-point::before {
+    content: '';
+    display: block;
+    position: absolute;
+    pointer-events: none;
+    width: 6px;
+    height: 6px;
+    border-radius: 100%;
+    background-color: white;
+  }
+
+  /** 动画 */
+  .unfolded .big-point {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  .folded .big-point {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .unfolded .small-point {
+    transform: scale(0.6);
+  }
+
+  .folded .small-point {
+    transform: scale(1);
+  }
+</style>

package/libs/PanoTagPlugin/Components/Common/Point/PointSwitch.svelte

@@ -0,0 +1,30 @@
+<script>var _a, _b;
+import { ContentType } from '../../../typings';
+import CustomPoint from './CustomPoint.svelte';
+import DefaultPoint from './DefaultPoint.svelte';
+export let tag;
+$: foldDelay = (_b = (_a = tag.style) === null || _a === void 0 ? void 0 : _a.foldedPointDelay) !== null && _b !== void 0 ? _b : (tag.contentType === ContentType.Marketing ? 600 : undefined);
+</script>
+
+{#if tag.pointTagStyle?.leftPercent && tag.pointTagStyle?.topPercent && tag.enabled !== false && tag.state && tag.temporaryState?.visible !== false}
+  {#if tag.contentType !== ContentType.Link}
+    <!-- 标签比较小，加一个大一点的点击区域 -->
+    <div class="point-click-helper" />
+    {#if tag.style?.point?.style === 'CustomIcon' && tag.style?.point?.iconUrl}
+      <CustomPoint iconUrl={tag.style.point.iconUrl} unfolded={tag.state.unfolded} {foldDelay} />
+    {:else}
+      <DefaultPoint unfolded={tag.state.unfolded} {foldDelay} />
+    {/if}
+  {/if}
+{/if}
+
+<style>
+  .point-click-helper {
+    width: 40px;
+    height: 40px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+</style>

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

@@ -0,0 +1,46 @@
+<script>import { fade } from 'svelte/transition';
+export let inDelay = 1000;
+export let outDelay = 1000;
+export let visible = true;
+export let width = 0;
+export let height = 0;
+export let left = 0;
+export let bottom = 0;
+export let center = false;
+export let horizontalCenter = false;
+export let verticalCenter = false;
+export let blurRadius;
+export let spreadRadius;
+export let opacity = 0.15;
+// export let zIndex = -1
+// eslint-disable-next-line no-undef-init
+export let zIndex = undefined;
+function px2rem(value) {
+    return typeof value === 'number' ? value / 16 + 'rem' : value;
+}
+</script>
+
+{#if visible}
+  <div
+    class="shadow"
+    style:width={px2rem(width)}
+    style:height={px2rem(height)}
+    style:z-index={zIndex}
+    style={`
+      left:${px2rem(left)};
+      bottom:${px2rem(bottom)};
+      box-shadow: 0 0 ${px2rem(blurRadius)} ${px2rem(spreadRadius)} rgba(0, 0, 0, ${opacity});
+      ${horizontalCenter ? 'transform: translateX(-50%); left: 50%' : ''}
+      ${verticalCenter ? 'transform: translateX(-50%); top: 50%' : ''}
+      ${center ? 'transform: translate(-50%, -50%); left: 50%; top: 50%;' : ''}
+    `}
+    in:fade|local={{ duration: inDelay }}
+    out:fade|local={{ duration: outDelay }}
+  />
+{/if}
+
+<style>
+  .shadow {
+    position: absolute;
+  }
+</style>

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

@@ -0,0 +1,69 @@
+<script>import anime from 'animejs';
+import { onMount } from 'svelte';
+import { notNil } from '../../../shared-utils/isNil';
+import { searchFirstValueSmallThanLastValue } from '../../utils';
+export let inDelay = 0;
+export let outDelay = 0;
+export let content;
+export let unfolded;
+let timeoutID;
+let spanEleList = [];
+let openAnimeIns;
+$: contentList = content.slice().split('');
+function onUnfoldedUpdate(unfolded) {
+    clearTimeout(timeoutID);
+    timeoutID = setTimeout(function () {
+        if (!openAnimeIns)
+            return;
+        if ((unfolded && openAnimeIns.reversed) || (!unfolded && !openAnimeIns.reversed)) {
+            openAnimeIns.reverse();
+            openAnimeIns.play();
+        }
+    }, unfolded ? inDelay : outDelay);
+}
+onMount(function () {
+    /** 计算第一行的最后一个字的index */
+    const firstLineLastIndex = (() => {
+        const resultIndex = searchFirstValueSmallThanLastValue((index) => spanEleList[index].getBoundingClientRect().x, [Math.min(spanEleList.length - 1, 10), Math.min(spanEleList.length - 1, 30)]);
+        if (resultIndex > 0)
+            return resultIndex;
+    })();
+    /** 文字依次从底部旋转出现
+     * @member duration 单个文字的动画时间是 400ms
+     * @member scale    大小缩放 [0.7 - 1]
+     * @member rotate   旋转 [20 - 0]deg
+     * @member opacity  透明度 [0 - 1]
+     * @member translateX  水平方向位移 [4 - 0]px
+     * @member translateY  水平方向位移 [10 - 0]px
+     * @member delay  动画开始的延时是当前元素的索引 index * 50ms
+     */
+    openAnimeIns = anime({
+        targets: spanEleList.filter(notNil).slice(0, firstLineLastIndex),
+        autoplay: false,
+        duration: 400,
+        scale: [0.7, 1],
+        rotate: [20, 0],
+        opacity: [0, 1],
+        translateX: [4, 0],
+        translateY: [10, 0],
+        delay: anime.stagger(50),
+        easing: 'easeInOutCubic',
+    });
+    if (unfolded)
+        openAnimeIns.seek(openAnimeIns.duration);
+});
+$: {
+    onUnfoldedUpdate(unfolded);
+}
+</script>
+
+{#each contentList as item, index}
+  <span bind:this={spanEleList[index]} class="text-char">{item}</span>
+{/each}
+
+<style>
+  .text-char {
+    display: inline-block;
+    text-shadow: 2px 0px 8px rgba(0, 0, 0, 0.15);
+  }
+</style>

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

@@ -0,0 +1,42 @@
+<script>import { cubicInOut } from 'svelte/easing';
+export let index;
+export let rightIndex;
+export let visible;
+export let content;
+function fly(node, { duration }) {
+    return {
+        duration,
+        delay: index * 40,
+        css: (t) => {
+            const eased = cubicInOut(t);
+            return `
+          transform: translate(${4 * (1 - eased)}px, ${10 * (1 - eased)}px) scale(${0.7 + eased * 0.3}) rotate(${20 * (1 - eased)}deg);
+          opacity: ${eased};`;
+        },
+    };
+}
+function flyOut(node, { duration }) {
+    return {
+        duration,
+        delay: rightIndex * 40,
+        css: (t) => {
+            const eased = cubicInOut(t);
+            return `
+          transform: translate(${4 * (1 - eased)}px, ${10 * (1 - eased)}px) scale(${0.7 + eased * 0.3}) rotate(${20 * (1 - eased)}deg);
+          opacity: ${eased};`;
+        },
+    };
+}
+</script>
+
+{#if visible}
+  <span class="text-char" in:fly|local={{ duration: 400 }} out:flyOut|local={{ duration: 400 }}>{content}</span>
+{/if}
+
+<style>
+  .text-char {
+    opacity: 1;
+    display: inline-block;
+    transform: translate(0, 0) scale(1) rotate(0);
+  }
+</style>