@realsee/dnalogel 3.64.23-alpha.4 → 3.64.23-ke-webgpu.1

package/libs/ModelMakerPlugin/Controller.js

@@ -1,58 +1,59 @@
-var F = Object.defineProperty;
-var D = Object.getOwnPropertySymbols;
-var k = Object.prototype.hasOwnProperty, S = Object.prototype.propertyIsEnumerable;
-var b = (l, p, e) => p in l ? F(l, p, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[p] = e, E = (l, p) => {
-  for (var e in p || (p = {}))
-    k.call(p, e) && b(l, e, p[e]);
-  if (D)
-    for (var e of D(p))
-      S.call(p, e) && b(l, e, p[e]);
-  return l;
+var J = Object.defineProperty;
+var N = Object.getOwnPropertySymbols;
+var X = Object.prototype.hasOwnProperty, ee = Object.prototype.propertyIsEnumerable;
+var F = (c, l, e) => l in c ? J(c, l, { enumerable: !0, configurable: !0, writable: !0, value: e }) : c[l] = e, k = (c, l) => {
+  for (var e in l || (l = {}))
+    X.call(l, e) && F(c, e, l[e]);
+  if (N)
+    for (var e of N(l))
+      ee.call(l, e) && F(c, e, l[e]);
+  return c;
 };
-var h = (l, p, e) => (b(l, typeof p != "symbol" ? p + "" : p, e), e);
-var w = (l, p, e) => new Promise((s, a) => {
-  var i = (t) => {
+var h = (c, l, e) => (F(c, typeof l != "symbol" ? l + "" : l, e), e);
+var W = (c, l, e) => new Promise((i, r) => {
+  var t = (s) => {
     try {
-      o(e.next(t));
-    } catch (r) {
-      a(r);
+      a(e.next(s));
+    } catch (o) {
+      r(o);
     }
-  }, n = (t) => {
+  }, n = (s) => {
     try {
-      o(e.throw(t));
-    } catch (r) {
-      a(r);
+      a(e.throw(s));
+    } catch (o) {
+      r(o);
     }
-  }, o = (t) => t.done ? s(t.value) : Promise.resolve(t.value).then(i, n);
-  o((e = e.apply(l, p)).next());
+  }, a = (s) => s.done ? i(s.value) : Promise.resolve(s.value).then(t, n);
+  a((e = e.apply(c, l)).next());
 });
-import { Controller as P } from "../base/BasePluginWithData.js";
-import * as d from "three";
-import { ModelMakerBoxItem as j } from "./item/boxItem.js";
-import { PrismMesh as I } from "../Sculpt/Meshes/Prism.js";
-import { anyPositionToVector3 as L } from "../shared-utils/positionToVector3.js";
-import { PolygonWithEdgeMesh as H } from "../Sculpt/Meshes/PolygonWithEdge.js";
-import "../shared-utils/tag.js";
+import { AnimationFrameLoop as te } from "@realsee/five-webgpu";
+import { Controller as ie } from "../base/BasePluginWithData.js";
+import * as p from "three";
+import { MeshBasicNodeMaterial as oe } from "three/webgpu";
+import { uniform as V, Fn as se, uv as G, float as ne, If as q, positionLocal as re } from "three/tsl";
+import { ModelMakerBoxItem as ae } from "./item/boxItem.js";
+import { PrismMesh as $ } from "../Sculpt/Meshes/Prism.js";
+import { anyPositionToVector3 as le } from "../shared-utils/positionToVector3.js";
+import { PolygonWithEdgeMesh as de } from "../Sculpt/Meshes/PolygonWithEdge.js";
+import { LightTag as he } from "../shared-utils/tag.js";
 import "../vendor/hammerjs/hammer.js";
 import "../shared-utils/three/PointSelector/index.js";
-import "../shared-utils/three/CSS3DRenderer/index.js";
-import { waitFiveModelLoaded as A } from "../shared-utils/five/fiveModelLoad.js";
+import { waitFiveModelLoaded as pe } from "../shared-utils/five/fiveModelLoad.js";
 import "../CSS3DRenderPlugin/utils/generateBehindFiveElement.js";
-import "@realsee/five/line";
-import { notNil as v } from "../shared-utils/isNil.js";
-import "../shared-utils/three/core/Five_LineMaterial2.js";
-import { boxVertex as y } from "../shared-utils/three/boundingBox.js";
+import "three/examples/jsm/lines/LineGeometry.js";
+import { notNil as B } from "../shared-utils/isNil.js";
+import "three/examples/jsm/lines/webgpu/Line2.js";
+import { boxVertex as y, boundingBox as L } from "../shared-utils/three/boundingBox.js";
 import "../vendor/animejs/lib/anime.es.js";
+import { FiveDomEvents as ce } from "../shared-utils/five/FiveDomEvents.js";
 import "../vendor/@tweenjs/tween/dist/tween.esm.js.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DRender.js";
-import { FiveDomEvents as O } from "../shared-utils/five/FiveDomEvents.js";
 import "../shared-utils/five/FivePuppet.js";
-import { tagRendererMap as B } from "./utils/tagRenderer.js";
-import { ModelMakerPrismItem as T } from "./item/prismItem.js";
-import { ModelMakerPolygonItem as z } from "./item/polygonItem.js";
-import { fiveEveryReadyListener as G } from "../shared-utils/five/fiveEveryReadyListener.js";
-import { sleep as N } from "../CruisePlugin/utils/sleep.js";
-import { CONST as Q } from "../shared-utils/constants.js";
+import { tagRendererMap as me } from "./utils/tagRenderer.js";
+import { ModelMakerPrismItem as Q } from "./item/prismItem.js";
+import { ModelMakerPolygonItem as fe } from "./item/polygonItem.js";
+import { fiveEveryReadyListener as ue } from "../shared-utils/five/fiveEveryReadyListener.js";
+import { sleep as ge } from "../CruisePlugin/utils/sleep.js";
+import { CONST as ve } from "../shared-utils/constants.js";
 import "../base/BasePlugin.js";
 import "../shared-utils/Subscribe.js";
 import "../shared-utils/three/core/Sphere.js";
@@ -88,6 +89,7 @@ import "../Sculpt/utils/renderDom.js";
 import "../Sculpt/Meshes/Polyline.js";
 import "../Sculpt/Meshes/LineWithDots.js";
 import "../Sculpt/Meshes/Point.js";
+import "../shared-utils/three/circleImageURL.js";
 import "../shared-utils/three/closeVectors.js";
 import "../Sculpt/Meshes/Polygon.js";
 import "../shared-utils/three/generatePolygonGeometry.js";
@@ -103,6 +105,7 @@ import "../CSS3DRenderPlugin/utils/three/CSS3DObject.js";
 import "../shared-utils/even.js";
 import "../shared-utils/CSS3DRender/OpacityMesh.js";
 import "../shared-utils/three/getObjectVisible.js";
+import "../shared-utils/three/CSS3DRenderer/index.js";
 import "../shared-utils/throttle.js";
 import "../shared-utils/three/PointSelector/utils/html.js";
 import "../shared-utils/CSS3DRender/index.js";
@@ -115,23 +118,30 @@ import "../shared-utils/five/getPosition.js";
 import "../shared-utils/five/getRaycasterByNdcPosition.js";
 import "../shared-utils/three/PointSelector/utils/contents.js";
 import "../Sculpt/utils/three/rayOnLine.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DScene.js";
-import "../CSS3DRenderPlugin/utils/getAllCSS3DObject.js";
-import "../CSS3DRenderPlugin/utils/three/CSS3DGroup.js";
-import "@realsee/five";
 import "../shared-utils/five/calculateThreeMouse.js";
 import "./utils/Text.js";
 import "../vendor/svelte/internal/index.js";
 import "../components/AreaLabel/LabelItem.js";
 import "../components/AreaLabel/Assets/roomLabelBg.js";
 import "../shared-utils/math/rad2Deg.js";
-class Lt extends P {
-  constructor(e, s) {
-    var a, i;
+import "./utils/BoxLabelItem.js";
+const ye = (c, l, e, i = [0, 1, 4, 5]) => {
+  let r = null, t = 1 / 0;
+  return i.forEach((n) => {
+    const a = y(c, n), o = a.clone().applyMatrix4(l.matrixWorld).distanceTo(e);
+    o < t && (t = o, r = a);
+  }), r || y(c, 5);
+}, be = (c) => {
+  const l = c * 100;
+  return l < 10 ? null : `${Math.round(l / 10) * 10}cm`;
+};
+class ci extends ie {
+  constructor(e, i) {
+    var r, t;
     super(e);
     h(this, "state");
     h(this, "items", []);
-    h(this, "group", new d.Group());
+    h(this, "group", new p.Group());
     h(this, "data");
     h(this, "tagRendererMap", {});
     h(this, "fiveDomEvents");
@@ -140,139 +150,275 @@ class Lt extends P {
     h(this, "occlusionVisibility");
     h(this, "occlusionMode");
     h(this, "fiveEveryReadyListenerDisposer");
+    h(this, "activeAnimations", /* @__PURE__ */ new Map());
+    h(this, "activeEaseInAnimations", /* @__PURE__ */ new Map());
     h(this, "onFiveModeChange", (e) => {
-      const s = this.occlusionVisibility;
-      Array.isArray(s) && this.items.forEach((a) => {
-        a.type !== "triangles" && a.model.setStyle instanceof Function && a.model.setStyle({ occlusionVisibility: s.includes(e) });
+      const i = this.occlusionVisibility;
+      Array.isArray(i) && this.items.forEach((r) => {
+        r.type !== "triangles" && r.model.setStyle instanceof Function && r.model.setStyle({ occlusionVisibility: i.includes(e) });
       });
     });
     h(this, "handleEnable", () => {
-      var e, s;
-      this.five.scene.add(this.group), (s = (e = this.five.getElement()) == null ? void 0 : e.parentElement) == null || s.appendChild(this.tagWrapper), this.five.needsRender = !0, this.onFiveModeChange(this.five.getCurrentState().mode), this.onFiveEveryReady(), this.five.on("modeChange", this.onFiveModeChange), this.fiveEveryReadyListenerDisposer = G(this.five, this.onFiveEveryReady);
+      var e, i;
+      this.five.scene.add(this.group), (i = (e = this.five.getElement()) == null ? void 0 : e.parentElement) == null || i.appendChild(this.tagWrapper), this.five.needsRender = !0, this.items.forEach((r) => {
+        r.state.enabled || r.enable();
+      }), this.onFiveModeChange(this.five.getCurrentState().mode), this.onFiveEveryReady(), this.five.on("modeChange", this.onFiveModeChange), this.fiveEveryReadyListenerDisposer = ue(this.five, this.onFiveEveryReady);
     });
     h(this, "handleDisable", () => {
-      this.five.scene.remove(this.group), this.tagWrapper.remove(), this.five.needsRender = !0, this.five.off("modeChange", this.onFiveModeChange), this.fiveEveryReadyListenerDisposer();
+      this.items.forEach((e) => {
+        e.state.enabled && e.disable();
+      }), this.five.scene.remove(this.group), this.tagWrapper.remove(), this.five.needsRender = !0, this.five.off("modeChange", this.onFiveModeChange), this.fiveEveryReadyListenerDisposer();
     });
-    h(this, "onFiveEveryReady", () => w(this, null, function* () {
+    h(this, "onFiveEveryReady", () => W(this, null, function* () {
       if (this.five.state.mode === "Panorama")
         return;
-      const e = this.items.filter((t) => t instanceof T).map((t) => t.tag), s = e.filter((t) => t.position && t.visible && t.enabled);
-      yield N(0);
-      const a = this.five.camera.position.clone(), i = s.sort((t, r) => a.distanceTo(t.position) - a.distanceTo(r.position)), n = [], o = (t, r) => !(t.right < r.left || t.left > r.right || t.bottom < r.top || t.top > r.bottom);
-      e.forEach((t) => {
-        t.visibles[2] = void 0;
-      }), i.forEach((t) => {
-        if (t.visibles[1] === !1)
+      const e = this.items.filter((s) => s instanceof Q).map((s) => s.tag), i = e.filter((s) => s.position && s.visible && s.enabled);
+      yield ge(0);
+      const r = this.five.camera.position.clone(), t = i.sort((s, o) => r.distanceTo(s.position) - r.distanceTo(o.position)), n = [], a = (s, o) => !(s.right < o.left || s.left > o.right || s.bottom < o.top || s.top > o.bottom);
+      e.forEach((s) => {
+        s.visibles[2] = void 0;
+      }), t.forEach((s) => {
+        if (s.visibles[1] === !1)
           return;
-        const r = t.container.getElementsByClassName("room-label-item__text")[0];
-        if (!r)
+        const o = s.container.getElementsByClassName("room-label-item__text")[0];
+        if (!o)
           return;
-        const c = r.getBoundingClientRect();
-        n.every((m) => !o(m.boundingClientRect, c)) ? (n.push({ tag: t, boundingClientRect: c }), t.visibles[2] = !0) : t.visibles[2] = !1, t.needsRender = !0;
+        const m = o.getBoundingClientRect();
+        n.every((g) => !a(g.boundingClientRect, m)) ? (n.push({ tag: s, boundingClientRect: m }), s.visibles[2] = !0) : s.visibles[2] = !1, s.needsRender = !0;
       });
     }));
     h(this, "updateTagRenderer", () => {
       this.items.forEach((e) => {
-        var a;
-        const s = (a = this.tagRendererMap[e.type]) != null ? a : B[e.type];
-        s && e.__renderer !== s && (e.__renderer = s, typeof e.__disposeRenderer == "function" && e.__disposeRenderer(), e.tag.container.innerHTML = "", e.__disposeRenderer = s(e.tag.container, e, this.five));
+        var r;
+        const i = (r = this.tagRendererMap[e.type]) != null ? r : me[e.type];
+        i && e.__renderer !== i && (e.__renderer = i, typeof e.__disposeRenderer == "function" && e.__disposeRenderer(), e.tag.container.innerHTML = "", e.__disposeRenderer = i(e.tag.container, e, this.five));
       });
     });
-    this.group.name = "ModelMakerPluginGroup", this.state = { enabled: !0, visible: !0 }, this.occlusionVisibility = (a = s == null ? void 0 : s.occlusionVisibility) != null ? a : !1, this.occlusionMode = (i = s == null ? void 0 : s.occlusionMode) != null ? i : "translucence", this.fiveDomEvents = new O(e, { noEmitWhenHide: !0, noEmitWhenNotInScene: !0 }), this.tagWrapper = (() => {
-      var o;
+    this.group.name = "ModelMakerPluginGroup", this.state = { enabled: !0, visible: !0 }, this.occlusionVisibility = (r = i == null ? void 0 : i.occlusionVisibility) != null ? r : !1, this.occlusionMode = (t = i == null ? void 0 : i.occlusionMode) != null ? t : "translucence", this.fiveDomEvents = new ce(e, { noEmitWhenHide: !0, noEmitWhenNotInScene: !0 }), this.tagWrapper = (() => {
+      var a;
       const n = document.createElement("div");
-      return n.style.position = "absolute", n.style.top = "0", n.style.left = "0", n.style.width = "100%", n.style.height = "100%", n.style.pointerEvents = "none", n.style.zIndex = `${(o = s == null ? void 0 : s.tagContainerZIndex) != null ? o : ""}`, n;
-    })(), e.scene.add(this.group), this.handleEnable(), window.__MODELMAKER_DEBUG__ = this;
+      return n.style.position = "absolute", n.style.top = "0", n.style.left = "0", n.style.width = "100%", n.style.height = "100%", n.style.pointerEvents = "none", n.style.zIndex = `${(a = i == null ? void 0 : i.tagContainerZIndex) != null ? a : ""}`, n;
+    })(), this.injectEdgeTagCSS(), e.scene.add(this.group), this.handleEnable(), window.__MODELMAKER_DEBUG__ = this;
   }
   load(e) {
-    return w(this, null, function* () {
-      var a;
-      if (this.clear(), this.data = e, yield A(this.five), this.data !== e)
+    return W(this, null, function* () {
+      var r;
+      if (this.clear(), this.data = e, yield pe(this.five), this.data !== e)
         return;
       this.clear();
-      const s = (i) => {
-        var r;
-        const n = i.object_data.color ? new d.Color().setHex(parseInt(i.object_data.color.slice(1), 16)) : new d.Color(1, 1, 1);
-        let o = typeof this.occlusionVisibility == "boolean" ? this.occlusionVisibility : !1, t = this.occlusionMode;
-        return i.type === "triangles" && (o = !0, t = "depthTest"), {
+      const i = (t) => {
+        var b;
+        const n = t.object_data.color ? new p.Color().setHex(parseInt(t.object_data.color.slice(1), 16)) : new p.Color(1, 1, 1);
+        let a = typeof this.occlusionVisibility == "boolean" ? this.occlusionVisibility : !1, s = this.occlusionMode;
+        t.type === "triangles" && (a = !0, s = "depthTest");
+        let o = 1, m = ((b = t.object_data.opacity) != null ? b : 0.8) / 2;
+        return t.type === "box" && (o = 0.5, m = 0.2), {
           color: n,
           lineColor: n,
-          opacity: ((r = i.object_data.opacity) != null ? r : 0.4) / 2,
-          lineOpacity: 1,
+          opacity: m,
+          lineOpacity: o,
           lineWidth: 1,
-          occlusionVisibility: o,
-          occlusionMode: t
+          occlusionVisibility: a,
+          occlusionMode: s
         };
       };
-      (a = e == null ? void 0 : e.list) == null || a.forEach((i) => {
-        var n;
-        if (i.type === "triangles") {
-          const o = new H();
-          v(i.id) && (o.uuid = i.id.toString()), o.setPoints(i.object_data.points, { checkLinesIntersect: !1 }), o.setStyle(s(i)), this.fiveDomEvents.addEventListener(o, "hover", () => o.highlight()), this.fiveDomEvents.addEventListener(o, "unHover", () => o.unhighlight());
-          const t = new z({
+      (r = e == null ? void 0 : e.list) == null || r.forEach((t) => {
+        var n, a, s;
+        if (t.type === "triangles") {
+          const o = new de();
+          B(t.id) && (o.uuid = t.id.toString()), o.setPoints(t.object_data.points, { checkLinesIntersect: !1 }), o.setStyle(i(t)), this.fiveDomEvents.addEventListener(o, "hover", () => o.highlight()), this.fiveDomEvents.addEventListener(o, "unHover", () => o.unhighlight());
+          const m = new fe({
             five: this.five,
             tagWrapper: this.tagWrapper,
             model: o,
             group: this.group,
-            type: i.type,
-            rawData: i,
+            type: t.type,
+            rawData: t,
             fiveDomEvents: this.fiveDomEvents
           });
-          this.items.push(t);
-        } else if (i.type === "prism") {
-          const o = new I();
-          v(i.id) && (o.uuid = i.id.toString()), this.zFightingOffset += Q.Z_FIGHTING_OFFSET;
-          const t = i.object_data.points.map((m) => {
-            var g;
-            return [m[0], m[1] + ((g = i.object_data.fixedY) != null ? g : 0), m[2]];
+          this.items.push(m);
+        } else if (t.type === "prism") {
+          const o = new $();
+          B(t.id) && (o.uuid = t.id.toString()), this.zFightingOffset += ve.Z_FIGHTING_OFFSET;
+          const m = t.object_data.points.map((M) => {
+            var f;
+            return [M[0], M[1] + ((f = t.object_data.fixedY) != null ? f : 0), M[2]];
           });
-          t.push(t[0]);
-          const r = i.object_data.height + ((n = i.object_data.fixedHeight) != null ? n : 0) + this.zFightingOffset, c = L(t[0]).add(new d.Vector3().setY(r));
-          o.setPoints({ points: t, heightPoint: c }), o.setStyle(s(i));
-          const u = new T({
+          m.push(m[0]);
+          const b = t.object_data.height + ((n = t.object_data.fixedHeight) != null ? n : 0) + this.zFightingOffset, g = le(m[0]).add(new p.Vector3().setY(b));
+          o.setPoints({ points: m, heightPoint: g }), o.setStyle(i(t));
+          const x = new Q({
             five: this.five,
             tagWrapper: this.tagWrapper,
             model: o,
             group: this.group,
-            type: i.type,
-            rawData: i,
+            type: t.type,
+            rawData: t,
             fiveDomEvents: this.fiveDomEvents
           });
-          this.items.push(u);
-        } else if (i.type === "box") {
-          const o = new I();
-          v(i.id) && (o.uuid = i.id.toString());
-          const { start: t, end: r, rotation: c = [0, 0, 0, 0] } = i.object_data, u = new d.Vector3().fromArray(t), m = new d.Vector3().fromArray(r), g = new d.Euler().fromArray(c), R = new d.Quaternion().setFromEuler(g), M = R.clone().inverse(), _ = new d.Vector3().lerpVectors(u, m, 0.5), C = _.clone().negate(), x = u.clone().add(C).applyQuaternion(M), V = m.clone().add(C).applyQuaternion(M), f = new d.Box3(x.clone().max(V), x.clone().min(V));
+          this.items.push(x);
+        } else if (t.type === "box") {
+          const o = new $();
+          B(t.id) && (o.uuid = t.id.toString());
+          const { start: m, end: b, rotation: g = [0, 0, 0, 0] } = t.object_data, x = new p.Vector3().fromArray(m), M = new p.Vector3().fromArray(b), f = new p.Euler().fromArray(g), _ = new p.Quaternion().setFromEuler(f), C = _.clone().invert(), P = new p.Vector3().lerpVectors(x, M, 0.5), w = P.clone().negate(), v = x.clone().add(w).applyQuaternion(C), D = M.clone().add(w).applyQuaternion(C), I = new p.Box3(v.clone().max(D), v.clone().min(D));
           o.setPoints({
-            points: [y(f, 2), y(f, 3), y(f, 7), y(f, 6)],
-            heightPoint: y(f, 1)
-          }), o.position.copy(_), o.quaternion.copy(R), o.setStyle(s(i));
-          const W = new j({
+            points: [y(I, 2), y(I, 3), y(I, 7), y(I, 6)],
+            heightPoint: y(I, 1)
+          }), o.position.copy(P), o.quaternion.copy(_), o.setStyle(i(t));
+          const A = ((a = t.extend) == null ? void 0 : a.index) !== void 0 ? this.five.work.observers[t.extend.index].position : null, d = A ? ye(L(o), o, A, [0, 1, 4, 5]) : y(L(o), (s = t.object_data.positionIndex) != null ? s : 5), E = (T) => ({
+            0: [1, 3, 4],
+            1: [0, 2, 5],
+            2: [1, 3, 6],
+            3: [0, 2, 7],
+            4: [0, 5, 7],
+            5: [1, 4, 6],
+            6: [2, 5, 7],
+            7: [3, 4, 6]
+          })[T] || [], u = L(o);
+          let R = 5;
+          for (let T = 0; T < 8; T++)
+            if (y(u, T).distanceTo(d) < 1e-3) {
+              R = T;
+              break;
+            }
+          const U = E(R), O = [];
+          U.forEach((T, j) => {
+            const z = y(u, T), Z = d.distanceTo(z), H = be(Z);
+            if (!H)
+              return;
+            const K = new p.Vector3().lerpVectors(d, z, 0.5).clone().applyMatrix4(o.matrixWorld), S = new he(this.five);
+            S.setPosition(K), S.container.innerHTML = `
+            <div class="model-maker-edge-tag">
+              ${H}
+            </div>
+          `, S.container.style.transform = "translate(-50%, -100%)", S.hide(), O.push(S);
+          });
+          const Y = new ae({
             five: this.five,
             tagWrapper: this.tagWrapper,
             model: o,
             group: this.group,
-            type: i.type,
-            rawData: i,
-            fiveDomEvents: this.fiveDomEvents
+            type: t.type,
+            rawData: t,
+            fiveDomEvents: this.fiveDomEvents,
+            position: d,
+            edgeTags: O
           });
-          this.items.push(W);
+          this.items.push(Y);
         }
       }), this.state.enabled ? this.handleEnable() : this.handleDisable(), this.state.visible ? this.handleShow() : this.handleHide(), this.updateTagRenderer(), this.hooks.emit("dataLoaded", e), this.five.needsRender = !0;
     });
   }
   setState(e) {
-    v(e.enabled) && this.state.enabled !== e.enabled && (this.state.enabled = e.enabled, e.enabled ? this.handleEnable() : this.handleDisable(), this.hooks.emit(e.enabled ? "enable" : "disable", { userAction: "我不知道捏" }), this.hooks.emit("stateChange", { state: this.state, userAction: "我不知道捏" })), v(e.visible) && this.state.visible !== e.visible && (this.state.visible = e.visible, e.visible ? this.handleShow() : this.handleHide(), this.hooks.emit(e.visible ? "show" : "hide", { userAction: "我不知道捏" }), this.hooks.emit("stateChange", { state: this.state, userAction: "我不知道捏" }));
+    B(e.enabled) && this.state.enabled !== e.enabled && (this.state.enabled = e.enabled, e.enabled ? this.handleEnable() : this.handleDisable(), this.hooks.emit(e.enabled ? "enable" : "disable", { userAction: "我不知道捏" }), this.hooks.emit("stateChange", { state: this.state, userAction: "我不知道捏" })), B(e.visible) && this.state.visible !== e.visible && (this.state.visible = e.visible, e.visible ? this.handleShow() : this.handleHide(), this.hooks.emit(e.visible ? "show" : "hide", { userAction: "我不知道捏" }), this.hooks.emit("stateChange", { state: this.state, userAction: "我不知道捏" }));
   }
   getItemById(e) {
-    return this.items.find((s) => s.rawData.id === e);
+    return this.items.find((i) => i.rawData.id === e);
   }
   registerTagRenderer(e) {
-    this.tagRendererMap = E(E({}, this.tagRendererMap), e), this.updateTagRenderer();
+    this.tagRendererMap = k(k({}, this.tagRendererMap), e), this.updateTagRenderer();
   }
   hasCustomTagRenderer(e) {
     return !!this.tagRendererMap[e];
   }
+  /**
+   * Shows a specific item's tag and ensures all other tags are hidden
+   * @param id The ID of the item whose tag should be shown
+   * @returns The item if found and showed, otherwise null
+   */
+  showItemTag(e) {
+    const i = this.getItemById(e);
+    return i ? (this.five.currentMode === "Panorama" && this.hideAllItemTags(), i.tag.visible || (i.tag.show({ force: !0 }), i.type === "box" && "edgeTags" in i && i.edgeTags.forEach((r) => r.show({ force: !0 }))), this.five.needsRender = !0, i) : (console.warn(`Item with ID ${e} not found`), null);
+  }
+  /**
+   * Hides all item tags
+   * @param options Optional configuration for hiding tags
+   * @param options.excludeId Optional ID of an item whose tag should remain visible
+   */
+  hideAllItemTags(e) {
+    this.items.forEach((i) => {
+      i.tag && i.tag.visible && i.rawData.id !== (e == null ? void 0 : e.excludeId) && (i.tag.hide(), i.type === "box" && "edgeTags" in i && i.edgeTags.forEach((r) => r.hide()));
+    }), this.five.needsRender = !0;
+  }
+  /**
+   * Force finish all active box animations immediately
+   * @param id Optional box item ID. If not provided, finishes all active box animations.
+   */
+  forceFinishBoxAnimation(e) {
+    (e ? [e] : Array.from(this.activeAnimations.keys())).forEach((r) => {
+      const t = this.activeAnimations.get(r);
+      if (t) {
+        t.remove(), t.animatedBoxMesh.visible = !1;
+        const a = this.getItemById(r);
+        a && a.type === "box" && this.showBoxFinalState(a.model), this.activeAnimations.delete(r);
+      }
+      const n = this.activeEaseInAnimations.get(r);
+      n && (clearInterval(n.interval), this.showBoxFinalState(n.model), this.activeEaseInAnimations.delete(r));
+    }), this.five.needsRender = !0;
+  }
+  /**
+   * Play the up-and-down animation for a box mesh
+   * @param id Optional box item ID. If not provided, plays animation for all box items.
+   * @returns Promise that resolves when all animations are complete
+   */
+  playBoxAnimation(e) {
+    this.activeAnimations.size > 0 && this.forceFinishBoxAnimation();
+    const i = e ? [this.getItemById(e)].filter(Boolean) : this.items.filter((t) => t.type === "box");
+    if (i.length === 0)
+      return console.warn("No box items found to animate"), Promise.resolve();
+    const r = i.map((t) => {
+      if (!t || t.type !== "box")
+        return Promise.resolve();
+      const n = t.model;
+      return new Promise((a) => {
+        if (n && n.isBox && typeof n.isBox == "function" && n.isBox()) {
+          n.prismMesh.visible = !1, n.edgeMesh.visible = !1;
+          const s = new p.Vector3(1 / 0, 1 / 0, 1 / 0), o = new p.Vector3(-1 / 0, -1 / 0, -1 / 0), m = n.bottomPositions;
+          for (const d of m)
+            s.min(d), o.max(d);
+          const b = n.topPositions;
+          for (const d of b)
+            s.min(d), o.max(d);
+          const g = o.clone().sub(s), x = new p.BoxGeometry(g.x, g.y, g.z), M = V(new p.Color(77 / 255, 240 / 255, 1)), f = V(new p.Vector3().copy(g)), _ = V(0.8), C = V(0.5), P = V(0.5), w = new oe({
+            depthTest: !1,
+            side: p.DoubleSide,
+            transparent: !0
+          });
+          w.colorNode = M, w.opacityNode = se(() => {
+            const d = G().x, E = G().y, u = ne(0.1).add(d.mul(d).add(E.mul(E)).sqrt().mul(0.3)).toVar();
+            q(f.y.mul(E).lessThan(3e-3).or(f.y.mul(E.oneMinus()).lessThan(3e-3)), () => {
+              u.addAssign(d.sub(0.5).abs().mul(2).oneMinus().mul(0.8));
+            }), q(f.x.mul(d).lessThan(3e-3).or(f.x.mul(d.oneMinus()).lessThan(3e-3)), () => {
+              u.addAssign(E.sub(0.5).abs().mul(2).oneMinus().mul(0.8));
+            });
+            const R = re.add(f.div(2)).div(f);
+            return u.mulAssign(R.y.sub(C).abs().div(P).oneMinus().clamp(0, 1).pow(2)), u.mul(_).clamp(0, 1);
+          })(), w.polygonOffset = !0, w.polygonOffsetFactor = 1, w.polygonOffsetUnits = 1;
+          const v = new p.Mesh(x, w);
+          v.position.copy(n.localCenter), v.position.applyMatrix4(n.matrixWorld), v.quaternion.copy(n.quaternion), v.onBeforeRender = () => {
+            x.boundingBox || x.computeBoundingBox();
+            const d = x.boundingBox.getSize(new p.Vector3());
+            f.value.copy(d), this.five.needsRender = !0;
+          };
+          const D = 3e3;
+          let I = 0;
+          const A = te.shared.add((d, E) => {
+            I += E;
+            let u = I / D;
+            u > 1 && (u = 1);
+            let R = Math.abs((u - 0.5) * 2);
+            R = R * 2 - 0.5, C.value = R, u === 1 && (A(), v.visible = !1, this.playEaseInAnimation(n, () => {
+              this.activeAnimations.delete(t.rawData.id), a();
+            })), this.five.needsRender = !0;
+          });
+          this.activeAnimations.set(t.rawData.id, { animatedBoxMesh: v, remove: A }), this.five.scene.add(v);
+        } else
+          a();
+      });
+    });
+    return Promise.all(r).then(() => {
+    });
+  }
   enable() {
     this.setState({ enabled: !0 });
   }
@@ -286,7 +432,9 @@ class Lt extends P {
     this.setState({ visible: !1 });
   }
   clear() {
-    this.zFightingOffset = 0, this.handleDisable(), this.group.children.length = 0, this.five.needsRender = !0, this.items = [], this.tagWrapper.innerHTML = "", this.fiveDomEvents.clear();
+    this.zFightingOffset = 0, this.items.forEach((e) => {
+      e.state.enabled && e.disable();
+    }), this.handleDisable(), this.group.children.length = 0, this.five.needsRender = !0, this.items = [], this.tagWrapper.innerHTML = "", this.fiveDomEvents.clear();
   }
   dispose() {
     this.hooks.emit("dispose"), this.clear();
@@ -294,13 +442,60 @@ class Lt extends P {
   onWorkCodeChange() {
     this.group.matrix.copy(this.workUtil.transform.clone()), this.group.matrix.decompose(this.group.position, this.group.quaternion, this.group.scale), this.group.updateMatrixWorld();
   }
+  playEaseInAnimation(e, i) {
+    e.prismMesh.visible = !0, e.edgeMesh.visible = !0;
+    let r = 0;
+    const t = e.prismMesh.style.opacity;
+    e.prismMesh.setStyle({ opacity: 0 }), e.edgeMesh.setStyle({ lineOpacity: 0 });
+    const n = this.items.find((s) => s.model === e);
+    if (!n) {
+      console.warn("Could not find item for model in playEaseInAnimation");
+      return;
+    }
+    const a = setInterval(() => {
+      r === 61 && (clearInterval(a), this.activeEaseInAnimations.delete(n.rawData.id), this.showBoxFinalState(e), i()), e.edgeMesh.setStyle({ lineOpacity: r / 60 }), e.prismMesh.setStyle({ opacity: r / 60 * t }), this.five.needsRender = !0, r++;
+    }, 16);
+    this.activeEaseInAnimations.set(n.rawData.id, { interval: a, model: e });
+  }
   handleShow() {
-    this.group.visible = !0, this.tagWrapper.style.display = "block", this.five.needsRender = !0;
+    this.group.visible = !0, this.tagWrapper.style.display = "block", this.items.forEach((e) => {
+      e.show();
+    }), this.five.needsRender = !0;
   }
   handleHide() {
-    this.group.visible = !1, this.tagWrapper.style.display = "none", this.five.needsRender = !0;
+    this.group.visible = !1, this.tagWrapper.style.display = "none", this.items.forEach((e) => {
+      e.hide();
+    }), this.five.needsRender = !0;
+  }
+  /**
+   * Shows a box model in its final state (fully visible with full opacity)
+   * @param model The PrismMesh model to show
+   */
+  showBoxFinalState(e) {
+    e.prismMesh.visible = !0, e.edgeMesh.visible = !0, e.prismMesh.setStyle({ opacity: e.prismMesh.style.opacity }), e.edgeMesh.setStyle({ lineOpacity: 1 });
+  }
+  /**
+   * Inject CSS styles for edge tags
+   */
+  injectEdgeTagCSS() {
+    if (!document.getElementById("model-maker-edge-tag-style")) {
+      const e = document.createElement("style");
+      e.id = "model-maker-edge-tag-style", e.textContent = `
+        .model-maker-edge-tag {
+          color: white;
+          font-size: 14px;
+          font-weight: 500;
+          white-space: nowrap;
+          pointer-events: none;
+          text-align: center;
+          line-height: 1;
+          display: inline-block;
+          min-width: 30px;
+        }
+      `, document.head.appendChild(e);
+    }
   }
 }
 export {
-  Lt as Controller
+  ci as Controller
 };

package/libs/ModelMakerPlugin/index.d.ts

@@ -1,9 +1,7 @@
 import type * as ModelMakerPluginType from './typings';
-import { Controller } from './Controller';
-export declare const ModelMakerPlugin: (five: import("@realsee/five").Five, config?: {
-    tagContainerZIndex?: number;
-    occlusionVisibility?: boolean | import("@realsee/five").Mode[];
-    occlusionMode?: "depthTest" | "translucence";
-}) => ModelMakerPluginType.ModelMakerController;
+import type { Five } from '@realsee/five-webgpu';
+import { Controller, type ModelMakerPluginConfig } from './Controller';
+export declare const ModelMakerPlugin: (five: Five, config?: ModelMakerPluginConfig) => Controller;
 export type { Controller as ModelMakerPluginInstance };
 export type { ModelMakerPluginType };
+export type { ModelMakerPluginConfig };