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

package/libs/ModelItemLabelPlugin/ItemLabelComponent.js

@@ -17,6 +17,7 @@ import {
 	mount_component,
 	outro_and_destroy_block,
 	safe_not_equal,
+	set_style,
 	transition_in,
 	transition_out,
 	update_keyed_each
@@ -27,6 +28,7 @@ import { beforeUpdate, onDestroy, onMount } from "svelte";
 import * as THREE from 'three';
 import ItemLabelItem from './ItemLabelItem';
 import "./events.type";
+import debounce from '../shared-utils/debounce';
 
 function add_css(target) {
 	append_styles(target, "svelte-rmdeb", ".item-labels-container.svelte-rmdeb{width:100%;height:100%;position:relative}");
@@ -34,11 +36,11 @@ function add_css(target) {
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[26] = list[i];
+	child_ctx[28] = list[i];
 	return child_ctx;
 }
 
-// (179:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+// (162:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
 function create_each_block(key_1, ctx) {
 	let first;
 	let itemlabelitem;
@@ -46,7 +48,7 @@ function create_each_block(key_1, ctx) {
 
 	itemlabelitem = new ItemLabelItem({
 			props: {
-				itemLabel: /*itemLabelItem*/ ctx[26],
+				itemLabel: /*itemLabelItem*/ ctx[28],
 				hooks: /*hooks*/ ctx[0]
 			}
 		});
@@ -67,7 +69,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[28];
 			if (dirty & /*hooks*/ 1) itemlabelitem_changes.hooks = /*hooks*/ ctx[0];
 			itemlabelitem.$set(itemlabelitem_changes);
 		},
@@ -94,7 +96,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[28].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context(ctx, each_value, i);
@@ -111,7 +113,8 @@ function create_fragment(ctx) {
 			}
 
 			attr(div, "class", "item-labels-container svelte-rmdeb");
-			add_render_callback(() => /*div_elementresize_handler*/ ctx[9].call(div));
+			add_render_callback(() => /*div_elementresize_handler*/ ctx[10].call(div));
+			set_style(div, "opacity", /*itemsVisible*/ ctx[4] ? 1 : 0, false);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -120,7 +123,7 @@ function create_fragment(ctx) {
 				each_blocks[i].m(div, null);
 			}
 
-			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[9].bind(div));
+			div_resize_listener = add_resize_listener(div, /*div_elementresize_handler*/ ctx[10].bind(div));
 			current = true;
 		},
 		p(ctx, [dirty]) {
@@ -130,6 +133,10 @@ function create_fragment(ctx) {
 				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();
 			}
+
+			if (dirty & /*itemsVisible*/ 16) {
+				set_style(div, "opacity", /*itemsVisible*/ ctx[4] ? 1 : 0, false);
+			}
 		},
 		i(local) {
 			if (current) return;
@@ -179,46 +186,14 @@ function instance($$self, $$props, $$invalidate) {
 	// 计算重叠
 	let cssOffsetLists = [];
 
+	// 动画过程中 itemsVisible 为 false
+	let itemsVisible = true;
+
 	/**
  * 可见性策略：
  * 1、当前楼层(假设先不考虑多楼层)
  * 2、模型未被遮挡（一个 box 有没有被遮挡的计算？ TODO）
  * */
-	// 画辅助线
-	function addHelper(x, y, z, type, helper) {
-		let geometry, materials, mesh;
-
-		if (type === 'box') {
-			geometry = new THREE.BoxGeometry(0.6, 2.5, 1.010696);
-			let mats = [];
-
-			for (let i = 0; i < geometry.faces.length; i++) {
-				const material = new THREE.MeshBasicMaterial({
-						color: new THREE.Color(Math.random() * 0xffffff)
-					});
-
-				mats.push(material);
-			}
-
-			materials = mats;
-		} else if (type === 'ball') {
-			geometry = new THREE.SphereGeometry(0.02, 0.02, 64);
-			materials = new THREE.MeshBasicMaterial({ color: new THREE.Color(0xffffff) });
-		}
-
-		mesh = new THREE.Mesh(geometry, materials);
-
-		// y 轴需要加一半的高度，因为position是从地面开始的，或者我应该算偏移更合理
-		mesh.position.set(x, y, z);
-
-		if (helper) {
-			const helper = new THREE.AxesHelper(5);
-			mesh.add(helper);
-		}
-
-		five.scene.add(mesh);
-	}
-
 	const getLabelVisible = (five, itemLabel) => {
 		// 虚拟 VR 仅有一层，不考虑楼层信息
 		const raycaster = new Raycaster();
@@ -272,6 +247,8 @@ function instance($$self, $$props, $$invalidate) {
 				return Math.ceil(-38.9 * itemSpaceHeight + 130);
 			case DISPLAY_STRATEGY_TYPE.LARGE:
 				return Math.ceil(-44.44 * itemSpaceHeight + 140);
+			case DISPLAY_STRATEGY_TYPE.EXTRA_LARGE:
+				return Math.ceil(-92.59 * itemSpaceHeight + 300);
 		}
 	}
 
@@ -318,15 +295,27 @@ function instance($$self, $$props, $$invalidate) {
 		addDataUpdateListener();
 	});
 
+	const handleCameraUpdateCallback = () => {
+		$$invalidate(4, itemsVisible = false);
+		handleCameraUpdate();
+	};
+
 	onMount(() => {
 		$$invalidate(1, renderItemLabels = itemLabels);
 		curItemLabels = itemLabels;
 		onItemLabelUpdate();
-
-		// five.on('cameraUpdate', onItemLabelUpdate)
 		addResizeListener();
+		five.on('cameraUpdate', handleCameraUpdateCallback);
 	});
 
+	const handleCameraUpdate = debounce(
+		() => {
+			$$invalidate(4, itemsVisible = true);
+			onItemLabelUpdate();
+		},
+		300
+	);
+
 	const addResizeListener = () => {
 		wrapperSize = {
 			width: wrapper.clientWidth,
@@ -340,7 +329,6 @@ function instance($$self, $$props, $$invalidate) {
 		if (curItemLabels !== itemLabels) {
 			$$invalidate(1, renderItemLabels = itemLabels);
 			curItemLabels = itemLabels;
-			console.log('--debug--update--');
 			onItemLabelUpdate();
 		}
 	};
@@ -358,13 +346,11 @@ function instance($$self, $$props, $$invalidate) {
 		});
 
 	onDestroy(() => {
-		// five.off('cameraUpdate', onItemLabelUpdate)
+		five.off('cameraUpdate', handleCameraUpdateCallback);
 		resizeObserver.unobserve(wrapper);
-
-		curItemLabels = null;
-		$$invalidate(1, renderItemLabels = null);
-		wrapperSize = { width: 0, height: 0 };
-	});
+	}); // curItemLabels = null
+	// renderItemLabels = null
+	// wrapperSize = { width: 0, height: 0 }
 
 	function div_elementresize_handler() {
 		containerWidth = this.clientWidth;
@@ -374,12 +360,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 [
@@ -387,6 +373,7 @@ function instance($$self, $$props, $$invalidate) {
 		renderItemLabels,
 		containerWidth,
 		containerHeight,
+		itemsVisible,
 		five,
 		modelOcclusionEnable,
 		itemLabels,
@@ -407,12 +394,12 @@ class Component extends SvelteComponent {
 			create_fragment,
 			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
 		);

package/libs/ModelItemLabelPlugin/index.js

@@ -15,7 +15,6 @@ export const ModelItemLabelPlugin = (five, params) => {
         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,
-        pending: false
     };
     pluginState.container.setAttribute('class', 'model-item-label-plugin-container');
     pluginState.container.style.cssText = `
@@ -24,6 +23,7 @@ export const ModelItemLabelPlugin = (five, params) => {
         top: 0;
         width: 100%;
         height: 100%;
+        z-index: 5;
     `;
     pluginState.container.style.pointerEvents = 'none'; // 写到 cssText 里不生效
     const appendTo = (wrapper) => {
@@ -54,50 +54,6 @@ export const ModelItemLabelPlugin = (five, 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)
@@ -133,33 +89,13 @@ export const ModelItemLabelPlugin = (five, params) => {
     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 (!pluginState.enabled || pluginState.pending)
+        if (!pluginState.enabled)
             return;
         if (mode !== Five.Mode.Floorplan) {
             pluginState.fiveModeEnabled = false;

package/libs/ModelItemLabelPlugin/typings.d.ts

@@ -4,7 +4,8 @@ import { PluginEvent } from "./events.type";
 export declare enum DISPLAY_STRATEGY_TYPE {
     SMALL = "small",
     MIDLLE = "middle",
-    LARGE = "large"
+    LARGE = "large",
+    EXTRA_LARGE = "x-large"
 }
 export interface ModelItemLabelPluginParametersType {
     modelOcclusionEnable?: boolean;
@@ -52,5 +53,4 @@ export interface ModelItemLabelPluginState {
     hooks: Subscribe<PluginEvent>;
     modelOcclusionEnable: boolean;
     displayStrategyType: Partial<DISPLAY_STRATEGY_TYPE>;
-    pending: boolean;
 }

package/libs/ModelItemLabelPlugin/typings.js

@@ -3,4 +3,5 @@ export var 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/ModelRoomLabelPlugin/Controller.js

@@ -74,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);

package/package.json

@@ -5,8 +5,9 @@
   "type": "module",
   "author": "REALSEE-DEVELOPER",
   "repository": "https://github.com/realsee-developer/dnalogel.git",
+  "description": "如视 VR 看房插件合集",
   "private": false,
-  "version": "2.0.0-alpha.14",
+  "version": "2.0.0-alpha.17",
   "license": "SEE LICENSE IN TERMS.txt",
   "scripts": {
     "build": "yarn run tsb && yarn run build:rollup && yarn build:docs",
@@ -30,6 +31,7 @@
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^21.1.0",
     "@rollup/plugin-typescript": "^8.3.2",
+    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.44",
     "@tsconfig/svelte": "^2.0.1",
     "@typescript-eslint/eslint-plugin": "^5.12.1",
     "@typescript-eslint/parser": "^5.12.1",
@@ -43,6 +45,7 @@
     "postcss-plugin-px2rem": "^0.8.1",
     "replace": "^1.2.1",
     "rollup-plugin-multi-input": "^1.3.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svelte": "^7.1.0",
     "svelte-check": "^2.2.7",
     "svelte-preprocess": "^4.10.6",