@realsee/dnalogel 3.5.1 → 3.6.0

package/libs/AreaMakerPlugin/Controller.d.ts

@@ -8,6 +8,8 @@ export declare class Controller extends BasePlugin.Controller<PluginType.State,
     state: PluginType.State;
     /** 标注模型 { id: item } 的映射表 */
     itemMap: Map<string | number, AreaMakerItem>;
+    /** 自定义 DOM */
+    itemRenderer?: PluginType.ItemRenderer;
     /** 标注模型容器 */
     modelGroup: THREE.Group;
     /** 当前使用的数据 */

package/libs/AreaMakerPlugin/Controller.js

@@ -2,16 +2,16 @@ var C = Object.defineProperty, M = Object.defineProperties;
 var I = Object.getOwnPropertyDescriptors;
 var p = Object.getOwnPropertySymbols;
 var A = Object.prototype.hasOwnProperty, S = Object.prototype.propertyIsEnumerable;
-var u = (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 = {}))
-    A.call(o, t) && u(h, t, o[t]);
+var u = (h, r, t) => r in h ? C(h, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : h[r] = t, d = (h, r) => {
+  for (var t in r || (r = {}))
+    A.call(r, t) && u(h, t, r[t]);
   if (p)
-    for (var t of p(o))
-      S.call(o, t) && u(h, t, o[t]);
+    for (var t of p(r))
+      S.call(r, t) && u(h, t, r[t]);
   return h;
-}, f = (h, o) => M(h, I(o));
-var r = (h, o, t) => (u(h, typeof o != "symbol" ? o + "" : o, t), t);
-var m = (h, o, t) => new Promise((i, e) => {
+}, f = (h, r) => M(h, I(r));
+var o = (h, r, t) => (u(h, typeof r != "symbol" ? r + "" : r, t), t);
+var m = (h, r, t) => new Promise((i, e) => {
   var s = (n) => {
     try {
       l(t.next(n));
@@ -25,7 +25,7 @@ var m = (h, o, t) => new Promise((i, e) => {
       e(c);
     }
   }, l = (n) => n.done ? i(n.value) : Promise.resolve(n.value).then(s, a);
-  l((t = t.apply(h, o)).next());
+  l((t = t.apply(h, r)).next());
 });
 import * as g from "three";
 import { Controller as _ } from "../base/BasePluginWithData.js";
@@ -61,7 +61,7 @@ import "../components/AreaLabel/LabelItem.js";
 import "../vendor/svelte/internal/index.js";
 import "../components/AreaLabel/Assets/roomLabelBg.js";
 import "../shared-utils/math/planimetry.js";
-class rt extends _ {
+class at extends _ {
   /** AreaMakerPlugin
    * @param `five` `<Five>` Five 实例
    * @param `params` `<PluginType.Params> | <undefined>` 插件初始化参数
@@ -71,41 +71,43 @@ class rt extends _ {
     super(t);
     // ==================== public properties ====================
     /** 插件当前状态 */
-    r(this, "state");
+    o(this, "state");
     /** 标注模型 { id: item } 的映射表 */
-    r(this, "itemMap");
+    o(this, "itemMap");
+    /** 自定义 DOM */
+    o(this, "itemRenderer");
     /** 标注模型容器 */
-    r(this, "modelGroup");
+    o(this, "modelGroup");
     /** 当前使用的数据 */
-    r(this, "data");
+    o(this, "data");
     /** tag 容器 */
-    r(this, "tagDomContainer");
+    o(this, "tagDomContainer");
     /** 用于监听容器尺寸变化的 iframe */
-    r(this, "resizeIframe");
+    o(this, "resizeIframe");
     /** 查询问题使用的调试对象 */
-    r(this, "checkMsg", {
+    o(this, "checkMsg", {
       childrenMountedState: ""
     });
     // ==================== private properties ====================
     /** 是否在 Five Change Mode 动画中 */
-    r(this, "isInFiveChangeModeAnime", !1);
+    o(this, "isInFiveChangeModeAnime", !1);
     /** 子组件是否挂载 */
-    r(this, "childrenMountedState", !1);
+    o(this, "childrenMountedState", !1);
     /** config 的原始值 */
-    r(this, "_config");
+    o(this, "_config");
     /** disposed 的原始值 */
-    r(this, "_disposed", !1);
+    o(this, "_disposed", !1);
     /** 销毁插件，移除所有副作用，销毁后将不响应任何 API */
-    r(this, "dispose", () => {
+    o(this, "dispose", () => {
       this.five.scene.remove(this.modelGroup);
     });
-    r(this, "onFiveInitAnimationWillStart", () => {
+    o(this, "onFiveInitAnimationWillStart", () => {
       this.isInFiveChangeModeAnime = !0, this.updateChildrenMountedState();
     });
-    r(this, "onFiveInitAnimationEnded", () => {
+    o(this, "onFiveInitAnimationEnded", () => {
       this.isInFiveChangeModeAnime = !1, this.updateChildrenMountedState();
     });
-    r(this, "onFiveCameraUpdate", () => {
+    o(this, "onFiveCameraUpdate", () => {
       const t = this.five.camera;
       [...this.itemMap.values()].sort((e, s) => {
         const a = e.tagPosition.distanceTo(t.position);
@@ -115,13 +117,13 @@ class rt extends _ {
         (a = this.getMaskItemByID(e.id)) == null || a.setTagZIndex(s * 10);
       });
     });
-    r(this, "onFiveModeChange", () => {
+    o(this, "onFiveModeChange", () => {
       this.updateChildrenMountedState();
     });
-    r(this, "onMakerTagClick", (t) => {
+    o(this, "onMakerTagClick", (t) => {
       this.hooks.emit("wantsTap", { target: t.target, intersectObjects: [] });
     });
-    r(this, "onWantsFiveTapGesture", (t) => {
+    o(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)
@@ -165,7 +167,7 @@ class rt extends _ {
       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 y(this, e);
-        this.modelGroup.add(s.modelGroup), this.itemMap.set(e.id, s), s.hooks.on("tagClick", this.onMakerTagClick);
+        s.itemRenderer = this.itemRenderer, this.modelGroup.add(s.modelGroup), this.itemMap.set(e.id, s), s.hooks.on("tagClick", this.onMakerTagClick);
       });
     });
   }
@@ -336,5 +338,5 @@ class rt extends _ {
   }
 }
 export {
-  rt as Controller
+  at as Controller
 };

package/libs/AreaMakerPlugin/typing.d.ts

@@ -106,6 +106,7 @@ export interface ServerDataV2 {
 export type ServerData = ServerDataV1 | ServerDataV2;
 /** 插件使用的数据 */
 export type PluginData = ServerDataV2;
+export type ItemRenderer = (container: HTMLElement, item: ServerAreaMakerItem) => () => void;
 export interface ServerAreaMakerItem {
     id: number | string;
     /** 标注名称 */

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

@@ -58,6 +58,10 @@ export declare class AreaMakerItem {
     tagZIndex: number;
     /** 标注实例的事件处理器 */
     hooks: Subscribe<PluginType.AreaMakerItemEventMap>;
+    /** 自定义 Dom */
+    itemRenderer?: PluginType.ItemRenderer;
+    /** 数据 */
+    private data;
     /** Plugin 实例 */
     private plugin;
     /** 标注透明度动画 */

package/libs/AreaMakerPlugin/utils/Item.js

@@ -1,6 +1,6 @@
-var f = Object.defineProperty;
-var d = (a, t, e) => t in a ? f(a, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[t] = e;
-var i = (a, t, e) => (d(a, typeof t != "symbol" ? t + "" : t, e), e);
+var d = Object.defineProperty;
+var f = (a, e, t) => e in a ? d(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
+var i = (a, e, t) => (f(a, typeof e != "symbol" ? e + "" : e, t), t);
 import * as n from "three";
 import "hammerjs";
 import "@realsee/five";
@@ -30,17 +30,17 @@ import "../../shared-utils/animationFrame/index.js";
 import "../../vendor/svelte/internal/index.js";
 import "../../components/AreaLabel/Assets/roomLabelBg.js";
 class v extends b {
-  constructor(e) {
+  constructor(t) {
     super();
     i(this, "areaMakerItem");
-    this.areaMakerItem = e;
+    this.areaMakerItem = t;
   }
-  raycast(e, s) {
-    this.areaMakerItem.makerObject.raycast(e, s);
+  raycast(t, s) {
+    this.areaMakerItem.makerObject.raycast(t, s);
   }
 }
 class Q {
-  constructor(t, e) {
+  constructor(e, t) {
     i(this, "id");
     /** 标注名称 */
     i(this, "name", "");
@@ -86,6 +86,10 @@ class Q {
     i(this, "tagZIndex", 0);
     /** 标注实例的事件处理器 */
     i(this, "hooks", new O());
+    /** 自定义 Dom */
+    i(this, "itemRenderer");
+    /** 数据 */
+    i(this, "data");
     /** Plugin 实例 */
     i(this, "plugin");
     /** 标注透明度动画 */
@@ -113,11 +117,11 @@ class Q {
     // })
     // }
     /** 透明度动画 */
-    i(this, "doOpacityAnime", (t) => {
+    i(this, "doOpacityAnime", (e) => {
       var h;
       (h = this.opacityAnime) == null || h.dispose();
-      const e = t.duration, [s, o] = t.makerObjectOpacity, [r, l] = t.outlineOpacity;
-      if (e === 0) {
+      const t = e.duration, [s, o] = e.makerObjectOpacity, [r, l] = e.outlineOpacity;
+      if (t === 0) {
         this.makerObject.material.opacity = o, this.outline.material.opacity = l;
         return;
       }
@@ -133,8 +137,8 @@ class Q {
       });
     });
     /** 插件 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, "onPluginConfigChange", (e) => {
+      this.makerObject.material.depthTest = e.config.modelDepthTest, this.outline.material.depthTest = e.config.modelDepthTest, this.plugin.five.needsRender = !0;
     });
     /** 插件整体可见性变化时，需要更新自身可见性 */
     i(this, "onPluginStateChange", () => {
@@ -142,15 +146,15 @@ class Q {
     });
     /** 更新标注可见性 */
     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);
+      const { result: e, msg: t } = this.checkVisible();
+      this.checkMsg.checkVisibleMsg = t, this.visible !== e && (this.visible = e, this.modelGroup.visible = e, 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}` };
+      const t = this.plugin.five.model.shownFloor;
+      return t === null || t === this.floorIndex ? { result: !0, msg: "" } : { result: !1, msg: `模型高亮楼层不符合展示条件, 当前高亮楼层为：${t}` };
     });
     /** 更新标注标签 */
     i(this, "updateTag", () => {
@@ -158,20 +162,20 @@ class Q {
     });
     /** 更新标注标签的 NDC Position */
     i(this, "updateTagNDCPosition", () => {
-      const e = this.tagPosition.clone().project(this.plugin.five.camera);
-      this.tagNDCPosition.copy(e);
+      const t = this.tagPosition.clone().project(this.plugin.five.camera);
+      this.tagNDCPosition.copy(t);
     });
     /** 更新标注标签的 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)` }));
+      const e = this.tagNDCPosition, t = Math.round((e.x + 1) / 2 * this.plugin.tagDomContainer.clientWidth), s = Math.round((-e.y + 1) / 2 * this.plugin.tagDomContainer.clientHeight);
+      this.tagTransform.left === t && this.tagTransform.top === s || (this.tagTransform = { left: t, top: s }, (o = this.tagApp) == null || o.$set({ transform: `translate(${t}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 }));
+      const { result: e, msg: t } = this.checkTagVisible();
+      this.checkMsg.checkTagVisibleMsg = t, this.tagVisible !== e && (this.tagVisible = e, (s = this.tagApp) == null || s.$set({ visible: e }));
     });
     /** 检测标注标签是否可见 */
     i(this, "checkTagVisible", () => {
@@ -179,9 +183,9 @@ class Q {
         return { result: !1, msg: "标注整体不可见" };
       if (this.isInContainerResizeAnimation)
         return { result: !1, msg: "处于容器 resize 动画中" };
-      const e = this.plugin.five, s = new n.Raycaster(), o = e.camera.position.clone();
+      const t = this.plugin.five, s = new n.Raycaster(), o = t.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);
+      const [r] = t.model.intersectRaycaster(s), l = this.tagPosition.distanceTo(t.camera.position);
       if (r && r.distance + 0.1 < l)
         return { result: !1, msg: "标注标签被 Five 模型遮挡" };
       const h = this.tagNDCPosition;
@@ -194,14 +198,14 @@ class Q {
     /** tag container DOM 发生 resize */
     i(this, "onContainerResize", () => {
       this.isInContainerResizeAnimation === !1 && (this.isInContainerResizeAnimation = !0, this.updateTag());
-      const e = () => {
+      const t = () => {
         this.isInContainerResizeAnimation = !1, this.containerResizeTimeoutID = null, this.updateTag();
       };
-      this.containerResizeTimeoutID && clearTimeout(this.containerResizeTimeoutID), this.containerResizeTimeoutID = setTimeout(e, 100);
+      this.containerResizeTimeoutID && clearTimeout(this.containerResizeTimeoutID), this.containerResizeTimeoutID = setTimeout(t, 100);
     });
     var p, m, c;
-    const s = e.object_data, o = s.bottom_y, r = s.height, l = new n.Color((p = s.color) != null ? p : "#FFFFFF"), h = (m = s.opacity) != null ? m : 0.4;
-    this.id = e.id, this.name = (c = e.name) != null ? c : "", this.plugin = t, this.height = r, this.bottomY = o, this.opacity = h, this.shape = new n.Shape().fromJSON(s.shape), this.floorIndex = e.floor_index, this.makerObject = new n.Mesh(g(this.shape, r), M(l, h)), u(this.makerObject, o), this.makerObject.material.depthTest = this.plugin.config.modelDepthTest, this.outline = new k(
+    const s = t.object_data, o = s.bottom_y, r = s.height, l = new n.Color((p = s.color) != null ? p : "#FFFFFF"), h = (m = s.opacity) != null ? m : 0.4;
+    this.data = t, this.id = t.id, this.name = (c = t.name) != null ? c : "", this.plugin = e, this.height = r, this.bottomY = o, this.opacity = h, this.shape = new n.Shape().fromJSON(s.shape), this.floorIndex = t.floor_index, this.makerObject = new n.Mesh(g(this.shape, r), M(l, h)), u(this.makerObject, o), this.makerObject.material.depthTest = this.plugin.config.modelDepthTest, this.outline = new k(
       new n.EdgesGeometry(this.makerObject.geometry),
       new n.LineBasicMaterial({ color: l, transparent: !0 })
     ), u(this.outline, o), this.outline.material.depthTest = this.plugin.config.modelDepthTest, this.setHeight(r), this.modelGroup = new v(this);
@@ -209,44 +213,46 @@ class Q {
   /** 挂载标注 */
   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 = {
+      const t = this.plugin.tagDomContainer, s = {
+        data: this.data,
         content: this.name,
         visible: this.tagVisible,
+        renderer: this.itemRenderer,
         transform: `translate(${this.tagTransform.left}px, ${this.tagTransform.top}px)`,
         onClick: (o) => this.hooks.emit("tagClick", { target: this, nativeEvent: o })
       };
-      this.tagApp = new T({ target: e, props: s }), this.updateTag();
+      this.tagApp = new T({ target: t, props: s }), this.updateTag();
     }
     this.plugin.five.needsRender = !0, this.plugin.hooks.on("stateChange", this.onPluginStateChange), this.plugin.hooks.on("configChange", this.onPluginConfigChange), this.plugin.five.on("modeChange", this.updateVisible), this.plugin.five.on("modelShownFloorChange", this.updateVisible), this.plugin.five.on("cameraUpdate", this.onFiveCameraUpdate), this.plugin.resizeIframe.contentWindow.addEventListener("resize", this.onContainerResize);
   }
   /** 卸载标注 */
   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("stateChange", this.onPluginStateChange), this.plugin.hooks.off("configChange", this.onPluginConfigChange), this.plugin.five.off("modeChange", this.updateVisible), this.plugin.five.off("modelShownFloorChange", this.updateVisible), this.plugin.five.off("cameraUpdate", this.onFiveCameraUpdate), this.plugin.resizeIframe.contentWindow.removeEventListener("resize", this.onContainerResize);
+    var e;
+    this.mounted = !1, this.modelGroup.remove(...this.modelGroup.children), (e = this.tagApp) == null || e.$destroy(), this.tagApp = null, this.plugin.hooks.off("stateChange", this.onPluginStateChange), this.plugin.hooks.off("configChange", this.onPluginConfigChange), this.plugin.five.off("modeChange", this.updateVisible), this.plugin.five.off("modelShownFloorChange", this.updateVisible), this.plugin.five.off("cameraUpdate", this.onFiveCameraUpdate), this.plugin.resizeIframe.contentWindow.removeEventListener("resize", this.onContainerResize);
   }
   /** 更改标注透明度
    * @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;
+  setOpacity(e) {
+    var t;
+    this.opacity = e, (t = this.opacityAnime) == null || t.dispose(), this.makerObject.material.opacity = e, this.plugin.five.needsRender = !0;
   }
   /** 更改标注颜色
    * @param color 标注颜色，支持 hex
    * @example setColor('#FF0000')
    */
-  setColor(t) {
-    const e = new n.Color(t);
-    this.makerObject.material.color = e, this.outline.material.color = e, this.plugin.five.needsRender = !0;
+  setColor(e) {
+    const t = new n.Color(e);
+    this.makerObject.material.color = t, this.outline.material.color = t, this.plugin.five.needsRender = !0;
   }
   /** 更改标注高度
    * @param height 标注高度，单位：米
    */
-  setHeight(t) {
-    if (t <= 0)
+  setHeight(e) {
+    if (e <= 0)
       throw new Error("高度必须大于 0");
-    this.height = t, this.makerObject.geometry = g(this.shape, t), this.outline.geometry = new n.EdgesGeometry(this.makerObject.geometry);
-    const e = this.shape.extractPoints(10).shape.slice(0, -1), s = C(e), o = new n.Vector3(s.x, s.y, t);
+    this.height = e, this.makerObject.geometry = g(this.shape, e), this.outline.geometry = new n.EdgesGeometry(this.makerObject.geometry);
+    const t = this.shape.extractPoints(10).shape.slice(0, -1), s = C(t), o = new n.Vector3(s.x, s.y, e);
     u(o, this.bottomY), this.tagPosition.copy(o), this.updateTag(), this.plugin.five.needsRender = !0;
   }
   /** 更改标注标签的显示层级
@@ -257,27 +263,27 @@ class Q {
    * - 标签 A <- 标签 B <- 相机： 标签 A 在标签 B 的后面
    * 但是当前元素是无法感知到这种变化的，所以需要通过父元素调用这个方法来更新标签的层级。
    */
-  setTagZIndex(t) {
-    var e;
-    this.tagZIndex !== t && ((e = this.tagApp) == null || e.$set({ zIndex: t }));
+  setTagZIndex(e) {
+    var t;
+    this.tagZIndex !== e && ((t = this.tagApp) == null || t.$set({ zIndex: e }));
   }
 }
-function g(a, t) {
+function g(a, e) {
   return new n.ExtrudeBufferGeometry(a, {
-    depth: t,
+    depth: e,
     bevelEnabled: !1
   });
 }
-function M(a, t) {
+function M(a, e) {
   return new n.MeshBasicMaterial({
     color: a,
-    opacity: t,
+    opacity: e,
     transparent: !0
   });
 }
-function u(a, t) {
-  const e = new n.Matrix4(), s = new n.Matrix4().makeRotationX(Math.PI / 2), o = new n.Matrix4().makeTranslation(0, 0, -t), r = new n.Matrix4().makeScale(1, 1, -1);
-  e.multiply(s), e.multiply(o), e.multiply(r), a.applyMatrix4(e);
+function u(a, e) {
+  const t = new n.Matrix4(), s = new n.Matrix4().makeRotationX(Math.PI / 2), o = new n.Matrix4().makeTranslation(0, 0, -e), r = new n.Matrix4().makeScale(1, 1, -1);
+  t.multiply(s), t.multiply(o), t.multiply(r), a.applyMatrix4(t);
 }
 export {
   Q as AreaMakerItem

package/libs/base/BasePlugin.js

@@ -14,7 +14,7 @@ let b = class {
     /**
      * @realsee/dnalogel 版本号
      */
-    i(this, "VERSION", "3.5.1");
+    i(this, "VERSION", "3.6.0");
     i(this, "five");
     /**
      * 插件事件钩子