@realsee/dnalogel 2.0.0-alpha.1 → 2.0.0-alpha.12

package/libs/floorplan/ModelFloorplanPlugin/Components/RuleLabels/RuleLabels.js

@@ -0,0 +1,219 @@
+/* generated by Svelte v3.47.0 */
+import {
+	SvelteComponent,
+	assign,
+	attr,
+	check_outros,
+	create_component,
+	destroy_component,
+	detach,
+	element,
+	empty,
+	get_spread_update,
+	group_outros,
+	init,
+	insert,
+	mount_component,
+	outro_and_destroy_block,
+	safe_not_equal,
+	transition_in,
+	transition_out,
+	update_keyed_each
+} from "svelte/internal";
+
+import RuleItem from './RuleItem';
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[7] = list[i][0];
+	child_ctx[8] = list[i][1];
+	return child_ctx;
+}
+
+// (12:2) {#each ruleLabelArray as [type, data] (type)}
+function create_each_block(key_1, ctx) {
+	let first;
+	let ruleitem;
+	let current;
+
+	const ruleitem_spread_levels = [
+		{
+			type: /*type*/ ctx[7],
+			data: /*data*/ ctx[8],
+			pxmm: /*pxmm*/ ctx[0],
+			bounding: /*bounding*/ ctx[2]
+		}
+	];
+
+	let ruleitem_props = {};
+
+	for (let i = 0; i < ruleitem_spread_levels.length; i += 1) {
+		ruleitem_props = assign(ruleitem_props, ruleitem_spread_levels[i]);
+	}
+
+	ruleitem = new RuleItem({ props: ruleitem_props });
+
+	return {
+		key: key_1,
+		first: null,
+		c() {
+			first = empty();
+			create_component(ruleitem.$$.fragment);
+			this.first = first;
+		},
+		m(target, anchor) {
+			insert(target, first, anchor);
+			mount_component(ruleitem, target, anchor);
+			current = true;
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+
+			const ruleitem_changes = (dirty & /*ruleLabelArray, pxmm, bounding*/ 7)
+			? get_spread_update(ruleitem_spread_levels, [
+					{
+						type: /*type*/ ctx[7],
+						data: /*data*/ ctx[8],
+						pxmm: /*pxmm*/ ctx[0],
+						bounding: /*bounding*/ ctx[2]
+					}
+				])
+			: {};
+
+			ruleitem.$set(ruleitem_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(ruleitem.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(ruleitem.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(first);
+			destroy_component(ruleitem, detaching);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div;
+	let each_blocks = [];
+	let each_1_lookup = new Map();
+	let current;
+	let each_value = /*ruleLabelArray*/ ctx[1];
+	const get_key = ctx => /*type*/ ctx[7];
+
+	for (let i = 0; i < each_value.length; i += 1) {
+		let child_ctx = get_each_context(ctx, each_value, i);
+		let key = get_key(child_ctx);
+		each_1_lookup.set(key, each_blocks[i] = create_each_block(key, child_ctx));
+	}
+
+	return {
+		c() {
+			div = element("div");
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].c();
+			}
+
+			attr(div, "class", "floorplan-plugin__rulelabels");
+		},
+		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 & /*ruleLabelArray, pxmm, bounding*/ 7) {
+				each_value = /*ruleLabelArray*/ ctx[1];
+				group_outros();
+				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, outro_and_destroy_block, create_each_block, null, get_each_context);
+				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) {
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				transition_out(each_blocks[i]);
+			}
+
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].d();
+			}
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let bounding;
+	let ruleLabelData;
+	let ruleLabelDataKeys;
+	let ruleLabelArray;
+	let { pxmm } = $$props;
+	let { floorIndex } = $$props;
+	let { floorplanData } = $$props;
+
+	$$self.$$set = $$props => {
+		if ('pxmm' in $$props) $$invalidate(0, pxmm = $$props.pxmm);
+		if ('floorIndex' in $$props) $$invalidate(3, floorIndex = $$props.floorIndex);
+		if ('floorplanData' in $$props) $$invalidate(4, floorplanData = $$props.floorplanData);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*floorplanData*/ 16) {
+			$: $$invalidate(2, bounding = floorplanData.bounding);
+		}
+
+		if ($$self.$$.dirty & /*floorplanData, floorIndex*/ 24) {
+			$: $$invalidate(5, ruleLabelData = floorplanData.floorDatas[floorIndex].rules);
+		}
+
+		if ($$self.$$.dirty & /*ruleLabelData*/ 32) {
+			$: $$invalidate(6, ruleLabelDataKeys = Object.keys(ruleLabelData));
+		}
+
+		if ($$self.$$.dirty & /*ruleLabelDataKeys, ruleLabelData*/ 96) {
+			$: $$invalidate(1, ruleLabelArray = ruleLabelDataKeys.map(key => [key, ruleLabelData[key]]));
+		}
+	};
+
+	return [
+		pxmm,
+		ruleLabelArray,
+		bounding,
+		floorIndex,
+		floorplanData,
+		ruleLabelData,
+		ruleLabelDataKeys
+	];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { pxmm: 0, floorIndex: 3, floorplanData: 4 });
+	}
+}
+
+export default Component;

package/libs/floorplan/ModelFloorplanPlugin/Controller.d.ts

@@ -2,7 +2,9 @@ import { Five, Subscribe } from '@realsee/five';
 import type { FloorplanEventHandlers } from './typings/events.type';
 import type { FloorplanServerData } from '../typings/floorplanServerData';
 import type { FloorplanRoomItem } from '../typings/floorplanData';
+import { FLOOR_PLAN_ATTACHED_TO } from '../constant';
 export interface ModelFloorplanParameterType {
+    northDesc?: string;
     selector?: string | Element;
     scale?: number;
     modelOpacity?: number;
@@ -12,6 +14,7 @@ export interface ModelFloorplanParameterType {
     ruleLabelsEnable?: boolean;
     roomLabelsEnable?: boolean;
     cameraImageUrl?: string;
+    attachedTo?: FLOOR_PLAN_ATTACHED_TO;
     getLabelElement?: (room: FloorplanRoomItem) => Element | null;
 }
 export declare type ModelFloorplanPluginsConfigs = Omit<ModelFloorplanParameterType, 'selector' | 'scale'>;

package/libs/floorplan/ModelFloorplanPlugin/Controller.js

@@ -1,4 +1,4 @@
-import Main from './Components/Main.svelte';
+import Main from './Components/Main';
 import to from '../../shared-utils/to';
 import formatData from '../utils/formatData';
 import equal from '../../shared-utils/equal';
@@ -53,7 +53,6 @@ export default class ModelFloorplanPluginController {
         this.five.model.loaded ? this.handleModelLoaded() : five.once('modelLoaded', this.handleModelLoaded);
         five.once('dispose', this.dispose);
         five.on('modeChange', this.handleModeChange);
-        five.on('panGesture', this.handlePanGesture);
         five.on('panoArrived', this.handlePanoArrived);
         five.on('wantsChangeMode', this.handleWantsChangeMode);
         five.on('wantsInteriaPan', this.handleWantsInteriaPan);
@@ -98,7 +97,8 @@ export default class ModelFloorplanPluginController {
         const width = max.x - min.x;
         const height = max.y - min.y;
         // 每毫米对应的 px 值
-        const pxmm = getPxmm(this.five, this.wrapper);
+        const options = this.configs.attachedTo ? { attachedTo: this.configs.attachedTo } : undefined;
+        const pxmm = getPxmm(this.five, this.wrapper, this.floorIndex, options);
         const _width = Math.ceil(width * pxmm);
         const _height = Math.ceil(height * pxmm);
         if (this.size.width === _width && this.size.height === _height)
@@ -225,6 +225,7 @@ export default class ModelFloorplanPluginController {
         if (shownFloor === null)
             return;
         this.floorIndex = shownFloor;
+        this.updateSize();
         this.render();
     };
     handleModelLoaded = () => {
@@ -325,8 +326,9 @@ export default class ModelFloorplanPluginController {
             return;
         if (this.size.width === 0)
             return;
-        const { hoverEnable, cameraImageUrl, getLabelElement, roomLabelsEnable, compassEnable, ruleLabelsEnable } = this.configs;
+        const { northDesc, hoverEnable, cameraImageUrl, getLabelElement, roomLabelsEnable, compassEnable, ruleLabelsEnable } = this.configs;
         const props = {
+            northDesc: northDesc ?? '北',
             five: this.five,
             pxmm: this.pxmm,
             cameraImageUrl,

package/libs/floorplan/PanoFloorplanRadarPlugin/Components/Camera.js

@@ -0,0 +1,152 @@
+/* generated by Svelte v3.47.0 */
+import {
+	SvelteComponent,
+	append,
+	append_styles,
+	attr,
+	detach,
+	element,
+	init,
+	insert,
+	noop,
+	safe_not_equal,
+	set_style
+} from "svelte/internal";
+
+import { onMount, onDestroy } from 'svelte';
+import { CAMERA_IMAGE } from '../../Assets/camera';
+import throttle from '../../../shared-utils/throttle';
+
+function add_css(target) {
+	append_styles(target, "svelte-o7uo2v", ".plugin-radar__camera-wrapper.svelte-o7uo2v{width:100%;height:100%;position:absolute;pointer-events:none}.plugin-radar__camera-position.svelte-o7uo2v{position:absolute;left:0;top:0;width:0;height:0;transform:none;pointer-events:none;transition:transform 1s linear}.plugin-radar__camera-rotate.svelte-o7uo2v{position:absolute;left:-15px;top:-15px;width:17px;height:17px;transform-origin:15px 15px;transform:rotate(45deg);background-repeat:no-repeat;background-size:100%}");
+}
+
+function create_fragment(ctx) {
+	let div2;
+	let div1;
+	let div0;
+
+	return {
+		c() {
+			div2 = element("div");
+			div1 = element("div");
+			div0 = element("div");
+			attr(div0, "class", "plugin-radar__camera-rotate svelte-o7uo2v");
+			set_style(div0, "background-image", "url(" + (/*cameraImageUrl*/ ctx[0] || CAMERA_IMAGE) + ")");
+			set_style(div0, "transform", /*rotateTransform*/ ctx[1], false);
+			attr(div1, "class", "plugin-radar__camera-position svelte-o7uo2v");
+			set_style(div1, "transform", /*positionTransform*/ ctx[2], false);
+			attr(div2, "class", "plugin-radar__camera-wrapper svelte-o7uo2v");
+		},
+		m(target, anchor) {
+			insert(target, div2, anchor);
+			append(div2, div1);
+			append(div1, div0);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*cameraImageUrl*/ 1) {
+				set_style(div0, "background-image", "url(" + (/*cameraImageUrl*/ ctx[0] || CAMERA_IMAGE) + ")");
+			}
+
+			if (dirty & /*rotateTransform*/ 2) {
+				set_style(div0, "transform", /*rotateTransform*/ ctx[1], false);
+			}
+
+			if (dirty & /*positionTransform*/ 4) {
+				set_style(div1, "transform", /*positionTransform*/ ctx[2], false);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div2);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { five } = $$props;
+	let { pxmm } = $$props;
+	let { floorplanData } = $$props;
+	let { cameraImageUrl } = $$props;
+
+	/** 获取相机在当前 Five 状态下的位移 */
+	function getCameraPositionTransform(panoIndex) {
+		const observer = floorplanData.observers[panoIndex];
+		const bounding = floorplanData.bounding;
+		const clientWidth = (bounding.max.x - bounding.min.x) * pxmm;
+		const clientHeight = (bounding.max.y - bounding.min.y) * pxmm;
+		if (!observer) return '';
+		const left = Math.floor(observer.positionInImage.x * clientWidth);
+		const top = Math.floor(observer.positionInImage.y * clientHeight);
+		return `translate(${left}px, ${top}px)`;
+	}
+
+	/** 获取相机在当前 Five 状态下的旋转 */
+	function getCameraRotationTransform() {
+		const { longitude } = five.getCurrentState();
+
+		// 为什么要加 45 ==> 因为 UI 给的图初始角度是 -45
+		const rotate = Math.floor(longitude / Math.PI * 180) * -1 + 45;
+
+		return `rotate(${rotate}deg)`;
+	}
+
+	const changePosition = panoIndex => {
+		$$invalidate(2, positionTransform = getCameraPositionTransform(panoIndex));
+	};
+
+	const changeRotate = throttle(
+		() => {
+			$$invalidate(1, rotateTransform = getCameraRotationTransform());
+		},
+		1000 / 60
+	);
+
+	// 初始状态，不能等 mount 之后再计算，那样第一次 camera 展示的时候也会有动画
+	let rotateTransform = getCameraRotationTransform();
+
+	let positionTransform = getCameraPositionTransform(five.getCurrentState().panoIndex);
+
+	onMount(() => {
+		five.on('panoWillArrive', changePosition);
+		five.on('cameraDirectionUpdate', changeRotate);
+	});
+
+	onDestroy(() => {
+		five.off('panoWillArrive', changePosition);
+		five.off('cameraDirectionUpdate', changeRotate);
+	});
+
+	$$self.$$set = $$props => {
+		if ('five' in $$props) $$invalidate(3, five = $$props.five);
+		if ('pxmm' in $$props) $$invalidate(4, pxmm = $$props.pxmm);
+		if ('floorplanData' in $$props) $$invalidate(5, floorplanData = $$props.floorplanData);
+		if ('cameraImageUrl' in $$props) $$invalidate(0, cameraImageUrl = $$props.cameraImageUrl);
+	};
+
+	return [cameraImageUrl, rotateTransform, positionTransform, five, pxmm, floorplanData];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			options,
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				five: 3,
+				pxmm: 4,
+				floorplanData: 5,
+				cameraImageUrl: 0
+			},
+			add_css
+		);
+	}
+}
+
+export default Component;

package/libs/floorplan/PanoFloorplanRadarPlugin/Components/CurrentFloor/CurrentFloor.js

@@ -0,0 +1,248 @@
+/* generated by Svelte v3.47.0 */
+import {
+	SvelteComponent,
+	assign,
+	check_outros,
+	create_component,
+	destroy_component,
+	detach,
+	empty,
+	get_spread_update,
+	group_outros,
+	init,
+	insert,
+	mount_component,
+	safe_not_equal,
+	space,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+import ExtraObjects from './ExtraObjects';
+import BaseImage from '../../../Components/BaseImage';
+import Highlight from '../../../Components/RoomHighlight/RoomHighlight';
+
+function create_if_block(ctx) {
+	let highlight;
+	let current;
+
+	const highlight_spread_levels = [
+		{
+			five: /*five*/ ctx[0],
+			pxmm: /*pxmm*/ ctx[1],
+			floorIndex: /*floorIndex*/ ctx[2],
+			floorplanData: /*floorplanData*/ ctx[4],
+			onRoomHeightClick: /*onRoomHeightClick*/ ctx[6]
+		}
+	];
+
+	let highlight_props = {};
+
+	for (let i = 0; i < highlight_spread_levels.length; i += 1) {
+		highlight_props = assign(highlight_props, highlight_spread_levels[i]);
+	}
+
+	highlight = new Highlight({ props: highlight_props });
+
+	return {
+		c() {
+			create_component(highlight.$$.fragment);
+		},
+		m(target, anchor) {
+			mount_component(highlight, target, anchor);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const highlight_changes = (dirty & /*five, pxmm, floorIndex, floorplanData, onRoomHeightClick*/ 87)
+			? get_spread_update(highlight_spread_levels, [
+					{
+						five: /*five*/ ctx[0],
+						pxmm: /*pxmm*/ ctx[1],
+						floorIndex: /*floorIndex*/ ctx[2],
+						floorplanData: /*floorplanData*/ ctx[4],
+						onRoomHeightClick: /*onRoomHeightClick*/ ctx[6]
+					}
+				])
+			: {};
+
+			highlight.$set(highlight_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(highlight.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(highlight.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(highlight, detaching);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let baseimage;
+	let t0;
+	let extraobjects;
+	let t1;
+	let if_block_anchor;
+	let current;
+
+	const baseimage_spread_levels = [
+		{
+			floorIndex: /*floorIndex*/ ctx[2],
+			floorplanData: /*floorplanData*/ ctx[4]
+		}
+	];
+
+	let baseimage_props = {};
+
+	for (let i = 0; i < baseimage_spread_levels.length; i += 1) {
+		baseimage_props = assign(baseimage_props, baseimage_spread_levels[i]);
+	}
+
+	baseimage = new BaseImage({ props: baseimage_props });
+
+	extraobjects = new ExtraObjects({
+			props: {
+				extraObjects: /*currentFloorExtraObjects*/ ctx[5]
+			}
+		});
+
+	let if_block = /*hoverEnable*/ ctx[3] && create_if_block(ctx);
+
+	return {
+		c() {
+			create_component(baseimage.$$.fragment);
+			t0 = space();
+			create_component(extraobjects.$$.fragment);
+			t1 = space();
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			mount_component(baseimage, target, anchor);
+			insert(target, t0, anchor);
+			mount_component(extraobjects, target, anchor);
+			insert(target, t1, anchor);
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			const baseimage_changes = (dirty & /*floorIndex, floorplanData*/ 20)
+			? get_spread_update(baseimage_spread_levels, [
+					{
+						floorIndex: /*floorIndex*/ ctx[2],
+						floorplanData: /*floorplanData*/ ctx[4]
+					}
+				])
+			: {};
+
+			baseimage.$set(baseimage_changes);
+			const extraobjects_changes = {};
+			if (dirty & /*currentFloorExtraObjects*/ 32) extraobjects_changes.extraObjects = /*currentFloorExtraObjects*/ ctx[5];
+			extraobjects.$set(extraobjects_changes);
+
+			if (/*hoverEnable*/ ctx[3]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+
+					if (dirty & /*hoverEnable*/ 8) {
+						transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					transition_in(if_block, 1);
+					if_block.m(if_block_anchor.parentNode, if_block_anchor);
+				}
+			} else if (if_block) {
+				group_outros();
+
+				transition_out(if_block, 1, 1, () => {
+					if_block = null;
+				});
+
+				check_outros();
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(baseimage.$$.fragment, local);
+			transition_in(extraobjects.$$.fragment, local);
+			transition_in(if_block);
+			current = true;
+		},
+		o(local) {
+			transition_out(baseimage.$$.fragment, local);
+			transition_out(extraobjects.$$.fragment, local);
+			transition_out(if_block);
+			current = false;
+		},
+		d(detaching) {
+			destroy_component(baseimage, detaching);
+			if (detaching) detach(t0);
+			destroy_component(extraobjects, detaching);
+			if (detaching) detach(t1);
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let currentFloorExtraObjects;
+	let { five } = $$props;
+	let { pxmm } = $$props;
+	let { floorIndex } = $$props;
+	let { hoverEnable } = $$props;
+	let { floorplanData } = $$props;
+	let { extraObjects = [] } = $$props;
+	const onRoomHeightClick = undefined;
+
+	$$self.$$set = $$props => {
+		if ('five' in $$props) $$invalidate(0, five = $$props.five);
+		if ('pxmm' in $$props) $$invalidate(1, pxmm = $$props.pxmm);
+		if ('floorIndex' in $$props) $$invalidate(2, floorIndex = $$props.floorIndex);
+		if ('hoverEnable' in $$props) $$invalidate(3, hoverEnable = $$props.hoverEnable);
+		if ('floorplanData' in $$props) $$invalidate(4, floorplanData = $$props.floorplanData);
+		if ('extraObjects' in $$props) $$invalidate(7, extraObjects = $$props.extraObjects);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*extraObjects, floorIndex*/ 132) {
+			$: $$invalidate(5, currentFloorExtraObjects = extraObjects?.filter(object => object.floorIndex === floorIndex));
+		}
+	};
+
+	return [
+		five,
+		pxmm,
+		floorIndex,
+		hoverEnable,
+		floorplanData,
+		currentFloorExtraObjects,
+		onRoomHeightClick,
+		extraObjects
+	];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(this, options, instance, create_fragment, safe_not_equal, {
+			five: 0,
+			pxmm: 1,
+			floorIndex: 2,
+			hoverEnable: 3,
+			floorplanData: 4,
+			extraObjects: 7
+		});
+	}
+}
+
+export default Component;