@realsee/dnalogel 2.0.0-alpha.20 → 2.0.0-alpha.23

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # CHANGELOG
 
+## 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 面板仍占位为题。
 

package/dist/PanoMeasurePlugin/index.js

@@ -4619,6 +4619,7 @@ var htmlString = `
 `;
 
 const uiWrapperStyle = {
+    display: 'none',
     position: 'absolute',
     top: '0',
     left: '0',
@@ -5406,6 +5407,7 @@ class MeasureController {
         this.container.style.pointerEvents = 'none';
         this.container.style.width = '100%';
         this.container.style.height = '100%';
+        this.container.style.opacity = '0';
         this.container.style.background = 'rgba(0, 0, 0, 0.15)';
         this.controllerParams = {
             five: this.five,
@@ -5451,6 +5453,8 @@ class MeasureController {
             return;
         this.hasOpen = true;
         this.five.scene.add(this.group);
+        // 修改透明度
+        this.container.style.opacity = '1';
         // 隐藏点位和鼠标聚焦环
         this.five.helperVisible = false;
         this.controller = new WatchController(this.controllerParams);
@@ -5466,6 +5470,8 @@ class MeasureController {
     disable() {
         var _a, _b, _c, _d;
         this.hasOpen = false;
+        // 修改透明度
+        this.container.style.opacity = '0';
         // 展示点位和鼠标聚焦环
         (_a = this.controller) === null || _a === void 0 ? void 0 : _a.dispose();
         (_b = this.useUIController) === null || _b === void 0 ? void 0 : _b.hide();
@@ -5518,7 +5524,7 @@ class MeasureController {
     }
 }
 
-const PanoMeasurePlugin = function MeasurePlugin(five, params) {
+const PanoMeasurePlugin = function PanoMeasurePlugin(five, params) {
     return new MeasureController(five, params);
 };
 

package/dist/floorplan/PanoFloorplanRadarPlugin/Controller.d.ts

@@ -14,8 +14,7 @@ export default class PanoFloorplanRadarPluginController {
     private wrapperSelector;
     private data?;
     private wrapper;
-    private extraObjects?;
-    private originExtraObjects?;
+    private extraObjects;
     private configs;
     constructor(five: Five, params?: PanoFloorplanRadarPluginControllerParameter);
     dispose: () => void;

package/dist/floorplan/PanoFloorplanRadarPlugin/index.js

@@ -75,58 +75,54 @@ function create_fragment$8(ctx) {
 	};
 }
 
+function getCameraRotateTransform(longitude) {
+	// 为什么要加 45 ==> 因为 UI 给的图初始角度是 -45
+	const rotate = Math.floor(longitude / Math.PI * 180) * -1 + 45;
+
+	return `rotate(${rotate}deg)`;
+}
+
 function instance$8($$self, $$props, $$invalidate) {
+	let positionTransform;
+	let rotateTransform;
 	let { five } = $$props;
 	let { pxmm } = $$props;
 	let { floorplanData } = $$props;
 	let { cameraImageUrl } = $$props;
+	let panoIndex = five.getCurrentState().panoIndex;
+	let longitude = five.getCurrentState().longitude;
 
 	/** 获取相机在当前 Five 状态下的位移 */
-	function getCameraPositionTransform(panoIndex) {
-		const observer = floorplanData.observers[panoIndex];
+	function getCameraPositionTransform(floorplanData, panoIndex) {
 		const bounding = floorplanData.bounding;
+		const floorplanObserver = floorplanData.observers[panoIndex];
+		if (!floorplanObserver) return '';
 		const clientWidth = (bounding.max.x - bounding.min.x) * pxmm;
 		const clientHeight = (bounding.max.y - bounding.min.y) * pxmm;
-		if (!observer) return '';
-		const left = Math.floor(observer.positionInImage.x * clientWidth);
-		const top = Math.floor(observer.positionInImage.y * clientHeight);
+		const left = Math.floor(floorplanObserver.positionInImage.x * clientWidth);
+		const top = Math.floor(floorplanObserver.positionInImage.y * clientHeight);
 		return `translate(${left}px, ${top}px)`;
 	}
 
-	/** 获取相机在当前 Five 状态下的旋转 */
-	function getCameraRotationTransform() {
-		const { longitude } = five.getCurrentState();
-
-		// 为什么要加 45 ==> 因为 UI 给的图初始角度是 -45
-		const rotate = Math.floor(longitude / Math.PI * 180) * -1 + 45;
-
-		return `rotate(${rotate}deg)`;
+	function onFivePanoWillArrive(_panoIndex) {
+		$$invalidate(6, panoIndex = _panoIndex);
 	}
 
-	const changePosition = panoIndex => {
-		$$invalidate(2, positionTransform = getCameraPositionTransform(panoIndex));
-	};
-
-	const changeRotate = throttle(
-		() => {
-			$$invalidate(1, rotateTransform = getCameraRotationTransform());
+	const onFiveCameraDirectionUpdate = throttle(
+		pose => {
+			$$invalidate(7, longitude = pose.longitude);
 		},
 		1000 / 60
 	);
 
-	// 初始状态，不能等 mount 之后再计算，那样第一次 camera 展示的时候也会有动画
-	let rotateTransform = getCameraRotationTransform();
-
-	let positionTransform = getCameraPositionTransform(five.getCurrentState().panoIndex);
-
 	svelte.onMount(() => {
-		five.on('panoWillArrive', changePosition);
-		five.on('cameraDirectionUpdate', changeRotate);
+		five.on('panoWillArrive', onFivePanoWillArrive);
+		five.on('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
 	});
 
 	svelte.onDestroy(() => {
-		five.off('panoWillArrive', changePosition);
-		five.off('cameraDirectionUpdate', changeRotate);
+		five.off('panoWillArrive', onFivePanoWillArrive);
+		five.off('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
 	});
 
 	$$self.$$set = $$props => {
@@ -136,7 +132,27 @@ function instance$8($$self, $$props, $$invalidate) {
 		if ('cameraImageUrl' in $$props) $$invalidate(0, cameraImageUrl = $$props.cameraImageUrl);
 	};
 
-	return [cameraImageUrl, rotateTransform, positionTransform, five, pxmm, floorplanData];
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*floorplanData, panoIndex*/ 96) {
+			// 初始状态，不能等 mount 之后再计算，那样第一次 camera 展示的时候也会有动画
+			$$invalidate(2, positionTransform = getCameraPositionTransform(floorplanData, panoIndex));
+		}
+
+		if ($$self.$$.dirty & /*longitude*/ 128) {
+			$$invalidate(1, rotateTransform = getCameraRotateTransform(longitude));
+		}
+	};
+
+	return [
+		cameraImageUrl,
+		rotateTransform,
+		positionTransform,
+		five,
+		pxmm,
+		floorplanData,
+		panoIndex,
+		longitude
+	];
 }
 
 class Camera extends internal.SvelteComponent {
@@ -1531,13 +1547,7 @@ class PanoFloorplanRadarPluginController {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "originExtraObjects", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
+            value: []
         });
         Object.defineProperty(this, "configs", {
             enumerable: true,
@@ -1598,7 +1608,6 @@ class PanoFloorplanRadarPluginController {
         this.render();
     }
     setExtraObjectsWith3DPositions(data) {
-        this.originExtraObjects = data;
         if (!this.data)
             return;
         this.extraObjects = formatExtraObjects(data, this.five, this.data);
@@ -1613,9 +1622,6 @@ class PanoFloorplanRadarPluginController {
         }
         if (!this.data || !this.wrapper)
             return;
-        if (!this.extraObjects && this.originExtraObjects) {
-            this.extraObjects = formatExtraObjects(this.originExtraObjects, this.five, this.data);
-        }
         const props = {
             five: this.five,
             floorplanData: this.data,

package/dist/index.es.js

@@ -4675,58 +4675,54 @@ function create_fragment$7(ctx) {
 	};
 }
 
+function getCameraRotateTransform(longitude) {
+	// 为什么要加 45 ==> 因为 UI 给的图初始角度是 -45
+	const rotate = Math.floor(longitude / Math.PI * 180) * -1 + 45;
+
+	return `rotate(${rotate}deg)`;
+}
+
 function instance$7($$self, $$props, $$invalidate) {
+	let positionTransform;
+	let rotateTransform;
 	let { five } = $$props;
 	let { pxmm } = $$props;
 	let { floorplanData } = $$props;
 	let { cameraImageUrl } = $$props;
+	let panoIndex = five.getCurrentState().panoIndex;
+	let longitude = five.getCurrentState().longitude;
 
 	/** 获取相机在当前 Five 状态下的位移 */
-	function getCameraPositionTransform(panoIndex) {
-		const observer = floorplanData.observers[panoIndex];
+	function getCameraPositionTransform(floorplanData, panoIndex) {
 		const bounding = floorplanData.bounding;
+		const floorplanObserver = floorplanData.observers[panoIndex];
+		if (!floorplanObserver) return '';
 		const clientWidth = (bounding.max.x - bounding.min.x) * pxmm;
 		const clientHeight = (bounding.max.y - bounding.min.y) * pxmm;
-		if (!observer) return '';
-		const left = Math.floor(observer.positionInImage.x * clientWidth);
-		const top = Math.floor(observer.positionInImage.y * clientHeight);
+		const left = Math.floor(floorplanObserver.positionInImage.x * clientWidth);
+		const top = Math.floor(floorplanObserver.positionInImage.y * clientHeight);
 		return `translate(${left}px, ${top}px)`;
 	}
 
-	/** 获取相机在当前 Five 状态下的旋转 */
-	function getCameraRotationTransform() {
-		const { longitude } = five.getCurrentState();
-
-		// 为什么要加 45 ==> 因为 UI 给的图初始角度是 -45
-		const rotate = Math.floor(longitude / Math.PI * 180) * -1 + 45;
-
-		return `rotate(${rotate}deg)`;
+	function onFivePanoWillArrive(_panoIndex) {
+		$$invalidate(6, panoIndex = _panoIndex);
 	}
 
-	const changePosition = panoIndex => {
-		$$invalidate(2, positionTransform = getCameraPositionTransform(panoIndex));
-	};
-
-	const changeRotate = throttle(
-		() => {
-			$$invalidate(1, rotateTransform = getCameraRotationTransform());
+	const onFiveCameraDirectionUpdate = throttle(
+		pose => {
+			$$invalidate(7, longitude = pose.longitude);
 		},
 		1000 / 60
 	);
 
-	// 初始状态，不能等 mount 之后再计算，那样第一次 camera 展示的时候也会有动画
-	let rotateTransform = getCameraRotationTransform();
-
-	let positionTransform = getCameraPositionTransform(five.getCurrentState().panoIndex);
-
 	onMount(() => {
-		five.on('panoWillArrive', changePosition);
-		five.on('cameraDirectionUpdate', changeRotate);
+		five.on('panoWillArrive', onFivePanoWillArrive);
+		five.on('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
 	});
 
 	onDestroy(() => {
-		five.off('panoWillArrive', changePosition);
-		five.off('cameraDirectionUpdate', changeRotate);
+		five.off('panoWillArrive', onFivePanoWillArrive);
+		five.off('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
 	});
 
 	$$self.$$set = $$props => {
@@ -4736,7 +4732,27 @@ function instance$7($$self, $$props, $$invalidate) {
 		if ('cameraImageUrl' in $$props) $$invalidate(0, cameraImageUrl = $$props.cameraImageUrl);
 	};
 
-	return [cameraImageUrl, rotateTransform, positionTransform, five, pxmm, floorplanData];
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*floorplanData, panoIndex*/ 96) {
+			// 初始状态，不能等 mount 之后再计算，那样第一次 camera 展示的时候也会有动画
+			$$invalidate(2, positionTransform = getCameraPositionTransform(floorplanData, panoIndex));
+		}
+
+		if ($$self.$$.dirty & /*longitude*/ 128) {
+			$$invalidate(1, rotateTransform = getCameraRotateTransform(longitude));
+		}
+	};
+
+	return [
+		cameraImageUrl,
+		rotateTransform,
+		positionTransform,
+		five,
+		pxmm,
+		floorplanData,
+		panoIndex,
+		longitude
+	];
 }
 
 class Camera extends SvelteComponent {
@@ -5443,13 +5459,7 @@ class PanoFloorplanRadarPluginController {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "originExtraObjects", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
+            value: []
         });
         Object.defineProperty(this, "configs", {
             enumerable: true,
@@ -5510,7 +5520,6 @@ class PanoFloorplanRadarPluginController {
         this.render();
     }
     setExtraObjectsWith3DPositions(data) {
-        this.originExtraObjects = data;
         if (!this.data)
             return;
         this.extraObjects = formatExtraObjects(data, this.five, this.data);
@@ -5525,9 +5534,6 @@ class PanoFloorplanRadarPluginController {
         }
         if (!this.data || !this.wrapper)
             return;
-        if (!this.extraObjects && this.originExtraObjects) {
-            this.extraObjects = formatExtraObjects(this.originExtraObjects, this.five, this.data);
-        }
         const props = {
             five: this.five,
             floorplanData: this.data,
@@ -12352,6 +12358,7 @@ var htmlString = `
 `;
 
 const uiWrapperStyle = {
+    display: 'none',
     position: 'absolute',
     top: '0',
     left: '0',
@@ -13051,6 +13058,7 @@ class MeasureController {
         this.container.style.pointerEvents = 'none';
         this.container.style.width = '100%';
         this.container.style.height = '100%';
+        this.container.style.opacity = '0';
         this.container.style.background = 'rgba(0, 0, 0, 0.15)';
         this.controllerParams = {
             five: this.five,
@@ -13096,6 +13104,8 @@ class MeasureController {
             return;
         this.hasOpen = true;
         this.five.scene.add(this.group);
+        // 修改透明度
+        this.container.style.opacity = '1';
         // 隐藏点位和鼠标聚焦环
         this.five.helperVisible = false;
         this.controller = new WatchController(this.controllerParams);
@@ -13111,6 +13121,8 @@ class MeasureController {
     disable() {
         var _a, _b, _c, _d;
         this.hasOpen = false;
+        // 修改透明度
+        this.container.style.opacity = '0';
         // 展示点位和鼠标聚焦环
         (_a = this.controller) === null || _a === void 0 ? void 0 : _a.dispose();
         (_b = this.useUIController) === null || _b === void 0 ? void 0 : _b.hide();
@@ -13163,7 +13175,7 @@ class MeasureController {
     }
 }
 
-const PanoMeasurePlugin = function MeasurePlugin(five, params) {
+const PanoMeasurePlugin = function PanoMeasurePlugin(five, params) {
     return new MeasureController(five, params);
 };
 

package/dist/index.js

@@ -4702,58 +4702,54 @@ function create_fragment$7(ctx) {
 	};
 }
 
+function getCameraRotateTransform(longitude) {
+	// 为什么要加 45 ==> 因为 UI 给的图初始角度是 -45
+	const rotate = Math.floor(longitude / Math.PI * 180) * -1 + 45;
+
+	return `rotate(${rotate}deg)`;
+}
+
 function instance$7($$self, $$props, $$invalidate) {
+	let positionTransform;
+	let rotateTransform;
 	let { five } = $$props;
 	let { pxmm } = $$props;
 	let { floorplanData } = $$props;
 	let { cameraImageUrl } = $$props;
+	let panoIndex = five.getCurrentState().panoIndex;
+	let longitude = five.getCurrentState().longitude;
 
 	/** 获取相机在当前 Five 状态下的位移 */
-	function getCameraPositionTransform(panoIndex) {
-		const observer = floorplanData.observers[panoIndex];
+	function getCameraPositionTransform(floorplanData, panoIndex) {
 		const bounding = floorplanData.bounding;
+		const floorplanObserver = floorplanData.observers[panoIndex];
+		if (!floorplanObserver) return '';
 		const clientWidth = (bounding.max.x - bounding.min.x) * pxmm;
 		const clientHeight = (bounding.max.y - bounding.min.y) * pxmm;
-		if (!observer) return '';
-		const left = Math.floor(observer.positionInImage.x * clientWidth);
-		const top = Math.floor(observer.positionInImage.y * clientHeight);
+		const left = Math.floor(floorplanObserver.positionInImage.x * clientWidth);
+		const top = Math.floor(floorplanObserver.positionInImage.y * clientHeight);
 		return `translate(${left}px, ${top}px)`;
 	}
 
-	/** 获取相机在当前 Five 状态下的旋转 */
-	function getCameraRotationTransform() {
-		const { longitude } = five.getCurrentState();
-
-		// 为什么要加 45 ==> 因为 UI 给的图初始角度是 -45
-		const rotate = Math.floor(longitude / Math.PI * 180) * -1 + 45;
-
-		return `rotate(${rotate}deg)`;
+	function onFivePanoWillArrive(_panoIndex) {
+		$$invalidate(6, panoIndex = _panoIndex);
 	}
 
-	const changePosition = panoIndex => {
-		$$invalidate(2, positionTransform = getCameraPositionTransform(panoIndex));
-	};
-
-	const changeRotate = throttle(
-		() => {
-			$$invalidate(1, rotateTransform = getCameraRotationTransform());
+	const onFiveCameraDirectionUpdate = throttle(
+		pose => {
+			$$invalidate(7, longitude = pose.longitude);
 		},
 		1000 / 60
 	);
 
-	// 初始状态，不能等 mount 之后再计算，那样第一次 camera 展示的时候也会有动画
-	let rotateTransform = getCameraRotationTransform();
-
-	let positionTransform = getCameraPositionTransform(five.getCurrentState().panoIndex);
-
 	svelte.onMount(() => {
-		five.on('panoWillArrive', changePosition);
-		five.on('cameraDirectionUpdate', changeRotate);
+		five.on('panoWillArrive', onFivePanoWillArrive);
+		five.on('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
 	});
 
 	svelte.onDestroy(() => {
-		five.off('panoWillArrive', changePosition);
-		five.off('cameraDirectionUpdate', changeRotate);
+		five.off('panoWillArrive', onFivePanoWillArrive);
+		five.off('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
 	});
 
 	$$self.$$set = $$props => {
@@ -4763,7 +4759,27 @@ function instance$7($$self, $$props, $$invalidate) {
 		if ('cameraImageUrl' in $$props) $$invalidate(0, cameraImageUrl = $$props.cameraImageUrl);
 	};
 
-	return [cameraImageUrl, rotateTransform, positionTransform, five, pxmm, floorplanData];
+	$$self.$$.update = () => {
+		if ($$self.$$.dirty & /*floorplanData, panoIndex*/ 96) {
+			// 初始状态，不能等 mount 之后再计算，那样第一次 camera 展示的时候也会有动画
+			$$invalidate(2, positionTransform = getCameraPositionTransform(floorplanData, panoIndex));
+		}
+
+		if ($$self.$$.dirty & /*longitude*/ 128) {
+			$$invalidate(1, rotateTransform = getCameraRotateTransform(longitude));
+		}
+	};
+
+	return [
+		cameraImageUrl,
+		rotateTransform,
+		positionTransform,
+		five,
+		pxmm,
+		floorplanData,
+		panoIndex,
+		longitude
+	];
 }
 
 class Camera extends internal.SvelteComponent {
@@ -5470,13 +5486,7 @@ class PanoFloorplanRadarPluginController {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "originExtraObjects", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
+            value: []
         });
         Object.defineProperty(this, "configs", {
             enumerable: true,
@@ -5537,7 +5547,6 @@ class PanoFloorplanRadarPluginController {
         this.render();
     }
     setExtraObjectsWith3DPositions(data) {
-        this.originExtraObjects = data;
         if (!this.data)
             return;
         this.extraObjects = formatExtraObjects(data, this.five, this.data);
@@ -5552,9 +5561,6 @@ class PanoFloorplanRadarPluginController {
         }
         if (!this.data || !this.wrapper)
             return;
-        if (!this.extraObjects && this.originExtraObjects) {
-            this.extraObjects = formatExtraObjects(this.originExtraObjects, this.five, this.data);
-        }
         const props = {
             five: this.five,
             floorplanData: this.data,
@@ -12379,6 +12385,7 @@ var htmlString = `
 `;
 
 const uiWrapperStyle = {
+    display: 'none',
     position: 'absolute',
     top: '0',
     left: '0',
@@ -13078,6 +13085,7 @@ class MeasureController {
         this.container.style.pointerEvents = 'none';
         this.container.style.width = '100%';
         this.container.style.height = '100%';
+        this.container.style.opacity = '0';
         this.container.style.background = 'rgba(0, 0, 0, 0.15)';
         this.controllerParams = {
             five: this.five,
@@ -13123,6 +13131,8 @@ class MeasureController {
             return;
         this.hasOpen = true;
         this.five.scene.add(this.group);
+        // 修改透明度
+        this.container.style.opacity = '1';
         // 隐藏点位和鼠标聚焦环
         this.five.helperVisible = false;
         this.controller = new WatchController(this.controllerParams);
@@ -13138,6 +13148,8 @@ class MeasureController {
     disable() {
         var _a, _b, _c, _d;
         this.hasOpen = false;
+        // 修改透明度
+        this.container.style.opacity = '0';
         // 展示点位和鼠标聚焦环
         (_a = this.controller) === null || _a === void 0 ? void 0 : _a.dispose();
         (_b = this.useUIController) === null || _b === void 0 ? void 0 : _b.hide();
@@ -13190,7 +13202,7 @@ class MeasureController {
     }
 }
 
-const PanoMeasurePlugin = function MeasurePlugin(five, params) {
+const PanoMeasurePlugin = function PanoMeasurePlugin(five, params) {
     return new MeasureController(five, params);
 };