@realsee/dnalogel 2.27.3-dev.0 → 2.27.4-0

package/libs/AreaMakerPlugin/typing.d.ts

@@ -0,0 +1,148 @@
+import type * as BasePlugin from '../base/BasePluginWithData';
+import type * as THREE from 'three';
+import type { AreaMakerItem } from './utils/Item';
+export type { Controller as AreaMakerController } from './Controller';
+export type { AreaMakerItem };
+/** 插件初始化参数 */
+export interface Params {
+    config?: Partial<Config>;
+    initialState?: Partial<State>;
+}
+/** 插件状态 */
+export interface State extends BasePlugin.State {
+    /** 插件是否启用 */
+    enabled: boolean;
+    /** 插件整体是否可见 */
+    visible: boolean;
+}
+/** 插件配置 */
+export interface Config {
+    /** 标注模型是否开启深度检测，此配置仅对模型生效，不会影响标签的展示效果。
+     * @default true
+     * @description 关闭后，标注模型不会被其他模型遮挡
+     */
+    modelDepthTest: boolean;
+}
+/** 插件事件 */
+export interface EventMap extends BasePlugin.EventMap<State, ServerData> {
+    /** visible 从 false 到 true 的回调
+     * @param event.userAction 是否是用户操作
+     */
+    show: (event: {
+        userAction: boolean;
+    }) => void;
+    /** visible 从 true 到 false 的回调
+     * @param event.userAction 是否是用户操作
+     */
+    hide: (event: {
+        userAction: boolean;
+    }) => void;
+    /** enabled 从 false 到 true 的回调
+     * @param event.userAction 是否是用户操作
+     */
+    enable: (event: {
+        userAction: boolean;
+    }) => void;
+    /** enabled 从 true 到 false 的回调
+     * @param event.userAction 是否是用户操作
+     */
+    disable: (event: {
+        userAction: boolean;
+    }) => void;
+    /** config 变更的回调
+     * @param event.prevConfig 变更前的 config
+     * @param event.config 变更后的 config
+     * @param event.userAction 是否是用户操作
+     */
+    configChange: (event: {
+        prevConfig: Config;
+        config: Config;
+        userAction: boolean;
+    }) => void;
+    /** 插件内容点击的回调
+     * @param event.target 点击的标注实例
+     * @param event.intersectObjects 射线与标注模型的交点集合
+     * @param event.wantsFiveTapGestureParams Five wantsFiveTapGesture 的回调参数
+     * @returns <boolean> | <void> 返回 false 会阻止 Five wantsFiveTapGesture 的回调，其余 return 值会被忽略
+     */
+    wantsTap: (event: {
+        target: AreaMakerItem;
+        intersectObjects: THREE.Intersection[];
+    }) => boolean | void;
+}
+/** 标注实例事件 */
+export type AreaMakerItemEventMap = {
+    /** 标注标签点击的回调
+     * @param event.target 点击的标注实例
+     * @param event.nativeEvent 点击事件的的原始 MouseEvent
+     */
+    tagClick: (event: {
+        target: AreaMakerItem;
+        nativeEvent: MouseEvent;
+    }) => void;
+};
+/** 动画相关的配置 */
+export interface AnimeOptions {
+    /** 动画时长，单位是毫秒 */
+    duration?: number;
+}
+export interface ShowHideOptions extends BasePlugin.BaseOptions {
+    userAction: boolean;
+}
+/** 第一版数据
+ * @description 为什么会存在两种数据？
+ * 目前数据是线上已经存在的，这一版数据目前存在以下问题：
+ * 1. 无法描述弧线。
+ * 2. 数据结构不够清晰，数据存在一定产品逻辑上的抽象，比如说标注的高度，是由楼层高度和人工设置的高度修正组成的。
+ */
+export interface ServerDataV1 {
+    list: ServerAreaMakerItemV1[];
+}
+/** 第二版数据 */
+export interface ServerDataV2 {
+    list: ServerAreaMakerItem[];
+}
+/** load 的数据 */
+export type ServerData = ServerDataV1 | ServerDataV2;
+/** 插件使用的数据 */
+export type PluginData = ServerDataV2;
+export interface ServerAreaMakerItem {
+    id: number | string;
+    /** 标注名称 */
+    name?: string;
+    /** 标注所在楼层 */
+    floor_index: number;
+    /** 标注物体 */
+    object_data: {
+        /** 标注底面形状，THREE.Shape().toJSON() 的结果 */
+        shape: Record<string, any>;
+        /** 标注底面 y 坐标 */
+        bottom_y: number;
+        /** 标注高度，指标注顶部距离底部的距离。只能为正值，单位是米 */
+        height: number;
+        /** 标注颜色
+         * @example "#ffffff"
+         */
+        color?: string;
+        /** 标注透明度 */
+        opacity?: number;
+    };
+}
+export interface ServerAreaMakerItemV1 {
+    id: number;
+    name: string;
+    object_data: {
+        /** 绘制平面的三维世界坐标点集合 */
+        points: number[][];
+        /** 楼层索引 */
+        floorIndex: number;
+        /** 楼层高度 */
+        height: number;
+        /** 人工设置的y坐标方向偏移 */
+        fixedY: number;
+        /** 人工设置的高度修正 */
+        fixedHeight: number;
+        color: string;
+        opacity?: number;
+    };
+}

package/libs/AreaMakerPlugin/typing.js

@@ -0,0 +1 @@
+

package/libs/AreaMakerPlugin/utils/Item.d.ts

@@ -0,0 +1,114 @@
+import * as THREE from 'three';
+import { Object3D } from '../../shared-utils';
+import { LineSegments } from '../../shared-utils';
+import type { Controller } from '../Controller';
+import type * as PluginType from '../typing';
+import LabelItem from '../../components/AreaLabel/LabelItem.svelte';
+import { Subscribe } from '../../shared-utils/Subscribe';
+declare class AreaMakerModelGroup extends Object3D {
+    private areaMakerItem;
+    constructor(areaMakerItem: AreaMakerItem);
+    raycast(raycaster: THREE.Raycaster, intersects: THREE.Intersection[]): void;
+}
+export declare class AreaMakerItem {
+    id: string | number;
+    /** 标注名称 */
+    name: string;
+    /** 标注几何体 */
+    makerObject: THREE.Mesh<THREE.ExtrudeBufferGeometry, THREE.MeshBasicMaterial>;
+    /** 标注几何体的边框 */
+    outline: LineSegments<THREE.EdgesGeometry, THREE.LineBasicMaterial>;
+    /** 标注底面 Y 坐标 */
+    bottomY: PluginType.ServerAreaMakerItem['object_data']['bottom_y'];
+    /** 标注透明度 */
+    opacity: PluginType.ServerAreaMakerItem['object_data']['opacity'];
+    /** 标注高度 */
+    height: PluginType.ServerAreaMakerItem['object_data']['height'];
+    /** 标注所在楼层 */
+    floorIndex: PluginType.ServerAreaMakerItem['floor_index'];
+    /** 标注底面形状 */
+    shape: THREE.Shape;
+    /** 是否被挂载 */
+    mounted: boolean;
+    /** 查询问题使用的调试对象 */
+    checkMsg: {
+        /** 当标注没有展示时，可以通过这个字段查看原因 */
+        checkVisibleMsg: string;
+        /** 当标注标签没有展示时，可以通过这个字段查看原因 */
+        checkTagVisibleMsg: string;
+    };
+    /** 模型容器 */
+    modelGroup: AreaMakerModelGroup;
+    /** 标注是否可见 */
+    visible: boolean;
+    /** 标注标签实例 */
+    tagApp: LabelItem | null;
+    /** 标注标签是否可见 */
+    tagVisible: boolean;
+    /** 标注标签的世界坐标 */
+    tagPosition: THREE.Vector3;
+    /** 标注标签的 NDC 坐标 */
+    tagNDCPosition: THREE.Vector3;
+    /** 标注标签的 transform */
+    tagTransform: {
+        left: number;
+        top: number;
+    };
+    /** 标注标签的显示层级 */
+    tagZIndex: number;
+    hooks: Subscribe<PluginType.AreaMakerItemEventMap>;
+    /** Plugin 实例 */
+    private plugin;
+    /** 标注透明度动画 */
+    private opacityAnime?;
+    constructor(plugin: Controller, data: PluginType.ServerAreaMakerItem);
+    /** 挂载标注 */
+    mount(): void;
+    /** 卸载标注 */
+    unmount(): void;
+    /** 更改标注透明度
+     * @param opacity 标注透明度，范围：0-1
+     */
+    setOpacity(opacity: number): void;
+    /** 更改标注颜色
+     * @param color 标注颜色，支持 hex
+     * @example setColor('#FF0000')
+     */
+    setColor(color: string): void;
+    /** 更改标注高度
+     * @param height 标注高度，单位：米
+     */
+    setHeight(height: number): void;
+    /** 更改标注标签的显示层级
+     * @description 为什么需要这个方法
+     * 在相机朝向或位置发生变化时，各个标签所在的坐标与相机的远近关系发生了变化，所以标签的层级也会有变化。
+     * 比如：
+     * - 相机 -> 标签 A -> 标签 B： 标签 A 在标签 B 的前面
+     * - 标签 A <- 标签 B <- 相机： 标签 A 在标签 B 的后面
+     * 但是当前元素是无法感知到这种变化的，所以需要通过父元素调用这个方法来更新标签的层级。
+     */
+    setTagZIndex(zIndex: number): void;
+    /** 显示标注 */
+    /** 隐藏标注 */
+    /** 透明度动画 */
+    private doOpacityAnime;
+    /** 插件 Config 变化时更新自身 depthTest */
+    private onPluginConfigChange;
+    /** 更新标注可见性 */
+    private updateVisible;
+    /** 检测标注是否可见 */
+    private checkVisible;
+    /** 更新标注标签 */
+    private updateTag;
+    /** 更新标注标签的 NDC Position */
+    private updateTagNDCPosition;
+    /** 更新标注标签的 transform */
+    private updateTagDomTransform;
+    /** 更新标注标签可见性 */
+    private updateTagVisible;
+    /** 检测标注标签是否可见 */
+    private checkTagVisible;
+    /** 相机位姿发生变化时，更新标签 */
+    private onFiveCameraUpdate;
+}
+export {};

package/libs/AreaMakerPlugin/utils/Item.js

@@ -0,0 +1,263 @@
+var f = Object.defineProperty;
+var d = (n, t, e) => t in n ? f(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var i = (n, t, e) => (d(n, typeof t != "symbol" ? t + "" : t, e), e);
+import * as a from "three";
+import "hammerjs";
+import "@realsee/five";
+import "../../vendor/@tweenjs/tween/dist/tween.esm.js.js";
+import "../../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
+import "../../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
+import { Object3D as b } from "../../shared-utils/three/core/Object3D.js";
+import { LineSegments as k } from "../../shared-utils/three/objects/LineSegments.js";
+import { BetterTween as y } from "../../shared-utils/animationFrame/BetterTween.js";
+import { LabelItem as O } from "../../components/AreaLabel/LabelItem.js";
+import { getCenterPointOfPoints as T } from "../../shared-utils/math/planimetry.js";
+import { Subscribe as C } from "../../shared-utils/Subscribe.js";
+import "../../shared-utils/positionToVector3.js";
+import "../../CSS3DRenderPlugin/utils/three/CSS3DRenderer.js";
+import "three/examples/jsm/renderers/CSS3DRenderer";
+import "../../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
+import "../../CSS3DRenderPlugin/utils/createResizeObserver.js";
+import "../../CSS3DRenderPlugin/utils/even.js";
+import "../../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
+import "../../CSS3DRenderPlugin/utils/three/OpacityMesh.js";
+import "../../shared-utils/three/centerPoint.js";
+import "../../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
+import "../../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
+import "../../shared-utils/animationFrame/index.js";
+import "../../vendor/svelte/internal/index.js";
+import "../../components/AreaLabel/Assets/roomLabelBg.js";
+class M extends b {
+  constructor(e) {
+    super();
+    i(this, "areaMakerItem");
+    this.areaMakerItem = e;
+  }
+  raycast(e, s) {
+    this.areaMakerItem.makerObject.raycast(e, s);
+  }
+}
+class q {
+  constructor(t, e) {
+    i(this, "id");
+    /** 标注名称 */
+    i(this, "name", "");
+    /** 标注几何体 */
+    i(this, "makerObject");
+    /** 标注几何体的边框 */
+    i(this, "outline");
+    /** 标注底面 Y 坐标 */
+    i(this, "bottomY");
+    /** 标注透明度 */
+    i(this, "opacity");
+    /** 标注高度 */
+    i(this, "height");
+    /** 标注所在楼层 */
+    i(this, "floorIndex");
+    /** 标注底面形状 */
+    i(this, "shape");
+    /** 是否被挂载 */
+    i(this, "mounted", !1);
+    /** 查询问题使用的调试对象 */
+    i(this, "checkMsg", {
+      /** 当标注没有展示时，可以通过这个字段查看原因 */
+      checkVisibleMsg: "",
+      /** 当标注标签没有展示时，可以通过这个字段查看原因 */
+      checkTagVisibleMsg: ""
+    });
+    /** 模型容器 */
+    i(this, "modelGroup");
+    /** 标注是否可见 */
+    i(this, "visible", !1);
+    // ==================== 标签相关 ====================
+    /** 标注标签实例 */
+    i(this, "tagApp");
+    /** 标注标签是否可见 */
+    i(this, "tagVisible", !1);
+    /** 标注标签的世界坐标 */
+    i(this, "tagPosition", new a.Vector3());
+    /** 标注标签的 NDC 坐标 */
+    i(this, "tagNDCPosition", new a.Vector3());
+    /** 标注标签的 transform */
+    i(this, "tagTransform", { left: 0, top: 0 });
+    /** 标注标签的显示层级 */
+    i(this, "tagZIndex", 0);
+    i(this, "hooks", new C());
+    /** Plugin 实例 */
+    i(this, "plugin");
+    /** 标注透明度动画 */
+    i(this, "opacityAnime");
+    /** 显示标注 */
+    // public show() {
+    // return this.doOpacityAnime({
+    //   duration: 500,
+    //   makerObjectOpacity: [this.makerObject.material.opacity, this.opacity],
+    //   outlineOpacity: [this.outline.material.opacity, 1],
+    //   ...options,
+    // })
+    // }
+    /** 隐藏标注 */
+    // public hide() {
+    // return this.doOpacityAnime({
+    //   duration: 500,
+    //   makerObjectOpacity: [this.makerObject.material.opacity, 0],
+    //   outlineOpacity: [this.outline.material.opacity, 0],
+    //   ...options,
+    // })
+    // }
+    /** 透明度动画 */
+    i(this, "doOpacityAnime", (t) => {
+      var h;
+      (h = this.opacityAnime) == null || h.dispose();
+      const e = t.duration, [s, o] = t.makerObjectOpacity, [r, l] = t.outlineOpacity;
+      if (e === 0) {
+        this.makerObject.material.opacity = o, this.outline.material.opacity = l;
+        return;
+      }
+      return new Promise((p) => {
+        this.opacityAnime = new y({ makerObjectOpacity: s, outlineOpacity: r }).to({
+          makerObjectOpacity: o,
+          outlineOpacity: l
+        }).onUpdate(({ makerObjectOpacity: c, outlineOpacity: m }) => {
+          this.makerObject.material.opacity = c, this.outline.material.opacity = m, this.plugin.five.needsRender = !0;
+        }).onComplete(() => p(!0)).onDispose(() => {
+          this.makerObject.material.opacity = o, this.outline.material.opacity = l, this.plugin.five.needsRender = !0, p(!1);
+        }).play();
+      });
+    });
+    /** 插件 Config 变化时更新自身 depthTest */
+    i(this, "onPluginConfigChange", (t) => {
+      this.makerObject.material.depthTest = t.config.modelDepthTest, this.outline.material.depthTest = t.config.modelDepthTest, this.plugin.five.needsRender = !0;
+    });
+    /** 更新标注可见性 */
+    i(this, "updateVisible", () => {
+      const { result: t, msg: e } = this.checkVisible();
+      this.checkMsg.checkVisibleMsg = e, this.visible !== t && (this.visible = t, this.modelGroup.visible = t, this.plugin.five.needsRender = !0);
+    });
+    /** 检测标注是否可见 */
+    i(this, "checkVisible", () => {
+      if (!this.plugin.state.visible)
+        return { result: !1, msg: "插件不可见" };
+      const e = this.plugin.five.model.shownFloor;
+      return e === null || e === this.floorIndex ? { result: !0, msg: "" } : { result: !1, msg: `模型高亮楼层不符合展示条件, 当前高亮楼层为：${e}` };
+    });
+    /** 更新标注标签 */
+    i(this, "updateTag", () => {
+      this.tagApp && (this.updateTagNDCPosition(), this.updateTagDomTransform(), this.updateTagVisible());
+    });
+    /** 更新标注标签的 NDC Position */
+    i(this, "updateTagNDCPosition", () => {
+      const e = this.tagPosition.clone().project(this.plugin.five.camera);
+      this.tagNDCPosition.copy(e);
+    });
+    /** 更新标注标签的 transform */
+    i(this, "updateTagDomTransform", () => {
+      var o;
+      const t = this.tagNDCPosition, e = Math.round((t.x + 1) / 2 * this.plugin.tagDomContainer.clientWidth), s = Math.round((-t.y + 1) / 2 * this.plugin.tagDomContainer.clientHeight);
+      this.tagTransform.left === e && this.tagTransform.top === s || (this.tagTransform = { left: e, top: s }, (o = this.tagApp) == null || o.$set({ transform: `translate(${e}px, ${s}px)` }));
+    });
+    /** 更新标注标签可见性 */
+    i(this, "updateTagVisible", () => {
+      var s;
+      const { result: t, msg: e } = this.checkTagVisible();
+      this.checkMsg.checkTagVisibleMsg = e, this.tagVisible !== t && (this.tagVisible = t, (s = this.tagApp) == null || s.$set({ visible: t }));
+    });
+    /** 检测标注标签是否可见 */
+    i(this, "checkTagVisible", () => {
+      if (!this.visible)
+        return { result: !1, msg: "标注整体不可见" };
+      const e = this.plugin.five, s = new a.Raycaster(), o = e.camera.position.clone();
+      s.set(o.clone(), this.tagPosition.clone().sub(o).normalize());
+      const [r] = e.model.intersectRaycaster(s), l = this.tagPosition.distanceTo(e.camera.position);
+      if (r && r.distance + 0.1 < l)
+        return { result: !1, msg: "标注标签被 Five 模型遮挡" };
+      const h = this.tagNDCPosition;
+      return Math.abs(h.x) > 1.2 || Math.abs(h.y) > 1.2 || Math.abs(h.z) > 1 ? { result: !1, msg: "标注标签不在屏幕内" } : { result: !0, msg: "" };
+    });
+    /** 相机位姿发生变化时，更新标签 */
+    i(this, "onFiveCameraUpdate", () => {
+      this.tagApp && this.visible && (this.updateTagNDCPosition(), this.updateTagDomTransform(), this.updateTagVisible());
+    });
+    var p, c, m;
+    const s = e.object_data, o = s.bottom_y, r = s.height, l = new a.Color((p = s.color) != null ? p : "#FFFFFF"), h = (c = s.opacity) != null ? c : 0.4;
+    this.id = e.id, this.name = (m = e.name) != null ? m : "", this.plugin = t, this.height = r, this.bottomY = o, this.opacity = h, this.shape = new a.Shape().fromJSON(s.shape), this.floorIndex = e.floor_index, this.makerObject = new a.Mesh(u(this.shape, r), v(l, h)), g(this.makerObject, o), this.makerObject.material.depthTest = this.plugin.config.modelDepthTest, this.outline = new k(
+      new a.EdgesGeometry(this.makerObject.geometry),
+      new a.LineBasicMaterial({ color: l, transparent: !0 })
+    ), g(this.outline, o), this.outline.material.depthTest = this.plugin.config.modelDepthTest, this.setHeight(r), this.modelGroup = new M(this);
+  }
+  /** 挂载标注 */
+  mount() {
+    if (this.mounted = !0, this.updateVisible(), this.makerObject.material.depthTest = this.plugin.config.modelDepthTest, this.outline.material.depthTest = this.plugin.config.modelDepthTest, this.modelGroup.add(this.makerObject, this.outline), !!this.name) {
+      const e = this.plugin.tagDomContainer, s = {
+        content: this.name,
+        visible: this.tagVisible,
+        transform: `translate(${this.tagTransform.left}px, ${this.tagTransform.top}px)`,
+        onClick: (o) => this.hooks.emit("tagClick", { target: this, nativeEvent: o })
+      };
+      this.tagApp = new O({ target: e, props: s }), this.updateTag();
+    }
+    this.plugin.five.needsRender = !0, this.plugin.hooks.on("configChange", this.onPluginConfigChange), this.plugin.hooks.on("stateChange", this.updateVisible), this.plugin.five.on("modeChange", this.updateVisible), this.plugin.five.on("modelShownFloorChange", this.updateVisible), this.plugin.five.on("cameraUpdate", this.onFiveCameraUpdate);
+  }
+  /** 卸载标注 */
+  unmount() {
+    var t;
+    this.mounted = !1, this.modelGroup.remove(...this.modelGroup.children), (t = this.tagApp) == null || t.$destroy(), this.tagApp = null, this.plugin.hooks.off("configChange", this.onPluginConfigChange), this.plugin.hooks.off("stateChange", this.updateVisible), this.plugin.five.off("modeChange", this.updateVisible), this.plugin.five.off("modelShownFloorChange", this.updateVisible), this.plugin.five.off("cameraUpdate", this.onFiveCameraUpdate);
+  }
+  /** 更改标注透明度
+   * @param opacity 标注透明度，范围：0-1
+   */
+  setOpacity(t) {
+    var e;
+    this.opacity = t, (e = this.opacityAnime) == null || e.dispose(), this.makerObject.material.opacity = t, this.plugin.five.needsRender = !0;
+  }
+  /** 更改标注颜色
+   * @param color 标注颜色，支持 hex
+   * @example setColor('#FF0000')
+   */
+  setColor(t) {
+    const e = new a.Color(t);
+    this.makerObject.material.color = e, this.outline.material.color = e, this.plugin.five.needsRender = !0;
+  }
+  /** 更改标注高度
+   * @param height 标注高度，单位：米
+   */
+  setHeight(t) {
+    if (t <= 0)
+      throw new Error("高度必须大于 0");
+    this.height = t, this.makerObject.geometry = u(this.shape, t), this.outline.geometry = new a.EdgesGeometry(this.makerObject.geometry);
+    const e = this.shape.extractPoints(10).shape.slice(0, -1), s = T(e), o = new a.Vector3(s.x, s.y, t);
+    g(o, this.bottomY), this.tagPosition.copy(o), this.updateTag(), this.plugin.five.needsRender = !0;
+  }
+  /** 更改标注标签的显示层级
+   * @description 为什么需要这个方法
+   * 在相机朝向或位置发生变化时，各个标签所在的坐标与相机的远近关系发生了变化，所以标签的层级也会有变化。
+   * 比如：
+   * - 相机 -> 标签 A -> 标签 B： 标签 A 在标签 B 的前面
+   * - 标签 A <- 标签 B <- 相机： 标签 A 在标签 B 的后面
+   * 但是当前元素是无法感知到这种变化的，所以需要通过父元素调用这个方法来更新标签的层级。
+   */
+  setTagZIndex(t) {
+    var e;
+    this.tagZIndex !== t && ((e = this.tagApp) == null || e.$set({ zIndex: t }));
+  }
+}
+function u(n, t) {
+  return new a.ExtrudeBufferGeometry(n, {
+    depth: t,
+    bevelEnabled: !1
+  });
+}
+function v(n, t) {
+  return new a.MeshBasicMaterial({
+    color: n,
+    opacity: t,
+    transparent: !0
+  });
+}
+function g(n, t) {
+  const e = new a.Matrix4(), s = new a.Matrix4().makeRotationX(Math.PI / 2), o = new a.Matrix4().makeTranslation(0, 0, -t), r = new a.Matrix4().makeScale(1, 1, -1);
+  e.multiply(s), e.multiply(o), e.multiply(r), n.applyMatrix4(e);
+}
+export {
+  q as AreaMakerItem
+};