@realsee/dnalogel 0.1.7 → 2.0.0-alpha.1

package/libs/floorplan/ModelFloorplanPlugin/utils/correctFiveState.js

@@ -0,0 +1,46 @@
+import { Five } from '@realsee/five';
+import changeMode from '../../../shared-utils/five/changeMode';
+import { FloorplanErrorType } from './constant';
+import to from '../../../shared-utils/to';
+import nearlyEqual from '../../../shared-utils/nearlyEqual';
+/** 判断当前状态是否可以展示户型图 */
+export function checkShowState(five, showState) {
+    if (five.currentMode !== Five.Mode.Floorplan)
+        return false;
+    const { latitude, longitude, fov } = showState;
+    const { latitude: _latitude, longitude: _longitude } = five.getCurrentState();
+    const _fov = five.camera.fov;
+    if (nearlyEqual(latitude, _latitude, 1) && nearlyEqual(longitude, _longitude, 1) && fov === _fov)
+        return true;
+    return false;
+}
+/** 更改 Five 状态到展示户型图的状态
+ * 1. 判断状态不符合时，会纠正到正确的状态
+ * 2. 内置了相应的动画时间计算
+ * 3. 纠正成功会返回 true，失败「可能会被用户行为中断」会返回 false
+ */
+export default async function correctFiveState(five, showState, userAction = true) {
+    // 当前已满足状态，不需要变更
+    const result = checkShowState(five, showState);
+    if (result === true)
+        return;
+    // 纠正 mode
+    if (five.currentMode !== Five.Mode.Floorplan) {
+        const [changeModeError] = await to(changeMode(five, Five.Mode.Floorplan, showState, undefined, userAction));
+        if (changeModeError)
+            throw changeModeError;
+        // changeMode 是异步行为，可能会被打断，需要在结束后加一次判断
+        const result = checkShowState(five, showState);
+        if (result === false)
+            throw new Error(FloorplanErrorType.ChangeModeError);
+        return;
+    }
+    // 纠正相机状态
+    // 根据 latitude、longitude、fov 计算动画时间，最多 1s
+    const { latitude, longitude, fov } = five.getCurrentState();
+    const time = Math.min(1000, Math.max(200, Math.abs(latitude - Math.PI / 2) * 1000, (longitude > Math.PI ? 2 * Math.PI - longitude : longitude) * 500, Math.abs(fov - showState.fov) * 10));
+    const [updateCameraError] = await to(five.updateCamera(showState, time, userAction));
+    if (updateCameraError)
+        throw new Error(FloorplanErrorType.UpdateCameraError);
+    return;
+}

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

@@ -0,0 +1,84 @@
+<script>import { onMount, onDestroy } 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;
+/** 获取相机在当前 Five 状态下的位移 */
+function getCameraPositionTransform(panoIndex) {
+    const observer = floorplanData.observers[panoIndex];
+    const bounding = floorplanData.bounding;
+    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);
+    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)`;
+}
+const changePosition = (panoIndex) => {
+    positionTransform = getCameraPositionTransform(panoIndex);
+};
+const changeRotate = throttle(() => {
+    rotateTransform = getCameraRotationTransform();
+}, 1000 / 60);
+// 初始状态，不能等 mount 之后再计算，那样第一次 camera 展示的时候也会有动画
+let rotateTransform = getCameraRotationTransform();
+let positionTransform = getCameraPositionTransform(five.getCurrentState().panoIndex);
+onMount(() => {
+    five.on('panoWillArrive', changePosition);
+    five.on('cameraDirectionUpdate', changeRotate);
+});
+onDestroy(() => {
+    five.off('panoWillArrive', changePosition);
+    five.off('cameraDirectionUpdate', changeRotate);
+});
+</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>
+</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/Camera.svelte.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDjB,CAAC,CAAC,MAAM;;AAER,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC;AACzC,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC;AAClF,IAAI,CAAC;AACL,MAAM,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,MAAM;AACxC,MAAM,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC;AACxC,MAAM,KAAK,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;AACpE,IAAI,CAAC,CAAC,CAAC,GAAG;AACV,EAAE,CAAC,CAAC,GAAG;AACP,CAAC,CAAC,GAAG;;AAEL,CAAC,KAAK;AACN,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC;AAChC,IAAI,KAAK,CAAC,CAAC,GAAG,CAAC;AACf,IAAI,MAAM,CAAC,CAAC,GAAG,CAAC;AAChB,IAAI,QAAQ,CAAC,CAAC,QAAQ;AACtB,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI;AACxB,EAAE;AACF,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,QAAQ,CAAC;AACjC,IAAI,QAAQ,CAAC,CAAC,QAAQ;AACtB,IAAI,IAAI,CAAC,CAAC,CAAC;AACX,IAAI,GAAG,CAAC,CAAC,CAAC;AACV,IAAI,KAAK,CAAC,CAAC,CAAC;AACZ,IAAI,MAAM,CAAC,CAAC,CAAC;AACb,IAAI,SAAS,CAAC,CAAC,IAAI;AACnB,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI;AACxB,IAAI,UAAU,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,MAAM;AACnC,EAAE;AACF,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC;AAC/B,IAAI,QAAQ,CAAC,CAAC,QAAQ;AACtB,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI;AACf,IAAI,GAAG,CAAC,CAAC,CAAC,IAAI;AACd,IAAI,KAAK,CAAC,CAAC,IAAI;AACf,IAAI,MAAM,CAAC,CAAC,IAAI;AAChB,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,IAAI;AAC/B,IAAI,SAAS,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;AAC5B,IAAI,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,MAAM;AAChC,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC;AACzB,EAAE;AACF,CAAC,CAAC,KAAK;","names":[],"sources":["Camera.svelte"]}

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?.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/CurrentFloor.svelte.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;;;;;;;;;;;AAgBjB,CAAC,CAAC,MAAM;;AAER,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/C,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;AACzD,CAAC,CAAC,EAAE,CAAC,WAAW;AAChB,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;AAChF,CAAC,CAAC,EAAE;","names":[],"sources":["CurrentFloor.svelte"]}

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>
+    </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/CurrentFloor/ExtraObjects.svelte.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;AAIjB,CAAC,CAAC,MAAM;;AAER,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC;AACjD,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,EAAE,CAAC;AACrD,IAAI,CAAC;AACL,MAAM,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,QAAQ;AAC/D,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;AACvD,MAAM,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;AACxD,IAAI;AACJ,MAAM,CAAC;AACP,QAAQ,KAAK,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,IAAI;AACvD,QAAQ,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG;AACrD,QAAQ,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG;AACvD,QAAQ,KAAK,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACjE,MAAM,CAAC,CAAC,CAAC,GAAG;AACZ,IAAI,CAAC,CAAC,GAAG;AACT,EAAE,CAAC,CAAC,IAAI;AACR,CAAC,CAAC,GAAG;;AAEL,CAAC,KAAK;AACN,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC;AACxC,IAAI,QAAQ,CAAC,CAAC,QAAQ;AACtB,IAAI,GAAG,CAAC,CAAC,CAAC;AACV,IAAI,IAAI,CAAC,CAAC,CAAC;AACX,IAAI,KAAK,CAAC,CAAC,GAAG,CAAC;AACf,IAAI,MAAM,CAAC,CAAC,GAAG,CAAC;AAChB,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI;AACxB,EAAE;;AAEF,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC;AACtD,IAAI,QAAQ,CAAC,CAAC,QAAQ;AACtB,IAAI,KAAK,CAAC,CAAC,CAAC;AACZ,IAAI,MAAM,CAAC,CAAC,CAAC;AACb,EAAE;;AAEF,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC;AAC5C,IAAI,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACpC,EAAE;AACF,CAAC,CAAC,KAAK;","names":[],"sources":["ExtraObjects.svelte"]}

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

@@ -0,0 +1,61 @@
+<script>import { onMount } from 'svelte';
+import Camera from './Camera.svelte';
+import CurrentFloor from './CurrentFloor/CurrentFloor.svelte';
+export let five;
+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>
+
+<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>
+
+<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/Components/Main.svelte.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CjB,CAAC,CAAC,MAAM;;AAER,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY;AACtE,EAAE,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACxB,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE,CAAC;AACjH,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/F,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,IAAI,CAAC,CAAC,GAAG;AACT,EAAE,CAAC,CAAC,EAAE;AACN,CAAC,CAAC,GAAG;;AAEL,CAAC,KAAK;AACN,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC;AAC1B,IAAI,KAAK,CAAC,CAAC,GAAG,CAAC;AACf,IAAI,MAAM,CAAC,CAAC,GAAG,CAAC;AAChB,IAAI,OAAO,CAAC,CAAC,IAAI;AACjB,IAAI,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM;AAC3B,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,MAAM;AACvB,EAAE;;AAEF,EAAE,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,CAAC;AACpC,IAAI,QAAQ,CAAC,CAAC,QAAQ;AACtB,EAAE;AACF,CAAC,CAAC,KAAK;","names":[],"sources":["Main.svelte"]}

package/{plugins → libs}/floorplan/PanoFloorplanRadarPlugin/Controller.d.ts

@@ -1,25 +1,21 @@
-import * as React from 'react';
-import { Five } from '@realsee/five';
-import { FloorplanServerData } from '../typings/floorplanServerData';
-import { FloorplanExtraObject3D } from '../typings/floorplanData';
+import type { Five } from '@realsee/five';
+import type { FloorplanServerData } from '../typings/floorplanServerData';
+import type { FloorplanExtraObject3D } from '../typings/floorplanData';
 export interface PanoFloorplanRadarPluginControllerParameter {
     wrapper?: string | Element;
     configs?: {
         hoverEnable?: boolean;
-        cameraImage?: {
-            style: React.CSSProperties;
-        };
+        cameraImageUrl?: string;
     };
 }
 export default class PanoFloorplanRadarPluginController {
+    private app?;
     private five;
-    private pxmm;
     private wrapperSelector;
     private data?;
     private wrapper;
-    private size;
     private extraObjects?;
-    private orginExtraObjects?;
+    private originExtraObjects?;
     private configs;
     constructor(five: Five, params?: PanoFloorplanRadarPluginControllerParameter);
     dispose: () => void;
@@ -28,6 +24,5 @@ export default class PanoFloorplanRadarPluginController {
     appendTo(wrapper: Element): void;
     changeConfigs(configs: PanoFloorplanRadarPluginController['configs']): void;
     setExtraObjectsWith3DPositions(data: FloorplanExtraObject3D[]): void;
-    private updateSize;
     private render;
 }

package/libs/floorplan/PanoFloorplanRadarPlugin/Controller.js

@@ -0,0 +1,88 @@
+import Main from './Components/Main.svelte';
+import formatData, { formatExtraObjects } from '../utils/formatData';
+export default class PanoFloorplanRadarPluginController {
+    app;
+    five;
+    wrapperSelector = '';
+    data;
+    wrapper = null;
+    extraObjects;
+    originExtraObjects;
+    configs = {};
+    constructor(five, params) {
+        this.five = five;
+        params?.configs && Object.assign(this.configs, params.configs);
+        if (typeof params?.wrapper === 'string')
+            this.wrapperSelector = params.wrapper;
+        else if (params?.wrapper instanceof Element)
+            this.wrapper = params.wrapper;
+        five.once('dispose', this.dispose);
+    }
+    dispose = () => {
+        this.app?.$destroy();
+    };
+    load = async (data) => {
+        const copyData = JSON.parse(JSON.stringify(data));
+        const floorplanData = await formatData(copyData);
+        this.data = floorplanData;
+        // const loadImage = async () => {
+        //   const floorIndex = this.five.work.observers[this.five.getCurrentState().panoIndex].floorIndex
+        //   // 当有 svgString 时，没有加载过程
+        //   if (floorplanData.outlines[floorIndex]?.svgContent) return
+        //   // 如果当前楼层图片不存在，不存在加载过程
+        //   const nowFloorImageSrc = floorplanData.outlines[floorIndex]?.url
+        //   if (!nowFloorImageSrc) return
+        //   // 图片加载完成时再 render
+        //   await new Promise<void>((resolve) => {
+        //     const nowFloorImage = new Image()
+        //     nowFloorImage.src = nowFloorImageSrc
+        //     nowFloorImage.onload = () => resolve()
+        //   })
+        // }
+        // await loadImage()
+        this.render();
+    };
+    /** 把插件的渲染DOM插入到对应的容器中去 */
+    appendTo(wrapper) {
+        this.wrapper = wrapper;
+        this.render();
+    }
+    changeConfigs(configs) {
+        Object.assign(this.configs, configs);
+        this.render();
+    }
+    setExtraObjectsWith3DPositions(data) {
+        this.originExtraObjects = data;
+        if (!this.data)
+            return;
+        this.extraObjects = formatExtraObjects(data, this.five, this.data);
+        this.render();
+    }
+    render() {
+        // 处理 wrapper
+        if (!this.wrapper) {
+            const _wrapper = document.querySelector(this.wrapperSelector);
+            this.wrapper = _wrapper;
+        }
+        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,
+            extraObjects: this.extraObjects,
+            cameraImageUrl: this.configs.cameraImageUrl,
+            hoverEnable: this.configs.hoverEnable ?? false,
+        };
+        if (!this.app) {
+            this.app = new Main({
+                target: this.wrapper,
+                props,
+            });
+            return;
+        }
+        this.app.$set(props);
+    }
+}

package/libs/floorplan/PanoFloorplanRadarPlugin/index.js

@@ -0,0 +1,5 @@
+import PanoFloorplanRadarPluginController from './Controller';
+export const PanoFloorplanRadarPlugin = (five, params) => {
+    return new PanoFloorplanRadarPluginController(five, params);
+};
+export default PanoFloorplanRadarPlugin;

package/{plugins → libs}/floorplan/TopviewFloorplanPlugin/Controller.d.ts

@@ -1,15 +1,17 @@
-import * as React from 'react';
-import { Five } from '@realsee/five';
-import { FloorplanServerData } from '../typings/floorplanServerData';
-import { FloorplanRoomItem } from '../typings/floorplanData';
+import type { Five } from '@realsee/five';
+import type { FloorplanServerData } from '../typings/floorplanServerData';
+import type { FloorplanRoomItem } from '../typings/floorplanData';
 export interface TopviewFloorplanPluginParameterType {
     selector?: string | Element;
     scale?: number;
+    modelOpacity?: number;
+    cameraImageUrl?: string;
     hoverEnable?: boolean;
+    compassEnable?: boolean;
     autoShowEnable?: boolean;
-    cameraImage?: {
-        style: React.CSSProperties;
-    };
+    ruleLabelsEnable?: boolean;
+    roomLabelsEnable?: boolean;
+    preventRoomClick?: boolean;
     getLabelElement?: (room: FloorplanRoomItem) => Element | null;
 }
 export declare type TopviewFloorplanPluginReturnType = TopviewFloorplanPluginController;
@@ -19,13 +21,13 @@ export declare class TopviewFloorplanPluginController {
         height: number;
     };
     visible: boolean;
+    private pxmm;
+    private app?;
     private five;
-    protected pxmm: number;
     private panoIndex;
     private floorIndex;
     private configs;
     private lastPanoramaLongitude;
-    private handleClick;
     private selector?;
     private floorplanData?;
     private wrapper?;
@@ -40,8 +42,10 @@ export declare class TopviewFloorplanPluginController {
     private onModelShownFloorChange;
     /** panoIndex 改变时，更新 floorIndex */
     private handlePanoArrived;
-    /** 在户型图展示时阻止 Five 的所有行为 */
-    private handleWantsGesture;
+    /** 配置了 preventRoomClick 后，在户型图展示时阻止 Five 走点 */
+    private handleWantsMoveToPano;
+    /** 在户型图展示时阻止 Five 滑动行为 */
+    private handleWantsPanGesture;
     private handleModelLoaded;
     /** 非 Topview 态隐藏户型图 */
     private handleModeChange;

package/libs/floorplan/TopviewFloorplanPlugin/Controller.js

@@ -0,0 +1,189 @@
+import { pluginStyle } from './style';
+import formatData from '../utils/formatData';
+import { omit } from '../../shared-utils/filter';
+import getPxmm from '../../shared-utils/getPxmm';
+import Main from "../ModelFloorplanPlugin/Components/Main.svelte";
+import changeModelCanvasOpacity from '../../shared-utils/changeModelCanvasOpacity';
+export class TopviewFloorplanPluginController {
+    size = { width: 0, height: 0 };
+    visible = false;
+    pxmm = 0;
+    app;
+    five;
+    panoIndex = 0;
+    floorIndex = 0;
+    configs = {};
+    lastPanoramaLongitude = 0;
+    selector;
+    floorplanData;
+    wrapper;
+    container = document.createElement('div');
+    constructor(five, params) {
+        this.five = five;
+        this.selector = params.selector;
+        this.configs = omit(params, ['selector']);
+        // 设置 container 样式
+        this.container.classList.add('floorplan-plugin');
+        Object.assign(this.container.style, pluginStyle);
+        // 如果初始化的时候模型已经加载完毕了，就不用再等 modelLoaded
+        this.five.model.loaded ? this.handleModelLoaded() : five.once('modelLoaded', this.handleModelLoaded);
+        this.five.once('dispose', this.dispose);
+        this.five.on('modeChange', this.handleModeChange);
+        this.five.on('panoArrived', this.handlePanoArrived);
+        this.five.on('initAnimationEnded', this.handleInitAnimationEnded);
+        this.five.on('modelShownFloorChange', this.onModelShownFloorChange);
+    }
+    /** 加载户型图数据 */
+    async load(data) {
+        const copyData = JSON.parse(JSON.stringify(data));
+        this.floorplanData = await formatData(copyData);
+        this.render();
+    }
+    /** 把插件的渲染DOM插入到对应的容器中去 */
+    appendTo(wrapper) {
+        this.wrapper = wrapper;
+        wrapper.appendChild(this.container);
+        return this;
+    }
+    dispose = () => {
+        this.hide();
+        this.container?.remove();
+        this.app?.$destroy();
+        this.five.off('modeChange', this.handleModeChange);
+        this.five.off('panoArrived', this.handlePanoArrived);
+        this.five.off('modelLoaded', this.handleModelLoaded);
+        this.five.off('wantsMoveToPano', this.handleWantsMoveToPano);
+        this.five.off('wantsPanGesture', this.handleWantsPanGesture);
+        this.five.off('initAnimationEnded', this.handleInitAnimationEnded);
+        this.five.off('modelShownFloorChange', this.onModelShownFloorChange);
+    };
+    /** 模型楼层高亮改变时，自动进行楼层切换 */
+    onModelShownFloorChange = (shownFloor) => {
+        if (shownFloor === null)
+            return;
+        this.floorIndex = shownFloor;
+        this.render();
+    };
+    /** panoIndex 改变时，更新 floorIndex */
+    handlePanoArrived = (index) => {
+        if (!this.five?.work)
+            return;
+        this.panoIndex = index;
+        this.floorIndex = this.five.work.observers[index].floorIndex;
+    };
+    /** 配置了 preventRoomClick 后，在户型图展示时阻止 Five 走点 */
+    handleWantsMoveToPano = () => {
+        if (!this.visible)
+            return;
+        if (this.configs.preventRoomClick)
+            return false;
+        return;
+    };
+    /** 在户型图展示时阻止 Five 滑动行为 */
+    handleWantsPanGesture = () => {
+        if (!this.visible)
+            return;
+        return false;
+    };
+    handleModelLoaded = () => {
+        if (this.wrapper)
+            return;
+        if (!this.selector)
+            return;
+        const wrapper = this.selector instanceof Element ? this.selector : document.querySelector(this.selector);
+        if (!wrapper)
+            throw new Error('不正确的父容器选择器');
+        this.wrapper = wrapper;
+        wrapper.append(this.container);
+    };
+    /** 非 Topview 态隐藏户型图 */
+    handleModeChange = (mode) => {
+        if (mode !== 'Topview')
+            return this.hide();
+    };
+    /** 动画结束后是 Topview 态就展示户型图 */
+    handleInitAnimationEnded = () => {
+        const { mode } = this.five.getCurrentState();
+        if (mode === 'Topview')
+            this.show();
+    };
+    show() {
+        this.visible = true;
+        this.updateSize();
+        this.five.model.show(this.floorIndex);
+        const renderDuration = 500;
+        const modelOpacity = this.configs.modelOpacity;
+        if (typeof modelOpacity === 'number') {
+            changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
+        }
+        this.render(renderDuration);
+        this.five.on('wantsMoveToPano', this.handleWantsMoveToPano);
+        this.five.on('wantsPanGesture', this.handleWantsPanGesture);
+    }
+    hide() {
+        const modelOpacity = 1;
+        const renderDuration = 0;
+        this.visible = false;
+        changeModelCanvasOpacity(this.five, modelOpacity, renderDuration);
+        this.render();
+        this.five.on('wantsMoveToPano', this.handleWantsMoveToPano);
+        this.five.on('wantsPanGesture', this.handleWantsPanGesture);
+    }
+    /** 更新户型图大小 */
+    updateSize = () => {
+        if (!this.floorplanData)
+            return;
+        if (!this.container || !this.wrapper)
+            return;
+        if (this.five.getCurrentState().mode !== 'Topview')
+            return;
+        // 计算户型图展示大小
+        const { min, max } = this.floorplanData.bounding;
+        const width = max.x - min.x;
+        const height = max.y - min.y;
+        // 每毫米对应的 px 值
+        const pxmm = getPxmm(this.five, this.wrapper);
+        const _width = Math.ceil(width * pxmm);
+        const _height = Math.ceil(height * pxmm);
+        this.pxmm = pxmm;
+        this.size = { width: _width, height: _height };
+        this.container.style.width = _width + 'px';
+        this.container.style.height = _height + 'px';
+    };
+    render(duration) {
+        if (!this.container || !this.floorplanData)
+            return;
+        if (this.size.width === 0)
+            return;
+        const { getLabelElement, cameraImageUrl, preventRoomClick, hoverEnable, compassEnable, roomLabelsEnable, ruleLabelsEnable, } = this.configs;
+        const handleClick = preventRoomClick ? () => false : undefined;
+        console.log('🚀 ~ TopviewFloorplanPluginController ~ handleClick', handleClick);
+        const props = {
+            five: this.five,
+            pxmm: this.pxmm,
+            cameraImageUrl,
+            visible: this.visible,
+            duration: duration ?? 0,
+            panoIndex: this.panoIndex,
+            floorIndex: this.floorIndex,
+            floorplanData: this.floorplanData,
+            hoverEnable: hoverEnable ?? false,
+            compassEnable: compassEnable ?? true,
+            ruleLabelsEnable: ruleLabelsEnable ?? true,
+            roomLabelsEnable: roomLabelsEnable ?? true,
+            lastPanoramaLongitude: this.lastPanoramaLongitude,
+            getLabelElement,
+            onRoomHeightClick: handleClick,
+        };
+        if (!this.app) {
+            this.app = new Main({
+                target: this.container,
+                intro: true,
+                props,
+            });
+        }
+        else {
+            this.app.$set(props);
+        }
+    }
+}

package/libs/floorplan/TopviewFloorplanPlugin/index.js

@@ -0,0 +1,5 @@
+import { TopviewFloorplanPluginController, } from './Controller';
+export const TopviewFloorplanPlugin = (five, params) => {
+    return new TopviewFloorplanPluginController(five, params);
+};
+export default TopviewFloorplanPlugin;