@netless/appliance-plugin 1.1.40 → 1.1.42-beta.0

package/dist/{index-pyv2KvXa.mjs → index-C3e6mT0j.mjs}

@@ -1,9 +1,8 @@
-var E = Object.defineProperty;
-var B = (o, e, t) => e in o ? E(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var h = (o, e, t) => B(o, typeof e != "symbol" ? e + "" : e, t);
-import { E as I, a as d, b as C, c as y, d as M, O as x, V as N, S as A } from "./index-GpA_9BZu.mjs";
-import { isEqual as T, isString as V, clone as D, throttle as H } from "lodash";
-import "white-web-sdk";
+var F = Object.defineProperty;
+var E = (n, e, t) => e in n ? F(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var h = (n, e, t) => E(n, typeof e != "symbol" ? e + "" : e, t);
+import { E as T, a as d, b as L, c as k, d as M, g as b, O as A, V as N, S as x } from "./index-DJS3KHjE.mjs";
+import { isEqual as I, isString as V, clone as U, throttle as D } from "lodash";
 import "clipper-lib";
 import "lz-string";
 import "lineclip";
@@ -11,7 +10,6 @@ import "xss";
 import "rbush";
 import "react-dom";
 import "react";
-import { g as b } from "./markmap-runtime-Cg3OxuZ2.mjs";
 class R {
   constructor() {
     h(this, "threadEngine");
@@ -20,31 +18,31 @@ class R {
     return this.threadEngine = e, this;
   }
 }
-class U extends R {
+class H extends R {
   constructor() {
     super(...arguments);
-    h(this, "emitEventType", I.CopyNode);
+    h(this, "emitEventType", T.CopyNode);
   }
   async consume(t) {
-    const { msgType: s, dataType: a, emitEventType: r } = t;
-    if (s === d.FullWork && a === C.Local && r === this.emitEventType)
+    const { msgType: s, dataType: r, emitEventType: a } = t;
+    if (s === d.FullWork && r === L.Local && a === this.emitEventType)
       return this.consumeForLocalWorker(t), !0;
   }
   async consumeForLocalWorker(t) {
-    var a;
+    var r;
     const { workId: s } = t;
-    s && await ((a = this.threadEngine) == null ? void 0 : a.consumeFull(t));
+    s && await ((r = this.threadEngine) == null ? void 0 : r.consumeFull(t));
   }
 }
-class _ {
+class q {
   constructor(e) {
     h(this, "builders", /* @__PURE__ */ new Map());
     this.builders = new Map(e.map((t) => [t, this.build(t)]));
   }
   build(e) {
     switch (e) {
-      case I.CopyNode:
-        return new U();
+      case T.CopyNode:
+        return new H();
     }
   }
   registerForBackgroundThread(e) {
@@ -59,120 +57,120 @@ class _ {
     return !1;
   }
 }
-async function q(o) {
-  const e = o.querySelectorAll("img"), t = Array.from(e).map((r) => {
-    if (!r.crossOrigin && r.src && !r.src.startsWith("data:") && (r.crossOrigin = "anonymous", r.complete)) {
-      const i = r.src;
-      r.src = "", r.src = i;
+async function _(n) {
+  const e = n.querySelectorAll("img"), t = Array.from(e).map((a) => {
+    if (!a.crossOrigin && a.src && !a.src.startsWith("data:") && (a.crossOrigin = "anonymous", a.complete)) {
+      const i = a.src;
+      a.src = "", a.src = i;
     }
-    return r.complete && r.crossOrigin ? Promise.resolve() : new Promise((i) => {
-      r.onload = () => {
+    return a.complete && a.crossOrigin ? Promise.resolve() : new Promise((i) => {
+      a.onload = () => {
         i(void 0);
-      }, r.onerror = () => {
+      }, a.onerror = () => {
         i(void 0);
       };
     });
   });
-  return o.querySelectorAll("svg").forEach((r) => {
-    r.querySelectorAll("image").forEach((n) => {
-      n.href && !n.href.baseVal.startsWith("data:") && (n.getAttribute("crossorigin") || n.setAttribute("crossorigin", "anonymous"), t.push(
+  return n.querySelectorAll("svg").forEach((a) => {
+    a.querySelectorAll("image").forEach((o) => {
+      o.href && !o.href.baseVal.startsWith("data:") && (o.getAttribute("crossorigin") || o.setAttribute("crossorigin", "anonymous"), t.push(
         new Promise((c) => {
           const l = new Image();
           l.crossOrigin = "anonymous", l.onload = () => {
             c(void 0);
           }, l.onerror = () => {
             c(void 0);
-          }, l.src = n.href.baseVal;
+          }, l.src = o.href.baseVal;
         })
       ));
     });
   }), await Promise.all(t);
 }
-async function $(o) {
+async function $(n) {
   const s = Date.now();
-  let a = !1;
+  let r = !1;
   for (; Date.now() - s < 5e3; ) {
-    const r = o.querySelectorAll("path");
-    if (r.length > 0 && (a = Array.from(r).some((i) => {
-      const n = i.getAttribute("d") || "";
-      return n !== "M0,0C0,0,0,0,0,0" && n.length > 10;
-    }), a))
+    const a = n.querySelectorAll("path");
+    if (a.length > 0 && (r = Array.from(a).some((i) => {
+      const o = i.getAttribute("d") || "";
+      return o !== "M0,0C0,0,0,0,0,0" && o.length > 10;
+    }), r))
       break;
     await new Promise((i) => setTimeout(i, 50));
   }
 }
-async function z(o) {
-  const e = o.querySelectorAll("svg");
+async function z(n) {
+  const e = n.querySelectorAll("svg");
   if (!e.length)
     return;
   const t = [];
   for (let s = 0; s < e.length; s++) {
-    const a = e[s];
-    t.push($(a));
+    const r = e[s];
+    t.push($(r));
   }
   await Promise.all(t);
 }
-async function L(o) {
-  if (o.querySelectorAll("svg[data-type='mermaid']").length > 0) {
+async function P(n) {
+  if (n.querySelectorAll("svg[data-type='mermaid']").length > 0) {
     const s = Date.now();
-    let a = !1;
-    for (; Date.now() - s < 5e3 && !a; ) {
-      const r = o.querySelectorAll("foreignObject");
-      if (r.length > 0) {
+    let r = !1;
+    for (; Date.now() - s < 5e3 && !r; ) {
+      const a = n.querySelectorAll("foreignObject");
+      if (a.length > 0) {
         let i = !0;
-        for (const n of Array.from(r)) {
-          const c = parseFloat(n.getAttribute("width") || "0"), l = parseFloat(n.getAttribute("height") || "0");
-          if (n.querySelector(".mermaid-container") && (c < 50 || l < 50)) {
+        for (const o of Array.from(a)) {
+          const c = parseFloat(o.getAttribute("width") || "0"), l = parseFloat(o.getAttribute("height") || "0");
+          if (o.querySelector(".mermaid-container") && (c < 50 || l < 50)) {
             i = !1;
             break;
           }
         }
         if (i) {
-          a = !0;
+          r = !0;
           break;
         }
       } else
-        a = !0;
+        r = !0;
       await new Promise((i) => setTimeout(i, 50));
     }
   }
 }
-async function G(o, e = {}) {
-  const { width: t = o.offsetWidth, height: s = o.offsetHeight } = e, a = o.offsetWidth || t, r = o.offsetHeight || s;
+async function G(n, e = {}) {
+  const { width: t = n.offsetWidth, height: s = n.offsetHeight } = e, r = n.offsetWidth || t, a = n.offsetHeight || s;
   try {
-    const { loadSvgToImageLib: i, getSvgToImageLib: n } = await import("./svgToImageLoader-DZz5bAo4.mjs");
-    let c = n();
+    const { loadSvgToImageLib: i, getSvgToImageLib: o } = await import("./svgToImageLoader-DZz5bAo4.mjs");
+    let c = o();
     if (!c)
       try {
         c = await i();
       } catch (w) {
         return console.error("[loadSvgToImageLib] error: ", w), null;
       }
-    const l = o.style.width, m = o.style.height, k = o.style.display;
-    o.style.width || (o.style.width = `${a}px`), o.style.height || (o.style.height = `${r}px`), (!o.style.display || o.style.display === "none") && (o.style.display = "block");
+    const l = n.style.width, p = n.style.height, y = n.style.display;
+    n.style.width || (n.style.width = `${r}px`), n.style.height || (n.style.height = `${a}px`), (!n.style.display || n.style.display === "none") && (n.style.display = "block");
     try {
-      await new Promise((p) => {
+      await new Promise((m) => {
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
-            p();
+            m();
           });
         });
       });
-      const w = await c.toPng(o, {
-        width: a,
-        height: r,
+      const w = await c.toPng(n, {
+        width: r,
+        height: a,
         quality: 1
       });
-      return o.style.width = l, o.style.height = m, o.style.display = k, new Promise((p) => {
+      return n.style.width = l, n.style.height = p, n.style.display = y, new Promise((m) => {
         const u = new Image();
         u.crossOrigin = "anonymous", u.onload = () => {
-          p(u);
+          m(u);
         }, u.onerror = () => {
-          p(null);
+          m(null);
         }, u.src = w;
       });
     } catch (w) {
-      return o.style.width = l, o.style.height = m, o.style.display = k, console.error("[divToImageElement] error: ", w), null;
+      return n.style.width = l, n.style.height = p, n.style.display = y, console.error("[divToImageElement] error: ", w), null;
     }
   } catch (i) {
     return console.error("[divToImageElement] error: ", i), null;
@@ -180,7 +178,7 @@ async function G(o, e = {}) {
 }
 class X {
   constructor(e) {
-    h(this, "toolsType", y.BackgroundSVG);
+    h(this, "toolsType", k.BackgroundSVG);
     h(this, "vNodes");
     h(this, "workOptions");
     h(this, "workId");
@@ -188,8 +186,18 @@ class X {
     h(this, "isDestroyed", !1);
     h(this, "element");
     h(this, "manager");
-    const { vNodes: t, workId: s, toolsOpt: a, manager: r } = e;
-    this.workId = s, this.vNodes = t, this.workOptions = a, this.manager = r, this.element = this.createElement(), this.manager.fullLayer.appendChild(this.element), this.vNodes.setInfo(this.workId, {
+    h(this, "scenePath");
+    h(this, "trackBackgroundImageLoad");
+    h(this, "reloadSourceUrl");
+    const {
+      vNodes: t,
+      workId: s,
+      toolsOpt: r,
+      manager: a,
+      scenePath: i,
+      trackBackgroundImageLoad: o = !0
+    } = e;
+    this.workId = s, this.vNodes = t, this.workOptions = r, this.manager = a, this.scenePath = i, this.trackBackgroundImageLoad = o, this.element = this.createElement(), this.manager.fullLayer.appendChild(this.element), this.vNodes.setInfo(this.workId, {
       workShape: this
     });
   }
@@ -199,11 +207,6 @@ class X {
   get collector() {
     return this.manager.master.control.collector;
   }
-  get scenePath() {
-    return this.manager.master.control.viewContainerManager.getCurScenePath(
-      this.manager.viewId
-    );
-  }
   async init() {
     await this.render();
   }
@@ -216,12 +219,12 @@ class X {
     this.isDestroyed || !this.element || !this.element.parentNode || (this.updateElementPosition(e), await this.updateSvg(e));
   }
   isSameSize(e) {
-    const { width: t, height: s } = e, { width: a, height: r } = this.workOptions, i = t * this.manager.camera.scale, n = s * this.manager.camera.scale, c = a * this.manager.camera.scale, l = r * this.manager.camera.scale;
-    return i === c && n === l;
+    const { width: t, height: s } = e, { width: r, height: a } = this.workOptions, i = t * this.manager.camera.scale, o = s * this.manager.camera.scale, c = r * this.manager.camera.scale, l = a * this.manager.camera.scale;
+    return i === c && o === l;
   }
   isSamePosition(e) {
-    const { centerX: t, centerY: s } = e, { centerX: a, centerY: r } = this.workOptions, i = this.manager.getPagePoint(a, r), n = this.manager.getPagePoint(t, s);
-    return T(n, i);
+    const { centerX: t, centerY: s } = e, { centerX: r, centerY: a } = this.workOptions, i = this.manager.getPagePoint(r, a), o = this.manager.getPagePoint(t, s);
+    return I(o, i);
   }
   isSameZIndex(e) {
     const { zIndex: t } = e, { zIndex: s } = this.workOptions;
@@ -229,36 +232,36 @@ class X {
   }
   isSameState(e) {
     const { state: t } = e, { state: s } = this.workOptions;
-    return T(t, s);
+    return I(t, s);
   }
   isSameData(e) {
     const { data: t } = e, { data: s } = this.workOptions;
-    return T(t, s);
+    return I(t, s);
   }
   updateElementPosition(e) {
     if (this.isDestroyed || !this.element || !this.fullLayer)
       return;
-    const { centerX: t, centerY: s, width: a, height: r, zIndex: i } = this.workOptions, n = this.manager.getPagePoint(t, s), c = a * this.manager.camera.scale, l = r * this.manager.camera.scale;
-    (!e || e && !this.isSameSize(e)) && (this.element.setAttribute("width", `${c}`), this.element.setAttribute("height", `${l}`), this.element.style.width = `${c}px`, this.element.style.height = `${l}px`), (!e || e && !this.isSamePosition(e)) && (this.element.style.left = `${n.x}px`, this.element.style.top = `${n.y}px`), (!e || e && !this.isSameZIndex(e)) && (this.element.style.zIndex = (i || 0).toString());
+    const { centerX: t, centerY: s, width: r, height: a, zIndex: i } = this.workOptions, o = this.manager.getPagePoint(t, s), c = r * this.manager.camera.scale, l = a * this.manager.camera.scale;
+    (!e || e && !this.isSameSize(e)) && (this.element.setAttribute("width", `${c}`), this.element.setAttribute("height", `${l}`), this.element.style.width = `${c}px`, this.element.style.height = `${l}px`), (!e || e && !this.isSamePosition(e)) && (this.element.style.left = `${o.x}px`, this.element.style.top = `${o.y}px`), (!e || e && !this.isSameZIndex(e)) && (this.element.style.zIndex = (i || 0).toString());
   }
   async updateSvg(e) {
     const { type: t, state: s } = this.workOptions;
     if (t === M.markmap) {
-      const a = b(), { data: r } = this.workOptions;
-      if (this.markmapInstance || (this.markmapInstance = a.createMarkmap(
+      const r = b(), { data: a } = this.workOptions;
+      if (this.markmapInstance || (this.markmapInstance = r.createMarkmap(
         this.element,
         this.manager.markmapOptions
       ), this.markmapInstance.handleClick = async (c, l) => {
-        var w, p, u;
+        var w, m, u;
         (w = this.markmapInstance) == null || w.toggleNode(l);
-        const m = this.serializeData((p = this.markmapInstance) == null ? void 0 : p.state.data);
+        const p = this.serializeData((m = this.markmapInstance) == null ? void 0 : m.state.data);
         this.setWorkOptions(
           {
             ...this.workOptions,
-            state: m
+            state: p
           },
           !1
-        ), a.checkNodeHasMermaid(l) && await a.renderMermaidAfterDOMUpdate(
+        ), r.checkNodeHasMermaid(l) && await r.renderMermaidAfterDOMUpdate(
           this.element,
           this.workId
         ), this.scenePath && this.collector && ((u = this.collector) == null || u.dispatch({
@@ -271,11 +274,11 @@ class X {
         }));
       }), e && this.isSameState(e) && this.isSameSize(e) && this.isSameData(e))
         return;
-      const i = a.transform(this.workId, r);
-      let { root: n } = i;
-      r && a.hasMermaidCodeBlock(r) && (n = a.injectMermaidHtml(n, r, this.workId));
+      const i = r.transform(this.workId, a);
+      let { root: o } = i;
+      a && r.hasMermaidCodeBlock(a) && (o = r.injectMermaidHtml(o, a, this.workId));
       try {
-        s && Array.isArray(s) && this.transformState(s, n), await this.markmapInstance.setData(n), !this.isDestroyed && this.element && this.fullLayer && this.markmapInstance && (window.markmapInstance = this.markmapInstance, r && a.hasMermaidCodeBlock(r) && await a.renderMermaidAfterDOMUpdate(
+        s && Array.isArray(s) && this.transformState(s, o), await this.markmapInstance.setData(o), !this.isDestroyed && this.element && this.fullLayer && this.markmapInstance && (window.markmapInstance = this.markmapInstance, a && r.hasMermaidCodeBlock(a) && await r.renderMermaidAfterDOMUpdate(
           this.element,
           this.workId
         ), await this.fit(
@@ -285,19 +288,26 @@ class X {
         console.error("[updateSvg] error: ", c);
       }
     } else {
-      const { src: a, crossOrigin: r } = this.workOptions;
-      this.element.src = a, this.element.crossOrigin = V(r) ? r : "anonymous";
-      try {
-        await new Promise((i, n) => {
-          this.element.onload = () => {
-            i();
-          }, this.element.onerror = function() {
-            n();
-          };
+      const { src: r, crossOrigin: a } = this.workOptions, i = this.reloadSourceUrl ?? r;
+      if (this.element.crossOrigin = V(a) ? a : "anonymous", !this.trackBackgroundImageLoad) {
+        this.element.src = i, await new Promise((o, c) => {
+          this.element.onload = () => o(), this.element.onerror = () => c();
         });
-      } catch (i) {
-        console.error("[updateSvg] error: ", i);
+        return;
       }
+      await this.manager.master.control.backgroundImageLoadCoordinator.load({
+        viewId: this.manager.viewId,
+        scenePath: this.scenePath,
+        resourceId: this.workId,
+        src: i,
+        image: this.element,
+        isActive: () => !this.isDestroyed && this.manager.master.control.viewContainerManager.getCurScenePath(
+          this.manager.viewId
+        ) === this.scenePath,
+        onReloadUrl: (o) => {
+          this.reloadSourceUrl = o;
+        }
+      });
     }
   }
   async fit(e = !0) {
@@ -306,38 +316,42 @@ class X {
       const s = b();
       e && this.element && await s.waitForImagesInForeignObjects(
         this.element
-      ), await ((t = this.markmapInstance) == null ? void 0 : t.fit()), this.element && s.isSafari() && s.hasMermaidSvg(this.element) && (await L(this.element), await s.transformMermaidSvgToMarkmapSvg(
+      ), await ((t = this.markmapInstance) == null ? void 0 : t.fit()), this.element && s.isSafari() && s.hasMermaidSvg(this.element) && (await P(this.element), await s.transformMermaidSvgToMarkmapSvg(
         this.element
       ));
     }
   }
   serializeData(e) {
-    var a;
+    var r;
     const t = [e], s = [];
     for (; t.length > 0; ) {
-      const r = t.pop();
-      r && (r != null && r.children && t.push(...r.children), s.push(((a = r == null ? void 0 : r.payload) == null ? void 0 : a.fold) || 0));
+      const a = t.pop();
+      a && (a != null && a.children && t.push(...a.children), s.push(((r = a == null ? void 0 : a.payload) == null ? void 0 : r.fold) || 0));
     }
     return s;
   }
   transformState(e, t) {
     const s = [t];
     for (; s.length > 0; ) {
-      const a = s.pop();
-      a && (a != null && a.children && s.push(...a.children), a.payload ? a.payload.fold = e.shift() : e.shift());
+      const r = s.pop();
+      r && (r != null && r.children && s.push(...r.children), r.payload ? r.payload.fold = e.shift() : e.shift());
     }
   }
   async updateCamera() {
     this.updateElementPosition(), await this.fit(!1);
   }
   async setWorkOptions(e, t = !0) {
-    if (!T(this.workOptions, e)) {
-      const s = D(this.workOptions);
-      this.workOptions = e, t && await this.render(s);
+    if (!I(this.workOptions, e)) {
+      const s = U(this.workOptions), r = "src" in this.workOptions ? this.workOptions.src : void 0, a = "src" in e ? e.src : void 0;
+      r !== a && (this.reloadSourceUrl = void 0), this.workOptions = e, t && await this.render(s);
     }
   }
   destroy() {
-    this.isDestroyed = !0, this.element.remove();
+    this.isDestroyed = !0, this.reloadSourceUrl = void 0, this.trackBackgroundImageLoad && this.manager.master.control.backgroundImageLoadCoordinator.cancelResource(
+      this.manager.viewId,
+      this.scenePath,
+      this.workId
+    ), this.element.remove();
   }
   getRectFromLayer() {
     const e = this.element.getBoundingClientRect();
@@ -349,21 +363,21 @@ class X {
     };
   }
 }
-function W(o) {
-  const { toolsType: e, ...t } = o;
+function C(n) {
+  const { toolsType: e, ...t } = n;
   switch (e) {
-    case y.BackgroundSVG:
+    case k.BackgroundSVG:
       return new X(t);
     default:
       return;
   }
 }
-class F {
+class W {
   constructor(e) {
     h(this, "viewId");
     h(this, "fullLayer");
     h(this, "curNodeMap");
-    this.viewId = e, this.curNodeMap = new x();
+    this.viewId = e, this.curNodeMap = new A();
   }
   init(e) {
     this.fullLayer = e;
@@ -404,13 +418,13 @@ class Y {
     h(this, "master");
     h(this, "cameraOpt");
     h(this, "methodBuilder");
-    h(this, "updateCamera", H(async (e) => {
+    h(this, "updateCamera", D(async (e) => {
       const { cameraOpt: t } = e;
-      t && !T(this.cameraOpt, t) && await this.setCameraOpt(t);
+      t && !I(this.cameraOpt, t) && await this.setCameraOpt(t);
     }, 100));
-    this.viewId = e, this.opt = t, this.master = t.master, this.fullLayer = t.container, this.methodBuilder = new _([
-      I.CopyNode
-    ]).registerForBackgroundThread(this), this.vNodes = new F(e), this.vNodes.init(this.fullLayer);
+    this.viewId = e, this.opt = t, this.master = t.master, this.fullLayer = t.container, this.methodBuilder = new q([
+      T.CopyNode
+    ]).registerForBackgroundThread(this), this.vNodes = new W(e), this.vNodes.init(this.fullLayer);
   }
   get camera() {
     return this.cameraOpt || {
@@ -429,10 +443,10 @@ class Y {
     return this.master.control.pluginOptions.extras.markmap.options;
   }
   getPagePoint(e, t) {
-    const { scale: s, centerX: a, centerY: r, width: i, height: n } = this.camera;
+    const { scale: s, centerX: r, centerY: a, width: i, height: o } = this.camera;
     return {
-      x: (e - a) * s + i / 2,
-      y: (t - r) * s + n / 2
+      x: (e - r) * s + i / 2,
+      y: (t - a) * s + o / 2
     };
   }
   async setCameraOpt(e) {
@@ -446,36 +460,38 @@ class Y {
     this.vNodes.clear();
   }
   canUseFullLayer(e) {
-    return e === y.BackgroundSVG;
+    return e === k.BackgroundSVG;
   }
   async consumeFull(e) {
-    const { toolsType: t, opt: s, workId: a } = e;
-    if (a != null && a.toString() && t && this.canUseFullLayer(t))
+    const { toolsType: t, opt: s, workId: r, scenePath: a } = e;
+    if (r != null && r.toString() && t && this.canUseFullLayer(t))
       switch (t) {
-        case y.BackgroundSVG:
+        case k.BackgroundSVG:
           await this.setFullWork({
             toolsType: t,
             opt: s,
-            workId: a
+            workId: r,
+            scenePath: a
           });
           break;
       }
   }
   async setFullWork(e) {
-    const { workId: t, opt: s, toolsType: a } = e;
-    if (t && s && a) {
-      const r = t.toString();
-      let i;
-      const n = this.vNodes.get(r);
-      return !n || !n.workShape ? (i = this.createWorkShapeNode({
+    const { workId: t, opt: s, toolsType: r, scenePath: a } = e;
+    if (t && s && r && a) {
+      const i = t.toString();
+      let o;
+      const c = this.vNodes.get(i);
+      return !c || !c.workShape ? (o = this.createWorkShapeNode({
         toolsOpt: s,
-        toolsType: y.BackgroundSVG,
-        workId: r
-      }), i && await i.init()) : (i = n.workShape, await i.setWorkOptions(s)), i;
+        toolsType: k.BackgroundSVG,
+        workId: i,
+        scenePath: a
+      }), o && await o.init()) : (o = c.workShape, await o.setWorkOptions(s)), o;
     }
   }
   createWorkShapeNode(e) {
-    return W({
+    return C({
       ...e,
       vNodes: this.vNodes,
       manager: this
@@ -505,7 +521,7 @@ class Y {
           break;
         }
         case d.UpdateTools: {
-          this.toggleFullLayer(s === y.Clicker);
+          this.toggleFullLayer(s === k.Clicker);
           break;
         }
         case d.BackgroundSVGUpdate:
@@ -540,7 +556,7 @@ class j {
     h(this, "cameraOpt");
     h(this, "opt");
     h(this, "workShapes", /* @__PURE__ */ new Map());
-    this.viewId = e, this.opt = t, this.master = t.master, this.fullLayer = t.container, this.vNodes = new F(e), this.vNodes.init(this.fullLayer);
+    this.viewId = e, this.opt = t, this.master = t.master, this.fullLayer = t.container, this.vNodes = new W(e), this.vNodes.init(this.fullLayer);
   }
   get camera() {
     return this.cameraOpt || {
@@ -559,11 +575,11 @@ class j {
     return this.master.control.pluginOptions.extras.markmap.options;
   }
   createOffscreenCanvas(e) {
-    const { width: t, height: s } = e.canvasOpt, a = new OffscreenCanvas(
+    const { width: t, height: s } = e.canvasOpt, r = new OffscreenCanvas(
       e.canvasOpt.width,
       e.canvasOpt.height
     );
-    a.width = t, a.height = s;
+    r.width = t, r.height = s;
   }
   async setCameraOpt(e) {
     this.cameraOpt = e;
@@ -573,28 +589,29 @@ class j {
     }
   }
   getPagePoint(e, t) {
-    const { scale: s, centerX: a, centerY: r, width: i, height: n } = this.camera;
+    const { scale: s, centerX: r, centerY: a, width: i, height: o } = this.camera;
     return {
-      x: (e - a) * s + i / 2,
-      y: (t - r) * s + n / 2
+      x: (e - r) * s + i / 2,
+      y: (t - a) * s + o / 2
     };
   }
   async getSnapshot(e) {
-    const { scenePath: t, scenes: s, cameraOpt: a } = e;
-    if (t && s && a) {
-      await this.setCameraOpt(a);
-      for (const [r, i] of Object.entries(s))
-        if (i != null && i.type && (i == null ? void 0 : i.toolsType) === y.BackgroundSVG)
+    const { scenePath: t, scenes: s, cameraOpt: r } = e;
+    if (t && s && r) {
+      await this.setCameraOpt(r);
+      for (const [a, i] of Object.entries(s))
+        if (i != null && i.type && (i == null ? void 0 : i.toolsType) === k.BackgroundSVG)
           switch (i == null ? void 0 : i.type) {
             case d.UpdateNode:
             case d.FullWork: {
-              const { opt: n } = i, c = {
+              const { opt: o } = i, c = {
                 ...i,
-                opt: n,
-                workId: r,
+                opt: o,
+                workId: a,
                 msgType: d.FullWork,
-                dataType: C.Service,
-                viewId: this.viewId
+                dataType: L.Service,
+                viewId: this.viewId,
+                scenePath: t
               };
               await this.runFullWork(c);
               break;
@@ -602,22 +619,22 @@ class j {
           }
       try {
         if (t) {
-          await L(this.fullLayer), await q(this.fullLayer), await z(this.fullLayer);
-          const r = await G(this.fullLayer);
-          r && this.opt.post({
+          await P(this.fullLayer), await _(this.fullLayer), await z(this.fullLayer);
+          const a = await G(this.fullLayer);
+          a && this.opt.post({
             sp: [
               {
                 type: d.Snapshot,
                 scenePath: t,
-                imageElement: r,
+                imageElement: a,
                 viewId: this.viewId,
                 index: 1
               }
             ]
           });
         }
-      } catch (r) {
-        const i = r && r instanceof Error ? r.message : r == null ? void 0 : r.toString();
+      } catch (a) {
+        const i = a && a instanceof Error ? a.message : a == null ? void 0 : a.toString();
         this.opt.post({
           sp: [
             {
@@ -630,38 +647,41 @@ class j {
     }
   }
   createWorkShapeNode(e) {
-    return W({
+    return C({
       ...e,
       vNodes: this.vNodes,
-      manager: this
+      manager: this,
+      trackBackgroundImageLoad: !1
     });
   }
   async setFullWork(e) {
-    const { workId: t, opt: s, toolsType: a } = e;
-    if (t && s && a) {
-      const r = t.toString();
-      let i;
-      const n = this.vNodes.get(r);
-      return !n || !n.workShape ? (i = this.createWorkShapeNode({
+    const { workId: t, opt: s, toolsType: r, scenePath: a } = e;
+    if (t && s && r && a) {
+      const i = t.toString();
+      let o;
+      const c = this.vNodes.get(i);
+      return !c || !c.workShape ? (o = this.createWorkShapeNode({
         toolsOpt: s,
-        toolsType: y.BackgroundSVG,
-        workId: r
-      }), i && await i.init()) : (i = n.workShape, await i.setWorkOptions(s)), i;
+        toolsType: k.BackgroundSVG,
+        workId: i,
+        scenePath: a
+      }), o && await o.init()) : (o = c.workShape, await o.setWorkOptions(s)), o;
     }
   }
   async runFullWork(e) {
-    const { toolsType: t, opt: s, workId: a } = e;
+    const { toolsType: t, opt: s, workId: r, scenePath: a } = e;
     await this.setFullWork({
       toolsType: t,
       opt: s,
-      workId: a
+      workId: r,
+      scenePath: a
     });
   }
   destroy() {
     this.fullLayer.innerHTML = "", this.fullLayer.style.width = "", this.fullLayer.style.height = "";
   }
 }
-class he {
+class oe {
   constructor(e) {
     h(this, "backgroundThreadMap", /* @__PURE__ */ new Map());
     h(this, "snapshotThread");
@@ -679,14 +699,14 @@ class he {
     return new j(e, t);
   }
   async consume(e) {
-    var t, s, a, r, i, n;
+    var t, s, r, a, i, o;
     for (const c of e.values()) {
       const {
         msgType: l,
-        viewId: m,
-        layerOpt: k,
+        viewId: p,
+        layerOpt: y,
         offscreenCanvasOpt: w,
-        cameraOpt: p,
+        cameraOpt: m,
         tasksqueue: u
       } = c;
       if (l === d.Console) {
@@ -694,42 +714,42 @@ class he {
         continue;
       }
       if (l === d.Init) {
-        const g = (t = this.master.control.viewContainerManager.getView(m)) == null ? void 0 : t.displayer, v = (s = g == null ? void 0 : g.backgroundContainerRef) == null ? void 0 : s.current;
-        if (g && v && k && w) {
-          const f = this.backgroundThreadMap.get(m);
+        const g = (t = this.master.control.viewContainerManager.getView(p)) == null ? void 0 : t.displayer, v = (s = g == null ? void 0 : g.backgroundContainerRef) == null ? void 0 : s.current;
+        if (g && v && y && w) {
+          const f = this.backgroundThreadMap.get(p);
           f == null || f.destroy();
-          const S = this.createBackgroundThread(m, {
+          const S = this.createBackgroundThread(p, {
             displayer: g,
             container: v,
-            layerOpt: k,
+            layerOpt: y,
             master: this.master,
             canvasOpt: w,
             post: this.post
           });
-          this.backgroundThreadMap.set(m, S), S && p && await S.setCameraOpt(p);
+          this.backgroundThreadMap.set(p, S), S && m && await S.setCameraOpt(m);
         }
         continue;
       }
       if (l === d.Snapshot) {
-        const g = (a = this.master.control.viewContainerManager.getView(m)) == null ? void 0 : a.displayer, f = (i = ((r = this.master.control.viewContainerManager.mainView) == null ? void 0 : r.displayer).backgroundSnapshotContainerRef) == null ? void 0 : i.current;
-        if (g && f && p) {
-          (n = this.snapshotThread) == null || n.destroy(), f.style.width = `${p.width}px`, f.style.height = `${p.height}px`;
+        const g = (r = this.master.control.viewContainerManager.getView(p)) == null ? void 0 : r.displayer, f = (i = ((a = this.master.control.viewContainerManager.mainView) == null ? void 0 : a.displayer).backgroundSnapshotContainerRef) == null ? void 0 : i.current;
+        if (g && f && m) {
+          (o = this.snapshotThread) == null || o.destroy(), f.style.width = `${m.width}px`, f.style.height = `${m.height}px`;
           const S = {
             ...N.defaultLayerOpt,
             offscreen: !1,
-            width: p.width,
-            height: p.height
-          }, P = {
+            width: m.width,
+            height: m.height
+          }, B = {
             ...N.defaultScreenCanvasOpt,
-            width: p.width,
-            height: p.height
+            width: m.width,
+            height: m.height
           };
-          this.snapshotThread = this.createSnapshotThread(m, {
+          this.snapshotThread = this.createSnapshotThread(p, {
             displayer: g,
             container: f,
             layerOpt: S,
             master: this.master,
-            canvasOpt: P,
+            canvasOpt: B,
             post: this.post
           }), await this.snapshotThread.getSnapshot(c), this.snapshotThread.destroy(), this.snapshotThread = void 0;
           continue;
@@ -742,14 +762,14 @@ class he {
         }
         continue;
       }
-      if (m === A) {
+      if (p === x) {
         for (const g of this.backgroundThreadMap.values())
           await g.on(c);
         l === d.Destroy && this.backgroundThreadMap.clear();
         continue;
       }
-      const O = this.backgroundThreadMap.get(m);
-      O && (await O.on(c), l === d.Destroy && this.backgroundThreadMap.delete(m));
+      const O = this.backgroundThreadMap.get(p);
+      O && (await O.on(c), l === d.Destroy && this.backgroundThreadMap.delete(p));
     }
   }
   async consumeTargetOne(e, t) {
@@ -765,5 +785,5 @@ class he {
   }
 }
 export {
-  he as BackgroundThreadManagerImpl
+  oe as BackgroundThreadManagerImpl
 };