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

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

@@ -0,0 +1,96 @@
+<script>import { fly } from 'svelte/transition';
+import { linear } from 'svelte/easing';
+// import { Swiper, SwiperSlide } from 'swiper/svelte'
+import { Swiper, SwiperSlide } from '../../../../../node_modules/swiper/svelte';
+import { Autoplay } from 'swiper';
+import 'swiper/css';
+import 'swiper/css/autoplay';
+import { noTypecheck } from '../../utils';
+import MediaItem from './MediaItem.svelte';
+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;
+export let autoplayConfig = { autoplay: true, autoplayVideo: false };
+$: carouselEnabled = enableCarousel && (mediaData === null || mediaData === void 0 ? void 0 : mediaData.length) > 1;
+$: mediaDataList = mediaData;
+$: autoplay = mediaDataList.length > 1 && autoplayConfig.autoplay;
+let lastAutoPlayIndex = null;
+</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}
+  >
+    {#if carouselEnabled}
+      <Swiper
+        style="height: 100%"
+        modules={[Autoplay]}
+        spaceBetween={30}
+        autoplay={autoplay ? noTypecheck({ delay: 2000, stopOnLastSlide: false, disableOnInteraction: false }) : false}
+        loop
+        on:slideChange={async (event) => {
+          if (!autoplay) return
+          if (!autoplayConfig.autoplayVideo) return
+          const swiper = event.detail[0]
+          if (!swiper) return
+
+          const index = swiper.realIndex
+          // loop 完一圈后，swiper.realIndex 会重复一次，比如有三张图片 [0,1,2]，slideChange 触发后输出的 index 为 [0,1,2,0,0,1,2,0,0,1,2,0], 添加 lastAutoPlayIndex 判断后，输出为[0,1,2,0,1,2,0,1,2,0]
+          if (index === lastAutoPlayIndex) return
+          lastAutoPlayIndex = index
+
+          const media = mediaDataList[index]
+          if (!media) return
+          if (media.type !== 'Video') return
+
+          // 先暂停自动轮播
+          swiper.autoplay.stop()
+          // 播放视频
+          await new Promise((resolve) => {
+            const video = swiper.slides[swiper.activeIndex]?.querySelector('video')
+            if (!video) {
+              resolve(noTypecheck(null))
+              return
+            }
+            video.muted = true
+            video.play()
+            video.onerror = () => resolve(noTypecheck(null))
+            video.onended = () => resolve(noTypecheck(null))
+            video.onclick = () => {
+              video.pause()
+              resolve(noTypecheck(null))
+            }
+          })
+          // 恢复自动轮播
+          swiper.autoplay.start()
+        }}
+      >
+        {#each mediaDataList as media}
+          <SwiperSlide>
+            <MediaItem {media} {objectFit} />
+          </SwiperSlide>
+        {/each}
+      </Swiper>
+    {:else}
+      <MediaItem media={mediaData[0]} {objectFit} />
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .media {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    border-radius: 2px;
+  }
+</style>

package/libs/PanoTagPlugin/Components/Common/MediaItem.js

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

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

@@ -0,0 +1,49 @@
+<script>import { Image_Play } from '../../Assets/Icon';
+export let media;
+export let objectFit = 'cover';
+</script>
+
+{#if media}
+  <div class="media-item" style={`object-fit: ${objectFit};`}>
+    {#if media.type === 'Image'}
+      <img class="media-content" src={media.url} alt={media.name} />
+    {:else if media.type === 'Video'}
+      <video
+        class="media-content"
+        src={media.url}
+        poster={media.videoCoverUrl ?? undefined}
+        preload={media.videoCoverUrl ? undefined : 'auto'}
+        playsinline
+        paused
+        loop={false}
+        crossorigin=""
+        controls={false}
+        muted
+      />
+      <div class="video-icon" style="background-image: url({Image_Play});" />
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .media-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.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.51.0 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append_styles,
@@ -59,7 +59,7 @@ function create_each_block(key_1, ctx) {
 			div = element("div");
 			create_component(text_1.$$.fragment);
 			attr(div, "class", "text svelte-1fuzm7v");
-			set_style(div, "transform", /*transform*/ ctx[7], false);
+			set_style(div, "transform", /*transform*/ ctx[7]);
 			this.first = div;
 		},
 		m(target, anchor) {
@@ -77,7 +77,7 @@ function create_each_block(key_1, ctx) {
 			text_1.$set(text_1_changes);
 
 			if (dirty & /*transform*/ 128) {
-				set_style(div, "transform", /*transform*/ ctx[7], false);
+				set_style(div, "transform", /*transform*/ ctx[7]);
 			}
 		},
 		i(local) {

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

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.51.0 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append,
@@ -52,10 +52,10 @@ function create_fragment(ctx) {
 			t1 = space();
 			div1 = element("div");
 			attr(div0, "class", "small-point svelte-jtnm0");
-			set_style(div0, "transition-delay", /*folded*/ ctx[3] ? /*foldDelay*/ ctx[2] + 'ms' : '0ms', false);
+			set_style(div0, "transition-delay", /*folded*/ ctx[3] ? /*foldDelay*/ ctx[2] + 'ms' : '0ms');
 			attr(div1, "class", "big-point svelte-jtnm0");
 			set_style(div1, "--iconUrl", "url(" + /*iconUrl*/ ctx[1] + ")");
-			set_style(div1, "transition-delay", /*folded*/ ctx[3] ? /*foldDelay*/ ctx[2] + 'ms' : '0ms', false);
+			set_style(div1, "transition-delay", /*folded*/ ctx[3] ? /*foldDelay*/ ctx[2] + 'ms' : '0ms');
 			attr(div2, "class", "point svelte-jtnm0");
 			toggle_class(div2, "folded", /*folded*/ ctx[3]);
 			toggle_class(div2, "unfolded", /*unfolded*/ ctx[0]);
@@ -71,7 +71,7 @@ function create_fragment(ctx) {
 		},
 		p(ctx, [dirty]) {
 			if (dirty & /*folded, foldDelay*/ 12) {
-				set_style(div0, "transition-delay", /*folded*/ ctx[3] ? /*foldDelay*/ ctx[2] + 'ms' : '0ms', false);
+				set_style(div0, "transition-delay", /*folded*/ ctx[3] ? /*foldDelay*/ ctx[2] + 'ms' : '0ms');
 			}
 
 			if (!current || dirty & /*iconUrl*/ 2) {
@@ -79,7 +79,7 @@ function create_fragment(ctx) {
 			}
 
 			if (dirty & /*folded, foldDelay*/ 12) {
-				set_style(div1, "transition-delay", /*folded*/ ctx[3] ? /*foldDelay*/ ctx[2] + 'ms' : '0ms', false);
+				set_style(div1, "transition-delay", /*folded*/ ctx[3] ? /*foldDelay*/ ctx[2] + 'ms' : '0ms');
 			}
 
 			if (!current || dirty & /*folded*/ 8) {

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

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.51.0 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append,
@@ -52,9 +52,9 @@ function create_fragment(ctx) {
 			t1 = space();
 			div1 = element("div");
 			attr(div0, "class", "small-point svelte-1rg9uk");
-			set_style(div0, "transition-delay", /*folded*/ ctx[2] ? /*foldDelay*/ ctx[1] + 'ms' : '0ms', false);
+			set_style(div0, "transition-delay", /*folded*/ ctx[2] ? /*foldDelay*/ ctx[1] + 'ms' : '0ms');
 			attr(div1, "class", "big-point svelte-1rg9uk");
-			set_style(div1, "transition-delay", /*folded*/ ctx[2] ? /*foldDelay*/ ctx[1] + 'ms' : '0ms', false);
+			set_style(div1, "transition-delay", /*folded*/ ctx[2] ? /*foldDelay*/ ctx[1] + 'ms' : '0ms');
 			attr(div2, "class", "point svelte-1rg9uk");
 			toggle_class(div2, "unfolded", /*unfolded*/ ctx[0]);
 			toggle_class(div2, "folded", /*folded*/ ctx[2]);
@@ -70,11 +70,11 @@ function create_fragment(ctx) {
 		},
 		p(ctx, [dirty]) {
 			if (dirty & /*folded, foldDelay*/ 6) {
-				set_style(div0, "transition-delay", /*folded*/ ctx[2] ? /*foldDelay*/ ctx[1] + 'ms' : '0ms', false);
+				set_style(div0, "transition-delay", /*folded*/ ctx[2] ? /*foldDelay*/ ctx[1] + 'ms' : '0ms');
 			}
 
 			if (dirty & /*folded, foldDelay*/ 6) {
-				set_style(div1, "transition-delay", /*folded*/ ctx[2] ? /*foldDelay*/ ctx[1] + 'ms' : '0ms', false);
+				set_style(div1, "transition-delay", /*folded*/ ctx[2] ? /*foldDelay*/ ctx[1] + 'ms' : '0ms');
 			}
 
 			if (!current || dirty & /*unfolded*/ 1) {

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.51.0 */
+/* 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.51.0 */
+/* 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.51.0 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append,