@realsee/dnalogel 2.0.0-alpha.30 → 2.0.0-alpha.32

package/libs/ItemLabelPlugin/ItemLabelComponent.js

@@ -41,18 +41,18 @@ function add_css(target) {
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[31] = list[i];
+	child_ctx[32] = list[i];
 	return child_ctx;
 }
 
-// (229:2) {#if itemLabelItem.visible}
+// (248:2) {#if itemLabelItem.visible}
 function create_if_block(ctx) {
 	let itemlabelitem;
 	let current;
 
 	itemlabelitem = new ItemLabelItem({
 			props: {
-				itemLabel: /*itemLabelItem*/ ctx[31],
+				itemLabel: /*itemLabelItem*/ ctx[32],
 				hooks: /*hooks*/ ctx[0],
 				anchorEnabled: /*anchorEnabled*/ ctx[2],
 				onIconClick: /*onIconClick*/ ctx[6]
@@ -69,7 +69,7 @@ function create_if_block(ctx) {
 		},
 		p(ctx, dirty) {
 			const itemlabelitem_changes = {};
-			if (dirty[0] & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[31];
+			if (dirty[0] & /*renderItemLabels*/ 2) itemlabelitem_changes.itemLabel = /*itemLabelItem*/ ctx[32];
 			if (dirty[0] & /*hooks*/ 1) itemlabelitem_changes.hooks = /*hooks*/ ctx[0];
 			if (dirty[0] & /*anchorEnabled*/ 4) itemlabelitem_changes.anchorEnabled = /*anchorEnabled*/ ctx[2];
 			itemlabelitem.$set(itemlabelitem_changes);
@@ -89,12 +89,12 @@ function create_if_block(ctx) {
 	};
 }
 
-// (228:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
+// (247:1) {#each renderItemLabels as itemLabelItem (itemLabelItem.id)}
 function create_each_block(key_1, ctx) {
 	let first;
 	let if_block_anchor;
 	let current;
-	let if_block = /*itemLabelItem*/ ctx[31].visible && create_if_block(ctx);
+	let if_block = /*itemLabelItem*/ ctx[32].visible && create_if_block(ctx);
 
 	return {
 		key: key_1,
@@ -114,7 +114,7 @@ function create_each_block(key_1, ctx) {
 		p(new_ctx, dirty) {
 			ctx = new_ctx;
 
-			if (/*itemLabelItem*/ ctx[31].visible) {
+			if (/*itemLabelItem*/ ctx[32].visible) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 
@@ -161,7 +161,7 @@ function create_fragment(ctx) {
 	let div_resize_listener;
 	let current;
 	let each_value = /*renderItemLabels*/ ctx[1];
-	const get_key = ctx => /*itemLabelItem*/ ctx[31].id;
+	const get_key = ctx => /*itemLabelItem*/ ctx[32].id;
 
 	for (let i = 0; i < each_value.length; i += 1) {
 		let child_ctx = get_each_context(ctx, each_value, i);
@@ -265,7 +265,7 @@ function instance($$self, $$props, $$invalidate) {
  * 1、当前楼层(假设先不考虑多楼层)
  * 2、模型未被遮挡（一个 box 有没有被遮挡的计算？ TODO）
  * */
-	const getLabelVisible = (five, itemLabel) => {
+	const judgeImpacted = (five, itemLabel) => {
 		// 虚拟 VR 仅有一层，不考虑楼层信息
 		const cameraPosition = five.camera.position.clone();
 
@@ -286,6 +286,17 @@ function instance($$self, $$props, $$invalidate) {
 	// const [intersection] = five.model.intersectRaycaster(raycaster)
 	// return !(intersection && intersection.distance + 1 < vectorDistance);
 
+	const judgeInViewport = modelPoint => {
+		const { camera, model } = five;
+		const { x: offsetXFromCenter, y: offsetYFromCenter, z: offsetZFromCenter } = modelPoint.clone().project(camera);
+		const ratioFromLeft = (offsetXFromCenter + 1) / 2;
+		const ratioFromTop = (2 - (offsetYFromCenter + 1)) / 2;
+		const isFront = Math.abs(offsetZFromCenter) < 1;
+		const cssOffset = [ratioFromLeft, ratioFromTop];
+		const isInViewport = isFront && cssOffset.every(ratio => ratio < 1 && ratio >= 0);
+		return Boolean(isInViewport);
+	};
+
 	// cssOffset 获取
 	const getLabelCssOffset = (five, itemLabel) => {
 		const modelPosition = new Vector3(itemLabel.modelPosition[0], itemLabel.modelPosition[1], itemLabel.modelPosition[2]);
@@ -320,11 +331,18 @@ function instance($$self, $$props, $$invalidate) {
 			const strokeLength = getStrokeLength(label.modelPosition[1], displayStrategyType);
 
 			// 是否加入碰撞检测
-			const naturalVisible = modelOcclusionEnable
-			? getLabelVisible(five, label)
-			: label.visible;
+			// 配置加入碰撞检测，则判断碰撞检测
+			// 在可见范围内， 仅在 Panorama 模态计算
+			const isInViewport = five.currentMode === Five.Mode.Panorama
+			? judgeInViewport(new Vector3(label.position[0], label.position[1], label.position[2]))
+			: true;
+
+			// 碰撞
+			const isBlocked = modelOcclusionEnable
+			? judgeImpacted(five, label)
+			: false;
 
-			const visible = naturalVisible;
+			const visible = isInViewport && !isBlocked;
 
 			// 关掉重叠计算
 			// const visible = naturalVisible && !isOverlap([cssOffset[0], cssOffset[1] + strokeLength], curLabelWidth)
@@ -355,24 +373,11 @@ function instance($$self, $$props, $$invalidate) {
 		$$invalidate(1, renderItemLabels = getFormatedItemLabels(five, renderItemLabels));
 	};
 
-	beforeUpdate(() => {
-		addDataUpdateListener();
-	});
-
 	const handleCameraUpdateCallback = () => {
 		$$invalidate(5, itemsVisible = false);
 		handleCameraUpdate();
 	};
 
-	onMount(() => {
-		$$invalidate(1, renderItemLabels = transform2RenderData(itemLabels));
-		curItemLabels = itemLabels;
-		onItemLabelUpdate();
-		addResizeListener();
-		five.on('cameraUpdate', handleCameraUpdateCallback);
-		five.on('modeChange', onFiveModeChange);
-	});
-
 	const onFiveModeChange = mode => {
 		$$invalidate(5, itemsVisible = false);
 
@@ -420,12 +425,6 @@ function instance($$self, $$props, $$invalidate) {
 			}
 		});
 
-	onDestroy(() => {
-		five.off('cameraUpdate', handleCameraUpdateCallback);
-		five.off('modeChange', onFiveModeChange);
-		resizeObserver.unobserve(wrapper);
-	});
-
 	const getNearObserverPano = (fromPositionVector, observers) => {
 		let candidates = [];
 
@@ -463,6 +462,7 @@ function instance($$self, $$props, $$invalidate) {
 		const observer = getNearObserverPano(fromPositionVector, observers);
 
 		if (observer) {
+			console.log('--has observer--');
 			itemLabel.observerIndex = observer.panoIndex;
 		}
 
@@ -495,6 +495,25 @@ function instance($$self, $$props, $$invalidate) {
 		}
 	};
 
+	beforeUpdate(() => {
+		addDataUpdateListener();
+	});
+
+	onMount(() => {
+		$$invalidate(1, renderItemLabels = transform2RenderData(itemLabels));
+		curItemLabels = itemLabels;
+		onItemLabelUpdate();
+		addResizeListener();
+		five.on('cameraUpdate', handleCameraUpdateCallback);
+		five.on('modeChange', onFiveModeChange);
+	});
+
+	onDestroy(() => {
+		five.off('cameraUpdate', handleCameraUpdateCallback);
+		five.off('modeChange', onFiveModeChange);
+		resizeObserver.unobserve(wrapper);
+	});
+
 	function div_elementresize_handler() {
 		containerWidth = this.clientWidth;
 		containerHeight = this.clientHeight;

package/libs/ItemLabelPlugin/ItemLabelItem.js

@@ -38,7 +38,7 @@ function create_if_block(ctx) {
 			div1 = element("div");
 			div0 = element("div");
 			attr(div0, "class", "icon svelte-1gam1w3");
-			attr(div0, "style", div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon ?? defaultIcon})`);
+			attr(div0, "style", div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon})`);
 			attr(div1, "class", "icon-wrap svelte-1gam1w3");
 		},
 		m(target, anchor) {
@@ -51,7 +51,7 @@ function create_if_block(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty & /*itemLabel*/ 1 && div0_style_value !== (div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon ?? defaultIcon})`)) {
+			if (dirty & /*itemLabel*/ 1 && div0_style_value !== (div0_style_value = `background-image: url(${/*itemLabel*/ ctx[0].icon})`)) {
 				attr(div0, "style", div0_style_value);
 			}
 		},
@@ -69,7 +69,7 @@ function create_fragment(ctx) {
 	let t0;
 	let div0;
 	let span0;
-	let t1_value = (/*itemLabel*/ ctx[0].code ?? /*itemLabel*/ ctx[0].id) + "";
+	let t1_value = (/*itemLabel*/ ctx[0].code || /*itemLabel*/ ctx[0].id) + "";
 	let t1;
 	let t2;
 	let span1;
@@ -142,7 +142,7 @@ function create_fragment(ctx) {
 				if_block = null;
 			}
 
-			if (dirty & /*itemLabel*/ 1 && t1_value !== (t1_value = (/*itemLabel*/ ctx[0].code ?? /*itemLabel*/ ctx[0].id) + "")) set_data(t1, t1_value);
+			if (dirty & /*itemLabel*/ 1 && t1_value !== (t1_value = (/*itemLabel*/ ctx[0].code || /*itemLabel*/ ctx[0].id) + "")) set_data(t1, t1_value);
 			if (dirty & /*itemLabel*/ 1 && t3_value !== (t3_value = /*itemLabel*/ ctx[0].name + "")) set_data(t3, t3_value);
 
 			if (dirty & /*itemLabel*/ 1) {
@@ -180,14 +180,13 @@ function create_fragment(ctx) {
 	};
 }
 
-const defaultIcon = '//vrlab-public.ljcdn.com/common/file/web/c8591aaa-e62b-4e31-8fed-671483ace37f.svg\n';
-
 function instance($$self, $$props, $$invalidate) {
 	let { itemLabel } = $$props;
 	let { hooks } = $$props;
 	let { anchorEnabled } = $$props;
 	let { onIconClick } = $$props;
 
+	// const defaultIcon = '//vrlab-public.ljcdn.com/common/file/web/c8591aaa-e62b-4e31-8fed-671483ace37f.svg\n'
 	function onClick() {
 		hooks.emit('onLabelClick', itemLabel);
 	}

package/libs/ItemLabelPlugin/utils/isImpacted.js

@@ -8,5 +8,6 @@ export const isImpacted = (five, sourceVector, targetVector, distance) => {
     const raycaster = new Raycaster();
     raycaster.set(targetVector, direction);
     const [intersection] = five.model.intersectRaycaster(raycaster);
-    return intersection && distance <= intersection.distance + 0.1;
+    return intersection && intersection.distance + 0.01 < distance;
+    // return intersection && distance <= intersection.distance + 0.1
 };

package/libs/PanoRulerPlugin/Plugin.js

@@ -169,7 +169,7 @@ export const PanoRulerPlugin = (five, params) => {
             throw new Error('标尺数据依赖不齐全！');
         }
         state.loaded = false;
-        state.options = Object.assign({}, state.options, options || {});
+        state.options = Object.assign(Object.assign({}, state.options), options || {});
         if (five.model.loaded) {
             return _load(roomInfo, roomRules);
         }
@@ -273,7 +273,8 @@ export const PanoRulerPlugin = (five, params) => {
                 $element.style.display = 'none';
                 continue;
             }
-            if (start.distanceTo(end) < 0.5) {
+            // 线小于0.3m隐藏
+            if (start.distanceTo(end) < 0.3) {
                 $element.style.display = 'none';
                 continue;
             }

package/libs/floorplan/Components/Main.js

@@ -32,7 +32,7 @@ import Compass from './Compass';
 import CurrentFloor from './CurrentFloor';
 
 function add_css(target) {
-	append_styles(target, "svelte-177x2q7", ".floorplan-main.svelte-177x2q7{width:100%;height:100%}");
+	append_styles(target, "svelte-iyx1nn", ".floorplan-main.svelte-iyx1nn{width:100%;height:100%;pointer-events:none}");
 }
 
 function get_each_context(ctx, list, i) {
@@ -90,7 +90,7 @@ function create_if_block(ctx) {
 			create_component(camera.$$.fragment);
 			t1 = space();
 			if (if_block) if_block.c();
-			attr(div, "class", "floorplan-main svelte-177x2q7");
+			attr(div, "class", "floorplan-main svelte-iyx1nn");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);

package/libs/floorplan/ModelFloorplanPlugin/Controller.js

@@ -465,6 +465,7 @@ export default class ModelFloorplanPluginController {
             top: '50%',
             transform: 'translate(-50%, -50%)',
             zIndex: 10,
+            pointerEvents: 'none'
         });
         this.five.addExtraElement(this.container);
         // 如果初始化的时候模型已经加载完毕了，就不用再等 modelLoaded

package/libs/floorplan/TopviewFloorplanPlugin/style.js

@@ -4,4 +4,5 @@ export const pluginStyle = {
     top: '50%',
     transform: 'translate(-50%, -50%)',
     zIndex: '10',
+    pointerEvents: 'none'
 };

package/package.json

@@ -8,7 +8,7 @@
   "repository": "https://github.com/realsee-developer/dnalogel.git",
   "description": "如视 VR 看房插件合集",
   "private": false,
-  "version": "2.0.0-alpha.30",
+  "version": "2.0.0-alpha.32",
   "license": "SEE LICENSE IN TERMS.txt",
   "scripts": {
     "build": "yarn run tsb && yarn run build:rollup && yarn build:docs",
@@ -28,7 +28,7 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.17.5",
-    "@realsee/five": "^5.0.0-alpha.127",
+    "@realsee/five": "5.0.0-alpha.127",
     "@rollup/plugin-alias": "^3.1.9",
     "@rollup/plugin-commonjs": "^21.1.0",
     "@rollup/plugin-typescript": "^8.3.2",

package/CHANGELOG.md

@@ -1,108 +0,0 @@
-# CHANGELOG
-
-## 2.0.0-alpha.30
-- 1.feat: PanoMeasurePlugin 新增移动端UI交互模式
-- 2.feat: PanoMeasurePlugin 点线、标签气泡、删除按钮、三维坐标系UI交互优化
-- 3.feat: PanoMeasurePlugin 优化放大镜功能，支持可拖拽，新增放大镜开放参数
-- 4.fix: TopviewFloorplanPlugin 兼容全局 text-align 使用
-- 5.fix: 新增 ItemLabelPlugin 内测版
-
-## 2.0.0-alpha.29
-- 1.chore: 删除 react 依赖.
-
-## 2.0.0-alpha.28
-- 1.chore: 优化打包输出路径.
-
-## 2.0.0-alpha.27
-- 1.feat: PanoSpatialTagPlugin 兼容 bvh 为 false 模式.
-
-## 2.0.0-alpha.26
-- 1.fix: ModelRoomLabelPlugin - 修复渲染区域大小改变时，标签位置没有更新
-- 2.pref: ModelRoomLabelPlugin - 优化渲染逻辑
-
-## 2.0.0-alpha.25
-- 1.refactor: 恢复发版
-
-## 2.0.0-alpha.24
-- 1.feat: PanoRulerPlugin 支持数据 reload。
-
-## 2.0.0-alpha.23
-- 1.fix: 修复 PanoFloorplanRadarPlugin reload 数据时报错
-- 2.fix: 修复 PanoFloorplanRadarPlugin reload 户型图数据后雷达图标位置没有适配
-
-## 2.0.0-alpha.22
-- 1.fix: 修复 PanoMeasurePlugin disable 状态下仍有背景色占位问题。
-
-## 2.0.0-alpha.21
-- 1.fix: 修复 PanoMeasurePlugin 仅初始化 UI 面板仍占位为题。
-
-## 2.0.0-alpha.20
-- 1.fix: 修复 PanoMeasurePlugin hide 时 UI 面板仍占位为题。
-
-## 2.0.0-alpha.19
-- 1.fix: 修复在模型中切换全部楼层，切换回户型图，展示的是上一次展示时的楼层；
-- 2.fix: 修复户型图界面切换楼层时，图片与SVG渲染有时间差导致闪烁的问题；
-- 3.feat: TopviewFloorplanPlugin 插件支持放大缩小；
-- 4.feat: ModelFloorplanPlugin 插件，autoShowEnable 和 hoverEnable 能同时支持；
-- 5.chore: 设置 tsconfig.json importsNotUsedAsValues 为 error，在引用类型时，必须显示写为 import type。
-
-## 2.0.0-alpha.18
-- 1.fix: 修复 PanoMeasurePlugin 使用时 hammerjs 报错问题。
-
-## 2.0.0-alpha.17
-- 1.fix: 修复构建输出 px2rem 失效问题。
-
-## 2.0.0-alpha.16
-- 1.fix: 修复 z-index 问题；
-- 2.fix: 修复 ModelItemLabelPlugin 事件监听问题。
-
-## 2.0.0-alpha.15
-- 1.refactor: 优化 ModelItemLabelPlugin 在调用 five.setState() 时的动画显示。
-
-## 2.0.0-alpha.14
-- 1.feat: 新增 ModelTVVideoPlugin 插件；
-- 2.fix: 修复 ModelItemLabelPlugin disable & enable 方法逻辑；
-- 3.refactor: 增加 ModelItemLabelPlugin 类型导出。
-
-## 2.0.0-alpha.13
-- 1.chore: 修改 tsconfig.json target 配置项为 es6。
-
-## 2.0.0-alpha.12
-- 1.feat: 新增 ModelItemLabelPlugin
-
-## 2.0.0-alpha.11
-- 1.fix: 修复 ModelRoomLabelPlugin 未监听多楼层切换 rerender 问题。
-- 2.feat: ModelFloorplanPlugin & TopviewFloorplanPlugin 新增 `northDesc?: string` 配置项，支持用户修改指北针名称。
-
-## 2.0.0-alpha.10
-- 1.feat: 新增空间三维标签插件 PanoSpatialTagPlugin
-- 2.feat: 新增轻量 ejs 渲染模板函数 shared-utils/tinyEJSrender.js
-
-## 2.0.0-alpha.9
-- 1.refactor: 增加插件独立 js 输出及对 svelte 的编译。
-
-## 2.0.0-alpha.8
-- 1.fix: 修复 ModelViewPlugin 实景 VR 模型不居中问题；
-- 2.fix: 修复 ModelRoomLabelPlugin fov 更新未 rerender 问题；
-- 2.fix: 修复 ModelRoomLabelPlugin enable 判断问题；
-- 4.fix: 修改 ModelFloorplanPlugin 在全景态满足户型图的俯仰角时会自动切换户型图问题。
-
-## 2.0.0-alpha.7
-- 1.fix: PanoCompassPlugin 向下兼容；
-- 2.feat: 新增 PC 全景测量插件：PanoMeasurePlugin；
-- 3.docs: 修改 README.md；
-
-## 2.0.0-alpha.6
-- 1.fix: 标尺插件 PanoRulerPlugin 所有标尺仅展示一次问题；
-- 2.fix: TopviewFloorplanPlugin && ModelFloorplanPlugin 插件小雷达位置显示不正确问题；
-- 3.feat: 为 TopviewFloorplanPlugin && ModelFloorplanPlugin 插件新增线框图吸附位置配置选项。 
-  - 可选地板、天花板、模型中心，默认吸附选项为模型中心。
-
-## 2.0.0-alpha.5
-1.修复全景指南针插件 PanoCompassPlugin 默认导出 name
-
-## 2.0.0-alpha.4
-1.新增全景标尺插件 PanoRulerPlugin
-
-## 2.0.0-alpha.3
-1.新增全景指南针插件 PanoCompassPlugin