@realsee/dnalogel 2.0.0-alpha.43 → 2.0.0-alpha.46

package/libs/ItemLabelPlugin/ItemLabelComponent.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.49.0 */
+/* generated by Svelte v3.48.0 */
 import {
 	SvelteComponent,
 	add_render_callback,
@@ -36,7 +36,7 @@ import { getLabelTransform } from './utils/getLabelTransform';
 import { transform2RenderData } from "./utils/transform2RenderData";
 
 function add_css(target) {
-	append_styles(target, "svelte-rmdeb", ".item-labels-container.svelte-rmdeb{width:100%;height:100%;position:relative}");
+	append_styles(target, "svelte-gk8s47", ".item-labels-container.svelte-gk8s47{width:100%;height:100%;position:relative}");
 }
 
 function get_each_context(ctx, list, i) {
@@ -177,7 +177,7 @@ function create_fragment(ctx) {
 				each_blocks[i].c();
 			}
 
-			attr(div, "class", "item-labels-container svelte-rmdeb");
+			attr(div, "class", "item-labels-container svelte-gk8s47");
 			add_render_callback(() => /*div_elementresize_handler*/ ctx[13].call(div));
 			set_style(div, "opacity", /*itemsVisible*/ ctx[5] ? 1 : 0, false);
 		},

package/libs/ItemLabelPlugin/ItemLabelItem.js

@@ -1,9 +1,10 @@
-/* generated by Svelte v3.49.0 */
+/* generated by Svelte v3.48.0 */
 import {
 	SvelteComponent,
 	append,
 	append_styles,
 	attr,
+	binding_callbacks,
 	detach,
 	element,
 	init,
@@ -22,11 +23,93 @@ import "./events.type";
 import classNames from 'classnames';
 
 function add_css(target) {
-	append_styles(target, "svelte-1gam1w3", ".item-label-item.svelte-1gam1w3.svelte-1gam1w3{position:absolute;z-index:0;transform:none;cursor:pointer;pointer-events:none;user-select:none;animation:svelte-1gam1w3-fadeIn .3s ease-in}.item-label-item.fold.svelte-1gam1w3>.item-label-item__text-wrap.svelte-1gam1w3{visibility:hidden}.item-label-item.fold.svelte-1gam1w3>.item-label-item__bar.anchor.svelte-1gam1w3{visibility:hidden}.item-label-item.fold.svelte-1gam1w3>.item-label-item__bar.anchor.svelte-1gam1w3:after{visibility:visible}.item-label-item__text-wrap.svelte-1gam1w3.svelte-1gam1w3{height:fit-content;padding:12px 20px 12px 12px;position:absolute;width:max-content;max-width:473px;min-height:92px;background-image:linear-gradient(269deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.60) 49%, rgba(31, 38, 46, 0.70) 100%);border:1.5px solid rgba(255, 255, 255, .65);border-radius:3px;color:white;transform:translate(-50%, 0);display:flex;justify-content:flex-start;align-items:center;box-sizing:border-box;overflow:hidden;pointer-events:all}.icon-wrap.svelte-1gam1w3.svelte-1gam1w3{width:68px;height:100%;display:flex;justify-content:center;align-content:center}.icon.svelte-1gam1w3.svelte-1gam1w3{width:68px;height:68px;background-repeat:no-repeat;background-size:contain;background-position:center}.item-label-text.svelte-1gam1w3.svelte-1gam1w3{margin-left:12px;padding-left:12px;min-height:68px;height:auto;display:flex;flex-flow:column;justify-content:space-around;align-content:flex-start;border-left:solid rgba(255, 255, 255, .2) 1px;border-top:solid rgba(255, 255, 255, .2) 0;border-right:solid rgba(255, 255, 255, .2) 0;border-bottom:solid rgba(255, 255, 255, .2) 0;pointer-events:auto}.item-model.svelte-1gam1w3.svelte-1gam1w3{white-space:nowrap;font-size:22px;font-weight:bold;line-height:30px}.item-name.svelte-1gam1w3.svelte-1gam1w3{height:auto;word-wrap:break-word;word-break:break-all;font-size:20px;line-height:28px}.item-label-item__bar.svelte-1gam1w3.svelte-1gam1w3{position:absolute;bottom:0;width:3px;background-image:linear-gradient(to bottom, white, rgba(255, 255, 255, 0));box-shadow:0 2px 8px 0 rgba(0, 0, 0, 0.20);pointer-events:none}.item-label-item__bar.anchor.svelte-1gam1w3.svelte-1gam1w3:after{content:'';position:absolute;bottom:0;width:24px;height:24px;background-image:url(\"//vrlab-public.ljcdn.com/common/file/web/67e7a198-28c9-47dc-879b-507bd3ae600c.png \");background-position:center;background-size:contain;transform:translate(-10.5px, 50%)}@keyframes svelte-1gam1w3-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}");
+	append_styles(target, "svelte-1mppr0a", ".item-label-item.svelte-1mppr0a.svelte-1mppr0a{position:absolute;z-index:0;transform:none;cursor:pointer;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-animation:svelte-1mppr0a-fadeIn .3s ease-in;animation:svelte-1mppr0a-fadeIn .3s ease-in}.item-label-item.fold.svelte-1mppr0a>.item-label-item__text-wrap.svelte-1mppr0a{visibility:hidden}.item-label-item.fold.svelte-1mppr0a>.item-label-item__bar.anchor.svelte-1mppr0a{visibility:hidden}.item-label-item.fold.svelte-1mppr0a>.item-label-item__bar.anchor.svelte-1mppr0a:after{visibility:visible}.item-label-item__text-wrap.svelte-1mppr0a.svelte-1mppr0a{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0.625rem 1.04167rem 0.625rem 0.625rem;position:absolute;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:24.63542rem;min-height:4.79167rem;background-image:linear-gradient(269deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.60) 49%, rgba(31, 38, 46, 0.70) 100%);border:1.5px solid rgba(255, 255, 255, .65);border-radius:0.15625rem;color:white;transform:translate(-50%, 0);display:flex;justify-content:flex-start;align-items:center;box-sizing:border-box;overflow:hidden;pointer-events:all}.item-label-item__custom.svelte-1mppr0a.svelte-1mppr0a{padding:0;max-width:unset;min-height:unset;background-image:unset;border:0;border-radius:0}.icon-wrap.svelte-1mppr0a.svelte-1mppr0a{width:3.54167rem;height:100%;display:flex;justify-content:center;align-content:center}.icon.svelte-1mppr0a.svelte-1mppr0a{width:3.54167rem;height:3.54167rem;background-repeat:no-repeat;background-size:contain;background-position:center}.item-label-text.svelte-1mppr0a.svelte-1mppr0a{margin-left:0.625rem;padding-left:0.625rem;min-height:3.54167rem;height:auto;display:flex;flex-flow:column;justify-content:space-around;align-content:flex-start;border-left:solid rgba(255, 255, 255, .2) 1px;border-top:solid rgba(255, 255, 255, .2) 0;border-right:solid rgba(255, 255, 255, .2) 0;border-bottom:solid rgba(255, 255, 255, .2) 0;pointer-events:auto}.item-model.svelte-1mppr0a.svelte-1mppr0a{white-space:nowrap;font-size:1.14583rem;font-weight:bold;line-height:1.5625rem}.item-name.svelte-1mppr0a.svelte-1mppr0a{height:auto;word-wrap:break-word;word-break:break-all;font-size:1.04167rem;line-height:1.45833rem}.item-label-item__bar.svelte-1mppr0a.svelte-1mppr0a{position:absolute;bottom:0;width:0.15625rem;background-image:linear-gradient(to bottom, white, rgba(255, 255, 255, 0));box-shadow:0 2px 0.41667rem 0 rgba(0, 0, 0, 0.20);pointer-events:none}.item-label-item__bar.anchor.svelte-1mppr0a.svelte-1mppr0a:after{content:'';position:absolute;bottom:0;width:1.25rem;height:1.25rem;background-image:url(\"//vrlab-public.ljcdn.com/common/file/web/67e7a198-28c9-47dc-879b-507bd3ae600c.png \");background-position:center;background-size:contain;transform:translate(-0.54688rem, 50%)}@-webkit-keyframes svelte-1mppr0a-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}@keyframes svelte-1mppr0a-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}");
 }
 
-// (21:2) {#if itemLabel.icon}
+// (34:8) {:else}
+function create_else_block(ctx) {
+	let t0;
+	let div;
+	let span0;
+	let t1_value = (/*itemLabel*/ ctx[0].code || /*itemLabel*/ ctx[0].id) + "";
+	let t1;
+	let t2;
+	let span1;
+	let t3_value = /*itemLabel*/ ctx[0].name + "";
+	let t3;
+	let if_block = /*itemLabel*/ ctx[0].icon && create_if_block_1(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			t0 = space();
+			div = element("div");
+			span0 = element("span");
+			t1 = text(t1_value);
+			t2 = space();
+			span1 = element("span");
+			t3 = text(t3_value);
+			attr(span0, "class", "item-model svelte-1mppr0a");
+			attr(span1, "class", "item-name svelte-1mppr0a");
+			attr(div, "class", "item-label-text svelte-1mppr0a");
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, t0, anchor);
+			insert(target, div, anchor);
+			append(div, span0);
+			append(span0, t1);
+			append(div, t2);
+			append(div, span1);
+			append(span1, t3);
+		},
+		p(ctx, dirty) {
+			if (/*itemLabel*/ ctx[0].icon) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+				} else {
+					if_block = create_if_block_1(ctx);
+					if_block.c();
+					if_block.m(t0.parentNode, t0);
+				}
+			} else if (if_block) {
+				if_block.d(1);
+				if_block = null;
+			}
+
+			if (dirty & /*itemLabel*/ 1 && t1_value !== (t1_value = (/*itemLabel*/ ctx[0].code || /*itemLabel*/ ctx[0].id) + "")) set_data(t1, t1_value);
+			if (dirty & /*itemLabel*/ 1 && t3_value !== (t3_value = /*itemLabel*/ ctx[0].name + "")) set_data(t3, t3_value);
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(t0);
+			if (detaching) detach(div);
+		}
+	};
+}
+
+// (32:8) {#if Boolean(typeof itemLabel.render === 'function')}
 function create_if_block(ctx) {
+	let div;
+
+	return {
+		c() {
+			div = element("div");
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			/*div_binding*/ ctx[6](div);
+		},
+		p: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+			/*div_binding*/ ctx[6](null);
+		}
+	};
+}
+
+// (35:12) {#if itemLabel.icon}
+function create_if_block_1(ctx) {
 	let div1;
 	let div0;
 	let div0_style_value;
@@ -37,16 +120,16 @@ function create_if_block(ctx) {
 		c() {
 			div1 = element("div");
 			div0 = element("div");
-			attr(div0, "class", "icon svelte-1gam1w3");
+			attr(div0, "class", "icon svelte-1mppr0a");
 			attr(div0, "style", div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon})`);
-			attr(div1, "class", "icon-wrap svelte-1gam1w3");
+			attr(div1, "class", "icon-wrap svelte-1mppr0a");
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
 			append(div1, div0);
 
 			if (!mounted) {
-				dispose = listen(div1, "click", /*click_handler*/ ctx[5]);
+				dispose = listen(div1, "click", /*click_handler*/ ctx[7]);
 				mounted = true;
 			}
 		},
@@ -64,116 +147,106 @@ function create_if_block(ctx) {
 }
 
 function create_fragment(ctx) {
-	let div3;
-	let div1;
-	let t0;
+	let div2;
 	let div0;
-	let span0;
-	let t1_value = (/*itemLabel*/ ctx[0].code || /*itemLabel*/ ctx[0].id) + "";
-	let t1;
-	let t2;
-	let span1;
-	let t3_value = /*itemLabel*/ ctx[0].name + "";
-	let t3;
+	let show_if;
+	let div0_class_value;
+	let t;
+	let div1;
 	let div1_class_value;
-	let t4;
-	let div2;
 	let div2_class_value;
-	let div3_class_value;
 	let mounted;
 	let dispose;
-	let if_block = /*itemLabel*/ ctx[0].icon && create_if_block(ctx);
+
+	function select_block_type(ctx, dirty) {
+		if (dirty & /*itemLabel*/ 1) show_if = null;
+		if (show_if == null) show_if = !!Boolean(typeof /*itemLabel*/ ctx[0].render === 'function');
+		if (show_if) return create_if_block;
+		return create_else_block;
+	}
+
+	let current_block_type = select_block_type(ctx, -1);
+	let if_block = current_block_type(ctx);
 
 	return {
 		c() {
-			div3 = element("div");
-			div1 = element("div");
-			if (if_block) if_block.c();
-			t0 = space();
-			div0 = element("div");
-			span0 = element("span");
-			t1 = text(t1_value);
-			t2 = space();
-			span1 = element("span");
-			t3 = text(t3_value);
-			t4 = space();
 			div2 = element("div");
-			attr(span0, "class", "item-model svelte-1gam1w3");
-			attr(span1, "class", "item-name svelte-1gam1w3");
-			attr(div0, "class", "item-label-text svelte-1gam1w3");
-			attr(div1, "class", div1_class_value = "" + (null_to_empty(classNames("item-label-item__text-wrap")) + " svelte-1gam1w3"));
-			set_style(div1, "bottom", `${/*itemLabel*/ ctx[0].strokeLength}px`);
-			attr(div2, "class", div2_class_value = "" + (null_to_empty(classNames("item-label-item__bar", { anchor: /*anchorEnabled*/ ctx[1] })) + " svelte-1gam1w3"));
-			set_style(div2, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
-			attr(div3, "class", div3_class_value = "" + (null_to_empty(classNames("item-label-item", { fold: /*itemLabel*/ ctx[0].isFold })) + " svelte-1gam1w3"));
-			set_style(div3, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
-			set_style(div3, "transform", /*itemLabel*/ ctx[0].transform, false);
+			div0 = element("div");
+			if_block.c();
+			t = space();
+			div1 = element("div");
+
+			attr(div0, "class", div0_class_value = "" + (null_to_empty(classNames("item-label-item__text-wrap", {
+				'item-label-item__custom': Boolean(typeof /*itemLabel*/ ctx[0].render === 'function')
+			})) + " svelte-1mppr0a"));
+
+			set_style(div0, "bottom", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+			attr(div1, "class", div1_class_value = "" + (null_to_empty(classNames("item-label-item__bar", { anchor: /*anchorEnabled*/ ctx[1] })) + " svelte-1mppr0a"));
+			set_style(div1, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+			attr(div2, "class", div2_class_value = "" + (null_to_empty(classNames("item-label-item", { fold: /*itemLabel*/ ctx[0].isFold })) + " svelte-1mppr0a"));
+			set_style(div2, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
+			set_style(div2, "transform", /*itemLabel*/ ctx[0].transform, false);
 		},
 		m(target, anchor) {
-			insert(target, div3, anchor);
-			append(div3, div1);
-			if (if_block) if_block.m(div1, null);
-			append(div1, t0);
-			append(div1, div0);
-			append(div0, span0);
-			append(span0, t1);
-			append(div0, t2);
-			append(div0, span1);
-			append(span1, t3);
-			append(div3, t4);
-			append(div3, div2);
+			insert(target, div2, anchor);
+			append(div2, div0);
+			if_block.m(div0, null);
+			append(div2, t);
+			append(div2, div1);
 
 			if (!mounted) {
-				dispose = listen(div1, "click", /*onClick*/ ctx[3]);
+				dispose = listen(div0, "click", /*onClick*/ ctx[4]);
 				mounted = true;
 			}
 		},
 		p(ctx, [dirty]) {
-			if (/*itemLabel*/ ctx[0].icon) {
+			if (current_block_type === (current_block_type = select_block_type(ctx, dirty)) && if_block) {
+				if_block.p(ctx, dirty);
+			} else {
+				if_block.d(1);
+				if_block = current_block_type(ctx);
+
 				if (if_block) {
-					if_block.p(ctx, dirty);
-				} else {
-					if_block = create_if_block(ctx);
 					if_block.c();
-					if_block.m(div1, t0);
+					if_block.m(div0, null);
 				}
-			} else if (if_block) {
-				if_block.d(1);
-				if_block = null;
 			}
 
-			if (dirty & /*itemLabel*/ 1 && t1_value !== (t1_value = (/*itemLabel*/ ctx[0].code || /*itemLabel*/ ctx[0].id) + "")) set_data(t1, t1_value);
-			if (dirty & /*itemLabel*/ 1 && t3_value !== (t3_value = /*itemLabel*/ ctx[0].name + "")) set_data(t3, t3_value);
+			if (dirty & /*itemLabel*/ 1 && div0_class_value !== (div0_class_value = "" + (null_to_empty(classNames("item-label-item__text-wrap", {
+				'item-label-item__custom': Boolean(typeof /*itemLabel*/ ctx[0].render === 'function')
+			})) + " svelte-1mppr0a"))) {
+				attr(div0, "class", div0_class_value);
+			}
 
 			if (dirty & /*itemLabel*/ 1) {
-				set_style(div1, "bottom", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+				set_style(div0, "bottom", `${/*itemLabel*/ ctx[0].strokeLength}px`);
 			}
 
-			if (dirty & /*anchorEnabled*/ 2 && div2_class_value !== (div2_class_value = "" + (null_to_empty(classNames("item-label-item__bar", { anchor: /*anchorEnabled*/ ctx[1] })) + " svelte-1gam1w3"))) {
-				attr(div2, "class", div2_class_value);
+			if (dirty & /*anchorEnabled*/ 2 && div1_class_value !== (div1_class_value = "" + (null_to_empty(classNames("item-label-item__bar", { anchor: /*anchorEnabled*/ ctx[1] })) + " svelte-1mppr0a"))) {
+				attr(div1, "class", div1_class_value);
 			}
 
 			if (dirty & /*itemLabel*/ 1) {
-				set_style(div2, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
+				set_style(div1, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
 			}
 
-			if (dirty & /*itemLabel*/ 1 && div3_class_value !== (div3_class_value = "" + (null_to_empty(classNames("item-label-item", { fold: /*itemLabel*/ ctx[0].isFold })) + " svelte-1gam1w3"))) {
-				attr(div3, "class", div3_class_value);
+			if (dirty & /*itemLabel*/ 1 && div2_class_value !== (div2_class_value = "" + (null_to_empty(classNames("item-label-item", { fold: /*itemLabel*/ ctx[0].isFold })) + " svelte-1mppr0a"))) {
+				attr(div2, "class", div2_class_value);
 			}
 
 			if (dirty & /*itemLabel*/ 1) {
-				set_style(div3, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
+				set_style(div2, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
 			}
 
 			if (dirty & /*itemLabel*/ 1) {
-				set_style(div3, "transform", /*itemLabel*/ ctx[0].transform, false);
+				set_style(div2, "transform", /*itemLabel*/ ctx[0].transform, false);
 			}
 		},
 		i: noop,
 		o: noop,
 		d(detaching) {
-			if (detaching) detach(div3);
-			if (if_block) if_block.d();
+			if (detaching) detach(div2);
+			if_block.d();
 			mounted = false;
 			dispose();
 		}
@@ -191,16 +264,50 @@ function instance($$self, $$props, $$invalidate) {
 		hooks.emit('onLabelClick', itemLabel);
 	}
 
+	let customElement;
+
+	function div_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			customElement = $$value;
+			$$invalidate(3, customElement);
+		});
+	}
+
 	const click_handler = e => onIconClick(itemLabel);
 
 	$$self.$$set = $$props => {
 		if ('itemLabel' in $$props) $$invalidate(0, itemLabel = $$props.itemLabel);
-		if ('hooks' in $$props) $$invalidate(4, hooks = $$props.hooks);
+		if ('hooks' in $$props) $$invalidate(5, hooks = $$props.hooks);
 		if ('anchorEnabled' in $$props) $$invalidate(1, anchorEnabled = $$props.anchorEnabled);
 		if ('onIconClick' in $$props) $$invalidate(2, onIconClick = $$props.onIconClick);
 	};
 
-	return [itemLabel, anchorEnabled, onIconClick, onClick, hooks, click_handler];
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*itemLabel, customElement*/ 9) {
+			$: {
+				if (typeof itemLabel.render === 'function' && customElement) {
+					if (customElement.children.length === 0) {
+						const child = itemLabel.render(itemLabel);
+
+						if (child) {
+							customElement.appendChild(child);
+						}
+					}
+				}
+			}
+		}
+	};
+
+	return [
+		itemLabel,
+		anchorEnabled,
+		onIconClick,
+		customElement,
+		onClick,
+		hooks,
+		div_binding,
+		click_handler
+	];
 }
 
 class Component extends SvelteComponent {
@@ -215,7 +322,7 @@ class Component extends SvelteComponent {
 			safe_not_equal,
 			{
 				itemLabel: 0,
-				hooks: 4,
+				hooks: 5,
 				anchorEnabled: 1,
 				onIconClick: 2
 			},

package/libs/ItemLabelPlugin/typings.d.ts

@@ -22,6 +22,7 @@ export interface ItemLabelPluginData {
         position: [number, number, number];
         type?: string[];
         icon?: string;
+        render?: (data: ItemLabel) => HTMLDivElement;
         [key: string]: any;
     }>[];
 }
@@ -37,6 +38,7 @@ export interface ItemLabel {
     observerIndex?: number | undefined;
     visible?: boolean;
     isFold?: boolean;
+    render?: (data: ItemLabel) => HTMLDivElement;
     [key: string]: any;
 }
 export interface ItemLabelPluginExportReturnsType {

package/libs/ModelItemLabelPlugin/ItemLabelComponent.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.49.0 */
+/* generated by Svelte v3.48.0 */
 import {
 	SvelteComponent,
 	add_render_callback,
@@ -31,7 +31,7 @@ import "./events.type";
 import debounce from '../shared-utils/debounce';
 
 function add_css(target) {
-	append_styles(target, "svelte-rmdeb", ".item-labels-container.svelte-rmdeb{width:100%;height:100%;position:relative}");
+	append_styles(target, "svelte-gk8s47", ".item-labels-container.svelte-gk8s47{width:100%;height:100%;position:relative}");
 }
 
 function get_each_context(ctx, list, i) {
@@ -112,7 +112,7 @@ function create_fragment(ctx) {
 				each_blocks[i].c();
 			}
 
-			attr(div, "class", "item-labels-container svelte-rmdeb");
+			attr(div, "class", "item-labels-container svelte-gk8s47");
 			add_render_callback(() => /*div_elementresize_handler*/ ctx[9].call(div));
 			set_style(div, "opacity", /*itemsVisible*/ ctx[4] ? 1 : 0, false);
 		},

package/libs/ModelItemLabelPlugin/ItemLabelItem.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.49.0 */
+/* generated by Svelte v3.48.0 */
 import {
 	SvelteComponent,
 	append,
@@ -22,7 +22,7 @@ import "./events.type";
 import classNames from 'classnames';
 
 function add_css(target) {
-	append_styles(target, "svelte-1mttyji", ".item-label-item.svelte-1mttyji{position:absolute;z-index:0;transform:none;cursor:pointer;pointer-events:none;user-select:none;opacity:0}.item-label-item.visible.svelte-1mttyji{opacity:1;animation:svelte-1mttyji-fadeIn .3s ease-in}.item-label-item__text-wrap.svelte-1mttyji::before{content:'';position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, .3);filter:blur(16px);z-index:-1}.item-label-item__text-wrap.svelte-1mttyji{padding:6px 6px 0;position:absolute;height:20px;pointer-events:all;background-size:100% 100%;background-repeat:no-repeat;white-space:nowrap;line-height:10px;font-size:11px;font-weight:bold;color:#FFEAC0;transform:translate(-50%, 0);display:flex;justify-content:center;align-items:center}.item-label-item__text.svelte-1mttyji{padding-bottom:4px;border-top:0 solid;border-left:0 solid;border-right:0 solid;border-bottom:1px solid;border-image:linear-gradient(to right, rgba(234, 208, 154, 0), rgba(234, 208, 154, 100), rgba(234, 208, 154, 0)) 4.5 1 4.5}.item-label-item__bar.svelte-1mttyji{position:absolute;bottom:0;width:1px;background-image:linear-gradient(to bottom, rgba(234, 208, 154, 0), rgba(234, 208, 154, 1))}@keyframes svelte-1mttyji-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}");
+	append_styles(target, "svelte-n1c1kg", ".item-label-item.svelte-n1c1kg{position:absolute;z-index:0;transform:none;cursor:pointer;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:0}.item-label-item.visible.svelte-n1c1kg{opacity:1;-webkit-animation:svelte-n1c1kg-fadeIn .3s ease-in;animation:svelte-n1c1kg-fadeIn .3s ease-in}.item-label-item__text-wrap.svelte-n1c1kg::before{content:'';position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, .3);filter:blur(0.83333rem);z-index:-1}.item-label-item__text-wrap.svelte-n1c1kg{padding:0.3125rem 0.3125rem 0;position:absolute;height:1.04167rem;pointer-events:all;background-size:100% 100%;background-repeat:no-repeat;white-space:nowrap;line-height:0.52083rem;font-size:0.57292rem;font-weight:bold;color:#FFEAC0;transform:translate(-50%, 0);display:flex;justify-content:center;align-items:center}.item-label-item__text.svelte-n1c1kg{padding-bottom:0.20833rem;border-top:0 solid;border-left:0 solid;border-right:0 solid;border-bottom:1px solid;-o-border-image:linear-gradient(to right, rgba(234, 208, 154, 0), rgba(234, 208, 154, 100), rgba(234, 208, 154, 0)) 4.5 1 4.5;border-image:linear-gradient(to right, rgba(234, 208, 154, 0), rgba(234, 208, 154, 100), rgba(234, 208, 154, 0)) 4.5 1 4.5}.item-label-item__bar.svelte-n1c1kg{position:absolute;bottom:0;width:1px;background-image:linear-gradient(to bottom, rgba(234, 208, 154, 0), rgba(234, 208, 154, 1))}@-webkit-keyframes svelte-n1c1kg-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}@keyframes svelte-n1c1kg-fadeIn{from{opacity:0\n        }to{opacity:1\n        }}");
 }
 
 function create_fragment(ctx) {
@@ -49,12 +49,12 @@ function create_fragment(ctx) {
 			t0 = text(t0_value);
 			t1 = space();
 			div1 = element("div");
-			attr(span, "class", "item-label-item__text svelte-1mttyji");
-			attr(div0, "class", "item-label-item__text-wrap svelte-1mttyji");
+			attr(span, "class", "item-label-item__text svelte-n1c1kg");
+			attr(div0, "class", "item-label-item__text-wrap svelte-n1c1kg");
 			set_style(div0, "top", `-${/*itemLabel*/ ctx[0].strokeLength + 26}px`);
-			attr(div1, "class", "item-label-item__bar svelte-1mttyji");
+			attr(div1, "class", "item-label-item__bar svelte-n1c1kg");
 			set_style(div1, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
-			attr(div2, "class", div2_class_value = "" + (null_to_empty(classNames("item-label-item", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-1mttyji"));
+			attr(div2, "class", div2_class_value = "" + (null_to_empty(classNames("item-label-item", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-n1c1kg"));
 			set_style(div2, "z-index", /*itemLabel*/ ctx[0].zIndex, false);
 			set_style(div2, "transform", /*itemLabel*/ ctx[0].transform, false);
 		},
@@ -84,7 +84,7 @@ function create_fragment(ctx) {
 				set_style(div1, "height", `${/*itemLabel*/ ctx[0].strokeLength}px`);
 			}
 
-			if (dirty & /*itemLabel*/ 1 && div2_class_value !== (div2_class_value = "" + (null_to_empty(classNames("item-label-item", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-1mttyji"))) {
+			if (dirty & /*itemLabel*/ 1 && div2_class_value !== (div2_class_value = "" + (null_to_empty(classNames("item-label-item", { visible: /*itemLabel*/ ctx[0].visible })) + " svelte-n1c1kg"))) {
 				attr(div2, "class", div2_class_value);
 			}
 

package/libs/ModelRoomLabelPlugin/RoomLabelItem.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.49.0 */
+/* generated by Svelte v3.48.0 */
 import {
 	SvelteComponent,
 	append,
@@ -21,7 +21,7 @@ import {
 import { ROOM_LABEL_BG } from './Assets/roomLabelBg';
 
 function add_css(target) {
-	append_styles(target, "svelte-17nkflf", ".room-label-item.svelte-17nkflf{position:absolute;font-size:8px;z-index:0;transform:none;cursor:pointer;pointer-events:none;user-select:none}.room-label-item__text.svelte-17nkflf{position:absolute;left:0;top:-64px;transform:translate(-50%, 0);display:flex;justify-content:center;align-items:center;height:20px;min-width:32px;padding:0 6px;pointer-events:all;background-size:100% 100%;background-repeat:no-repeat;white-space:nowrap}.room-label-item__bar.svelte-17nkflf{position:absolute;top:-44px;height:48px;width:1px;background-image:linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))}.wide.svelte-17nkflf{font-size:10px}");
+	append_styles(target, "svelte-877671", ".room-label-item.svelte-877671{position:absolute;font-size:0.41667rem;z-index:0;transform:none;cursor:pointer;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.room-label-item__text.svelte-877671{position:absolute;left:0;top:-3.33333rem;transform:translate(-50%, 0);display:flex;justify-content:center;align-items:center;height:1.04167rem;min-width:1.66667rem;padding:0 0.3125rem;pointer-events:all;background-size:100% 100%;background-repeat:no-repeat;white-space:nowrap}.room-label-item__bar.svelte-877671{position:absolute;top:-2.29167rem;height:2.5rem;width:1px;background-image:linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))}.wide.svelte-877671{font-size:0.52083rem}");
 }
 
 function create_fragment(ctx) {
@@ -41,11 +41,11 @@ function create_fragment(ctx) {
 			t0 = text(t0_value);
 			t1 = space();
 			div0 = element("div");
-			attr(span, "class", "room-label-item__text svelte-17nkflf");
+			attr(span, "class", "room-label-item__text svelte-877671");
 			set_style(span, "background-image", "url(" + ROOM_LABEL_BG + ")");
 			toggle_class(span, "wide", /*roomLabel*/ ctx[0].name.length > 3);
-			attr(div0, "class", "room-label-item__bar svelte-17nkflf");
-			attr(div1, "class", "room-label-item svelte-17nkflf");
+			attr(div0, "class", "room-label-item__bar svelte-877671");
+			attr(div1, "class", "room-label-item svelte-877671");
 			set_style(div1, "z-index", /*roomLabel*/ ctx[0].zIndex, false);
 			set_style(div1, "transform", /*roomLabel*/ ctx[0].transform, false);
 			set_style(div1, "opacity", /*roomLabel*/ ctx[0].visible ? 1 : 0, false);

package/libs/ModelRoomLabelPlugin/RoomLabelItems.js

@@ -1,4 +1,4 @@
-/* generated by Svelte v3.49.0 */
+/* generated by Svelte v3.48.0 */
 import {
 	SvelteComponent,
 	add_render_callback,
@@ -29,7 +29,7 @@ import { Raycaster, Vector3 } from 'three';
 import RoomLabelItem from './RoomLabelItem';
 
 function add_css(target) {
-	append_styles(target, "svelte-185yvaa", ".room-labels-container.svelte-185yvaa{width:100%;height:100%;position:relative;color:#fff}");
+	append_styles(target, "svelte-9eg4zi", ".room-labels-container.svelte-9eg4zi{width:100%;height:100%;position:relative;color:#fff}");
 }
 
 function get_each_context(ctx, list, i) {
@@ -110,7 +110,7 @@ function create_fragment(ctx) {
 				each_blocks[i].c();
 			}
 
-			attr(div, "class", "room-labels-container svelte-185yvaa");
+			attr(div, "class", "room-labels-container svelte-9eg4zi");
 			add_render_callback(() => /*div_elementresize_handler*/ ctx[6].call(div));
 		},
 		m(target, anchor) {

package/libs/PanoCompassPlugin/Controller.d.ts

@@ -0,0 +1,84 @@
+import { Five } from '@realsee/five';
+import type { BaseOptions } from '../base/BasePlugin';
+import * as BasePlugin from '../base/BasePluginWithData';
+import type { EventMap, PanoCompassPluginData, PanoCompassPluginParameterType, PluginData, PluginServerData, State } from './typings';
+export declare class PanoCompassController extends BasePlugin.Controller<State, EventMap, PluginServerData, PluginData> {
+    /**
+     * 默认状态
+     */
+    state: State;
+    data?: PanoCompassPluginData;
+    private group;
+    private roomInfoInstance?;
+    private roomInfoWrapperInstance?;
+    private compassMeshTween?;
+    private compassMesh?;
+    private entryDoorMesh?;
+    constructor(five: Five, config?: PanoCompassPluginParameterType);
+    /**
+     * 启用插件，响应用户操作并展示UI
+     * @param options
+     */
+    enable(options?: Required<BaseOptions>): void;
+    /**
+     * 禁用插件，禁止响应用户操作并隐藏UI
+     * @param options
+     */
+    disable(options?: Required<BaseOptions>): void;
+    /**
+     * 展示UI
+     * @param options
+     * @returns
+     * @todo 需要考虑动画
+     */
+    show(options?: Required<BaseOptions>): Promise<void>;
+    /**
+     * 隐藏UI
+     * @param options
+     * @returns
+     * @todo 需要考虑动画
+     */
+    hide(options?: Required<BaseOptions>): Promise<void>;
+    setState(state: Partial<State>, options?: Required<BaseOptions>): void;
+    load(data: PluginServerData | PluginData, state?: State, userAction?: boolean): Promise<void>;
+    /**
+     * 销毁插件
+     * @todo 销毁贴图时，最好还是直接销毁贴图吧，this.compassMesh?.material.map 这种都是很深层的引用了。THREE 的建议我看也是自己去管理和销毁公共贴图。
+     */
+    dispose: () => void;
+    protected formatData(serverData: PluginServerData | PluginData): Promise<PluginData>;
+    /**
+     * 添加事件监听
+     */
+    private _addEventListener;
+    /**
+     * 移除事件监听
+     */
+    private _removeEventListener;
+    /**
+     * 启用，响应事件，展示UI
+     */
+    private _enable;
+    /**
+     * 禁用，不响应事件，不展示UI
+     */
+    private _disable;
+    /**
+     * 展示UI
+     */
+    private _toggleVisible;
+    private _clearCompassIfNeed;
+    private _clearEntryDoorIfNeed;
+    /**
+     * 初始化
+     * @todo 逻辑需要细分
+     */
+    private init;
+    private loadCompassMesh;
+    private loadEntryDoorMesh;
+    private loadRoomInfo;
+    private onFivePanoWillArrive;
+    private onFivePanoArrived;
+    private onFiveCameraDirectionUpdate;
+    private onFiveModeChange;
+}