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

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

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

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

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.50.1 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	add_render_callback,
@@ -53,9 +53,9 @@ function create_if_block(ctx) {
 			: ''}
     `);
 
-			set_style(div, "width", px2rem(/*width*/ ctx[3]), false);
-			set_style(div, "height", px2rem(/*height*/ ctx[4]), false);
-			set_style(div, "z-index", /*zIndex*/ ctx[13], false);
+			set_style(div, "width", px2rem(/*width*/ ctx[3]));
+			set_style(div, "height", px2rem(/*height*/ ctx[4]));
+			set_style(div, "z-index", /*zIndex*/ ctx[13]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -82,15 +82,15 @@ function create_if_block(ctx) {
 			}
 
 			if (dirty & /*width*/ 8) {
-				set_style(div, "width", px2rem(/*width*/ ctx[3]), false);
+				set_style(div, "width", px2rem(/*width*/ ctx[3]));
 			}
 
 			if (dirty & /*height*/ 16) {
-				set_style(div, "height", px2rem(/*height*/ ctx[4]), false);
+				set_style(div, "height", px2rem(/*height*/ ctx[4]));
 			}
 
 			if (dirty & /*zIndex*/ 8192) {
-				set_style(div, "z-index", /*zIndex*/ ctx[13], false);
+				set_style(div, "z-index", /*zIndex*/ ctx[13]);
 			}
 		},
 		i(local) {

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

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.50.1 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append,
@@ -35,7 +35,7 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (79:0) {#each contentList as item, index}
+// (82:0) {#each contentList as item, index}
 function create_each_block(ctx) {
 	let span;
 	let t_value = /*item*/ ctx[10] + "";
@@ -206,11 +206,14 @@ function instance($$self, $$props, $$invalidate) {
 			// v0.3.7 emoji support
 			$: $$invalidate(1, contentList = (() => {
 				const result = [];
+				const emojiRegExp = new RegExp(/\p{Regional_Indicator}\p{Regional_Indicator}|\p{Emoji}(\p{Emoji_Modifier}+|\uFE0F\u20E3?)?(\u200D\p{Emoji}(\p{Emoji_Modifier}+|\uFE0F\u20E3?)?)+|\p{Emoji_Presentation}(\p{Emoji_Modifier}+|\uFE0F\u20E3?)?|\p{Emoji}(\p{Emoji_Modifier}+|\uFE0F\u20E3?)/gu);
 
-				// eslint-disable-next-line prettier/prettier
-				const emojiRegExp = new RegExp(/\p{RI}\p{RI}|\p{Emoji}(\p{EMod}+|\u{FE0F}\u{20E3}?|[\u{E0020}-\u{E007E}]+\u{E007F})?(\u{200D}\p{Emoji}(\p{EMod}+|\u{FE0F}\u{20E3}?|[\u{E0020}-\u{E007E}]+\u{E007F})?)+|\p{EPres}(\p{EMod}+|\u{FE0F}\u{20E3}?|[\u{E0020}-\u{E007E}]+\u{E007F})?|\p{Emoji}(\p{EMod}+|\u{FE0F}\u{20E3}?|[\u{E0020}-\u{E007E}]+\u{E007F})/gu);
-
+				// const sentence =
+				//   'A ticket to 大阪 costs ¥2000 👌. Repeated emojis: 😁😁. Crying cat: 😿. Repeated emoji with skin tones: ✊🏿✊🏿✊🏿✊✊✊🏿. Flags: 🇱🇹🏴󠁧󠁢󠁷󠁬󠁳󠁿. Scales ⚖️⚖️⚖️.'
+				// console.log(sentence)
+				// console.log(sentence.match(emojiRegExp))
 				const emojiSplitFlag = `__EMOJI_SPLIT_${RANDON_STRING}__`;
+
 				const emojiFlag = `__EMOJI_${RANDON_STRING}__`;
 
 				content.slice().replace(emojiRegExp, emoji => `${emojiSplitFlag}${emojiFlag}${emoji}${emojiSplitFlag}`).split(emojiSplitFlag).forEach(item => {

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

@@ -0,0 +1,91 @@
+<script>import anime from 'animejs';
+import { onMount } from 'svelte';
+import { notNil } from '../../../shared-utils/isNil';
+import { searchFirstValueSmallThanLastValue } from '../../utils';
+import { RANDON_STRING } from '../../utils/constants';
+export let inDelay = 0;
+export let outDelay = 0;
+export let content;
+export let unfolded;
+let timeoutID;
+let spanEleList = [];
+let openAnimeIns;
+// v0.3.7 emoji support
+$: contentList = (() => {
+    const result = [];
+    const emojiRegExp = new RegExp(/\p{Regional_Indicator}\p{Regional_Indicator}|\p{Emoji}(\p{Emoji_Modifier}+|\uFE0F\u20E3?)?(\u200D\p{Emoji}(\p{Emoji_Modifier}+|\uFE0F\u20E3?)?)+|\p{Emoji_Presentation}(\p{Emoji_Modifier}+|\uFE0F\u20E3?)?|\p{Emoji}(\p{Emoji_Modifier}+|\uFE0F\u20E3?)/gu);
+    // const sentence =
+    //   'A ticket to 大阪 costs ¥2000 👌. Repeated emojis: 😁😁. Crying cat: 😿. Repeated emoji with skin tones: ✊🏿✊🏿✊🏿✊✊✊🏿. Flags: 🇱🇹🏴󠁧󠁢󠁷󠁬󠁳󠁿. Scales ⚖️⚖️⚖️.'
+    // console.log(sentence)
+    // console.log(sentence.match(emojiRegExp))
+    const emojiSplitFlag = `__EMOJI_SPLIT_${RANDON_STRING}__`;
+    const emojiFlag = `__EMOJI_${RANDON_STRING}__`;
+    content
+        .slice()
+        .replace(emojiRegExp, (emoji) => `${emojiSplitFlag}${emojiFlag}${emoji}${emojiSplitFlag}`)
+        .split(emojiSplitFlag)
+        .forEach((item) => {
+        if (item.startsWith(emojiFlag))
+            return result.push(item.slice(emojiFlag.length));
+        else
+            return result.push(...item.split(''));
+    });
+    return result.filter(Boolean);
+})();
+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.js

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

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

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

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

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.50.1 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	add_render_callback,
@@ -34,7 +34,7 @@ import Shadow from '../Common/Shadow';
 import MultiLineText from '../Common/MultiLineText';
 
 function add_css(target) {
-	append_styles(target, "svelte-z2d21h", ".audio-tag.svelte-z2d21h.svelte-z2d21h{position:absolute;left:0;top:0;width:0;height:0;overflow:visible}.line.svelte-z2d21h.svelte-z2d21h{display:flex;position:absolute;top:0;left:0;width:10.125rem;height:0.0625rem;transform:translate3d(0, -50%, 0.625rem)}.content.svelte-z2d21h.svelte-z2d21h{width:-webkit-max-content;width:-moz-max-content;width:max-content;height:3.375rem;padding:2.25rem 0.25rem 0 1rem;position:absolute;left:0;bottom:0.125rem;overflow:hidden;box-sizing:border-box;font-size:0;white-space:nowrap;font-weight:600}.wrapper.svelte-z2d21h.svelte-z2d21h{position:relative;width:100%;height:100%}.audio-icon.svelte-z2d21h.svelte-z2d21h{vertical-align:top;display:inline-block;width:1rem;height:1rem;margin-right:0.25rem;margin-top:0.0625rem}.unfolded.svelte-z2d21h .audio-icon.svelte-z2d21h{pointer-events:auto}");
+	append_styles(target, "svelte-4r8s18", ".audio-tag.svelte-4r8s18.svelte-4r8s18{position:absolute;left:0;top:0;width:0;height:0;overflow:visible}.line.svelte-4r8s18.svelte-4r8s18{display:flex;position:absolute;top:0;left:0;width:10.125rem;height:0.0625rem;transform:translate3d(0, -50%, 0.625rem)}.content.svelte-4r8s18.svelte-4r8s18{width:-moz-max-content;width:max-content;height:3.375rem;padding:2.25rem 0.25rem 0 1rem;position:absolute;left:0;bottom:0.125rem;overflow:hidden;box-sizing:border-box;font-size:0;white-space:nowrap;font-weight:600}.wrapper.svelte-4r8s18.svelte-4r8s18{position:relative;width:100%;height:100%}.audio-icon.svelte-4r8s18.svelte-4r8s18{vertical-align:top;display:inline-block;width:1rem;height:1rem;margin-right:0.25rem;margin-top:0.0625rem}.unfolded.svelte-4r8s18 .audio-icon.svelte-4r8s18{pointer-events:auto}");
 }
 
 // (28:0) {#if tag.state}
@@ -110,14 +110,14 @@ function create_if_block(ctx) {
 			t2 = space();
 			div2 = element("div");
 			create_component(multilinetext.$$.fragment);
-			attr(div0, "class", "line svelte-z2d21h");
-			set_style(div0, "width", /*contentWidth*/ ctx[3] + 'px', false);
-			attr(div1, "class", "audio-icon svelte-z2d21h");
-			set_style(div2, "display", `inline-block`, false);
-			attr(div3, "class", "wrapper svelte-z2d21h");
-			attr(div4, "class", "content svelte-z2d21h");
+			attr(div0, "class", "line svelte-4r8s18");
+			set_style(div0, "width", /*contentWidth*/ ctx[3] + 'px');
+			attr(div1, "class", "audio-icon svelte-4r8s18");
+			set_style(div2, "display", `inline-block`);
+			attr(div3, "class", "wrapper svelte-4r8s18");
+			attr(div4, "class", "content svelte-4r8s18");
 			add_render_callback(() => /*div4_elementresize_handler*/ ctx[10].call(div4));
-			attr(div5, "class", "audio-tag svelte-z2d21h");
+			attr(div5, "class", "audio-tag svelte-4r8s18");
 			toggle_class(div5, "unfolded", /*unfolded*/ ctx[6]);
 		},
 		m(target, anchor) {
@@ -153,7 +153,7 @@ function create_if_block(ctx) {
 			line.$set(line_changes);
 
 			if (dirty & /*contentWidth*/ 8) {
-				set_style(div0, "width", /*contentWidth*/ ctx[3] + 'px', false);
+				set_style(div0, "width", /*contentWidth*/ ctx[3] + 'px');
 			}
 
 			const audio_changes = {};

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

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

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>

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

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