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

package/libs/ModelItemLabelPlugin/ItemLabelItem.svelte

@@ -0,0 +1,100 @@
+<script>import "./events.type";
+import classNames from 'classnames';
+export let itemLabel;
+export let hooks;
+function onClick() {
+    console.log('__onclick___: ', itemLabel);
+    hooks.emit('onLabelClick', itemLabel);
+}
+</script>
+
+<div
+		class={classNames("item-label-item", { visible: itemLabel.visible })}
+		style:z-index="{itemLabel.zIndex}"
+		style:transform="{itemLabel.transform}"
+>
+	<div
+			class="item-label-item__text-wrap"
+			style="top: {`-${itemLabel.strokeLength + 26}px`}"
+	>
+			<span
+					class="item-label-item__text"
+					on:click="{onClick}"
+			>{itemLabel.name.length > 6 ? `${itemLabel.name.slice(0, 6)}...` : itemLabel.name}</span>
+	</div>
+	<div
+			class="item-label-item__bar"
+			style="height: {`${itemLabel.strokeLength}px`}">
+	</div>
+</div>
+
+<style>
+    .item-label-item {
+        position: absolute;
+        z-index: 0;
+        transform: none;
+        cursor: pointer;
+        pointer-events: none;
+        user-select: none;
+        opacity: 0;
+    }
+
+    .item-label-item.visible {
+        opacity: 1;
+        animation: fadeIn .3s ease-in;
+    }
+
+    .item-label-item__text-wrap::before {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, .3);
+        filter: blur(16px);
+        z-index: -1;
+    }
+
+    .item-label-item__text-wrap {
+        padding: 6px 6px 0;
+        position: absolute;
+        height: 20px;
+        pointer-events: all;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        white-space: nowrap;
+        line-height: 10px;
+        font-size: 11px;
+        font-weight: bold;
+        color: #FFEAC0;
+        transform: translate(-50%, 0);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .item-label-item__text {
+        padding-bottom: 4px;
+        border-top: 0 solid;
+        border-left: 0 solid;
+        border-right: 0 solid;
+        border-bottom: 1px solid;
+        border-image: linear-gradient(to right, rgba(234, 208, 154, 0), rgba(234, 208, 154, 100), rgba(234, 208, 154, 0)) 4.5 1 4.5;
+    }
+
+    .item-label-item__bar {
+        position: absolute;
+        bottom: 0;
+        width: 1px;
+        background-image: linear-gradient(to bottom, rgba(234, 208, 154, 0), rgba(234, 208, 154, 1));
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0
+        }
+        to {
+            opacity: 1
+        }
+    }
+</style>
+

package/libs/ModelItemLabelPlugin/ModelItemLabelPlugin.js

@@ -1,5 +1,5 @@
 import { Five, Subscribe } from "@realsee/five";
-import ItemLabelComponent from './ItemLabelComponent';
+import ItemLabelComponent from './ItemLabelComponent.svelte';
 import { DISPLAY_STRATEGY_TYPE } from "./typings";
 import { parseModelItemLabelPluginData } from "./utils/parseData";
 export const ModelItemLabelPlugin = (five, params) => {

package/libs/ModelItemLabelPlugin/typings.d.ts

@@ -1,6 +1,6 @@
 import type { Subscribe } from "@realsee/five";
 import type { PluginEvent } from "./events.type";
-import type ItemLabelComponent from './ItemLabelComponent';
+import type ItemLabelComponent from './ItemLabelComponent.svelte';
 export declare enum DISPLAY_STRATEGY_TYPE {
     SMALL = "small",
     MIDLLE = "middle",

package/libs/ModelRoomLabelPlugin/Controller.js

@@ -1,4 +1,4 @@
-import RoomLabelItems from './RoomLabelItems';
+import RoomLabelItems from './RoomLabelItems.svelte';
 import { parseModelRoomLabelPluginData } from './utils/parseData';
 export class ModelRoomLabelController {
     constructor(five) {

package/libs/ModelRoomLabelPlugin/RoomLabelItem.svelte

@@ -0,0 +1,63 @@
+<script>import { ROOM_LABEL_BG } from './Assets/roomLabelBg';
+export let five;
+export let roomLabel;
+function onClick() {
+    five.setState({ panoIndex: roomLabel.panoIndex, mode: 'Panorama', longitude: roomLabel.longitude });
+}
+</script>
+
+<div
+  class="room-label-item"
+  style:z-index="{roomLabel.zIndex}"
+  style:transform="{roomLabel.transform}"
+  style:opacity="{roomLabel.visible ? 1 : 0}"
+>
+  <span
+    class="room-label-item__text"
+    class:wide="{roomLabel.name.length > 3}"
+    style="background-image: url({ROOM_LABEL_BG})"
+    on:click="{onClick}">{roomLabel.name}</span
+  >
+  <div class="room-label-item__bar"></div>
+</div>
+
+<style>
+  .room-label-item {
+    position: absolute;
+    font-size: 8px;
+    z-index: 0;
+    transform: none;
+    cursor: pointer;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .room-label-item__text {
+    position: absolute;
+    left: 0;
+    top: -64px;
+    transform: translate(-50%, 0);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 20px;
+    min-width: 32px;
+    padding: 0 6px;
+    pointer-events: all;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    white-space: nowrap;
+  }
+
+  .room-label-item__bar {
+    position: absolute;
+    top: -44px;
+    height: 48px;
+    width: 1px;
+    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+  }
+
+  .wide {
+    font-size: 10px;
+  }
+</style>

package/libs/ModelRoomLabelPlugin/RoomLabelItems.svelte

@@ -0,0 +1,94 @@
+<script>import { onDestroy } from 'svelte';
+import { Raycaster, Vector3 } from 'three';
+import RoomLabelItem from './RoomLabelItem.svelte';
+export let five;
+export let roomLabels;
+let containerWidth;
+let containerHeight;
+let shownFloor = null;
+$: rendererSize = { x: containerWidth, y: containerHeight };
+$: {
+    // rendererSize 变化时，触发 reRender
+    roomLabels = getFormatedRoomLabels(rendererSize);
+}
+$: {
+    // shownFloor 变化时，更新 item visible
+    roomLabels = roomLabels.map((item) => {
+        const isLabelInFloor = shownFloor === null || item.floorIndex === shownFloor;
+        const visible = isLabelInFloor ? item.visible : false;
+        return Object.assign(Object.assign({}, item), { visible });
+    });
+}
+function getLabelVisible(item) {
+    const raycaster = new Raycaster();
+    const cameraPosition = five.camera.position.clone();
+    const position = new Vector3(item.position.x, item.position.y, item.position.z);
+    const vectorDistance = position.distanceTo(cameraPosition);
+    raycaster.set(cameraPosition.clone(), position.clone().sub(cameraPosition).normalize());
+    const [intersection] = five.model.intersectRaycaster(raycaster);
+    if (intersection && intersection.distance + 1 < vectorDistance)
+        return false;
+    return true;
+}
+function getLabelTransform(item, rendererSize) {
+    const position = new Vector3(item.position.x, item.position.y, item.position.z);
+    const mouse = position.clone().project(five.camera);
+    const xOffset = Math.ceil(((mouse.x + 1) / 2) * rendererSize.x);
+    const yOffset = Math.ceil(((-mouse.y + 1) / 2) * rendererSize.y);
+    return `translate(${xOffset}px, ${yOffset}px)`;
+}
+function getFormatedRoomLabels(rendererSize) {
+    // 因为 item distance 需要重复计算，所以缓存一下
+    const distanceMap = new Map();
+    function getItemDistance(item) {
+        const cacheDistance = distanceMap.get(item.id);
+        if (cacheDistance)
+            return cacheDistance;
+        const { x, y, z } = item.position;
+        const distance = new Vector3(x, y, z).clone().distanceTo(five.camera.position);
+        distanceMap.set(item.id, distance);
+        return distance;
+    }
+    const formatedItems = roomLabels.map((item) => {
+        const visible = getLabelVisible(item);
+        const transform = visible ? getLabelTransform(item, rendererSize) : item.transform;
+        const itemDistance = getItemDistance(item);
+        // visible === true 的 item 中，distance 比自己小的 item 个数
+        const minItemLen = roomLabels.filter((item) => item.visible && getItemDistance(item) < itemDistance).length;
+        const zIndex = minItemLen * 10;
+        return Object.assign(Object.assign({}, item), { visible, transform, zIndex });
+    });
+    return formatedItems;
+}
+function onFiveCameraUpdate() {
+    roomLabels = getFormatedRoomLabels(rendererSize);
+}
+function onFiveModelShownFloorChange(floorIndex) {
+    shownFloor = floorIndex;
+}
+five.on('cameraUpdate', onFiveCameraUpdate);
+five.on('modelShownFloorChange', onFiveModelShownFloorChange);
+onDestroy(() => {
+    five.off('cameraUpdate', onFiveCameraUpdate);
+    five.off('modelShownFloorChange', onFiveModelShownFloorChange);
+});
+</script>
+
+<div
+  class="room-labels-container"
+  bind:clientWidth="{containerWidth}"
+  bind:clientHeight="{containerHeight}"
+>
+  {#each roomLabels as roomLableItem (roomLableItem.id)}
+    <RoomLabelItem roomLabel="{roomLableItem}" five="{five}" />
+  {/each}
+</div>
+
+<style>
+  .room-labels-container {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    color: #fff;
+  }
+</style>

package/libs/Object3DHelperPlugin/Controller.d.ts

@@ -1,15 +1,49 @@
 import type { Five } from '@realsee/five';
-import type * as BasePlugin from '../base/BasePlugin';
+import * as BasePlugin from '../base/BasePlugin';
 import type * as THREE from 'three';
 import { Object3DHelper } from '../shared-utils/Object3DHelper';
-import type { Object3DHelperState, Object3DHelperEventMap } from '../shared-utils/Object3DHelper/typings';
+import type { Object3DHelperState } from '../shared-utils/Object3DHelper/typings';
+import type { Object3DHelperPluginEventMap, Object3DHelperPluginState } from './typings';
 export declare const VERSION = "v1.0.0";
 export declare const PLUGIN: string;
-export declare class Object3DHelperController extends Object3DHelper implements BasePlugin.Controller<Object3DHelperState, Object3DHelperEventMap> {
+export declare class Object3DHelperController extends BasePlugin.Controller<Object3DHelperPluginState, Object3DHelperPluginEventMap> {
     version: string;
     name: string;
-    five: Five;
+    state: Object3DHelperState;
+    objectHelperMap: Map<THREE.Object3D, Object3DHelper>;
     constructor(five: Five);
+    /**
+     * @description Show guide line
+     */
+    show(options?: {
+        userAction?: boolean;
+    }): Promise<void>;
+    /**
+     * @description Hide guide line
+     */
+    hide(options?: {
+        userAction?: boolean;
+    }): Promise<void>;
+    /**
+     * @description Enable
+     */
+    enable(options?: {
+        userAction?: boolean;
+    }): void;
+    /**
+     * @description Disable
+     */
+    disable(options?: {
+        userAction?: boolean;
+    }): void;
+    /**
+     * @description Dispose
+     */
+    dispose(): void;
+    setState(state: Partial<Object3DHelperState>, options?: {
+        userAction?: boolean;
+    } & Record<string, any>): void;
+    getObject3DHelper(object3D: THREE.Object3D): Object3DHelper;
     /**
      * @description 添加 helper
      * @param { THREE.Object3D } object3D       要添加helper的物体
@@ -22,4 +56,10 @@ export declare class Object3DHelperController extends Object3DHelper implements
         rotateHelper?: boolean;
         scaleHelper?: boolean;
     }): void;
+    removeObject3DHelper(object3D: THREE.Object3D): void;
+    private handleEnable;
+    private handleVisible;
+    private handleDispose;
+    private everyHelperDo;
+    private actionIfStateIsEnabled;
 }

package/libs/Object3DHelperPlugin/Controller.js

@@ -1,3 +1,4 @@
+import * as BasePlugin from '../base/BasePlugin';
 import { MoveHelper, RotateHelper, RectangleScaleHelper } from '../shared-utils/Object3DHelper/Helper';
 import { MoveController } from '../shared-utils/Object3DHelper/Controller/MoveController';
 import { FiveControllerWrapper } from './FiveControllerWrapper';
@@ -7,9 +8,18 @@ import { CSS3DScaleController } from '../shared-utils/Object3DHelper/Controller/
 export const VERSION = 'v1.0.0';
 const PLUGIN_NAME = 'Object3DHelperPlugin';
 export const PLUGIN = `${PLUGIN_NAME}@${VERSION}`;
-export class Object3DHelperController extends Object3DHelper {
+const disposedErrorLog = () => {
+    console.error(`${PLUGIN} is disposed`);
+};
+const disableWarnLog = () => {
+    console.warn(`${PLUGIN} is disabled`);
+};
+const disableErrorLog = () => {
+    console.error(`${PLUGIN} is disabled`);
+};
+export class Object3DHelperController extends BasePlugin.Controller {
     constructor(five) {
-        super();
+        super(five);
         Object.defineProperty(this, "version", {
             enumerable: true,
             configurable: true,
@@ -22,15 +32,80 @@ export class Object3DHelperController extends Object3DHelper {
             writable: true,
             value: PLUGIN_NAME
         });
-        Object.defineProperty(this, "five", {
+        Object.defineProperty(this, "state", {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: {
+                visible: true,
+                enabled: true,
+                disposed: false,
+            }
+        });
+        Object.defineProperty(this, "objectHelperMap", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Map()
         });
         this.five = five;
         Object.assign(window, { [`__${PLUGIN_NAME.toUpperCase()}_DEBUG__`]: this });
     }
+    /**
+     * @description Show guide line
+     */
+    async show(options) {
+        this.setState({ visible: true }, options);
+    }
+    /**
+     * @description Hide guide line
+     */
+    async hide(options) {
+        this.setState({ visible: false }, options);
+    }
+    /**
+     * @description Enable
+     */
+    enable(options) {
+        this.setState({ enabled: true }, options);
+    }
+    /**
+     * @description Disable
+     */
+    disable(options) {
+        this.setState({ enabled: false }, options);
+    }
+    /**
+     * @description Dispose
+     */
+    dispose() {
+        this.setState({ disposed: true });
+    }
+    setState(state, options) {
+        if (this.state.disposed)
+            return disposedErrorLog();
+        if (!this.state.enabled) {
+            // when plugin is disabled, only can change enabled or disposed to true
+            if (state.enabled !== true && state.disposed !== true)
+                return disableErrorLog();
+        }
+        const prevState = Object.assign({}, this.state);
+        this.state = Object.assign(Object.assign({}, this.state), state);
+        if (state.disposed !== undefined && state.disposed !== prevState.disposed) {
+            if (state.disposed)
+                this.handleDispose();
+        }
+        if (state.visible !== undefined && state.visible !== prevState.visible) {
+            this.handleVisible(state.visible);
+        }
+        if (state.enabled !== undefined && state.enabled !== prevState.enabled) {
+            this.handleEnable(state.enabled);
+        }
+        this.hooks.emit('stateChange', { state: this.state, prevState });
+    }
+    getObject3DHelper(object3D) {
+        return this.objectHelperMap.get(object3D);
+    }
     /**
      * @description 添加 helper
      * @param { THREE.Object3D } object3D       要添加helper的物体
@@ -40,6 +115,12 @@ export class Object3DHelperController extends Object3DHelper {
      */
     addObject3DHelper(object3D, config = {}) {
         var _a;
+        if (this.objectHelperMap.has(object3D)) {
+            console.warn(`Object3DHelperPlugin: object3D ${object3D.name} already has helper`);
+            return;
+        }
+        const helper = new Object3DHelper();
+        this.objectHelperMap.set(object3D, helper);
         const container = (_a = this.five.getElement()) === null || _a === void 0 ? void 0 : _a.parentElement;
         const camera = this.five.camera;
         // 创建空的helperGroup
@@ -49,7 +130,7 @@ export class Object3DHelperController extends Object3DHelper {
         if (moveHelper) {
             const moveHelper = new MoveHelper(object3D);
             const controllerWrapper = new FiveControllerWrapper(this.five, MoveController, object3D, moveHelper);
-            this.addControllers({ moveController: controllerWrapper.helperController });
+            helper.addControllers({ moveController: controllerWrapper.helperController });
         }
         if (rotateHelper) {
             let angleTipsParams;
@@ -57,13 +138,13 @@ export class Object3DHelperController extends Object3DHelper {
                 angleTipsParams = { container };
             const rotateHelper = new RotateHelper(object3D, angleTipsParams);
             const controllerWrapper = new FiveControllerWrapper(this.five, RotateController, object3D, rotateHelper);
-            this.addControllers({ rotateController: controllerWrapper.helperController });
+            helper.addControllers({ rotateController: controllerWrapper.helperController });
         }
         if (scaleHelper) {
             if (container) {
                 const scaleHelper = new RectangleScaleHelper(object3D, container, camera, this.five.scene);
                 const controllerWrapper = new FiveControllerWrapper(this.five, CSS3DScaleController, object3D, scaleHelper);
-                this.addControllers({ scaleController: controllerWrapper.helperController });
+                helper.addControllers({ scaleController: controllerWrapper.helperController });
             }
         }
         // if (mergeConfig.outlineHelper) {
@@ -73,4 +154,52 @@ export class Object3DHelperController extends Object3DHelper {
         // }
         // this.five.scene.add(helperGroup)
     }
+    removeObject3DHelper(object3D) {
+        const helper = this.objectHelperMap.get(object3D);
+        if (!helper)
+            return;
+        this.objectHelperMap.delete(object3D);
+        helper.dispose();
+    }
+    handleEnable(enabled, userAction = true) {
+        console.log({ enabled });
+        if (enabled) {
+            this.everyHelperDo((helper) => helper.enable());
+            this.hooks.emit('enable', { userAction });
+        }
+        else {
+            this.everyHelperDo((helper) => helper.disable());
+            this.hooks.emit('disable', { userAction });
+        }
+        this.state.enabled = enabled;
+    }
+    handleVisible(visible, userAction = true) {
+        console.log({ visible });
+        if (visible) {
+            this.everyHelperDo((helper) => helper.show());
+            this.actionIfStateIsEnabled(() => this.hooks.emit('show', { userAction }));
+        }
+        else {
+            this.everyHelperDo((helper) => helper.hide());
+            this.actionIfStateIsEnabled(() => this.hooks.emit('hide', { userAction }));
+        }
+        this.state.visible = visible;
+    }
+    handleDispose() {
+        this.everyHelperDo((helper) => helper.dispose());
+    }
+    everyHelperDo(func) {
+        this.objectHelperMap.forEach((helper) => {
+            if (helper)
+                func(helper);
+        });
+    }
+    actionIfStateIsEnabled(func, options) {
+        if (this.state.enabled)
+            return func();
+        else {
+            if (options === null || options === void 0 ? void 0 : options.warnLog)
+                disableWarnLog();
+        }
+    }
 }

package/libs/Object3DHelperPlugin/typings.d.ts

@@ -0,0 +1,24 @@
+export interface Object3DHelperPluginState {
+    enabled: boolean;
+    visible: boolean;
+    disposed: boolean;
+}
+export declare type Object3DHelperPluginEventMap = {
+    show: (options?: {
+        userAction?: boolean;
+    }) => void;
+    hide: (options?: {
+        userAction?: boolean;
+    }) => void;
+    enable: (options?: {
+        userAction?: boolean;
+    }) => void;
+    disable: (options?: {
+        userAction?: boolean;
+    }) => void;
+    dispose: () => void;
+    stateChange: (params: {
+        state: Object3DHelperPluginState;
+        prevState?: Object3DHelperPluginState;
+    }) => void;
+};

package/libs/Object3DHelperPlugin/typings.js

@@ -0,0 +1 @@
+export {};

package/libs/PanoDoorLabelPlugin/Controller.js

@@ -1,6 +1,6 @@
 import { Euler, Quaternion, Raycaster, Vector3 } from 'three';
 import { BasePanoPluginController } from './BaseController';
-import DoorLabelItem from './DoorLabelItem';
+import DoorLabelItem from './DoorLabelItem.svelte';
 import { getCameraToward, getDistance, getToward, isTwoRectOverlaped } from './utils';
 const defaultBaseOptions = { userAction: true };
 /**