@celldl/viewer 0.20260731.3 → 0.20260801.0

package/dist/{WrappedViewer-tlnd1umH.js → WrappedViewer-BUx-WA2c.js}

@@ -11068,7 +11068,7 @@ class Ar {
   #n = 1 / 0;
   id;
   constructor(e = 0, t = -1 / 0, n = 1 / 0) {
-    this.#t = e, this.#o(t) <= this.#o(n) ? (this.#r = t, this.#n = n) : (this.#r = n, this.#n = t), this.id = Gf("V");
+    this.#t = e, this.#a(t) <= this.#a(n) ? (this.#r = t, this.#n = n) : (this.#r = n, this.#n = t), this.id = Gf("V");
   }
   clean() {
     this.#e = !1;
@@ -11080,10 +11080,10 @@ class Ar {
     return this.minimum === this.maximum;
   }
   get minimum() {
-    return this.#o(this.#r);
+    return this.#a(this.#r);
   }
   get maximum() {
-    return this.#o(this.#n);
+    return this.#a(this.#n);
   }
   get value() {
     return this.#t;
@@ -11091,7 +11091,7 @@ class Ar {
   set value(e) {
     this.#t !== e && (e < this.minimum ? e = this.minimum : e > this.maximum && (e = this.maximum), this.#t !== e && (this.#t = e, this.#e = !0));
   }
-  #o(e) {
+  #a(e) {
     return typeof e == "number" ? e : e.value;
   }
   copy() {
@@ -11102,7 +11102,7 @@ class Ar {
   }
   narrowRange(e, t) {
     let n = e, i = t;
-    this.#o(n) > this.#o(i) && (n = t, i = e), this.#o(n) > this.minimum && (this.#r = n), this.#o(i) < this.maximum && (this.#n = i);
+    this.#a(n) > this.#a(i) && (n = t, i = e), this.#a(n) > this.minimum && (this.#r = n), this.#a(i) < this.maximum && (this.#n = i);
   }
   reassignMaximum(e) {
     this.#n = e;
@@ -11198,8 +11198,8 @@ class ln {
   #t;
   #r;
   #n;
-  #o;
-  #s = null;
+  #a;
+  #i = null;
   constructor(e, t, n = null) {
     this.setCornerPositions(e, t), this.setCentroidOffset(n || new Te(0.5, 0.5));
   }
@@ -11213,7 +11213,7 @@ class ln {
     return this.#e.fixed && this.#t.fixed;
   }
   get svgElement() {
-    return this.#s;
+    return this.#i;
   }
   get topLeftPoint() {
     return this.#e.point;
@@ -11222,14 +11222,14 @@ class ln {
     this.#e.clean(), this.#t.clean();
   }
   copy() {
-    return new ln(this.#e, this.#t, this.#o);
+    return new ln(this.#e, this.#t, this.#a);
   }
   setCornerPositions(e, t) {
     let n = e.xValue, i = e.yValue, s = t.xValue, a = t.yValue;
     n.value > s.value && (n = t.xValue, s = e.xValue), i.value > a.value && (i = t.yValue, a = e.yValue), this.#e = new at(n, i), this.#t = new at(s, a), this.#r = Me.subtract(this.#t.point, this.#e.point);
   }
   setCentroidOffset(e) {
-    this.#o = e, this.#n = at.fromPoint(this.#r.scale(this.#o).add(this.#e.point));
+    this.#a = e, this.#n = at.fromPoint(this.#r.scale(this.#a).add(this.#e.point));
   }
   svg(e = {}) {
     return Cf(this.#e.point, this.#t.point, e);
@@ -11371,12 +11371,12 @@ class tc {
   #r = new Te(0.5, 0.5);
   #n;
   // Wrt centroid, anticlockwise from bottom right
-  #o = !1;
-  #s = /* @__PURE__ */ new Set();
-  #a;
-  #l = new Te();
+  #a = !1;
+  #i = /* @__PURE__ */ new Set();
   #u;
-  #i;
+  #l = new Te();
+  #o;
+  #s;
   #f = null;
   constructor(e, t) {
     if (this.celldlObject = e, t === null)
@@ -11388,7 +11388,7 @@ class tc {
       const s = getComputedStyle(i).transform;
       s !== "none" && (this.#f = this.#f.leftMultiply(st.fromString(s))), i = i.parentNode;
     }
-    this.#f.isIdentity && (this.#f = null), e.setCelldlSvgElement(this), this.#u = t, this.#a = t, this.#p();
+    this.#f.isIdentity && (this.#f = null), e.setCelldlSvgElement(this), this.#o = t, this.#u = t, this.#p();
   }
   get bounds() {
     return this.#e;
@@ -11412,16 +11412,16 @@ class tc {
     return this.celldlObject.id;
   }
   get selected() {
-    return this.#o;
+    return this.#a;
   }
   get size() {
     return this.#l;
   }
   get svgElement() {
-    return this.#u;
+    return this.#o;
   }
   get topLeft() {
-    return this.#i;
+    return this.#s;
   }
   get width() {
     return this.#l.x;
@@ -11430,44 +11430,44 @@ class tc {
     this.#t = e;
   }
   svgBounds(e = !1) {
-    return e || this.#e === void 0 ? _t.fromSvg(this.#u, this.#f) : this.#e;
+    return e || this.#e === void 0 ? _t.fromSvg(this.#o, this.#f) : this.#e;
   }
   #h() {
     const e = [];
-    if (this.#a.tagName === "g" && this.#a.classList.contains(Ne.Connection)) {
-      const t = this.#a.children;
+    if (this.#u.tagName === "g" && this.#u.classList.contains(Ne.Connection)) {
+      const t = this.#u.children;
       for (let n = 0; n < t.length; ++n)
         e.push(t[n]);
     } else
-      e.push(this.#a);
+      e.push(this.#u);
     return e;
   }
-  #d(e, t) {
+  #c(e, t) {
     if (t) {
       for (const n of this.#h())
         n.classList.add(e);
-      this.#s.add(e);
+      this.#i.add(e);
     } else {
       for (const n of this.#h())
         n.classList.remove(e);
-      this.#s.delete(e);
+      this.#i.delete(e);
     }
   }
   activate(e = !0) {
-    this.#d("active", e);
+    this.#c("active", e);
   }
   highlight(e = !0) {
-    this.#d("highlight", e);
+    this.#c("highlight", e);
   }
   pointerEvent(e, t, n) {
     return !1;
   }
   select(e = !0) {
-    this.#d("selected", e), this.#o = e;
+    this.#c("selected", e), this.#a = e;
   }
-  #c() {
+  #d() {
     const e = this.svgBounds(!0);
-    this.#l = new Te(e.right - e.left, e.bottom - e.top), this.#t ? (this.#i = this.#t.subtract(this.#l.scale(this.#r)), this.#e = new _t(this.#i.x, this.#i.y, this.#i.x + this.#l.x, this.#i.y + this.#l.y)) : (this.#i = new Te(e.left, e.top), this.#e = e, this.#t = this.#l.scale(this.#r).add(this.#i));
+    this.#l = new Te(e.right - e.left, e.bottom - e.top), this.#t ? (this.#s = this.#t.subtract(this.#l.scale(this.#r)), this.#e = new _t(this.#s.x, this.#s.y, this.#s.x + this.#l.x, this.#s.y + this.#l.y)) : (this.#s = new Te(e.left, e.top), this.#e = e, this.#t = this.#l.scale(this.#r).add(this.#s));
     const t = this.#l.scale(this.#r).scalarScale(-1), n = zf / 2 - so / 2;
     this.#n = [
       t.add(this.#l).add({ x: n, y: n }),
@@ -11477,24 +11477,24 @@ class tc {
     ];
   }
   #p() {
-    if (this.#r = new Te(0.5, 0.5), this.#u.tagName === "g") {
-      const e = this.#u.children.item(0);
+    if (this.#r = new Te(0.5, 0.5), this.#o.tagName === "g") {
+      const e = this.#o.children.item(0);
       e.dataset.centreX && (this.#r = new Te(+e.dataset.centreX, +e.dataset.centreY));
     }
-    if (this.#c(), this.#u.tagName === "g" && !this.#u.classList.contains(Ne.Connection) && this.#u.firstElementChild !== null) {
-      const e = (this.#u.classList.contains(Ne.Compartment) ? _t.fromSvg(this.#u.firstChild) : _t.fromSvg(this.#u)).expand(so / 2);
-      if (this.#u.firstElementChild.tagName === "svg") {
-        const i = this.#u.firstElementChild;
+    if (this.#d(), this.#o.tagName === "g" && !this.#o.classList.contains(Ne.Connection) && this.#o.firstElementChild !== null) {
+      const e = (this.#o.classList.contains(Ne.Compartment) ? _t.fromSvg(this.#o.firstChild) : _t.fromSvg(this.#o)).expand(so / 2);
+      if (this.#o.firstElementChild.tagName === "svg") {
+        const i = this.#o.firstElementChild;
         i.setAttribute("x", `${e.topLeft.x}px`), i.setAttribute("y", `${e.topLeft.y}px`), i.setAttribute("width", `${e.width}px`), i.setAttribute("height", `${e.height}px`);
       }
       const n = new Vf(e.asArray()).svg({
-        class: `selection-element parent-id editor-specific ${[...this.#s.values()].join(" ")}`
+        class: `selection-element parent-id editor-specific ${[...this.#i.values()].join(" ")}`
       });
-      if (this.#u.insertAdjacentHTML("beforeend", n), this.#a = this.#u.lastChild, this.celldlObject.isConduit) {
+      if (this.#o.insertAdjacentHTML("beforeend", n), this.#u = this.#o.lastChild, this.celldlObject.isConduit) {
         const i = new Te(e.right - e.left, e.bottom - e.top).scale(this.#r).add(new Te(e.left, e.top)), s = Af(i, ec, {
           class: "selection-element parent-id editor-specific conduit"
         });
-        this.#u.insertAdjacentHTML("beforeend", s);
+        this.#o.insertAdjacentHTML("beforeend", s);
       }
     }
   }
@@ -11518,7 +11518,7 @@ class wa {
   #t;
   #r;
   #n;
-  #o;
+  #a;
   constructor(e, t = {}, n) {
     this.uri = e, this.options = t, this.#t = n, this.#e = this.constructor.celldlClassName, this.#n = It.uri(this.constructor.celldlType);
   }
@@ -11577,10 +11577,10 @@ class wa {
     return this.#r?.svgElement || null;
   }
   get tooltip() {
-    return this.#o;
+    return this.#a;
   }
   set tooltip(e) {
-    this.#o = e;
+    this.#a = e;
   }
   activate(e = !0) {
     this.#r?.activate(e);
@@ -11643,22 +11643,22 @@ class co {
   #t = new qf();
   #r;
   #n;
-  #o;
-  #s = /* @__PURE__ */ new Map();
-  #a = /* @__PURE__ */ new Map();
+  #a;
+  #i = /* @__PURE__ */ new Map();
+  #u = /* @__PURE__ */ new Map();
   constructor(e, t = "", n = {}, i = void 0) {
-    if (this.#r = e, this.#n = Ri(fo), this.#o = new Ii(`${fo}#`), t !== "") {
-      this.#l(t), this.#u();
+    if (this.#r = e, this.#n = Ri(fo), this.#a = new Ii(`${fo}#`), t !== "") {
+      this.#l(t), this.#o();
       const s = i ? i.tooltip : void 0;
-      for (const a of this.#a.values())
+      for (const a of this.#u.values())
         if (a.id in n) {
           const o = n[a.id];
-          this.#s.set(a.id, o), s && s in o && (a.tooltip = String(o[s]));
+          this.#i.set(a.id, o), s && s in o && (a.tooltip = String(o[s]));
         }
     }
   }
   finishSetup() {
-    this.#g(), this.#m(), this.#b(), this.#y(), this.#p(), this.#w();
+    this.#b(), this.#y(), this.#w(), this.#g(), this.#p(), this.#_();
   }
   async viewModel() {
     this.#e ? await this.#r.viewDiagram(this) : this.#r.closeDiagram();
@@ -11669,7 +11669,7 @@ class co {
     };
     t && (n.component = {
       id: t.id
-    }, this.#s.has(t.id) && (n.component.annotation = this.#s.get(t.id))), document.dispatchEvent(new CustomEvent("viewer-event", {
+    }, this.#i.has(t.id) && (n.component.annotation = this.#i.get(t.id))), document.dispatchEvent(new CustomEvent("viewer-event", {
       detail: n
     }));
   }
@@ -11683,10 +11683,10 @@ class co {
     return this.#n.value;
   }
   makeUri(e) {
-    return this.#o.uri(e);
+    return this.#a.uri(e);
   }
   objectById(e) {
-    return this.#a.get(e) || null;
+    return this.#u.get(e) || null;
   }
   #l(e) {
     const i = new DOMParser().parseFromString(e, "image/svg+xml").firstElementChild;
@@ -11699,7 +11699,7 @@ class co {
       s[a].setAttribute("stroke", Hf);
     this.#e = i;
   }
-  #u() {
+  #o() {
     const e = this.#e?.getElementById(sc);
     if (e && (!("contentType" in e.dataset) || e.dataset.contentType === mr)) {
       const t = e.childNodes;
@@ -11712,7 +11712,7 @@ class co {
       }
     }
   }
-  #i(e) {
+  #s(e) {
     const t = this.#e?.getElementById(e.id);
     return t ? (e.assignSvgElement(t), !0) : (console.error(`Missing SVG element for ${e.id}`), !1);
   }
@@ -11723,47 +11723,47 @@ class co {
   #h(e) {
     return this.#t.subjectsOfType(e).filter((t) => t[0].value.startsWith(this.#n.value));
   }
-  #d(e) {
-    this.#a.set(e.id, e);
+  #c(e) {
+    this.#u.set(e.id, e);
   }
-  #c(e, t) {
+  #d(e, t) {
     for (const n of this.#h(e))
       if (n[1].equals(e)) {
         const i = this.#f(t, n[0]);
-        this.#i(i) && this.#d(i);
+        this.#s(i) && this.#c(i);
       }
   }
   #p() {
-    this.#c(It.uri("Annotation"), oo);
+    this.#d(It.uri("Annotation"), oo);
   }
-  #g() {
-    this.#c(It.uri("Component"), ii), this.#c(It.uri("UnconnectedPort"), uo);
+  #b() {
+    this.#d(It.uri("Component"), ii), this.#d(It.uri("UnconnectedPort"), uo);
   }
-  #m() {
-    this.#c(It.uri("Connector"), lo);
+  #y() {
+    this.#d(It.uri("Connector"), lo);
   }
-  #b() {
-    this.#c(It.uri("Conduit"), nc);
+  #w() {
+    this.#d(It.uri("Conduit"), nc);
   }
   getConnector(e) {
     if (e && ot(e) && e.value.startsWith(this.#n.value)) {
-      const t = e.id(), n = this.#a.get(t);
+      const t = e.id(), n = this.#u.get(t);
       return n?.isConnectable ? n : null;
     }
     return null;
   }
-  #y() {
-    this.#c(It.uri("Connection"), ao);
+  #g() {
+    this.#d(It.uri("Connection"), ao);
   }
-  #w() {
+  #_() {
     const e = this.#e.querySelectorAll("*[id]");
     for (let t = 0; t < e.length; ++t) {
       const n = e[t];
-      if (!this.#a.has(n.id)) {
+      if (!this.#u.has(n.id)) {
         const i = n.classList.contains("celldl-Annotation") ? oo : n.classList.contains("celldl-Compartment") ? ic : n.classList.contains("celldl-Component") ? ii : n.classList.contains("celldl-Connection") ? ao : n.classList.contains("celldl-InterfacePort") ? lo : n.classList.contains("celldl-Unconnected") ? uo : null;
         if (i !== null) {
           const s = new i(this.makeUri(n.id), {}, this);
-          s.assignSvgElement(n), this.#d(s);
+          s.assignSvgElement(n), this.#c(s);
         }
       }
     }
@@ -11774,52 +11774,52 @@ class oc {
   #t = new Te();
   #r = null;
   #n;
-  #o = new Te();
-  #s = new Te();
-  #a;
+  #a = new Te();
+  #i = new Te();
+  #u;
   #l = !0;
-  #u = 0.125;
-  #i = 1;
+  #o = 0.125;
+  #s = 1;
   #f = 32;
   #h = 0.05;
   constructor(e) {
-    e.addEventListener("wheel", this.#g.bind(this), { passive: !0 }), this.#n = e.id, this.#o = new Te(e.offsetLeft + e.clientLeft, e.offsetTop + e.clientTop), (e.clientWidth === 0 || e.clientHeight === 0) && (console.error("Container for viewer has no size..."), this.#l = !1), this.#s = new Te(e.clientWidth, e.clientHeight), this.#a = new ResizeObserver(this.#p.bind(this)), this.#a.observe(e);
+    e.addEventListener("wheel", this.#b.bind(this), { passive: !0 }), this.#n = e.id, this.#a = new Te(e.offsetLeft + e.clientLeft, e.offsetTop + e.clientTop), (e.clientWidth === 0 || e.clientHeight === 0) && (console.error("Container for viewer has no size..."), this.#l = !1), this.#i = new Te(e.clientWidth, e.clientHeight), this.#u = new ResizeObserver(this.#p.bind(this)), this.#u.observe(e);
   }
   get panning() {
     return this.#e;
   }
   get scale() {
-    return this.#i;
+    return this.#s;
   }
-  #d() {
+  #c() {
     return zn(this.#r);
   }
-  #c(e) {
+  #d(e) {
     this.#r.setAttribute("viewBox", e.map((t) => String(t)).join(" "));
   }
   enable(e) {
     if (!this.#l)
       return;
     let t = zn(e);
-    if (t[2] * this.#s.y >= t[3] * this.#s.x ? (this.#i = this.#s.x / t[2], t[1] -= (this.#s.y / this.#i - t[3]) / 2, t[3] = this.#s.y / this.#i) : (this.#i = this.#s.y / t[3], t[0] -= (this.#s.x / this.#i - t[2]) / 2, t[2] = this.#s.x / this.#i), this.#u > this.#i && (this.#u = this.#i), this.#i >= 1) {
-      this.#i = 1, t = zn(e);
-      const n = this.#s.subtract({ x: t[2], y: t[3] });
-      t[0] -= n.x / 2, t[1] -= n.y / 2, t[2] = this.#s.x, t[3] = this.#s.y;
+    if (t[2] * this.#i.y >= t[3] * this.#i.x ? (this.#s = this.#i.x / t[2], t[1] -= (this.#i.y / this.#s - t[3]) / 2, t[3] = this.#i.y / this.#s) : (this.#s = this.#i.y / t[3], t[0] -= (this.#i.x / this.#s - t[2]) / 2, t[2] = this.#i.x / this.#s), this.#o > this.#s && (this.#o = this.#s), this.#s >= 1) {
+      this.#s = 1, t = zn(e);
+      const n = this.#i.subtract({ x: t[2], y: t[3] });
+      t[0] -= n.x / 2, t[1] -= n.y / 2, t[2] = this.#i.x, t[3] = this.#i.y;
     }
-    this.#r = e, this.#c(t), this.#e = !1;
+    this.#r = e, this.#d(t), this.#e = !1;
   }
   disable() {
-    this.#r = null, this.#e = !1, this.#i = 1;
+    this.#r = null, this.#e = !1, this.#s = 1;
   }
   pointerDown(e) {
     this.#e = !0, this.#t = Te.fromPoint(e);
   }
   pointerMove(e) {
     if (this.#r && this.#e) {
-      const t = this.#t.subtract(e).scalarScale(1 / this.#i);
+      const t = this.#t.subtract(e).scalarScale(1 / this.#s);
       if (!t.isZero()) {
-        const n = this.#d();
-        return n[0] += t.x, n[1] += t.y, this.#c(n), this.#t = Te.fromPoint(e), !0;
+        const n = this.#c();
+        return n[0] += t.x, n[1] += t.y, this.#d(n), this.#t = Te.fromPoint(e), !0;
       }
     }
     return !1;
@@ -11831,17 +11831,17 @@ class oc {
     if (this.#r) {
       for (const t of e)
         if (t.target.id === this.#n) {
-          const n = new Te(t.contentRect.width, t.contentRect.height), i = this.#d(), s = n.subtract(this.#s);
-          Math.abs(s.x * i[3]) >= Math.abs(s.y * i[2]) ? (this.#i = n.x / i[2], i[1] -= (this.#s.y / this.#i - i[3]) / 2, i[3] = n.y / this.#i) : (this.#i = n.y / i[3], i[0] -= (this.#s.x / this.#i - i[2]) / 2, i[2] = n.x / this.#i), this.#s = n, this.#c(i);
+          const n = new Te(t.contentRect.width, t.contentRect.height), i = this.#c(), s = n.subtract(this.#i);
+          Math.abs(s.x * i[3]) >= Math.abs(s.y * i[2]) ? (this.#s = n.x / i[2], i[1] -= (this.#i.y / this.#s - i[3]) / 2, i[3] = n.y / this.#s) : (this.#s = n.y / i[3], i[0] -= (this.#i.x / this.#s - i[2]) / 2, i[2] = n.x / this.#s), this.#i = n, this.#d(i);
         }
     }
   }
-  #g(e) {
+  #b(e) {
     if (this.#r) {
-      const n = (e.deltaY === 0 && e.deltaX ? e.deltaX : e.deltaY) < 0 ? 1 : -1, i = this.#i * Math.exp(n * this.#h / 3);
-      this.#i = Math.min(Math.max(i, this.#u), this.#f);
-      const s = this.#s.scalarScale(1 / this.#i), a = this.#d();
-      a[0] += (a[2] - s.x) * (e.clientX - this.#o.x) / this.#s.x, a[1] += (a[3] - s.y) * (e.clientY - this.#o.y) / this.#s.y, a[2] = s.x, a[3] = s.y, this.#c(a);
+      const n = (e.deltaY === 0 && e.deltaX ? e.deltaX : e.deltaY) < 0 ? 1 : -1, i = this.#s * Math.exp(n * this.#h / 3);
+      this.#s = Math.min(Math.max(i, this.#o), this.#f);
+      const s = this.#i.scalarScale(1 / this.#s), a = this.#c();
+      a[0] += (a[2] - s.x) * (e.clientX - this.#a.x) / this.#i.x, a[1] += (a[3] - s.y) * (e.clientY - this.#a.y) / this.#i.y, a[2] = s.x, a[3] = s.y, this.#d(a);
     }
   }
 }
@@ -11865,22 +11865,23 @@ class Ai {
   static instance = null;
   #e = null;
   #t = null;
-  #r = null;
-  #n = !1;
-  #o = null;
-  #s = !1;
-  #a = null;
+  #r = "";
+  #n = null;
+  #a = !1;
+  #i = null;
+  #u = !1;
   #l = null;
-  #u = 0;
-  #i;
+  #o = null;
+  #s = 0;
   #f;
-  #h = "";
+  #h;
+  #c = "";
   constructor() {
     Ai.instance = this;
   }
-  mount(e) {
-    this.#e = e, this.#o = new oc(this.#e);
-    const { tippy: t } = bi(this.#e, {
+  mount(e, t) {
+    this.#e = e, this.#r = t, this.#i = new oc(this.#e);
+    const { tippy: n } = bi(this.#e, {
       content: "",
       animation: "none",
       duration: [0, 0],
@@ -11890,12 +11891,12 @@ class Ai {
       arrow: !0,
       followCursor: !0
     });
-    t.value && (this.#i = t, this.#f = this.#i.value.popper);
+    n.value && (this.#f = n, this.#h = this.#f.value.popper);
   }
   #d() {
     this.#e && (this.#e.addEventListener("click", this.#x.bind(this)), this.#e.addEventListener("pointerover", this.#E.bind(this)), this.#e.addEventListener("pointerout", this.#S.bind(this)), this.#e.addEventListener("pointerdown", this.#T.bind(this)), this.#e.addEventListener("pointermove", this.#I.bind(this)), this.#e.addEventListener("pointerup", this.#R.bind(this)));
   }
-  #c() {
+  #p() {
     this.#e && (this.#e.removeEventListener("click", this.#x.bind(this)), this.#e.removeEventListener("pointerover", this.#E.bind(this)), this.#e.removeEventListener("pointerout", this.#S.bind(this)), this.#e.removeEventListener("pointerdown", this.#T.bind(this)), this.#e.removeEventListener("pointermove", this.#I.bind(this)), this.#e.removeEventListener("pointerup", this.#R.bind(this)));
   }
   get celldlModel() {
@@ -11905,93 +11906,95 @@ class Ai {
     return this.#e ? [this.#e.clientWidth, this.#e.clientHeight] : [0, 0];
   }
   async viewDiagram(e) {
-    this.#t !== null ? this.closeDiagram(!0) : this.#d(), this.#t = e, this.#r = e.svgDiagram, this.#e && this.#e.appendChild(this.#r), await pr.nextTick(), e.finishSetup(), this.#o?.enable(this.#r), this.#a = null, this.#s = !1, this.#l = null;
+    this.#t !== null ? this.closeDiagram(!0) : this.#d(), this.#t = e, this.#n = e.svgDiagram, this.#e && this.#e.appendChild(this.#n), await pr.nextTick(), e.finishSetup(), this.#r !== "" && (this.#n?.setAttribute(this.#r, ""), this.#n?.querySelectorAll("*").forEach((t) => {
+      t.setAttribute(this.#r, "");
+    })), this.#i?.enable(this.#n), this.#l = null, this.#u = !1, this.#o = null;
   }
   closeDiagram(e = !1) {
-    this.#t !== null && (e || this.#c(), this.#o?.disable(), this.#e && this.#e.removeChild(this.#r), this.#r = null, this.#t = null);
+    this.#t !== null && (e || this.#p(), this.#i?.disable(), this.#e && this.#e.removeChild(this.#n), this.#n = null, this.#t = null);
   }
   resetObjectStates() {
-    this.#v(), this.#_();
+    this.#v(), this.#m();
   }
-  #p() {
-    this.#r?.style.removeProperty("cursor"), this.#e && this.#e.style.setProperty("cursor", "default");
+  #b() {
+    this.#n?.style.removeProperty("cursor"), this.#e && this.#e.style.setProperty("cursor", "default");
   }
-  #g() {
-    this.#i && this.#i.value.hide();
+  #y() {
+    this.#f && this.#f.value.hide();
   }
-  #m(e, t = "") {
+  #w(e, t = "") {
     if (e === "")
-      this.#g();
-    else if (this.#i && (this.#i.value.setContent(e), this.#i.value.show(), this.#f && (this.#h !== "" && (this.#f.classList.remove(this.#h), this.#h = ""), t !== ""))) {
+      this.#y();
+    else if (this.#f && (this.#f.value.setContent(e), this.#f.value.show(), this.#h && (this.#c !== "" && (this.#h.classList.remove(this.#c), this.#c = ""), t !== ""))) {
       const n = `tooltip-${t}`;
-      this.#f.classList.add(n), this.#h = n;
+      this.#h.classList.add(n), this.#c = n;
     }
   }
-  #b(e, t = void 0) {
+  #g(e, t = void 0) {
     this.#t && this.#t.viewerEvent(e, t);
   }
-  #y(e, t) {
+  #_(e, t) {
     e.activate(t);
   }
-  #w(e) {
-    e && this.#a !== e && (this.#y(e, !0), this.#a = e, e.tooltip && this.#m(e.tooltip, "info"), this.#b("active", e));
+  #A(e) {
+    e && this.#l !== e && (this.#_(e, !0), this.#l = e, e.tooltip && this.#w(e.tooltip, "info"), this.#g("active", e));
   }
-  #_() {
-    this.#a && (this.#y(this.#a, !1), this.#a = null, this.#b("unactive"));
+  #m() {
+    this.#l && (this.#_(this.#l, !1), this.#l = null, this.#g("unactive"));
   }
-  #A(e) {
-    this.#v(), e !== null && (e.select(!0), this.#l = e, this.#b("select", e));
+  #N(e) {
+    this.#v(), e !== null && (e.select(!0), this.#o = e, this.#g("select", e));
   }
   #v() {
-    this.#l && (this.#b("unselect", this.#l), this.#l.select(!1), this.#l = null);
+    this.#o && (this.#g("unselect", this.#o), this.#o.select(!1), this.#o = null);
   }
   #x(e) {
     const t = e.target;
-    if (this.#t === null || !this.#r?.contains(t) || // clickTolerance = 1px ? to set pointerMoved?
-    this.#s && Date.now() - this.#u > ac)
+    if (this.#t === null || !this.#n?.contains(t) || // clickTolerance = 1px ? to set pointerMoved?
+    this.#u && Date.now() - this.#s > ac)
       return;
     const n = this.#t.objectById(ho(t));
-    this.#N(e, t, n);
+    this.#C(e, t, n);
   }
-  #N(e, t, n) {
+  #C(e, t, n) {
     let i = !1;
-    this.#l !== null && (i = n === this.#l, this.#v()), !i && n && n === this.#a && this.#A(n);
+    this.#o !== null && (i = n === this.#o, this.#v()), !i && n && n === this.#l && this.#N(n);
   }
-  #C(e) {
-    return e === this.#r || e.id === lc || !this.#r?.contains(e);
+  #O(e) {
+    return e === this.#n || e.id === lc || !this.#n?.contains(e);
   }
   #E(e) {
     if (this.#t === null)
       return;
     const t = e.target, n = this.#t.objectById(ho(t));
-    if (this.#C(t)) {
-      this.#g(), this.#a && n !== this.#a && this.#_();
+    if (this.#O(t)) {
+      this.#y(), this.#l && n !== this.#l && this.#m();
       return;
     }
-    this.#a && n !== this.#a && this.#_(), n && this.#w(n);
+    this.#l && n !== this.#l && this.#m(), n && this.#A(n);
   }
   #S(e) {
     const t = e.target;
-    (t === this.#r || !this.#r?.contains(t)) && this.#a && this.#_();
+    (t === this.#n || !this.#n?.contains(t)) && this.#l && this.#m();
   }
   #T(e) {
-    this.#s = !1, this.#u = Date.now(), this.#r?.style.removeProperty("cursor"), this.#e?.style.setProperty("cursor", "grab"), this.#o.pointerDown(e), this.#n = !0;
+    this.#u = !1, this.#s = Date.now(), this.#n?.style.removeProperty("cursor"), this.#e?.style.setProperty("cursor", "grab"), this.#i.pointerDown(e), this.#a = !0;
   }
   #I(e) {
-    if (this.#n) {
-      this.#s = this.#o.pointerMove(e) || this.#s;
+    if (this.#a) {
+      this.#u = this.#i.pointerMove(e) || this.#u;
       return;
     }
-    this.#s = !0;
+    this.#u = !0;
   }
   #R(e) {
-    if (this.#t !== null && this.#n) {
-      this.#o.pointerUp(e), this.#n = !1, this.#p();
+    if (this.#t !== null && this.#a) {
+      this.#i.pointerUp(e), this.#a = !1, this.#b();
       return;
     }
   }
 }
-const Ec = /* @__PURE__ */ oi({
+const uc = /* @__PURE__ */ oi({
   __name: "WrappedViewer",
   props: {
     annotations: {},
@@ -12003,34 +12006,39 @@ const Ec = /* @__PURE__ */ oi({
   setup(r, { emit: e }) {
     const t = r, n = pr.getCurrentInstance();
     n && n.appContext.app.use(Cu);
-    const i = pr.ref(null);
-    let s;
-    const a = new Ai(), o = e, f = async () => {
+    const i = n?.type.__scopeId || "", s = pr.ref(null);
+    let a;
+    const o = new Ai(), f = e, g = async () => {
       if (t.svgData === "")
-        s = new co(a), await s.viewModel();
+        a = new co(o), await a.viewModel();
       else
         try {
-          s = new co(a, t.svgData, t.annotations, t.options), await s.viewModel();
-        } catch (g) {
-          o("error", `Invalid CellDL file... (${g})`);
+          a = new co(o, t.svgData, t.annotations, t.options), await a.viewModel();
+        } catch (c) {
+          f("error", `Invalid CellDL file... (${c})`);
         }
     };
     return pr.watch(
       () => t.svgData,
       async () => {
-        await f();
+        await g();
       }
     ), pr.onMounted(async () => {
-      i.value && (a.mount(i.value), await f());
-    }), $a(document, "viewer-event", (g) => {
-      o("event", g.detail);
-    }), (g, c) => (Ca(), Oa("div", {
+      s.value && (o.mount(s.value, i), await g());
+    }), $a(document, "viewer-event", (c) => {
+      f("event", c.detail);
+    }), (c, m) => (Ca(), Oa("div", {
       ref_key: "svgContent",
-      ref: i
+      ref: s
     }, null, 512));
   }
-});
+}), fc = (r, e) => {
+  const t = r.__vccOpts || r;
+  for (const [n, i] of e)
+    t[n] = i;
+  return t;
+}, Tc = /* @__PURE__ */ fc(uc, [["__scopeId", "data-v-a85a514c"]]);
 export {
-  Ec as default
+  Tc as default
 };
-//# sourceMappingURL=WrappedViewer-tlnd1umH.js.map
+//# sourceMappingURL=WrappedViewer-BUx-WA2c.js.map