@realsee/dnalogel 2.0.0-alpha.4 → 2.0.0-alpha.40

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

@@ -0,0 +1,373 @@
+/* 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,
+	empty,
+	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:0) {#if visible}
+function create_if_block(ctx) {
+	let div;
+	let div_resize_listener;
+	let current;
+	let if_block = /*clientWidth*/ ctx[6] !== 0 && create_if_block_1(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[12].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[12].bind(div));
+			current = true;
+		},
+		p(ctx, dirty) {
+			if (/*clientWidth*/ ctx[6] !== 0) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+
+					if (dirty & /*clientWidth*/ 64) {
+						transition_in(if_block, 1);
+					}
+				} else {
+					if_block = create_if_block_1(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();
+		}
+	};
+}
+
+// (43:4) {#if clientWidth !== 0}
+function create_if_block_1(ctx) {
+	let div;
+	let currentfloor;
+	let t;
+	let camera;
+	let style_width = `${/*contentWidth*/ ctx[8]}px`;
+	let style_height = `${/*contentHeight*/ ctx[11]}px`;
+	let current;
+
+	const currentfloor_spread_levels = [
+		{
+			five: /*five*/ ctx[0],
+			pxmm: /*pxmm*/ ctx[9],
+			floorIndex: /*floorIndex*/ ctx[10],
+			floorplanData: /*floorplanData*/ ctx[3],
+			hoverEnable: /*hoverEnable*/ ctx[2],
+			extraObjects: /*extraObjects*/ ctx[5]
+		}
+	];
+
+	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[9],
+			five: /*five*/ ctx[0],
+			floorplanData: /*floorplanData*/ ctx[3],
+			cameraImageUrl: /*cameraImageUrl*/ ctx[4]
+		}
+	];
+
+	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*/ 1581)
+			? get_spread_update(currentfloor_spread_levels, [
+					{
+						five: /*five*/ ctx[0],
+						pxmm: /*pxmm*/ ctx[9],
+						floorIndex: /*floorIndex*/ ctx[10],
+						floorplanData: /*floorplanData*/ ctx[3],
+						hoverEnable: /*hoverEnable*/ ctx[2],
+						extraObjects: /*extraObjects*/ ctx[5]
+					}
+				])
+			: {};
+
+			currentfloor.$set(currentfloor_changes);
+
+			const camera_changes = (dirty & /*pxmm, five, floorplanData, cameraImageUrl*/ 537)
+			? get_spread_update(camera_spread_levels, [
+					{
+						pxmm: /*pxmm*/ ctx[9],
+						five: /*five*/ ctx[0],
+						floorplanData: /*floorplanData*/ ctx[3],
+						cameraImageUrl: /*cameraImageUrl*/ ctx[4]
+					}
+				])
+			: {};
+
+			camera.$set(camera_changes);
+
+			if (dirty & /*contentWidth*/ 256 && style_width !== (style_width = `${/*contentWidth*/ ctx[8]}px`)) {
+				set_style(div, "width", style_width, false);
+			}
+
+			if (dirty & /*contentHeight*/ 2048 && style_height !== (style_height = `${/*contentHeight*/ ctx[11]}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 if_block_anchor;
+	let current;
+	let if_block = /*visible*/ ctx[1] && create_if_block(ctx);
+
+	return {
+		c() {
+			if (if_block) if_block.c();
+			if_block_anchor = empty();
+		},
+		m(target, anchor) {
+			if (if_block) if_block.m(target, anchor);
+			insert(target, if_block_anchor, anchor);
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			if (/*visible*/ ctx[1]) {
+				if (if_block) {
+					if_block.p(ctx, dirty);
+
+					if (dirty & /*visible*/ 2) {
+						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(if_block);
+			current = true;
+		},
+		o(local) {
+			transition_out(if_block);
+			current = false;
+		},
+		d(detaching) {
+			if (if_block) if_block.d(detaching);
+			if (detaching) detach(if_block_anchor);
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { five } = $$props;
+	let { visible } = $$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(10, 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(6, clientWidth);
+		$$invalidate(7, clientHeight);
+	}
+
+	$$self.$$set = $$props => {
+		if ('five' in $$props) $$invalidate(0, five = $$props.five);
+		if ('visible' in $$props) $$invalidate(1, visible = $$props.visible);
+		if ('hoverEnable' in $$props) $$invalidate(2, hoverEnable = $$props.hoverEnable);
+		if ('floorplanData' in $$props) $$invalidate(3, floorplanData = $$props.floorplanData);
+		if ('cameraImageUrl' in $$props) $$invalidate(4, cameraImageUrl = $$props.cameraImageUrl);
+		if ('extraObjects' in $$props) $$invalidate(5, extraObjects = $$props.extraObjects);
+	};
+
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*clientWidth, clientHeight, floorplanData, contentWidth*/ 456) {
+			$: {
+				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(8, contentWidth = contentSize[0]);
+				$$invalidate(11, contentHeight = contentSize[1]);
+				$$invalidate(9, pxmm = contentWidth / boundingWidth);
+			}
+		}
+	};
+
+	return [
+		five,
+		visible,
+		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,
+				visible: 1,
+				hoverEnable: 2,
+				floorplanData: 3,
+				cameraImageUrl: 4,
+				extraObjects: 5
+			},
+			add_css
+		);
+	}
+}
+
+export default Component;

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

@@ -1,28 +1,36 @@
 import type { Five } from '@realsee/five';
+import type { BaseOptions } from '../../base/BasePlugin';
 import type { FloorplanServerData } from '../typings/floorplanServerData';
 import type { FloorplanExtraObject3D } from '../typings/floorplanData';
-export interface PanoFloorplanRadarPluginControllerParameter {
-    wrapper?: string | Element;
-    configs?: {
-        hoverEnable?: boolean;
-        cameraImageUrl?: string;
-    };
-}
-export default class PanoFloorplanRadarPluginController {
+import type { State, Config, EventMap, Parameters, PluginData, PluginServerData } from './typing';
+import * as BasePlugin from '../../base/BasePluginWithData';
+export declare class Controller extends BasePlugin.Controller<State, EventMap, PluginServerData, PluginData> {
+    name: string;
+    state: State;
+    protected data?: PluginData;
     private app?;
-    private five;
     private wrapperSelector;
-    private data?;
     private wrapper;
-    private extraObjects?;
-    private originExtraObjects?;
-    private configs;
-    constructor(five: Five, params?: PanoFloorplanRadarPluginControllerParameter);
+    private disposed;
+    private extraObjects;
+    constructor(five: Five, params?: Parameters);
     dispose: () => void;
-    load: (data: FloorplanServerData) => Promise<void>;
+    load(serverData: PluginServerData | FloorplanServerData, state?: Partial<State>, userAction?: boolean): Promise<void>;
+    show(options?: BaseOptions): Promise<void>;
+    hide(options?: BaseOptions): Promise<void>;
+    enable(options?: BaseOptions): void;
+    disable(options?: BaseOptions): void;
+    /** 更改插件 State */
+    setState(state: Partial<State>, options?: BaseOptions): void;
     /** 把插件的渲染DOM插入到对应的容器中去 */
     appendTo(wrapper: Element): void;
-    changeConfigs(configs: PanoFloorplanRadarPluginController['configs']): void;
+    changeConfigs(config: Config, userAction?: boolean): void;
     setExtraObjectsWith3DPositions(data: FloorplanExtraObject3D[]): void;
+    protected formatData(serverData: PluginServerData): Promise<PluginData>;
+    private _enable;
+    private _disable;
+    private _show;
+    private _hide;
+    private updateState;
     private render;
 }

package/libs/floorplan/PanoFloorplanRadarPlugin/Controller.js

@@ -1,30 +1,107 @@
-import Main from './Components/Main.svelte';
+import Main from './Components/Main';
+import equal from '../../shared-utils/equal';
+import { CAMERA_IMAGE } from '../Assets/camera';
+import * as BasePlugin from '../../base/BasePluginWithData';
 import formatData, { formatExtraObjects } from '../utils/formatData';
-export default class PanoFloorplanRadarPluginController {
-    app;
-    five;
-    wrapperSelector = '';
-    data;
-    wrapper = null;
-    extraObjects;
-    originExtraObjects;
-    configs = {};
+export class Controller extends BasePlugin.Controller {
     constructor(five, params) {
+        super(five);
+        // =============== public properties =================
+        Object.defineProperty(this, "name", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 'panoFloorplanRadarPlugin'
+        });
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // =============== protected properties =================
+        Object.defineProperty(this, "data", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        // =============== private properties =================
+        Object.defineProperty(this, "app", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "wrapperSelector", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: ''
+        });
+        Object.defineProperty(this, "wrapper", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: null
+        });
+        Object.defineProperty(this, "disposed", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: false
+        });
+        Object.defineProperty(this, "extraObjects", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "dispose", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: () => {
+                var _a;
+                this.disposed = true;
+                (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
+                this.wrapper = null;
+                this.wrapperSelector = '';
+                this.hooks.emit('dispose');
+            }
+        });
+        Object.defineProperty(this, "_disable", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (options) => {
+                var _a;
+                const { userAction } = options;
+                (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
+                this.app = undefined;
+                this.hooks.emit('disable', { userAction });
+            }
+        });
         this.five = five;
-        params?.configs && Object.assign(this.configs, params.configs);
-        if (typeof params?.wrapper === 'string')
+        // =============== init State ===============
+        const baseConfig = {
+            hoverEnable: false,
+            cameraImageUrl: CAMERA_IMAGE,
+        };
+        const paramsConfig = (params === null || params === void 0 ? void 0 : params.configs) ? params.configs : {};
+        const config = Object.assign(Object.assign({}, baseConfig), paramsConfig);
+        this.state = { enabled: true, visible: true, config };
+        // =============== init wrapper ===============
+        if (params === null || params === void 0 ? void 0 : params.wrapper)
+            console.warn('不推荐继续使用 params.selector 配置父容器，请使用 appendTo 方法');
+        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;
+        // =============== init Listener ===============
         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;
+    async load(serverData, state, userAction = true) {
         // const loadImage = async () => {
         //   const floorIndex = this.five.work.observers[this.five.getCurrentState().panoIndex].floorIndex
         //   // 当有 svgString 时，没有加载过程
@@ -40,49 +117,124 @@ export default class PanoFloorplanRadarPluginController {
         //   })
         // }
         // await loadImage()
+        function isPluginServerData(serverData) {
+            return Object.prototype.hasOwnProperty.apply(serverData, ['version']);
+        }
+        const copyData = JSON.parse(JSON.stringify(serverData));
+        const _serverData = isPluginServerData(copyData) ? copyData.data : copyData;
+        const prevData = this.data;
+        this.data = await formatData(_serverData);
+        this.hooks.emit('dataLoaded', this.data);
+        this.hooks.emit('dataChange', this.data, prevData);
+        if (state)
+            this.updateState(state, userAction);
         this.render();
-    };
+    }
+    async show(options = {}) {
+        // 已经展示完成了，不做任何操作
+        if (this.state.visible)
+            return;
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState({ visible: true }, userAction);
+        this._show({ userAction });
+    }
+    async hide(options = {}) {
+        if (!this.state.visible)
+            return;
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState({ visible: false }, userAction);
+        this._hide({ userAction });
+    }
+    enable(options = {}) {
+        if (this.state.enabled)
+            return;
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState({ enabled: true }, options.userAction || userAction);
+        this._enable({ userAction });
+    }
+    disable(options = {}) {
+        if (!this.state.enabled)
+            return;
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState({ enabled: false }, options.userAction || userAction);
+        this._disable({ userAction });
+    }
+    /** 更改插件 State */
+    setState(state, options = {}) {
+        const prevState = this.state;
+        const userAction = options.userAction !== undefined ? options.userAction : true;
+        this.updateState(state, userAction);
+        if (state.enabled !== undefined && prevState.enabled !== state.enabled) {
+            const options = { userAction };
+            state.enabled ? this._enable(options) : this._disable(options);
+        }
+        if (state.visible !== undefined && prevState.visible !== state.visible) {
+            const options = { userAction };
+            state.visible ? this._show(options) : this._hide(options);
+        }
+    }
     /** 把插件的渲染DOM插入到对应的容器中去 */
     appendTo(wrapper) {
         this.wrapper = wrapper;
         this.render();
     }
-    changeConfigs(configs) {
-        Object.assign(this.configs, configs);
+    changeConfigs(config, userAction = true) {
+        this.setState({ config }, { userAction });
         this.render();
     }
     setExtraObjectsWith3DPositions(data) {
-        this.originExtraObjects = data;
         if (!this.data)
             return;
         this.extraObjects = formatExtraObjects(data, this.five, this.data);
         this.render();
     }
+    async formatData(serverData) {
+        return await formatData(serverData.data);
+    }
+    _enable(options) {
+        const { userAction } = options;
+        this.hooks.emit('enable', { userAction });
+        if (this.state.visible)
+            this._show({ userAction });
+    }
+    _show(options) {
+        if (this.disposed)
+            return;
+        if (!this.state.enabled)
+            return;
+        const { userAction } = options;
+        this.hooks.emit('show', { userAction });
+        this.render();
+    }
+    _hide(options) {
+        if (this.disposed)
+            return;
+        if (!this.state.enabled)
+            return;
+        const { userAction } = options;
+        this.hooks.emit('hide', { userAction });
+        this.render();
+    }
+    updateState(state, userAction) {
+        const prevState = this.state;
+        this.state = Object.assign(Object.assign({}, this.state), state);
+        if (equal(this.state, prevState, { deep: true }))
+            return;
+        this.hooks.emit('stateChange', { state: this.state, prevState, userAction });
+    }
     render() {
+        if (this.disposed)
+            return;
+        if (!this.state.enabled)
+            return;
         // 处理 wrapper
-        if (!this.wrapper) {
+        if (!this.wrapper && this.wrapperSelector) {
             const _wrapper = document.querySelector(this.wrapperSelector);
             this.wrapper = _wrapper;
         }
         if (!this.data || !this.wrapper)
             return;
-        if (!this.extraObjects && this.originExtraObjects) {
-            this.extraObjects = formatExtraObjects(this.originExtraObjects, this.five, this.data);
-        }
-        const props = {
-            five: this.five,
-            floorplanData: this.data,
-            extraObjects: this.extraObjects,
-            cameraImageUrl: this.configs.cameraImageUrl,
-            hoverEnable: this.configs.hoverEnable ?? false,
-        };
-        if (!this.app) {
-            this.app = new Main({
-                target: this.wrapper,
-                props,
-            });
-            return;
-        }
-        this.app.$set(props);
+        const props = Object.assign(Object.assign({}, this.state.config), { five: this.five, floorplanData: this.data, visible: this.state.visible, extraObjects: this.extraObjects });
+        this.app ? this.app.$set(props) : (this.app = new Main({ target: this.wrapper, props }));
     }
 }