@realsee/dnalogel 2.0.0-alpha.26-beta → 2.0.0-alpha.28-beta

package/libs/ModelEntryDoorGuidePlugin/index.js

@@ -1,140 +1,3 @@
-import { AnimationMixer, MeshBasicMaterial } from 'three';
-import * as THREE from 'three';
-import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';
-import createCanvasTextTexture from '../shared-utils/createCanvasTextTexture';
-import transformPositionToVector3 from '../shared-utils/three/transformPositionToVector3';
-import transfromToMeshBasicMaterial from '../shared-utils/three/transfromToMeshBasicMaterial';
-/**
- * 模型入户门引导插件
- */
-export const ModelEntryDoorGuidePlugin = (five, params) => {
-    var _a, _b, _c;
-    // 局部状态
-    const state = {};
-    const defaultAnimationEnable = (_a = params.animationEnabled) !== null && _a !== void 0 ? _a : true;
-    const defaultModelPosition = (_b = params.position) !== null && _b !== void 0 ? _b : undefined;
-    const defaultRad = (_c = params.rad) !== null && _c !== void 0 ? _c : undefined;
-    const defaultFbxUrl = params.fbx_url || '//vrlab-image4.ljcdn.com/release/web/entryDoorMini/Anim_Door1.fbx';
-    const mixers = [];
-    const load = async (data) => {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const position = (_a = data === null || data === void 0 ? void 0 : data.position) !== null && _a !== void 0 ? _a : defaultModelPosition;
-        if (!position)
-            return Promise.reject(`ModelEntryDoorGuidePlugin.load(): position is undefined`);
-        const modelPosition = transformPositionToVector3(position);
-        const rad = (_b = data === null || data === void 0 ? void 0 : data.rad) !== null && _b !== void 0 ? _b : defaultRad;
-        const fbxUrl = (_c = data === null || data === void 0 ? void 0 : data.fbx_url) !== null && _c !== void 0 ? _c : defaultFbxUrl;
-        state.rad = rad;
-        if (rad === undefined)
-            return Promise.reject(`ModelEntryDoorGuidePlugin.load(): rad is ${rad}`);
-        // 加载模型
-        const object = await new FBXLoader().loadAsync(fbxUrl);
-        // 设置位置
-        object.position.copy(modelPosition);
-        object.rotation.z = rad;
-        object.scale.set(0.8, 0.8, 0.8);
-        transfromToMeshBasicMaterial(object, { transparent: true, side: THREE.DoubleSide });
-        const textMesh = (_g = (_f = (_e = (_d = object.children) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.children) === null || _f === void 0 ? void 0 : _f[3]) === null || _g === void 0 ? void 0 : _g.clone();
-        if (!textMesh)
-            return Promise.reject(`ModelEntryDoorGuidePlugin.load(): textMesh is ${textMesh}`);
-        textMesh.material = new MeshBasicMaterial({ transparent: true, map: createCanvasTextTexture('入户门') });
-        textMesh.renderOrder = 3;
-        object.children[0].add(textMesh);
-        state.object = object;
-        return true;
-    };
-    const initAnimation = () => {
-        if (state.animation)
-            return;
-        if (!state.object)
-            return console.error('ModelEntryDoorGuidePlugin.initAnimation(): state.object is ', state.object);
-        // action
-        const animationSpeed = 1;
-        const mixer = new AnimationMixer(state.object);
-        mixers.push(mixer);
-        const action = mixer.clipAction(state.object.animations[0]);
-        action.timeScale = animationSpeed;
-        let stopAnimation;
-        const requestAnimationFrameLoop = () => {
-            let index = 0;
-            let oldTime = 0;
-            const minDeltaTime = 1000 / 30;
-            const animation = (time) => {
-                index = requestAnimationFrame(animation);
-                const deltaTime = time - oldTime;
-                if (deltaTime < minDeltaTime)
-                    return;
-                oldTime = time;
-                mixers.forEach((mixer) => mixer.update(deltaTime / 1000));
-                five.needsRender = true;
-            };
-            index = requestAnimationFrame(animation);
-            return () => {
-                cancelAnimationFrame(index);
-            };
-        };
-        const play = () => {
-            if (stopAnimation)
-                return;
-            action.play();
-            stopAnimation = requestAnimationFrameLoop();
-            // 开始播动画时，rotation可能会还原
-            requestAnimationFrame(() => {
-                if (state.object && state.object.rotation.z !== state.rad)
-                    state.object.rotation.z = state.rad;
-            });
-        };
-        const stop = () => {
-            action.stop();
-            stopAnimation === null || stopAnimation === void 0 ? void 0 : stopAnimation();
-            stopAnimation = undefined;
-        };
-        const animation = { play, stop };
-        state.animation = animation;
-    };
-    const show = (config) => {
-        var _a;
-        if (!state.object)
-            return console.error('ModelEntryDoorGuidePlugin.enable(): object is ', state.object);
-        const animationEnable = (_a = config === null || config === void 0 ? void 0 : config.animationEnable) !== null && _a !== void 0 ? _a : defaultAnimationEnable;
-        if (animationEnable) {
-            if (!state.animation)
-                initAnimation();
-            state.animation.play();
-        }
-        five.scene.add(state.object);
-        five.needsRender = true;
-    };
-    const hide = () => {
-        if (!state.object)
-            return;
-        if (state.animation)
-            state.animation.stop();
-        five.scene.remove(state.object);
-        five.needsRender = true;
-    };
-    const modeChangeHandler = (mode) => (mode === 'Floorplan' ? show() : hide());
-    const enable = (config) => {
-        if (state.enabled)
-            return true;
-        state.enabled = true;
-        modeChangeHandler(five.currentMode);
-        five.on('modeChange', modeChangeHandler);
-        show(config);
-        return true;
-    };
-    const disable = () => {
-        if (!state.enabled)
-            return true;
-        state.enabled = false;
-        hide();
-        five.off('modeChange', modeChangeHandler);
-        return true;
-    };
-    return { load, enable, disable };
-};
-export const modelEntryDoorGuidePluginServerParams = {
-    name: 'ModelEntryDoorGuidePlugin',
-    version: 0,
-};
+import ModelEntryDoorGuidePlugin from './Plugin';
+export { ModelEntryDoorGuidePlugin };
 export default ModelEntryDoorGuidePlugin;

package/libs/ModelItemLabelPlugin/ItemLabelComponent.js

@@ -40,7 +40,7 @@ function get_each_context(ctx, list, i) {
 	return child_ctx;
 }
 
-// (162:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+// (163:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
 function create_each_block(key_1, ctx) {
 	let first;
 	let itemlabelitem;

package/libs/ModelItemLabelPlugin/ModelItemLabelPlugin.d.ts

@@ -0,0 +1,4 @@
+import type { FivePlugin } from "@realsee/five";
+import { ModelItemLabelPluginExportReturnsType, ModelItemLabelPluginParametersType } from "./typings";
+export declare const ModelItemLabelPlugin: FivePlugin<ModelItemLabelPluginParametersType, ModelItemLabelPluginExportReturnsType>;
+export default ModelItemLabelPlugin;

package/libs/ModelItemLabelPlugin/ModelItemLabelPlugin.js

@@ -0,0 +1,120 @@
+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%;
+        z-index: 5;
+    `;
+    pluginState.container.style.pointerEvents = 'none'; // 写到 cssText 里不生效
+    const appendTo = (wrapper) => {
+        pluginState.wrapper = wrapper;
+        wrapper.appendChild(pluginState.container);
+        render();
+        return true;
+    };
+    const load = (data) => {
+        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 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 监听
+    const removeListener4Five = () => {
+        five.off('modeChange', onFiveModeChange);
+    };
+    const onFiveModeChange = (mode) => {
+        if (!pluginState.enabled)
+            return;
+        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/index.d.ts

@@ -1,4 +1,9 @@
-import type { FivePlugin } from "@realsee/five";
-import { ModelItemLabelPluginExportReturnsType, ModelItemLabelPluginParametersType } from "./typings";
-export declare const ModelItemLabelPlugin: FivePlugin<ModelItemLabelPluginParametersType, ModelItemLabelPluginExportReturnsType>;
+import ModelItemLabelPlugin from './ModelItemLabelPlugin';
+export { ModelItemLabelPlugin };
 export default ModelItemLabelPlugin;
+export declare const modelItemLabelPluginServerParams: {
+    name: string;
+    version: number;
+};
+export type { ModelItemLabelPluginParametersType, ModelItemLabelPluginData, ModelItemLabelPluginExportReturnsType } from './typings';
+export { DISPLAY_STRATEGY_TYPE } from './typings';

package/libs/ModelItemLabelPlugin/index.js

@@ -1,120 +1,8 @@
-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%;
-        z-index: 5;
-    `;
-    pluginState.container.style.pointerEvents = 'none'; // 写到 cssText 里不生效
-    const appendTo = (wrapper) => {
-        pluginState.wrapper = wrapper;
-        wrapper.appendChild(pluginState.container);
-        render();
-        return true;
-    };
-    const load = (data) => {
-        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 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 监听
-    const removeListener4Five = () => {
-        five.off('modeChange', onFiveModeChange);
-    };
-    const onFiveModeChange = (mode) => {
-        if (!pluginState.enabled)
-            return;
-        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
-    };
-};
+import ModelItemLabelPlugin from './ModelItemLabelPlugin';
+export { ModelItemLabelPlugin };
 export default ModelItemLabelPlugin;
+export const modelItemLabelPluginServerParams = {
+    name: 'ModelItemLabelPlugin',
+    version: 0,
+};
+export { DISPLAY_STRATEGY_TYPE } from './typings';

package/libs/ModelRoomLabelPlugin/RoomLabelItems.js

@@ -11,6 +11,7 @@ import {
 	detach,
 	element,
 	empty,
+	globals,
 	group_outros,
 	init,
 	insert,
@@ -22,7 +23,8 @@ import {
 	update_keyed_each
 } from "svelte/internal";
 
-import { onDestroy, onMount } from 'svelte';
+const { Map: Map_1 } = globals;
+import { onDestroy } from 'svelte';
 import { Raycaster, Vector3 } from 'three';
 import RoomLabelItem from './RoomLabelItem';
 
@@ -32,11 +34,11 @@ function add_css(target) {
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[9] = list[i];
+	child_ctx[12] = list[i];
 	return child_ctx;
 }
 
-// (70:2) {#each roomLabels as roomLableItem (roomLableItem.id)}
+// (82:2) {#each roomLabels as roomLableItem (roomLableItem.id)}
 function create_each_block(key_1, ctx) {
 	let first;
 	let roomlabelitem;
@@ -44,7 +46,7 @@ function create_each_block(key_1, ctx) {
 
 	roomlabelitem = new RoomLabelItem({
 			props: {
-				roomLabel: /*roomLableItem*/ ctx[9],
+				roomLabel: /*roomLableItem*/ ctx[12],
 				five: /*five*/ ctx[1]
 			}
 		});
@@ -65,7 +67,7 @@ function create_each_block(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const roomlabelitem_changes = {};
-			if (dirty & /*roomLabels*/ 1) roomlabelitem_changes.roomLabel = /*roomLableItem*/ ctx[9];
+			if (dirty & /*roomLabels*/ 1) roomlabelitem_changes.roomLabel = /*roomLableItem*/ ctx[12];
 			if (dirty & /*five*/ 2) roomlabelitem_changes.five = /*five*/ ctx[1];
 			roomlabelitem.$set(roomlabelitem_changes);
 		},
@@ -88,11 +90,11 @@ function create_each_block(key_1, ctx) {
 function create_fragment(ctx) {
 	let div;
 	let each_blocks = [];
-	let each_1_lookup = new Map();
+	let each_1_lookup = new Map_1();
 	let div_resize_listener;
 	let current;
 	let each_value = /*roomLabels*/ ctx[0];
-	const get_key = ctx => /*roomLableItem*/ ctx[9].id;
+	const get_key = ctx => /*roomLableItem*/ ctx[12].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context(ctx, each_value, i);
@@ -109,7 +111,7 @@ function create_fragment(ctx) {
 			}
 
 			attr(div, "class", "room-labels-container svelte-185yvaa");
-			add_render_callback(() => /*div_elementresize_handler*/ ctx[4].call(div));
+			add_render_callback(() => /*div_elementresize_handler*/ ctx[6].call(div));
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -118,7 +120,7 @@ function create_fragment(ctx) {
 				each_blocks[i].m(div, null);
 			}
 
-			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[4].bind(div));
+			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[6].bind(div));
 			current = true;
 		},
 		p(ctx, [dirty]) {
@@ -158,22 +160,17 @@ function create_fragment(ctx) {
 }
 
 function instance($$self, $$props, $$invalidate) {
+	let rendererSize;
 	let { five } = $$props;
 	let { roomLabels } = $$props;
 	let containerWidth;
 	let containerHeight;
+	let shownFloor = null;
 
-	function getLabelVisible(five, roomLabelItem) {
-		// 先看是不是在当前展示的楼层上
-		const isLabelInFloor = five.model.shownFloor === null || roomLabelItem.floorIndex === five.model.shownFloor;
-
-		if (!isLabelInFloor) return false;
-
-		// 再看是不是被模型遮挡
+	function getLabelVisible(item) {
 		const raycaster = new Raycaster();
-
 		const cameraPosition = five.camera.position.clone();
-		const position = new Vector3(roomLabelItem.position.x, roomLabelItem.position.y, roomLabelItem.position.z);
+		const position = new Vector3(item.position.x, item.position.y, item.position.z);
 		const vectorDistance = position.distanceTo(cameraPosition);
 		raycaster.set(cameraPosition.clone(), position.clone().sub(cameraPosition).normalize());
 		const [intersection] = five.model.intersectRaycaster(raycaster);
@@ -181,53 +178,60 @@ function instance($$self, $$props, $$invalidate) {
 		return true;
 	}
 
-	function getLabelTransform(five, roomLabelItem) {
-		const position = new Vector3(roomLabelItem.position.x, roomLabelItem.position.y, roomLabelItem.position.z);
+	function getLabelTransform(item, rendererSize) {
+		const position = new Vector3(item.position.x, item.position.y, item.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);
+		const xOffset = Math.ceil((mouse.x + 1) / 2 * rendererSize.x);
+		const yOffset = Math.ceil((-mouse.y + 1) / 2 * rendererSize.y);
 		return `translate(${xOffset}px, ${yOffset}px)`;
 	}
 
-	function getFormatedRoomLabels(five, labels) {
-		const newLabels = labels.map(roomLabelItem => {
-			// 计算是否可见，如果不可见，不会更新位置
-			const visible = getLabelVisible(five, roomLabelItem);
+	function getFormatedRoomLabels(rendererSize) {
+		// 因为 item distance 需要重复计算，所以缓存一下
+		const distanceMap = new Map();
+
+		function getItemDistance(item) {
+			const cacheDistance = distanceMap.get(item.id);
+			if (cacheDistance) return cacheDistance;
+			const { x, y, z } = item.position;
+			const distance = new Vector3(x, y, z).clone().distanceTo(five.camera.position);
+			distanceMap.set(item.id, distance);
+			return distance;
+		}
 
-			if (!visible) return Object.assign(Object.assign({}, roomLabelItem), { visible });
+		const formatedItems = roomLabels.map(item => {
+			const visible = getLabelVisible(item);
 
-			// 更新位置
-			const transform = getLabelTransform(five, roomLabelItem);
+			const transform = visible
+			? getLabelTransform(item, rendererSize)
+			: item.transform;
 
-			return Object.assign(Object.assign({}, roomLabelItem), { visible, transform });
-		});
+			const itemDistance = getItemDistance(item);
 
-		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);
+			// visible === true 的 item 中，distance 比自己小的 item 个数
+			const minItemLen = roomLabels.filter(item => item.visible && getItemDistance(item) < itemDistance).length;
 
-		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;
+			const zIndex = minItemLen * 10;
+			return Object.assign(Object.assign({}, item), { visible, transform, zIndex });
 		});
+
+		return formatedItems;
 	}
 
 	function onFiveCameraUpdate() {
-		$$invalidate(0, roomLabels = getFormatedRoomLabels(five, roomLabels));
+		$$invalidate(0, roomLabels = getFormatedRoomLabels(rendererSize));
+	}
+
+	function onFiveModelShownFloorChange(floorIndex) {
+		$$invalidate(4, shownFloor = floorIndex);
 	}
 
 	five.on('cameraUpdate', onFiveCameraUpdate);
-	five.on('modelShownFloorChange', onFiveCameraUpdate);
+	five.on('modelShownFloorChange', onFiveModelShownFloorChange);
 
 	onDestroy(() => {
 		five.off('cameraUpdate', onFiveCameraUpdate);
-		five.off('modelShownFloorChange', onFiveCameraUpdate);
-	});
-
-	onMount(() => {
-		onFiveCameraUpdate();
+		five.off('modelShownFloorChange', onFiveModelShownFloorChange);
 	});
 
 	function div_elementresize_handler() {
@@ -242,7 +246,39 @@ function instance($$self, $$props, $$invalidate) {
 		if ('roomLabels' in $$props) $$invalidate(0, roomLabels = $$props.roomLabels);
 	};
 
-	return [roomLabels, five, containerWidth, containerHeight, div_elementresize_handler];
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*containerWidth, containerHeight*/ 12) {
+			$: $$invalidate(5, rendererSize = { x: containerWidth, y: containerHeight });
+		}
+
+		if ($$self.$$.dirty & /*rendererSize*/ 32) {
+			$: {
+				// rendererSize 变化时，触发 reRender
+				$$invalidate(0, roomLabels = getFormatedRoomLabels(rendererSize));
+			}
+		}
+
+		if ($$self.$$.dirty & /*roomLabels, shownFloor*/ 17) {
+			$: {
+				// shownFloor 变化时，更新 item visible
+				$$invalidate(0, roomLabels = roomLabels.map(item => {
+					const isLabelInFloor = shownFloor === null || item.floorIndex === shownFloor;
+					const visible = isLabelInFloor ? item.visible : false;
+					return Object.assign(Object.assign({}, item), { visible });
+				}));
+			}
+		}
+	};
+
+	return [
+		roomLabels,
+		five,
+		containerWidth,
+		containerHeight,
+		shownFloor,
+		rendererSize,
+		div_elementresize_handler
+	];
 }
 
 class Component extends SvelteComponent {

package/libs/ModelTVVideoPlugin/Plugin.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;