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

package/libs/PanoTagPlugin/Components/Common/Line/Polyline.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/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.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/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.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.50.1 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	add_render_callback,
@@ -26,7 +26,10 @@ import {
 
 import { fly } from 'svelte/transition';
 import { linear } from 'svelte/easing';
-import { Swiper, SwiperSlide } from 'swiper/svelte';
+
+// 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';
@@ -43,7 +46,7 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (24:0) {#if unfolded}
+// (25:0) {#if unfolded}
 function create_if_block(ctx) {
 	let div;
 	let current_block_type_index;
@@ -154,7 +157,7 @@ function create_if_block(ctx) {
 	};
 }
 
-// (80:4) {:else}
+// (82:4) {:else}
 function create_else_block(ctx) {
 	let mediaitem;
 	let current;
@@ -195,7 +198,7 @@ function create_else_block(ctx) {
 	};
 }
 
-// (31:4) {#if carouselEnabled}
+// (32:4) {#if carouselEnabled}
 function create_if_block_1(ctx) {
 	let swiper;
 	let current;
@@ -260,7 +263,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (75:10) <SwiperSlide>
+// (77:10) <SwiperSlide>
 function create_default_slot_1(ctx) {
 	let mediaitem;
 	let t;
@@ -305,7 +308,7 @@ function create_default_slot_1(ctx) {
 	};
 }
 
-// (74:8) {#each mediaDataList as media}
+// (76:8) {#each mediaDataList as media}
 function create_each_block(ctx) {
 	let swiperslide;
 	let current;
@@ -349,7 +352,7 @@ function create_each_block(ctx) {
 	};
 }
 
-// (32:6) <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.play()             video.onerror = () => resolve(noTypecheck(null))             video.onended = () => resolve(noTypecheck(null))             video.onclick = () => {               video.pause()               resolve(noTypecheck(null))             }           })           // 恢复自动轮播           swiper.autoplay.start()         }}       >
+// (33:6) <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()         }}       >
 function create_default_slot(ctx) {
 	let each_1_anchor;
 	let current;
@@ -530,6 +533,7 @@ function instance($$self, $$props, $$invalidate) {
 					return;
 				}
 
+				video.muted = true;
 				video.play();
 				video.onerror = () => resolve(noTypecheck(null));
 				video.onended = () => resolve(noTypecheck(null));

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.50.1 */
+/* 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.50.1 */
+/* 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.50.1 */
+/* generated by Svelte v3.52.0 */
 import {
 	SvelteComponent,
 	append,
@@ -23,7 +23,7 @@ import 'svelte/easing';
 import Shadow from '../Shadow';
 
 function add_css(target) {
-	append_styles(target, "svelte-mhqidy", ".point.svelte-mhqidy.svelte-mhqidy{width:1.5rem;height:1.5rem}.small-point.svelte-mhqidy.svelte-mhqidy,.big-point.svelte-mhqidy.svelte-mhqidy{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 500ms}.big-point.svelte-mhqidy.svelte-mhqidy{background-color:rgba(0, 0, 0, 0.1)}.folded.point.svelte-mhqidy.svelte-mhqidy{-webkit-animation:svelte-mhqidy-breathing 2s linear infinite;animation:svelte-mhqidy-breathing 2s linear infinite}.big-point.svelte-mhqidy.svelte-mhqidy::before,.big-point.svelte-mhqidy.svelte-mhqidy::after{content:'';display:block;position:absolute;background-size:contain;background-repeat:no-repeat;pointer-events:none}.big-point.svelte-mhqidy.svelte-mhqidy::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.svelte-mhqidy .big-point.svelte-mhqidy::before{-webkit-animation:svelte-mhqidy-rotate 2s linear infinite;animation:svelte-mhqidy-rotate 2s linear infinite}.big-point.svelte-mhqidy.svelte-mhqidy::after{position:absolute;width:1rem;height:1rem;background-image:var(--iconUrl)}.small-point.svelte-mhqidy.svelte-mhqidy::before{content:'';display:block;position:absolute;pointer-events:none;width:0.25rem;height:0.25rem;border-radius:100%;background-color:white}.folded.svelte-mhqidy .big-point.svelte-mhqidy{opacity:1;scale:1}.unfolded.svelte-mhqidy .big-point.svelte-mhqidy{opacity:0;scale:0}.folded.svelte-mhqidy .small-point.svelte-mhqidy{opacity:0;scale:6}.unfolded.svelte-mhqidy .small-point.svelte-mhqidy{opacity:1;scale:1}@-webkit-keyframes svelte-mhqidy-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes svelte-mhqidy-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@-webkit-keyframes svelte-mhqidy-breathing{0%{transform:scale(1)}25%{transform:scale(0.9)}50%{transform:scale(1)}}@keyframes svelte-mhqidy-breathing{0%{transform:scale(1)}25%{transform:scale(0.9)}50%{transform:scale(1)}}");
+	append_styles(target, "svelte-jtnm0", ".point.svelte-jtnm0.svelte-jtnm0{width:1.5rem;height:1.5rem}.small-point.svelte-jtnm0.svelte-jtnm0,.big-point.svelte-jtnm0.svelte-jtnm0{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 500ms}.big-point.svelte-jtnm0.svelte-jtnm0{background-color:rgba(0, 0, 0, 0.1)}.folded.point.svelte-jtnm0.svelte-jtnm0{animation:svelte-jtnm0-breathing 2s linear infinite}.big-point.svelte-jtnm0.svelte-jtnm0::before,.big-point.svelte-jtnm0.svelte-jtnm0::after{content:'';display:block;position:absolute;background-size:contain;background-repeat:no-repeat;pointer-events:none}.big-point.svelte-jtnm0.svelte-jtnm0::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.svelte-jtnm0 .big-point.svelte-jtnm0::before{animation:svelte-jtnm0-rotate 2s linear infinite}.big-point.svelte-jtnm0.svelte-jtnm0::after{position:absolute;width:1rem;height:1rem;background-image:var(--iconUrl)}.small-point.svelte-jtnm0.svelte-jtnm0::before{content:'';display:block;position:absolute;pointer-events:none;width:0.25rem;height:0.25rem;border-radius:100%;background-color:white}.folded.svelte-jtnm0 .big-point.svelte-jtnm0{opacity:1;scale:1}.unfolded.svelte-jtnm0 .big-point.svelte-jtnm0{opacity:0;scale:0}.folded.svelte-jtnm0 .small-point.svelte-jtnm0{opacity:0;scale:6}.unfolded.svelte-jtnm0 .small-point.svelte-jtnm0{opacity:1;scale:1}@keyframes svelte-jtnm0-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes svelte-jtnm0-breathing{0%{transform:scale(1)}25%{transform:scale(0.9)}50%{transform:scale(1)}}");
 }
 
 function create_fragment(ctx) {
@@ -51,12 +51,12 @@ function create_fragment(ctx) {
 			div0 = element("div");
 			t1 = space();
 			div1 = element("div");
-			attr(div0, "class", "small-point svelte-mhqidy");
-			set_style(div0, "transition-delay", /*folded*/ ctx[3] ? /*foldDelay*/ ctx[2] + 'ms' : '0ms', false);
-			attr(div1, "class", "big-point svelte-mhqidy");
+			attr(div0, "class", "small-point svelte-jtnm0");
+			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);
-			attr(div2, "class", "point svelte-mhqidy");
+			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.50.1 */
+/* 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) {