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

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

@@ -25,7 +25,7 @@ function add_css(target) {
 	append_styles(target, "svelte-faoauy", ".shadow.svelte-faoauy{position:absolute}");
 }
 
-// (21:0) {#if visible}
+// (23:0) {#if visible}
 function create_if_block(ctx) {
 	let div;
 	let div_style_value;
@@ -190,7 +190,7 @@ function instance($$self, $$props, $$invalidate) {
 	let { blurRadius } = $$props;
 	let { spreadRadius } = $$props;
 	let { opacity = 0.15 } = $$props;
-	let { zIndex = -1 } = $$props;
+	let { zIndex = undefined } = $$props;
 
 	$$self.$$set = $$props => {
 		if ('inDelay' in $$props) $$invalidate(0, inDelay = $$props.inDelay);

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>

package/libs/PanoTagPlugin/Components/PointTag.js

@@ -27,7 +27,7 @@ import {
 import TagWrapper from './TagWrapper';
 
 function add_css(target) {
-	append_styles(target, "svelte-1d5dpm8", ".tag2D__container.svelte-1d5dpm8{box-sizing:border-box;position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tag2D.hide.svelte-1d5dpm8{display:none}.withAnimation.svelte-1d5dpm8{transition:opacity 0.3s linear}.tag2D__container.hide.svelte-1d5dpm8{opacity:0;pointer-events:none}.tag2D__container.hide.svelte-1d5dpm8 *{pointer-events:none}");
+	append_styles(target, "svelte-1eci49s", ".tag--container.svelte-1eci49s{box-sizing:border-box;position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tag.hide.svelte-1eci49s{display:none}.withAnimation.svelte-1eci49s{transition:opacity 0.3s linear}.tag--container.hide.svelte-1eci49s{opacity:0;pointer-events:none}.tag--container.hide.svelte-1eci49s *{pointer-events:none}");
 }
 
 function get_each_context(ctx, list, i) {
@@ -69,7 +69,7 @@ function create_each_block(key_1, ctx) {
 			div = element("div");
 			create_component(tagwrapper.$$.fragment);
 			t = space();
-			attr(div, "class", "tag2D svelte-1d5dpm8");
+			attr(div, "class", "tag svelte-1eci49s");
 			toggle_class(div, "hide", !/*tag*/ ctx[6].pointTagStyle?.leftPercent || !/*tag*/ ctx[6].pointTagStyle?.topPercent || /*tag*/ ctx[6].enabled === false || !/*tag*/ ctx[6].state || /*tag*/ ctx[6].temporaryState?.visible === false);
 			this.first = div;
 		},
@@ -139,7 +139,7 @@ function create_fragment(ctx) {
 				each_blocks[i].c();
 			}
 
-			attr(div, "class", "tag2D__container svelte-1d5dpm8");
+			attr(div, "class", "tag--container svelte-1eci49s");
 			toggle_class(div, "hide", !/*state*/ ctx[3].visible || !/*temporaryState*/ ctx[5].visible);
 			toggle_class(div, "withAnimation", /*withAnimation*/ ctx[0]);
 		},

package/libs/PanoTagPlugin/Components/PointTag.svelte

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

@@ -0,0 +1,105 @@
+<!-- 图文标签 -->
+<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

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