@realsee/dnalogel 2.0.0-alpha.10 → 2.0.0-alpha.13

package/libs/ModelItemLabelPlugin/index.js

@@ -0,0 +1,172 @@
+import { Five, Subscribe } from "@realsee/five";
+import ItemLabelComponent from './ItemLabelComponent';
+import { DISPLAY_STRATEGY_TYPE } from "./typings";
+import { parseModelItemLabelPluginData } from "./utils/parseData";
+export const ModelItemLabelPlugin = (five, params) => {
+    var _a, _b;
+    const pluginState = {
+        container: document.createElement('div'),
+        data: null,
+        enabled: true,
+        fiveModeEnabled: undefined,
+        itemLabels: [],
+        wrapper: null,
+        app: undefined,
+        hooks: new Subscribe(),
+        modelOcclusionEnable: (_a = params === null || params === void 0 ? void 0 : params.modelOcclusionEnable) !== null && _a !== void 0 ? _a : true,
+        displayStrategyType: (_b = params === null || params === void 0 ? void 0 : params.displayStrategyType) !== null && _b !== void 0 ? _b : DISPLAY_STRATEGY_TYPE.SMALL
+    };
+    pluginState.container.setAttribute('class', 'model-item-label-plugin-container');
+    pluginState.container.style.cssText = `
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        pointerEvents: none;
+    `;
+    const appendTo = (wrapper) => {
+        pluginState.wrapper = wrapper;
+        wrapper.appendChild(pluginState.container);
+        render();
+        return true;
+    };
+    const load = (data) => {
+        console.log('🐶--当前标签总条数： ', data.model_item_labels.length);
+        pluginState.itemLabels = parseModelItemLabelPluginData(data);
+        render();
+    };
+    const enable = () => {
+        if (pluginState.enabled)
+            return true;
+        pluginState.enabled = true;
+        render();
+        return true;
+    };
+    const disable = () => {
+        if (!pluginState.enabled)
+            return true;
+        pluginState.enabled = false;
+        render();
+        return true;
+    };
+    const dispose = () => {
+        removeListener4Five();
+        pluginState.container.remove();
+    };
+    const handleRerender = () => {
+        if (!pluginState.enabled || !pluginState.fiveModeEnabled)
+            return;
+        disable();
+    };
+    const rerender = (a, b, c) => {
+        if (!pluginState.fiveModeEnabled)
+            return;
+        if (!c)
+            return;
+        enable();
+        render();
+    };
+    const handleInteriaPanRerender = (a, b) => {
+        if (!pluginState.fiveModeEnabled)
+            return;
+        if (!b)
+            return;
+        enable();
+        render();
+    };
+    const handleWantsPanGesture = (pose, final) => {
+        if (pose) {
+            handleRerender();
+        }
+    };
+    const handlePanGesture = (pose, final) => {
+        if (!pluginState.fiveModeEnabled)
+            return;
+        if (!final)
+            return;
+        enable();
+        render();
+    };
+    const render = () => {
+        var _a;
+        if (!pluginState.wrapper)
+            return;
+        // 只要不可展示，销毁容器
+        if (!pluginState.enabled || !pluginState.fiveModeEnabled) {
+            (_a = pluginState.app) === null || _a === void 0 ? void 0 : _a.$destroy();
+            pluginState.app = undefined;
+            return;
+        }
+        // 正常显示时，分为 app 存在和不存在两种情况，如果存在，传值，不存在则初始化并传值
+        if (!pluginState.app) {
+            pluginState.app = new ItemLabelComponent({
+                target: pluginState.container,
+                props: {
+                    five: five,
+                    modelOcclusionEnable: pluginState.modelOcclusionEnable,
+                    itemLabels: pluginState.itemLabels,
+                    wrapper: pluginState.wrapper,
+                    hooks: pluginState.hooks,
+                    displayStrategyType: pluginState.displayStrategyType
+                }
+            });
+        }
+        else {
+            pluginState.app.$set({
+                five: five,
+                itemLabels: pluginState.itemLabels
+            });
+        }
+    };
+    // 添加 five 监听
+    const addListener4Five = () => {
+        five.on('modeChange', onFiveModeChange);
+        five.once('dispose', dispose);
+        // five.on('wantsGesture', handleRerender)
+        // five.on('gesture', rerender)
+        five.on('wantsMouseWheel', handleRerender);
+        five.on('mouseWheel', rerender);
+        five.on('wantsInteriaPan', handleRerender);
+        five.on('interiaPan', handleInteriaPanRerender);
+        five.on('wantsPanGesture', handleWantsPanGesture);
+        five.on('panGesture', handlePanGesture);
+        five.on('wantsPinchGesture', handleRerender);
+        five.on('pinchGesture', rerender);
+    };
+    // 取消 five 监听
+    const removeListener4Five = () => {
+        five.off('modeChange', onFiveModeChange);
+        // five.off('wantsGesture', handleRerender)
+        // five.off('gesture', rerender)
+        five.off('wantsMouseWheel', handleRerender);
+        five.off('mouseWheel', rerender);
+        five.off('wantsInteriaPan', handleRerender);
+        five.off('interiaPan', handleInteriaPanRerender);
+        five.off('wantsPanGesture', handleWantsPanGesture);
+        five.off('panGesture', handlePanGesture);
+        five.off('wantsPinchGesture', handleRerender);
+        five.off('pinchGesture', rerender);
+    };
+    const onFiveModeChange = (mode) => {
+        if (mode !== Five.Mode.Floorplan) {
+            pluginState.fiveModeEnabled = false;
+            render();
+            return;
+        }
+        five.once('initAnimationEnded', () => {
+            pluginState.fiveModeEnabled = five.currentMode === Five.Mode.Floorplan;
+            render();
+        });
+    };
+    addListener4Five();
+    return {
+        appendTo,
+        load,
+        enable,
+        disable,
+        dispose,
+        hooks: pluginState.hooks
+    };
+};
+export default ModelItemLabelPlugin;

package/libs/ModelItemLabelPlugin/typings.d.ts

@@ -0,0 +1,55 @@
+import ItemLabelComponent from './ItemLabelComponent';
+import type { Subscribe } from "@realsee/five";
+import { PluginEvent } from "./events.type";
+export declare enum DISPLAY_STRATEGY_TYPE {
+    SMALL = "small",
+    MIDLLE = "middle",
+    LARGE = "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,6 @@
+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 || (DISPLAY_STRATEGY_TYPE = {}));

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

@@ -0,0 +1,3 @@
+import { 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';
 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
@@ -61,26 +116,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.enabled || !this.fiveModeEnabled) {
-            this.app?.$destroy();
+            (_a = this.app) === null || _a === void 0 ? void 0 : _a.$destroy();
             this.app = undefined;
             return;
         }

package/libs/ModelRoomLabelPlugin/RoomLabelItems.js

@@ -36,7 +36,7 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (68:2) {#each roomLabels as roomLableItem (roomLableItem.id)}
+// (70:2) {#each roomLabels as roomLableItem (roomLableItem.id)}
 function create_each_block(key_1, ctx) {
 	let first;
 	let roomlabelitem;
@@ -191,15 +191,15 @@ function instance($$self, $$props, $$invalidate) {
 
 	function getFormatedRoomLabels(five, labels) {
 		const newLabels = labels.map(roomLabelItem => {
-			// 计算是否可见，入股不可见，不会更新位置
+			// 计算是否可见，如果不可见，不会更新位置
 			const visible = getLabelVisible(five, roomLabelItem);
 
-			if (!visible) return { ...roomLabelItem, visible };
+			if (!visible) return Object.assign(Object.assign({}, roomLabelItem), { visible });
 
 			// 更新位置
 			const transform = getLabelTransform(five, roomLabelItem);
 
-			return { ...roomLabelItem, visible, transform };
+			return Object.assign(Object.assign({}, roomLabelItem), { visible, transform });
 		});
 
 		const sortedRoomLabelItems = newLabels.filter(({ visible }) => visible).map(roomLabelItem => ({
@@ -209,7 +209,7 @@ function instance($$self, $$props, $$invalidate) {
 
 		return newLabels.map(roomLabelItem => {
 			const sortIndex = sortedRoomLabelItems.findIndex(item => item.roomLabelItem.id === roomLabelItem.id);
-			if (sortIndex !== undefined) return { ...roomLabelItem, zIndex: sortIndex * 10 };
+			if (sortIndex !== undefined) return Object.assign(Object.assign({}, roomLabelItem), { zIndex: sortIndex * 10 });
 			return roomLabelItem;
 		});
 	}
@@ -219,9 +219,11 @@ function instance($$self, $$props, $$invalidate) {
 	}
 
 	five.on('cameraUpdate', onFiveCameraUpdate);
+	five.on('modelShownFloorChange', onFiveCameraUpdate);
 
 	onDestroy(() => {
 		five.off('cameraUpdate', onFiveCameraUpdate);
+		five.off('modelShownFloorChange', onFiveCameraUpdate);
 	});
 
 	onMount(() => {