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

package/libs/ModelItemLabelPlugin/typings.d.ts

@@ -0,0 +1,56 @@
+import type { Subscribe } from "@realsee/five";
+import type { PluginEvent } from "./events.type";
+import type ItemLabelComponent from './ItemLabelComponent';
+export declare enum DISPLAY_STRATEGY_TYPE {
+    SMALL = "small",
+    MIDLLE = "middle",
+    LARGE = "large",
+    EXTRA_LARGE = "x-large"
+}
+export interface ModelItemLabelPluginParametersType {
+    modelOcclusionEnable?: boolean;
+    displayStrategyType?: Partial<DISPLAY_STRATEGY_TYPE>;
+}
+export interface ModelItemLabelPluginData {
+    model_item_labels: Readonly<{
+        id: string;
+        library: string;
+        name: string;
+        size: [number, number, number];
+        center: [number, number, number];
+        position: [number, number, number];
+        type: string[];
+        [key: string]: any;
+    }>[];
+}
+export interface ItemLabel {
+    id: string;
+    library: string;
+    name: string;
+    size: [number, number, number];
+    center: [number, number, number];
+    position: [number, number, number];
+    type: string[];
+    modelPosition: [number, number, number];
+    [key: string]: any;
+}
+export interface ModelItemLabelPluginExportReturnsType {
+    appendTo: (wrapper: Element) => void;
+    load: (data: ModelItemLabelPluginData) => void;
+    disable: () => void;
+    enable: () => void;
+    dispose: () => void;
+    hooks: Subscribe<PluginEvent>;
+}
+export interface ModelItemLabelPluginState {
+    container: HTMLDivElement;
+    data: ModelItemLabelPluginData | null;
+    enabled: boolean;
+    itemLabels: ItemLabel[];
+    wrapper: HTMLElement | null;
+    fiveModeEnabled: boolean;
+    app?: ItemLabelComponent | undefined;
+    hooks: Subscribe<PluginEvent>;
+    modelOcclusionEnable: boolean;
+    displayStrategyType: Partial<DISPLAY_STRATEGY_TYPE>;
+}

package/libs/ModelItemLabelPlugin/typings.js

@@ -0,0 +1,7 @@
+export var DISPLAY_STRATEGY_TYPE;
+(function (DISPLAY_STRATEGY_TYPE) {
+    DISPLAY_STRATEGY_TYPE["SMALL"] = "small";
+    DISPLAY_STRATEGY_TYPE["MIDLLE"] = "middle";
+    DISPLAY_STRATEGY_TYPE["LARGE"] = "large";
+    DISPLAY_STRATEGY_TYPE["EXTRA_LARGE"] = "x-large";
+})(DISPLAY_STRATEGY_TYPE || (DISPLAY_STRATEGY_TYPE = {}));

package/libs/ModelItemLabelPlugin/utils/parseData.d.ts

@@ -0,0 +1,3 @@
+import type { ModelItemLabelPluginData, ItemLabel } from '../typings';
+/** @description 转成内部所需数据 */
+export declare function parseModelItemLabelPluginData(data: ModelItemLabelPluginData): ItemLabel[];

package/libs/ModelItemLabelPlugin/utils/parseData.js

@@ -0,0 +1,4 @@
+/** @description 转成内部所需数据 */
+export function parseModelItemLabelPluginData(data) {
+    return data.model_item_labels.map(label => (Object.assign({ modelPosition: [label.position[0], label.position[1] + label.size[1], label.position[2]] }, label)));
+}

package/libs/ModelRoomLabelPlugin/Controller.js

@@ -1,14 +1,69 @@
-import RoomLabelItems from './RoomLabelItems.svelte';
+import RoomLabelItems from './RoomLabelItems';
 import { parseModelRoomLabelPluginData } from './utils/parseData';
 export class ModelRoomLabelController {
-    five;
-    enabled = true;
-    fiveModeEnabled;
-    app = undefined;
-    wrapper;
-    roomLabels = [];
-    container = document.createElement('div');
     constructor(five) {
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "enabled", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        Object.defineProperty(this, "fiveModeEnabled", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "app", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: undefined
+        });
+        Object.defineProperty(this, "wrapper", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "roomLabels", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: document.createElement('div')
+        });
+        /** 监听 Five Mode 变化
+         * @description
+         * Mode 不符合要求时，立刻消失，满足要求时，需要等待动画结束再展示
+         */
+        Object.defineProperty(this, "onFiveModeChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (mode) => {
+                if (mode !== 'Floorplan') {
+                    this.fiveModeEnabled = false;
+                    this.render();
+                    return;
+                }
+                this.five.once('initAnimationEnded', () => {
+                    this.fiveModeEnabled = this.five.currentMode === 'Floorplan';
+                    this.render();
+                });
+            }
+        });
         this.five = five;
         this.fiveModeEnabled = this.five.currentMode === 'Floorplan';
         // init container style
@@ -19,6 +74,7 @@ export class ModelRoomLabelController {
         this.container.style.pointerEvents = 'none';
         this.container.style.left = '0';
         this.container.style.top = '0';
+        this.container.style.zIndex = '5';
         // five listener
         this.five.once('dispose', () => this.dispose());
         this.five.on('modeChange', this.onFiveModeChange);
@@ -61,26 +117,12 @@ export class ModelRoomLabelController {
         this.render();
         return this;
     }
-    /** 监听 Five Mode 变化
-     * @description
-     * Mode 不符合要求时，立刻消失，满足要求时，需要等待动画结束再展示
-     */
-    onFiveModeChange = (mode) => {
-        if (mode !== 'Floorplan') {
-            this.fiveModeEnabled = false;
-            this.render();
-            return;
-        }
-        this.five.once('initAnimationEnded', () => {
-            this.fiveModeEnabled = this.five.currentMode === 'Floorplan';
-            this.render();
-        });
-    };
     render() {
+        var _a;
         if (!this.wrapper)
             return;
-        if (!this.enable || !this.fiveModeEnabled) {
-            this.app?.$destroy();
+        if (!this.enabled || !this.fiveModeEnabled) {
+            (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
             this.app = undefined;
             return;
         }

package/libs/ModelRoomLabelPlugin/RoomLabelItem.js

@@ -0,0 +1,121 @@
+/* generated by Svelte v3.47.0 */
+import {
+	SvelteComponent,
+	append,
+	append_styles,
+	attr,
+	detach,
+	element,
+	init,
+	insert,
+	listen,
+	noop,
+	safe_not_equal,
+	set_data,
+	set_style,
+	space,
+	text,
+	toggle_class
+} from "svelte/internal";
+
+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}");
+}
+
+function create_fragment(ctx) {
+	let div1;
+	let span;
+	let t0_value = /*roomLabel*/ ctx[0].name + "";
+	let t0;
+	let t1;
+	let div0;
+	let mounted;
+	let dispose;
+
+	return {
+		c() {
+			div1 = element("div");
+			span = element("span");
+			t0 = text(t0_value);
+			t1 = space();
+			div0 = element("div");
+			attr(span, "class", "room-label-item__text svelte-17nkflf");
+			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");
+			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);
+		},
+		m(target, anchor) {
+			insert(target, div1, anchor);
+			append(div1, span);
+			append(span, t0);
+			append(div1, t1);
+			append(div1, div0);
+
+			if (!mounted) {
+				dispose = listen(span, "click", /*onClick*/ ctx[1]);
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*roomLabel*/ 1 && t0_value !== (t0_value = /*roomLabel*/ ctx[0].name + "")) set_data(t0, t0_value);
+
+			if (dirty & /*roomLabel*/ 1) {
+				toggle_class(span, "wide", /*roomLabel*/ ctx[0].name.length > 3);
+			}
+
+			if (dirty & /*roomLabel*/ 1) {
+				set_style(div1, "z-index", /*roomLabel*/ ctx[0].zIndex, false);
+			}
+
+			if (dirty & /*roomLabel*/ 1) {
+				set_style(div1, "transform", /*roomLabel*/ ctx[0].transform, false);
+			}
+
+			if (dirty & /*roomLabel*/ 1) {
+				set_style(div1, "opacity", /*roomLabel*/ ctx[0].visible ? 1 : 0, false);
+			}
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div1);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { five } = $$props;
+	let { roomLabel } = $$props;
+
+	function onClick() {
+		five.setState({
+			panoIndex: roomLabel.panoIndex,
+			mode: 'Panorama',
+			longitude: roomLabel.longitude
+		});
+	}
+
+	$$self.$$set = $$props => {
+		if ('five' in $$props) $$invalidate(2, five = $$props.five);
+		if ('roomLabel' in $$props) $$invalidate(0, roomLabel = $$props.roomLabel);
+	};
+
+	return [roomLabel, onClick, five];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { five: 2, roomLabel: 0 }, add_css);
+	}
+}
+
+export default Component;

package/libs/ModelRoomLabelPlugin/RoomLabelItems.js

@@ -0,0 +1,255 @@
+/* generated by Svelte v3.47.0 */
+import {
+	SvelteComponent,
+	add_render_callback,
+	add_resize_listener,
+	append_styles,
+	attr,
+	check_outros,
+	create_component,
+	destroy_component,
+	detach,
+	element,
+	empty,
+	group_outros,
+	init,
+	insert,
+	mount_component,
+	outro_and_destroy_block,
+	safe_not_equal,
+	transition_in,
+	transition_out,
+	update_keyed_each
+} from "svelte/internal";
+
+import { onDestroy, onMount } from 'svelte';
+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}");
+}
+
+function get_each_context(ctx, list, i) {
+	const child_ctx = ctx.slice();
+	child_ctx[9] = list[i];
+	return child_ctx;
+}
+
+// (70:2) {#each roomLabels as roomLableItem (roomLableItem.id)}
+function create_each_block(key_1, ctx) {
+	let first;
+	let roomlabelitem;
+	let current;
+
+	roomlabelitem = new RoomLabelItem({
+			props: {
+				roomLabel: /*roomLableItem*/ ctx[9],
+				five: /*five*/ ctx[1]
+			}
+		});
+
+	return {
+		key: key_1,
+		first: null,
+		c() {
+			first = empty();
+			create_component(roomlabelitem.$$.fragment);
+			this.first = first;
+		},
+		m(target, anchor) {
+			insert(target, first, anchor);
+			mount_component(roomlabelitem, target, anchor);
+			current = true;
+		},
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+			const roomlabelitem_changes = {};
+			if (dirty & /*roomLabels*/ 1) roomlabelitem_changes.roomLabel = /*roomLableItem*/ ctx[9];
+			if (dirty & /*five*/ 2) roomlabelitem_changes.five = /*five*/ ctx[1];
+			roomlabelitem.$set(roomlabelitem_changes);
+		},
+		i(local) {
+			if (current) return;
+			transition_in(roomlabelitem.$$.fragment, local);
+			current = true;
+		},
+		o(local) {
+			transition_out(roomlabelitem.$$.fragment, local);
+			current = false;
+		},
+		d(detaching) {
+			if (detaching) detach(first);
+			destroy_component(roomlabelitem, detaching);
+		}
+	};
+}
+
+function create_fragment(ctx) {
+	let div;
+	let each_blocks = [];
+	let each_1_lookup = new Map();
+	let div_resize_listener;
+	let current;
+	let each_value = /*roomLabels*/ ctx[0];
+	const get_key = ctx => /*roomLableItem*/ ctx[9].id;
+
+	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", "room-labels-container svelte-185yvaa");
+			add_render_callback(() => /*div_elementresize_handler*/ ctx[4].call(div));
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+
+			for (let i = 0; i < each_blocks.length; i += 1) {
+				each_blocks[i].m(div, null);
+			}
+
+			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[4].bind(div));
+			current = true;
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*roomLabels, five*/ 3) {
+				each_value = /*roomLabels*/ ctx[0];
+				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();
+			}
+
+			div_resize_listener();
+		}
+	};
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let { five } = $$props;
+	let { roomLabels } = $$props;
+	let containerWidth;
+	let containerHeight;
+
+	function getLabelVisible(five, roomLabelItem) {
+		// 先看是不是在当前展示的楼层上
+		const isLabelInFloor = five.model.shownFloor === null || roomLabelItem.floorIndex === five.model.shownFloor;
+
+		if (!isLabelInFloor) return false;
+
+		// 再看是不是被模型遮挡
+		const raycaster = new Raycaster();
+
+		const cameraPosition = five.camera.position.clone();
+		const position = new Vector3(roomLabelItem.position.x, roomLabelItem.position.y, roomLabelItem.position.z);
+		const vectorDistance = position.distanceTo(cameraPosition);
+		raycaster.set(cameraPosition.clone(), position.clone().sub(cameraPosition).normalize());
+		const [intersection] = five.model.intersectRaycaster(raycaster);
+		if (intersection && intersection.distance + 1 < vectorDistance) return false;
+		return true;
+	}
+
+	function getLabelTransform(five, roomLabelItem) {
+		const position = new Vector3(roomLabelItem.position.x, roomLabelItem.position.y, roomLabelItem.position.z);
+		const mouse = position.clone().project(five.camera);
+		const xOffset = Math.ceil((mouse.x + 1) / 2 * containerWidth);
+		const yOffset = Math.ceil((-mouse.y + 1) / 2 * containerHeight);
+		return `translate(${xOffset}px, ${yOffset}px)`;
+	}
+
+	function getFormatedRoomLabels(five, labels) {
+		const newLabels = labels.map(roomLabelItem => {
+			// 计算是否可见，如果不可见，不会更新位置
+			const visible = getLabelVisible(five, roomLabelItem);
+
+			if (!visible) return Object.assign(Object.assign({}, roomLabelItem), { visible });
+
+			// 更新位置
+			const transform = getLabelTransform(five, roomLabelItem);
+
+			return Object.assign(Object.assign({}, roomLabelItem), { visible, transform });
+		});
+
+		const sortedRoomLabelItems = newLabels.filter(({ visible }) => visible).map(roomLabelItem => ({
+			roomLabelItem,
+			distance: new Vector3(...Object.values(roomLabelItem.position)).clone().distanceTo(five.camera.position)
+		})).sort((a, b) => a.distance - b.distance);
+
+		return newLabels.map(roomLabelItem => {
+			const sortIndex = sortedRoomLabelItems.findIndex(item => item.roomLabelItem.id === roomLabelItem.id);
+			if (sortIndex !== undefined) return Object.assign(Object.assign({}, roomLabelItem), { zIndex: sortIndex * 10 });
+			return roomLabelItem;
+		});
+	}
+
+	function onFiveCameraUpdate() {
+		$$invalidate(0, roomLabels = getFormatedRoomLabels(five, roomLabels));
+	}
+
+	five.on('cameraUpdate', onFiveCameraUpdate);
+	five.on('modelShownFloorChange', onFiveCameraUpdate);
+
+	onDestroy(() => {
+		five.off('cameraUpdate', onFiveCameraUpdate);
+		five.off('modelShownFloorChange', onFiveCameraUpdate);
+	});
+
+	onMount(() => {
+		onFiveCameraUpdate();
+	});
+
+	function div_elementresize_handler() {
+		containerWidth = this.clientWidth;
+		containerHeight = this.clientHeight;
+		$$invalidate(2, containerWidth);
+		$$invalidate(3, containerHeight);
+	}
+
+	$$self.$$set = $$props => {
+		if ('five' in $$props) $$invalidate(1, five = $$props.five);
+		if ('roomLabels' in $$props) $$invalidate(0, roomLabels = $$props.roomLabels);
+	};
+
+	return [roomLabels, five, containerWidth, containerHeight, div_elementresize_handler];
+}
+
+class Component extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { five: 1, roomLabels: 0 }, add_css);
+	}
+}
+
+export default Component;

package/libs/ModelRoomLabelPlugin/utils/parseData.d.ts

@@ -1,3 +1,3 @@
-import { ModelRoomLabelPluginData, RoomLabel } from '../typings';
+import type { ModelRoomLabelPluginData, RoomLabel } from '../typings';
 /** @description 下划线转驼峰 */
 export declare function parseModelRoomLabelPluginData(data: ModelRoomLabelPluginData): RoomLabel[];

package/libs/ModelTVVideoPlugin/index.d.ts

@@ -0,0 +1,4 @@
+import type { FivePlugin } from '@realsee/five';
+import type { ModelTVVideoPluginExportType, ModelTVVideoPluginParameterType } from "./typings";
+export declare const ModelTVVideoPlugin: FivePlugin<ModelTVVideoPluginParameterType, ModelTVVideoPluginExportType>;
+export default ModelTVVideoPlugin;