@realsee/dnalogel 2.0.0-alpha.14 → 2.0.0-alpha.15

package/dist/index.js

@@ -14392,6 +14392,21 @@ class ItemLabelItem extends internal.SvelteComponent {
 	}
 }
 
+/**
+ * 创建一个防抖动函数，该函数会在 wait 毫秒后调用 func 方法
+ * @param func - 要防抖动的函数
+ * @param [wait=0] - 需要延迟的毫秒数
+ */
+function debounce(func, wait = 200) {
+    let last;
+    return function (...args) {
+        clearTimeout(last);
+        last = setTimeout(() => {
+            func(...args);
+        }, wait);
+    };
+}
+
 /* src/ModelItemLabelPlugin/ItemLabelComponent.svelte generated by Svelte v3.47.0 */
 
 function add_css(target) {
@@ -14400,11 +14415,11 @@ function add_css(target) {
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[26] = list[i];
+	child_ctx[27] = list[i];
 	return child_ctx;
 }
 
-// (179:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+// (159:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
 function create_each_block(key_1, ctx) {
 	let first;
 	let itemlabelitem;
@@ -14412,7 +14427,7 @@ function create_each_block(key_1, ctx) {
 
 	itemlabelitem = new ItemLabelItem({
 			props: {
-				itemLabel: /*itemLabelItem*/ ctx[26],
+				itemLabel: /*itemLabelItem*/ ctx[27],
 				hooks: /*hooks*/ ctx[0]
 			}
 		});
@@ -14433,7 +14448,7 @@ function create_each_block(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 			const itemlabelitem_changes = {};
-			if (dirty & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[26];
+			if (dirty & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[27];
 			if (dirty & /*hooks*/ 1) itemlabelitem_changes.hooks = /*hooks*/ ctx[0];
 			itemlabelitem.$set(itemlabelitem_changes);
 		},
@@ -14460,7 +14475,7 @@ function create_fragment(ctx) {
 	let div_resize_listener;
 	let current;
 	let each_value = /*renderItemLabels*/ ctx[1];
-	const get_key = ctx => /*itemLabelItem*/ ctx[26].id;
+	const get_key = ctx => /*itemLabelItem*/ ctx[27].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context(ctx, each_value, i);
@@ -14477,7 +14492,8 @@ function create_fragment(ctx) {
 			}
 
 			internal.attr(div, "class", "item-labels-container svelte-rmdeb");
-			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[9].call(div));
+			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[10].call(div));
+			internal.set_style(div, "opacity", /*itemsVisible*/ ctx[4] ? 1 : 0, false);
 		},
 		m(target, anchor) {
 			internal.insert(target, div, anchor);
@@ -14486,7 +14502,7 @@ function create_fragment(ctx) {
 				each_blocks[i].m(div, null);
 			}
 
-			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[9].bind(div));
+			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[10].bind(div));
 			current = true;
 		},
 		p(ctx, [dirty]) {
@@ -14496,6 +14512,10 @@ function create_fragment(ctx) {
 				each_blocks = internal.update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, internal.outro_and_destroy_block, create_each_block, null, get_each_context);
 				internal.check_outros();
 			}
+
+			if (dirty & /*itemsVisible*/ 16) {
+				internal.set_style(div, "opacity", /*itemsVisible*/ ctx[4] ? 1 : 0, false);
+			}
 		},
 		i(local) {
 			if (current) return;
@@ -14545,6 +14565,14 @@ function instance($$self, $$props, $$invalidate) {
 	// 计算重叠
 	let cssOffsetLists = [];
 
+	// 动画过程中 itemsVisible 为 false
+	let itemsVisible = true;
+
+	/**
+ * 可见性策略：
+ * 1、当前楼层(假设先不考虑多楼层)
+ * 2、模型未被遮挡（一个 box 有没有被遮挡的计算？ TODO）
+ * */
 	const getLabelVisible = (five, itemLabel) => {
 		// 虚拟 VR 仅有一层，不考虑楼层信息
 		const raycaster = new Raycaster();
@@ -14648,11 +14676,22 @@ function instance($$self, $$props, $$invalidate) {
 		$$invalidate(1, renderItemLabels = itemLabels);
 		curItemLabels = itemLabels;
 		onItemLabelUpdate();
-
-		// five.on('cameraUpdate', onItemLabelUpdate)
 		addResizeListener();
+
+		five.on('cameraUpdate', () => {
+			$$invalidate(4, itemsVisible = false);
+			handleCameraUpdate();
+		});
 	});
 
+	const handleCameraUpdate = debounce(
+		() => {
+			$$invalidate(4, itemsVisible = true);
+			onItemLabelUpdate();
+		},
+		300
+	);
+
 	const addResizeListener = () => {
 		wrapperSize = {
 			width: wrapper.clientWidth,
@@ -14666,7 +14705,6 @@ function instance($$self, $$props, $$invalidate) {
 		if (curItemLabels !== itemLabels) {
 			$$invalidate(1, renderItemLabels = itemLabels);
 			curItemLabels = itemLabels;
-			console.log('--debug--update--');
 			onItemLabelUpdate();
 		}
 	};
@@ -14684,9 +14722,8 @@ function instance($$self, $$props, $$invalidate) {
 		});
 
 	svelte.onDestroy(() => {
-		// five.off('cameraUpdate', onItemLabelUpdate)
+		five.off('cameraUpdate');
 		resizeObserver.unobserve(wrapper);
-
 		curItemLabels = null;
 		$$invalidate(1, renderItemLabels = null);
 		wrapperSize = { width: 0, height: 0 };
@@ -14700,12 +14737,12 @@ function instance($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ('five' in $$props) $$invalidate(4, five = $$props.five);
-		if ('modelOcclusionEnable' in $$props) $$invalidate(5, modelOcclusionEnable = $$props.modelOcclusionEnable);
-		if ('itemLabels' in $$props) $$invalidate(6, itemLabels = $$props.itemLabels);
-		if ('wrapper' in $$props) $$invalidate(7, wrapper = $$props.wrapper);
+		if ('five' in $$props) $$invalidate(5, five = $$props.five);
+		if ('modelOcclusionEnable' in $$props) $$invalidate(6, modelOcclusionEnable = $$props.modelOcclusionEnable);
+		if ('itemLabels' in $$props) $$invalidate(7, itemLabels = $$props.itemLabels);
+		if ('wrapper' in $$props) $$invalidate(8, wrapper = $$props.wrapper);
 		if ('hooks' in $$props) $$invalidate(0, hooks = $$props.hooks);
-		if ('displayStrategyType' in $$props) $$invalidate(8, displayStrategyType = $$props.displayStrategyType);
+		if ('displayStrategyType' in $$props) $$invalidate(9, displayStrategyType = $$props.displayStrategyType);
 	};
 
 	return [
@@ -14713,6 +14750,7 @@ function instance($$self, $$props, $$invalidate) {
 		renderItemLabels,
 		containerWidth,
 		containerHeight,
+		itemsVisible,
 		five,
 		modelOcclusionEnable,
 		itemLabels,
@@ -14733,12 +14771,12 @@ class ItemLabelComponent extends internal.SvelteComponent {
 			create_fragment,
 			internal.safe_not_equal,
 			{
-				five: 4,
-				modelOcclusionEnable: 5,
-				itemLabels: 6,
-				wrapper: 7,
+				five: 5,
+				modelOcclusionEnable: 6,
+				itemLabels: 7,
+				wrapper: 8,
 				hooks: 0,
-				displayStrategyType: 8
+				displayStrategyType: 9
 			},
 			add_css
 		);
@@ -14763,7 +14801,6 @@ const ModelItemLabelPlugin = (five$1, params) => {
         hooks: new five.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,
-        pending: false
     };
     pluginState.container.setAttribute('class', 'model-item-label-plugin-container');
     pluginState.container.style.cssText = `
@@ -14802,50 +14839,6 @@ const ModelItemLabelPlugin = (five$1, params) => {
         removeListener4Five();
         pluginState.container.remove();
     };
-    const handleRerender = () => {
-        if (!pluginState.enabled || !pluginState.fiveModeEnabled || pluginState.pending)
-            return;
-        pluginState.pending = true;
-        disable();
-    };
-    const rerender = (a, b, c) => {
-        if (!pluginState.pending)
-            return;
-        if (!pluginState.fiveModeEnabled)
-            return;
-        if (!c)
-            return;
-        pluginState.pending = false;
-        enable();
-        render();
-    };
-    const handleInteriaPanRerender = (a, b) => {
-        if (!pluginState.pending)
-            return;
-        if (!pluginState.fiveModeEnabled)
-            return;
-        if (!b)
-            return;
-        pluginState.pending = false;
-        enable();
-        render();
-    };
-    const handleWantsPanGesture = (pose, final) => {
-        if (pose) {
-            handleRerender();
-        }
-    };
-    const handlePanGesture = (pose, final) => {
-        if (!pluginState.pending)
-            return;
-        if (!pluginState.fiveModeEnabled)
-            return;
-        if (!final)
-            return;
-        pluginState.pending = false;
-        enable();
-        render();
-    };
     const render = () => {
         var _a;
         if (!pluginState.wrapper)
@@ -14881,33 +14874,13 @@ const ModelItemLabelPlugin = (five$1, params) => {
     const addListener4Five = () => {
         five$1.on('modeChange', onFiveModeChange);
         five$1.once('dispose', dispose);
-        // five.on('wantsGesture', handleRerender)
-        // five.on('gesture', rerender)
-        five$1.on('wantsMouseWheel', handleRerender);
-        five$1.on('mouseWheel', rerender);
-        five$1.on('wantsInteriaPan', handleRerender);
-        five$1.on('interiaPan', handleInteriaPanRerender);
-        five$1.on('wantsPanGesture', handleWantsPanGesture);
-        five$1.on('panGesture', handlePanGesture);
-        five$1.on('wantsPinchGesture', handleRerender);
-        five$1.on('pinchGesture', rerender);
     };
     // 取消 five 监听
     const removeListener4Five = () => {
         five$1.off('modeChange', onFiveModeChange);
-        // five.off('wantsGesture', handleRerender)
-        // five.off('gesture', rerender)
-        five$1.off('wantsMouseWheel', handleRerender);
-        five$1.off('mouseWheel', rerender);
-        five$1.off('wantsInteriaPan', handleRerender);
-        five$1.off('interiaPan', handleInteriaPanRerender);
-        five$1.off('wantsPanGesture', handleWantsPanGesture);
-        five$1.off('panGesture', handlePanGesture);
-        five$1.off('wantsPinchGesture', handleRerender);
-        five$1.off('pinchGesture', rerender);
     };
     const onFiveModeChange = (mode) => {
-        if (!pluginState.enabled || pluginState.pending)
+        if (!pluginState.enabled)
             return;
         if (mode !== five.Five.Mode.Floorplan) {
             pluginState.fiveModeEnabled = false;

package/dist/index.umd.js

@@ -14381,6 +14381,21 @@
     	}
     }
 
+    /**
+     * 创建一个防抖动函数，该函数会在 wait 毫秒后调用 func 方法
+     * @param func - 要防抖动的函数
+     * @param [wait=0] - 需要延迟的毫秒数
+     */
+    function debounce(func, wait = 200) {
+        let last;
+        return function (...args) {
+            clearTimeout(last);
+            last = setTimeout(() => {
+                func(...args);
+            }, wait);
+        };
+    }
+
     /* src/ModelItemLabelPlugin/ItemLabelComponent.svelte generated by Svelte v3.47.0 */
 
     function add_css(target) {
@@ -14389,11 +14404,11 @@
 
     function get_each_context(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[26] = list[i];
+    	child_ctx[27] = list[i];
     	return child_ctx;
     }
 
-    // (179:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+    // (159:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
     function create_each_block(key_1, ctx) {
     	let first;
     	let itemlabelitem;
@@ -14401,7 +14416,7 @@
 
     	itemlabelitem = new ItemLabelItem({
     			props: {
-    				itemLabel: /*itemLabelItem*/ ctx[26],
+    				itemLabel: /*itemLabelItem*/ ctx[27],
     				hooks: /*hooks*/ ctx[0]
     			}
     		});
@@ -14422,7 +14437,7 @@
     		p(new_ctx, dirty) {
     			ctx = new_ctx;
     			const itemlabelitem_changes = {};
-    			if (dirty & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[26];
+    			if (dirty & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[27];
     			if (dirty & /*hooks*/ 1) itemlabelitem_changes.hooks = /*hooks*/ ctx[0];
     			itemlabelitem.$set(itemlabelitem_changes);
     		},
@@ -14449,7 +14464,7 @@
     	let div_resize_listener;
     	let current;
     	let each_value = /*renderItemLabels*/ ctx[1];
-    	const get_key = ctx => /*itemLabelItem*/ ctx[26].id;
+    	const get_key = ctx => /*itemLabelItem*/ ctx[27].id;
 
     	for (let i = 0; i < each_value.length; i += 1) {
     		let child_ctx = get_each_context(ctx, each_value, i);
@@ -14466,7 +14481,8 @@
     			}
 
     			internal.attr(div, "class", "item-labels-container svelte-rmdeb");
-    			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[9].call(div));
+    			internal.add_render_callback(() => /*div_elementresize_handler*/ ctx[10].call(div));
+    			internal.set_style(div, "opacity", /*itemsVisible*/ ctx[4] ? 1 : 0, false);
     		},
     		m(target, anchor) {
     			internal.insert(target, div, anchor);
@@ -14475,7 +14491,7 @@
     				each_blocks[i].m(div, null);
     			}
 
-    			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[9].bind(div));
+    			div_resize_listener = internal.add_resize_listener(div, /*div_elementresize_handler*/ ctx[10].bind(div));
     			current = true;
     		},
     		p(ctx, [dirty]) {
@@ -14485,6 +14501,10 @@
     				each_blocks = internal.update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div, internal.outro_and_destroy_block, create_each_block, null, get_each_context);
     				internal.check_outros();
     			}
+
+    			if (dirty & /*itemsVisible*/ 16) {
+    				internal.set_style(div, "opacity", /*itemsVisible*/ ctx[4] ? 1 : 0, false);
+    			}
     		},
     		i(local) {
     			if (current) return;
@@ -14534,6 +14554,14 @@
     	// 计算重叠
     	let cssOffsetLists = [];
 
+    	// 动画过程中 itemsVisible 为 false
+    	let itemsVisible = true;
+
+    	/**
+     * 可见性策略：
+     * 1、当前楼层(假设先不考虑多楼层)
+     * 2、模型未被遮挡（一个 box 有没有被遮挡的计算？ TODO）
+     * */
     	const getLabelVisible = (five, itemLabel) => {
     		// 虚拟 VR 仅有一层，不考虑楼层信息
     		const raycaster = new Raycaster();
@@ -14637,11 +14665,22 @@
     		$$invalidate(1, renderItemLabels = itemLabels);
     		curItemLabels = itemLabels;
     		onItemLabelUpdate();
-
-    		// five.on('cameraUpdate', onItemLabelUpdate)
     		addResizeListener();
+
+    		five.on('cameraUpdate', () => {
+    			$$invalidate(4, itemsVisible = false);
+    			handleCameraUpdate();
+    		});
     	});
 
+    	const handleCameraUpdate = debounce(
+    		() => {
+    			$$invalidate(4, itemsVisible = true);
+    			onItemLabelUpdate();
+    		},
+    		300
+    	);
+
     	const addResizeListener = () => {
     		wrapperSize = {
     			width: wrapper.clientWidth,
@@ -14655,7 +14694,6 @@
     		if (curItemLabels !== itemLabels) {
     			$$invalidate(1, renderItemLabels = itemLabels);
     			curItemLabels = itemLabels;
-    			console.log('--debug--update--');
     			onItemLabelUpdate();
     		}
     	};
@@ -14673,9 +14711,8 @@
     		});
 
     	svelte.onDestroy(() => {
-    		// five.off('cameraUpdate', onItemLabelUpdate)
+    		five.off('cameraUpdate');
     		resizeObserver.unobserve(wrapper);
-
     		curItemLabels = null;
     		$$invalidate(1, renderItemLabels = null);
     		wrapperSize = { width: 0, height: 0 };
@@ -14689,12 +14726,12 @@
     	}
 
     	$$self.$$set = $$props => {
-    		if ('five' in $$props) $$invalidate(4, five = $$props.five);
-    		if ('modelOcclusionEnable' in $$props) $$invalidate(5, modelOcclusionEnable = $$props.modelOcclusionEnable);
-    		if ('itemLabels' in $$props) $$invalidate(6, itemLabels = $$props.itemLabels);
-    		if ('wrapper' in $$props) $$invalidate(7, wrapper = $$props.wrapper);
+    		if ('five' in $$props) $$invalidate(5, five = $$props.five);
+    		if ('modelOcclusionEnable' in $$props) $$invalidate(6, modelOcclusionEnable = $$props.modelOcclusionEnable);
+    		if ('itemLabels' in $$props) $$invalidate(7, itemLabels = $$props.itemLabels);
+    		if ('wrapper' in $$props) $$invalidate(8, wrapper = $$props.wrapper);
     		if ('hooks' in $$props) $$invalidate(0, hooks = $$props.hooks);
-    		if ('displayStrategyType' in $$props) $$invalidate(8, displayStrategyType = $$props.displayStrategyType);
+    		if ('displayStrategyType' in $$props) $$invalidate(9, displayStrategyType = $$props.displayStrategyType);
     	};
 
     	return [
@@ -14702,6 +14739,7 @@
     		renderItemLabels,
     		containerWidth,
     		containerHeight,
+    		itemsVisible,
     		five,
     		modelOcclusionEnable,
     		itemLabels,
@@ -14722,12 +14760,12 @@
     			create_fragment,
     			internal.safe_not_equal,
     			{
-    				five: 4,
-    				modelOcclusionEnable: 5,
-    				itemLabels: 6,
-    				wrapper: 7,
+    				five: 5,
+    				modelOcclusionEnable: 6,
+    				itemLabels: 7,
+    				wrapper: 8,
     				hooks: 0,
-    				displayStrategyType: 8
+    				displayStrategyType: 9
     			},
     			add_css
     		);
@@ -14752,7 +14790,6 @@
             hooks: new five.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,
-            pending: false
         };
         pluginState.container.setAttribute('class', 'model-item-label-plugin-container');
         pluginState.container.style.cssText = `
@@ -14791,50 +14828,6 @@
             removeListener4Five();
             pluginState.container.remove();
         };
-        const handleRerender = () => {
-            if (!pluginState.enabled || !pluginState.fiveModeEnabled || pluginState.pending)
-                return;
-            pluginState.pending = true;
-            disable();
-        };
-        const rerender = (a, b, c) => {
-            if (!pluginState.pending)
-                return;
-            if (!pluginState.fiveModeEnabled)
-                return;
-            if (!c)
-                return;
-            pluginState.pending = false;
-            enable();
-            render();
-        };
-        const handleInteriaPanRerender = (a, b) => {
-            if (!pluginState.pending)
-                return;
-            if (!pluginState.fiveModeEnabled)
-                return;
-            if (!b)
-                return;
-            pluginState.pending = false;
-            enable();
-            render();
-        };
-        const handleWantsPanGesture = (pose, final) => {
-            if (pose) {
-                handleRerender();
-            }
-        };
-        const handlePanGesture = (pose, final) => {
-            if (!pluginState.pending)
-                return;
-            if (!pluginState.fiveModeEnabled)
-                return;
-            if (!final)
-                return;
-            pluginState.pending = false;
-            enable();
-            render();
-        };
         const render = () => {
             var _a;
             if (!pluginState.wrapper)
@@ -14870,33 +14863,13 @@
         const addListener4Five = () => {
             five$1.on('modeChange', onFiveModeChange);
             five$1.once('dispose', dispose);
-            // five.on('wantsGesture', handleRerender)
-            // five.on('gesture', rerender)
-            five$1.on('wantsMouseWheel', handleRerender);
-            five$1.on('mouseWheel', rerender);
-            five$1.on('wantsInteriaPan', handleRerender);
-            five$1.on('interiaPan', handleInteriaPanRerender);
-            five$1.on('wantsPanGesture', handleWantsPanGesture);
-            five$1.on('panGesture', handlePanGesture);
-            five$1.on('wantsPinchGesture', handleRerender);
-            five$1.on('pinchGesture', rerender);
         };
         // 取消 five 监听
         const removeListener4Five = () => {
             five$1.off('modeChange', onFiveModeChange);
-            // five.off('wantsGesture', handleRerender)
-            // five.off('gesture', rerender)
-            five$1.off('wantsMouseWheel', handleRerender);
-            five$1.off('mouseWheel', rerender);
-            five$1.off('wantsInteriaPan', handleRerender);
-            five$1.off('interiaPan', handleInteriaPanRerender);
-            five$1.off('wantsPanGesture', handleWantsPanGesture);
-            five$1.off('panGesture', handlePanGesture);
-            five$1.off('wantsPinchGesture', handleRerender);
-            five$1.off('pinchGesture', rerender);
         };
         const onFiveModeChange = (mode) => {
-            if (!pluginState.enabled || pluginState.pending)
+            if (!pluginState.enabled)
                 return;
             if (mode !== five.Five.Mode.Floorplan) {
                 pluginState.fiveModeEnabled = false;