@realsee/dnalogel 2.28.0-dev.1 → 2.28.1-0

package/libs/AreaMakerPlugin/Controller.js

@@ -0,0 +1,336 @@
+var C = Object.defineProperty, M = Object.defineProperties;
+var A = Object.getOwnPropertyDescriptors;
+var f = Object.getOwnPropertySymbols;
+var S = Object.prototype.hasOwnProperty, _ = Object.prototype.propertyIsEnumerable;
+var m = (h, o, t) => o in h ? C(h, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[o] = t, d = (h, o) => {
+  for (var t in o || (o = {}))
+    S.call(o, t) && m(h, t, o[t]);
+  if (f)
+    for (var t of f(o))
+      _.call(o, t) && m(h, t, o[t]);
+  return h;
+}, p = (h, o) => M(h, A(o));
+var r = (h, o, t) => (m(h, typeof o != "symbol" ? o + "" : o, t), t);
+var u = (h, o, t) => new Promise((i, e) => {
+  var s = (n) => {
+    try {
+      c(t.next(n));
+    } catch (l) {
+      e(l);
+    }
+  }, a = (n) => {
+    try {
+      c(t.throw(n));
+    } catch (l) {
+      e(l);
+    }
+  }, c = (n) => n.done ? i(n.value) : Promise.resolve(n.value).then(s, a);
+  c((t = t.apply(h, o)).next());
+});
+import * as g from "three";
+import { Controller as k } from "../base/BasePluginWithData.js";
+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 { equal as I } from "../shared-utils/equal.js";
+import { AreaMakerItem as D } from "./utils/Item.js";
+import "../base/BasePlugin.js";
+import "../shared-utils/Subscribe.js";
+import "../shared-utils/absoluteUrl.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/isTruelyObject.js";
+import "../shared-utils/three/core/Object3D.js";
+import "../shared-utils/three/objects/LineSegments.js";
+import "../shared-utils/animationFrame/BetterTween.js";
+import "../shared-utils/animationFrame/index.js";
+import "../components/AreaLabel/LabelItem.js";
+import "../vendor/svelte/internal/index.js";
+import "../components/AreaLabel/Assets/roomLabelBg.js";
+import "../shared-utils/math/planimetry.js";
+class ot extends k {
+  /** AreaMakerPlugin
+   * @param `five` `<Five>` Five 实例
+   * @param `params` `<PluginType.Params> | <undefined>` 插件初始化参数
+   * @param `params.initialState` `<PluginType.State> | <undefined>` 插件初始化后，使用的状态
+   */
+  constructor(t, i) {
+    super(t);
+    // ==================== public properties ====================
+    /** 插件当前状态 */
+    r(this, "state");
+    /** 标注模型 { id: item } 的映射表 */
+    r(this, "itemMap");
+    /** 标注模型容器 */
+    r(this, "modelGroup");
+    /** 当前使用的数据 */
+    r(this, "data");
+    /** tag 容器 */
+    r(this, "tagDomContainer");
+    /** 查询问题使用的调试对象 */
+    r(this, "checkMsg", {
+      childrenMountedState: ""
+    });
+    // ==================== private properties ====================
+    /** 是否在 Five Change Mode 动画中 */
+    r(this, "isInFiveChangeModeAnime", !1);
+    /** 子组件是否挂载 */
+    r(this, "childrenMountedState", !1);
+    /** config 的原始值 */
+    r(this, "_config");
+    /** disposed 的原始值 */
+    r(this, "_disposed", !1);
+    /** 销毁插件，移除所有副作用，销毁后将不响应任何 API */
+    r(this, "dispose", () => {
+      this.five.scene.remove(this.modelGroup);
+    });
+    r(this, "onFiveInitAnimationWillStart", () => {
+      this.isInFiveChangeModeAnime = !0, this.updateChildrenMountedState();
+    });
+    r(this, "onFiveInitAnimationEnded", () => {
+      this.isInFiveChangeModeAnime = !1, this.updateChildrenMountedState();
+    });
+    r(this, "onFiveCameraUpdate", () => {
+      const t = this.five.camera;
+      [...this.itemMap.values()].sort((e, s) => {
+        const a = e.tagPosition.distanceTo(t.position);
+        return s.tagPosition.distanceTo(t.position) - a;
+      }).forEach((e, s) => {
+        var a;
+        (a = this.getMaskItemByID(e.id)) == null || a.setTagZIndex(s * 10);
+      });
+    });
+    r(this, "onFiveModeChange", () => {
+      this.updateChildrenMountedState();
+    });
+    r(this, "onMakerTagClick", (t) => {
+      this.hooks.emit("wantsTap", { target: t.target, intersectObjects: [] });
+    });
+    r(this, "onWantsFiveTapGesture", (t) => {
+      const i = Array.from(this.itemMap.values()).filter((n) => n.mounted && n.visible).map((n) => ({
+        makerItem: n,
+        intersects: n.modelGroup.getRaycastIntersects(t)
+      })).filter(({ intersects: n }) => n.length > 0);
+      if (i.length === 0)
+        return;
+      const e = i.reduce((n, l) => {
+        const v = n.intersects[0].distance, b = l.intersects[0].distance;
+        return v < b ? n : l;
+      }), s = this.five.model.intersectRaycaster(t)[0];
+      if (this.config.modelDepthTest && s && s.distance < e.intersects[0].distance)
+        return;
+      if (this.hooks.emit("wantsTap", {
+        target: e.makerItem,
+        intersectObjects: e.intersects
+      }))
+        return !1;
+    });
+    this.five = t, this.tagDomContainer = document.createElement("div"), this.tagDomContainer.style.position = "absolute", this.tagDomContainer.style.top = "0", this.tagDomContainer.style.left = "0", this.tagDomContainer.style.width = "100%", this.tagDomContainer.style.height = "100%", this.tagDomContainer.style.pointerEvents = "none";
+    const e = {
+      enabled: !0,
+      visible: !0
+    };
+    this.state = Object.assign(e, i == null ? void 0 : i.initialState);
+    const s = d({
+      modelDepthTest: !0
+    }, i == null ? void 0 : i.config);
+    this._config = s, this.modelGroup = new g.Group(), this.modelGroup.name = "ModelMakerPluginGroup", this.itemMap = /* @__PURE__ */ new Map(), this.state.enabled && this._enable({ userAction: !1 });
+  }
+  /** 插件配置项 */
+  get config() {
+    return d({}, this._config);
+  }
+  /** 是否已经被销毁 */
+  get disposed() {
+    return this._disposed;
+  }
+  /** 加载数据，重复调用会使用新数据覆盖旧数据 */
+  load(t) {
+    return u(this, null, function* () {
+      const i = this.data;
+      this.data = this.formatData(t), this.hooks.emit("dataChange", this.data, i), this.modelGroup.remove(...this.modelGroup.children), this.itemMap.clear(), this.data.list.forEach((e) => {
+        const s = new D(this, e);
+        this.modelGroup.add(s.modelGroup), this.itemMap.set(e.id, s), s.hooks.on("tagClick", this.onMakerTagClick);
+      });
+    });
+  }
+  /** 将插件的 DOM 容器添加到指定的 DOM 元素上 */
+  appendTo(t) {
+    t.appendChild(this.tagDomContainer);
+  }
+  /** 启用插件
+   * @param `options` `<Option> | <undefined>`
+   * @param `options.userAction` `<boolean> | <undefined>` 是否是用户操作。默认是 true。
+   */
+  enable(t = {}) {
+    var e;
+    if (this.state.enabled)
+      return;
+    const i = (e = t.userAction) != null ? e : !0;
+    this.updateState({ enabled: !0 }, i), this._enable({ userAction: i });
+  }
+  /** 禁用插件
+   * @param `options` `<Option> | <undefined>`
+   * @param `options.userAction` `<boolean> | <undefined>` 是否是用户操作。默认是 true。
+   */
+  disable(t = {}) {
+    var e;
+    if (this.state.enabled === !1)
+      return;
+    const i = (e = t.userAction) != null ? e : !0;
+    this.updateState({ enabled: !1 }, i), this._disable({ userAction: i });
+  }
+  /** 展示标注
+   * @param `options` `<Partial<ShowHideOptions>> | <undefined>`
+   * @param `options.userAction` `<boolean> | <undefined>` 是否是用户操作。默认是 true。
+   */
+  show(t) {
+    return u(this, null, function* () {
+      if (this.state.visible)
+        return Promise.resolve();
+      if (this.disposed)
+        return Promise.reject(new Error("不能在已销毁的插件上调用 show"));
+      const i = d({ userAction: !0 }, t);
+      this.updateState({ visible: !0 }, i.userAction), yield this._show(i);
+    });
+  }
+  /** 插件内容整体隐藏
+   * @param `options` `<Partial<ShowHideOptions>> | <undefined>`
+   * @param `options.userAction` `<boolean> | <undefined>` 是否是用户操作。默认是 true。
+   */
+  hide(t) {
+    return u(this, null, function* () {
+      if (this.state.visible === !1)
+        return;
+      const i = d({ userAction: !0 }, t);
+      this.updateState({ visible: !1 }, i.userAction), yield this._hide(i);
+    });
+  }
+  // 目前带动画的展示和隐藏功能有些需求细节没有确定，暂时不实现
+  // /** 展示标注
+  //  * @param `options` `<Partial<ShowHideOptions>> | <undefined>`
+  //  * @param `options.userAction` `<boolean> | <undefined>` 是否是用户操作。默认是 true。
+  //  * @param `options.anime` `<AnimeOptions> | <undefined>` 动画配置。
+  //  * @param `options.anime.duration` `<number> | <undefined>` 动画时间，默认是 500ms。
+  //  */
+  // public async show(options?: Partial<PluginType.ShowHideOptions>): Promise<void> {
+  //   if (this.state.visible) return Promise.resolve()
+  //   if (this.disposed) return Promise.reject(new Error('不能在已销毁的插件上调用 show'))
+  //   const mergedOptions: PluginType.ShowHideOptions = {
+  //     userAction: true,
+  //     anime: { duration: 500, ...options?.anime },
+  //     ...options,
+  //   }
+  //   this.updateState({ visible: true }, mergedOptions.userAction)
+  //   await this._show(mergedOptions)
+  // }
+  // /** 插件内容整体隐藏
+  //  * @param `options` `<Partial<ShowHideOptions>> | <undefined>`
+  //  * @param `options.userAction` `<boolean> | <undefined>` 是否是用户操作。默认是 true。
+  //  * @param `options.anime` `<AnimeOptions> | <undefined>` 动画配置。
+  //  * @param `options.anime.duration` `<number> | <undefined>` 动画时间，默认是 500ms。
+  //  */
+  // public async hide(options?: Partial<PluginType.ShowHideOptions>) {
+  //   if (this.state.visible === false) return
+  //   const mergedOptions: PluginType.ShowHideOptions = {
+  //     userAction: true,
+  //     anime: { duration: 500, ...options?.anime },
+  //     ...options,
+  //   }
+  //   this.updateState({ visible: false }, mergedOptions.userAction)
+  //   await this._hide(mergedOptions)
+  // }
+  /** 更改插件 State
+   * @param `state` `<Partial<Plugin.State>>` 插件属性 `state` 的子集。
+   * @param `options` `<Option> | <undefined>`
+   * @param `options.userAction` `<boolean> | <undefined>` 是否是用户操作。默认是 true。
+   */
+  setState(t, i = {}) {
+    const e = this.state;
+    if (I(t, e, { deep: !0 }))
+      return;
+    const s = i.userAction !== void 0 ? i.userAction : !0;
+    if (this.updateState(t, s), t.enabled !== void 0 && e.enabled !== t.enabled && (t.enabled ? this._enable({ userAction: s }) : this._disable({ userAction: s })), t.visible !== void 0 && e.visible !== t.visible) {
+      const a = { userAction: s, anime: { duration: 500 } };
+      t.visible ? this._show(a) : this._hide(a);
+    }
+  }
+  /** 更改插件 Config
+   * @param `config` `<Partial<Plugin.Config>>` 插件属性 `config` 的子集。
+   * @param `options` `<Option> | <undefined>`
+   */
+  updateConfig(t, i = {}) {
+    var a;
+    const e = this.config, s = d(d({}, e), t);
+    this._config = s, this.hooks.emit("configChange", { prevConfig: e, config: s, userAction: (a = i.userAction) != null ? a : !0 });
+  }
+  /** 根据 ID 获取标注 */
+  getMaskItemByID(t) {
+    return this.itemMap.get(t);
+  }
+  formatData(t) {
+    function i(e) {
+      return e.list.length === 0 ? !0 : !("shape" in e.list[0].object_data);
+    }
+    return i(t) ? {
+      list: t.list.filter((e) => e.object_data.points.length >= 3).map((e) => {
+        const s = new g.Shape(), a = e.object_data.points[0];
+        return s.moveTo(a[0], a[2]), e.object_data.points.slice(1).forEach((n) => s.lineTo(n[0], n[2])), s.lineTo(a[0], a[2]), p(d({}, e), {
+          floor_index: e.object_data.floorIndex,
+          object_data: p(d({}, e.object_data), {
+            bottom_y: a[1] + e.object_data.fixedY,
+            shape: s.toJSON(),
+            height: e.object_data.height + e.object_data.fixedHeight
+          })
+        });
+      })
+    } : t;
+  }
+  checkChildrenMountedState() {
+    const t = this.state, i = this.five;
+    if (!t.enabled)
+      return { result: !1, msg: "插件不可用" };
+    const e = i.getCurrentState().mode;
+    return e === "Panorama" ? { result: !1, msg: `Five 模态不符合条件, 当前模态为：${e}` } : this.isInFiveChangeModeAnime ? { result: !1, msg: "切换模态动画中不展示" } : { result: !0, msg: "" };
+  }
+  updateChildrenMountedState() {
+    const { result: t, msg: i } = this.checkChildrenMountedState();
+    this.checkMsg.childrenMountedState = i, t !== this.childrenMountedState && (this.childrenMountedState = t, this.itemMap.forEach((e) => {
+      this.childrenMountedState ? e.mount() : e.unmount();
+    }));
+  }
+  updateState(t, i) {
+    const e = this.state;
+    this.state = d(d({}, this.state), t), this.hooks.emit("stateChange", { state: this.state, prevState: e, userAction: i });
+  }
+  _enable(t) {
+    this.hooks.emit("enable", { userAction: t.userAction }), this.five.scene.add(this.modelGroup), this.five.needsRender = !0, this.five.on("wantsTapGesture", this.onWantsFiveTapGesture), this.five.on("initAnimationWillStart", this.onFiveInitAnimationWillStart), this.five.on("initAnimationEnded", this.onFiveInitAnimationEnded), this.five.on("modeChange", this.onFiveModeChange), this.five.on("cameraUpdate", this.onFiveCameraUpdate);
+  }
+  _disable(t) {
+    this.hooks.emit("disable", { userAction: t.userAction }), this.five.scene.remove(this.modelGroup), this.five.needsRender = !0, this.five.off("wantsTapGesture", this.onWantsFiveTapGesture), this.five.off("initAnimationWillStart", this.onFiveInitAnimationWillStart), this.five.off("initAnimationEnded", this.onFiveInitAnimationEnded), this.five.off("modeChange", this.onFiveModeChange), this.five.off("cameraUpdate", this.onFiveCameraUpdate);
+  }
+  _show(t) {
+    return u(this, null, function* () {
+      this.hooks.emit("show", t), this.five.needsRender = !0;
+    });
+  }
+  _hide(t) {
+    return u(this, null, function* () {
+      this.hooks.emit("hide", t), this.five.needsRender = !0;
+    });
+  }
+}
+export {
+  ot as Controller
+};

package/libs/AreaMakerPlugin/index.d.ts

@@ -0,0 +1,4 @@
+import type { Five } from '@realsee/five';
+import type * as AreaMakerPluginType from './typing';
+export declare const AreaMakerPlugin: (five: Five) => AreaMakerPluginType.AreaMakerController;
+export type { AreaMakerPluginType };

package/libs/AreaMakerPlugin/index.js

@@ -0,0 +1,37 @@
+import { Controller as o } from "./Controller.js";
+import "three";
+import "../base/BasePluginWithData.js";
+import "../base/BasePlugin.js";
+import "../shared-utils/Subscribe.js";
+import "hammerjs";
+import "@realsee/five";
+import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
+import "../CSS3DRenderPlugin/utils/three/CSS3DRender.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 "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
+import "../shared-utils/absoluteUrl.js";
+import "../shared-utils/equal.js";
+import "../shared-utils/isTruelyObject.js";
+import "./utils/Item.js";
+import "../shared-utils/three/core/Object3D.js";
+import "../shared-utils/three/objects/LineSegments.js";
+import "../shared-utils/animationFrame/BetterTween.js";
+import "../shared-utils/animationFrame/index.js";
+import "../components/AreaLabel/LabelItem.js";
+import "../vendor/svelte/internal/index.js";
+import "../components/AreaLabel/Assets/roomLabelBg.js";
+import "../shared-utils/math/planimetry.js";
+const H = (r) => new o(r);
+export {
+  H as AreaMakerPlugin
+};

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/utils/Item.d.ts

@@ -0,0 +1,115 @@
+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 onPluginStateChange;
+    /** 更新标注可见性 */
+    private updateVisible;
+    /** 检测标注是否可见 */
+    private checkVisible;
+    /** 更新标注标签 */
+    private updateTag;
+    /** 更新标注标签的 NDC Position */
+    private updateTagNDCPosition;
+    /** 更新标注标签的 transform */
+    private updateTagDomTransform;
+    /** 更新标注标签可见性 */
+    private updateTagVisible;
+    /** 检测标注标签是否可见 */
+    private checkTagVisible;
+    /** 相机位姿发生变化时，更新标签 */
+    private onFiveCameraUpdate;
+}
+export {};