@realsee/dnalogel 2.1.0-alpha.4 → 2.1.0-alpha.5

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

@@ -0,0 +1,85 @@
+<script>import { onMount } from 'svelte';
+import { CAMERA_IMAGE } from '../../Assets/camera';
+import throttle from '../../../shared-utils/throttle';
+export let five;
+export let pxmm;
+export let floorplanData;
+export let cameraImageUrl;
+let panoIndex = five.getCurrentState().panoIndex;
+let longitude = five.getCurrentState().longitude;
+// 初始状态，不能等 mount 之后再计算，那样第一次 camera 展示的时候也会有动画
+$: positionTransform = getCameraPositionTransform(floorplanData, panoIndex);
+$: rotateTransform = getCameraRotateTransform(longitude);
+/** 获取相机在当前 Five 状态下的位移 */
+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;
+    const left = Math.floor(floorplanObserver.positionInImage.x * clientWidth);
+    const top = Math.floor(floorplanObserver.positionInImage.y * clientHeight);
+    return `translate(${left}px, ${top}px)`;
+}
+/** 获取相机在当前 Five 状态下的旋转 */
+function getCameraRotateTransform(longitude) {
+    // 为什么要加 45 ==> 因为 UI 给的图初始角度是 -45
+    const rotate = Math.floor((longitude / Math.PI) * 180) * -1 + 45;
+    return `rotate(${rotate}deg)`;
+}
+function onFivePanoWillArrive(_panoIndex) {
+    panoIndex = _panoIndex;
+}
+const onFiveCameraDirectionUpdate = throttle((pose) => {
+    longitude = pose.longitude;
+}, 1000 / 60);
+onMount(() => {
+    five.on('panoWillArrive', onFivePanoWillArrive);
+    five.on('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
+    return function dispose() {
+        five.off('panoWillArrive', onFivePanoWillArrive);
+        five.off('cameraDirectionUpdate', onFiveCameraDirectionUpdate);
+    };
+});
+</script>
+
+<div class="plugin-radar__camera-wrapper">
+  <div class="plugin-radar__camera-position" style:transform={positionTransform}>
+    <div
+      class="plugin-radar__camera-rotate"
+      style:transform={rotateTransform}
+      style="background-image: url({cameraImageUrl || CAMERA_IMAGE})"
+    />
+  </div>
+</div>
+
+<style>
+  .plugin-radar__camera-wrapper {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    pointer-events: none;
+  }
+  .plugin-radar__camera-position {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 0;
+    height: 0;
+    transform: none;
+    pointer-events: none;
+    transition: transform 1s linear;
+  }
+  .plugin-radar__camera-rotate {
+    position: absolute;
+    left: -15px;
+    top: -15px;
+    width: 17px;
+    height: 17px;
+    transform-origin: 15px 15px;
+    transform: rotate(45deg);
+    background-repeat: no-repeat;
+    background-size: 100%;
+  }
+</style>

package/libs/floorplan/PanoFloorplanRadarPlugin/Components/CurrentFloor/CurrentFloor.svelte

@@ -0,0 +1,18 @@
+<script>import ExtraObjects from './ExtraObjects.svelte';
+import BaseImage from '../../../Components/BaseImage.svelte';
+import Highlight from '../../../Components/RoomHighlight/RoomHighlight.svelte';
+export let five;
+export let pxmm;
+export let floorIndex;
+export let hoverEnable;
+export let floorplanData;
+export let extraObjects = [];
+$: currentFloorExtraObjects = extraObjects === null || extraObjects === void 0 ? void 0 : extraObjects.filter((object) => object.floorIndex === floorIndex);
+const onRoomHeightClick = undefined;
+</script>
+
+<BaseImage {...{ floorIndex, floorplanData }} />
+<ExtraObjects extraObjects={currentFloorExtraObjects} />
+{#if hoverEnable}
+  <Highlight {...{ five, pxmm, floorIndex, floorplanData, onRoomHeightClick }} />
+{/if}

package/libs/floorplan/PanoFloorplanRadarPlugin/Components/CurrentFloor/ExtraObjects.svelte

@@ -0,0 +1,40 @@
+<script>export let extraObjects = [];
+</script>
+
+<div class="plugin-pano-floorplan__extra-objects">
+  {#each extraObjects as extraObject (extraObject.id)}
+    <div
+      class="plugin-pano-floorplan__extra-object-item--position"
+      style:top="{extraObject.positionInImage.y * 100}%"
+      style:left="{extraObject.positionInImage.x * 100}%"
+    >
+      <div
+        class="plugin-pano-floorplan__extra-object-item"
+        style:width="{extraObject.icon.width / 16}rem"
+        style:height="{extraObject.icon.height / 16}rem"
+        style="background-image: {`url(${extraObject.icon.url})`}"
+      />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .plugin-pano-floorplan__extra-objects {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  .plugin-pano-floorplan__extra-object-item--position {
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+
+  .plugin-pano-floorplan__extra-object-item {
+    transform: translate(-50%, -50%);
+  }
+</style>

package/libs/floorplan/PanoFloorplanRadarPlugin/Components/Main.svelte

@@ -0,0 +1,64 @@
+<script>import { onMount } from 'svelte';
+import Camera from './Camera.svelte';
+import CurrentFloor from './CurrentFloor/CurrentFloor.svelte';
+export let five;
+export let visible;
+export let hoverEnable;
+export let floorplanData;
+export let cameraImageUrl;
+export let extraObjects = [];
+let pxmm = 0;
+let floorIndex = 0;
+let clientWidth = 0;
+let clientHeight = 0;
+let contentWidth = 0;
+let contentHeight = 0;
+$: {
+    const size = Math.min(clientWidth, clientHeight);
+    const { max, min } = floorplanData.bounding;
+    const boundingWidth = max.x - min.x;
+    const boundingHeight = max.y - min.y;
+    const contentSize = (function getSize() {
+        if (boundingWidth > boundingHeight)
+            return [size, (size / boundingWidth) * boundingHeight];
+        return [(size / boundingHeight) * boundingWidth, size];
+    })();
+    contentWidth = contentSize[0];
+    contentHeight = contentSize[1];
+    pxmm = contentWidth / boundingWidth;
+}
+function handlePanoArrived(panoIndex) {
+    floorIndex = five.work.observers[panoIndex].floorIndex;
+}
+onMount(() => {
+    five.on('panoArrived', handlePanoArrived);
+    return () => {
+        five.off('panoArrived', handlePanoArrived);
+    };
+});
+</script>
+
+{#if visible}
+  <div class="plugin-floorplan-radar" bind:clientWidth bind:clientHeight>
+    {#if clientWidth !== 0}
+      <div class="plugin-floorplan-radar-container" style:width="{contentWidth}px" style:height="{contentHeight}px">
+        <CurrentFloor {...{ five, pxmm, floorIndex, floorplanData, hoverEnable, extraObjects }} />
+        <Camera {...{ pxmm, five, floorplanData, cameraImageUrl }} />
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .plugin-floorplan-radar {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .plugin-floorplan-radar-container {
+    position: relative;
+  }
+</style>

package/libs/floorplan/PanoFloorplanRadarPlugin/Controller.js

@@ -1,4 +1,4 @@
-import Main from './Components/Main';
+import Main from './Components/Main.svelte';
 import equal from '../../shared-utils/equal';
 import { CAMERA_IMAGE } from '../Assets/camera';
 import * as BasePlugin from '../../base/BasePluginWithData';

package/libs/floorplan/TopviewFloorplanPlugin/Controller.js

@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 import equal from '../../shared-utils/equal';
-import Main from '../Components/Main';
+import Main from '../Components/Main.svelte';
 import formatData from '../utils/formatData';
 import { CAMERA_IMAGE } from '../Assets/camera';
 import { omit } from '../../shared-utils/filter';

package/libs/shared-utils/Object3DHelper/Base/BaseController.d.ts

@@ -22,10 +22,10 @@ export declare abstract class BaseController<T extends BaseHelper = BaseHelper,
     hide(): void;
     dispose(): void;
     updateHelperPosition(): void;
-    setHelperPosition(position: THREE.Vector3): void;
+    updateHelperQuaternion(): void;
     setHelperMatrix4(matrix4: THREE.Matrix4, origin?: THREE.Vector3): void;
     setHelperQuaternion(quaternion: THREE.Quaternion, origin: THREE.Vector3): void;
-    setHelperScaleMatrix4(matrix4: THREE.Matrix4, params?: {
+    applyHelperScaleMatrix4(matrix4: THREE.Matrix4, params?: {
         origin?: THREE.Vector3;
         helperOrigin?: THREE.Vector3;
     }): void;

package/libs/shared-utils/Object3DHelper/Base/BaseController.js

@@ -89,6 +89,7 @@ export class BaseController {
         this.scene = scene;
         this.domEvents = new DomEvents(camera, container);
         this.needsRender = needsRender !== null && needsRender !== void 0 ? needsRender : (() => { });
+        this.updateHelperQuaternion();
         this.updateHelperPosition();
         this.enable();
     }
@@ -122,17 +123,20 @@ export class BaseController {
     updateHelperPosition() {
         this.helperObject3D.updatePosition();
     }
-    setHelperPosition(position) {
-        this.helperObject3D.setPosition(position);
+    updateHelperQuaternion() {
+        this.helperObject3D.updateQuaternion();
     }
+    // public setHelperPosition(position: THREE.Vector3) {
+    //   this.helperObject3D.setPosition(position)
+    // }
     setHelperMatrix4(matrix4, origin) {
         this.helperObject3D.updateMatrix4(matrix4, origin);
     }
     setHelperQuaternion(quaternion, origin) {
-        this.helperObject3D.updateQuaternion(quaternion, origin);
+        this.helperObject3D.applyHelperQuaternion(quaternion, origin);
     }
-    setHelperScaleMatrix4(matrix4, params) {
-        this.helperObject3D.setHelperScaleMatrix4(matrix4, params);
+    applyHelperScaleMatrix4(matrix4, params) {
+        this.helperObject3D.applyHelperScaleMatrix4(matrix4, params);
     }
     onWantsGesture(type, pointers, final) {
         if (this.isDragging)

package/libs/shared-utils/Object3DHelper/Base/BaseHelper.d.ts

@@ -13,13 +13,13 @@ export declare abstract class BaseHelper<OriginObject3D extends Object3D = Objec
     show(): void;
     hide(): void;
     updatePosition(): void;
-    setPosition(position: Vector3): void;
+    updateQuaternion(): void;
     updateMatrix4(matrix: THREE.Matrix4, origin?: THREE.Vector3): void;
-    setHelperScaleMatrix4(matrix: THREE.Matrix4, params?: {
+    applyHelperScaleMatrix4(matrix: THREE.Matrix4, params?: {
         origin?: THREE.Vector3;
         helperOrigin?: THREE.Vector3;
     }): void;
-    updateQuaternion(quaternion: THREE.Quaternion, origin?: THREE.Vector3): void;
+    applyHelperQuaternion(quaternion: THREE.Quaternion, origin?: THREE.Vector3): void;
     abstract showDraggingHelper(directions?: Direction[]): void;
     abstract dispose(): void;
 }

package/libs/shared-utils/Object3DHelper/Base/BaseHelper.js

@@ -32,16 +32,19 @@ export class BaseHelper extends Object3D {
     updatePosition() {
         this.position.copy(this.originObject3D.position);
     }
-    setPosition(position) {
-        this.position.copy(position);
+    updateQuaternion() {
+        this.quaternion.copy(this.originObject3D.quaternion);
     }
+    // public setPosition(position: Vector3) {
+    //   this.position.copy(position)
+    // }
     updateMatrix4(matrix, origin) {
         this.applyMatrix4(matrix);
     }
-    setHelperScaleMatrix4(matrix, params) {
+    applyHelperScaleMatrix4(matrix, params) {
         this.scale.applyMatrix4(matrix);
     }
-    updateQuaternion(quaternion, origin) {
+    applyHelperQuaternion(quaternion, origin) {
         this.applyQuaternion(quaternion);
     }
 }

package/libs/shared-utils/Object3DHelper/Controller/RotateController.js

@@ -190,7 +190,7 @@ export class RotateController extends BaseController {
         // end
         const quaternion = new THREE.Quaternion().setFromUnitVectors(startVector.clone().normalize(), currentVector.clone().normalize());
         object.applyQuaternion(quaternion);
-        this.helperObject3D.updateQuaternion(quaternion);
+        this.helperObject3D.applyHelperQuaternion(quaternion);
         this.helperObject3DQuaternion.premultiply(quaternion);
         this.hooks.emit('rotateUpdate', { quaternion, origin: rotateCenter });
         this.startInfo.startVector = currentVector;

package/libs/shared-utils/Object3DHelper/Helper/RectangleScaleHelper.d.ts

@@ -19,15 +19,14 @@ export declare class RectangleScaleHelper<T extends OriginObjectType = OriginObj
     private enabled;
     constructor(originObject3D: T, container: Element, camera: THREE.Camera, scene: THREE.Scene);
     updatePosition(): void;
-    setPosition(position: Vector3): void;
     updateMatrix4(matrix: THREE.Matrix4): void;
     showDraggingHelper(): void;
-    setHelperScaleMatrix4(matrix: THREE.Matrix4, params?: {
+    applyHelperScaleMatrix4(matrix: THREE.Matrix4, params?: {
         origin?: Vector3;
         helperOrigin?: Vector3;
     }): void;
     updatePoints(): void;
-    updateQuaternion(quaternion: THREE.Quaternion, origin: THREE.Vector3): void;
+    applyHelperQuaternion(quaternion: THREE.Quaternion, origin: THREE.Vector3): void;
     enable(): void;
     disable(): void;
     show(): void;

package/libs/shared-utils/Object3DHelper/Helper/RectangleScaleHelper.js

@@ -77,11 +77,10 @@ export class RectangleScaleHelper extends RectangleScaleHelperAbstract {
         (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject.position.copy(this.originObject3D.position);
         (_b = this.plane) === null || _b === void 0 ? void 0 : _b.position.copy(this.originObject3D.position);
     }
-    setPosition(position) {
-        var _a, _b;
-        (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject.position.copy(position);
-        (_b = this.plane) === null || _b === void 0 ? void 0 : _b.position.copy(position);
-    }
+    // public setPosition(position: Vector3) {
+    //   this.css3DInstance?.css3DObject.position.copy(position)
+    //   this.plane?.position.copy(position)
+    // }
     updateMatrix4(matrix) {
         var _a, _b;
         (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject.applyMatrix4(matrix);
@@ -91,7 +90,7 @@ export class RectangleScaleHelper extends RectangleScaleHelperAbstract {
     showDraggingHelper() {
         // nothing to do
     }
-    setHelperScaleMatrix4(matrix, params) {
+    applyHelperScaleMatrix4(matrix, params) {
         var _a, _b;
         (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject.scale.applyMatrix4(matrix);
         (_b = this.plane) === null || _b === void 0 ? void 0 : _b.scale.applyMatrix4(matrix);
@@ -109,7 +108,7 @@ export class RectangleScaleHelper extends RectangleScaleHelperAbstract {
             point.position.copy(position8[index]);
         });
     }
-    updateQuaternion(quaternion, origin) {
+    applyHelperQuaternion(quaternion, origin) {
         var _a;
         const css3DObject = (_a = this.css3DInstance) === null || _a === void 0 ? void 0 : _a.css3DObject;
         if (css3DObject) {

package/libs/shared-utils/Object3DHelper/Helper/RotateHelper.d.ts

@@ -19,7 +19,7 @@ export declare class RotateHelper extends RotateHelperAbstract {
         container: HTMLElement;
     });
     updateAngleHelperQuaternion(): void;
-    updateQuaternion(quaternion: THREE.Quaternion, origin?: THREE.Vector3): void;
+    applyHelperQuaternion(quaternion: THREE.Quaternion, origin?: THREE.Vector3): void;
     hide(): void;
     show(): void;
     showDraggingHelper(directions: Direction[]): void;

package/libs/shared-utils/Object3DHelper/Helper/RotateHelper.js

@@ -87,7 +87,7 @@ export class RotateHelper extends RotateHelperAbstract {
         this.yRingHelper.quaternion.copy(this.xzCircle.quaternion);
         this.zRingHelper.quaternion.copy(this.xyCircle.quaternion);
     }
-    updateQuaternion(quaternion, origin) {
+    applyHelperQuaternion(quaternion, origin) {
         this.yzCircle.applyQuaternion(quaternion);
         this.xzCircle.applyQuaternion(quaternion);
         this.xyCircle.applyQuaternion(quaternion);

package/libs/shared-utils/Object3DHelper/index.js

@@ -52,7 +52,7 @@ export class Object3DHelper {
             configurable: true,
             writable: true,
             value: (controller, ...positionParams) => {
-                var _a, _b, _c, _d, _e, _f, _g, _h;
+                var _a, _b, _c, _d;
                 const [position] = positionParams;
                 const matrix4 = position === null || position === void 0 ? void 0 : position.matrix4;
                 if (matrix4) {
@@ -63,14 +63,12 @@ export class Object3DHelper {
                     (_c = this.controllers.scaleController) === null || _c === void 0 ? void 0 : _c.setHelperMatrix4(matrix4);
                     (_d = this.helpers.outlineHelper) === null || _d === void 0 ? void 0 : _d.applyMatrix4(matrix4);
                 }
-                if (position === null || position === void 0 ? void 0 : position.position) {
-                    if (controller !== this.controllers.moveController)
-                        (_e = this.controllers.moveController) === null || _e === void 0 ? void 0 : _e.setHelperPosition(position.position);
-                    if (controller !== this.controllers.rotateController)
-                        (_f = this.controllers.rotateController) === null || _f === void 0 ? void 0 : _f.setHelperPosition(position.position);
-                    (_g = this.controllers.scaleController) === null || _g === void 0 ? void 0 : _g.setHelperPosition(position.position);
-                    (_h = this.helpers.outlineHelper) === null || _h === void 0 ? void 0 : _h.position.copy(position.position);
-                }
+                // if (position?.position) {
+                //   if (controller !== this.controllers.moveController) this.controllers.moveController?.setHelperPosition(position.position)
+                //   if (controller !== this.controllers.rotateController) this.controllers.rotateController?.setHelperPosition(position.position)
+                //   this.controllers.scaleController?.setHelperPosition(position.position)
+                //   this.helpers.outlineHelper?.position.copy(position.position)
+                // }
             }
         });
         Object.defineProperty(this, "handleScaleUpdate", {
@@ -82,7 +80,7 @@ export class Object3DHelper {
                 const [params] = positionParams;
                 const matrix4 = params === null || params === void 0 ? void 0 : params.matrix4;
                 if (matrix4) {
-                    (_a = this.controllers.scaleController) === null || _a === void 0 ? void 0 : _a.setHelperScaleMatrix4(matrix4, params);
+                    (_a = this.controllers.scaleController) === null || _a === void 0 ? void 0 : _a.applyHelperScaleMatrix4(matrix4, params);
                     (_b = this.helpers.outlineHelper) === null || _b === void 0 ? void 0 : _b.scale.applyMatrix4(matrix4);
                 }
             }

package/libs/shared-utils/Object3DHelper/typings/Hooks.d.ts

@@ -5,7 +5,6 @@ export declare type HelperEventMap = {
     scaleStart: () => void;
     positionUpdate: (position: {
         matrix4?: THREE.Matrix4;
-        position?: THREE.Vector3;
     } | undefined) => void;
     rotateUpdate: (rotate: {
         quaternion?: THREE.Quaternion;

package/package.json

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