@realsee/dnalogel 2.0.2 → 2.1.0-alpha.10

package/libs/Object3DHelperPlugin/Controller.d.ts

@@ -0,0 +1,65 @@
+import type { Five } from '@realsee/five';
+import * as BasePlugin from '../base/BasePlugin';
+import type * as THREE from 'three';
+import { Object3DHelper } from '../shared-utils/Object3DHelper';
+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 BasePlugin.Controller<Object3DHelperPluginState, Object3DHelperPluginEventMap> {
+    version: string;
+    name: string;
+    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的物体
+     * @param { boolean } config.moveHelper     位移helper
+     * @param { boolean } config.rotateHelper   旋转helper
+     * @param { boolean } config.scaleHelper    缩放helper
+     */
+    addObject3DHelper(object3D: THREE.Object3D, config?: {
+        moveHelper?: boolean;
+        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

@@ -0,0 +1,206 @@
+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';
+import { Object3DHelper } from '../shared-utils/Object3DHelper';
+import { RotateController } from '../shared-utils/Object3DHelper/Controller/RotateController';
+import { CSS3DScaleController } from '../shared-utils/Object3DHelper/Controller/CSS3DScaleController';
+export const VERSION = 'v1.0.0';
+const PLUGIN_NAME = 'Object3DHelperPlugin';
+export const PLUGIN = `${PLUGIN_NAME}@${VERSION}`;
+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(five);
+        Object.defineProperty(this, "version", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: VERSION
+        });
+        Object.defineProperty(this, "name", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: PLUGIN_NAME
+        });
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            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 });
+        // Object.assign(window, { THREE: THREE })
+    }
+    /**
+     * @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的物体
+     * @param { boolean } config.moveHelper     位移helper
+     * @param { boolean } config.rotateHelper   旋转helper
+     * @param { boolean } config.scaleHelper    缩放helper
+     */
+    addObject3DHelper(object3D, config = {}) {
+        var _a;
+        if (!object3D)
+            return console.error('Object3D is undefined');
+        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
+        // merge config
+        const { moveHelper = true, rotateHelper = true, scaleHelper = true } = config;
+        // 筛选
+        if (moveHelper) {
+            const moveHelper = new MoveHelper(object3D);
+            const controllerWrapper = new FiveControllerWrapper(this.five, MoveController, object3D, moveHelper);
+            helper.addControllers({ moveController: controllerWrapper.helperController });
+        }
+        if (rotateHelper) {
+            let angleTipsParams;
+            if (container && camera)
+                angleTipsParams = { container };
+            const rotateHelper = new RotateHelper(object3D, angleTipsParams);
+            const controllerWrapper = new FiveControllerWrapper(this.five, RotateController, object3D, rotateHelper);
+            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);
+                helper.addControllers({ scaleController: controllerWrapper.helperController });
+            }
+        }
+        // if (mergeConfig.outlineHelper) {
+        //   const outlineHelper = new OutlineHelper(object3D)
+        //   helperGroup.add(outlineHelper)
+        //   this.totalController.addHelpers({ outlineHelper })
+        // }
+        // 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) {
+        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) {
+        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/FiveControllerWrapper.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @description: 将手势操作绑定到controller上
+ */
+import type { Five } from '@realsee/five';
+import type { BaseController } from '../shared-utils/Object3DHelper/Base/BaseController';
+import type * as THREE from 'three';
+import type { BaseHelper } from '../shared-utils/Object3DHelper/Helper';
+declare class ControllerWrapper<Helper extends BaseHelper = BaseHelper, Controller extends BaseController = BaseController<Helper>> {
+    helperController?: Controller;
+    private five;
+    constructor(five: Five, HelperController: new (...params: ConstructorParameters<typeof BaseController<Helper>>) => Controller, object: THREE.Object3D, helperObjects: Helper);
+    private onFiveWantsTapGesture;
+    private onFiveWantsGesture;
+}
+declare const controllerWrapper: <Helper extends BaseHelper<THREE.Object3D> = BaseHelper<THREE.Object3D>, Controller extends BaseController<BaseHelper<THREE.Object3D>, THREE.Object3D> = BaseController<Helper, THREE.Object3D>>(five: Five, HelperController: new (camera: THREE.Camera, model: THREE.Object3D, originObject3D: THREE.Object3D, helperObject3D: Helper, container: HTMLElement, scene: THREE.Scene, onRender?: () => void) => Controller, object: THREE.Object3D, helperObjects: Helper) => ControllerWrapper<Helper, Controller>;
+export { ControllerWrapper };
+export { controllerWrapper };
+export { ControllerWrapper as FiveControllerWrapper };
+export { controllerWrapper as fiveControllerWrapper };

package/libs/Object3DHelperPlugin/FiveControllerWrapper.js

@@ -0,0 +1,57 @@
+class ControllerWrapper {
+    constructor(five, HelperController, object, helperObjects) {
+        Object.defineProperty(this, "helperController", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "five", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "onFiveWantsTapGesture", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (params) => {
+                if (!this.helperController)
+                    return;
+                const result = this.helperController.onWantsTapGesture(params);
+                this.five.needsRender = true;
+                return result;
+            }
+        });
+        Object.defineProperty(this, "onFiveWantsGesture", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: (...params) => {
+                if (!this.helperController)
+                    return;
+                const result = this.helperController.onWantsGesture(...params);
+                this.five.needsRender = true;
+                return result;
+            }
+        });
+        const { camera, model, scene } = five;
+        const container = five.getElement();
+        this.five = five;
+        if (!camera || !model || !container || !scene)
+            return;
+        const needsRender = () => {
+            five.needsRender = true;
+        };
+        // TODO: 是否要改为绑定
+        this.helperController = new HelperController(camera, model, object, helperObjects, container, scene, needsRender);
+        five.on('wantsTapGesture', this.onFiveWantsTapGesture);
+        five.on('wantsGesture', this.onFiveWantsGesture);
+    }
+}
+const controllerWrapper = (...params) => new ControllerWrapper(...params);
+export { ControllerWrapper };
+export { controllerWrapper };
+export { ControllerWrapper as FiveControllerWrapper };
+export { controllerWrapper as fiveControllerWrapper };

package/libs/Object3DHelperPlugin/index.d.ts

@@ -0,0 +1,6 @@
+export * from '../shared-utils/Object3DHelper/typings';
+export * from './Controller';
+import type { FivePlugin } from '@realsee/five';
+import { Object3DHelperController } from './Controller';
+export declare const Object3DHelperPlugin: FivePlugin<void, InstanceType<typeof Object3DHelperController>>;
+export default Object3DHelperPlugin;

package/libs/Object3DHelperPlugin/index.js

@@ -0,0 +1,5 @@
+export * from '../shared-utils/Object3DHelper/typings';
+export * from './Controller';
+import { Object3DHelperController } from './Controller';
+export const Object3DHelperPlugin = (five) => new Object3DHelperController(five);
+export default Object3DHelperPlugin;

package/libs/Object3DHelperPlugin/mocks/addObject3D.d.ts

@@ -0,0 +1,2 @@
+import type { Object3D, Scene } from 'three';
+export default function addObject3D(item: any, scene: Scene): Promise<Object3D>;

package/libs/Object3DHelperPlugin/mocks/addObject3D.js

@@ -0,0 +1,22 @@
+import * as THREE from 'three';
+import { GLTFLoader } from '@realsee/five/gltf-loader';
+export default function addObject3D(item, scene) {
+    const modelPosition = new THREE.Vector3(3.8058113175002797, -1.4285810796152072, -4.748098691966687);
+    const modelUrl = item.modelUrl;
+    const gltfLoader = new GLTFLoader();
+    return new Promise((res, rej) => {
+        gltfLoader.load(modelUrl, function onLoad(gltf) {
+            const model = gltf.scene;
+            model.traverse((obj) => {
+                if (obj.material) {
+                    obj.material.envMapIntensity = 0.5;
+                }
+            });
+            scene.add(model);
+            model.position.copy(modelPosition);
+            model.needsRender = true;
+            res(model);
+            // object3DHelper.add(model)
+        });
+    });
+}

package/libs/Object3DHelperPlugin/mocks/objects.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    id: string;
+    name: string;
+    imageUrl: string;
+    modelUrl: string;
+}[];
+export default _default;

package/libs/Object3DHelperPlugin/mocks/objects.js

@@ -0,0 +1,44 @@
+export default [
+    {
+        id: '82862',
+        name: '床',
+        imageUrl: 'https://global-image-4.realsee-cdn.com/release/web/demo/mr/mr.25098913364a20bfb9a0ed67df9ebd30.png',
+        modelUrl: 'https://vrlab-static.ljcdn.com/release/web/glb_model/82862.8e879984.glb',
+    },
+    {
+        id: '82849',
+        name: 'sofa',
+        imageUrl: 'https://global-image-4.realsee-cdn.com/release/web/demo/mr/mr.33732bd3d629a2931a31a944cee9e6be.png',
+        modelUrl: 'https://vrlab-static.ljcdn.com/release/web/glb_model/82849.6ace5e94.glb',
+    },
+    {
+        id: '81505',
+        name: 'cloud blue bed',
+        imageUrl: 'https://global-image-4.realsee-cdn.com/release/web/demo/mr/mr.29d139b221a841f1db2b7fc518364245.png',
+        modelUrl: 'https://vrlab-static.ljcdn.com/release/web/glb_model/81505.42785955.glb',
+    },
+    {
+        id: '81504',
+        name: 'sliding door closet',
+        imageUrl: 'https://global-image-4.realsee-cdn.com/release/web/demo/mr/mr.15fad43d4ce398e5fcd25be5293e25c4.png',
+        modelUrl: 'https://vrlab-static.ljcdn.com/release/web/glb_model/81504.28f4eb0d.glb',
+    },
+    {
+        id: '78274',
+        name: 'ice locker',
+        imageUrl: 'https://global-image-4.realsee-cdn.com/release/web/demo/mr/mr.c8212d792bb55b4a59ca06d173650e22.png',
+        modelUrl: 'https://vrlab-static.ljcdn.com/release/web/glb_model/78274.cca47dc6.glb',
+    },
+    {
+        id: '78273',
+        name: 'refrigerator',
+        imageUrl: 'https://global-image-4.realsee-cdn.com/release/web/demo/mr/mr.95d25a016417cdcf0e1fa309dc928eec.png',
+        modelUrl: 'https://vrlab-static.ljcdn.com/release/web/glb_model/78273.7ee79550.glb',
+    },
+    {
+        id: '75731',
+        name: 'dining table and chair',
+        imageUrl: 'https://global-image-4.realsee-cdn.com/release/web/demo/mr/mr.3c13f6bcc7ca5baed8527b9cd1b2c347.png',
+        modelUrl: 'https://vrlab-static.ljcdn.com/release/web/glb_model/75731.870d46a1.glb',
+    },
+];

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/PanoDoorLabelPlugin/DoorLabelItem.js

@@ -19,7 +19,7 @@ import {
 import classnames from 'classnames';
 
 function add_css(target) {
-	append_styles(target, "svelte-16kdbw2", ".plugin-DoorLabelPlugin-item.svelte-16kdbw2.svelte-16kdbw2{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;transition:opacity 0.3s ease}.plugin-DoorLabelPlugin-cnt.svelte-16kdbw2.svelte-16kdbw2{position:absolute;top:50%;left:50%;border-radius:2px;background:rgba(0, 0, 0, 0.35);line-height:0.625rem;padding:0.3125rem;white-space:nowrap;font-size:0.625rem;font-style:normal;color:white;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform ease 1s, background ease 0.3s, color ease 0.3s}.plugin-DoorLabelPlugin-cnt.svelte-16kdbw2.svelte-16kdbw2::after{content:\"\";display:block;position:absolute;top:-1px;left:-1px;bottom:-1px;right:-1px;border-radius:2px;border:1px solid rgba(0, 0, 0, 0);-o-border-image:url(\"//vrlab-image4.ljcdn.com/release/web/highlightCarouseal-border-image.14b51834.png\") 4;border-image:url(\"//vrlab-image4.ljcdn.com/release/web/highlightCarouseal-border-image.14b51834.png\") 4;transition:opacity ease 0.3s}.plugin-DoorLabelPlugin-cnt.svelte-16kdbw2.svelte-16kdbw2:active,.plugin-DoorLabelPlugin-cnt.svelte-16kdbw2.svelte-16kdbw2:focus{background:rgba(0, 0, 0, 0.5);color:rgba(255, 255, 255, 0.5)}.plugin-DoorLabelPlugin-icon.svelte-16kdbw2.svelte-16kdbw2{background:url(\"//vrlab-image4.ljcdn.com/release/web/DoorLabel-icon.de1304ae.svg\") no-repeat;background-size:100%;display:inline-block;width:0.52083rem;height:0.52083rem;margin-left:0.20833rem;transform-origin:center}.plugin-DoorLabelPlugin-cnt[data-camera-toward=forward].left.svelte-16kdbw2 .plugin-DoorLabelPlugin-icon.svelte-16kdbw2{transform:rotate(90deg)}.plugin-DoorLabelPlugin-cnt[data-camera-toward=forward].right.svelte-16kdbw2 .plugin-DoorLabelPlugin-txt.svelte-16kdbw2{order:1}.plugin-DoorLabelPlugin-cnt[data-camera-toward=forward].right.svelte-16kdbw2 .plugin-DoorLabelPlugin-icon.svelte-16kdbw2{transform:rotate(-90deg);margin-left:0;margin-right:0.20833rem;order:0}.plugin-DoorLabelPlugin-cnt[data-camera-toward=right].forward.svelte-16kdbw2 .plugin-DoorLabelPlugin-icon.svelte-16kdbw2{transform:rotate(90deg)}.plugin-DoorLabelPlugin-cnt[data-camera-toward=right].back.svelte-16kdbw2 .plugin-DoorLabelPlugin-txt.svelte-16kdbw2{order:1}.plugin-DoorLabelPlugin-cnt[data-camera-toward=right].back.svelte-16kdbw2 .plugin-DoorLabelPlugin-icon.svelte-16kdbw2{transform:rotate(-90deg);margin-left:0;margin-right:0.20833rem;order:0}.plugin-DoorLabelPlugin-cnt[data-camera-toward=left].back.svelte-16kdbw2 .plugin-DoorLabelPlugin-icon.svelte-16kdbw2{transform:rotate(90deg)}.plugin-DoorLabelPlugin-cnt[data-camera-toward=left].forward.svelte-16kdbw2 .plugin-DoorLabelPlugin-txt.svelte-16kdbw2{order:1}.plugin-DoorLabelPlugin-cnt[data-camera-toward=left].forward.svelte-16kdbw2 .plugin-DoorLabelPlugin-icon.svelte-16kdbw2{transform:rotate(-90deg);margin-left:0;margin-right:0.20833rem;order:0}.plugin-DoorLabelPlugin-cnt[data-camera-toward=back].right.svelte-16kdbw2 .plugin-DoorLabelPlugin-icon.svelte-16kdbw2{transform:rotate(90deg)}.plugin-DoorLabelPlugin-cnt[data-camera-toward=back].left.svelte-16kdbw2 .plugin-DoorLabelPlugin-txt.svelte-16kdbw2{order:1}.plugin-DoorLabelPlugin-cnt[data-camera-toward=back].left.svelte-16kdbw2 .plugin-DoorLabelPlugin-icon.svelte-16kdbw2{transform:rotate(-90deg);margin-left:0;margin-right:0.20833rem;order:0}.plugin-DoorLabelPlugin-cnt--customBrand.svelte-16kdbw2.svelte-16kdbw2{color:#f9eac1}.plugin-DoorLabelPlugin-cnt--customBrand.svelte-16kdbw2 .plugin-DoorLabelPlugin-icon.svelte-16kdbw2{background:url(\"//vrlab-image4.ljcdn.com/release/web/arrow.6e8ec00e.svg\") no-repeat}.plugin-DoorLabelPlugin-cnt--customBrand.svelte-16kdbw2.svelte-16kdbw2:active,.plugin-DoorLabelPlugin-cnt--customBrand.svelte-16kdbw2.svelte-16kdbw2:focus{background:rgba(0, 0, 0, 0.5);color:rgba(249, 234, 193, 0.5)}");
+	append_styles(target, "svelte-wpy7pz", ".plugin-DoorLabelPlugin-item.svelte-wpy7pz.svelte-wpy7pz{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;transition:opacity 0.3s ease}.plugin-DoorLabelPlugin-cnt.svelte-wpy7pz.svelte-wpy7pz{position:absolute;top:50%;left:50%;border-radius:0.125rem;background:rgba(0, 0, 0, 0.35);line-height:0.75rem;padding:0.375rem;white-space:nowrap;font-size:0.75rem;font-style:normal;color:white;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform ease 1s, background ease 0.3s, color ease 0.3s}.plugin-DoorLabelPlugin-cnt.svelte-wpy7pz.svelte-wpy7pz::after{content:\"\";display:block;position:absolute;top:-0.0625rem;left:-0.0625rem;bottom:-0.0625rem;right:-0.0625rem;border-radius:0.125rem;border:0.0625rem solid rgba(0, 0, 0, 0);-o-border-image:url(\"//vrlab-image4.ljcdn.com/release/web/highlightCarouseal-border-image.14b51834.png\") 4;border-image:url(\"//vrlab-image4.ljcdn.com/release/web/highlightCarouseal-border-image.14b51834.png\") 4;transition:opacity ease 0.3s}.plugin-DoorLabelPlugin-cnt.svelte-wpy7pz.svelte-wpy7pz:active,.plugin-DoorLabelPlugin-cnt.svelte-wpy7pz.svelte-wpy7pz:focus{background:rgba(0, 0, 0, 0.5);color:rgba(255, 255, 255, 0.5)}.plugin-DoorLabelPlugin-icon.svelte-wpy7pz.svelte-wpy7pz{background:url(\"//vrlab-image4.ljcdn.com/release/web/DoorLabel-icon.de1304ae.svg\") no-repeat;background-size:100%;display:inline-block;width:0.625rem;height:0.625rem;margin-left:0.25rem;transform-origin:center}.plugin-DoorLabelPlugin-cnt[data-camera-toward=forward].left.svelte-wpy7pz .plugin-DoorLabelPlugin-icon.svelte-wpy7pz{transform:rotate(90deg)}.plugin-DoorLabelPlugin-cnt[data-camera-toward=forward].right.svelte-wpy7pz .plugin-DoorLabelPlugin-txt.svelte-wpy7pz{order:1}.plugin-DoorLabelPlugin-cnt[data-camera-toward=forward].right.svelte-wpy7pz .plugin-DoorLabelPlugin-icon.svelte-wpy7pz{transform:rotate(-90deg);margin-left:0;margin-right:0.25rem;order:0}.plugin-DoorLabelPlugin-cnt[data-camera-toward=right].forward.svelte-wpy7pz .plugin-DoorLabelPlugin-icon.svelte-wpy7pz{transform:rotate(90deg)}.plugin-DoorLabelPlugin-cnt[data-camera-toward=right].back.svelte-wpy7pz .plugin-DoorLabelPlugin-txt.svelte-wpy7pz{order:1}.plugin-DoorLabelPlugin-cnt[data-camera-toward=right].back.svelte-wpy7pz .plugin-DoorLabelPlugin-icon.svelte-wpy7pz{transform:rotate(-90deg);margin-left:0;margin-right:0.25rem;order:0}.plugin-DoorLabelPlugin-cnt[data-camera-toward=left].back.svelte-wpy7pz .plugin-DoorLabelPlugin-icon.svelte-wpy7pz{transform:rotate(90deg)}.plugin-DoorLabelPlugin-cnt[data-camera-toward=left].forward.svelte-wpy7pz .plugin-DoorLabelPlugin-txt.svelte-wpy7pz{order:1}.plugin-DoorLabelPlugin-cnt[data-camera-toward=left].forward.svelte-wpy7pz .plugin-DoorLabelPlugin-icon.svelte-wpy7pz{transform:rotate(-90deg);margin-left:0;margin-right:0.25rem;order:0}.plugin-DoorLabelPlugin-cnt[data-camera-toward=back].right.svelte-wpy7pz .plugin-DoorLabelPlugin-icon.svelte-wpy7pz{transform:rotate(90deg)}.plugin-DoorLabelPlugin-cnt[data-camera-toward=back].left.svelte-wpy7pz .plugin-DoorLabelPlugin-txt.svelte-wpy7pz{order:1}.plugin-DoorLabelPlugin-cnt[data-camera-toward=back].left.svelte-wpy7pz .plugin-DoorLabelPlugin-icon.svelte-wpy7pz{transform:rotate(-90deg);margin-left:0;margin-right:0.25rem;order:0}.plugin-DoorLabelPlugin-cnt--customBrand.svelte-wpy7pz.svelte-wpy7pz{color:#f9eac1}.plugin-DoorLabelPlugin-cnt--customBrand.svelte-wpy7pz .plugin-DoorLabelPlugin-icon.svelte-wpy7pz{background:url(\"//vrlab-image4.ljcdn.com/release/web/arrow.6e8ec00e.svg\") no-repeat}.plugin-DoorLabelPlugin-cnt--customBrand.svelte-wpy7pz.svelte-wpy7pz:active,.plugin-DoorLabelPlugin-cnt--customBrand.svelte-wpy7pz.svelte-wpy7pz:focus{background:rgba(0, 0, 0, 0.5);color:rgba(249, 234, 193, 0.5)}");
 }
 
 function create_fragment(ctx) {
@@ -42,13 +42,13 @@ function create_fragment(ctx) {
 			span.textContent = `${/*name*/ ctx[8]}`;
 			t1 = space();
 			i = element("i");
-			attr(span, "class", "plugin-DoorLabelPlugin-txt svelte-16kdbw2");
-			attr(i, "class", "plugin-DoorLabelPlugin-icon svelte-16kdbw2");
-			attr(div0, "class", div0_class_value = "" + (null_to_empty(classnames('plugin-DoorLabelPlugin-cnt', /*props*/ ctx[0].toward)) + " svelte-16kdbw2"));
+			attr(span, "class", "plugin-DoorLabelPlugin-txt svelte-wpy7pz");
+			attr(i, "class", "plugin-DoorLabelPlugin-icon svelte-wpy7pz");
+			attr(div0, "class", div0_class_value = "" + (null_to_empty(classnames('plugin-DoorLabelPlugin-cnt', /*props*/ ctx[0].toward)) + " svelte-wpy7pz"));
 			attr(div0, "style", div0_style_value = `transform: ${/*transform*/ ctx[6] || 'initial'};pointer-events: ${/*inSight*/ ctx[5] ? 'auto' : 'none'};opacity: ${/*inSight*/ ctx[5] ? 1 : 0}`);
 			attr(div0, "data-camera-toward", /*cameraToward*/ ctx[7]);
 			attr(div1, "style", div1_style_value = `left: ${/*left*/ ctx[3] || 0}%;top: ${/*top*/ ctx[4] || 0}%;opacity: ${/*inSight*/ ctx[5] ? 1 : 0}`);
-			attr(div1, "class", "plugin-DoorLabelPlugin-item svelte-16kdbw2");
+			attr(div1, "class", "plugin-DoorLabelPlugin-item svelte-wpy7pz");
 		},
 		m(target, anchor) {
 			insert(target, div1, anchor);
@@ -64,7 +64,7 @@ function create_fragment(ctx) {
 			}
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*props*/ 1 && div0_class_value !== (div0_class_value = "" + (null_to_empty(classnames('plugin-DoorLabelPlugin-cnt', /*props*/ ctx[0].toward)) + " svelte-16kdbw2"))) {
+			if (dirty & /*props*/ 1 && div0_class_value !== (div0_class_value = "" + (null_to_empty(classnames('plugin-DoorLabelPlugin-cnt', /*props*/ ctx[0].toward)) + " svelte-wpy7pz"))) {
 				attr(div0, "class", div0_class_value);
 			}
 		},

package/libs/PanoMeasurePlugin/Controller/BaseController.d.ts

@@ -1,18 +1,16 @@
+import type Line from '../Model/line';
 import type Magnifier from '../Modules/Magnifier';
 import type FiveHelper from '../Modules/FiveHelper';
 import type { Group } from 'three';
 import type { Model } from '../Model';
-import type { Config } from '../typings';
 import type { PanoMeasurePluginEvent } from '../typings/event.type';
 import type { UserDistanceItem } from '../utils/distanceDom';
 import type { Five, Intersection, IntersectMeshInterface, Subscribe } from '@realsee/five';
 import type { OpenParameter } from '../typings/data';
-import Line from '../Model/line';
 export interface IControllerParams {
     five: Five;
     group: Group;
     model: Model;
-    config: Config;
     mouseGroup: Group;
     container: Element;
     magnifier: Magnifier;
@@ -21,12 +19,10 @@ export interface IControllerParams {
     hook: Subscribe<PanoMeasurePluginEvent>;
     userDistanceItemCreator?: () => UserDistanceItem;
 }
-export default class BaseController {
-    model: Model;
+export default abstract class BaseController {
     protected five: Five;
     protected group: Group;
-    protected config: Config;
-    protected dashed: Line;
+    protected model: Model;
     protected disposed: boolean;
     protected isMobile: boolean;
     protected mouseGroup: Group;
@@ -36,8 +32,8 @@ export default class BaseController {
     protected magnifier: IControllerParams['magnifier'];
     protected userDistanceItemCreator: IControllerParams['userDistanceItemCreator'];
     constructor(params: IControllerParams);
-    updateDistanceUI: () => void;
     protected removeLine(line: Line): void;
+    protected updateDistanceUI: () => void;
     protected updateMouseGroup(intersection: Intersection, mesh?: IntersectMeshInterface): Group;
     protected dispose(): void;
 }

package/libs/PanoMeasurePlugin/Controller/BaseController.js

@@ -1,15 +1,7 @@
-import Line from '../Model/line';
-import Point from '../Model/point';
 import { preventDefault } from '../utils/ironbox';
 export default class BaseController {
     constructor(params) {
         var _a, _b;
-        Object.defineProperty(this, "model", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
         Object.defineProperty(this, "five", {
             enumerable: true,
             configurable: true,
@@ -22,13 +14,7 @@ export default class BaseController {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "config", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "dashed", {
+        Object.defineProperty(this, "model", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -87,7 +73,6 @@ export default class BaseController {
             configurable: true,
             writable: true,
             value: () => {
-                this.dashed.distanceItem.update(this.five);
                 this.model.lines.forEach((line) => line.distanceItem.update(this.five));
             }
         });
@@ -95,7 +80,6 @@ export default class BaseController {
         this.five = params.five;
         this.hook = params.hook;
         this.model = params.model;
-        this.config = params.config;
         this.magnifier = params.magnifier;
         this.container = params.container;
         this.fiveHelper = params.fiveHelper;
@@ -104,10 +88,6 @@ export default class BaseController {
         // ==================== Groups ====================
         this.group = params.group;
         this.mouseGroup = params.mouseGroup;
-        // ==================== 虚线 ====================
-        this.dashed = new Line(new Point([0, 0, 0]), new Point([0, 0, 0]), this.model);
-        this.dashed.mesh.setMaterial({ dashed: true, dashScale: 100 });
-        this.dashed.mesh.name = 'dashLine';
         const fiveElement = this.five.getElement();
         if (fiveElement) {
             fiveElement.addEventListener('touchstart', preventDefault);

package/libs/PanoMeasurePlugin/Controller/EditController.d.ts

@@ -1,4 +1,5 @@
 import type { LineJson } from '../typings/data';
+import { Model } from '../Model';
 import Line from '../Model/line';
 import BaseController, { IControllerParams } from './BaseController';
 export interface EditEvent {
@@ -6,12 +7,15 @@ export interface EditEvent {
 }
 export default class EditController extends BaseController {
     type: string;
+    model: Model;
     private pressPoint?;
     private hasAppendDashed;
     private hasAppendMouseGroup;
     private fiveElement?;
     /** 上一个端点位置 */
     private lastPoint;
+    /** 鼠标点到上一个端点连接的虚线 */
+    private dashed;
     private hammer?;
     /** 根据 intersection 更新放大镜和吸附点 */
     private onIntersectionUpdate;