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

package/dist/PanoTagPlugin/index.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var five = require('@realsee/five');
 var THREE = require('three');
 var objectAssignDeep = require('object-assign-deep');
 var store = require('svelte/store');
@@ -10,7 +11,6 @@ var transition = require('svelte/transition');
 var anime = require('animejs');
 var svelte = require('svelte');
 var easing = require('svelte/easing');
-var five = require('@realsee/five');
 var CSS3DRenderer = require('three/examples/jsm/renderers/CSS3DRenderer');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -46,7 +46,7 @@ function evenNumber(num, config) {
     return roundNum % 2 === 0 ? roundNum : roundNum + Number((config === null || config === void 0 ? void 0 : config.smaller) ? -1 : 1);
 }
 
-function random() {
+function random$1() {
     return Math.random().toString(36).slice(-6);
 }
 
@@ -279,7 +279,7 @@ exports.ContentType = void 0;
     /** 营销标签 */
     ContentType["Marketing"] = "Marketing";
     /** 图片视频贴片 */
-    ContentType["MediaPanel"] = "MediaPanel";
+    ContentType["MediaPlane"] = "MediaPlane";
     /** 其他/自定义标签 */
     ContentType["Custom"] = "Custom";
 })(exports.ContentType || (exports.ContentType = {}));
@@ -301,14 +301,14 @@ function uuid() {
     return (S4() + S4() + '-' + S4() + '-4' + S4().substr(0, 3) + '-' + S4() + '-' + S4() + S4() + S4()).toLowerCase();
 }
 
-/* src/PanoTagPlugin/Components/Common/Line/Straight.svelte generated by Svelte v3.49.0 */
+/* src/PanoTagPlugin/Components/Common/Line/Straight.svelte generated by Svelte v3.50.1 */
 
-function add_css$j(target) {
+function add_css$k(target) {
 	internal.append_styles(target, "svelte-1omzoh4", ".straight-line.svelte-1omzoh4{display:block;width:100%;height:100%;overflow:visible}");
 }
 
 // (17:2) {#if unfolded}
-function create_if_block$f(ctx) {
+function create_if_block$g(ctx) {
 	let path;
 	let path_intro;
 	let path_outro;
@@ -366,13 +366,13 @@ function create_if_block$f(ctx) {
 	};
 }
 
-function create_fragment$j(ctx) {
+function create_fragment$k(ctx) {
 	let svg;
 	let defs;
 	let linearGradient;
 	let stop0;
 	let stop1;
-	let if_block = /*unfolded*/ ctx[3] && create_if_block$f(ctx);
+	let if_block = /*unfolded*/ ctx[3] && create_if_block$g(ctx);
 
 	return {
 		c() {
@@ -411,7 +411,7 @@ function create_fragment$j(ctx) {
 						internal.transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$f(ctx);
+					if_block = create_if_block$g(ctx);
 					if_block.c();
 					internal.transition_in(if_block, 1);
 					if_block.m(svg, null);
@@ -439,7 +439,7 @@ function create_fragment$j(ctx) {
 	};
 }
 
-function instance$j($$self, $$props, $$invalidate) {
+function instance$k($$self, $$props, $$invalidate) {
 	let { inDelay = 0 } = $$props;
 	let { duration = 0 } = $$props;
 	let { outDelay = 0 } = $$props;
@@ -463,8 +463,8 @@ class Straight extends internal.SvelteComponent {
 		internal.init(
 			this,
 			options,
-			instance$j,
-			create_fragment$j,
+			instance$k,
+			create_fragment$k,
 			internal.safe_not_equal,
 			{
 				inDelay: 0,
@@ -472,19 +472,19 @@ class Straight extends internal.SvelteComponent {
 				outDelay: 2,
 				unfolded: 3
 			},
-			add_css$j
+			add_css$k
 		);
 	}
 }
 
-/* src/PanoTagPlugin/Components/Common/Shadow.svelte generated by Svelte v3.49.0 */
+/* src/PanoTagPlugin/Components/Common/Shadow.svelte generated by Svelte v3.50.1 */
 
-function add_css$i(target) {
+function add_css$j(target) {
 	internal.append_styles(target, "svelte-faoauy", ".shadow.svelte-faoauy{position:absolute}");
 }
 
-// (21:0) {#if visible}
-function create_if_block$e(ctx) {
+// (23:0) {#if visible}
+function create_if_block$f(ctx) {
 	let div;
 	let div_style_value;
 	let div_intro;
@@ -580,9 +580,9 @@ function create_if_block$e(ctx) {
 	};
 }
 
-function create_fragment$i(ctx) {
+function create_fragment$j(ctx) {
 	let if_block_anchor;
-	let if_block = /*visible*/ ctx[2] && create_if_block$e(ctx);
+	let if_block = /*visible*/ ctx[2] && create_if_block$f(ctx);
 
 	return {
 		c() {
@@ -602,7 +602,7 @@ function create_fragment$i(ctx) {
 						internal.transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$e(ctx);
+					if_block = create_if_block$f(ctx);
 					if_block.c();
 					internal.transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -634,7 +634,7 @@ function px2rem(value) {
 	return typeof value === 'number' ? value / 16 + 'rem' : value;
 }
 
-function instance$i($$self, $$props, $$invalidate) {
+function instance$j($$self, $$props, $$invalidate) {
 	let { inDelay = 1000 } = $$props;
 	let { outDelay = 1000 } = $$props;
 	let { visible = true } = $$props;
@@ -648,7 +648,7 @@ function instance$i($$self, $$props, $$invalidate) {
 	let { blurRadius } = $$props;
 	let { spreadRadius } = $$props;
 	let { opacity = 0.15 } = $$props;
-	let { zIndex = -1 } = $$props;
+	let { zIndex = undefined } = $$props;
 
 	$$self.$$set = $$props => {
 		if ('inDelay' in $$props) $$invalidate(0, inDelay = $$props.inDelay);
@@ -692,8 +692,8 @@ class Shadow extends internal.SvelteComponent {
 		internal.init(
 			this,
 			options,
-			instance$i,
-			create_fragment$i,
+			instance$j,
+			create_fragment$j,
 			internal.safe_not_equal,
 			{
 				inDelay: 0,
@@ -711,7 +711,7 @@ class Shadow extends internal.SvelteComponent {
 				opacity: 12,
 				zIndex: 13
 			},
-			add_css$i
+			add_css$j
 		);
 	}
 }
@@ -728,13 +728,18 @@ function notNil(value) {
     return value !== null && value !== undefined;
 }
 
-/* src/PanoTagPlugin/Components/Common/Text.svelte generated by Svelte v3.49.0 */
+function random() {
+    return Math.random().toString(36).slice(-6);
+}
+const RANDON_STRING = random();
+
+/* src/PanoTagPlugin/Components/Common/Text.svelte generated by Svelte v3.50.1 */
 
-function add_css$h(target) {
+function add_css$i(target) {
 	internal.append_styles(target, "svelte-1b2n9wi", ".text-char.svelte-1b2n9wi{display:inline-block;text-shadow:0.125rem 0rem 0.5rem rgba(0, 0, 0, 0.15)}");
 }
 
-function get_each_context$4(ctx, list, i) {
+function get_each_context$5(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[10] = list[i];
 	child_ctx[11] = list;
@@ -742,8 +747,8 @@ function get_each_context$4(ctx, list, i) {
 	return child_ctx;
 }
 
-// (60:0) {#each contentList as item, index}
-function create_each_block$4(ctx) {
+// (80:0) {#each contentList as item, index}
+function create_each_block$5(ctx) {
 	let span;
 	let t_value = /*item*/ ctx[10] + "";
 	let t;
@@ -779,13 +784,13 @@ function create_each_block$4(ctx) {
 	};
 }
 
-function create_fragment$h(ctx) {
+function create_fragment$i(ctx) {
 	let each_1_anchor;
 	let each_value = /*contentList*/ ctx[1];
 	let each_blocks = [];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		each_blocks[i] = create_each_block$4(get_each_context$4(ctx, each_value, i));
+		each_blocks[i] = create_each_block$5(get_each_context$5(ctx, each_value, i));
 	}
 
 	return {
@@ -809,12 +814,12 @@ function create_fragment$h(ctx) {
 				let i;
 
 				for (i = 0; i < each_value.length; i += 1) {
-					const child_ctx = get_each_context$4(ctx, each_value, i);
+					const child_ctx = get_each_context$5(ctx, each_value, i);
 
 					if (each_blocks[i]) {
 						each_blocks[i].p(child_ctx, dirty);
 					} else {
-						each_blocks[i] = create_each_block$4(child_ctx);
+						each_blocks[i] = create_each_block$5(child_ctx);
 						each_blocks[i].c();
 						each_blocks[i].m(each_1_anchor.parentNode, each_1_anchor);
 					}
@@ -836,7 +841,7 @@ function create_fragment$h(ctx) {
 	};
 }
 
-function instance$h($$self, $$props, $$invalidate) {
+function instance$i($$self, $$props, $$invalidate) {
 	let contentList;
 	let { inDelay = 0 } = $$props;
 	let { outDelay = 0 } = $$props;
@@ -910,7 +915,23 @@ function instance$h($$self, $$props, $$invalidate) {
 
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*content*/ 16) {
-			$$invalidate(1, contentList = content.slice().split(''));
+			// v0.3.7 emoji support
+			$$invalidate(1, contentList = (() => {
+				const result = [];
+
+				// 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 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(''));
+				});
+
+				// console.log(result.filter(Boolean))
+				return result.filter(Boolean);
+			})());
 		}
 
 		if ($$self.$$.dirty & /*unfolded*/ 32) {
@@ -930,8 +951,8 @@ class Text extends internal.SvelteComponent {
 		internal.init(
 			this,
 			options,
-			instance$h,
-			create_fragment$h,
+			instance$i,
+			create_fragment$i,
 			internal.safe_not_equal,
 			{
 				inDelay: 2,
@@ -939,7 +960,7 @@ class Text extends internal.SvelteComponent {
 				content: 4,
 				unfolded: 5
 			},
-			add_css$h
+			add_css$i
 		);
 	}
 }
@@ -947,14 +968,14 @@ class Text extends internal.SvelteComponent {
 const Image_Arrow = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAKqADAAQAAAABAAAAKgAAAADUGqULAAAB0ElEQVRYCe2WSUoEQRBFLVHEiVZU1I03cKW38SSewRt4A5fiTty5cQIFR9pZQWkcUNSe2/Z9yISiSGxRkUAy4BGZSVX168gistraYsQKxArECsQKxApYqkDyU5lmsznMM+ZgAGpQhaUkSRbINgLJCXiCBtSgAkVYtGGIBTKj8AgKSVahDNvQa0IUkUG4Bx91BpLdBTOS/cgUIB3a+gMwI9mFzE3a0I3z5B4r292JzGVA8tSSZILMcUDyzIykthOZvYDk+V9Ktmz4yGzhOhV4/+5YU4N/hzqo0StX3Fg5TcnNlYvgs8bPsM4hkScHoyO46haRnGEYktQVI+4ypUYKyXtxyUu27JCceAMJvjo0HoM5CEZ7cPX7i013q3IWVV5r2aw/2TK+svWbPGU68KQCa6pYeus1V0X99quSfvtVSc39lmfz2mdbz32tg1dAJ0421AVs9E7/FxBSezrMmjI/gm5/nYmMkBq+TqBs7LNgTlZH6EnWlPmORdk+pHQipUNfTxtg7p3NIXWRMvXfoqusmXsNhpC6crIS1Zf9C6yAOdlxpK5BW18CiT7A/G93gE+P0FY/RoO+RWqS62YhB2r4YhlixArECsQKxArECvzjCnwAOr0wF44ggHAAAAAASUVORK5CYII=';
 const Image_Play = 'data:image/png;base64,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';
 
-/* src/PanoTagPlugin/Components/Common/Arrow.svelte generated by Svelte v3.49.0 */
+/* src/PanoTagPlugin/Components/Common/Arrow.svelte generated by Svelte v3.50.1 */
 
-function add_css$g(target) {
+function add_css$h(target) {
 	internal.append_styles(target, "svelte-1ogmlqq", ".arrow.svelte-1ogmlqq{width:100%;height:100%;background-size:100%;transition:transform 400ms ease-in-out;cursor:pointer;pointer-events:auto}.arrow-wrapper.svelte-1ogmlqq{position:relative;width:100%;height:100%}.arrow.left.svelte-1ogmlqq{transform:rotate(0deg)}.arrow.right.svelte-1ogmlqq{transform:rotate(-180deg)}.arrow.top.svelte-1ogmlqq{transform:rotate(90deg)}.arrow.bottom.svelte-1ogmlqq{transform:rotate(-90deg)}");
 }
 
 // (12:0) {#if visible}
-function create_if_block$d(ctx) {
+function create_if_block$e(ctx) {
 	let div1;
 	let shadow;
 	let t;
@@ -970,8 +991,7 @@ function create_if_block$d(ctx) {
 			props: {
 				center: true,
 				blurRadius: 9,
-				spreadRadius: 3,
-				zIndex: -1
+				spreadRadius: 3
 			}
 		});
 
@@ -1048,10 +1068,10 @@ function create_if_block$d(ctx) {
 	};
 }
 
-function create_fragment$g(ctx) {
+function create_fragment$h(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*visible*/ ctx[1] && create_if_block$d(ctx);
+	let if_block = /*visible*/ ctx[1] && create_if_block$e(ctx);
 
 	return {
 		c() {
@@ -1072,7 +1092,7 @@ function create_fragment$g(ctx) {
 						internal.transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$d(ctx);
+					if_block = create_if_block$e(ctx);
 					if_block.c();
 					internal.transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -1103,7 +1123,7 @@ function create_fragment$g(ctx) {
 	};
 }
 
-function instance$g($$self, $$props, $$invalidate) {
+function instance$h($$self, $$props, $$invalidate) {
 	let { direction = 'right' } = $$props;
 	let { visible = true } = $$props;
 	let { duration = 0 } = $$props;
@@ -1132,8 +1152,8 @@ class Arrow extends internal.SvelteComponent {
 		internal.init(
 			this,
 			options,
-			instance$g,
-			create_fragment$g,
+			instance$h,
+			create_fragment$h,
 			internal.safe_not_equal,
 			{
 				direction: 0,
@@ -1142,18 +1162,18 @@ class Arrow extends internal.SvelteComponent {
 				inDelay: 3,
 				outDelay: 4
 			},
-			add_css$g
+			add_css$h
 		);
 	}
 }
 
-/* src/PanoTagPlugin/Components/Common/MultiLineText.svelte generated by Svelte v3.49.0 */
+/* src/PanoTagPlugin/Components/Common/MultiLineText.svelte generated by Svelte v3.50.1 */
 
-function add_css$f(target) {
+function add_css$g(target) {
 	internal.append_styles(target, "svelte-1fuzm7v", ".text.svelte-1fuzm7v{pointer-events:auto;box-sizing:border-box;display:inline-block;max-width:7.5rem;transition:transform 400ms ease-in-out;font-size:0.75rem;line-height:1.125rem;white-space:initial;cursor:pointer}.arrow.svelte-1fuzm7v{pointer-events:auto;display:inline-block;vertical-align:top;width:0.875rem;height:0.875rem;margin-left:0.125rem;margin-top:0.125rem}");
 }
 
-function get_each_context$3(ctx, list, i) {
+function get_each_context$4(ctx, list, i) {
 	const child_ctx = ctx.slice();
 	child_ctx[11] = list[i].id;
 	child_ctx[12] = list[i].content;
@@ -1161,7 +1181,7 @@ function get_each_context$3(ctx, list, i) {
 }
 
 // (23:0) {#each textItems as { id, content }
-function create_each_block$3(key_1, ctx) {
+function create_each_block$4(key_1, ctx) {
 	let div;
 	let text_1;
 	let current;
@@ -1221,7 +1241,7 @@ function create_each_block$3(key_1, ctx) {
 }
 
 // (28:0) {#if lineHeight < textHeight}
-function create_if_block$c(ctx) {
+function create_if_block$d(ctx) {
 	let div;
 	let arrow;
 	let current;
@@ -1268,7 +1288,7 @@ function create_if_block$c(ctx) {
 	};
 }
 
-function create_fragment$f(ctx) {
+function create_fragment$g(ctx) {
 	let each_blocks = [];
 	let each_1_lookup = new Map();
 	let t;
@@ -1278,12 +1298,12 @@ function create_fragment$f(ctx) {
 	const get_key = ctx => /*id*/ ctx[11];
 
 	for (let i = 0; i < each_value.length; i += 1) {
-		let child_ctx = get_each_context$3(ctx, each_value, i);
+		let child_ctx = get_each_context$4(ctx, each_value, i);
 		let key = get_key(child_ctx);
-		each_1_lookup.set(key, each_blocks[i] = create_each_block$3(key, child_ctx));
+		each_1_lookup.set(key, each_blocks[i] = create_each_block$4(key, child_ctx));
 	}
 
-	let if_block = /*lineHeight*/ ctx[3] < /*textHeight*/ ctx[4] && create_if_block$c(ctx);
+	let if_block = /*lineHeight*/ ctx[3] < /*textHeight*/ ctx[4] && create_if_block$d(ctx);
 
 	return {
 		c() {
@@ -1309,7 +1329,7 @@ function create_fragment$f(ctx) {
 			if (dirty & /*textElement, transform, visible, textItems, foldTextDelay*/ 167) {
 				each_value = /*textItems*/ ctx[1];
 				internal.group_outros();
-				each_blocks = internal.update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, t.parentNode, internal.outro_and_destroy_block, create_each_block$3, t, get_each_context$3);
+				each_blocks = internal.update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, t.parentNode, internal.outro_and_destroy_block, create_each_block$4, t, get_each_context$4);
 				internal.check_outros();
 			}
 
@@ -1321,7 +1341,7 @@ function create_fragment$f(ctx) {
 						internal.transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$c(ctx);
+					if_block = create_if_block$d(ctx);
 					if_block.c();
 					internal.transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -1366,7 +1386,7 @@ function create_fragment$f(ctx) {
 	};
 }
 
-function instance$f($$self, $$props, $$invalidate) {
+function instance$g($$self, $$props, $$invalidate) {
 	let transform;
 	let arrowDirection;
 	let foldTextDelay;
@@ -1441,27 +1461,27 @@ class MultiLineText extends internal.SvelteComponent {
 		internal.init(
 			this,
 			options,
-			instance$f,
-			create_fragment$f,
+			instance$g,
+			create_fragment$g,
 			internal.safe_not_equal,
 			{
 				visible: 0,
 				textUnfolded: 8,
 				textItems: 1
 			},
-			add_css$f
+			add_css$g
 		);
 	}
 }
 
-/* src/PanoTagPlugin/Components/Tag/TextTag.svelte generated by Svelte v3.49.0 */
+/* src/PanoTagPlugin/Components/Tag/TextTag.svelte generated by Svelte v3.50.1 */
 
-function add_css$e(target) {
+function add_css$f(target) {
 	internal.append_styles(target, "svelte-4fxqxl", ".line.svelte-4fxqxl{position:absolute;top:0;left:0;width:10.125rem;height:0.0625rem;transform:translate3d(0, -50%, 0.625rem)}.content.svelte-4fxqxl{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;overflow:hidden;box-sizing:border-box;font-size:0;pointer-events:none;white-space:nowrap;font-weight:600}");
 }
 
 // (29:0) {#if tag.state}
-function create_if_block$b(ctx) {
+function create_if_block$c(ctx) {
 	let shadow;
 	let t0;
 	let div0;
@@ -1579,10 +1599,10 @@ function create_if_block$b(ctx) {
 	};
 }
 
-function create_fragment$e(ctx) {
+function create_fragment$f(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*tag*/ ctx[0].state && create_if_block$b(ctx);
+	let if_block = /*tag*/ ctx[0].state && create_if_block$c(ctx);
 
 	return {
 		c() {
@@ -1603,7 +1623,7 @@ function create_fragment$e(ctx) {
 						internal.transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$b(ctx);
+					if_block = create_if_block$c(ctx);
 					if_block.c();
 					internal.transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -1634,7 +1654,7 @@ function create_fragment$e(ctx) {
 	};
 }
 
-function instance$e($$self, $$props, $$invalidate) {
+function instance$f($$self, $$props, $$invalidate) {
 	let unfolded;
 	let text;
 	let foldTextDelay;
@@ -1709,18 +1729,18 @@ function instance$e($$self, $$props, $$invalidate) {
 class TextTag extends internal.SvelteComponent {
 	constructor(options) {
 		super();
-		internal.init(this, options, instance$e, create_fragment$e, internal.safe_not_equal, { tag: 0 }, add_css$e);
+		internal.init(this, options, instance$f, create_fragment$f, internal.safe_not_equal, { tag: 0 }, add_css$f);
 	}
 }
 
-/* src/PanoTagPlugin/Components/Common/Line/Polyline.svelte generated by Svelte v3.49.0 */
+/* src/PanoTagPlugin/Components/Common/Line/Polyline.svelte generated by Svelte v3.50.1 */
 
-function add_css$d(target) {
+function add_css$e(target) {
 	internal.append_styles(target, "svelte-e72ouh", ".line.svelte-e72ouh{width:100%;height:100%;overflow:visible}");
 }
 
 // (18:2) {#if unfolded}
-function create_if_block$a(ctx) {
+function create_if_block$b(ctx) {
 	let path;
 	let path_intro;
 	let path_outro;
@@ -1780,13 +1800,13 @@ function create_if_block$a(ctx) {
 	};
 }
 
-function create_fragment$d(ctx) {
+function create_fragment$e(ctx) {
 	let svg;
 	let defs;
 	let linearGradient;
 	let stop0;
 	let stop1;
-	let if_block = /*unfolded*/ ctx[3] && create_if_block$a(ctx);
+	let if_block = /*unfolded*/ ctx[3] && create_if_block$b(ctx);
 
 	return {
 		c() {
@@ -1824,7 +1844,7 @@ function create_fragment$d(ctx) {
 						internal.transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$a(ctx);
+					if_block = create_if_block$b(ctx);
 					if_block.c();
 					internal.transition_in(if_block, 1);
 					if_block.m(svg, null);
@@ -1852,7 +1872,7 @@ function create_fragment$d(ctx) {
 	};
 }
 
-function instance$d($$self, $$props, $$invalidate) {
+function instance$e($$self, $$props, $$invalidate) {
 	let { inDelay = 0 } = $$props;
 	let { duration = 0 } = $$props;
 	let { outDelay = 0 } = $$props;
@@ -1876,8 +1896,8 @@ class Polyline extends internal.SvelteComponent {
 		internal.init(
 			this,
 			options,
-			instance$d,
-			create_fragment$d,
+			instance$e,
+			create_fragment$e,
 			internal.safe_not_equal,
 			{
 				inDelay: 0,
@@ -1885,80 +1905,84 @@ class Polyline extends internal.SvelteComponent {
 				outDelay: 2,
 				unfolded: 3
 			},
-			add_css$d
+			add_css$e
 		);
 	}
 }
 
-/* src/PanoTagPlugin/Components/Common/Media.svelte generated by Svelte v3.49.0 */
+/* src/PanoTagPlugin/Components/Common/Media.svelte generated by Svelte v3.50.1 */
 
-function add_css$c(target) {
-	internal.append_styles(target, "svelte-ts8zx4", ".media.svelte-ts8zx4{width:100%;height:100%;position:relative;overflow:hidden;border-radius:0.125rem}.media-content.svelte-ts8zx4{width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;-o-object-fit:cover;object-fit:cover}.video-icon.svelte-ts8zx4{width:1.75rem;height:1.75rem;background-size:100%;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}");
+function add_css$d(target) {
+	internal.append_styles(target, "svelte-129jnm", ".media.svelte-129jnm{width:100%;height:100%;position:relative;overflow:hidden;border-radius:0.125rem}.carousel-item.svelte-129jnm{height:100%}.media-content.svelte-129jnm{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-129jnm{width:1.75rem;height:1.75rem;background-size:100%;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}");
 }
 
-// (12:0) {#if unfolded}
-function create_if_block$9(ctx) {
+function get_each_context$3(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[9] = list[i];
+	return child_ctx;
+}
+
+// (16:0) {#if unfolded}
+function create_if_block$a(ctx) {
 	let div;
-	let t;
 	let div_intro;
 	let div_outro;
 	let current;
+	let each_value = /*mediaDataList*/ ctx[6];
+	let each_blocks = [];
 
-	function select_block_type(ctx, dirty) {
-		if (/*imageUrl*/ ctx[5]) return create_if_block_2$3;
-		return create_else_block$1;
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block$3(get_each_context$3(ctx, each_value, i));
 	}
 
-	let current_block_type = select_block_type(ctx);
-	let if_block0 = current_block_type(ctx);
-	let if_block1 = /*mediaData*/ ctx[0].type === 'Video' && create_if_block_1$6();
-
 	return {
 		c() {
 			div = internal.element("div");
-			if_block0.c();
-			t = internal.space();
-			if (if_block1) if_block1.c();
-			internal.attr(div, "class", "media svelte-ts8zx4");
-			internal.toggle_class(div, "unfolded", /*unfolded*/ ctx[4]);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			internal.attr(div, "class", "media svelte-129jnm");
+			internal.toggle_class(div, "unfolded", /*unfolded*/ ctx[3]);
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
-			if_block0.m(div, null);
-			internal.append(div, t);
-			if (if_block1) if_block1.m(div, null);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(div, null);
+			}
+
 			current = true;
 		},
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block0) {
-				if_block0.p(ctx, dirty);
-			} else {
-				if_block0.d(1);
-				if_block0 = current_block_type(ctx);
+			if (dirty & /*objectFit, Image_Play, mediaDataList*/ 96) {
+				each_value = /*mediaDataList*/ ctx[6];
+				let i;
 
-				if (if_block0) {
-					if_block0.c();
-					if_block0.m(div, t);
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context$3(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+					} else {
+						each_blocks[i] = create_each_block$3(child_ctx);
+						each_blocks[i].c();
+						each_blocks[i].m(div, null);
+					}
 				}
-			}
 
-			if (/*mediaData*/ ctx[0].type === 'Video') {
-				if (if_block1) {
-					if_block1.p(ctx, dirty);
-				} else {
-					if_block1 = create_if_block_1$6();
-					if_block1.c();
-					if_block1.m(div, null);
+				for (; i < each_blocks.length; i += 1) {
+					each_blocks[i].d(1);
 				}
-			} else if (if_block1) {
-				if_block1.d(1);
-				if_block1 = null;
+
+				each_blocks.length = each_value.length;
 			}
 
-			if (dirty & /*unfolded*/ 16) {
-				internal.toggle_class(div, "unfolded", /*unfolded*/ ctx[4]);
+			if (!current || dirty & /*unfolded*/ 8) {
+				internal.toggle_class(div, "unfolded", /*unfolded*/ ctx[3]);
 			}
 		},
 		i(local) {
@@ -1968,12 +1992,14 @@ function create_if_block$9(ctx) {
 				internal.add_render_callback(() => {
 					if (div_outro) div_outro.end(1);
 
-					div_intro = internal.create_in_transition(div, transition.fly, {
-						y: 4,
-						duration: /*duration*/ ctx[3],
-						delay: /*inDelay*/ ctx[1],
-						easing: easing.linear
-					});
+					div_intro = internal.create_in_transition(div, transition.fly, /*animation*/ ctx[4]
+					? {
+							y: 4,
+							duration: /*duration*/ ctx[2],
+							delay: /*inDelay*/ ctx[0],
+							easing: easing.linear
+						}
+					: undefined);
 
 					div_intro.start();
 				});
@@ -1985,27 +2011,28 @@ function create_if_block$9(ctx) {
 			if (div_intro) div_intro.invalidate();
 
 			if (local) {
-				div_outro = internal.create_out_transition(div, transition.fly, {
-					y: 4,
-					duration: /*duration*/ ctx[3],
-					delay: /*outDelay*/ ctx[2],
-					easing: easing.linear
-				});
+				div_outro = internal.create_out_transition(div, transition.fly, /*animation*/ ctx[4]
+				? {
+						y: 4,
+						duration: /*duration*/ ctx[2],
+						delay: /*outDelay*/ ctx[1],
+						easing: easing.linear
+					}
+				: undefined);
 			}
 
 			current = false;
 		},
 		d(detaching) {
 			if (detaching) internal.detach(div);
-			if_block0.d();
-			if (if_block1) if_block1.d();
+			internal.destroy_each(each_blocks, detaching);
 			if (detaching && div_outro) div_outro.end();
 		}
 	};
 }
 
-// (21:4) {:else}
-function create_else_block$1(ctx) {
+// (29:65) 
+function create_if_block_4$2(ctx) {
 	let video;
 	let video_src_value;
 	let video_poster_value;
@@ -2013,26 +2040,26 @@ function create_else_block$1(ctx) {
 	return {
 		c() {
 			video = internal.element("video");
-			internal.attr(video, "class", "media-content svelte-ts8zx4");
-			if (!internal.src_url_equal(video.src, video_src_value = /*mediaData*/ ctx[0].url)) internal.attr(video, "src", video_src_value);
-			internal.attr(video, "poster", video_poster_value = /*mediaData*/ ctx[0].videoCoverUrl);
+			internal.attr(video, "class", "media-content svelte-129jnm");
+			if (!internal.src_url_equal(video.src, video_src_value = /*media*/ ctx[9].url)) internal.attr(video, "src", video_src_value);
+			internal.attr(video, "poster", video_poster_value = /*media*/ ctx[9].videoCoverUrl);
 			video.playsInline = true;
 			internal.attr(video, "paused", "");
 			video.loop = false;
 			internal.attr(video, "preload", "auto");
 			internal.attr(video, "crossorigin", "");
 			video.controls = false;
-			video.muted = false;
+			video.muted = true;
 		},
 		m(target, anchor) {
 			internal.insert(target, video, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*mediaData*/ 1 && !internal.src_url_equal(video.src, video_src_value = /*mediaData*/ ctx[0].url)) {
+			if (dirty & /*mediaDataList*/ 64 && !internal.src_url_equal(video.src, video_src_value = /*media*/ ctx[9].url)) {
 				internal.attr(video, "src", video_src_value);
 			}
 
-			if (dirty & /*mediaData*/ 1 && video_poster_value !== (video_poster_value = /*mediaData*/ ctx[0].videoCoverUrl)) {
+			if (dirty & /*mediaDataList*/ 64 && video_poster_value !== (video_poster_value = /*media*/ ctx[9].videoCoverUrl)) {
 				internal.attr(video, "poster", video_poster_value);
 			}
 		},
@@ -2042,7 +2069,38 @@ function create_else_block$1(ctx) {
 	};
 }
 
-// (19:4) {#if imageUrl}
+// (27:64) 
+function create_if_block_3$2(ctx) {
+	let img;
+	let img_src_value;
+	let img_alt_value;
+
+	return {
+		c() {
+			img = internal.element("img");
+			internal.attr(img, "class", "media-content svelte-129jnm");
+			if (!internal.src_url_equal(img.src, img_src_value = /*media*/ ctx[9].videoCoverUrl)) internal.attr(img, "src", img_src_value);
+			internal.attr(img, "alt", img_alt_value = /*media*/ ctx[9].name);
+		},
+		m(target, anchor) {
+			internal.insert(target, img, anchor);
+		},
+		p(ctx, dirty) {
+			if (dirty & /*mediaDataList*/ 64 && !internal.src_url_equal(img.src, img_src_value = /*media*/ ctx[9].videoCoverUrl)) {
+				internal.attr(img, "src", img_src_value);
+			}
+
+			if (dirty & /*mediaDataList*/ 64 && img_alt_value !== (img_alt_value = /*media*/ ctx[9].name)) {
+				internal.attr(img, "alt", img_alt_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) internal.detach(img);
+		}
+	};
+}
+
+// (25:8) {#if media.type === 'Image'}
 function create_if_block_2$3(ctx) {
 	let img;
 	let img_src_value;
@@ -2051,19 +2109,19 @@ function create_if_block_2$3(ctx) {
 	return {
 		c() {
 			img = internal.element("img");
-			internal.attr(img, "class", "media-content svelte-ts8zx4");
-			if (!internal.src_url_equal(img.src, img_src_value = /*imageUrl*/ ctx[5])) internal.attr(img, "src", img_src_value);
-			internal.attr(img, "alt", img_alt_value = /*mediaData*/ ctx[0].name);
+			internal.attr(img, "class", "media-content carousel-indicator-item svelte-129jnm");
+			if (!internal.src_url_equal(img.src, img_src_value = /*media*/ ctx[9].url)) internal.attr(img, "src", img_src_value);
+			internal.attr(img, "alt", img_alt_value = /*media*/ ctx[9].name);
 		},
 		m(target, anchor) {
 			internal.insert(target, img, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*imageUrl*/ 32 && !internal.src_url_equal(img.src, img_src_value = /*imageUrl*/ ctx[5])) {
+			if (dirty & /*mediaDataList*/ 64 && !internal.src_url_equal(img.src, img_src_value = /*media*/ ctx[9].url)) {
 				internal.attr(img, "src", img_src_value);
 			}
 
-			if (dirty & /*mediaData*/ 1 && img_alt_value !== (img_alt_value = /*mediaData*/ ctx[0].name)) {
+			if (dirty & /*mediaDataList*/ 64 && img_alt_value !== (img_alt_value = /*media*/ ctx[9].name)) {
 				internal.attr(img, "alt", img_alt_value);
 			}
 		},
@@ -2073,14 +2131,14 @@ function create_if_block_2$3(ctx) {
 	};
 }
 
-// (35:4) {#if mediaData.type === 'Video'}
+// (33:8) {#if media.type === 'Video'}
 function create_if_block_1$6(ctx) {
 	let div;
 
 	return {
 		c() {
 			div = internal.element("div");
-			internal.attr(div, "class", "video-icon svelte-ts8zx4");
+			internal.attr(div, "class", "video-icon svelte-129jnm");
 			internal.set_style(div, "background-image", "url(" + Image_Play + ")");
 		},
 		m(target, anchor) {
@@ -2093,39 +2151,115 @@ function create_if_block_1$6(ctx) {
 	};
 }
 
-function create_fragment$c(ctx) {
-	let if_block_anchor;
-	let if_block = /*unfolded*/ ctx[4] && create_if_block$9(ctx);
+// (23:4) {#each mediaDataList as media}
+function create_each_block$3(ctx) {
+	let div;
+	let t0;
+	let t1;
+	let div_style_value;
+
+	function select_block_type(ctx, dirty) {
+		if (/*media*/ ctx[9].type === 'Image') return create_if_block_2$3;
+		if (/*media*/ ctx[9].type === 'Video' && /*media*/ ctx[9].videoCoverUrl) return create_if_block_3$2;
+		if (/*media*/ ctx[9].type === 'Video' && !/*media*/ ctx[9].videoCoverUrl) return create_if_block_4$2;
+	}
+
+	let current_block_type = select_block_type(ctx);
+	let if_block0 = current_block_type && current_block_type(ctx);
+	let if_block1 = /*media*/ ctx[9].type === 'Video' && create_if_block_1$6();
 
 	return {
 		c() {
-			if (if_block) if_block.c();
-			if_block_anchor = internal.empty();
+			div = internal.element("div");
+			if (if_block0) if_block0.c();
+			t0 = internal.space();
+			if (if_block1) if_block1.c();
+			t1 = internal.space();
+			internal.attr(div, "class", "carousel-item svelte-129jnm");
+			internal.attr(div, "style", div_style_value = `object-fit: ${/*objectFit*/ ctx[5]};`);
 		},
 		m(target, anchor) {
-			if (if_block) if_block.m(target, anchor);
-			internal.insert(target, if_block_anchor, anchor);
+			internal.insert(target, div, anchor);
+			if (if_block0) if_block0.m(div, null);
+			internal.append(div, t0);
+			if (if_block1) if_block1.m(div, null);
+			internal.append(div, t1);
 		},
-		p(ctx, [dirty]) {
-			if (/*unfolded*/ ctx[4]) {
-				if (if_block) {
-					if_block.p(ctx, dirty);
+		p(ctx, dirty) {
+			if (current_block_type === (current_block_type = select_block_type(ctx)) && if_block0) {
+				if_block0.p(ctx, dirty);
+			} else {
+				if (if_block0) if_block0.d(1);
+				if_block0 = current_block_type && current_block_type(ctx);
 
-					if (dirty & /*unfolded*/ 16) {
-						internal.transition_in(if_block, 1);
-					}
-				} else {
-					if_block = create_if_block$9(ctx);
-					if_block.c();
-					internal.transition_in(if_block, 1);
-					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				if (if_block0) {
+					if_block0.c();
+					if_block0.m(div, t0);
 				}
-			} else if (if_block) {
-				internal.group_outros();
+			}
 
-				internal.transition_out(if_block, 1, 1, () => {
-					if_block = null;
-				});
+			if (/*media*/ ctx[9].type === 'Video') {
+				if (if_block1) {
+					if_block1.p(ctx, dirty);
+				} else {
+					if_block1 = create_if_block_1$6();
+					if_block1.c();
+					if_block1.m(div, t1);
+				}
+			} else if (if_block1) {
+				if_block1.d(1);
+				if_block1 = null;
+			}
+
+			if (dirty & /*objectFit*/ 32 && div_style_value !== (div_style_value = `object-fit: ${/*objectFit*/ ctx[5]};`)) {
+				internal.attr(div, "style", div_style_value);
+			}
+		},
+		d(detaching) {
+			if (detaching) internal.detach(div);
+
+			if (if_block0) {
+				if_block0.d();
+			}
+
+			if (if_block1) if_block1.d();
+		}
+	};
+}
+
+function create_fragment$d(ctx) {
+	let if_block_anchor;
+	let if_block = /*unfolded*/ ctx[3] && create_if_block$a(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = internal.empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			internal.insert(target, if_block_anchor, anchor);
+		},
+		p(ctx, [dirty]) {
+			if (/*unfolded*/ ctx[3]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+
+					if (dirty & /*unfolded*/ 8) {
+						internal.transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block$a(ctx);
+					if_block.c();
+					internal.transition_in(if_block, 1);
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			} else if (if_block) {
+				internal.group_outros();
+
+				internal.transition_out(if_block, 1, 1, () => {
+					if_block = null;
+				});
 
 				internal.check_outros();
 			}
@@ -2143,31 +2277,45 @@ function create_fragment$c(ctx) {
 	};
 }
 
-function instance$c($$self, $$props, $$invalidate) {
-	let imageUrl;
+function instance$d($$self, $$props, $$invalidate) {
+	let mediaDataList;
 	let { mediaData } = $$props;
 	let { inDelay = 0 } = $$props;
 	let { outDelay = 0 } = $$props;
 	let { duration = 0 } = $$props;
 	let { unfolded = true } = $$props;
+	let { animation = true } = $$props;
+	let { objectFit = 'cover' } = $$props;
+	let { enableCarousel = true } = $$props;
 
 	$$self.$$set = $$props => {
-		if ('mediaData' in $$props) $$invalidate(0, mediaData = $$props.mediaData);
-		if ('inDelay' in $$props) $$invalidate(1, inDelay = $$props.inDelay);
-		if ('outDelay' in $$props) $$invalidate(2, outDelay = $$props.outDelay);
-		if ('duration' in $$props) $$invalidate(3, duration = $$props.duration);
-		if ('unfolded' in $$props) $$invalidate(4, unfolded = $$props.unfolded);
+		if ('mediaData' in $$props) $$invalidate(7, mediaData = $$props.mediaData);
+		if ('inDelay' in $$props) $$invalidate(0, inDelay = $$props.inDelay);
+		if ('outDelay' in $$props) $$invalidate(1, outDelay = $$props.outDelay);
+		if ('duration' in $$props) $$invalidate(2, duration = $$props.duration);
+		if ('unfolded' in $$props) $$invalidate(3, unfolded = $$props.unfolded);
+		if ('animation' in $$props) $$invalidate(4, animation = $$props.animation);
+		if ('objectFit' in $$props) $$invalidate(5, objectFit = $$props.objectFit);
+		if ('enableCarousel' in $$props) $$invalidate(8, enableCarousel = $$props.enableCarousel);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*mediaData*/ 1) {
-			$$invalidate(5, imageUrl = mediaData.type === 'Image'
-			? mediaData.url
-			: mediaData.videoCoverUrl);
+		if ($$self.$$.dirty & /*enableCarousel, mediaData*/ 384) {
+			$$invalidate(6, mediaDataList = (enableCarousel ? mediaData : [mediaData[0]]).filter(notNil));
 		}
 	};
 
-	return [mediaData, inDelay, outDelay, duration, unfolded, imageUrl];
+	return [
+		inDelay,
+		outDelay,
+		duration,
+		unfolded,
+		animation,
+		objectFit,
+		mediaDataList,
+		mediaData,
+		enableCarousel
+	];
 }
 
 class Media extends internal.SvelteComponent {
@@ -2177,36 +2325,39 @@ class Media extends internal.SvelteComponent {
 		internal.init(
 			this,
 			options,
-			instance$c,
-			create_fragment$c,
+			instance$d,
+			create_fragment$d,
 			internal.safe_not_equal,
 			{
-				mediaData: 0,
-				inDelay: 1,
-				outDelay: 2,
-				duration: 3,
-				unfolded: 4
+				mediaData: 7,
+				inDelay: 0,
+				outDelay: 1,
+				duration: 2,
+				unfolded: 3,
+				animation: 4,
+				objectFit: 5,
+				enableCarousel: 8
 			},
-			add_css$c
+			add_css$d
 		);
 	}
 }
 
-/* src/PanoTagPlugin/Components/Tag/ImageTextTag.svelte generated by Svelte v3.49.0 */
+/* src/PanoTagPlugin/Components/Tag/ImageTextTag.svelte generated by Svelte v3.50.1 */
 
-function add_css$b(target) {
+function add_css$c(target) {
 	internal.append_styles(target, "svelte-1p8f9wy", ".line.svelte-1p8f9wy{position:absolute;width:6.5625rem;height:1.3125rem;transform:translateY(-100%);z-index:10}.text.svelte-1p8f9wy{position:absolute;width:6.25rem;left:1rem;bottom:0.0625rem;z-index:10;font-weight:600}.media-wrapper.svelte-1p8f9wy{position:absolute;left:0.875rem;top:-5.3125rem;width:5.625rem;height:3.75rem;z-index:10;font-weight:600}");
 }
 
 function get_each_context$2(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[9] = list[i].id;
+	child_ctx[8] = list[i].id;
 	child_ctx[1] = list[i].content;
 	return child_ctx;
 }
 
 // (19:0) {#if tag.state}
-function create_if_block$8(ctx) {
+function create_if_block$9(ctx) {
 	let shadow;
 	let t0;
 	let div;
@@ -2238,7 +2389,7 @@ function create_if_block$8(ctx) {
 		});
 
 	let each_value = /*textItems*/ ctx[2];
-	const get_key = ctx => /*id*/ ctx[9];
+	const get_key = ctx => /*id*/ ctx[8];
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context$2(ctx, each_value, i);
@@ -2414,10 +2565,10 @@ function create_each_block$2(key_1, ctx) {
 // (29:2) {#if mediaData}
 function create_if_block_1$5(ctx) {
 	let div;
-	let mediacontainer;
+	let media;
 	let current;
 
-	mediacontainer = new Media({
+	media = new Media({
 			props: {
 				unfolded: /*unfolded*/ ctx[4],
 				mediaData: /*mediaData*/ ctx[3],
@@ -2429,40 +2580,40 @@ function create_if_block_1$5(ctx) {
 	return {
 		c() {
 			div = internal.element("div");
-			internal.create_component(mediacontainer.$$.fragment);
+			internal.create_component(media.$$.fragment);
 			internal.attr(div, "class", "media-wrapper svelte-1p8f9wy");
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
-			internal.mount_component(mediacontainer, div, null);
+			internal.mount_component(media, div, null);
 			current = true;
 		},
 		p(ctx, dirty) {
-			const mediacontainer_changes = {};
-			if (dirty & /*unfolded*/ 16) mediacontainer_changes.unfolded = /*unfolded*/ ctx[4];
-			if (dirty & /*mediaData*/ 8) mediacontainer_changes.mediaData = /*mediaData*/ ctx[3];
-			mediacontainer.$set(mediacontainer_changes);
+			const media_changes = {};
+			if (dirty & /*unfolded*/ 16) media_changes.unfolded = /*unfolded*/ ctx[4];
+			if (dirty & /*mediaData*/ 8) media_changes.mediaData = /*mediaData*/ ctx[3];
+			media.$set(media_changes);
 		},
 		i(local) {
 			if (current) return;
-			internal.transition_in(mediacontainer.$$.fragment, local);
+			internal.transition_in(media.$$.fragment, local);
 			current = true;
 		},
 		o(local) {
-			internal.transition_out(mediacontainer.$$.fragment, local);
+			internal.transition_out(media.$$.fragment, local);
 			current = false;
 		},
 		d(detaching) {
 			if (detaching) internal.detach(div);
-			internal.destroy_component(mediacontainer);
+			internal.destroy_component(media);
 		}
 	};
 }
 
-function create_fragment$b(ctx) {
+function create_fragment$c(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*tag*/ ctx[0].state && create_if_block$8(ctx);
+	let if_block = /*tag*/ ctx[0].state && create_if_block$9(ctx);
 
 	return {
 		c() {
@@ -2483,7 +2634,7 @@ function create_fragment$b(ctx) {
 						internal.transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$8(ctx);
+					if_block = create_if_block$9(ctx);
 					if_block.c();
 					internal.transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -2514,11 +2665,11 @@ function create_fragment$b(ctx) {
 	};
 }
 
-function instance$b($$self, $$props, $$invalidate) {
+function instance$c($$self, $$props, $$invalidate) {
 	let unfolded;
 	let content;
 	let mediaData;
-	var _a, _b, _c, _d;
+	var _a, _b, _c;
 	let { tag } = $$props;
 	let textItems;
 
@@ -2543,10 +2694,8 @@ function instance$b($$self, $$props, $$invalidate) {
 			: tag.data.text);
 		}
 
-		if ($$self.$$.dirty & /*tag, _d*/ 257) {
-			$$invalidate(3, mediaData = $$invalidate(8, _d = tag.data.mediaData) === null || _d === void 0
-			? void 0
-			: _d[0]);
+		if ($$self.$$.dirty & /*tag*/ 1) {
+			$$invalidate(3, mediaData = tag.data.mediaData);
 		}
 
 		if ($$self.$$.dirty & /*content*/ 2) {
@@ -2557,20 +2706,20 @@ function instance$b($$self, $$props, $$invalidate) {
 		}
 	};
 
-	return [tag, content, textItems, mediaData, unfolded, _a, _b, _c, _d];
+	return [tag, content, textItems, mediaData, unfolded, _a, _b, _c];
 }
 
 class ImageTextTag extends internal.SvelteComponent {
 	constructor(options) {
 		super();
-		internal.init(this, options, instance$b, create_fragment$b, internal.safe_not_equal, { tag: 0 }, add_css$b);
+		internal.init(this, options, instance$c, create_fragment$c, internal.safe_not_equal, { tag: 0 }, add_css$c);
 	}
 }
 
-/* src/PanoTagPlugin/Components/Tag/MarketingTag.svelte generated by Svelte v3.49.0 */
+/* src/PanoTagPlugin/Components/Tag/MarketingTag.svelte generated by Svelte v3.50.1 */
 
-function add_css$a(target) {
-	internal.append_styles(target, "svelte-1r29l6v", ".svelte-1r29l6v.svelte-1r29l6v{box-sizing:border-box}.marketing.svelte-1r29l6v.svelte-1r29l6v{transform:translateY(-100%)}.content.svelte-1r29l6v .headerImage.svelte-1r29l6v{position:absolute;width:100%;top:0.25rem;transform:translateY(-100%);border-top-left-radius:0.25rem;border-top-right-radius:0.25rem}.line.svelte-1r29l6v.svelte-1r29l6v{position:absolute;height:2.0625rem;width:0.0625rem;left:50%;transform:translateX(-50%);background-color:white;bottom:0;transform-origin:bottom;transition:all 500ms}.content.svelte-1r29l6v.svelte-1r29l6v{background-color:white;position:relative;display:flex;flex-direction:column;min-width:11.125rem;width:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content;border-radius:0.25rem;top:-1.875rem;left:-1rem;padding:0.5rem 0rem 0.5625rem;transition:all 500ms}.title.svelte-1r29l6v.svelte-1r29l6v{position:absolute;background-color:white;border-radius:0.25rem;width:100%;top:0.5rem;padding-left:0.75rem;padding-right:0.75rem}.title.svelte-1r29l6v .text.svelte-1r29l6v{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.75rem;font-weight:bold;line-height:1.125rem;color:#000}.footer.svelte-1r29l6v.svelte-1r29l6v{position:relative;padding-left:0.75rem;padding-right:0.75rem;width:100%;height:1.375rem;display:flex;align-items:center}.footer.svelte-1r29l6v .goto-button.svelte-1r29l6v{flex-shrink:0;white-space:nowrap;background-image:linear-gradient(to right, rgba(87, 144, 253, 1) 0, rgba(42, 114, 254, 1) 100%);color:#fff;font-size:0.625rem;border-radius:0.875rem;font-weight:bold;padding-left:0.5rem;padding-right:0.5rem;height:1.25rem;margin-left:auto;display:flex;align-items:center}.footer.svelte-1r29l6v .goto-icon.svelte-1r29l6v::after{content:'';display:inline-block;width:0.75rem;height:0.75rem;background-image:url('//vrlab-static.ljcdn.com/release/web/goto-icon.509418f6.png');background-size:100% auto;background-repeat:no-repeat}.price.svelte-1r29l6v.svelte-1r29l6v{flex-shrink:0;margin-right:0.75rem;white-space:nowrap;color:#ff6600;display:flex;align-items:baseline}.price.svelte-1r29l6v .value.svelte-1r29l6v{position:relative;top:0.0625rem;font-size:1.125rem;line-height:1.375rem;font-family:TG-TYPE, PingFangSC, Segoe UI, Rototo, sans-serif;letter-spacing:0rem}.price.svelte-1r29l6v .unit.svelte-1r29l6v{padding-left:0.125rem;font-size:0.625rem}.tag.svelte-1r29l6v.svelte-1r29l6v{position:relative;background-color:white;display:flex;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding-left:0.75rem;padding-right:0.75rem}.tag.svelte-1r29l6v .base-tag.svelte-1r29l6v{height:1rem;margin-top:1.375rem;margin-bottom:0.5rem;margin-right:0.25rem;font-size:0.625rem;line-height:0.875rem;padding:0.0625rem 0.25rem;border-radius:0.125rem;overflow:hidden}.tag.svelte-1r29l6v .primary-tag.svelte-1r29l6v{background:#e5eefe;color:#0055ff}.tag.svelte-1r29l6v .secondary-tag.svelte-1r29l6v{background:rgba(255, 102, 0, 0.08);color:rgba(255, 102, 0, 1)}.unfolded.svelte-1r29l6v .line.svelte-1r29l6v{transform:translateX(-50%) scale(1, 1)}.folded.svelte-1r29l6v .line.svelte-1r29l6v{transform:translateX(-50%) scale(1, 0);transition-timing-function:ease-in}.unfolded.svelte-1r29l6v .content.svelte-1r29l6v{opacity:1}.folded.svelte-1r29l6v .content.svelte-1r29l6v{opacity:0;transform:translateY(0.425rem);transition-timing-function:ease-in}");
+function add_css$b(target) {
+	internal.append_styles(target, "svelte-1dqrka8", ".svelte-1dqrka8.svelte-1dqrka8{box-sizing:border-box}.marketing.svelte-1dqrka8.svelte-1dqrka8{transform:translateY(-100%)}.content.svelte-1dqrka8 .headerImage.svelte-1dqrka8{position:absolute;width:100%;top:0.25rem;transform:translateY(-100%);border-top-left-radius:0.25rem;border-top-right-radius:0.25rem}.line.svelte-1dqrka8.svelte-1dqrka8{position:absolute;height:2.0625rem;width:0.0625rem;left:50%;transform:translateX(-50%);background-color:white;bottom:0;transform-origin:bottom;transition:all 500ms}.content.svelte-1dqrka8.svelte-1dqrka8{background-color:white;position:relative;display:flex;flex-direction:column;min-width:11.125rem;width:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content;border-radius:0.25rem;top:-1.875rem;left:-1rem;padding:0.5rem 0rem 0.5625rem;transition:all 500ms}.title.svelte-1dqrka8.svelte-1dqrka8{position:absolute;background-color:white;border-radius:0.25rem;width:100%;top:0.5rem;padding-left:0.75rem;padding-right:0.75rem}.title.svelte-1dqrka8 .text.svelte-1dqrka8{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:0.75rem;font-weight:bold;line-height:1.125rem;color:#000}.footer.svelte-1dqrka8.svelte-1dqrka8{position:relative;padding-left:0.75rem;padding-right:0.75rem;width:100%;height:1.375rem;display:flex;align-items:center}.footer.svelte-1dqrka8 .goto-button.svelte-1dqrka8{flex-shrink:0;white-space:nowrap;background-image:linear-gradient(to right, rgba(87, 144, 253, 1) 0, rgba(42, 114, 254, 1) 100%);color:#fff;font-size:0.625rem;border-radius:0.875rem;font-weight:bold;padding-left:0.5rem;padding-right:0.5rem;height:1.25rem;margin-left:auto;display:flex;align-items:center}.footer.svelte-1dqrka8 .goto-icon.svelte-1dqrka8::after{content:'';display:inline-block;width:0.75rem;height:0.75rem;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAAeFBMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////GqOSsAAAAJ3RSTlMAFNO2pYt4bErz8uP6ysawgVtBPDcR5C4s2L6ZmJBzZGJXUyEeDws/0G2zAAAAkklEQVQ4y+3TRw6DMBAF0OAeJ3QCpCe0uf8NwRILLBYfiS1/aT3JoymnI+sERZ5VCH0iVto3QDfBLmeSSMUTogRV9bBEpJAKaYpGijn13aTSLeraeG9D0NZFZv4/rRL5FDHnITlllqjv6tykWsmX4JHr05y7j6oFKq2P8He48B0tAM0EY0EDxquClw6vLz6EI35GmwwSZpe+WOgAAAAASUVORK5CYII=);background-size:100% auto;background-repeat:no-repeat}.price.svelte-1dqrka8.svelte-1dqrka8{flex-shrink:0;margin-right:0.75rem;white-space:nowrap;color:#ff6600;display:flex;align-items:baseline}.price.svelte-1dqrka8 .value.svelte-1dqrka8{position:relative;top:0.0625rem;font-size:1.125rem;line-height:1.375rem;font-family:TG-TYPE, PingFangSC, Segoe UI, Rototo, sans-serif;letter-spacing:0rem}.price.svelte-1dqrka8 .unit.svelte-1dqrka8{padding-left:0.125rem;font-size:0.625rem}.tag.svelte-1dqrka8.svelte-1dqrka8{position:relative;background-color:white;display:flex;width:-webkit-max-content;width:-moz-max-content;width:max-content;padding-left:0.75rem;padding-right:0.75rem;min-height:1.75rem}.tag.svelte-1dqrka8 .base-tag.svelte-1dqrka8{height:1rem;margin-top:1.375rem;margin-bottom:0.5rem;margin-right:0.25rem;font-size:0.625rem;line-height:0.875rem;padding:0.0625rem 0.25rem;border-radius:0.125rem;overflow:hidden}.tag.svelte-1dqrka8 .primary-tag.svelte-1dqrka8{background:#e5eefe;color:#0055ff}.tag.svelte-1dqrka8 .secondary-tag.svelte-1dqrka8{background:rgba(255, 102, 0, 0.08);color:rgba(255, 102, 0, 1)}.unfolded.svelte-1dqrka8 .line.svelte-1dqrka8{transform:translateX(-50%) scale(1, 1)}.folded.svelte-1dqrka8 .line.svelte-1dqrka8{transform:translateX(-50%) scale(1, 0);transition-timing-function:ease-in}.unfolded.svelte-1dqrka8 .content.svelte-1dqrka8{opacity:1}.folded.svelte-1dqrka8 .content.svelte-1dqrka8{opacity:0;transform:translateY(0.425rem);transition-timing-function:ease-in}");
 }
 
 function get_each_context$1(ctx, list, i) {
@@ -2585,7 +2734,7 @@ function get_each_context_1(ctx, list, i) {
 	return child_ctx;
 }
 
-// (29:8) {#if tag}
+// (28:8) {#if tag}
 function create_if_block_4$1(ctx) {
 	let div;
 	let t_value = /*tag*/ ctx[0] + "";
@@ -2595,7 +2744,7 @@ function create_if_block_4$1(ctx) {
 		c() {
 			div = internal.element("div");
 			t = internal.text(t_value);
-			internal.attr(div, "class", "base-tag primary-tag svelte-1r29l6v");
+			internal.attr(div, "class", "base-tag primary-tag svelte-1dqrka8");
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
@@ -2610,7 +2759,7 @@ function create_if_block_4$1(ctx) {
 	};
 }
 
-// (28:6) {#each data.brandTags || [] as tag}
+// (27:6) {#each data.brandTags || [] as tag}
 function create_each_block_1(ctx) {
 	let if_block_anchor;
 	let if_block = /*tag*/ ctx[0] && create_if_block_4$1(ctx);
@@ -2645,7 +2794,7 @@ function create_each_block_1(ctx) {
 	};
 }
 
-// (34:8) {#if tag}
+// (33:8) {#if tag}
 function create_if_block_3$1(ctx) {
 	let div;
 	let t_value = /*tag*/ ctx[0] + "";
@@ -2655,7 +2804,7 @@ function create_if_block_3$1(ctx) {
 		c() {
 			div = internal.element("div");
 			t = internal.text(t_value);
-			internal.attr(div, "class", "base-tag secondary-tag svelte-1r29l6v");
+			internal.attr(div, "class", "base-tag secondary-tag svelte-1dqrka8");
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
@@ -2670,7 +2819,7 @@ function create_if_block_3$1(ctx) {
 	};
 }
 
-// (33:6) {#each data.tags || [] as tag}
+// (32:6) {#each data.tags || [] as tag}
 function create_each_block$1(ctx) {
 	let if_block_anchor;
 	let if_block = /*tag*/ ctx[0] && create_if_block_3$1(ctx);
@@ -2705,7 +2854,7 @@ function create_each_block$1(ctx) {
 	};
 }
 
-// (46:6) {#if data.price?.value !== undefined && data.price?.value !== null}
+// (45:6) {#if data.price?.value !== undefined && data.price?.value !== null}
 function create_if_block_1$4(ctx) {
 	let div;
 	let span;
@@ -2721,8 +2870,8 @@ function create_if_block_1$4(ctx) {
 			t0 = internal.text(t0_value);
 			t1 = internal.space();
 			if (if_block) if_block.c();
-			internal.attr(span, "class", "value svelte-1r29l6v");
-			internal.attr(div, "class", "price svelte-1r29l6v");
+			internal.attr(span, "class", "value svelte-1dqrka8");
+			internal.attr(div, "class", "price svelte-1dqrka8");
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
@@ -2754,7 +2903,7 @@ function create_if_block_1$4(ctx) {
 	};
 }
 
-// (51:10) {#if data.price.unit}
+// (50:10) {#if data.price.unit}
 function create_if_block_2$2(ctx) {
 	let span;
 	let t_value = /*data*/ ctx[2].price.unit + "";
@@ -2764,7 +2913,7 @@ function create_if_block_2$2(ctx) {
 		c() {
 			span = internal.element("span");
 			t = internal.text(t_value);
-			internal.attr(span, "class", "unit svelte-1r29l6v");
+			internal.attr(span, "class", "unit svelte-1dqrka8");
 		},
 		m(target, anchor) {
 			internal.insert(target, span, anchor);
@@ -2779,8 +2928,8 @@ function create_if_block_2$2(ctx) {
 	};
 }
 
-// (58:6) {#if data.highlightText}
-function create_if_block$7(ctx) {
+// (57:6) {#if data.highlightText}
+function create_if_block$8(ctx) {
 	let div;
 	let t_value = /*data*/ ctx[2].highlightText + "";
 	let t;
@@ -2789,7 +2938,7 @@ function create_if_block$7(ctx) {
 		c() {
 			div = internal.element("div");
 			t = internal.text(t_value);
-			internal.attr(div, "class", "goto-button goto-icon svelte-1r29l6v");
+			internal.attr(div, "class", "goto-button goto-icon svelte-1dqrka8");
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
@@ -2804,7 +2953,7 @@ function create_if_block$7(ctx) {
 	};
 }
 
-function create_fragment$a(ctx) {
+function create_fragment$b(ctx) {
 	let div6;
 	let shadow;
 	let t0;
@@ -2852,7 +3001,7 @@ function create_fragment$a(ctx) {
 	}
 
 	let if_block0 = /*data*/ ctx[2].price?.value !== undefined && /*data*/ ctx[2].price?.value !== null && create_if_block_1$4(ctx);
-	let if_block1 = /*data*/ ctx[2].highlightText && create_if_block$7(ctx);
+	let if_block1 = /*data*/ ctx[2].highlightText && create_if_block$8(ctx);
 
 	return {
 		c() {
@@ -2885,7 +3034,7 @@ function create_fragment$a(ctx) {
 			if (if_block0) if_block0.c();
 			t7 = internal.space();
 			if (if_block1) if_block1.c();
-			internal.attr(div0, "class", "line svelte-1r29l6v");
+			internal.attr(div0, "class", "line svelte-1dqrka8");
 
 			internal.set_style(
 				div0,
@@ -2896,13 +3045,13 @@ function create_fragment$a(ctx) {
 				false
 			);
 
-			internal.attr(img, "class", "headerImage svelte-1r29l6v");
+			internal.attr(img, "class", "headerImage svelte-1dqrka8");
 			if (!internal.src_url_equal(img.src, img_src_value = /*data*/ ctx[2].headerPictureUrl)) internal.attr(img, "src", img_src_value);
 			internal.attr(img, "alt", "");
-			internal.attr(div1, "class", "tag svelte-1r29l6v");
-			internal.attr(div2, "class", "text svelte-1r29l6v");
-			internal.attr(div3, "class", "title svelte-1r29l6v");
-			internal.attr(div4, "class", "footer svelte-1r29l6v");
+			internal.attr(div1, "class", "tag svelte-1dqrka8");
+			internal.attr(div2, "class", "text svelte-1dqrka8");
+			internal.attr(div3, "class", "title svelte-1dqrka8");
+			internal.attr(div4, "class", "footer svelte-1dqrka8");
 
 			internal.set_style(
 				div4,
@@ -2913,7 +3062,7 @@ function create_fragment$a(ctx) {
 				false
 			);
 
-			internal.attr(div5, "class", "content svelte-1r29l6v");
+			internal.attr(div5, "class", "content svelte-1dqrka8");
 
 			internal.set_style(
 				div5,
@@ -2924,7 +3073,7 @@ function create_fragment$a(ctx) {
 				false
 			);
 
-			internal.attr(div6, "class", "marketing svelte-1r29l6v");
+			internal.attr(div6, "class", "marketing svelte-1dqrka8");
 			internal.toggle_class(div6, "unfolded", /*unfolded*/ ctx[1]);
 			internal.toggle_class(div6, "folded", /*folded*/ ctx[3]);
 		},
@@ -3045,7 +3194,7 @@ function create_fragment$a(ctx) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
-					if_block1 = create_if_block$7(ctx);
+					if_block1 = create_if_block$8(ctx);
 					if_block1.c();
 					if_block1.m(div4, null);
 				}
@@ -3076,11 +3225,11 @@ function create_fragment$a(ctx) {
 				);
 			}
 
-			if (dirty & /*unfolded*/ 2) {
+			if (!current || dirty & /*unfolded*/ 2) {
 				internal.toggle_class(div6, "unfolded", /*unfolded*/ ctx[1]);
 			}
 
-			if (dirty & /*folded*/ 8) {
+			if (!current || dirty & /*folded*/ 8) {
 				internal.toggle_class(div6, "folded", /*folded*/ ctx[3]);
 			}
 		},
@@ -3115,7 +3264,7 @@ const tagContentShowWhenLineStartGrow = 180;
 // 标签出现时长
 const tagContentShow = 500;
 
-function instance$a($$self, $$props, $$invalidate) {
+function instance$b($$self, $$props, $$invalidate) {
 	let unfolded;
 	let folded;
 	let data;
@@ -3150,18 +3299,18 @@ function instance$a($$self, $$props, $$invalidate) {
 class MarketingTag extends internal.SvelteComponent {
 	constructor(options) {
 		super();
-		internal.init(this, options, instance$a, create_fragment$a, internal.safe_not_equal, { tag: 0 }, add_css$a);
+		internal.init(this, options, instance$b, create_fragment$b, internal.safe_not_equal, { tag: 0 }, add_css$b);
 	}
 }
 
-/* src/PanoTagPlugin/Components/Common/Audio.svelte generated by Svelte v3.49.0 */
+/* src/PanoTagPlugin/Components/Common/Audio.svelte generated by Svelte v3.50.1 */
 
-function add_css$9(target) {
+function add_css$a(target) {
 	internal.append_styles(target, "svelte-tlcvd7", ".audio.svelte-tlcvd7.svelte-tlcvd7{position:relative;width:100%;height:100%;cursor:pointer}@-webkit-keyframes svelte-tlcvd7-playing{25%{background-image:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='9' r='8' transform='translate(-1 -1)' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E\")}50%{background-image:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM5.533 6.685L4.169 8.049l1.414 1.413a2.078 2.078 0 0 0-.05-2.777z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E\")}75%{background-image:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm-.656 4.874l-.906.905A3.35 3.35 0 0 1 7.369 8.1c0 .875-.333 1.67-.88 2.268l.906.906A4.628 4.628 0 0 0 8.65 8.101a4.627 4.627 0 0 0-1.306-3.227zm-1.811 1.81L4.169 8.05l1.414 1.413a2.078 2.078 0 0 0-.05-2.777z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E\")}}@keyframes svelte-tlcvd7-playing{25%{background-image:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='9' r='8' transform='translate(-1 -1)' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E\")}50%{background-image:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM5.533 6.685L4.169 8.049l1.414 1.413a2.078 2.078 0 0 0-.05-2.777z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E\")}75%{background-image:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm-.656 4.874l-.906.905A3.35 3.35 0 0 1 7.369 8.1c0 .875-.333 1.67-.88 2.268l.906.906A4.628 4.628 0 0 0 8.65 8.101a4.627 4.627 0 0 0-1.306-3.227zm-1.811 1.81L4.169 8.05l1.414 1.413a2.078 2.078 0 0 0-.05-2.777z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E\")}}.paused.svelte-tlcvd7 .audio-icon.svelte-tlcvd7{-webkit-animation:none;animation:none}.audio-icon.svelte-tlcvd7.svelte-tlcvd7{width:100%;height:100%;border-radius:50%;background-size:100%;-webkit-animation:svelte-tlcvd7-playing 2s steps(1) infinite;animation:svelte-tlcvd7-playing 2s steps(1) infinite;background-image:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zm1.428 2.79l-.953.952a6.222 6.222 0 0 1 1.775 4.36c0 1.571-.58 3.006-1.538 4.103l-.184.202.793.794a7.344 7.344 0 0 0 2.21-5.26A7.341 7.341 0 0 0 9.428 2.79zM7.344 4.873l-.906.905A3.35 3.35 0 0 1 7.369 8.1c0 .802-.28 1.537-.748 2.115l-.132.153.906.906A4.628 4.628 0 0 0 8.65 8.101a4.627 4.627 0 0 0-1.306-3.227zm-1.811 1.81L4.169 8.05l1.414 1.413a2.078 2.078 0 0 0-.05-2.777z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E\")}");
 }
 
 // (34:0) {#if unfolded}
-function create_if_block$6(ctx) {
+function create_if_block$7(ctx) {
 	let div1;
 	let shadow;
 	let t0;
@@ -3180,8 +3329,7 @@ function create_if_block$6(ctx) {
 			props: {
 				center: true,
 				blurRadius: 15,
-				spreadRadius: 6,
-				zIndex: -1
+				spreadRadius: 6
 			}
 		});
 
@@ -3231,7 +3379,7 @@ function create_if_block$6(ctx) {
 				audio_1[audio_1_is_paused ? "pause" : "play"]();
 			}
 
-			if (dirty & /*paused*/ 64) {
+			if (!current || dirty & /*paused*/ 64) {
 				internal.toggle_class(div1, "paused", /*paused*/ ctx[6]);
 			}
 		},
@@ -3280,10 +3428,10 @@ function create_if_block$6(ctx) {
 	};
 }
 
-function create_fragment$9(ctx) {
+function create_fragment$a(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*unfolded*/ ctx[4] && create_if_block$6(ctx);
+	let if_block = /*unfolded*/ ctx[4] && create_if_block$7(ctx);
 
 	return {
 		c() {
@@ -3304,7 +3452,7 @@ function create_fragment$9(ctx) {
 						internal.transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$6(ctx);
+					if_block = create_if_block$7(ctx);
 					if_block.c();
 					internal.transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -3335,7 +3483,7 @@ function create_fragment$9(ctx) {
 	};
 }
 
-function instance$9($$self, $$props, $$invalidate) {
+function instance$a($$self, $$props, $$invalidate) {
 	let { inDelay = 0 } = $$props;
 	let { outDelay = 0 } = $$props;
 	let { duration = 0 } = $$props;
@@ -3450,8 +3598,8 @@ class Audio extends internal.SvelteComponent {
 		internal.init(
 			this,
 			options,
-			instance$9,
-			create_fragment$9,
+			instance$a,
+			create_fragment$a,
 			internal.safe_not_equal,
 			{
 				inDelay: 0,
@@ -3462,19 +3610,19 @@ class Audio extends internal.SvelteComponent {
 				mediaStore: 8,
 				hooksInfo: 9
 			},
-			add_css$9
+			add_css$a
 		);
 	}
 }
 
-/* src/PanoTagPlugin/Components/Tag/AudioTag.svelte generated by Svelte v3.49.0 */
+/* src/PanoTagPlugin/Components/Tag/AudioTag.svelte generated by Svelte v3.50.1 */
 
-function add_css$8(target) {
+function add_css$9(target) {
 	internal.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}");
 }
 
 // (28:0) {#if tag.state}
-function create_if_block$5(ctx) {
+function create_if_block$6(ctx) {
 	let div5;
 	let shadow;
 	let t0;
@@ -3605,7 +3753,7 @@ function create_if_block$5(ctx) {
 			if (dirty & /*textItems*/ 16) multilinetext_changes.textItems = /*textItems*/ ctx[4];
 			multilinetext.$set(multilinetext_changes);
 
-			if (dirty & /*unfolded*/ 64) {
+			if (!current || dirty & /*unfolded*/ 64) {
 				internal.toggle_class(div5, "unfolded", /*unfolded*/ ctx[6]);
 			}
 		},
@@ -3637,10 +3785,10 @@ function create_if_block$5(ctx) {
 	};
 }
 
-function create_fragment$8(ctx) {
+function create_fragment$9(ctx) {
 	let if_block_anchor;
 	let current;
-	let if_block = /*tag*/ ctx[1].state && create_if_block$5(ctx);
+	let if_block = /*tag*/ ctx[1].state && create_if_block$6(ctx);
 
 	return {
 		c() {
@@ -3661,7 +3809,7 @@ function create_fragment$8(ctx) {
 						internal.transition_in(if_block, 1);
 					}
 				} else {
-					if_block = create_if_block$5(ctx);
+					if_block = create_if_block$6(ctx);
 					if_block.c();
 					internal.transition_in(if_block, 1);
 					if_block.m(if_block_anchor.parentNode, if_block_anchor);
@@ -3692,7 +3840,7 @@ function create_fragment$8(ctx) {
 	};
 }
 
-function instance$8($$self, $$props, $$invalidate) {
+function instance$9($$self, $$props, $$invalidate) {
 	let unfolded;
 	let text;
 	let foldTextDelay;
@@ -3759,14 +3907,165 @@ function instance$8($$self, $$props, $$invalidate) {
 class AudioTag extends internal.SvelteComponent {
 	constructor(options) {
 		super();
-		internal.init(this, options, instance$8, create_fragment$8, internal.safe_not_equal, { mediaStore: 0, tag: 1 }, add_css$8);
+		internal.init(this, options, instance$9, create_fragment$9, internal.safe_not_equal, { mediaStore: 0, tag: 1 }, add_css$9);
+	}
+}
+
+/* src/PanoTagPlugin/Components/Tag/MediaPlane.svelte generated by Svelte v3.50.1 */
+
+function add_css$8(target) {
+	internal.append_styles(target, "svelte-10cw0el", ".media-wrapper.svelte-10cw0el{position:absolute;width:100%;height:100%}");
+}
+
+// (18:0) {#if tag.state && mediaData}
+function create_if_block$5(ctx) {
+	let div;
+	let media;
+	let current;
+
+	media = new Media({
+			props: {
+				unfolded: /*unfolded*/ ctx[3],
+				mediaData: /*mediaData*/ ctx[2],
+				objectFit: /*objectFit*/ ctx[1],
+				enableCarousel: true,
+				inDelay: 500,
+				duration: 500
+			}
+		});
+
+	return {
+		c() {
+			div = internal.element("div");
+			internal.create_component(media.$$.fragment);
+			internal.attr(div, "class", "media-wrapper svelte-10cw0el");
+		},
+		m(target, anchor) {
+			internal.insert(target, div, anchor);
+			internal.mount_component(media, div, null);
+			current = true;
+		},
+		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];
+			media.$set(media_changes);
+		},
+		i(local) {
+			if (current) return;
+			internal.transition_in(media.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			internal.transition_out(media.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) internal.detach(div);
+			internal.destroy_component(media);
+		}
+	};
+}
+
+function create_fragment$8(ctx) {
+	let if_block_anchor;
+	let current;
+	let if_block = /*tag*/ ctx[0].state && /*mediaData*/ ctx[2] && create_if_block$5(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = internal.empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			internal.insert(target, if_block_anchor, anchor);
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			if (/*tag*/ ctx[0].state && /*mediaData*/ ctx[2]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+
+					if (dirty & /*tag, mediaData*/ 5) {
+						internal.transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block$5(ctx);
+					if_block.c();
+					internal.transition_in(if_block, 1);
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			} else if (if_block) {
+				internal.group_outros();
+
+				internal.transition_out(if_block, 1, 1, () => {
+					if_block = null;
+				});
+
+				internal.check_outros();
+			}
+		},
+		i(local) {
+			if (current) return;
+			internal.transition_in(if_block);
+			current = true;
+		},
+		o(local) {
+			internal.transition_out(if_block);
+			current = false;
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) internal.detach(if_block_anchor);
+		}
+	};
+}
+
+function instance$8($$self, $$props, $$invalidate) {
+	let unfolded;
+	let mediaData;
+	let objectFit;
+	var _a;
+	let { tag } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('tag' in $$props) $$invalidate(0, tag = $$props.tag);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*tag*/ 1) {
+			$$invalidate(3, unfolded = tag.state ? tag.state.unfolded : false);
+		}
+
+		if ($$self.$$.dirty & /*tag*/ 1) {
+			$$invalidate(2, mediaData = tag.data.mediaData);
+		}
+
+		if ($$self.$$.dirty & /*tag, _a*/ 17) {
+			$$invalidate(1, objectFit = $$invalidate(4, _a = tag.data.objectFit) !== null && _a !== void 0
+			? _a
+			: (() => {
+					if (tag.data.adaptationMode === 'stretch') return 'cover'; else if (tag.data.adaptationMode === 'proportional') return 'contain'; else return undefined;
+				})());
+		}
+	};
+
+	return [tag, objectFit, mediaData, unfolded, _a];
+}
+
+class MediaPlane extends internal.SvelteComponent {
+	constructor(options) {
+		super();
+		internal.init(this, options, instance$8, create_fragment$8, internal.safe_not_equal, { tag: 0 }, add_css$8);
 	}
 }
 
-/* src/PanoTagPlugin/Components/Tag/LinkTag.svelte generated by Svelte v3.49.0 */
+/* src/PanoTagPlugin/Components/Tag/LinkTag.svelte generated by Svelte v3.50.1 */
 
 function add_css$7(target) {
-	internal.append_styles(target, "svelte-1i709q9", ".wrapper.svelte-1i709q9{font-weight:600;cursor:pointer;width:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:auto}.text-wrapper.svelte-1i709q9{position:relative;display:flex;align-items:center;justify-content:center}.icon.svelte-1i709q9{position:relative;margin-bottom:0.6875rem}.arrow0.svelte-1i709q9,.arrow1.svelte-1i709q9,.arrow2.svelte-1i709q9{position:absolute;width:1.625rem;height:0.75rem;background-image:url(//vrlab-static.ljcdn.com/release/web/arrow.33fbbf45.png);background-repeat:no-repeat;background-size:contain;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-duration:1.2s;animation-duration:1.2s}.arrow1.svelte-1i709q9{position:relative}.arrow0.svelte-1i709q9{top:-0.75rem;-webkit-animation-name:svelte-1i709q9-up0;animation-name:svelte-1i709q9-up0}.arrow1.svelte-1i709q9{-webkit-animation-name:svelte-1i709q9-up1;animation-name:svelte-1i709q9-up1}.arrow2.svelte-1i709q9{top:0.75rem;-webkit-animation-name:svelte-1i709q9-up2;animation-name:svelte-1i709q9-up2}.text.svelte-1i709q9{font-size:0.875rem;color:#ffffff;letter-spacing:0;text-align:center;line-height:1.125rem;text-shadow:0.125rem 0rem 0.5rem rgba(0, 0, 0, 0.15)}@-webkit-keyframes svelte-1i709q9-up0{0%{opacity:0.8;transform:translateY(0) scale(0.84)}33.33%,100%{opacity:0;transform:translateY(-0.75rem) scale(0.84)}}@keyframes svelte-1i709q9-up0{0%{opacity:0.8;transform:translateY(0) scale(0.84)}33.33%,100%{opacity:0;transform:translateY(-0.75rem) scale(0.84)}}@-webkit-keyframes svelte-1i709q9-up1{0%{opacity:1;transform:translateY(0rem) scale(1)}33.33%,100%{opacity:0.8;transform:translateY(-0.75rem) scale(0.84)}}@keyframes svelte-1i709q9-up1{0%{opacity:1;transform:translateY(0rem) scale(1)}33.33%,100%{opacity:0.8;transform:translateY(-0.75rem) scale(0.84)}}@-webkit-keyframes svelte-1i709q9-up2{0%{opacity:0}33.33%,100%{opacity:1;transform:translateY(-0.75rem)}}@keyframes svelte-1i709q9-up2{0%{opacity:0}33.33%,100%{opacity:1;transform:translateY(-0.75rem)}}.link.svelte-1i709q9{position:relative;width:1.75rem;height:0.75rem;background-image:url(//vrlab-static.ljcdn.com/release/web/arrow-icon.b89ee4d8.png);background-repeat:no-repeat;background-size:contain;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-name:svelte-1i709q9-left-right;animation-name:svelte-1i709q9-left-right}@-webkit-keyframes svelte-1i709q9-left-right{0%,100%{opacity:0.8;transform:translateX(-0.3125rem)}50%{opacity:1;transform:translateX(0)}}@keyframes svelte-1i709q9-left-right{0%,100%{opacity:0.8;transform:translateX(-0.3125rem)}50%{opacity:1;transform:translateX(0)}}");
+	internal.append_styles(target, "svelte-135cbxk", ".wrapper.svelte-135cbxk{font-weight:600;cursor:pointer;width:-webkit-max-content;width:-moz-max-content;width:max-content;height:-webkit-max-content;height:-moz-max-content;height:max-content;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:auto}.text-wrapper.svelte-135cbxk{position:relative;display:flex;align-items:center;justify-content:center}.icon.svelte-135cbxk{position:relative;margin-bottom:0.6875rem}.arrow0.svelte-135cbxk,.arrow1.svelte-135cbxk,.arrow2.svelte-135cbxk{position:absolute;width:1.625rem;height:0.75rem;background-image:url(data:image/png;base64,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);background-repeat:no-repeat;background-size:contain;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-duration:1.2s;animation-duration:1.2s}.arrow1.svelte-135cbxk{position:relative}.arrow0.svelte-135cbxk{top:-0.75rem;-webkit-animation-name:svelte-135cbxk-up0;animation-name:svelte-135cbxk-up0}.arrow1.svelte-135cbxk{-webkit-animation-name:svelte-135cbxk-up1;animation-name:svelte-135cbxk-up1}.arrow2.svelte-135cbxk{top:0.75rem;-webkit-animation-name:svelte-135cbxk-up2;animation-name:svelte-135cbxk-up2}.text.svelte-135cbxk{position:absolute;top:0;font-size:0.875rem;color:#ffffff;letter-spacing:0;text-align:center;max-width:8.75rem;width:-webkit-max-content;width:-moz-max-content;width:max-content;word-break:break-all;line-height:1.125rem;text-shadow:0.125rem 0rem 0.5rem rgba(0, 0, 0, 0.15)}@-webkit-keyframes svelte-135cbxk-up0{0%{opacity:0.8;transform:translateY(0) scale(0.84)}33.33%,100%{opacity:0;transform:translateY(-0.75rem) scale(0.84)}}@keyframes svelte-135cbxk-up0{0%{opacity:0.8;transform:translateY(0) scale(0.84)}33.33%,100%{opacity:0;transform:translateY(-0.75rem) scale(0.84)}}@-webkit-keyframes svelte-135cbxk-up1{0%{opacity:1;transform:translateY(0rem) scale(1)}33.33%,100%{opacity:0.8;transform:translateY(-0.75rem) scale(0.84)}}@keyframes svelte-135cbxk-up1{0%{opacity:1;transform:translateY(0rem) scale(1)}33.33%,100%{opacity:0.8;transform:translateY(-0.75rem) scale(0.84)}}@-webkit-keyframes svelte-135cbxk-up2{0%{opacity:0}33.33%,100%{opacity:1;transform:translateY(-0.75rem)}}@keyframes svelte-135cbxk-up2{0%{opacity:0}33.33%,100%{opacity:1;transform:translateY(-0.75rem)}}.link.svelte-135cbxk{position:relative;width:1.75rem;height:0.75rem;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAAAkCAMAAAAgl+0yAAAAnFBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+TINBkAAAAM3RSTlMAjLy6ILM2Fi+Zng3BrPvao4VC9ceneQfKkmNdV1AbEeLOsHA77ujUtn5JLnRraSUUjVLj/+RVAAABhElEQVRIx63V2W6CQBiGYUBUQGDYdwTZQZZa7v/eimik/ket/7yZ4yeTTCYf8+dOX8etxGVoxAvCVbguR3g0uRTMA0w4odGi+CbzFnGKosCqrmHc5rdEwzCwqtGFJlC7DqtOcTxANY67BHnVKOpVoEZRjFPdLgxbqIZhhFTjINChGgThF06NhpGd35OGMcCppyDPfajm+YhUR8cRoeo4+RGlJnnbalBt2x6nHh1dt4Gq6bqDU886y2ZQZVn9jFJ51vcbqPo+Up18UeSgKoo3nHqVJEkGqi1JPk49aLZmQdW2xXf1zP+vUFHsC1QVReK33xdk+w9SaqAq+732UvvdZ2UEqrud8lR5Wc4a7pO8GaoL9VBjy7rMlMosq1lV43LhZlrtF+yuJlbtEXpqXXP3NYwI8VJqakOIziw5aepV1FQuTdfhvlWVZdJCrao6MPe0spRpqV5ZFivqNqYpq3RQ2TST5/h4quoRCmwqq6rymol6plV53IZSomTKE/MroWfxDevL/wAEdPq1eGDh4AAAAABJRU5ErkJggg==);background-repeat:no-repeat;background-size:contain;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-name:svelte-135cbxk-left-right;animation-name:svelte-135cbxk-left-right}@-webkit-keyframes svelte-135cbxk-left-right{0%,100%{opacity:0.8;transform:translateX(-0.3125rem)}50%{opacity:1;transform:translateX(0)}}@keyframes svelte-135cbxk-left-right{0%,100%{opacity:0.8;transform:translateX(-0.3125rem)}50%{opacity:1;transform:translateX(0)}}");
 }
 
 // (14:52) 
@@ -3794,7 +4093,7 @@ function create_if_block_1$3(ctx) {
 			internal.create_component(shadow.$$.fragment);
 			t = internal.space();
 			div = internal.element("div");
-			internal.attr(div, "class", "link svelte-1i709q9");
+			internal.attr(div, "class", "link svelte-135cbxk");
 		},
 		m(target, anchor) {
 			internal.mount_component(shadow, target, anchor);
@@ -3852,9 +4151,9 @@ function create_if_block$4(ctx) {
 			div1 = internal.element("div");
 			t2 = internal.space();
 			div2 = internal.element("div");
-			internal.attr(div0, "class", "arrow0 svelte-1i709q9");
-			internal.attr(div1, "class", "arrow1 svelte-1i709q9");
-			internal.attr(div2, "class", "arrow2 svelte-1i709q9");
+			internal.attr(div0, "class", "arrow0 svelte-135cbxk");
+			internal.attr(div1, "class", "arrow1 svelte-135cbxk");
+			internal.attr(div2, "class", "arrow2 svelte-135cbxk");
 		},
 		m(target, anchor) {
 			internal.mount_component(shadow, target, anchor);
@@ -3938,10 +4237,10 @@ function create_fragment$7(ctx) {
 			t1 = internal.space();
 			div1 = internal.element("div");
 			t2 = internal.text(t2_value);
-			internal.attr(div0, "class", "icon svelte-1i709q9");
-			internal.attr(div1, "class", "text svelte-1i709q9");
-			internal.attr(div2, "class", "text-wrapper svelte-1i709q9");
-			internal.attr(div3, "class", "wrapper svelte-1i709q9");
+			internal.attr(div0, "class", "icon svelte-135cbxk");
+			internal.attr(div1, "class", "text svelte-135cbxk");
+			internal.attr(div2, "class", "text-wrapper svelte-135cbxk");
+			internal.attr(div3, "class", "wrapper svelte-135cbxk");
 		},
 		m(target, anchor) {
 			internal.insert(target, div3, anchor);
@@ -4038,13 +4337,13 @@ class LinkTag extends internal.SvelteComponent {
 	}
 }
 
-/* src/PanoTagPlugin/Components/Tag/CustomTag.svelte generated by Svelte v3.49.0 */
+/* src/PanoTagPlugin/Components/Tag/CustomTag.svelte generated by Svelte v3.50.1 */
 
 function add_css$6(target) {
 	internal.append_styles(target, "svelte-kzl2aj", ".customElement__container.svelte-kzl2aj{position:relative}");
 }
 
-// (24:2) {#if tag.element === 'string'}
+// (24:2) {#if typeof tag.element === 'string'}
 function create_if_block$3(ctx) {
 	let html_tag;
 	let raw_value = /*tag*/ ctx[0].element + "";
@@ -4072,7 +4371,7 @@ function create_if_block$3(ctx) {
 
 function create_fragment$6(ctx) {
 	let div;
-	let if_block = /*tag*/ ctx[0].element === 'string' && create_if_block$3(ctx);
+	let if_block = typeof /*tag*/ ctx[0].element === 'string' && create_if_block$3(ctx);
 
 	return {
 		c() {
@@ -4086,7 +4385,7 @@ function create_fragment$6(ctx) {
 			/*div_binding*/ ctx[2](div);
 		},
 		p(ctx, [dirty]) {
-			if (/*tag*/ ctx[0].element === 'string') {
+			if (typeof /*tag*/ ctx[0].element === 'string') {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
@@ -4157,13 +4456,50 @@ class CustomTag extends internal.SvelteComponent {
 	}
 }
 
-/* src/PanoTagPlugin/Components/Tag/index.svelte generated by Svelte v3.49.0 */
+/* src/PanoTagPlugin/Components/Tag/index.svelte generated by Svelte v3.50.1 */
 
 function add_css$5(target) {
-	internal.append_styles(target, "svelte-1yzonf7", "@font-face{font-family:'TG-TYPE';font-style:normal;font-weight:400;src:local('TG-TYPE-Bold'), url(//vrlab-static.ljcdn.com/release/web/TG-TYPE-Bold.769fe64d.otf) format('woff2')}.content__container.svelte-1yzonf7{position:relative;left:50%;top:50%;width:0;height:0;transform:translate(-50%, -50%);font-family:PingFangSC, Segoe UI, Rototo, sans-serif}*{-webkit-tap-highlight-color:transparent}.content__wrapper.svelte-1yzonf7{pointer-events:none}.withAnimation.svelte-1yzonf7{transition:opacity 0.3s linear}.content__container.hide.svelte-1yzonf7{opacity:0;pointer-events:none}.content__container.disable.svelte-1yzonf7{display:none}.content__container.hide.svelte-1yzonf7 *{pointer-events:none}.content.svelte-1yzonf7{position:relative;font-size:0.75rem;line-height:1.125rem;color:#fff}.content.svelte-1yzonf7:not(.unfolded){pointer-events:none}.content.svelte-1yzonf7:not(.unfolded) *{pointer-events:none !important}.content.unfolded.svelte-1yzonf7{pointer-events:auto}");
+	internal.append_styles(target, "svelte-6jfp1v", "@font-face{font-family:'TG-TYPE';font-style:normal;font-weight:400;src:local('TG-TYPE-Bold'),\n      url(data:application/font-woff2;charset=utf-8;base64,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)\n        format('woff2')}.content__container.svelte-6jfp1v{position:relative;left:50%;top:50%;transform:translate(-50%, -50%);font-family:PingFangSC, Segoe UI, Rototo, sans-serif}.content__container.unClickable.svelte-6jfp1v{pointer-events:none !important}.content__container.unClickable.svelte-6jfp1v *{pointer-events:none !important}*{-webkit-tap-highlight-color:transparent}.content__wrapper.svelte-6jfp1v{pointer-events:none;width:100%;height:100%}.withAnimation.svelte-6jfp1v{transition:opacity 0.3s linear}.content__container.hide.svelte-6jfp1v{opacity:0;pointer-events:none}.content__container.disable.svelte-6jfp1v{display:none}.content__container.hide.svelte-6jfp1v *{pointer-events:none}.content.svelte-6jfp1v{position:relative;width:100%;height:100%;font-size:0.75rem;line-height:1.125rem;color:#fff}.content.svelte-6jfp1v:not(.unfolded){pointer-events:none}.content.svelte-6jfp1v:not(.unfolded) *{pointer-events:none !important}.content.unfolded.svelte-6jfp1v{pointer-events:auto}");
+}
+
+// (68:59) 
+function create_if_block_6(ctx) {
+	let mediaplane;
+	let current;
+
+	mediaplane = new MediaPlane({
+			props: { tag: noTypecheck(/*tag*/ ctx[1]) }
+		});
+
+	return {
+		c() {
+			internal.create_component(mediaplane.$$.fragment);
+		},
+		m(target, anchor) {
+			internal.mount_component(mediaplane, target, anchor);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const mediaplane_changes = {};
+			if (dirty & /*tag*/ 2) mediaplane_changes.tag = noTypecheck(/*tag*/ ctx[1]);
+			mediaplane.$set(mediaplane_changes);
+		},
+		i(local) {
+			if (current) return;
+			internal.transition_in(mediaplane.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			internal.transition_out(mediaplane.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			internal.destroy_component(mediaplane, detaching);
+		}
+	};
 }
 
-// (39:53) 
+// (66:53) 
 function create_if_block_5(ctx) {
 	let linktag;
 	let current;
@@ -4200,7 +4536,7 @@ function create_if_block_5(ctx) {
 	};
 }
 
-// (37:58) 
+// (64:58) 
 function create_if_block_4(ctx) {
 	let marketingtag;
 	let current;
@@ -4237,7 +4573,7 @@ function create_if_block_4(ctx) {
 	};
 }
 
-// (35:54) 
+// (62:54) 
 function create_if_block_3(ctx) {
 	let audiotag;
 	let current;
@@ -4278,7 +4614,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (33:58) 
+// (60:58) 
 function create_if_block_2$1(ctx) {
 	let imagetexttag;
 	let current;
@@ -4315,7 +4651,7 @@ function create_if_block_2$1(ctx) {
 	};
 }
 
-// (31:53) 
+// (58:53) 
 function create_if_block_1$2(ctx) {
 	let texttag;
 	let current;
@@ -4352,7 +4688,7 @@ function create_if_block_1$2(ctx) {
 	};
 }
 
-// (29:6) {#if tag.element}
+// (56:6) {#if tag.element}
 function create_if_block$2(ctx) {
 	let customtag;
 	let current;
@@ -4406,7 +4742,8 @@ function create_fragment$5(ctx) {
 		create_if_block_2$1,
 		create_if_block_3,
 		create_if_block_4,
-		create_if_block_5
+		create_if_block_5,
+		create_if_block_6
 	];
 
 	const if_blocks = [];
@@ -4418,6 +4755,7 @@ function create_fragment$5(ctx) {
 		if (/*tag*/ ctx[1].contentType === exports.ContentType.Audio) return 3;
 		if (/*tag*/ ctx[1].contentType === exports.ContentType.Marketing) return 4;
 		if (/*tag*/ ctx[1].contentType === exports.ContentType.Link) return 5;
+		if (/*tag*/ ctx[1].contentType === exports.ContentType.MediaPlane) return 6;
 		return -1;
 	}
 
@@ -4431,14 +4769,17 @@ function create_fragment$5(ctx) {
 			div1 = internal.element("div");
 			div0 = internal.element("div");
 			if (if_block) if_block.c();
-			internal.attr(div0, "class", "content svelte-1yzonf7");
+			internal.attr(div0, "class", "content svelte-6jfp1v");
 			internal.toggle_class(div0, "unfolded", /*tag*/ ctx[1].state?.unfolded);
-			internal.attr(div1, "class", "content__wrapper svelte-1yzonf7");
-			internal.attr(div2, "class", "content__container svelte-1yzonf7");
+			internal.attr(div1, "class", "content__wrapper svelte-6jfp1v");
+			internal.attr(div2, "class", "content__container svelte-6jfp1v");
 			internal.attr(div2, "data-id", div2_data_id_value = /*tag*/ ctx[1].id);
 			internal.toggle_class(div2, "disable", /*tag*/ ctx[1].enabled === false || /*tag*/ ctx[1].temporaryState?.visible === false);
 			internal.toggle_class(div2, "hide", !/*state*/ ctx[3].visible || !/*temporaryState*/ ctx[5].visible || !/*tag*/ ctx[1].state?.visible);
 			internal.toggle_class(div2, "withAnimation", /*withAnimation*/ ctx[0]);
+			internal.toggle_class(div2, "unClickable", /*tag*/ ctx[1].clickable === false);
+			internal.set_style(div2, "width", /*tag*/ ctx[1].pointType === 'PointTag' ? 0 : '100%', false);
+			internal.set_style(div2, "height", /*tag*/ ctx[1].pointType === 'PointTag' ? 0 : '100%', false);
 		},
 		m(target, anchor) {
 			internal.insert(target, div2, anchor);
@@ -4452,7 +4793,7 @@ function create_fragment$5(ctx) {
 			current = true;
 
 			if (!mounted) {
-				dispose = internal.listen(div2, "click", internal.stop_propagation(/*click_handler*/ ctx[6]));
+				dispose = internal.listen(div2, "click", internal.stop_propagation(/*click_handler*/ ctx[12]));
 				mounted = true;
 			}
 		},
@@ -4492,7 +4833,7 @@ function create_fragment$5(ctx) {
 				}
 			}
 
-			if (dirty & /*tag*/ 2) {
+			if (!current || dirty & /*tag*/ 2) {
 				internal.toggle_class(div0, "unfolded", /*tag*/ ctx[1].state?.unfolded);
 			}
 
@@ -4500,21 +4841,33 @@ function create_fragment$5(ctx) {
 				internal.attr(div2, "data-id", div2_data_id_value);
 			}
 
-			if (dirty & /*tag*/ 2) {
+			if (!current || dirty & /*tag*/ 2) {
 				internal.toggle_class(div2, "disable", /*tag*/ ctx[1].enabled === false || /*tag*/ ctx[1].temporaryState?.visible === false);
 			}
 
-			if (dirty & /*state, temporaryState, tag*/ 42) {
+			if (!current || dirty & /*state, temporaryState, tag*/ 42) {
 				internal.toggle_class(div2, "hide", !/*state*/ ctx[3].visible || !/*temporaryState*/ ctx[5].visible || !/*tag*/ ctx[1].state?.visible);
 			}
 
-			if (dirty & /*withAnimation*/ 1) {
+			if (!current || dirty & /*withAnimation*/ 1) {
 				internal.toggle_class(div2, "withAnimation", /*withAnimation*/ ctx[0]);
 			}
-		},
-		i(local) {
-			if (current) return;
-			internal.transition_in(if_block);
+
+			if (!current || dirty & /*tag*/ 2) {
+				internal.toggle_class(div2, "unClickable", /*tag*/ ctx[1].clickable === false);
+			}
+
+			if (dirty & /*tag*/ 2) {
+				internal.set_style(div2, "width", /*tag*/ ctx[1].pointType === 'PointTag' ? 0 : '100%', false);
+			}
+
+			if (dirty & /*tag*/ 2) {
+				internal.set_style(div2, "height", /*tag*/ ctx[1].pointType === 'PointTag' ? 0 : '100%', false);
+			}
+		},
+		i(local) {
+			if (current) return;
+			internal.transition_in(if_block);
 			current = true;
 		},
 		o(local) {
@@ -4535,6 +4888,9 @@ function create_fragment$5(ctx) {
 }
 
 function instance$5($$self, $$props, $$invalidate) {
+	let unfolded;
+	let visible;
+	var _a, _b;
 	let { withAnimation = false } = $$props;
 	let { tag } = $$props;
 	let { hooks } = $$props;
@@ -4542,6 +4898,8 @@ function instance$5($$self, $$props, $$invalidate) {
 	let { mediaStore } = $$props;
 	let { temporaryState } = $$props;
 	svelte.setContext('hooks', hooks);
+	let lastVisibleState;
+	let lastUnfoldedState;
 	const click_handler = event => hooks.emit('click', { event, target: 'TagContent', tag });
 
 	$$self.$$set = $$props => {
@@ -4553,7 +4911,51 @@ function instance$5($$self, $$props, $$invalidate) {
 		if ('temporaryState' in $$props) $$invalidate(5, temporaryState = $$props.temporaryState);
 	};
 
-	return [withAnimation, tag, hooks, state, mediaStore, temporaryState, click_handler];
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*tag, _a*/ 66) {
+			$$invalidate(11, unfolded = $$invalidate(6, _a = tag.state) === null || _a === void 0
+			? void 0
+			: _a.unfolded);
+		}
+
+		if ($$self.$$.dirty & /*tag, _b*/ 130) {
+			$$invalidate(10, visible = $$invalidate(7, _b = tag.state) === null || _b === void 0
+			? void 0
+			: _b.visible);
+		}
+
+		if ($$self.$$.dirty & /*tag, unfolded, lastUnfoldedState, visible, lastVisibleState*/ 3842) {
+			{
+				if (tag.hooks) {
+					if (unfolded !== undefined && unfolded !== lastUnfoldedState) {
+						$$invalidate(9, lastUnfoldedState = unfolded);
+						if (unfolded) tag.hooks.emit('unfolded'); else tag.hooks.emit('folded');
+					}
+
+					if (visible !== undefined && visible !== lastVisibleState) {
+						$$invalidate(8, lastVisibleState = visible);
+						if (visible) tag.hooks.emit('show'); else tag.hooks.emit('hide');
+					}
+				}
+			}
+		}
+	};
+
+	return [
+		withAnimation,
+		tag,
+		hooks,
+		state,
+		mediaStore,
+		temporaryState,
+		_a,
+		_b,
+		lastVisibleState,
+		lastUnfoldedState,
+		visible,
+		unfolded,
+		click_handler
+	];
 }
 
 class Tag extends internal.SvelteComponent {
@@ -4579,10 +4981,10 @@ class Tag extends internal.SvelteComponent {
 	}
 }
 
-/* src/PanoTagPlugin/Components/Common/Point/CustomPoint.svelte generated by Svelte v3.49.0 */
+/* src/PanoTagPlugin/Components/Common/Point/CustomPoint.svelte generated by Svelte v3.50.1 */
 
 function add_css$4(target) {
-	internal.append_styles(target, "svelte-13xneqo", ".point.svelte-13xneqo.svelte-13xneqo{width:1.5rem;height:1.5rem}.small-point.svelte-13xneqo.svelte-13xneqo,.big-point.svelte-13xneqo.svelte-13xneqo{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 500ms}.big-point.svelte-13xneqo.svelte-13xneqo{background-color:rgba(0, 0, 0, 0.1)}.folded.point.svelte-13xneqo.svelte-13xneqo{-webkit-animation:svelte-13xneqo-breathing 2s linear infinite;animation:svelte-13xneqo-breathing 2s linear infinite}.big-point.svelte-13xneqo.svelte-13xneqo::before,.big-point.svelte-13xneqo.svelte-13xneqo::after{content:'';display:block;position:absolute;background-size:contain;background-repeat:no-repeat;pointer-events:none}.big-point.svelte-13xneqo.svelte-13xneqo::before{width:100%;height:100%;background-image:url('//vrlab-static.ljcdn.com/release/web/carTagDotBorder.fa7c05cb.png')}.folded.svelte-13xneqo .big-point.svelte-13xneqo::before{-webkit-animation:svelte-13xneqo-rotate 2s linear infinite;animation:svelte-13xneqo-rotate 2s linear infinite}.big-point.svelte-13xneqo.svelte-13xneqo::after{position:absolute;width:1rem;height:1rem;background-image:var(--iconUrl)}.small-point.svelte-13xneqo.svelte-13xneqo::before{content:'';display:block;position:absolute;pointer-events:none;width:0.25rem;height:0.25rem;border-radius:100%;background-color:white}.folded.svelte-13xneqo .big-point.svelte-13xneqo{opacity:1;scale:1}.unfolded.svelte-13xneqo .big-point.svelte-13xneqo{opacity:0;scale:0}.folded.svelte-13xneqo .small-point.svelte-13xneqo{opacity:0;scale:6}.unfolded.svelte-13xneqo .small-point.svelte-13xneqo{opacity:1;scale:1}@-webkit-keyframes svelte-13xneqo-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes svelte-13xneqo-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@-webkit-keyframes svelte-13xneqo-breathing{0%{transform:scale(1)}25%{transform:scale(0.9)}50%{transform:scale(1)}}@keyframes svelte-13xneqo-breathing{0%{transform:scale(1)}25%{transform:scale(0.9)}50%{transform:scale(1)}}");
+	internal.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)}}");
 }
 
 function create_fragment$4(ctx) {
@@ -4610,12 +5012,12 @@ function create_fragment$4(ctx) {
 			div0 = internal.element("div");
 			t1 = internal.space();
 			div1 = internal.element("div");
-			internal.attr(div0, "class", "small-point svelte-13xneqo");
+			internal.attr(div0, "class", "small-point svelte-mhqidy");
 			internal.set_style(div0, "transition-delay", /*folded*/ ctx[3] ? /*foldDelay*/ ctx[2] + 'ms' : '0ms', false);
-			internal.attr(div1, "class", "big-point svelte-13xneqo");
+			internal.attr(div1, "class", "big-point svelte-mhqidy");
 			internal.set_style(div1, "--iconUrl", "url(" + /*iconUrl*/ ctx[1] + ")");
 			internal.set_style(div1, "transition-delay", /*folded*/ ctx[3] ? /*foldDelay*/ ctx[2] + 'ms' : '0ms', false);
-			internal.attr(div2, "class", "point svelte-13xneqo");
+			internal.attr(div2, "class", "point svelte-mhqidy");
 			internal.toggle_class(div2, "folded", /*folded*/ ctx[3]);
 			internal.toggle_class(div2, "unfolded", /*unfolded*/ ctx[0]);
 		},
@@ -4641,11 +5043,11 @@ function create_fragment$4(ctx) {
 				internal.set_style(div1, "transition-delay", /*folded*/ ctx[3] ? /*foldDelay*/ ctx[2] + 'ms' : '0ms', false);
 			}
 
-			if (dirty & /*folded*/ 8) {
+			if (!current || dirty & /*folded*/ 8) {
 				internal.toggle_class(div2, "folded", /*folded*/ ctx[3]);
 			}
 
-			if (dirty & /*unfolded*/ 1) {
+			if (!current || dirty & /*unfolded*/ 1) {
 				internal.toggle_class(div2, "unfolded", /*unfolded*/ ctx[0]);
 			}
 		},
@@ -4693,10 +5095,10 @@ class CustomPoint extends internal.SvelteComponent {
 	}
 }
 
-/* src/PanoTagPlugin/Components/Common/Point/DefaultPoint.svelte generated by Svelte v3.49.0 */
+/* src/PanoTagPlugin/Components/Common/Point/DefaultPoint.svelte generated by Svelte v3.50.1 */
 
 function add_css$3(target) {
-	internal.append_styles(target, "svelte-10tq2yy", ".point.svelte-10tq2yy.svelte-10tq2yy{width:1rem;height:1rem}.small-point.svelte-10tq2yy.svelte-10tq2yy,.big-point.svelte-10tq2yy.svelte-10tq2yy{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 500ms}.big-point.svelte-10tq2yy.svelte-10tq2yy::before,.big-point.svelte-10tq2yy.svelte-10tq2yy::after{content:'';display:block;position:absolute;background-size:contain;background-repeat:no-repeat;pointer-events:none}.big-point.svelte-10tq2yy.svelte-10tq2yy::before{width:100%;height:100%;background-image:url('//vrlab-static.ljcdn.com/release/web/carTagDotBorder.fa7c05cb.png');background-size:contain;background-repeat:no-repeat}.small-point.svelte-10tq2yy.svelte-10tq2yy::before{content:'';display:block;position:absolute;pointer-events:none;width:0.375rem;height:0.375rem;border-radius:100%;background-color:white}.unfolded.svelte-10tq2yy .big-point.svelte-10tq2yy{opacity:0;transform:scale(0)}.folded.svelte-10tq2yy .big-point.svelte-10tq2yy{opacity:1;transform:scale(1)}.unfolded.svelte-10tq2yy .small-point.svelte-10tq2yy{transform:scale(0.6)}.folded.svelte-10tq2yy .small-point.svelte-10tq2yy{transform:scale(1)}");
+	internal.append_styles(target, "svelte-1rg9uk", ".point.svelte-1rg9uk.svelte-1rg9uk{width:1rem;height:1rem}.small-point.svelte-1rg9uk.svelte-1rg9uk,.big-point.svelte-1rg9uk.svelte-1rg9uk{position:absolute;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all 500ms}.big-point.svelte-1rg9uk.svelte-1rg9uk::before,.big-point.svelte-1rg9uk.svelte-1rg9uk::after{content:'';display:block;position:absolute;background-size:contain;background-repeat:no-repeat;pointer-events:none}.big-point.svelte-1rg9uk.svelte-1rg9uk::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.svelte-1rg9uk.svelte-1rg9uk::before{content:'';display:block;position:absolute;pointer-events:none;width:0.375rem;height:0.375rem;border-radius:100%;background-color:white}.unfolded.svelte-1rg9uk .big-point.svelte-1rg9uk{opacity:0;transform:scale(0)}.folded.svelte-1rg9uk .big-point.svelte-1rg9uk{opacity:1;transform:scale(1)}.unfolded.svelte-1rg9uk .small-point.svelte-1rg9uk{transform:scale(0.6)}.folded.svelte-1rg9uk .small-point.svelte-1rg9uk{transform:scale(1)}");
 }
 
 function create_fragment$3(ctx) {
@@ -4724,11 +5126,11 @@ function create_fragment$3(ctx) {
 			div0 = internal.element("div");
 			t1 = internal.space();
 			div1 = internal.element("div");
-			internal.attr(div0, "class", "small-point svelte-10tq2yy");
+			internal.attr(div0, "class", "small-point svelte-1rg9uk");
 			internal.set_style(div0, "transition-delay", /*folded*/ ctx[2] ? /*foldDelay*/ ctx[1] + 'ms' : '0ms', false);
-			internal.attr(div1, "class", "big-point svelte-10tq2yy");
+			internal.attr(div1, "class", "big-point svelte-1rg9uk");
 			internal.set_style(div1, "transition-delay", /*folded*/ ctx[2] ? /*foldDelay*/ ctx[1] + 'ms' : '0ms', false);
-			internal.attr(div2, "class", "point svelte-10tq2yy");
+			internal.attr(div2, "class", "point svelte-1rg9uk");
 			internal.toggle_class(div2, "unfolded", /*unfolded*/ ctx[0]);
 			internal.toggle_class(div2, "folded", /*folded*/ ctx[2]);
 		},
@@ -4750,11 +5152,11 @@ function create_fragment$3(ctx) {
 				internal.set_style(div1, "transition-delay", /*folded*/ ctx[2] ? /*foldDelay*/ ctx[1] + 'ms' : '0ms', false);
 			}
 
-			if (dirty & /*unfolded*/ 1) {
+			if (!current || dirty & /*unfolded*/ 1) {
 				internal.toggle_class(div2, "unfolded", /*unfolded*/ ctx[0]);
 			}
 
-			if (dirty & /*folded*/ 4) {
+			if (!current || dirty & /*folded*/ 4) {
 				internal.toggle_class(div2, "folded", /*folded*/ ctx[2]);
 			}
 		},
@@ -4800,7 +5202,7 @@ class DefaultPoint extends internal.SvelteComponent {
 	}
 }
 
-/* src/PanoTagPlugin/Components/Common/Point/PointSwitch.svelte generated by Svelte v3.49.0 */
+/* src/PanoTagPlugin/Components/Common/Point/PointSwitch.svelte generated by Svelte v3.50.1 */
 
 function add_css$2(target) {
 	internal.append_styles(target, "svelte-r4i9gl", ".point-click-helper.svelte-r4i9gl{width:2.5rem;height:2.5rem;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}");
@@ -5111,7 +5513,7 @@ class PointSwitch extends internal.SvelteComponent {
 	}
 }
 
-/* src/PanoTagPlugin/Components/TagWrapper.svelte generated by Svelte v3.49.0 */
+/* src/PanoTagPlugin/Components/TagWrapper.svelte generated by Svelte v3.50.1 */
 
 function add_css$1(target) {
 	internal.append_styles(target, "svelte-1vzhbu2", ".wrapper.svelte-1vzhbu2{position:absolute;width:0rem;height:0rem;overflow:visible;pointer-events:auto}.point.svelte-1vzhbu2{-webkit-tap-highlight-color:transparent;position:absolute;transform:translate(-50%, -50%);left:50%;top:50%}");
@@ -5294,11 +5696,11 @@ function create_fragment$1(ctx) {
 				internal.attr(div, "data-id", div_data_id_value);
 			}
 
-			if (dirty & /*hide*/ 1024) {
+			if (!current || dirty & /*hide*/ 1024) {
 				internal.toggle_class(div, "hide", /*hide*/ ctx[10]);
 			}
 
-			if (dirty & /*unfolded*/ 64) {
+			if (!current || dirty & /*unfolded*/ 64) {
 				internal.toggle_class(div, "unfolded", /*unfolded*/ ctx[6]);
 			}
 
@@ -5467,10 +5869,10 @@ class TagWrapper extends internal.SvelteComponent {
 	}
 }
 
-/* src/PanoTagPlugin/Components/PointTag.svelte generated by Svelte v3.49.0 */
+/* src/PanoTagPlugin/Components/PointTag.svelte generated by Svelte v3.50.1 */
 
 function add_css(target) {
-	internal.append_styles(target, "svelte-1d5dpm8", ".tag2D__container.svelte-1d5dpm8{box-sizing:border-box;position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tag2D.hide.svelte-1d5dpm8{display:none}.withAnimation.svelte-1d5dpm8{transition:opacity 0.3s linear}.tag2D__container.hide.svelte-1d5dpm8{opacity:0;pointer-events:none}.tag2D__container.hide.svelte-1d5dpm8 *{pointer-events:none}");
+	internal.append_styles(target, "svelte-1eci49s", ".tag--container.svelte-1eci49s{box-sizing:border-box;position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:1;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tag.hide.svelte-1eci49s{display:none}.withAnimation.svelte-1eci49s{transition:opacity 0.3s linear}.tag--container.hide.svelte-1eci49s{opacity:0;pointer-events:none}.tag--container.hide.svelte-1eci49s *{pointer-events:none}");
 }
 
 function get_each_context(ctx, list, i) {
@@ -5512,7 +5914,7 @@ function create_each_block(key_1, ctx) {
 			div = internal.element("div");
 			internal.create_component(tagwrapper.$$.fragment);
 			t = internal.space();
-			internal.attr(div, "class", "tag2D svelte-1d5dpm8");
+			internal.attr(div, "class", "tag svelte-1eci49s");
 			internal.toggle_class(div, "hide", !/*tag*/ ctx[6].pointTagStyle?.leftPercent || !/*tag*/ ctx[6].pointTagStyle?.topPercent || /*tag*/ ctx[6].enabled === false || !/*tag*/ ctx[6].state || /*tag*/ ctx[6].temporaryState?.visible === false);
 			this.first = div;
 		},
@@ -5540,7 +5942,7 @@ function create_each_block(key_1, ctx) {
 
 			tagwrapper.$set(tagwrapper_changes);
 
-			if (dirty & /*tags*/ 2) {
+			if (!current || dirty & /*tags*/ 2) {
 				internal.toggle_class(div, "hide", !/*tag*/ ctx[6].pointTagStyle?.leftPercent || !/*tag*/ ctx[6].pointTagStyle?.topPercent || /*tag*/ ctx[6].enabled === false || !/*tag*/ ctx[6].state || /*tag*/ ctx[6].temporaryState?.visible === false);
 			}
 		},
@@ -5582,7 +5984,7 @@ function create_fragment(ctx) {
 				each_blocks[i].c();
 			}
 
-			internal.attr(div, "class", "tag2D__container svelte-1d5dpm8");
+			internal.attr(div, "class", "tag--container svelte-1eci49s");
 			internal.toggle_class(div, "hide", !/*state*/ ctx[3].visible || !/*temporaryState*/ ctx[5].visible);
 			internal.toggle_class(div, "withAnimation", /*withAnimation*/ ctx[0]);
 		},
@@ -5603,11 +6005,11 @@ function create_fragment(ctx) {
 				internal.check_outros();
 			}
 
-			if (dirty & /*state, temporaryState*/ 40) {
+			if (!current || dirty & /*state, temporaryState*/ 40) {
 				internal.toggle_class(div, "hide", !/*state*/ ctx[3].visible || !/*temporaryState*/ ctx[5].visible);
 			}
 
-			if (dirty & /*withAnimation*/ 1) {
+			if (!current || dirty & /*withAnimation*/ 1) {
 				internal.toggle_class(div, "withAnimation", /*withAnimation*/ ctx[0]);
 			}
 		},
@@ -5680,6 +6082,52 @@ class PointTag extends internal.SvelteComponent {
 	}
 }
 
+const DefaultConfig = {
+    globalConfig: {
+        initialState: {
+        // unfolded: false,
+        },
+        visibleConfig: {
+            visibleDistance: { max: 5 },
+            angleRange: { min: -45, max: 45 },
+        },
+        unfoldedConfig: {
+            autoUnfold: {
+                strategy: 'MinimumDistance',
+            },
+        },
+        tag3DConfig: {
+            ratio: 0.0035,
+            // devicePixelRatio: window.devicePixelRatio,
+        },
+    },
+    contentTypeConfig: {
+        'Any-Link-Any': {
+            unfoldedConfig: {
+                // VR 跳转标签没有展开/收起状态
+                disableFold: true,
+                autoUnfold: undefined,
+            },
+            initialState: {
+                unfolded: true,
+            },
+        },
+        'Any-Marketing-Any': {
+            unfoldedConfig: undefined,
+        },
+        '3D-MediaPlane-PlaneTag': {
+            unfoldedConfig: {
+                disableFold: true,
+            },
+            visibleConfig: {
+                angleRange: undefined,
+                visibleDistance: undefined,
+            },
+            clickable: false,
+        },
+    },
+};
+
 /**
  * plugin 的基本控制器
  */
@@ -5829,6 +6277,7 @@ 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 });
@@ -5868,19 +6317,18 @@ class TagComputer extends TagCacheController {
                         if (intersection && intersection.distance + distanceError < distance)
                             return false;
                     }
-                    // console.log(tag.id, '角度检测', tag)
+                    // console.log(tag.id, '角度检测', tag, config.angleRange)
                     // 角度检测
-                    if (tag.dimensionType === exports.DimensionType.Three) {
+                    if (config.angleRange && tag.dimensionType === exports.DimensionType.Three) {
                         const visible = checkRange(this.getAngle(tag), config.angleRange);
                         if (visible === false)
                             return false;
                     }
                     // 结束
-                    // console.log(tag.id, '结束', tag)
+                    // console.log(tag.id, '结束', tag, visible)
                     return true;
                 }
             })();
-            // console.log(tag.id, 'end', tag, visible)
             cache.visible = visible;
             return cache.visible;
         }
@@ -6045,7 +6493,7 @@ class TagComputer extends TagCacheController {
             return cache.angle;
         }
     }
-    // TODO:  缓存
+    // TODO: 缓存
     /**
      * @description: 获取merge后的配置
      */
@@ -6165,14 +6613,267 @@ class TagComputer extends TagCacheController {
     }
 }
 
-const VERSION$1 = 'v1.0.1';
-const PLUGIN_NAME$1 = `DnalogelPlugin-CSS3DRenderPlugin-${random()}@${VERSION$1}`;
-const pluginFlag$1 = (name) => `${PLUGIN_NAME$1}--${name}`;
+function createSymbol(description) {
+    // @ts-ignore
+    return typeof Symbol === 'undefined' ? `$Symbol<${description}>$` : Symbol(description);
+}
+const EVENT_SYMBOL = createSymbol('$$EVENT$$');
+function __generateEventIfNotExisted(instance) {
+    if (!instance[EVENT_SYMBOL]) {
+        instance[EVENT_SYMBOL] = {};
+    }
+    return instance[EVENT_SYMBOL];
+}
+function __removeEventIfNotExisted(instance) {
+    if (!instance[EVENT_SYMBOL]) {
+        delete instance[EVENT_SYMBOL];
+    }
+}
+/**
+ * 监听者模式
+ * @template T - 预设的监听回调类型
+ * @example
+ * ```
+ * new Subscribe<{
+ * "foo": [arg1: number, arg2: string],
+ * "bar": [arg: boolean],
+ * }>()
+ * ```
+ */
+class Subscribe {
+    /**
+     * 判断是否注册了事件
+     * @param name - 事件类型
+     */
+    hasListener(name) {
+        const events = __generateEventIfNotExisted(this);
+        return Boolean((events === null || events === void 0 ? void 0 : events[name]) && events[name].length > 0);
+    }
+    /**
+     * 注册事件
+     * @param name - 事件类型
+     * @param callback - 事件回调函数
+     * @param once - 是否只执行一次
+     * @returns 解除事件
+     * @template K - 预设的监听事件名称
+     * @template C - 回调函数函数上下文
+     */
+    on(name, callback, once) {
+        const events = __generateEventIfNotExisted(this);
+        if (!events[name])
+            events[name] = [];
+        events[name].push([callback, once || false]);
+        return () => this.off(name, callback);
+    }
+    /**
+     * 注册事件(是否只执行一次)
+     * @param name - 事件类型
+     * @param callback - 事件回调函数
+     * @returns 解除事件
+     * @template K - 预设的监听事件名称
+     * @template C - 回调函数函数上下文
+     */
+    once(name, callback) {
+        return this.on(name, callback, true);
+    }
+    /**
+     * 解除事件
+     *
+     * 如果 name 不传的话解除对应所有事件
+     * 如果 name, callback 不传的话解除所有name的所有事件
+     * @param name - 事件类型
+     * @param callback - 事件回调函数
+     * @template K - 预设的监听事件名称
+     */
+    off(name, callback) {
+        if (name === undefined) {
+            __removeEventIfNotExisted(this);
+            return;
+        }
+        const events = __generateEventIfNotExisted(this);
+        if (!events[name])
+            events[name] = [];
+        if (callback === undefined) {
+            events[name].length = 0;
+            return;
+        }
+        let index = 0;
+        for (; index < events[name].length; index++) {
+            if (events[name][index][0] === callback)
+                break;
+        }
+        if (index < events[name].length) {
+            events[name].splice(index, 1);
+        }
+    }
+    /**
+     * 触发事件
+     * @param name - 事件类型
+     * @param data - 触发事件的数据
+     * @returns canceled 是否被触发取消
+     * @template K - 预设的监听事件名称
+     */
+    emit(name, ...data) {
+        let canceled = false;
+        const events = __generateEventIfNotExisted(this);
+        const event = events[name] || [];
+        for (let one of event.slice()) {
+            const [callback, once = false] = one;
+            const result = callback(...data);
+            if (once)
+                this.off(name, callback);
+            if (result === false)
+                canceled = true;
+        }
+        return canceled;
+    }
+}
+
+const VERSION$3 = '1.0.0';
+const NAME = `CSS3DObjectPlus@${VERSION$3}`;
 const MinRatio = 0.00216;
-const globalState = {};
-class Controller extends Controller$1 {
-    constructor(five) {
-        super(five);
+const DefaultRatio = 0.003;
+class CSS3DObjectPlus extends CSS3DRenderer.CSS3DObject {
+    // eslint-disable-next-line max-params
+    constructor(container, cornerPoints, ratio = DefaultRatio, dpr = 1) {
+        const realRatio = Math.max(MinRatio, ratio);
+        const planeWidth = cornerPoints[0].distanceTo(cornerPoints[1]);
+        const planeHeight = cornerPoints[1].distanceTo(cornerPoints[2]);
+        const domWidthPx = evenNumber((planeWidth / ratio) * dpr);
+        const domHeightPx = evenNumber((planeHeight / ratio) * dpr);
+        const centerPosition = centerPoint(cornerPoints[0], cornerPoints[2]);
+        let css3DObjectElement;
+        if (realRatio === ratio) {
+            container.style.width = `${domWidthPx}px`;
+            container.style.height = `${domHeightPx}px`;
+            css3DObjectElement = container;
+        }
+        else {
+            // 兼容ratio小于0.00216的情况
+            const element = document.createElement('div');
+            element.style.width = `${domWidthPx}px`;
+            element.style.height = `${domHeightPx}px`;
+            element.style.pointerEvents = 'none';
+            const scale = ratio / realRatio;
+            container.style.position = 'absolute';
+            container.style.left = '0';
+            container.style.top = '0';
+            container.style.width = `${scale * domWidthPx}px`;
+            container.style.height = `${scale * domHeightPx}px`;
+            element.appendChild(container);
+            css3DObjectElement = element;
+        }
+        super(css3DObjectElement);
+        Object.defineProperty(this, "version", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: VERSION$3
+        });
+        Object.defineProperty(this, "width", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "height", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "domWidthPx", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "domHeightPx", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "cornerPoints", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "ratio", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "centerPosition", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.scale.set(realRatio, realRatio, realRatio);
+        // set public property
+        this.cornerPoints = cornerPoints;
+        this.ratio = ratio;
+        this.container = container;
+        if (realRatio === ratio) {
+            this.width = planeWidth;
+            this.height = planeHeight;
+            this.domWidthPx = domWidthPx;
+            this.domHeightPx = domHeightPx;
+            this.centerPosition = centerPosition;
+        }
+        else {
+            const scale = ratio / realRatio;
+            this.width = scale * planeWidth;
+            this.height = scale * planeHeight;
+            this.domWidthPx = scale * domWidthPx;
+            this.domHeightPx = scale * domHeightPx;
+            this.centerPosition = new THREE.Vector3()
+                .subVectors(centerPosition.clone(), cornerPoints[0].clone())
+                .multiplyScalar(scale)
+                .add(cornerPoints[0]);
+        }
+        // end
+        container.classList.add(`${NAME}__container`);
+        // 旋转前
+        const startVector01 = new THREE.Vector3(1, 0, 0); // dom初始01点向量
+        const startVector12 = new THREE.Vector3(0, 1, 0); // dom初始12点向量
+        // 旋转后
+        const endVector01 = new THREE.Vector3().subVectors(cornerPoints[1], cornerPoints[0]); // 点0 -> 点1 的向量
+        const endVector12 = new THREE.Vector3().subVectors(cornerPoints[2], cornerPoints[1]); // 点1 -> 点2 的向量
+        // 使Vector01重合
+        const vector01Quaternion = new THREE__namespace.Quaternion().setFromUnitVectors(startVector01.normalize(), endVector01.normalize());
+        this.applyQuaternion(vector01Quaternion);
+        startVector12.applyQuaternion(vector01Quaternion);
+        // 使Vector12重合
+        const vector12Quaternion = new THREE__namespace.Quaternion().setFromUnitVectors(startVector12.normalize(), endVector12.normalize());
+        this.applyQuaternion(vector12Quaternion);
+        // set position
+        this.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
+    }
+}
+
+const VERSION$2 = 'v2.0.0';
+const PLUGIN_NAME$2 = 'CSS3DRenderer';
+const PLUGIN = `${PLUGIN_NAME$2}@${VERSION$2}`;
+const pluginFlag$1 = (name) => `${PLUGIN}--${name}`;
+const globalStore = {};
+class CSS3DRender {
+    constructor() {
+        Object.defineProperty(this, "hooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subscribe()
+        });
         Object.defineProperty(this, "state", {
             enumerable: true,
             configurable: true,
@@ -6180,6 +6881,7 @@ class Controller extends Controller$1 {
             value: {
                 enabled: true,
                 visible: true,
+                disposed: false,
             }
         });
         Object.defineProperty(this, "store", {
@@ -6187,54 +6889,11 @@ class Controller extends Controller$1 {
             configurable: true,
             writable: true,
             value: {
-                disposed: false,
                 disposers: [],
                 frontModeCSS3DObjects: {},
                 behindModeCSS3DObjects: {},
             }
         });
-        Object.defineProperty(this, "setVisibleById", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (id, visible) => {
-                var _a;
-                const data = (_a = this.store.frontModeCSS3DObjects[id]) !== null && _a !== void 0 ? _a : this.store.behindModeCSS3DObjects[id];
-                if (!data)
-                    return;
-                data.css3DObject.visible = visible;
-                data.visible = visible;
-                if (data.mode === 'behind')
-                    data.opacityMesh.visible = visible;
-                this.five.needsRender = true;
-            }
-        });
-        Object.defineProperty(this, "setEnabledById", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: (id, enabled) => {
-                var _a, _b, _c;
-                const data = (_a = this.store.frontModeCSS3DObjects[id]) !== null && _a !== void 0 ? _a : this.store.behindModeCSS3DObjects[id];
-                if (!data)
-                    return;
-                const css3DScene = data.mode === 'front' ? (_b = globalState.frontModeStore) === null || _b === void 0 ? void 0 : _b.css3DScene : (_c = globalState.behindModeStore) === null || _c === void 0 ? void 0 : _c.css3DScene;
-                if (!css3DScene)
-                    return;
-                if (enabled) {
-                    css3DScene.add(data.css3DObject);
-                    if (data.mode === 'behind')
-                        this.five.scene.add(data.opacityMesh);
-                }
-                else {
-                    css3DScene.remove(data.css3DObject);
-                    if (data.mode === 'behind')
-                        this.five.scene.remove(data.opacityMesh);
-                }
-                data.enabled = enabled;
-                this.five.needsRender = true;
-            }
-        });
         /**
          * @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
          * @param { Vector3Position[] } points 矩形四个点坐标
@@ -6243,15 +6902,14 @@ class Controller extends Controller$1 {
          *  | key                   | type                       | defaultValue        | comment |
          *  | -                     | -                          | -                   | -       |
          *  | `ratio`               | *`number`*                 | `0.00216`           | 1px对应多少米，默认为 0.00216，即1px对应2.16mm |
-         *  | ~~`dpr`~~             | ~~*`number`*~~             | ~~`undefined`~~     | ~~**已改名**，请使用~~ `devicePixelRatio` |
          *  | `devicePixelRatio`    | *`number`*                 | `1`                 | 设备的物理像素分辨率与CSS像素分辨率的比值 |
          *  | `container`           | *`HTMLElement`*            | `undefined`         | 自定义 return 中的 `container`
          *  | `pointerEvents`       | *`'none'\|'auto'`*         | `'none'`            | container 的 css属性：`pointer-events` 的值 |
          *  | `autoRender`          | *`boolean`*                | `true`              | 是否自动渲染，通常为true |
          *  | `mode`                | *`'front'\|'behind'`*      | `front`             | 两种模式:|
-         *  |                                                                          | | | `front`  模式：DOM 处于 five Canvas 之上，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐 |
+         *  |                                                                          | | | `front`  模式：DOM 处于 five Canvas 上方，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐 |
          *  |                                                                          | | | `behind` 模式：DOM 处于 five Canvas 下方，可以模拟真实的遮挡效果，但是 DOM 必须是非透明的 |
-         *  | `behindFiveContainer` | *`HTMLElement`*            | `undefined`         | 如果 mode 为 `behind`，需要传入容器，并确保此容器位five下方，且中间无其他不透明的dom元素遮挡 |
+         *  | `scene`               | *`THREE.Scene`*            | `undefined`         | 如果 mode 为 `behind`，需要传入 |
          *
          * @return
          * ```typescript
@@ -6270,36 +6928,29 @@ class Controller extends Controller$1 {
          *    } | void
          * ```
          */
-        Object.defineProperty(this, "create3DDomContainer", {
+        Object.defineProperty(this, "create3DElement", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: (points, config) => {
-                if (this.store.disposed)
+            value: (camera, points, config) => {
+                if (this.state.disposed)
                     return this.disposedErrorLog();
                 // ==== init ====
                 const mergeConfig = (() => {
-                    var _a;
-                    if ((config === null || config === void 0 ? void 0 : config.dpr) !== undefined)
-                        console.warn(`${PLUGIN_NAME$1}: please use "config.devicePixelRatio" replace "config.dpr"`);
-                    const defaultconfig = {
+                    const defaultConfig = {
                         ratio: 0.00216,
-                        devicePixelRatio: (_a = config === null || config === void 0 ? void 0 : config.dpr) !== null && _a !== void 0 ? _a : 1,
+                        devicePixelRatio: 1,
                         mode: 'front',
                         autoRender: true,
                         container: document.createElement('div'),
                         pointerEvents: 'none',
                     };
-                    return Object.assign(defaultconfig, config);
+                    return Object.assign(defaultConfig, config);
                 })();
                 const vector3Points = points.map(anyPositionToVector3);
                 if ((vector3Points === null || vector3Points === void 0 ? void 0 : vector3Points.length) < 4)
-                    return console.error(`${PLUGIN_NAME$1}: requires 4 point but params may have fewer`);
-                const { five, store } = this;
+                    return console.error(`${PLUGIN}: requires 4 point but params may have fewer`);
                 const { ratio, devicePixelRatio: dpr, mode, autoRender, container, pointerEvents } = mergeConfig;
-                const fiveElement = five.getElement();
-                if (!fiveElement)
-                    return console.error(`${PLUGIN_NAME$1}: five.getElement() is ${fiveElement}`);
                 const disposers = [];
                 // ==== init END ====
                 // 获取css3DObject, 如果mode为behind的话，也一起获取mesh
@@ -6311,47 +6962,47 @@ class Controller extends Controller$1 {
                     pointerEvents,
                 });
                 container.id = `container--${css3DObject.uuid}`;
-                let resizeObserver;
-                const frontModeAndFrontModeUnInited = mode === 'front' && !globalState.frontModeStore;
-                const behindModeAndBehindModeUnInited = mode === 'behind' && !globalState.behindModeStore;
+                const frontModeAndFrontModeUnInited = mode === 'front' && !globalStore.frontModeStore;
+                const behindModeAndBehindModeUnInited = mode === 'behind' && !globalStore.behindModeStore;
                 if (behindModeAndBehindModeUnInited) {
-                    globalState.behindModeStore = { css3DScene: new THREE__namespace.Scene(), css3DRenderer: new CSS3DRenderer.CSS3DRenderer() };
+                    globalStore.behindModeStore = {
+                        scene: mergeConfig.scene,
+                        css3DScene: new THREE__namespace.Scene(),
+                        css3DRenderer: new CSS3DRenderer.CSS3DRenderer(),
+                    };
                 }
                 if (frontModeAndFrontModeUnInited) {
-                    globalState.frontModeStore = { css3DScene: new THREE__namespace.Scene(), css3DRenderer: new CSS3DRenderer.CSS3DRenderer() };
+                    globalStore.frontModeStore = { css3DScene: new THREE__namespace.Scene(), css3DRenderer: new CSS3DRenderer.CSS3DRenderer() };
                 }
-                const modeStore = mode === 'front' ? globalState.frontModeStore : globalState.behindModeStore;
+                const modeStore = mode === 'front' ? globalStore.frontModeStore : globalStore.behindModeStore;
                 const { css3DScene, css3DRenderer } = modeStore;
                 const render = (() => {
                     const renderCSS3DObject = () => {
-                        var _a;
-                        const addCSS3DObject = () => {
-                            css3DScene.add(css3DObject);
-                            if (mode === 'behind' && opacityMesh) {
-                                five.scene.add(opacityMesh);
-                                disposers.push(() => opacityMesh && five.scene.remove(opacityMesh));
-                            }
-                        };
                         if (mode === 'front') {
-                            store.frontModeCSS3DObjects[css3DObject.uuid] = { visible: true, enabled: true, css3DObject, mode: 'front' };
-                            addCSS3DObject();
+                            this.store.frontModeCSS3DObjects[css3DObject.uuid] = {
+                                visible: true,
+                                enabled: true,
+                                css3DObject,
+                                mode: 'front',
+                            };
                         }
                         else {
-                            store.behindModeCSS3DObjects[css3DObject.uuid] = {
+                            this.store.behindModeCSS3DObjects[css3DObject.uuid] = {
                                 visible: true,
                                 enabled: true,
                                 css3DObject,
                                 opacityMesh: opacityMesh,
                                 mode: 'behind',
+                                scene: mergeConfig.scene,
                             };
-                            if ((_a = five.model) === null || _a === void 0 ? void 0 : _a.loaded)
-                                addCSS3DObject();
-                            else
-                                five.once('modelLoaded', () => addCSS3DObject());
+                        }
+                        css3DScene.add(css3DObject);
+                        if (mode === 'behind' && opacityMesh) {
+                            mergeConfig.scene.add(opacityMesh);
+                            disposers.push(() => opacityMesh && mergeConfig.scene.remove(opacityMesh));
                         }
                     };
                     if (frontModeAndFrontModeUnInited || behindModeAndBehindModeUnInited) {
-                        resizeObserver = this.createResizeObserver(css3DRenderer.setSize);
                         css3DRenderer.domElement.style.position = 'absolute';
                         css3DRenderer.domElement.style.top = '0';
                         css3DRenderer.domElement.style.userSelect = 'none';
@@ -6360,24 +7011,21 @@ class Controller extends Controller$1 {
                         const renderEveryFrame = () => {
                             const requestAnimationFrameId = requestAnimationFrame(renderEveryFrame);
                             modeStore.requestAnimationFrameId = requestAnimationFrameId;
-                            css3DRenderer.render(css3DScene, five.camera);
+                            css3DRenderer.render(css3DScene, camera);
                         };
                         return () => {
-                            var _a;
                             renderCSS3DObject();
-                            (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
                             renderEveryFrame();
                         };
                     }
                     return () => renderCSS3DObject();
                 })();
-                if (frontModeAndFrontModeUnInited) {
-                    const wrapper = fiveElement.parentElement || document.body;
-                    wrapper.appendChild(css3DRenderer.domElement);
-                }
-                if (behindModeAndBehindModeUnInited) {
-                    const wrapper = config.behindFiveContainer || fiveElement.parentElement || document.body;
-                    wrapper.appendChild(css3DRenderer.domElement);
+                const wrapper = mode === 'front' ? globalStore.frontModeContainer : globalStore.behindModeContainer;
+                if (wrapper) {
+                    this.appendToElement(wrapper, mode);
+                    const store = mode === 'front' ? globalStore.frontModeStore : globalStore.behindModeStore;
+                    if (store)
+                        store.appendedToPage = true;
                 }
                 const setVisible = (visible) => this.setVisibleById(css3DObject.uuid, visible);
                 const setEnabled = (enabled) => this.setEnabledById(css3DObject.uuid, enabled);
@@ -6386,9 +7034,8 @@ class Controller extends Controller$1 {
                 const enable = () => setEnabled(true);
                 const disable = () => setEnabled(false);
                 const dispose = () => {
-                    var _a;
-                    delete store.frontModeCSS3DObjects[css3DObject.uuid];
-                    delete store.behindModeCSS3DObjects[css3DObject.uuid];
+                    delete this.store.frontModeCSS3DObjects[css3DObject.uuid];
+                    delete this.store.behindModeCSS3DObjects[css3DObject.uuid];
                     disposers.forEach((d) => d === null || d === void 0 ? void 0 : d());
                     css3DScene.remove(css3DObject);
                     // 如果全没了，就清除父容器
@@ -6398,16 +7045,14 @@ class Controller extends Controller$1 {
                         }
                         css3DRenderer.domElement.remove();
                         if (mode === 'front')
-                            globalState.frontModeStore = undefined;
+                            globalStore.frontModeStore = undefined;
                         if (mode === 'behind')
-                            globalState.behindModeStore = undefined;
-                        if (!globalState.behindModeStore && !globalState.frontModeStore) {
-                            (_a = resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.unobserve) === null || _a === void 0 ? void 0 : _a.call(resizeObserver);
-                        }
+                            globalStore.behindModeStore = undefined;
+                        globalStore.resizeObserver = undefined;
                     }
                     return true;
                 };
-                store.disposers.push(dispose);
+                this.store.disposers.push(dispose);
                 if (autoRender)
                     render();
                 return {
@@ -6422,89 +7067,60 @@ class Controller extends Controller$1 {
                     disable,
                     enable,
                     setEnabled,
+                    appendToElement: (container) => this.appendToElement(container, mode),
                 };
             }
         });
-        Object.defineProperty(this, "createResizeObserver", {
+        Object.defineProperty(this, "setVisibleById", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: (resizeHandler, fireImmediately = true) => {
-                const fiveElement = this.five.getElement();
-                if (!fiveElement || !ResizeObserver)
-                    return { observe: () => { }, unobserve: () => { } };
-                const resizeObserverHandler = () => {
-                    /**
-                     * 这里evenNumber策略是遇到奇数会加1，在某些浏览器中会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
-                     * 所以为了规避上面这种情况，evenNumber设置了一个参数，遇到奇数可选择减一
-                     */
-                    const width = evenNumber(fiveElement.clientWidth, { smaller: true });
-                    const height = evenNumber(fiveElement.clientHeight, { smaller: true });
-                    resizeHandler(width, height);
-                };
-                const observer = new ResizeObserver(resizeObserverHandler);
-                if (fireImmediately)
-                    resizeObserverHandler();
-                return {
-                    observe: () => observer.observe(fiveElement),
-                    unobserve: () => observer.unobserve(fiveElement),
-                };
+            value: (id, visible) => {
+                var _a;
+                const data = (_a = this.store.frontModeCSS3DObjects[id]) !== null && _a !== void 0 ? _a : this.store.behindModeCSS3DObjects[id];
+                if (!data)
+                    return;
+                data.css3DObject.visible = visible;
+                data.visible = visible;
+                if (data.mode === 'behind')
+                    data.opacityMesh.visible = visible;
             }
         });
-        Object.defineProperty(this, "createObject", {
+        Object.defineProperty(this, "setEnabledById", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: (points, config) => {
-                const { ratio: wantRatio, dpr, container, mode, pointerEvents } = config;
-                const ratio = Math.max(MinRatio, wantRatio);
-                const planeWidth = points[0].distanceTo(points[1]);
-                const planeHeight = points[1].distanceTo(points[2]);
-                const domWidthPx = evenNumber((planeWidth / ratio) * dpr);
-                const domHeightPx = evenNumber((planeHeight / ratio) * dpr);
-                let css3DObject;
-                if (ratio === wantRatio) {
-                    css3DObject = new CSS3DRenderer.CSS3DObject(container);
-                    css3DObject.scale.set(ratio, ratio, ratio);
-                    container.style.width = `${domWidthPx}px`;
-                    container.style.height = `${domHeightPx}px`;
+            value: (id, enabled) => {
+                var _a, _b, _c;
+                const data = (_a = this.store.frontModeCSS3DObjects[id]) !== null && _a !== void 0 ? _a : this.store.behindModeCSS3DObjects[id];
+                if (!data)
+                    return;
+                const css3DScene = data.mode === 'front' ? (_b = globalStore.frontModeStore) === null || _b === void 0 ? void 0 : _b.css3DScene : (_c = globalStore.behindModeStore) === null || _c === void 0 ? void 0 : _c.css3DScene;
+                if (!css3DScene)
+                    return;
+                if (enabled) {
+                    css3DScene.add(data.css3DObject);
+                    if (data.mode === 'behind')
+                        data.scene.add(data.opacityMesh);
                 }
                 else {
-                    // 兼容ratio小于0.00216的情况
-                    const element = document.createElement('div');
-                    css3DObject = new CSS3DRenderer.CSS3DObject(element);
-                    css3DObject.scale.set(ratio, ratio, ratio);
-                    element.style.width = `${domWidthPx}px`;
-                    element.style.height = `${domHeightPx}px`;
-                    element.style.pointerEvents = 'none';
-                    const scale = wantRatio / ratio;
-                    container.style.position = 'absolute';
-                    container.style.left = '0';
-                    container.style.top = '0';
-                    container.style.width = `${scale * domWidthPx}px`;
-                    container.style.height = `${scale * domHeightPx}px`;
-                    element.appendChild(container);
+                    css3DScene.remove(data.css3DObject);
+                    if (data.mode === 'behind')
+                        data.scene.remove(data.opacityMesh);
                 }
+                data.enabled = enabled;
+            }
+        });
+        Object.defineProperty(this, "createObject", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (points, config) => {
+                const { ratio, dpr, container, mode, pointerEvents } = config;
+                const css3DObject = new CSS3DObjectPlus(container, points, ratio, dpr);
                 container.style.pointerEvents = pointerEvents;
-                const centerPosition = centerPoint(points[0], points[2]);
-                const vector01 = points[1].clone().sub(points[0]); // 点0 -> 点1 的向量
-                const vector12 = points[2].clone().sub(points[1]); // 点1 -> 点2 的向量
-                // 旋转平面
-                const rotateXAngle = new THREE.Vector3(0, 1, 0).angleTo(new THREE.Vector3(0, vector12.y, vector12.z));
-                const rotateYAngle = new THREE.Vector3(1, 0, 0).angleTo(new THREE.Vector3(vector01.x, 0, vector01.z));
-                const rotateZAngle = vector01.angleTo(new THREE.Vector3(vector01.x, 0, vector01.z));
-                /**
-                 * [0,1,0] => [0,0,1]  为rotate WorldX正方向
-                 * [0,0,1] => [0,1,0]  为rotate WorldY正方向
-                 * [0,1,1] => [-1,0,0] 为rotate WorldZ正方向
-                 */
-                const rotateX = (vector12.z > 0 ? -1 : 1) * rotateXAngle;
-                const rotateY = (vector01.z < 0 ? 1 : -1) * rotateYAngle;
-                const rotateZ = ((vector01.x > 0 && vector01.y < 0) || (vector01.x < 0 && vector01.y > 0) ? -1 : 1) * rotateZAngle;
-                css3DObject.rotateOnWorldAxis(new THREE.Vector3(1, 0, 0), rotateX); // x
-                css3DObject.rotateOnWorldAxis(new THREE.Vector3(0, 1, 0), rotateY); // y
-                css3DObject.rotateOnWorldAxis(new THREE.Vector3(0, 0, 1), rotateZ); // z
-                css3DObject.position.set(centerPosition.x, centerPosition.y, centerPosition.z);
+                container.classList.add(`${PLUGIN_NAME$2}__container`);
+                const { domWidthPx, domHeightPx } = css3DObject;
                 // 生成透明Mesh
                 const opacityMesh = (() => {
                     if (mode === 'behind') {
@@ -6525,17 +7141,51 @@ class Controller extends Controller$1 {
                 return { css3DObject, opacityMesh };
             }
         });
+        Object.defineProperty(this, "createResizeObserver", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (element, resizeHandler, fireImmediately = true) => {
+                if (!element) {
+                    console.error('createResizeObserver: element is undefined');
+                    return { observe: () => { }, unobserve: () => { } };
+                }
+                const resizeObserverHandler = () => {
+                    /**
+                     * 这里evenNumber策略是遇到奇数会加1，在某些浏览器中会触发滚动条显示，导致fiveElement变小，fiveElement变小又触发了这里的resize，宽高变小，滚动条消失，然后又触发resize。。。无限循环
+                     * 所以为了规避上面这种情况，evenNumber设置了一个参数，遇到奇数可选择减一
+                     */
+                    const width = evenNumber(element.clientWidth, { smaller: true });
+                    const height = evenNumber(element.clientHeight, { smaller: true });
+                    resizeHandler(width, height);
+                };
+                if (typeof ResizeObserver === 'undefined' || !ResizeObserver) {
+                    console.warn('createResizeObserver: ResizeObserver is undefined');
+                    return { observe: () => resizeObserverHandler(), unobserve: () => { } };
+                }
+                const observer = new ResizeObserver(resizeObserverHandler);
+                if (fireImmediately)
+                    resizeObserverHandler();
+                return {
+                    observe: () => observer.observe(element),
+                    unobserve: () => observer.unobserve(element),
+                };
+            }
+        });
         Object.defineProperty(this, "disposedErrorLog", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: () => {
-                console.error(`${PLUGIN_NAME$1} is disposed`);
+                console.error(`${PLUGIN} is disposed`);
             }
         });
     }
+    getCurrentState() {
+        return this.state;
+    }
     setState(state, options = { userAction: true }) {
-        if (this.store.disposed)
+        if (this.state.disposed)
             return this.disposedErrorLog();
         const prevState = Object.assign({}, this.state);
         this.state = Object.assign(this.state, state);
@@ -6547,40 +7197,63 @@ class Controller extends Controller$1 {
         }
         this.hooks.emit('stateChange', { state: this.state, prevState, userAction: options.userAction });
     }
-    /** @deprecated disposeAll() renamed as dispose() */
-    disposeAll() {
-        return this.dispose();
-    }
     dispose() {
         this.store.disposers.forEach((d) => d === null || d === void 0 ? void 0 : d());
         this.store.disposers = [];
         this.hooks.emit('dispose');
-        this.store.disposed = true;
+        this.state.disposed = true;
     }
     async show({ userAction } = { userAction: true }) {
-        if (this.store.disposed)
+        if (this.state.disposed)
             return this.disposedErrorLog();
         this.setState({ visible: true }, { userAction });
         this.hooks.emit('show', { userAction });
     }
     async hide({ userAction } = { userAction: true }) {
-        if (this.store.disposed)
+        if (this.state.disposed)
             return this.disposedErrorLog();
         this.setState({ visible: false }, { userAction });
         this.hooks.emit('hide', { userAction });
     }
     enable({ userAction } = { userAction: true }) {
-        if (this.store.disposed)
+        if (this.state.disposed)
             return this.disposedErrorLog();
         this.setState({ enabled: true }, { userAction });
         this.hooks.emit('enable', { userAction });
     }
     disable({ userAction } = { userAction: true }) {
-        if (this.store.disposed)
+        if (this.state.disposed)
             return this.disposedErrorLog();
         this.setState({ enabled: false }, { userAction });
         this.hooks.emit('disable', { userAction });
     }
+    appendToElement(container, mode) {
+        if (!container)
+            throw new Error(`${PLUGIN} Cannot append to container: container is ${container}`);
+        const store = mode === 'front' ? globalStore.frontModeStore : globalStore.behindModeStore;
+        if (!store) {
+            if (mode === 'front')
+                globalStore.frontModeContainer = container;
+            if (mode === 'behind')
+                globalStore.behindModeContainer = container;
+            return;
+        }
+        if (store.appendedToPage)
+            return;
+        container.appendChild(store.css3DRenderer.domElement);
+        if (!globalStore.resizeObserver) {
+            const reSize = (width, height) => {
+                var _a, _b;
+                (_a = globalStore.frontModeStore) === null || _a === void 0 ? void 0 : _a.css3DRenderer.setSize(width, height);
+                (_b = globalStore.behindModeStore) === null || _b === void 0 ? void 0 : _b.css3DRenderer.setSize(width, height);
+            };
+            const { observe, unobserve } = this.createResizeObserver(container, reSize, true);
+            globalStore.resizeObserver = { observe, unobserve };
+            observe();
+            this.store.disposers.push(unobserve);
+        }
+        store.appendedToPage = true;
+    }
     async handleShow() {
         Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
             value.css3DObject.visible = value.visible;
@@ -6589,7 +7262,6 @@ class Controller extends Controller$1 {
             value.css3DObject.visible = value.visible;
             value.opacityMesh.visible = value.visible;
         });
-        this.five.needsRender = true;
     }
     async handleHide() {
         Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
@@ -6599,77 +7271,148 @@ class Controller extends Controller$1 {
             value.css3DObject.visible = false;
             value.opacityMesh.visible = false;
         });
-        this.five.needsRender = true;
     }
     handleEnable() {
         Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
             var _a;
             if (!value.enabled)
                 return;
-            (_a = globalState.frontModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.add(value.css3DObject);
+            (_a = globalStore.frontModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.add(value.css3DObject);
         });
         Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
-            var _a;
+            var _a, _b;
             if (!value.enabled)
                 return;
-            (_a = globalState.behindModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.add(value.css3DObject);
-            this.five.scene.add(value.opacityMesh);
+            (_a = globalStore.behindModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.add(value.css3DObject);
+            (_b = globalStore.behindModeStore) === null || _b === void 0 ? void 0 : _b.scene.add(value.opacityMesh);
         });
-        this.five.needsRender = true;
     }
     handleDisable() {
         Object.values(this.store.frontModeCSS3DObjects).forEach((value) => {
             var _a;
-            (_a = globalState.frontModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.remove(value.css3DObject);
+            (_a = globalStore.frontModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.remove(value.css3DObject);
         });
         Object.values(this.store.behindModeCSS3DObjects).forEach((value) => {
-            var _a;
-            (_a = globalState.behindModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.remove(value.css3DObject);
-            this.five.scene.remove(value.opacityMesh);
+            var _a, _b;
+            (_a = globalStore.behindModeStore) === null || _a === void 0 ? void 0 : _a.css3DScene.remove(value.css3DObject);
+            (_b = globalStore.behindModeStore) === null || _b === void 0 ? void 0 : _b.scene.remove(value.opacityMesh);
         });
+    }
+}
+
+const VERSION$1 = 'v2.0.0';
+const PLUGIN_NAME$1 = `CSS3DRenderPlugin-${random$1()}@${VERSION$1}`;
+class Controller extends CSS3DRender {
+    constructor(five) {
+        super();
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * @description 根据传入的四个点位创建一个 3d dom容器，可以通过ReactDom.render()的方式将react组件放到容器中
+         * @param { Vector3Position[] } points 矩形四个点坐标
+         * @param config 均为可选值
+         * @config_document `config` 均为可选值
+         *  | key                   | type                       | defaultValue        | comment |
+         *  | -                     | -                          | -                   | -       |
+         *  | `ratio`               | *`number`*                 | `0.00216`           | 1px对应多少米，默认为 0.00216，即1px对应2.16mm |
+         *  | ~~`dpr`~~             | ~~*`number`*~~             | ~~`undefined`~~     | ~~**已改名**，请使用~~ `devicePixelRatio` |
+         *  | `devicePixelRatio`    | *`number`*                 | `1`                 | 设备的物理像素分辨率与CSS像素分辨率的比值 |
+         *  | `container`           | *`HTMLElement`*            | `undefined`         | 自定义 return 中的 `container`
+         *  | `pointerEvents`       | *`'none'\|'auto'`*         | `'none'`            | container 的 css属性：`pointer-events` 的值 |
+         *  | `autoRender`          | *`boolean`*                | `true`              | 是否自动渲染，通常为true |
+         *  | `mode`                | *`'front'\|'behind'`*      | `front`             | 两种模式:|
+         *  |                                                                          | | | `front`  模式：DOM 处于 five Canvas 上方，所以无法模拟遮挡效果，需要手动检测是否可见去设置显隐 |
+         *  |                                                                          | | | `behind` 模式：DOM 处于 five Canvas 下方，可以模拟真实的遮挡效果，但是 DOM 必须是非透明的 |
+         *  | `behindFiveContainer` | *`HTMLElement`*            | `undefined`         | 如果 mode 为 `behind`，需要传入容器，并确保此容器位five下方，且中间无其他不透明的dom元素遮挡 |
+         *
+         * @return
+         * ```typescript
+         *    {
+         *      id: string,                             // id
+         *      container: HTMLDIVElement               // dom容器
+         *      dispose: () => void                     // 销毁
+         *      css3DObject: CSS3DObject                // THREE.CSS3DObject 实例
+         *      render?: () => void                     // 渲染函数，当 config.autoRender = true || undefined 时为 undefined
+         *      setVisible: (visible: boolean) => void  // 设置显隐, 同 setVisibleById(id, visible)
+         *      show: () => void                        // 同 setVisible(true)
+         *      hide: () => void                        // 同 setVisible(false)
+         *      setEnabled: (enabled: boolean) => void  // 添加/移除 container, 同 setEnabledById(id, enabled)
+         *      enable: () => void                      // 同 setEnabled(true)
+         *      disable: () => void                     // 同 setEnabled(false)
+         *    } | void
+         * ```
+         */
+        Object.defineProperty(this, "create3DDomContainer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (points, config) => {
+                if (this.state.disposed)
+                    return;
+                // ==== init ====
+                const mergeConfig = (() => {
+                    var _a;
+                    if ((config === null || config === void 0 ? void 0 : config.dpr) !== undefined)
+                        console.warn(`${PLUGIN_NAME$1}: please use "config.devicePixelRatio" replace "config.dpr"`);
+                    const defaultconfig = {
+                        ratio: 0.00216,
+                        devicePixelRatio: (_a = config === null || config === void 0 ? void 0 : config.dpr) !== null && _a !== void 0 ? _a : 1,
+                        mode: 'front',
+                        autoRender: true,
+                    };
+                    return Object.assign(defaultconfig, config, (config === null || config === void 0 ? void 0 : config.mode) === 'behind' ? { scene: this.five.scene } : undefined);
+                })();
+                const fiveElement = this.five.getElement();
+                if (!fiveElement)
+                    return console.error(`${PLUGIN_NAME$1}: five.getElement() is ${fiveElement}`);
+                const { autoRender, mode } = mergeConfig;
+                // 自动添加dom
+                const wrapper = mode === 'front' ? fiveElement.parentElement : mergeConfig.behindFiveContainer;
+                this.appendToElement(wrapper || document.body, mode);
+                const create3DElementResault = this.create3DElement(this.five.camera, points, Object.assign(Object.assign({}, mergeConfig), { autoRender: false }));
+                if (!create3DElementResault)
+                    return;
+                const oldRender = create3DElementResault.render;
+                const newRender = () => {
+                    var _a;
+                    if (mode === 'front') {
+                        oldRender();
+                    }
+                    if (mode === 'behind') {
+                        if ((_a = this.five.model) === null || _a === void 0 ? void 0 : _a.loaded)
+                            oldRender();
+                        else
+                            this.five.once('modelLoaded', () => oldRender());
+                    }
+                };
+                if (autoRender)
+                    newRender();
+                return Object.assign(Object.assign({}, create3DElementResault), { render: autoRender ? undefined : newRender });
+            }
+        });
+        this.five = five;
+    }
+    /** @deprecated disposeAll() renamed as dispose() */
+    disposeAll() {
+        return this.dispose();
+    }
+    setState(...params) {
+        const result = super.setState(...params);
         this.five.needsRender = true;
+        return result;
     }
 }
 
 const CSS3DRenderPlugin = (five) => new Controller(five);
 
-const VERSION = __APP_VERSION__;
-const PLUGIN_NAME = `DnalogelPlugin-PanoTagPlugin-${random()}@${VERSION}`;
+// declare const __APP_VERSION__: string
+const VERSION = '0.3.7';
+const PLUGIN_NAME = `DnalogelPlugin-PanoTagPlugin@${VERSION}`;
 const TAG_INITIAL_UNFOLDED = true;
-const DefaultConfig = {
-    globalConfig: {
-        initialState: {
-        // unfolded: false,
-        },
-        visibleConfig: {
-            visibleDistance: { max: 5 },
-            angleRange: { min: -45, max: 45 },
-        },
-        unfoldedConfig: {
-            autoUnfold: {
-                strategy: 'MinimumDistance',
-            },
-        },
-        tag3DConfig: {
-            ratio: 0.0035,
-            devicePixelRatio: window.devicePixelRatio,
-        },
-    },
-    contentTypeConfig: {
-        'Any-Link-Any': {
-            unfoldedConfig: {
-                disableFold: true,
-                autoUnfold: undefined,
-            },
-            initialState: {
-                unfolded: true,
-            },
-        },
-        'Any-Marketing-Any': {
-            unfoldedConfig: undefined,
-        },
-    },
-};
 const pluginFlag = (name) => `${PLUGIN_NAME}--${name}`;
 class PanoTagPluginController extends TagComputer {
     constructor(five, params) {
@@ -6738,9 +7481,16 @@ class PanoTagPluginController extends TagComputer {
             value: {
                 disposers: [],
                 disposed: false,
+                resizeObserverDisposerAdding: false,
                 css3DRenderDisposer: new Map(),
             }
         });
+        Object.defineProperty(this, "staticUrl", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
         Object.defineProperty(this, "disposedErrorLog", {
             enumerable: true,
             configurable: true,
@@ -6749,9 +7499,24 @@ class PanoTagPluginController extends TagComputer {
                 console.error(`${PLUGIN_NAME} is disposed`);
             }
         });
-        this.params = Object.assign({ debug: false, mergePluginDefaultConfigToLoadDataConfig: false, config: this.config }, params);
+        this.params = Object.assign({ debug: false, mergePluginDefaultConfigToLoadDataConfig: false, config: this.config, staticConfig: {
+                host: 'vrlab-static.ljcdn.com',
+            } }, params);
         this.debug = this.params.debug;
         this.config = this.params.config;
+        this.staticUrl = (() => {
+            var _a;
+            const staticConfig = this.params.staticConfig;
+            if (typeof staticConfig === 'string') {
+                return staticConfig;
+            }
+            else {
+                const protocol = staticConfig.protocol ? staticConfig.protocol + ':' : '';
+                const host = (_a = staticConfig.host) !== null && _a !== void 0 ? _a : 'vrlab-static.ljcdn.com';
+                const port = staticConfig.port ? ':' + staticConfig.port : '';
+                return `${protocol}//${host}${port}`;
+            }
+        })();
         Object.assign(window, { __PANOTAGPLUGIN_DEBUG__: this });
     }
     /**
@@ -6787,7 +7552,7 @@ class PanoTagPluginController extends TagComputer {
         const _tags = tags
             .map((tag) => {
             const config = this.getTagConfig(tag);
-            return Object.assign(Object.assign({}, tag), { state: Object.assign({ visible: undefined, unfolded: TAG_INITIAL_UNFOLDED }, config.initialState) });
+            return Object.assign(Object.assign({}, tag), { state: Object.assign({ visible: undefined, unfolded: TAG_INITIAL_UNFOLDED }, config.initialState), hooks: new five.Subscribe(), clickable: config.clickable });
         })
             .filter((tag) => tag.position);
         this.tags.push(..._tags);
@@ -6798,10 +7563,13 @@ class PanoTagPluginController extends TagComputer {
                 (_b = (_a = this.store).eventListenerDisposer) === null || _b === void 0 ? void 0 : _b.call(_a);
             }
             this.store.eventListenerDisposer = this.addEventListener();
-            if (!this.store.resizeObserverDisposer) {
+            // resizeObserverDisposerAdding 避免200ms内重复执行 addResizeObserver
+            if (!this.store.resizeObserverDisposer && !this.store.resizeObserverDisposerAdding) {
                 const resizeObserverDisposer = this.addResizeObserver();
+                this.store.resizeObserverDisposerAdding = true;
                 setTimeout(() => {
                     this.store.resizeObserverDisposer = resizeObserverDisposer;
+                    this.store.resizeObserverDisposerAdding = false;
                 }, 200);
             }
             this.checkPanelTag();
@@ -6853,6 +7621,7 @@ class PanoTagPluginController extends TagComputer {
         this.store.eventListenerDisposer = undefined;
         (_f = (_e = this.store).resizeObserverDisposer) === null || _f === void 0 ? void 0 : _f.call(_e);
         this.store.resizeObserverDisposer = undefined;
+        this.store.resizeObserverDisposerAdding = false;
         this.clearCache();
         this.hooks.emit('dispose');
     }
@@ -7240,11 +8009,8 @@ class PanoTagPluginController extends TagComputer {
     }
 }
 
-// DELETE
-Object.assign(window, { objectAssignDeep: objectAssignDeep__default["default"] });
 const PanoTagPlugin = (five, params) => new PanoTagPluginController(five, params);
 
-exports.DefaultConfig = DefaultConfig;
 exports.PanoTagPlugin = PanoTagPlugin;
 exports.PanoTagPluginController = PanoTagPluginController;
 exports["default"] = PanoTagPlugin;