@realsee/dnalogel 2.0.0-alpha.2 → 2.0.0-alpha.22

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

@@ -0,0 +1,312 @@
+/* generated by Svelte v3.47.0 */
+import {
+	SvelteComponent,
+	add_render_callback,
+	add_resize_listener,
+	append,
+	append_styles,
+	assign,
+	attr,
+	check_outros,
+	create_component,
+	destroy_component,
+	detach,
+	element,
+	get_spread_update,
+	group_outros,
+	init,
+	insert,
+	mount_component,
+	safe_not_equal,
+	set_style,
+	space,
+	transition_in,
+	transition_out
+} from "svelte/internal";
+
+import { onMount } from 'svelte';
+import Camera from './Camera';
+import CurrentFloor from './CurrentFloor/CurrentFloor';
+
+function add_css(target) {
+	append_styles(target, "svelte-7d8ub2", ".plugin-floorplan-radar.svelte-7d8ub2{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.plugin-floorplan-radar-container.svelte-7d8ub2{position:relative}");
+}
+
+// (41:2) {#if clientWidth !== 0}
+function create_if_block(ctx) {
+	let div;
+	let currentfloor;
+	let t;
+	let camera;
+	let style_width = `${/*contentWidth*/ ctx[7]}px`;
+	let style_height = `${/*contentHeight*/ ctx[10]}px`;
+	let current;
+
+	const currentfloor_spread_levels = [
+		{
+			five: /*five*/ ctx[0],
+			pxmm: /*pxmm*/ ctx[8],
+			floorIndex: /*floorIndex*/ ctx[9],
+			floorplanData: /*floorplanData*/ ctx[2],
+			hoverEnable: /*hoverEnable*/ ctx[1],
+			extraObjects: /*extraObjects*/ ctx[4]
+		}
+	];
+
+	let currentfloor_props = {};
+
+	for (let i = 0; i < currentfloor_spread_levels.length; i += 1) {
+		currentfloor_props = assign(currentfloor_props, currentfloor_spread_levels[i]);
+	}
+
+	currentfloor = new CurrentFloor({ props: currentfloor_props });
+
+	const camera_spread_levels = [
+		{
+			pxmm: /*pxmm*/ ctx[8],
+			five: /*five*/ ctx[0],
+			floorplanData: /*floorplanData*/ ctx[2],
+			cameraImageUrl: /*cameraImageUrl*/ ctx[3]
+		}
+	];
+
+	let camera_props = {};
+
+	for (let i = 0; i < camera_spread_levels.length; i += 1) {
+		camera_props = assign(camera_props, camera_spread_levels[i]);
+	}
+
+	camera = new Camera({ props: camera_props });
+
+	return {
+		c() {
+			div = element("div");
+			create_component(currentfloor.$$.fragment);
+			t = space();
+			create_component(camera.$$.fragment);
+			attr(div, "class", "plugin-floorplan-radar-container svelte-7d8ub2");
+			set_style(div, "width", style_width, false);
+			set_style(div, "height", style_height, false);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			mount_component(currentfloor, div, null);
+			append(div, t);
+			mount_component(camera, div, null);
+			current = true;
+		},
+		p(ctx, dirty) {
+			const currentfloor_changes = (dirty & /*five, pxmm, floorIndex, floorplanData, hoverEnable, extraObjects*/ 791)
+			? get_spread_update(currentfloor_spread_levels, [
+					{
+						five: /*five*/ ctx[0],
+						pxmm: /*pxmm*/ ctx[8],
+						floorIndex: /*floorIndex*/ ctx[9],
+						floorplanData: /*floorplanData*/ ctx[2],
+						hoverEnable: /*hoverEnable*/ ctx[1],
+						extraObjects: /*extraObjects*/ ctx[4]
+					}
+				])
+			: {};
+
+			currentfloor.$set(currentfloor_changes);
+
+			const camera_changes = (dirty & /*pxmm, five, floorplanData, cameraImageUrl*/ 269)
+			? get_spread_update(camera_spread_levels, [
+					{
+						pxmm: /*pxmm*/ ctx[8],
+						five: /*five*/ ctx[0],
+						floorplanData: /*floorplanData*/ ctx[2],
+						cameraImageUrl: /*cameraImageUrl*/ ctx[3]
+					}
+				])
+			: {};
+
+			camera.$set(camera_changes);
+
+			if (dirty & /*contentWidth*/ 128 && style_width !== (style_width = `${/*contentWidth*/ ctx[7]}px`)) {
+				set_style(div, "width", style_width, false);
+			}
+
+			if (dirty & /*contentHeight*/ 1024 && style_height !== (style_height = `${/*contentHeight*/ ctx[10]}px`)) {
+				set_style(div, "height", style_height, false);
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(currentfloor.$$.fragment, local);
+			transition_in(camera.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(currentfloor.$$.fragment, local);
+			transition_out(camera.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			destroy_component(currentfloor);
+			destroy_component(camera);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div;
+	let div_resize_listener;
+	let current;
+	let if_block = /*clientWidth*/ ctx[5] !== 0 && create_if_block(ctx);
+
+	return {
+		c() {
+			div = element("div");
+			if (if_block) if_block.c();
+			attr(div, "class", "plugin-floorplan-radar svelte-7d8ub2");
+			add_render_callback(() => /*div_elementresize_handler*/ ctx[11].call(div));
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			if (if_block) if_block.m(div, null);
+			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[11].bind(div));
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			if (/*clientWidth*/ ctx[5] !== 0) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+
+					if (dirty & /*clientWidth*/ 32) {
+						transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block(ctx);
+					if_block.c();
+					transition_in(if_block, 1);
+					if_block.m(div, null);
+				}
+			} else if (if_block) {
+				group_outros();
+
+				transition_out(if_block, 1, 1, () => {
+					if_block = null;
+				});
+
+				check_outros();
+			}
+		},
+		i(local) {
+			if (current) return;
+			transition_in(if_block);
+			current = true;
+		},
+		o(local) {
+			transition_out(if_block);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(div);
+			if (if_block) if_block.d();
+			div_resize_listener();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { five } = $$props;
+	let { hoverEnable } = $$props;
+	let { floorplanData } = $$props;
+	let { cameraImageUrl } = $$props;
+	let { extraObjects = [] } = $$props;
+	let pxmm = 0;
+	let floorIndex = 0;
+	let clientWidth = 0;
+	let clientHeight = 0;
+	let contentWidth = 0;
+	let contentHeight = 0;
+
+	function handlePanoArrived(panoIndex) {
+		$$invalidate(9, floorIndex = five.work.observers[panoIndex].floorIndex);
+	}
+
+	onMount(() => {
+		five.on('panoArrived', handlePanoArrived);
+
+		return () => {
+			five.off('panoArrived', handlePanoArrived);
+		};
+	});
+
+	function div_elementresize_handler() {
+		clientWidth = this.clientWidth;
+		clientHeight = this.clientHeight;
+		$$invalidate(5, clientWidth);
+		$$invalidate(6, clientHeight);
+	}
+
+	$$self.$$set = $$props => {
+		if ('five' in $$props) $$invalidate(0, five = $$props.five);
+		if ('hoverEnable' in $$props) $$invalidate(1, hoverEnable = $$props.hoverEnable);
+		if ('floorplanData' in $$props) $$invalidate(2, floorplanData = $$props.floorplanData);
+		if ('cameraImageUrl' in $$props) $$invalidate(3, cameraImageUrl = $$props.cameraImageUrl);
+		if ('extraObjects' in $$props) $$invalidate(4, extraObjects = $$props.extraObjects);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*clientWidth, clientHeight, floorplanData, contentWidth*/ 228) {
+			$: {
+				const size = Math.min(clientWidth, clientHeight);
+				const { max, min } = floorplanData.bounding;
+				const boundingWidth = max.x - min.x;
+				const boundingHeight = max.y - min.y;
+
+				const contentSize = (function getSize() {
+					if (boundingWidth > boundingHeight) return [size, size / boundingWidth * boundingHeight];
+					return [size / boundingHeight * boundingWidth, size];
+				})();
+
+				$$invalidate(7, contentWidth = contentSize[0]);
+				$$invalidate(10, contentHeight = contentSize[1]);
+				$$invalidate(8, pxmm = contentWidth / boundingWidth);
+			}
+		}
+	};
+
+	return [
+		five,
+		hoverEnable,
+		floorplanData,
+		cameraImageUrl,
+		extraObjects,
+		clientWidth,
+		clientHeight,
+		contentWidth,
+		pxmm,
+		floorIndex,
+		contentHeight,
+		div_elementresize_handler
+	];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+
+		init(
+			this,
+			options,
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{
+				five: 0,
+				hoverEnable: 1,
+				floorplanData: 2,
+				cameraImageUrl: 3,
+				extraObjects: 4
+			},
+			add_css
+		);
+	}
+}
+
+export default Component;

package/libs/floorplan/PanoFloorplanRadarPlugin/Controller.js

@@ -1,47 +1,98 @@
-import Main from './Components/Main.svelte';
+import Main from './Components/Main';
 import formatData, { formatExtraObjects } from '../utils/formatData';
 export default class PanoFloorplanRadarPluginController {
-    app;
-    five;
-    wrapperSelector = '';
-    data;
-    wrapper = null;
-    extraObjects;
-    originExtraObjects;
-    configs = {};
     constructor(five, params) {
+        Object.defineProperty(this, "app", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "wrapperSelector", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "data", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "wrapper", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "extraObjects", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "originExtraObjects", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "configs", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
+        Object.defineProperty(this, "dispose", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                var _a;
+                (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
+            }
+        });
+        Object.defineProperty(this, "load", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: async (data) => {
+                const copyData = JSON.parse(JSON.stringify(data));
+                const floorplanData = await formatData(copyData);
+                this.data = floorplanData;
+                // const loadImage = async () => {
+                //   const floorIndex = this.five.work.observers[this.five.getCurrentState().panoIndex].floorIndex
+                //   // 当有 svgString 时，没有加载过程
+                //   if (floorplanData.outlines[floorIndex]?.svgContent) return
+                //   // 如果当前楼层图片不存在，不存在加载过程
+                //   const nowFloorImageSrc = floorplanData.outlines[floorIndex]?.url
+                //   if (!nowFloorImageSrc) return
+                //   // 图片加载完成时再 render
+                //   await new Promise<void>((resolve) => {
+                //     const nowFloorImage = new Image()
+                //     nowFloorImage.src = nowFloorImageSrc
+                //     nowFloorImage.onload = () => resolve()
+                //   })
+                // }
+                // await loadImage()
+                this.render();
+            }
+        });
         this.five = five;
-        params?.configs && Object.assign(this.configs, params.configs);
-        if (typeof params?.wrapper === 'string')
+        (params === null || params === void 0 ? void 0 : params.configs) && Object.assign(this.configs, params.configs);
+        if (typeof (params === null || params === void 0 ? void 0 : params.wrapper) === 'string')
             this.wrapperSelector = params.wrapper;
-        else if (params?.wrapper instanceof Element)
+        else if ((params === null || params === void 0 ? void 0 : params.wrapper) instanceof Element)
             this.wrapper = params.wrapper;
         five.once('dispose', this.dispose);
     }
-    dispose = () => {
-        this.app?.$destroy();
-    };
-    load = async (data) => {
-        const copyData = JSON.parse(JSON.stringify(data));
-        const floorplanData = await formatData(copyData);
-        this.data = floorplanData;
-        // const loadImage = async () => {
-        //   const floorIndex = this.five.work.observers[this.five.getCurrentState().panoIndex].floorIndex
-        //   // 当有 svgString 时，没有加载过程
-        //   if (floorplanData.outlines[floorIndex]?.svgContent) return
-        //   // 如果当前楼层图片不存在，不存在加载过程
-        //   const nowFloorImageSrc = floorplanData.outlines[floorIndex]?.url
-        //   if (!nowFloorImageSrc) return
-        //   // 图片加载完成时再 render
-        //   await new Promise<void>((resolve) => {
-        //     const nowFloorImage = new Image()
-        //     nowFloorImage.src = nowFloorImageSrc
-        //     nowFloorImage.onload = () => resolve()
-        //   })
-        // }
-        // await loadImage()
-        this.render();
-    };
     /** 把插件的渲染DOM插入到对应的容器中去 */
     appendTo(wrapper) {
         this.wrapper = wrapper;
@@ -59,6 +110,7 @@ export default class PanoFloorplanRadarPluginController {
         this.render();
     }
     render() {
+        var _a;
         // 处理 wrapper
         if (!this.wrapper) {
             const _wrapper = document.querySelector(this.wrapperSelector);
@@ -74,7 +126,7 @@ export default class PanoFloorplanRadarPluginController {
             floorplanData: this.data,
             extraObjects: this.extraObjects,
             cameraImageUrl: this.configs.cameraImageUrl,
-            hoverEnable: this.configs.hoverEnable ?? false,
+            hoverEnable: (_a = this.configs.hoverEnable) !== null && _a !== void 0 ? _a : false,
         };
         if (!this.app) {
             this.app = new Main({

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

@@ -1,19 +1,34 @@
 import type { Five } from '@realsee/five';
+import type { FLOOR_PLAN_ATTACHED_TO } from '../constant';
 import type { FloorplanServerData } from '../typings/floorplanServerData';
 import type { FloorplanRoomItem } from '../typings/floorplanData';
-export interface TopviewFloorplanPluginParameterType {
-    selector?: string | Element;
-    scale?: number;
+/** TopviewFloorplanPlugin 配置参数 */
+interface Configs {
+    northDesc?: string;
     modelOpacity?: number;
     cameraImageUrl?: string;
+    /** 是否开启高亮房间功能，默认为 false */
     hoverEnable?: boolean;
+    /** 是否开启放大缩小和拖动功能，默认为 false */
+    gestureEnable?: boolean;
+    /** 是否展示指南针，默认为 true */
     compassEnable?: boolean;
-    autoShowEnable?: boolean;
+    /** 是否展示户型图标尺，默认为 true */
     ruleLabelsEnable?: boolean;
+    /** 是否展示房间标签，默认为 true */
     roomLabelsEnable?: boolean;
+    /** 点击房间时，是否需要跳转到被点房间的全景态点位上，默认为 true */
     preventRoomClick?: boolean;
+    /** 户型图展示时，应该对应到模型的哪个位置上，默认是 BOUNDING_CENTER */
+    attachedTo?: FLOOR_PLAN_ATTACHED_TO;
+    /** 用户自定义房间标间 DOM 函数 */
     getLabelElement?: (room: FloorplanRoomItem) => Element | null;
 }
+/** TopviewFloorplanPlugin 初始化参数 */
+export interface TopviewFloorplanPluginParameterType extends Configs {
+    selector?: string | Element;
+    scale?: number;
+}
 export declare type TopviewFloorplanPluginReturnType = TopviewFloorplanPluginController;
 export declare class TopviewFloorplanPluginController {
     size: {
@@ -38,22 +53,23 @@ export declare class TopviewFloorplanPluginController {
     /** 把插件的渲染DOM插入到对应的容器中去 */
     appendTo(wrapper: Element): this;
     dispose: () => void;
-    /** 模型楼层高亮改变时，自动进行楼层切换 */
+    private onFiveWantsMoveToPano;
+    private onFiveWantsGesture;
     private onModelShownFloorChange;
-    /** panoIndex 改变时，更新 floorIndex */
-    private handlePanoArrived;
-    /** 配置了 preventRoomClick 后，在户型图展示时阻止 Five 走点 */
-    private handleWantsMoveToPano;
-    /** 在户型图展示时阻止 Five 滑动行为 */
-    private handleWantsPanGesture;
-    private handleModelLoaded;
+    private onFivePanoArrived;
+    private onFivePanGesture;
+    private onFivePinchGesture;
+    private onFiveModelLoaded;
     /** 非 Topview 态隐藏户型图 */
-    private handleModeChange;
+    private onFiveModeChange;
     /** 动画结束后是 Topview 态就展示户型图 */
-    private handleInitAnimationEnded;
+    private onFiveInitAnimationEnded;
     private show;
     private hide;
     /** 更新户型图大小 */
     private updateSize;
+    /** 更新户型图位置 */
+    private updatePosition;
     private render;
 }
+export {};