@realsee/dnalogel 3.78.0-alpha.0 → 3.78.0-alpha.2

package/libs/PanoTagPlugin/controller/index.d.ts

@@ -28,8 +28,13 @@ declare class PanoTagPluginController extends TagRender {
     load(data: Tags): Promise<void>;
     /**
      * @description 添加标签
+     * @param tag 标签或标签数组
+     * @param options 可选配置
+     * @param options.updateMaskUrl 是否更新 mask。若为 true 且该 panoIndex 已有 Mask 标签，仅更新其 maskUrl（不变 color、style），并添加新标签
      */
-    addTag(tag: Tag | Tag[]): Promise<void>;
+    addTag(tag: Tag | Tag[], options?: {
+        updateMaskUrl?: boolean;
+    }): Promise<void>;
     /**
      * @description 改变配置
      */
@@ -103,6 +108,19 @@ declare class PanoTagPluginController extends TagRender {
      * @description 改变tag任意属性
      */
     changeTagById<C extends TagContentType = TagContentType>(id: TagId, tag: PartialObjectDeep<Tag<C>>, deepMerge?: boolean): void;
+    /**
+     * @description 批量更新指定点位的 Mask 图
+     * @param maskUpdates 包含点位索引和对应 mask 的数组
+     * @example
+     * changeMask([
+     *   { index: 0, mask: 'https://example.com/mask1.png' },
+     *   { index: 1, mask: canvasElement }
+     * ])
+     */
+    changeMask(maskUpdates: Array<{
+        index: number;
+        mask: string | HTMLCanvasElement;
+    }>): void;
     /**
      * @description 销毁tag
      */
@@ -189,7 +207,7 @@ declare class PanoTagPluginController extends TagRender {
             totalRefCount: number;
             estimatedMemoryMB: number;
             cacheEntries: {
-                url: string;
+                source: string;
                 refCount: number;
                 sizeMB: number;
             }[];

package/libs/PanoTagPlugin/controller/index.js

@@ -1,41 +1,41 @@
-var w = Object.defineProperty, _ = Object.defineProperties;
-var I = Object.getOwnPropertyDescriptors;
-var k = Object.getOwnPropertySymbols;
+var w = Object.defineProperty, F = Object.defineProperties;
+var _ = Object.getOwnPropertyDescriptors;
+var S = Object.getOwnPropertySymbols;
 var L = Object.prototype.hasOwnProperty, B = Object.prototype.propertyIsEnumerable;
-var c = (h, p, e) => p in h ? w(h, p, { enumerable: !0, configurable: !0, writable: !0, value: e }) : h[p] = e, d = (h, p) => {
+var b = (l, p, e) => p in l ? w(l, p, { enumerable: !0, configurable: !0, writable: !0, value: e }) : l[p] = e, g = (l, p) => {
   for (var e in p || (p = {}))
-    L.call(p, e) && c(h, e, p[e]);
-  if (k)
-    for (var e of k(p))
-      B.call(p, e) && c(h, e, p[e]);
-  return h;
-}, u = (h, p) => _(h, I(p));
-var m = (h, p, e) => (c(h, typeof p != "symbol" ? p + "" : p, e), e);
-var l = (h, p, e) => new Promise((t, i) => {
-  var o = (r) => {
+    L.call(p, e) && b(l, e, p[e]);
+  if (S)
+    for (var e of S(p))
+      B.call(p, e) && b(l, e, p[e]);
+  return l;
+}, C = (l, p) => F(l, _(p));
+var m = (l, p, e) => (b(l, typeof p != "symbol" ? p + "" : p, e), e);
+var d = (l, p, e) => new Promise((t, i) => {
+  var o = (s) => {
     try {
-      n(e.next(r));
-    } catch (a) {
-      i(a);
+      a(e.next(s));
+    } catch (r) {
+      i(r);
     }
-  }, s = (r) => {
+  }, n = (s) => {
     try {
-      n(e.throw(r));
-    } catch (a) {
-      i(a);
+      a(e.throw(s));
+    } catch (r) {
+      i(r);
     }
-  }, n = (r) => r.done ? t(r.value) : Promise.resolve(r.value).then(o, s);
-  n((e = e.apply(h, p)).next());
+  }, a = (s) => s.done ? t(s.value) : Promise.resolve(s.value).then(o, n);
+  a((e = e.apply(l, p)).next());
 });
-import * as v from "three";
-import { objectAssignDeepExports as f } from "../../vendor/object-assign-deep/objectAssignDeep.js";
-import { arrayPositionToVector3 as T } from "../../shared-utils/positionToVector3.js";
-import { isModelTag as G, isMediaModelTag as O } from "../utils/tag/tagCheck.js";
+import * as P from "three";
+import { objectAssignDeepExports as v } from "../../vendor/object-assign-deep/objectAssignDeep.js";
+import { arrayPositionToVector3 as k } from "../../shared-utils/positionToVector3.js";
+import { isModelTag as R, isMediaModelTag as G } from "../utils/tag/tagCheck.js";
 import { debounce as D } from "../utils/debounce.js";
-import { throttle as R } from "../utils/throttle.js";
-import N, { getTagStickType as V } from "../utils/tag/format.js";
-import { generateBlankAudio as x, AudioNamespace as z } from "../../shared-utils/audio.js";
-import { resizeObserver as E } from "../../shared-utils/dom/resizeObserver.js";
+import { throttle as O } from "../utils/throttle.js";
+import x, { getTagStickType as N } from "../utils/tag/format.js";
+import { generateBlankAudio as V, AudioNamespace as z } from "../../shared-utils/audio.js";
+import { resizeObserver as M } from "../../shared-utils/dom/resizeObserver.js";
 import { TagRender as $ } from "./TagRender.js";
 import "../../shared-utils/tag.js";
 import { isModelLike as A } from "../../shared-utils/five/mode.js";
@@ -55,13 +55,13 @@ import "../../vendor/earcut/src/earcut.js";
 import { nextFrame as H } from "../../shared-utils/animationFrame/index.js";
 import "../../shared-utils/five/FivePuppet.js";
 import { DebugUtil as W } from "../utils/DebugUtil.js";
-import { safeObj as M } from "../../shared-utils/safeObj.js";
+import { safeObj as E } from "../../shared-utils/safeObj.js";
 import { PointTag as q } from "./Tag/PointTag.js";
 import { ModelTag as J } from "./Tag/ModelTag.js";
 import { PlaneTag as Z } from "./Tag/PlaneTag.js";
 import { BoxTag as Y } from "./Tag/BoxTag.js";
 import { PolygonTag as K } from "./Tag/PolygonTag.js";
-import { MaskTag as y } from "./Tag/MaskTag.js";
+import { MaskTag as c } from "./Tag/MaskTag.js";
 import X from "../Components/TagContainer.js";
 import { fiveEveryReadyListener as ee } from "../../shared-utils/five/fiveEveryReadyListener.js";
 import { vector3ToArray as U } from "../../shared-utils/three/vector3ToArray.js";
@@ -334,8 +334,8 @@ import "../Components/Common/TagPopover/TagPopoverToolBar.js";
 import "../Components/Common/TagPopover/ArrowRightIcon.js";
 import "../Components/Common/TagPopover/ShareIcon.js";
 import "../utils/popoverContainer.js";
-const F = "Dnalogel-PanoTagPlugin", Vs = (h) => `${F}--${h}`;
-class xs extends $ {
+const I = "Dnalogel-PanoTagPlugin", Ns = (l) => `${I}--${l}`;
+class Vs extends $ {
   constructor(e, t) {
     super(e);
     /** state */
@@ -346,9 +346,9 @@ class xs extends $ {
     /** 全局 hover 启用状态，默认 true */
     m(this, "globalHoverEnabled", !0);
     /** 更改 tag 模型 */
-    m(this, "changeTagModel", (e, t) => l(this, null, function* () {
+    m(this, "changeTagModel", (e, t) => d(this, null, function* () {
       var i;
-      e.data = f({}, e.data, t), yield (i = e.loadModel) == null ? void 0 : i.call(e);
+      e.data = v({}, e.data, t), yield (i = e.loadModel) == null ? void 0 : i.call(e);
     }));
     m(this, "handleFiveModeChange", (e) => {
       const t = () => {
@@ -356,7 +356,7 @@ class xs extends $ {
           i.state.visible = !1, i.applyVisible();
         }), this.five.ready().then(() => {
           this.tagsDo(this.tags, (i) => {
-            i.updateVisible(), O(i) && e !== "Panorama" && this.changeTagMode(i, "behind");
+            i.updateVisible(), G(i) && e !== "Panorama" && this.changeTagMode(i, "behind");
           }), e === "Panorama" ? this.updateMaskTagsForCurrentPano() : this.filterMaskTag.forEach((i) => {
             i.state.visible = !1, i.applyVisible();
           });
@@ -384,26 +384,26 @@ class xs extends $ {
         this.five.off("render.prepare", this.handleFiveCameraUpdate);
       }, 1e3);
     });
-    m(this, "handleFivePanoArrived", () => l(this, null, function* () {
+    m(this, "handleFivePanoArrived", () => d(this, null, function* () {
       this.filter2DPointTag.forEach((e) => {
         e.state.visible = !1, e.applyVisible();
       }), this.tagsDo(this.tags, (e) => {
         e.updateVisible();
-      }), this.updateMaskTagsForCurrentPano(), this.temporaryState.visible = !0, this.addRenderQueue({ type: "TagContainerSvelte", keys: ["temporaryState"] }), yield this.setUnfolded(), this.tags.filter(G).filter((e) => {
+      }), this.updateMaskTagsForCurrentPano(), this.temporaryState.visible = !0, this.addRenderQueue({ type: "TagContainerSvelte", keys: ["temporaryState"] }), yield this.setUnfolded(), this.tags.filter(R).filter((e) => {
         var t;
         return (t = e.getConfig().modelConfig) == null ? void 0 : t.autoLookAtEnabled;
       }).forEach((e) => {
-        var a;
-        const t = new v.Mesh(new v.BoxGeometry(), new v.MeshBasicMaterial()), i = (a = e.model) == null ? void 0 : a.object;
+        var r;
+        const t = new P.Mesh(new P.BoxGeometry(), new P.MeshBasicMaterial()), i = (r = e.model) == null ? void 0 : r.object;
         if (!i)
           return;
         t.position.copy(i.position), t.quaternion.copy(i.quaternion);
         const o = this.five.camera.position;
         t.lookAt(o.clone().setY(t.position.y));
-        const s = i.quaternion.clone(), n = t.quaternion.clone(), r = te();
-        r.onUpdate(({ progress: g }) => {
-          i.quaternion.copy(s.clone().slerp(n, g));
-        }), r.play();
+        const n = i.quaternion.clone(), a = t.quaternion.clone(), s = te();
+        s.onUpdate(({ progress: h }) => {
+          i.quaternion.copy(n.clone().slerp(a, h));
+        }), s.play();
       });
     }));
     /** 楼层切换时，需要更新标签可见性 */
@@ -420,9 +420,9 @@ class xs extends $ {
       this.renderQueue.forEach((e, t) => {
         const { keys: i } = e;
         if (t === "TagContainerSvelte") {
-          const s = this.filterPointTag.filter((r) => r.screenPosition), n = {
+          const n = this.filterPointTag.filter((s) => s.screenPosition), a = {
             hooks: this.hooks,
-            tags: s,
+            tags: n,
             state: this.state,
             temporaryState: this.temporaryState,
             mediaStore: this.mediaStore,
@@ -431,30 +431,30 @@ class xs extends $ {
             zIndex: this.params.containerZIndex
           };
           if (this.TagContainerSvelte) {
-            let r = {};
+            let s = {};
             if (i.length === 0)
-              r = n;
+              s = a;
             else
-              for (const a of i)
-                r[a] = n[a];
-            this.TagContainerSvelte.$set(r);
+              for (const r of i)
+                s[r] = a[r];
+            this.TagContainerSvelte.$set(s);
           } else {
             if (!this.container)
               return console.error("updateRenderPlaneTag: tag2DContainer not found");
             this.TagContainerSvelte = new X({
               target: this.container,
-              props: u(d({}, n), { state: u(d({}, this.state), { enabled: !1 }) })
+              props: C(g({}, a), { state: C(g({}, this.state), { enabled: !1 }) })
             }), H(() => {
-              var r;
-              (r = this.TagContainerSvelte) == null || r.$set({ state: this.state });
+              var s;
+              (s = this.TagContainerSvelte) == null || s.$set({ state: this.state });
             });
           }
         }
       }), this.renderQueue.clear();
     });
-    this.params = f({}, { debug: !1, config: this.config }, d({}, t)), this.debug = this.params.debug, this.config = this.params.config, this.debug && this.debugUtil.bindLog(), x(1, { namespace: z.PlayAudio });
+    this.params = v({}, { debug: !1, config: this.config }, g({}, t)), this.debug = this.params.debug, this.config = this.params.config, this.debug && this.debugUtil.bindLog(), V(1, { namespace: z.PlayAudio });
     try {
-      Array.isArray(window.__PANOTAGPLUGIN_DEBUG_LIST__) || (window.__PANOTAGPLUGIN_DEBUG_LIST__ = []), this.NAME = F + "-" + window.__PANOTAGPLUGIN_DEBUG_LIST__.length, window.__PANOTAGPLUGIN_DEBUG_LIST__.push(this), window.__PANOTAGPLUGIN_DEBUG__ || Object.defineProperty(window, "__PANOTAGPLUGIN_DEBUG__", {
+      Array.isArray(window.__PANOTAGPLUGIN_DEBUG_LIST__) || (window.__PANOTAGPLUGIN_DEBUG_LIST__ = []), this.NAME = I + "-" + window.__PANOTAGPLUGIN_DEBUG_LIST__.length, window.__PANOTAGPLUGIN_DEBUG_LIST__.push(this), window.__PANOTAGPLUGIN_DEBUG__ || Object.defineProperty(window, "__PANOTAGPLUGIN_DEBUG__", {
         get: function() {
           return window.__PANOTAGPLUGIN_DEBUG_LIST__.sort((i, o) => o.tags.length - i.tags.length)[0];
         }
@@ -463,39 +463,39 @@ class xs extends $ {
     }
   }
   appendTo(e) {
-    var i, o, s;
+    var i, o, n;
     this.container = e;
     const t = (o = (i = this.TagContainerSvelte) == null ? void 0 : i.$$) == null ? void 0 : o.root;
-    t && t !== this.container && ((s = this.TagContainerSvelte) == null || s.$destroy(), this.TagContainerSvelte = void 0);
+    t && t !== this.container && ((n = this.TagContainerSvelte) == null || n.$destroy(), this.TagContainerSvelte = void 0);
   }
   /**
    * @description 加载数据
    */
   load(e) {
-    return l(this, null, function* () {
-      var o, s;
-      this.clearTags();
+    return d(this, null, function* () {
+      var o, n;
+      c.clearSharedMeshRegistry(), this.clearTags();
       try {
         console.debug(this.NAME, " load:", { data: JSON.parse(JSON.stringify(e)) });
-      } catch (n) {
+      } catch (a) {
       }
       const t = Q(this.five);
-      e.tagList.forEach((n) => {
-        if (n.enu_position && this.isValidArrayPosition(n.enu_position))
+      e.tagList.forEach((a) => {
+        if (a.enu_position && this.isValidArrayPosition(a.enu_position))
           try {
-            const r = T(n.enu_position), a = t.viewLayers[0].scene.enuToWorld(r);
-            n.position = U(a);
-          } catch (r) {
+            const s = k(a.enu_position), r = t.viewLayers[0].scene.enuToWorld(s);
+            a.position = U(r);
+          } catch (s) {
           }
-        if (n.enu_normal && this.isValidArrayPosition(n.enu_normal))
+        if (a.enu_normal && this.isValidArrayPosition(a.enu_normal))
           try {
-            const r = T(n.enu_normal), a = t.viewLayers[0].scene.enuToWorld(r);
-            n.normal = U(a);
-          } catch (r) {
+            const s = k(a.enu_normal), r = t.viewLayers[0].scene.enuToWorld(s);
+            a.normal = U(r);
+          } catch (s) {
           }
-      }), this.config = f({}, this.config, {
+      }), this.config = v({}, this.config, {
         globalConfig: (o = e.globalConfig) != null ? o : {},
-        contentTypeConfig: (s = e.contentTypeConfig) != null ? s : {}
+        contentTypeConfig: (n = e.contentTypeConfig) != null ? n : {}
       });
       const i = yield this.addTag(e.tagList);
       return this.five.state.mode === "Panorama" && this.updateMaskTagsForCurrentPano(), this.hooks.emit("loaded"), i;
@@ -503,17 +503,29 @@ class xs extends $ {
   }
   /**
    * @description 添加标签
+   * @param tag 标签或标签数组
+   * @param options 可选配置
+   * @param options.updateMaskUrl 是否更新 mask。若为 true 且该 panoIndex 已有 Mask 标签，仅更新其 maskUrl（不变 color、style），并添加新标签
    */
-  addTag(e) {
-    return l(this, null, function* () {
-      const o = (Array.isArray(e) ? e : [e]).filter((s) => s.stickType === "3DBox" || s.stickType === "Mask" || s.position).map((s) => {
-        const n = V(s);
-        return n === "2DPoint" || n === "3DPoint" ? new q(this, s) : n === "Model" ? new J(this, s) : n === "Plane" ? new Z(this, s) : n === "3DBox" ? new Y(this, s) : n === "Polygon" ? new K(this, s) : n === "Mask" ? new y(this, s) : null;
+  addTag(e, t) {
+    return d(this, null, function* () {
+      var a, s;
+      const o = (Array.isArray(e) ? e : [e]).filter((r) => r.stickType === "3DBox" || r.stickType === "Mask" || r.position);
+      if (t != null && t.updateMaskUrl && o.length === 1 && o[0].stickType === "Mask") {
+        const r = o[0], h = (a = r.maskUrl) != null ? a : r.mask, f = (s = r.fiveState) == null ? void 0 : s.panoIndex;
+        h && typeof f == "number" && this.tags.filter((u) => {
+          var T;
+          return u instanceof c && ((T = u.fiveState) == null ? void 0 : T.panoIndex) === f;
+        }).forEach((u) => u.set({ mask: h }));
+      }
+      const n = o.map((r) => {
+        const h = N(r);
+        return h === "2DPoint" || h === "3DPoint" ? new q(this, r) : h === "Model" ? new J(this, r) : h === "Plane" ? new Z(this, r) : h === "3DBox" ? new Y(this, r) : h === "Polygon" ? new K(this, r) : h === "Mask" ? new c(this, r) : null;
       });
-      return o.forEach((s) => N(s)), this.tags.push(...o), this.tagsLengthWillUpdate = !0, j(this.five).then(() => l(this, null, function* () {
-        var s, n;
-        this.store.eventListenerDisposer && ((n = (s = this.store).eventListenerDisposer) == null || n.call(s)), this.state.enabled && this.handleEnable(), this.addResizeListener(), this.clearUnusedPanelTag(), this.tagsDo(o, (r) => {
-          this.tags.includes(r) && (r.updateVisible(), r.updateZIndex());
+      return n.forEach((r) => x(r)), this.tags.push(...n), this.tagsLengthWillUpdate = !0, j(this.five).then(() => d(this, null, function* () {
+        var r, h;
+        this.store.eventListenerDisposer && ((h = (r = this.store).eventListenerDisposer) == null || h.call(r)), this.state.enabled && this.handleEnable(), this.addResizeListener(), this.clearUnusedPanelTag(), this.tagsDo(n, (f) => {
+          this.tags.includes(f) && (f.updateVisible(), f.updateZIndex());
         }), this.setUnfolded(), this.addRenderQueue({ type: "TagContainerSvelte" }), this.hooks.emit("tagsLengthChange");
       }));
     });
@@ -522,7 +534,7 @@ class xs extends $ {
    * @description 改变配置
    */
   changeConfig(e, t = !0) {
-    t ? this.config = f({}, this.config, e) : this.config = e, this.tags.forEach((i) => {
+    t ? this.config = v({}, this.config, e) : this.config = e, this.tags.forEach((i) => {
       i.updateConfig();
     }), this.tagsDo(this.tags, (i) => i.updateVisible());
   }
@@ -530,7 +542,7 @@ class xs extends $ {
    * @description 改变全局配置
    */
   changeGlobalConfig(e, t = !0) {
-    t ? this.config.globalConfig = f({}, this.config.globalConfig, e) : this.config.globalConfig = e, this.tags.forEach((i) => {
+    t ? this.config.globalConfig = v({}, this.config.globalConfig, e) : this.config.globalConfig = e, this.tags.forEach((i) => {
       i.updateConfig();
     }), this.tagsDo(this.tags, (i) => {
       i.updateVisible();
@@ -540,14 +552,14 @@ class xs extends $ {
    * @description 改变类型配置
    */
   changeContentTypeConfig(e, t, i = !0) {
-    this.config.contentTypeConfig || (this.config.contentTypeConfig = {}), i ? this.config.contentTypeConfig[e] = f({}, this.config.contentTypeConfig[e], t) : this.config.contentTypeConfig[e] = t, this.tags.forEach((o) => {
+    this.config.contentTypeConfig || (this.config.contentTypeConfig = {}), i ? this.config.contentTypeConfig[e] = v({}, this.config.contentTypeConfig[e], t) : this.config.contentTypeConfig[e] = t, this.tags.forEach((o) => {
       o.updateConfig();
     }), this.tagsDo(this.tags, (o) => {
       o.updateVisible();
     });
   }
   show(e) {
-    return l(this, null, function* () {
+    return d(this, null, function* () {
       if (this.checkDisposed())
         return;
       const { userAction: t = !0 } = e != null ? e : {};
@@ -555,7 +567,7 @@ class xs extends $ {
     });
   }
   hide(e) {
-    return l(this, null, function* () {
+    return d(this, null, function* () {
       if (this.checkDisposed())
         return;
       const { userAction: t = !0 } = e != null ? e : {};
@@ -577,21 +589,21 @@ class xs extends $ {
   setState(e, t) {
     if (this.checkDisposed())
       return;
-    const { userAction: i = !0 } = t != null ? t : {}, o = d({}, this.state);
+    const { userAction: i = !0 } = t != null ? t : {}, o = g({}, this.state);
     this.state = Object.assign(this.state, e), o.visible !== this.state.visible && (e.visible ? this.handleShow() : this.handleHide()), o.enabled !== this.state.enabled && (e.enabled ? this.handleEnable() : this.handleDisable()), this.hooks.emit("stateChange", { state: this.state, prevState: o, userAction: i });
   }
   /**
    * @description 销毁
    */
   dispose() {
-    var e, t, i, o, s, n;
-    this.pauseCurrentMedia(), this.disposeAllCSS3DContainer(), (e = this.TagContainerSvelte) == null || e.$destroy(), this.filterCSS3DTag.forEach((r) => {
-      var a;
-      return (a = r.tag3DContentSvelte) == null ? void 0 : a.svelteApp.$destroy();
-    }), this.tags.forEach((r) => {
-      var a;
-      (a = r.rectanglePlane) == null || a.editor.disable(), r.cache.clear();
-    }), this.tags = [], this.tagsLengthWillUpdate = !0, this.hooks.emit("tagsLengthChange"), (t = this.store.disposers) == null || t.forEach((r) => r == null ? void 0 : r()), this.store.disposers = [], (o = (i = this.store).eventListenerDisposer) == null || o.call(i), this.store.eventListenerDisposer = void 0, (n = (s = this.store).resizeObserverDisposer) == null || n.call(s), this.store.resizeObserverDisposer = void 0, this.store.resizeObserverDisposerAdding = !1, this.five.scene.remove(this.group), this.group.remove(...this.group.children), this.gltfObjectGroup.remove(...this.gltfObjectGroup.children), this.imagePlaneGroup.remove(...this.imagePlaneGroup.children), this.five.needsRender = !0, this.store.disposed = !0, this.hooks.emit("dispose");
+    var e, t, i, o, n, a;
+    this.pauseCurrentMedia(), this.disposeAllCSS3DContainer(), (e = this.TagContainerSvelte) == null || e.$destroy(), this.filterCSS3DTag.forEach((s) => {
+      var r;
+      return (r = s.tag3DContentSvelte) == null ? void 0 : r.svelteApp.$destroy();
+    }), this.tags.forEach((s) => {
+      var r;
+      (r = s.rectanglePlane) == null || r.editor.disable(), s.cache.clear();
+    }), this.tags = [], this.tagsLengthWillUpdate = !0, this.hooks.emit("tagsLengthChange"), (t = this.store.disposers) == null || t.forEach((s) => s == null ? void 0 : s()), this.store.disposers = [], (o = (i = this.store).eventListenerDisposer) == null || o.call(i), this.store.eventListenerDisposer = void 0, (a = (n = this.store).resizeObserverDisposer) == null || a.call(n), this.store.resizeObserverDisposer = void 0, this.store.resizeObserverDisposerAdding = !1, this.five.scene.remove(this.group), this.group.remove(...this.group.children), this.gltfObjectGroup.remove(...this.gltfObjectGroup.children), this.imagePlaneGroup.remove(...this.imagePlaneGroup.children), this.five.needsRender = !0, this.store.disposed = !0, this.hooks.emit("dispose");
   }
   /**
    * @description 闪烁标签
@@ -599,7 +611,7 @@ class xs extends $ {
    * @param {Partial<anime.AnimeParams>} animeConfig
    */
   blinkTagById(e, t) {
-    return l(this, null, function* () {
+    return d(this, null, function* () {
       var i;
       return (i = this.getTagById(e)) == null ? void 0 : i.blink(t);
     });
@@ -630,7 +642,7 @@ class xs extends $ {
    */
   changeTagNormalById(e, t) {
     const i = this.getTagById(e);
-    i && i.tag3DContentSvelte && (i.tag3DContentSvelte.currentNormal = T(t));
+    i && i.tag3DContentSvelte && (i.tag3DContentSvelte.currentNormal = k(t));
   }
   /**
    * @description 改变data
@@ -660,12 +672,48 @@ class xs extends $ {
     if (o) {
       if (t.stickType && t.stickType !== o.stickType) {
         console.log(`[PanoTagPlugin] stickType changed from ${o.stickType} to ${t.stickType}, recreating tag`);
-        const s = d({}, o);
-        this.destroyTagById(e), this.addTag(d(d({}, s), t));
+        const n = g({}, o);
+        this.destroyTagById(e), this.addTag(g(g({}, n), t));
         return;
       }
-      o.set(t), o.updateVisible(), this.clearUnusedPanelTag(), o.hooks.emit("dataChanged", o.data);
+      o.set(t), o instanceof c && o.updateMaskStyle(), o.updateVisible(), this.clearUnusedPanelTag(), o.hooks.emit("dataChanged", o.data);
+    }
+  }
+  /**
+   * @description 批量更新指定点位的 Mask 图
+   * @param maskUpdates 包含点位索引和对应 mask 的数组
+   * @example
+   * changeMask([
+   *   { index: 0, mask: 'https://example.com/mask1.png' },
+   *   { index: 1, mask: canvasElement }
+   * ])
+   */
+  changeMask(e) {
+    if (!Array.isArray(e) || e.length === 0) {
+      console.warn("[PanoTagPlugin] changeMask: invalid or empty maskUpdates");
+      return;
     }
+    e.forEach(({ index: t, mask: i }) => {
+      if (typeof t != "number") {
+        console.warn("[PanoTagPlugin] changeMask: invalid index", t);
+        return;
+      }
+      if (!i) {
+        console.warn("[PanoTagPlugin] changeMask: invalid mask for index", t);
+        return;
+      }
+      const o = this.tags.filter((n) => {
+        var a;
+        return n instanceof c && ((a = n.fiveState) == null ? void 0 : a.panoIndex) === t;
+      });
+      if (o.length === 0) {
+        console.debug(`[PanoTagPlugin] changeMask: no MaskTag found at panoIndex ${t}`);
+        return;
+      }
+      o.forEach((n) => {
+        n.set({ mask: i }), console.log(`[PanoTagPlugin] Updated mask for tag ${n.id} at panoIndex ${t}`);
+      });
+    }), this.five.needsRender = !0;
   }
   /**
    * @description 销毁tag
@@ -688,15 +736,15 @@ class xs extends $ {
   clearTags() {
     var e;
     this.tags.length && (this.tags.forEach((t) => {
-      var i, o, s, n, r, a, g, b, C, P, S;
-      (i = t.tag3DContentSvelte) == null || i.dispose(), (s = (o = t.mediaPlane) == null ? void 0 : o.parent) == null || s.remove(t.mediaPlane), (a = (r = (n = t.model) == null ? void 0 : n.object) == null ? void 0 : r.parent) == null || a.remove(t.model.object), (b = (g = t.rectanglePlane) == null ? void 0 : g.parent) == null || b.remove(t.rectanglePlane), (C = t.boxShape) != null && C.parent && t.boxShape.parent.remove(t.boxShape), (S = (P = t.polygonShape) == null ? void 0 : P.parent) == null || S.remove(t.polygonShape), t != null && t.tagNormalLine && (t == null || t.removeTagNormalLine());
+      var i, o, n, a, s, r, h, f, y, u, T;
+      (i = t.tag3DContentSvelte) == null || i.dispose(), (n = (o = t.mediaPlane) == null ? void 0 : o.parent) == null || n.remove(t.mediaPlane), (r = (s = (a = t.model) == null ? void 0 : a.object) == null ? void 0 : s.parent) == null || r.remove(t.model.object), (f = (h = t.rectanglePlane) == null ? void 0 : h.parent) == null || f.remove(t.rectanglePlane), (y = t.boxShape) != null && y.parent && t.boxShape.parent.remove(t.boxShape), (T = (u = t.polygonShape) == null ? void 0 : u.parent) == null || T.remove(t.polygonShape), t != null && t.tagNormalLine && (t == null || t.removeTagNormalLine()), t instanceof c && t.dispose();
     }), this.tags = [], this.tagsLengthWillUpdate = !0, this.hooks.emit("tagsLengthChange"), (e = this.TagContainerSvelte) == null || e.$destroy(), this.TagContainerSvelte = void 0, this.disposeAllCSS3DContainer()), this.enabledModelTagSet.clear(), this.cache.clear();
   }
   /**
    * @description 设置 unfolded
    */
   setUnfolded() {
-    return l(this, null, function* () {
+    return d(this, null, function* () {
       return new Promise((e) => {
         setTimeout(() => {
           this.setUnfoldedByCamera(), e();
@@ -716,8 +764,8 @@ class xs extends $ {
   handleDisable() {
     var e, t, i;
     this.pauseCurrentMedia(), this.tags.forEach((o) => {
-      var s;
-      return (s = o.rectanglePlane) == null ? void 0 : s.delete();
+      var n;
+      return (n = o.rectanglePlane) == null ? void 0 : n.delete();
     }), this.state.enabled = !1, (t = (e = this.store).eventListenerDisposer) == null || t.call(e), this.five.scene.remove(this.group), (i = this.TagContainerSvelte) == null || i.$set({ tags: [] }), this.five.needsRender = !0;
   }
   addResizeListener() {
@@ -732,20 +780,20 @@ class xs extends $ {
     if (this.store.disposed)
       return;
     const e = this.five.getElement(), t = () => {
-      this.state.enabled && (this.filterPointTag.forEach((a) => a.updateScreenPosition({ force: !0 })), this.temporaryState.visible = !0, this.addRenderQueue({ type: "TagContainerSvelte", keys: ["temporaryState"] }));
+      this.state.enabled && (this.filterPointTag.forEach((r) => r.updateScreenPosition({ force: !0 })), this.temporaryState.visible = !0, this.addRenderQueue({ type: "TagContainerSvelte", keys: ["temporaryState"] }));
     }, i = () => {
       this.state.enabled && (this.temporaryState.visible = !1, this.addRenderQueue({ type: "TagContainerSvelte", keys: ["temporaryState"] }));
-    }, { observe: o, unobserve: s } = E(
-      R(() => {
+    }, { observe: o, unobserve: n } = M(
+      O(() => {
         this.store.resizeObserverDisposer && i();
       }, 500),
       e
-    ), { observe: n, unobserve: r } = E(
+    ), { observe: a, unobserve: s } = M(
       D(() => t(), 400),
       e
     );
-    return o(), n(), () => {
-      s(), r();
+    return o(), a(), () => {
+      n(), s();
     };
   }
   setUnfoldedByCamera() {
@@ -755,13 +803,13 @@ class xs extends $ {
       if (t.state && i !== void 0) {
         if (i === !0 && t.screenPosition) {
           const o = t.getConfig().unfoldedConfig;
-          M(o).keep !== "unfolded" && (e = !0);
+          E(o).keep !== "unfolded" && (e = !0);
         }
         t.state.unfolded = i;
       }
     }), e && this.filterPointTag.forEach((t) => {
       const i = t.getConfig().unfoldedConfig;
-      typeof i == "object" && (i.autoUnfold || i.autoUnfold === !1 || M(i.autoUnfold).enable === !1 || i.keep) || t.state && (t.state.unfolded = !1);
+      typeof i == "object" && (i.autoUnfold || i.autoUnfold === !1 || E(i.autoUnfold).enable === !1 || i.keep) || t.state && (t.state.unfolded = !1);
     });
   }
   changeTagMode(e, t) {
@@ -846,7 +894,7 @@ class xs extends $ {
    * @returns 性能统计信息
    */
   getMaskTagPerformanceStats() {
-    const e = y.getCacheStats(), t = this.filterMaskTag.length, i = this.filterMaskTag.filter((o) => o.visible).length;
+    const e = c.getCacheStats(), t = this.filterMaskTag.length, i = this.filterMaskTag.filter((o) => o.visible).length;
     return {
       // 标签统计
       totalMaskTags: t,
@@ -862,11 +910,11 @@ class xs extends $ {
    * 注意：这会释放所有纹理缓存，谨慎使用
    */
   clearMaskTagCache() {
-    y.clearAllCache();
+    c.clearAllCache();
   }
 }
 export {
-  xs as PanoTagPluginController,
-  xs as default,
-  Vs as pluginFlag
+  Vs as PanoTagPluginController,
+  Vs as default,
+  Ns as pluginFlag
 };

package/libs/PanoTagPlugin/typings/tag/Tag.d.ts

@@ -57,8 +57,8 @@ export type Tag<C extends TagContentType = TagContentType, S extends StickType =
     matrix: number[];
 } : unknown) & // 模型标签需要模型
 (S extends 'Mask' ? {
-    mask: string;
-    color: [number, number, number] | number;
+    mask: string | HTMLCanvasElement;
+    color: [number, number, number] | number | string;
 } : unknown) & {
     [key: string]: any;
 };

package/libs/PanoTagPlugin/typings/tag/Utils.d.ts

@@ -107,8 +107,8 @@ export interface TagStyle {
     };
     /** Mask 标签样式 */
     mask?: {
-        /** 高亮颜色（RGB 数组或十六进制数字） */
-        color?: [number, number, number] | number;
+        /** 高亮颜色（支持 RGB 数组、十六进制数字、#FFFFFF 格式字符串） */
+        color?: [number, number, number] | number | string;
         /** 透明度 0-1，用于填充区域；描边区域始终完全不透明 */
         opacity?: number;
         /** 颜色匹配容差（归一化值 0-1，默认 0.001） */