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

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

@@ -0,0 +1,216 @@
+/* generated by Svelte v3.50.1 */
+import {
+	SvelteComponent,
+	append_styles,
+	attr,
+	detach,
+	element,
+	empty,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_style,
+	space,
+	src_url_equal
+} from "svelte/internal";
+
+import { Image_Play } from '../../Assets/Icon';
+
+function add_css(target) {
+	append_styles(target, "svelte-6jwk1w", ".media-item.svelte-6jwk1w{height:100%}.media-content.svelte-6jwk1w{width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;-o-object-fit:inherit;object-fit:inherit}.video-icon.svelte-6jwk1w{width:1.75rem;height:1.75rem;background-size:100%;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}");
+}
+
+// (6:0) {#if media}
+function create_if_block(ctx) {
+	let div;
+	let div_style_value;
+
+	function select_block_type(ctx, dirty) {
+		if (/*media*/ ctx[0].type === 'Image') return create_if_block_1;
+		if (/*media*/ ctx[0].type === 'Video') return create_if_block_2;
+	}
+
+	let current_block_type = select_block_type(ctx, -1);
+	let if_block = current_block_type && current_block_type(ctx);
+
+	return {
+		c() {
+			div = element("div");
+			if (if_block) if_block.c();
+			attr(div, "class", "media-item svelte-6jwk1w");
+			attr(div, "style", div_style_value = `object-fit: ${/*objectFit*/ ctx[1]};`);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			if (if_block) if_block.m(div, null);
+		},
+		p(ctx, dirty) {
+			if (current_block_type === (current_block_type = select_block_type(ctx, dirty)) && if_block) {
+				if_block.p(ctx, dirty);
+			} else {
+				if (if_block) if_block.d(1);
+				if_block = current_block_type && current_block_type(ctx);
+
+				if (if_block) {
+					if_block.c();
+					if_block.m(div, null);
+				}
+			}
+
+			if (dirty & /*objectFit*/ 2 && div_style_value !== (div_style_value = `object-fit: ${/*objectFit*/ ctx[1]};`)) {
+				attr(div, "style", div_style_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+
+			if (if_block) {
+				if_block.d();
+			}
+		}
+	};
+}
+
+// (10:37) 
+function create_if_block_2(ctx) {
+	let video;
+	let video_src_value;
+	let video_poster_value;
+	let video_preload_value;
+	let video_loop_value;
+	let video_controls_value;
+	let t;
+	let div;
+
+	return {
+		c() {
+			video = element("video");
+			t = space();
+			div = element("div");
+			attr(video, "class", "media-content svelte-6jwk1w");
+			if (!src_url_equal(video.src, video_src_value = /*media*/ ctx[0].url)) attr(video, "src", video_src_value);
+			attr(video, "poster", video_poster_value = /*media*/ ctx[0].videoCoverUrl ?? undefined);
+			attr(video, "preload", video_preload_value = /*media*/ ctx[0].videoCoverUrl ? undefined : 'auto');
+			video.playsInline = true;
+			attr(video, "paused", "");
+			video.loop = video_loop_value = false;
+			attr(video, "crossorigin", "");
+			video.controls = video_controls_value = false;
+			video.muted = true;
+			attr(div, "class", "video-icon svelte-6jwk1w");
+			set_style(div, "background-image", "url(" + Image_Play + ")");
+		},
+		m(target, anchor) {
+			insert(target, video, anchor);
+			insert(target, t, anchor);
+			insert(target, div, anchor);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*media*/ 1 && !src_url_equal(video.src, video_src_value = /*media*/ ctx[0].url)) {
+				attr(video, "src", video_src_value);
+			}
+
+			if (dirty & /*media*/ 1 && video_poster_value !== (video_poster_value = /*media*/ ctx[0].videoCoverUrl ?? undefined)) {
+				attr(video, "poster", video_poster_value);
+			}
+
+			if (dirty & /*media*/ 1 && video_preload_value !== (video_preload_value = /*media*/ ctx[0].videoCoverUrl ? undefined : 'auto')) {
+				attr(video, "preload", video_preload_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(video);
+			if (detaching) detach(t);
+			if (detaching) detach(div);
+		}
+	};
+}
+
+// (8:4) {#if media.type === 'Image'}
+function create_if_block_1(ctx) {
+	let img;
+	let img_src_value;
+	let img_alt_value;
+
+	return {
+		c() {
+			img = element("img");
+			attr(img, "class", "media-content svelte-6jwk1w");
+			if (!src_url_equal(img.src, img_src_value = /*media*/ ctx[0].url)) attr(img, "src", img_src_value);
+			attr(img, "alt", img_alt_value = /*media*/ ctx[0].name);
+		},
+		m(target, anchor) {
+			insert(target, img, anchor);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*media*/ 1 && !src_url_equal(img.src, img_src_value = /*media*/ ctx[0].url)) {
+				attr(img, "src", img_src_value);
+			}
+
+			if (dirty & /*media*/ 1 && img_alt_value !== (img_alt_value = /*media*/ ctx[0].name)) {
+				attr(img, "alt", img_alt_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) detach(img);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let if_block_anchor;
+	let if_block = /*media*/ ctx[0] && create_if_block(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (/*media*/ ctx[0]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { media } = $$props;
+	let { objectFit = 'cover' } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('media' in $$props) $$invalidate(0, media = $$props.media);
+		if ('objectFit' in $$props) $$invalidate(1, objectFit = $$props.objectFit);
+	};
+
+	return [media, objectFit];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { media: 0, objectFit: 1 }, add_css);
+	}
+}
+
+export default Component;

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

@@ -35,7 +35,7 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (80:0) {#each contentList as item, index}
+// (79:0) {#each contentList as item, index}
 function create_each_block(ctx) {
 	let span;
 	let t_value = /*item*/ ctx[10] + "";
@@ -217,7 +217,6 @@ function instance($$self, $$props, $$invalidate) {
 					if (item.startsWith(emojiFlag)) return result.push(item.slice(emojiFlag.length)); else return result.push(...item.split(''));
 				});
 
-				// console.log(result.filter(Boolean))
 				return result.filter(Boolean);
 			})());
 		}

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

@@ -252,6 +252,7 @@ function create_if_block_1(ctx) {
 
 	media = new Media({
 			props: {
+				autoplayConfig: { autoplay: false },
 				unfolded: /*unfolded*/ ctx[4],
 				mediaData: /*mediaData*/ ctx[3],
 				inDelay: 500,

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

@@ -24,7 +24,7 @@ function add_css(target) {
 	append_styles(target, "svelte-10cw0el", ".media-wrapper.svelte-10cw0el{position:absolute;width:100%;height:100%}");
 }
 
-// (18:0) {#if tag.state && mediaData}
+// (20:0) {#if tag.state && mediaData}
 function create_if_block(ctx) {
 	let div;
 	let media;
@@ -32,10 +32,11 @@ function create_if_block(ctx) {
 
 	media = new Media({
 			props: {
-				unfolded: /*unfolded*/ ctx[3],
-				mediaData: /*mediaData*/ ctx[2],
-				objectFit: /*objectFit*/ ctx[1],
-				enableCarousel: true,
+				unfolded: /*unfolded*/ ctx[5],
+				mediaData: /*mediaData*/ ctx[4],
+				objectFit: /*objectFit*/ ctx[2],
+				enableCarousel: /*enableCarousel*/ ctx[1],
+				autoplayConfig: /*autoplayConfig*/ ctx[3],
 				inDelay: 500,
 				duration: 500
 			}
@@ -54,9 +55,11 @@ function create_if_block(ctx) {
 		},
 		p(ctx, dirty) {
 			const media_changes = {};
-			if (dirty & /*unfolded*/ 8) media_changes.unfolded = /*unfolded*/ ctx[3];
-			if (dirty & /*mediaData*/ 4) media_changes.mediaData = /*mediaData*/ ctx[2];
-			if (dirty & /*objectFit*/ 2) media_changes.objectFit = /*objectFit*/ ctx[1];
+			if (dirty & /*unfolded*/ 32) media_changes.unfolded = /*unfolded*/ ctx[5];
+			if (dirty & /*mediaData*/ 16) media_changes.mediaData = /*mediaData*/ ctx[4];
+			if (dirty & /*objectFit*/ 4) media_changes.objectFit = /*objectFit*/ ctx[2];
+			if (dirty & /*enableCarousel*/ 2) media_changes.enableCarousel = /*enableCarousel*/ ctx[1];
+			if (dirty & /*autoplayConfig*/ 8) media_changes.autoplayConfig = /*autoplayConfig*/ ctx[3];
 			media.$set(media_changes);
 		},
 		i(local) {
@@ -78,7 +81,7 @@ function create_if_block(ctx) {
 function create_fragment(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*tag*/ ctx[0].state && /*mediaData*/ ctx[2] && create_if_block(ctx);
+	let if_block = /*tag*/ ctx[0].state && /*mediaData*/ ctx[4] && create_if_block(ctx);
 
 	return {
 		c() {
@@ -91,11 +94,11 @@ function create_fragment(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (/*tag*/ ctx[0].state && /*mediaData*/ ctx[2]) {
+			if (/*tag*/ ctx[0].state && /*mediaData*/ ctx[4]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
-					if (dirty & /*tag, mediaData*/ 5) {
+					if (dirty & /*tag, mediaData*/ 17) {
 						transition_in(if_block, 1);
 					}
 				} else {
@@ -133,8 +136,10 @@ function create_fragment(ctx) {
 function instance($$self, $$props, $$invalidate) {
 	let unfolded;
 	let mediaData;
+	let enableCarousel;
+	let autoplayConfig;
 	let objectFit;
-	var _a;
+	var _a, _b;
 	let { tag } = $$props;
 
 	$$self.$$set = $$props => {
@@ -143,23 +148,38 @@ function instance($$self, $$props, $$invalidate) {
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*tag*/ 1) {
-			$: $$invalidate(3, unfolded = tag.state ? tag.state.unfolded : false);
+			$: $$invalidate(5, unfolded = tag.state ? tag.state.unfolded : false);
 		}
 
 		if ($$self.$$.dirty & /*tag*/ 1) {
-			$: $$invalidate(2, mediaData = tag.data.mediaData);
+			$: $$invalidate(4, mediaData = tag.data.mediaData);
 		}
 
-		if ($$self.$$.dirty & /*tag, _a*/ 17) {
-			$: $$invalidate(1, objectFit = $$invalidate(4, _a = tag.data.objectFit) !== null && _a !== void 0
+		if ($$self.$$.dirty & /*tag*/ 1) {
+			$: $$invalidate(1, enableCarousel = tag.data.enableCarousel);
+		}
+
+		if ($$self.$$.dirty & /*tag, _a, enableCarousel*/ 67) {
+			$: $$invalidate(3, autoplayConfig = $$invalidate(6, _a = tag.data.autoplayConfig) !== null && _a !== void 0
 			? _a
+			: {
+					autoplay: enableCarousel !== null && enableCarousel !== void 0
+					? enableCarousel
+					: true,
+					autoplayVideo: true
+				});
+		}
+
+		if ($$self.$$.dirty & /*tag, _b*/ 129) {
+			$: $$invalidate(2, objectFit = $$invalidate(7, _b = tag.data.objectFit) !== null && _b !== void 0
+			? _b
 			: (() => {
 					if (tag.data.adaptationMode === 'stretch') return 'cover'; else if (tag.data.adaptationMode === 'proportional') return 'contain'; else return undefined;
 				})());
 		}
 	};
 
-	return [tag, objectFit, mediaData, unfolded, _a];
+	return [tag, enableCarousel, objectFit, autoplayConfig, mediaData, unfolded, _a, _b];
 }
 
 class Component extends SvelteComponent {

package/libs/PanoTagPlugin/controller/TagComputer.d.ts

@@ -9,6 +9,7 @@ export declare abstract class TagComputer extends TagCacheController {
     };
     private raycaster;
     protected constructor(five: Five);
+    getTagById(id: TagId): TagElement<import("../typings").ContentType, PointType, DimensionType, {}>;
     /**
      * @description: 改变配置
      */
@@ -48,22 +49,20 @@ export declare abstract class TagComputer extends TagCacheController {
     /**
      * @description: 一个点的标签
      */
-    setPointTagPosition(): void;
-    setVisibleByPanoIndex(): void;
-    setUnfoldedByPanoIndex(): void;
-    setVisibleAndUnfoldedByPanoIndex(): void;
+    protected setPointTagPosition(): void;
+    protected setVisibleByPanoIndex(): void;
+    protected setUnfoldedByPanoIndex(): void;
     /**
      * @description: 一个点的标签
      */
-    getTagProject(tag: Tag): {
+    protected getTagProject(tag: Tag): {
         x: number;
         y: number;
         z: number;
     };
-    getTagById(id: TagId): TagElement<import("../typings").ContentType, PointType, DimensionType, {}>;
-    filterPointTag(): PointTagElement[];
-    filterTag2D(): Tag2DElement[];
-    filter3DPointTag(): Tag3DElement[];
-    filter3DTag(): TagElement<any, PointType, DimensionType.Three>[];
-    filterPlaneTag(): PlaneTagElement[];
+    protected filterPointTag(): PointTagElement[];
+    protected filterTag2D(): Tag2DElement[];
+    protected filter3DPointTag(): Tag3DElement[];
+    protected filter3DTag(): TagElement<any, PointType, DimensionType.Three>[];
+    protected filterPlaneTag(): PlaneTagElement[];
 }

package/libs/PanoTagPlugin/controller/TagComputer.js

@@ -27,6 +27,16 @@ export class TagComputer extends TagCacheController {
             value: new THREE.Raycaster()
         });
     }
+    getTagById(id) {
+        const tag = this.tags.find((tag) => {
+            return tag.id === id;
+        });
+        if (!tag) {
+            console.error(`getTagById(): tag is ${tag}, id is ${id}`);
+            return undefined;
+        }
+        return tag;
+    }
     /**
      * @description: 改变配置
      */
@@ -81,7 +91,6 @@ export class TagComputer extends TagCacheController {
             const visible = (() => {
                 var _a, _b, _c, _d, _e;
                 const config = (_a = this.getTagConfig(tag).visibleConfig) !== null && _a !== void 0 ? _a : {};
-                // console.log(config)
                 const distance = this.getDistance(tag);
                 if (typeof config === 'function') {
                     return config(this.five, { tag, distance });
@@ -357,18 +366,11 @@ export class TagComputer extends TagCacheController {
             const unfolded = this.getUnfoldedByPanoIndex(tag);
             if (!tag.state)
                 return;
-            if (unfolded === undefined)
-                return;
-            tag.state.unfolded = unfolded;
-        });
-    }
-    setVisibleAndUnfoldedByPanoIndex() {
-        this.setVisibleByPanoIndex();
-        this.setUnfoldedByPanoIndex();
-        this.tags.forEach((tag) => {
-            var _a, _b;
+            if (unfolded !== undefined) {
+                tag.state.unfolded = unfolded;
+            }
             // 如果标签展开但不可见，就要判断autoUnfoldWhenHide
-            if (((_a = tag.state) === null || _a === void 0 ? void 0 : _a.unfolded) && !((_b = tag.state) === null || _b === void 0 ? void 0 : _b.visible)) {
+            if (unfolded && !tag.state.visible) {
                 const config = this.getTagConfig(tag);
                 if (typeof config.unfoldedConfig === 'object' && config.unfoldedConfig.autoUnfoldWhenHide !== false) {
                     tag.state.unfolded = false;
@@ -389,16 +391,6 @@ export class TagComputer extends TagCacheController {
             return;
         return { x, y, z };
     }
-    getTagById(id) {
-        const tag = this.tags.find((tag) => {
-            return tag.id === id;
-        });
-        if (!tag) {
-            console.error(`getTagById(): tag is ${tag}, id is ${id}`);
-            return undefined;
-        }
-        return tag;
-    }
     // TODO: 优化点：下面这些函数，调用比较频繁，可以按点位加缓存
     filterPointTag() {
         return this.tags.filter((tag) => tag.pointType === PointType.PointTag);

package/libs/PanoTagPlugin/controller/index.d.ts

@@ -1,5 +1,5 @@
 import { Five } from '@realsee/five';
-import type { Tag, ContentType, PartialDeep, TagId, Tags, State } from '../typings';
+import type { Tag, ContentType, PartialDeep, TagId, Tags, State, AddTagConfig } from '../typings';
 import { TagComputer } from './TagComputer';
 import { ArrayPosition } from '../typings';
 export declare const pluginFlag: (name: string) => string;
@@ -40,11 +40,12 @@ declare class PanoTagPluginController extends TagComputer {
     /**
      * @description: 加载数据
      */
-    load(data: Tags): void;
+    load(data: Tags, config?: AddTagConfig): void;
     /**
      * @description: 添加标签
      */
-    addTag(tag: Tag | Tag[]): void;
+    addTag(tag: Tag | Tag[], config?: AddTagConfig): void;
+    clearTags(): void;
     show(params?: {
         userAction?: boolean;
         withAnimation?: boolean;
@@ -87,6 +88,10 @@ declare class PanoTagPluginController extends TagComputer {
     destroyTagById(id: TagId | TagId[]): void;
     /** 暂停当前标签内进行的所有多媒体 */
     pauseCurrentMedia(): void;
+    /**
+     * @description: 设置 visible 和 unfolded
+     */
+    private setVisibleAndUnfolded;
     private handleShow;
     private handleHide;
     private handleEnable;
@@ -114,7 +119,7 @@ declare class PanoTagPluginController extends TagComputer {
     /**
      * @description: 更新所有标签
      */
-    private updateRenderAllTag;
+    private updateRenderAllTags;
     private updateTagContainerVisible;
     private handleFiveCameraUpdateDebounce;
     private handleFiveCameraUpdate;