@realsee/dnalogel 2.0.0-alpha.21 → 2.0.0-alpha.24

package/libs/PanoMeasurePlugin/Controller/index.js

@@ -147,6 +147,7 @@ export default 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,
@@ -192,6 +193,8 @@ export default 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);
@@ -207,6 +210,8 @@ export default 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();

package/libs/PanoMeasurePlugin/index.js

@@ -1,5 +1,5 @@
 import MeasureController from './Controller';
-const PanoMeasurePlugin = function MeasurePlugin(five, params) {
+const PanoMeasurePlugin = function PanoMeasurePlugin(five, params) {
     return new MeasureController(five, params);
 };
 export default PanoMeasurePlugin;

package/libs/PanoRulerPlugin/index.js

@@ -81,9 +81,9 @@ export const PanoRulerPlugin = (five, params) => {
     $rule.appendChild(style);
     const __rule = {};
     const _load = (roomInfo, roomRules) => {
-        if (state.loaded) {
-            throw new Error('标尺被重复初始化！');
-        }
+        // if (state.loaded) {
+        //     throw new Error('标尺被重复初始化！')
+        // }
         const roomHeightInfo = getRoomHeightInfo(roomInfo, five);
         const work = five.work;
         if (!work)
@@ -159,6 +159,7 @@ export const PanoRulerPlugin = (five, params) => {
             }
         }
         state.loaded = true;
+        freshRule();
         return true;
     };
     const load = async (_roomInfo, _roomRules, options) => {
@@ -167,6 +168,7 @@ export const PanoRulerPlugin = (five, params) => {
         if (!roomInfo || !roomRules) {
             throw new Error('标尺数据依赖不齐全！');
         }
+        state.loaded = false;
         state.options = Object.assign({}, state.options, options || {});
         if (five.model.loaded) {
             return _load(roomInfo, roomRules);

package/libs/floorplan/PanoFloorplanRadarPlugin/Components/Camera.js

@@ -64,58 +64,54 @@ function create_fragment(ctx) {
 	};
 }
 
+function getCameraRotateTransform(longitude) {
+	// 为什么要加 45 ==> 因为 UI 给的图初始角度是 -45
+	const rotate = Math.floor(longitude / Math.PI * 180) * -1 + 45;
+
+	return `rotate(${rotate}deg)`;
+}
+
 function instance($$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 => {
@@ -125,7 +121,27 @@ function instance($$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 Component extends SvelteComponent {

package/libs/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/libs/floorplan/PanoFloorplanRadarPlugin/Controller.js

@@ -36,13 +36,7 @@ export default 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,
@@ -103,7 +97,6 @@ export default class PanoFloorplanRadarPluginController {
         this.render();
     }
     setExtraObjectsWith3DPositions(data) {
-        this.originExtraObjects = data;
         if (!this.data)
             return;
         this.extraObjects = formatExtraObjects(data, this.five, this.data);
@@ -118,9 +111,6 @@ export default 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/package.json

@@ -7,7 +7,7 @@
   "repository": "https://github.com/realsee-developer/dnalogel.git",
   "description": "如视 VR 看房插件合集",
   "private": false,
-  "version": "2.0.0-alpha.21",
+  "version": "2.0.0-alpha.24",
   "license": "SEE LICENSE IN TERMS.txt",
   "scripts": {
     "build": "yarn run tsb && yarn run build:rollup && yarn build:docs",