@realsee/dnalogel 2.0.0-alpha.35 → 2.0.0-alpha.38

package/libs/PanoRulerProPlugin/RulerItems.js

@@ -0,0 +1,377 @@
+/* generated by Svelte v3.47.0 */
+import {
+	SvelteComponent,
+	check_outros,
+	create_component,
+	destroy_component,
+	destroy_each,
+	detach,
+	element,
+	group_outros,
+	init,
+	insert,
+	mount_component,
+	safe_not_equal,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+import { Five } from '@realsee/five';
+import { nextFrame } from '../shared-utils/animationFrame';
+import equal from '../shared-utils/equal';
+import { intersectionOfLine } from '../shared-utils/math/planimetry';
+import throttle from '../shared-utils/throttle';
+import { onDestroy, onMount } from 'svelte';
+import { Vector3 } from 'three';
+import RulerItem from './RulerItem';
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[16] = list[i];
+	return child_ctx;
+}
+
+// (206:2) {#each rulerItemProp as itemData}
+function create_each_block(ctx) {
+	let ruleritem;
+	let current;
+
+	ruleritem = new RulerItem({
+			props: { rulerItemProp: /*itemData*/ ctx[16] }
+		});
+
+	return {
+		c() {
+			create_component(ruleritem.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(ruleritem, target, anchor);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const ruleritem_changes = {};
+			if (dirty & /*rulerItemProp*/ 1) ruleritem_changes.rulerItemProp = /*itemData*/ ctx[16];
+			ruleritem.$set(ruleritem_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(ruleritem.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(ruleritem.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(ruleritem, detaching);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div;
+	let current;
+	let each_value = /*rulerItemProp*/ ctx[0];
+	let each_blocks = [];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		each_blocks[i] = create_each_block(get_each_context(ctx, each_value, i));
+	}
+
+	const out = i => transition_out(each_blocks[i], 1, 1, () => {
+		each_blocks[i] = null;
+	});
+
+	return {
+		c() {
+			div = element("div");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(div, null);
+			}
+
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*rulerItemProp*/ 1) {
+				each_value = /*rulerItemProp*/ ctx[0];
+				let i;
+
+				for (i = 0; i < each_value.length; i += 1) {
+					const child_ctx = get_each_context(ctx, each_value, i);
+
+					if (each_blocks[i]) {
+						each_blocks[i].p(child_ctx, dirty);
+						transition_in(each_blocks[i], 1);
+					} else {
+						each_blocks[i] = create_each_block(child_ctx);
+						each_blocks[i].c();
+						transition_in(each_blocks[i], 1);
+						each_blocks[i].m(div, null);
+					}
+				}
+
+				group_outros();
+
+				for (i = each_value.length; i < each_blocks.length; i += 1) {
+					out(i);
+				}
+
+				check_outros();
+			}
+		},
+		i(local) {
+			if (current) return;
+
+			for (let i = 0; i < each_value.length; i += 1) {
+				transition_in(each_blocks[i]);
+			}
+
+			current = true;
+		},
+		o(local) {
+			each_blocks = each_blocks.filter(Boolean);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				transition_out(each_blocks[i]);
+			}
+
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			destroy_each(each_blocks, detaching);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	var _a, _b, _c, _d;
+	let { five } = $$props;
+	let { rulerDatas } = $$props;
+	let { options } = $$props;
+	let rulerItemProp = [];
+
+	const canvasWidth = ((_b = (_a = five.getElement()) === null || _a === void 0
+	? void 0
+	: _a.parentElement) === null || _b === void 0
+	? void 0
+	: _b.clientWidth) || 0;
+
+	const canvasHeight = ((_d = (_c = five.getElement()) === null || _c === void 0
+	? void 0
+	: _c.parentElement) === null || _d === void 0
+	? void 0
+	: _d.clientHeight) || 0;
+
+	const getRuleScreenIntr = (startPoint, endPoint) => {
+		const screenLines = [
+			[{ x: 0, y: 0 }, { x: canvasWidth, y: 0 }],
+			[{ x: 0, y: 0 }, { x: 0, y: canvasHeight }],
+			[{ x: canvasWidth, y: 0 }, { x: canvasWidth, y: canvasHeight }],
+			[{ x: 0, y: canvasHeight }, { x: canvasWidth, y: canvasHeight }]
+		];
+
+		const intr = [];
+
+		for (let i = 0; i < screenLines.length; i++) {
+			const result = intersectionOfLine([startPoint, endPoint], [screenLines[i][0], screenLines[i][1]], true);
+			if (result) intr.push(result);
+		}
+
+		if (intr.length === 0) return false; else {
+			return intr;
+		}
+	};
+
+	const getPosition = (start, end) => {
+		const startPoint = start.clone().project(five.camera);
+		const startLeft = (startPoint.x + 1) / 2 * canvasWidth;
+		const startTop = (-startPoint.y + 1) / 2 * canvasHeight;
+		const endPoint = end.clone().project(five.camera);
+		const endLeft = (endPoint.x + 1) / 2 * canvasWidth;
+		const endTop = (-endPoint.y + 1) / 2 * canvasHeight;
+		const distance = Math.sqrt(Math.pow(endLeft - startLeft, 2) + Math.pow(endTop - startTop, 2));
+
+		return {
+			startLeft,
+			startTop,
+			endLeft,
+			endTop,
+			distance
+		};
+	};
+
+	const getPositionAndVisible = (start, end, visibleOrigin) => {
+		const cameraPosition = five.camera.position;
+		const cameraDirection = five.camera.getWorldDirection(new Vector3());
+		const startAngle = start.clone().sub(cameraPosition).normalize().angleTo(cameraDirection);
+		const endAngle = end.clone().sub(cameraPosition).normalize().angleTo(cameraDirection);
+		const ruleLength = start.distanceTo(end);
+		const midPoint = end.clone().sub(end.clone().sub(start).divide(new Vector3(2, 2, 2)));
+		const disFromCameraToMid = midPoint.distanceTo(cameraPosition);
+		const { startLeft, startTop, endLeft, endTop, distance } = getPosition(start, end);
+		const rad = Math.PI / 2 - Math.atan2(endLeft - startLeft, startTop - endTop);
+		const deg = -(rad / Math.PI) * 180;
+		let visible = true;
+		if (!visibleOrigin) visible = false;
+
+		// 只显示拐点相连的线
+		if (!equal(start, visibleOrigin) && !equal(end, visibleOrigin)) {
+			visible = false;
+		}
+
+		// 线小于0.3m隐藏
+		if (ruleLength < 0.3) {
+			visible = false;
+		}
+
+		if (startAngle > Math.PI / 2) {
+			visible = false;
+		}
+
+		if (endAngle > Math.PI / 2) {
+			visible = false;
+		}
+
+		if (disFromCameraToMid / ruleLength > 8) {
+			visible = false;
+		}
+
+		let labelOffset = 50;
+		let visibleLength = distance;
+		const intr = getRuleScreenIntr({ x: ~~startLeft, y: ~~startTop }, { x: ~~endLeft, y: ~~endTop });
+
+		if (intr && intr.length === 1) {
+			if (equal(start, visibleOrigin)) {
+				visibleLength = Math.sqrt(Math.pow(intr[0].x - startLeft, 2) + Math.pow(intr[0].y - startTop, 2));
+				labelOffset = visibleLength / distance * 50;
+			} else if (equal(end, visibleOrigin)) {
+				visibleLength = Math.sqrt(Math.pow(intr[0].x - endLeft, 2) + Math.pow(intr[0].y - endTop, 2));
+				labelOffset = 100 - visibleLength / distance * 50;
+			}
+		}
+
+		if (intr && intr.length === 2) {
+			const middlePoint = {
+				x: (intr[0].x + intr[1].x) / 2,
+				y: (intr[0].y + intr[1].y) / 2
+			};
+
+			const distanceFromStart = Math.sqrt(Math.pow(middlePoint.x - startLeft, 2) + Math.pow(middlePoint.y - startTop, 2));
+			labelOffset = distanceFromStart / distance * 100;
+		}
+
+		return {
+			startLeft,
+			startTop,
+			distance,
+			deg,
+			visible,
+			labelOffset,
+			ruleLength
+		};
+	};
+
+	const updatePanoRulerData = () => {
+		const panoIndex = five.panoIndex;
+		const rulerData = rulerDatas.find(data => data.panoIndex === panoIndex);
+		if (!rulerData) return $$invalidate(0, rulerItemProp = []);
+
+		// 非全景模式下隐藏所有标尺
+		if (five.currentMode !== Five.Mode.Panorama) return $$invalidate(0, rulerItemProp = []);
+
+		const cameraPosition = five.camera.position;
+		const cameraDirection = five.camera.getWorldDirection(new Vector3());
+		const startPoints = rulerData.lines.map(v => new Vector3(v.start[0], -v.start[1], -v.start[2]));
+		const endPoints = rulerData.lines.map(v => new Vector3(v.end[0], -v.end[1], -v.end[2]));
+
+		// 可以看到的角度最小的拐点
+		const [visibleOrigin] = startPoints.concat(endPoints).sort((pointA, pointB) => {
+			const angleA = pointA.clone().setY(0).sub(cameraPosition).normalize().angleTo(cameraDirection.clone().setY(0));
+			const angleB = pointB.clone().setY(0).sub(cameraPosition).normalize().angleTo(cameraDirection.clone().setY(0));
+			return angleA - angleB;
+		});
+
+		const data = rulerData.lines.map(line => {
+			var _a, _b;
+			const start = line.start;
+			const end = line.end;
+			const { startLeft, startTop, distance, deg, visible, labelOffset, ruleLength } = getPositionAndVisible(new Vector3(start[0], -start[1], -start[2]), new Vector3(end[0], -end[1], -end[2]), visibleOrigin);
+			const children = [];
+
+			if (line.children && ((_a = line.children) === null || _a === void 0
+			? void 0
+			: _a.length) > 0) {
+				(_b = line.children) === null || _b === void 0
+				? void 0
+				: _b.forEach(l => {
+						const start = l.start;
+						const end = l.end;
+						const { distance } = getPosition(new Vector3(start[0], -start[1], -start[2]), new Vector3(end[0], -end[1], -end[2]));
+						children.push({ width: distance, state: l.state });
+					});
+			}
+
+			return {
+				width: distance,
+				left: startLeft,
+				top: startTop,
+				rotateDeg: deg,
+				state: line.state,
+				children,
+				labelOffset,
+				visible,
+				labelElement: options.distanceText(ruleLength)
+			};
+		});
+
+		$$invalidate(0, rulerItemProp = data);
+	};
+
+	const nextFrameFreshRule = () => nextFrame(updatePanoRulerData);
+	const throttleFreshRule = throttle(updatePanoRulerData, 80);
+
+	onMount(() => {
+		updatePanoRulerData();
+		five.on('panoArrived', updatePanoRulerData);
+		five.on('modeChange', updatePanoRulerData);
+		five.on('cameraDirectionUpdate', nextFrameFreshRule);
+		five.on('movingToPano', nextFrameFreshRule);
+		five.on('mouseWheel', () => throttleFreshRule());
+		five.on('pinchGesture', () => throttleFreshRule());
+	});
+
+	onDestroy(() => {
+		five.off('panoArrived', updatePanoRulerData);
+		five.off('modeChange', updatePanoRulerData);
+		five.off('cameraDirectionUpdate', nextFrameFreshRule);
+		five.off('movingToPano', nextFrameFreshRule);
+		five.off('mouseWheel', () => throttleFreshRule());
+		five.off('pinchGesture', () => throttleFreshRule());
+	});
+
+	$$self.$$set = $$props => {
+		if ('five' in $$props) $$invalidate(1, five = $$props.five);
+		if ('rulerDatas' in $$props) $$invalidate(2, rulerDatas = $$props.rulerDatas);
+		if ('options' in $$props) $$invalidate(3, options = $$props.options);
+	};
+
+	return [rulerItemProp, five, rulerDatas, options];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { five: 1, rulerDatas: 2, options: 3 });
+	}
+}
+
+export default Component;

package/libs/PanoRulerProPlugin/index.d.ts

@@ -0,0 +1,8 @@
+import type { FivePlugin } from '@realsee/five';
+import type { PanoRulerProPluginParameterType, PanoRulerProPluginExportType } from './typings';
+/**
+ * 全景标尺插件
+ */
+export declare const PanoRulerProPlugin: FivePlugin<PanoRulerProPluginParameterType, PanoRulerProPluginExportType>;
+export default PanoRulerProPlugin;
+export type { PanoRulerProPluginParameterType, PanoRulerProPluginExportType, PanoRulerProPluginOptions, PanoRulerProPluginState, } from './typings';

package/libs/PanoRulerProPlugin/index.js

@@ -0,0 +1,8 @@
+import Controller from './Controller';
+/**
+ * 全景标尺插件
+ */
+export const PanoRulerProPlugin = (five, params) => {
+    return new Controller(five, params);
+};
+export default PanoRulerProPlugin;

package/libs/PanoRulerProPlugin/typings.d.ts

@@ -0,0 +1,46 @@
+export declare type PanoRulerProPluginDatas = {
+    data: PanoRulerProPluginData[];
+    version: number;
+};
+export interface PanoRulerProPluginData {
+    panoIndex: number;
+    roomName: string;
+    lines: Line[];
+}
+interface Line {
+    start: number[];
+    end: number[];
+    state: boolean;
+    children?: Line[];
+}
+export interface PanoRulerProPluginOptions {
+    distanceText?: (distance: number) => string;
+    className?: string;
+}
+export interface PanoRulerProPluginState {
+    enabled: boolean;
+    loaded: boolean;
+    options: PanoRulerProPluginOptions;
+}
+export interface PanoRulerProPluginParameterType {
+    data?: PanoRulerProPluginDatas;
+    options?: PanoRulerProPluginOptions;
+}
+export interface PanoRulerProPluginExportType {
+    enable: () => void;
+    disable: () => void;
+    load: (serverData: PanoRulerProPluginDatas) => void;
+    state: PanoRulerProPluginState;
+}
+export interface RulerItemProp {
+    width: number;
+    left: number;
+    top: number;
+    rotateDeg: number;
+    state: boolean;
+    children: any[];
+    labelOffset: number;
+    labelElement: string;
+    visible: boolean;
+}
+export {};

package/libs/base/BasePlugin.d.ts

@@ -0,0 +1,100 @@
+import { Five, Subscribe } from '@realsee/five';
+/**
+ * 基本属性字段
+ */
+interface State {
+    /**
+     * 插件是否启用
+     */
+    enabled: boolean;
+    /**
+     * 插件UI是否展示
+     */
+    visible?: boolean;
+    /**
+     * 插件的配置项
+     */
+    config?: unknown;
+}
+interface BaseOptions {
+    /** 是否是用户行为 */
+    userAction?: boolean;
+}
+/**
+ * 插件基本事件
+ */
+declare type EventMap<PluginState> = {
+    /**
+     * 插件被销毁
+     */
+    dispose: () => void;
+    /**
+     * 插件状态变化
+     * @param params.state      最新的State
+     * @param params.prevState  上一个State
+     * @param params.userAction 是否是用户触发
+     */
+    stateChange: (params: {
+        state: PluginState;
+        prevState?: PluginState;
+        userAction: boolean;
+    }) => void;
+};
+/**
+ * plugin 的基本控制器
+ */
+declare abstract class Controller<PluginState extends State, PluginEventMap extends EventMap<PluginState>> {
+    five: Five;
+    /**
+     * 插件事件钩子
+     */
+    hooks: Subscribe<PluginEventMap>;
+    /**
+     * 当前状态
+     * @description
+     * ```text
+     * 可以通过 plugin.state 和 plugin.setState 来获取和设置。
+     * 通过 state 设置后，plugin 会通过合适的动画运动来达到设置的效果。
+     * 来迎合一些通过数据驱动的场景。
+     * ```
+     */
+    abstract state: PluginState;
+    constructor(five: Five);
+    /**
+     * 获取当前的插件状态，如果当初插件内存在需要通过动画变更的 state 值，则通过此方法可以得到中间状态
+     */
+    getCurrentState(): PluginState;
+    /**
+     * 插件自身DOM添加到父容器
+     * @param wrapper
+     */
+    appendTo?(wrapper: Element): void;
+    /**
+     * 展示UI
+     */
+    show?(options?: BaseOptions): Promise<void>;
+    /**
+     * 隐藏UI
+     */
+    hide?(options?: BaseOptions): Promise<void>;
+    /**
+     * 启用插件，让插件能够响应交互
+     */
+    abstract enable(options?: BaseOptions): void;
+    /**
+     * 禁用插件，让插件停止响应交互
+     */
+    abstract disable(options?: BaseOptions): void;
+    /**
+     * 插件进行销毁
+     */
+    abstract dispose(): void;
+    /**
+     * 设置state
+     * @param state 插件的目标状态
+     * @param options 配置项
+     */
+    abstract setState(state: Partial<PluginState>, options?: BaseOptions): void;
+}
+export type { State, EventMap, BaseOptions };
+export { Controller };

package/libs/base/BasePlugin.js

@@ -0,0 +1,31 @@
+import { Subscribe } from '@realsee/five';
+/**
+ * plugin 的基本控制器
+ */
+class Controller {
+    constructor(five) {
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        /**
+         * 插件事件钩子
+         */
+        Object.defineProperty(this, "hooks", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subscribe()
+        });
+        this.five = five;
+    }
+    /**
+     * 获取当前的插件状态，如果当初插件内存在需要通过动画变更的 state 值，则通过此方法可以得到中间状态
+     */
+    getCurrentState() {
+        return this.state;
+    }
+}
+export { Controller };

package/libs/base/BasePluginWithData.d.ts

@@ -0,0 +1,34 @@
+import * as BasePlugin from './BasePlugin';
+declare type State = BasePlugin.State;
+interface EventMap<PluginState, PluginData> extends BasePlugin.EventMap<PluginState> {
+    /** 数据变更 */
+    dataChange: (data: PluginData, prevData?: PluginData) => void;
+    /** 数据加载完成 */
+    dataLoaded: (data: PluginData) => void;
+}
+/**
+ * 插件的基础数据
+ */
+interface ServerData {
+    /**
+     * 数据版本
+     */
+    version: number;
+    /**
+     * 数据
+     */
+    data?: unknown;
+}
+declare abstract class Controller<PluginState extends State, PluginEventMap extends EventMap<PluginState, PluginData>, PluginServerData extends ServerData, PluginData> extends BasePlugin.Controller<PluginState, PluginEventMap> {
+    protected abstract data?: PluginData;
+    /**
+     * 加载插件依赖数据
+     * @param serverData 插件数据
+     * @param state 插件 State
+     */
+    abstract load(serverData: PluginServerData, state?: PluginState, userAction?: boolean): Promise<void>;
+    /** 把原始数据转化为插件数据 */
+    protected abstract formatData?(serverData: PluginServerData): Promise<PluginData>;
+}
+export type { State, EventMap, ServerData };
+export { Controller };

package/libs/base/BasePluginWithData.js

@@ -0,0 +1,4 @@
+import * as BasePlugin from './BasePlugin';
+class Controller extends BasePlugin.Controller {
+}
+export { Controller };

package/libs/floorplan/Components/Compass.js

@@ -20,10 +20,10 @@ import {
 import { COMPASS_IMAGE } from '../Assets/compass';
 
 function add_css(target) {
-	append_styles(target, "svelte-5l80pv", ".floorplan-plugin__compass.svelte-5l80pv{position:absolute;left:50%;top:-46px;width:231px;height:41px;will-change:opacity;transform-origin:center 184px}.floorplan-plugin__compass-image.svelte-5l80pv{width:100%;height:100%;position:absolute;left:0;top:0;opacity:0.1;background-repeat:no-repeat;background-size:100% 100%}.floorplan-plugin__compass-text.svelte-5l80pv{position:absolute;left:50%;top:15px;transform:translateX(-50%);opacity:0.2;font-weight:bold;font-size:10px;color:#fff}");
+	append_styles(target, "svelte-p7yk9v", ".floorplan-plugin__compass.svelte-p7yk9v{position:absolute;left:50%;top:-46px;width:231px;height:41px;will-change:opacity;transform-origin:center 184px}.floorplan-plugin__compass-image.svelte-p7yk9v{width:100%;height:100%;position:absolute;left:0;top:0;opacity:0.1;background-repeat:no-repeat;background-size:100% 100%}.floorplan-plugin__compass-text.svelte-p7yk9v{position:absolute;left:50%;top:15px;transform:translateX(-50%);opacity:0.2;font-weight:bold;font-size:10px;color:#fff}");
 }
 
-// (14:0) {#if canShowCompass}
+// (14:0) {#if canCompassShow}
 function create_if_block(ctx) {
 	let div1;
 	let div0;
@@ -38,11 +38,11 @@ function create_if_block(ctx) {
 			t0 = space();
 			span = element("span");
 			t1 = text(/*northDesc*/ ctx[0]);
-			attr(div0, "class", "floorplan-plugin__compass-image svelte-5l80pv");
+			attr(div0, "class", "floorplan-plugin__compass-image svelte-p7yk9v");
 			set_style(div0, "background-image", `url(${COMPASS_IMAGE})`);
-			attr(span, "class", "floorplan-plugin__compass-text svelte-5l80pv");
-			attr(div1, "class", "floorplan-plugin__compass svelte-5l80pv");
-			set_style(div1, "transform", /*compassTransformStyle*/ ctx[1], false);
+			attr(span, "class", "floorplan-plugin__compass-text svelte-p7yk9v");
+			attr(div1, "class", "floorplan-plugin__compass svelte-p7yk9v");
+			set_style(div1, "transform", /*compassTransformStyle*/ ctx[2], false);
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
@@ -62,7 +62,7 @@ function create_if_block(ctx) {
 
 function create_fragment(ctx) {
 	let if_block_anchor;
-	let if_block = /*canShowCompass*/ ctx[2] && create_if_block(ctx);
+	let if_block = /*canCompassShow*/ ctx[1] && create_if_block(ctx);
 
 	return {
 		c() {
@@ -74,7 +74,7 @@ function create_fragment(ctx) {
 			insert(target, if_block_anchor, anchor);
 		},
 		p(ctx, [dirty]) {
-			if (/*canShowCompass*/ ctx[2]) if_block.p(ctx, dirty);
+			if (/*canCompassShow*/ ctx[1]) if_block.p(ctx, dirty);
 		},
 		i: noop,
 		o: noop,
@@ -98,16 +98,16 @@ function instance($$self, $$props, $$invalidate) {
 	? void 0
 	: _a.northRad;
 
-	const rotate = typeof northRad !== 'number' ? 0 : rad2Deg(northRad);
+	const canCompassShow = typeof northRad === 'number';
+	const rotate = !northRad ? 0 : rad2Deg(northRad);
 	const compassTransformStyle = `translateX(-50%) translateZ(10px) rotate(${-rotate + 90}deg)`;
-	const canShowCompass = typeof northRad === 'number';
 
 	$$self.$$set = $$props => {
 		if ('floorplanData' in $$props) $$invalidate(3, floorplanData = $$props.floorplanData);
 		if ('northDesc' in $$props) $$invalidate(0, northDesc = $$props.northDesc);
 	};
 
-	return [northDesc, compassTransformStyle, canShowCompass, floorplanData];
+	return [northDesc, canCompassShow, compassTransformStyle, floorplanData];
 }
 
 class Component extends SvelteComponent {