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

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

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

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

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

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

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

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

package/libs/PanoTagPlugin/Components/PointTag.svelte

@@ -1,55 +0,0 @@
-<script>import TagWrapper from './TagWrapper.svelte';
-export let withAnimation = false;
-export let tags = [];
-export let hooks;
-export let state;
-export let mediaStore;
-export let temporaryState;
-</script>
-
-<div class="tag--container" class:hide={!state.visible || !temporaryState.visible} class:withAnimation>
-  {#each tags as tag (tag.id)}
-    <div
-      class="tag"
-      class:hide={!tag.pointTagStyle?.leftPercent ||
-        !tag.pointTagStyle?.topPercent ||
-        tag.enabled === false ||
-        !tag.state ||
-        tag.temporaryState?.visible === false}
-    >
-      <TagWrapper {...{ tag, hooks, state, mediaStore, temporaryState, withAnimation }} />
-    </div>
-  {/each}
-</div>
-
-<style>
-  .tag--container {
-    /* background: white; */
-    box-sizing: border-box;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    opacity: 1;
-    user-select: none;
-  }
-
-  .tag.hide {
-    display: none;
-  }
-
-  .withAnimation {
-    transition: opacity 0.3s linear;
-  }
-
-  .tag--container.hide {
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .tag--container.hide :global(*) {
-    pointer-events: none;
-  }
-</style>

package/libs/PanoTagPlugin/Components/Tag/AudioTag.svelte

@@ -1,105 +0,0 @@
-<!-- 图文标签 -->
-<script>var _a;
-import uuid from '../../../shared-utils/uuid';
-import '../Common/Text.svelte';
-import '../Common/Arrow.svelte';
-import Audio from '../Common/Audio.svelte';
-import Line from '../Common/Line/Straight.svelte';
-import Shadow from '../Common/Shadow.svelte';
-import MultiLineText from '../Common/MultiLineText.svelte';
-export let mediaStore;
-export let tag;
-let textUnfolded = false;
-let contentWidth;
-let textItems = [];
-$: unfolded = !!((_a = tag.state) === null || _a === void 0 ? void 0 : _a.unfolded);
-$: text = tag.data.text;
-$: {
-    // 当 text 变了后，强制更新 Text
-    textItems = [{ id: uuid(), content: text }];
-}
-// 收起的时候，如果文字展开了，要先下下去，再收起
-$: foldTextDelay = textUnfolded ? 450 : 0;
-function clickContent() {
-    textUnfolded = !textUnfolded;
-}
-</script>
-
-{#if tag.state}
-  <div class="audio-tag" class:unfolded>
-    <Shadow visible={unfolded} left={contentWidth / 2 + 'px'} bottom={12} width={2} blurRadius={120} spreadRadius={60} />
-    <div class="line" style:width={contentWidth + 'px'}>
-      <Line {unfolded} duration={1000} outDelay={foldTextDelay + 20 * Math.min(textItems[0]?.content.length ?? 10, 15)} />
-    </div>
-    <div class="content" bind:clientWidth={contentWidth}>
-      <div class="wrapper">
-        <div class="audio-icon">
-          <Audio
-            {unfolded}
-            {mediaStore}
-            url={tag.data.audioUrl}
-            duration={1000}
-            outDelay={20 * Math.min(textItems[0]?.content.length ?? 10, 15)}
-            hooksInfo={{ tag }}
-          />
-        </div>
-        <div style:display="inline-block" on:click={clickContent}>
-          <MultiLineText visible={unfolded} {textUnfolded} {textItems} />
-        </div>
-      </div>
-    </div>
-  </div>
-{/if}
-
-<style>
-  .audio-tag {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 0;
-    height: 0;
-    overflow: visible;
-  }
-
-  .line {
-    display: flex;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 162px;
-    height: 1px;
-    transform: translate3d(0, -50%, 10px);
-  }
-
-  .content {
-    width: max-content;
-    height: 54px;
-    padding: 36px 4px 0 16px;
-    position: absolute;
-    left: 0;
-    bottom: 2px;
-    overflow: hidden;
-    box-sizing: border-box;
-    font-size: 0;
-    white-space: nowrap;
-    font-weight: 600;
-  }
-
-  .wrapper {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-
-  .audio-icon {
-    vertical-align: top;
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    margin-right: 4px;
-    margin-top: 1px;
-  }
-  .unfolded .audio-icon {
-    pointer-events: auto;
-  }
-</style>

package/libs/PanoTagPlugin/Components/Tag/CustomTag.svelte

@@ -1,33 +0,0 @@
-<script>import { onDestroy, onMount } from 'svelte';
-export let tag;
-let content;
-let destroyTemplate;
-onMount(() => {
-    if (content) {
-        if (tag.element instanceof Element) {
-            const element = tag.element;
-            content.appendChild(element);
-            destroyTemplate = () => content === null || content === void 0 ? void 0 : content.removeChild(element);
-        }
-        else if (typeof tag.element === 'function') {
-            const renderer = tag.element;
-            destroyTemplate = renderer(content);
-        }
-    }
-});
-onDestroy(() => {
-    destroyTemplate === null || destroyTemplate === void 0 ? void 0 : destroyTemplate();
-});
-</script>
-
-<div class="customElement__container" bind:this={content}>
-  {#if typeof tag.element === 'string'}
-    {@html tag.element}
-  {/if}
-</div>
-
-<style>
-  .customElement__container {
-    position: relative;
-  }
-</style>

package/libs/PanoTagPlugin/Components/Tag/ImageTextTag.svelte

@@ -1,63 +0,0 @@
-<!-- 图文标签 -->
-<script>var _a, _b, _c;
-import uuid from '../../../shared-utils/uuid';
-import Text from '../Common/Text.svelte';
-import Line from '../Common/Line/Polyline.svelte';
-import Media from '../Common/Media.svelte';
-import Shadow from '../Common/Shadow.svelte';
-export let tag;
-$: unfolded = tag.state ? tag.state.unfolded : false;
-$: content = ((_b = (_a = tag.data.text) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 7 ? ((_c = tag.data.text) === null || _c === void 0 ? void 0 : _c.substring(0, 6)) + '...' : tag.data.text;
-$: mediaData = tag.data.mediaData;
-let textItems;
-$: {
-    // 当 text 变了后，强制更新 Text
-    textItems = content ? [{ id: uuid(), content }] : [];
-}
-</script>
-
-{#if tag.state}
-  <Shadow visible={unfolded} left={61} bottom={57} width={2} blurRadius={150} spreadRadius={75} />
-  <div class="line">
-    <Line {unfolded} duration={1000} outDelay={400} />
-  </div>
-  {#each textItems as { id, content } (id)}
-    <div class="text">
-      <Text {unfolded} {content} inDelay={500} />
-    </div>
-  {/each}
-  {#if mediaData}
-    <div class="media-wrapper">
-      <Media {unfolded} {mediaData} inDelay={500} duration={500} />
-    </div>
-  {/if}
-{/if}
-
-<style>
-  .line {
-    position: absolute;
-    width: 105px;
-    height: 21px;
-    transform: translateY(-100%);
-    z-index: 10;
-  }
-
-  .text {
-    position: absolute;
-    width: 100px;
-    left: 16px;
-    bottom: 1px;
-    z-index: 10;
-    font-weight: 600;
-  }
-
-  .media-wrapper {
-    position: absolute;
-    left: 14px;
-    top: -85px;
-    width: 90px;
-    height: 60px;
-    z-index: 10;
-    font-weight: 600;
-  }
-</style>