@metadev/daga-react 4.2.15 → 4.2.16

package/index.mjs

@@ -1,9 +1,9 @@
 import { jsx as y, jsxs as M, Fragment as ho } from "react/jsx-runtime";
 import * as L from "d3";
-import { debounceTime as go, Subject as Wt, merge as fo, map as uo } from "rxjs";
+import { debounceTime as go, Subject as jt, merge as fo, map as uo } from "rxjs";
 import { createContext as Fe, useState as D, useContext as Dt, useRef as rt, useEffect as St, useMemo as po } from "react";
-var g = /* @__PURE__ */ ((s) => (s.Bottom = "bottom", s.Left = "left", s.Right = "right", s.Top = "top", s))(g || {}), Kt = /* @__PURE__ */ ((s) => (s.BottomLeft = "bottom-left", s.BottomRight = "bottom-right", s.TopLeft = "top-left", s.TopRight = "top-right", s))(Kt || {}), xt = /* @__PURE__ */ ((s) => (s.Left = "left", s.Center = "center", s.Right = "right", s))(xt || {}), Jt = /* @__PURE__ */ ((s) => (s.Top = "top", s.Center = "center", s.Bottom = "bottom", s))(Jt || {});
-const At = (s) => [Math.round(s[0]), Math.round(s[1])], ut = (s, t, e) => t < e ? t <= s && s <= e : e <= s && s <= t, Le = (s, t, e) => (s - t[0]) / (t[1] - t[0]) * (e[1] - e[0]) + e[0], Qt = (s, t, e, a, l, r, i) => {
+var g = /* @__PURE__ */ ((s) => (s.Bottom = "bottom", s.Left = "left", s.Right = "right", s.Top = "top", s))(g || {}), Kt = /* @__PURE__ */ ((s) => (s.BottomLeft = "bottom-left", s.BottomRight = "bottom-right", s.TopLeft = "top-left", s.TopRight = "top-right", s))(Kt || {}), Lt = /* @__PURE__ */ ((s) => (s.Left = "left", s.Center = "center", s.Right = "right", s))(Lt || {}), Jt = /* @__PURE__ */ ((s) => (s.Top = "top", s.Center = "center", s.Bottom = "bottom", s))(Jt || {});
+const It = (s) => [Math.round(s[0]), Math.round(s[1])], ut = (s, t, e) => t < e ? t <= s && s <= e : e <= s && s <= t, Le = (s, t, e) => (s - t[0]) / (t[1] - t[0]) * (e[1] - e[0]) + e[0], Qt = (s, t, e, a, l, r, i) => {
   const n = (() => {
     switch (r) {
       case "start":
@@ -285,7 +285,7 @@ const vo = 20, yo = (s, t, e, a, l) => {
   const e = s.indexOf(t);
   return e >= 0 && s.splice(e, 1), s;
 };
-var Tt = /* @__PURE__ */ ((s) => (s.Ellipse = "ellipse", s.Empty = "empty", s.Folder = "folder", s.Hexagon = "hexagon", s.Octagon = "octagon", s.Pill = "pill", s.Rectangle = "rectangle", s.Rhombus = "rhombus", s.RoundedRectangle = "rounded-rectangle", s.StickyNote = "sticky-note", s))(Tt || {});
+var Mt = /* @__PURE__ */ ((s) => (s.Ellipse = "ellipse", s.Empty = "empty", s.Folder = "folder", s.Hexagon = "hexagon", s.Octagon = "octagon", s.Pill = "pill", s.Rectangle = "rectangle", s.Rhombus = "rhombus", s.RoundedRectangle = "rounded-rectangle", s.StickyNote = "sticky-note", s))(Mt || {});
 const ye = (s, t, e, a, l) => {
   if (typeof s == "function")
     return s(t, e, a, l);
@@ -316,11 +316,11 @@ const ye = (s, t, e, a, l) => {
 }, Ye = (s, t, e, a) => `M ${s + e / 2} ${t} A ${e / 2} ${a / 2} 0 0 0 ${s + e / 2} ${t + a} A ${e / 2} ${a / 2} 0 1 0 ${s + e / 2} ${t} Z`, bo = () => "Z", ko = (s, t, e, a) => `M ${s} ${t} L ${s + e / 3} ${t} L ${s + e / 2} ${t + a / 6} L ${s + e} ${t + a / 6} L ${s + e} ${t + a} L ${s} ${t + a} Z`, wo = (s, t, e, a) => `M ${s + e / 4} ${t} L ${s + 3 * e / 4} ${t} L ${s + e} ${t + a / 2} L ${s + 3 * e / 4} ${t + a} L ${s + e / 4} ${t + a} L ${s} ${t + a / 2} Z`, So = (s, t, e, a) => `M ${s + e / 4} ${t} L ${s + 3 * e / 4} ${t} L ${s + e} ${t + a / 4} L ${s + e} ${t + 3 * a / 4} L ${s + 3 * e / 4} ${t + a} L ${s + e / 4} ${t + a} L ${s} ${t + 3 * a / 4} L ${s} ${t + a / 4} L ${s + e / 4} ${t} Z`, qt = (s, t, e, a) => a < e ? `M ${s + a / 2} ${t} L ${s + e - a / 2} ${t} A ${a / 2} ${a / 2} 0 0 1 ${s + e} ${t + a / 2} A ${a / 2} ${a / 2} 0 0 1 ${s + e - a / 2} ${t + a} L ${s + a / 2} ${t + a} A ${a / 2} ${a / 2} 0 0 1 ${s} ${t + a / 2} A ${a / 2} ${a / 2} 0 0 1 ${s + a / 2} ${t} Z` : a > e ? `M ${s} ${t + e / 2} L ${s} ${t + a - e / 2} A ${e / 2} ${e / 2} 0 0 0 ${s + e / 2} ${t + a} A ${e / 2} ${e / 2} 0 0 0 ${s + e} ${t + a - e / 2} L ${s + e} ${t + e / 2} A ${e / 2} ${e / 2} 0 0 0 ${s + e / 2} ${t} A ${e / 2} ${e / 2} 0 0 0 ${s} ${t + e / 2} Z` : Ye(s, t, e, a), Ee = (s, t, e, a) => `M ${s} ${t} L ${s + e} ${t} L ${s + e} ${t + a} L ${s} ${t + a} Z`, Co = (s, t, e, a) => `M ${s + e / 2} ${t} L ${s + e} ${t + a / 2} L ${s + e / 2} ${t + a} L ${s} ${t + a / 2} Z`, $o = (s, t, e, a) => `M ${s + e / 4} ${t} L ${s + 3 * e / 4} ${t} A ${e / 4} ${a / 4} 0 0 1 ${s + e} ${t + a / 4} L ${s + e} ${t + 3 * a / 4} A ${e / 4} ${a / 4} 0 0 1 ${s + 3 * e / 4} ${t + a} L ${s + e / 4} ${t + a} A ${e / 4} ${a / 4} 0 0 1 ${s} ${t + 3 * a / 4} L ${s} ${t + a / 4} A ${e / 4} ${a / 4} 0 0 1 ${s + e / 4} ${t} Z`, Ao = (s, t, e, a) => `M ${s} ${t} L ${s + 3 * e / 4} ${t} L ${s + 3 * e / 4} ${t + a / 4} L ${s + 3 * e / 4} ${t} L ${s + e} ${t + a / 4} L ${s + 3 * e / 4} ${t + a / 4} L ${s + e} ${t + a / 4} L ${s + e} ${t + a} L ${s} ${t + a} Z`;
 var E = /* @__PURE__ */ ((s) => (s.AllScroll = "all-scroll", s.Auto = "auto", s.Crosshair = "crosshair", s.EWResize = "ew-resize", s.Grab = "grab", s.Grabbing = "grabbing", s.Move = "move", s.NoDrop = "no-drop", s.NSResize = "ns-resize", s.NotAllowed = "not-allowed", s.ZoomIn = "zoom-in", s.ZoomOut = "zoom-out", s))(E || {});
 const Io = (s) => Math.max(...s.split(`
-`).map((t) => t.length)), xo = (s) => s.match(/\n/g)?.length || 0, W = [];
+`).map((t) => t.length)), xo = (s) => s.match(/\n/g)?.length || 0, j = [];
 for (let s = 0; s < 256; ++s)
-  W.push((s + 256).toString(16).slice(1));
+  j.push((s + 256).toString(16).slice(1));
 function Lo(s, t = 0) {
-  return (W[s[t + 0]] + W[s[t + 1]] + W[s[t + 2]] + W[s[t + 3]] + "-" + W[s[t + 4]] + W[s[t + 5]] + "-" + W[s[t + 6]] + W[s[t + 7]] + "-" + W[s[t + 8]] + W[s[t + 9]] + "-" + W[s[t + 10]] + W[s[t + 11]] + W[s[t + 12]] + W[s[t + 13]] + W[s[t + 14]] + W[s[t + 15]]).toLowerCase();
+  return (j[s[t + 0]] + j[s[t + 1]] + j[s[t + 2]] + j[s[t + 3]] + "-" + j[s[t + 4]] + j[s[t + 5]] + "-" + j[s[t + 6]] + j[s[t + 7]] + "-" + j[s[t + 8]] + j[s[t + 9]] + "-" + j[s[t + 10]] + j[s[t + 11]] + j[s[t + 12]] + j[s[t + 13]] + j[s[t + 14]] + j[s[t + 15]]).toLowerCase();
 }
 let le;
 const Eo = new Uint8Array(16);
@@ -343,12 +343,14 @@ function No(s, t, e) {
 function Me(s, t, e) {
   return Te.randomUUID && !s ? Te.randomUUID() : No(s);
 }
-const Mt = (s) => {
+const Ct = (s) => {
   if (typeof s != "object")
     return s;
+  if (Array.isArray(s))
+    return s.map(Ct);
   const t = {};
   for (const e of Object.entries(s))
-    typeof e[1] == "object" ? t[e[0]] = Mt(e[1]) : t[e[0]] = e[1];
+    t[e[0]] = Ct(e[1]);
   return t;
 }, nt = (s) => {
   const { selected: t, highlighted: e, selectedAndHighlighted: a, ...l } = s, r = l, i = {
@@ -482,7 +484,7 @@ class ee {
   }
 }
 const Nt = 0;
-class $t {
+class At {
   constructor(t, e) {
     this.selfRemoved = !1, this.selfRemovedTimestamp = null, this.model = t, this._id = e;
   }
@@ -795,7 +797,7 @@ class yt {
     this.displayedProperties = [], this.hiddenProperties = [], this.ownTimestamps = {};
     for (const t in this.propertySet.propertyMap) {
       const e = this.propertySet.getProperty(t), a = e.rootAttribute;
-      e.type === N.Object ? this.valueSets[t] = this.constructSubValueSet(t) : this.values[t] = Mt(e.defaultValue), a != null && e.defaultValue !== void 0 && !wt(
+      e.type === N.Object ? this.valueSets[t] = this.constructSubValueSet(t) : this.values[t] = Ct(e.defaultValue), a != null && e.defaultValue !== void 0 && !wt(
         this.getRootElementValue(a),
         e.defaultValue
       ) && this.setRootElementValue(a, this.values[t]), e.basic !== !1 ? this.displayedProperties.push(e) : this.hiddenProperties.push(e);
@@ -810,7 +812,7 @@ class yt {
   constructSubValueSet(t) {
     const e = this.propertySet.getProperty(t), a = new oe(e.properties), l = new yt(a, this.rootElement);
     return l.overwriteValues(
-      Mt(e.defaultValue)
+      Ct(e.defaultValue)
     ), l;
   }
   /**
@@ -892,7 +894,7 @@ class Xe {
     return this.endTypes.indexOf(t) >= 0;
   }
 }
-class dt extends $t {
+class dt extends At {
   constructor(t, e, a, l, r) {
     if (t.connections.get(r) !== void 0)
       throw new Error(`DiagramConnection with id "${r}" already exists`);
@@ -1213,13 +1215,13 @@ const V = {
   color: "#000000",
   selectedColor: "#000000",
   backgroundColor: "#00000000",
-  horizontalAlign: xt.Center,
+  horizontalAlign: Lt.Center,
   verticalAlign: Jt.Center,
   orientation: g.Top,
   fit: !1,
   shrink: !0
 };
-class ht extends $t {
+class ht extends At {
   constructor(t, e, a, l, r, i, n, o, d, c, h, f, b, m, p, u) {
     const v = `${e?.id}_field`;
     if (t.fields.get(v) !== void 0)
@@ -1331,11 +1333,11 @@ class _o {
 class Go {
   constructor(t) {
     this.label = t.label || null, this.ports = t.ports || [], this.priority = t.priority || Nt, this.resizableX = t.resizableX, this.resizableY = t.resizableY;
-    const e = nt(t.look || je);
+    const e = nt(t.look || We);
     this.defaultLook = e.defaultLook, this.selectedLook = e.selectedLook, this.highlightedLook = e.highlightedLook, this.selectedAndHighlightedLook = e.selectedAndHighlightedLook;
   }
 }
-class F extends $t {
+class F extends At {
   constructor(t, e, a, l, r, i, n, o) {
     if (t.sections.get(o) !== void 0)
       throw new Error(`DiagramSection with id "${o}" already exists`);
@@ -1715,9 +1717,9 @@ class Fo extends ft {
     }
   }
 }
-const je = {
+const We = {
   lookType: "shaped-look",
-  shape: Tt.Rectangle,
+  shape: Mt.Rectangle,
   fillColor: "#FFFFFF",
   borderColor: "#000000",
   borderThickness: 1,
@@ -1742,14 +1744,14 @@ const je = {
   ports: [],
   decorators: [],
   sectionGrid: null,
-  look: je,
+  look: We,
   isUnique: !1,
   canBeParentless: !0,
   childrenTypes: [],
   priority: Nt,
   properties: []
 };
-class We {
+class je {
   constructor(t) {
     const e = {
       ...gt,
@@ -1760,7 +1762,7 @@ class We {
     this.defaultLook = a.defaultLook, this.selectedLook = a.selectedLook, this.highlightedLook = a.highlightedLook, this.selectedAndHighlightedLook = a.selectedAndHighlightedLook, this.isUnique = e.isUnique, this.canBeParentless = e.canBeParentless, this.childrenTypes = e.childrenTypes, this.priority = e.priority, this.propertySet = new oe(t?.properties || []);
   }
 }
-class z extends $t {
+class z extends At {
   constructor(t, e, a = [0, 0], l) {
     if (t.nodes.get(l) !== void 0)
       throw new Error(`DiagramNode with id "${l}" already exists`);
@@ -2348,7 +2350,7 @@ class Uo extends ft {
    */
   new(t, e, a) {
     let l;
-    if (t instanceof We)
+    if (t instanceof je)
       l = t;
     else {
       const i = this.types.get(t);
@@ -2516,7 +2518,7 @@ const Ze = (s) => {
   return s;
 }, Do = (s) => s?.padding === null || s?.padding === void 0 ? gt.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? gt.padding : s.padding.length === 1 || s.padding.length === 2 ? s.padding[0] : (s.padding.length === 3, s.padding[2]), Yo = (s) => s?.padding === null || s?.padding === void 0 ? gt.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? gt.padding : s.padding.length === 1 ? s.padding[0] : s.padding.length === 2 || s.padding.length === 3 ? s.padding[1] : s.padding[3], Bo = (s) => s?.padding === null || s?.padding === void 0 ? gt.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? gt.padding : s.padding.length === 1 ? s.padding[0] : (s.padding.length === 2 || s.padding.length === 3, s.padding[1]), Xo = (s) => s?.padding === null || s?.padding === void 0 ? gt.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? gt.padding : (s.padding.length === 1 || s.padding.length === 2 || s.padding.length === 3, s.padding[0]), Ke = {
   lookType: "shaped-look",
-  shape: Tt.Ellipse,
+  shape: Mt.Ellipse,
   fillColor: "transparent",
   borderColor: "transparent",
   borderThickness: 0,
@@ -2534,7 +2536,7 @@ const Ze = (s) => {
   width: 24,
   look: Ke
 };
-class jo {
+class Wo {
   constructor(t) {
     const e = {
       ...qe,
@@ -2545,7 +2547,7 @@ class jo {
     this.defaultLook = a.defaultLook, this.selectedLook = a.selectedLook, this.highlightedLook = a.highlightedLook, this.selectedAndHighlightedLook = a.selectedAndHighlightedLook;
   }
 }
-class bt extends $t {
+class bt extends At {
   constructor(t, e, a, l, r, i, n, o = "floating", d = "floating") {
     if (t.ports.get(n) !== void 0)
       throw new Error(`DiagramPort with id "${n}" already exists`);
@@ -2722,7 +2724,7 @@ class bt extends $t {
     return Ue(this.coords, t);
   }
 }
-class Wo extends ft {
+class jo extends ft {
   /**
    * Instance a set of ports for the given model. This method is used internally.
    * @private
@@ -2772,50 +2774,48 @@ class Je {
     const a = t.nodes.types.get(e.type);
     if (a) {
       const l = new z(t, a, e.coords, e.id);
-      if (t.nodes.add(l), l.width = e.width, l.height = e.height, e.label) {
-        if (a.decorators)
-          for (let i = 0; i < a.decorators.length; ++i) {
-            const n = a.decorators[i];
-            t.decorators.new(
-              l,
-              [
-                l.coords[0] + n.coords[0],
-                l.coords[1] + n.coords[1]
-              ],
-              n.width,
-              n.height,
-              l.getPriority(),
-              n.html,
-              `${l.id}_decorator_${i}`
-            );
-          }
-        if (a.label) {
-          const i = {
-            ...V,
-            ...a.label
-          }, n = new ht(
-            t,
+      if (t.nodes.add(l), l.width = e.width, l.height = e.height, a.decorators)
+        for (let i = 0; i < a.decorators.length; ++i) {
+          const n = a.decorators[i];
+          t.decorators.new(
             l,
             [
-              l.coords[0] + Y(i),
-              l.coords[1] + U(i)
+              l.coords[0] + n.coords[0],
+              l.coords[1] + n.coords[1]
             ],
-            l.width - Y(i) - it(i),
-            l.height - U(i) - q(i),
-            i.fontSize,
-            i.fontFamily,
-            i.color,
-            i.selectedColor,
-            i.horizontalAlign,
-            i.verticalAlign,
-            i.orientation,
-            "",
-            i.editable,
-            i.fit,
-            i.shrink
+            n.width,
+            n.height,
+            l.getPriority(),
+            n.html,
+            `${l.id}_decorator_${i}`
           );
-          n.text = e.label, l.label = n, t.fields.add(n), n.updateInView();
         }
+      if (a.label) {
+        const i = {
+          ...V,
+          ...a.label
+        }, n = new ht(
+          t,
+          l,
+          [
+            l.coords[0] + Y(i),
+            l.coords[1] + U(i)
+          ],
+          l.width - Y(i) - it(i),
+          l.height - U(i) - q(i),
+          i.fontSize,
+          i.fontFamily,
+          i.color,
+          i.selectedColor,
+          i.horizontalAlign,
+          i.verticalAlign,
+          i.orientation,
+          "",
+          i.editable,
+          i.fit,
+          i.shrink
+        );
+        n.text = e.label, l.label = n, t.fields.add(n), n.updateInView();
       }
       for (const i of e.children || []) {
         const n = this.importNode(t, i);
@@ -2832,7 +2832,7 @@ class Je {
           i.height,
           i.id
         );
-        if (l.sections?.push(n), t.sections.add(n), i.label && a.sectionGrid?.sections?.[i.indexYInNode]?.[i.indexXInNode]?.label) {
+        if (l.sections?.push(n), t.sections.add(n), a.sectionGrid?.sections?.[i.indexYInNode]?.[i.indexXInNode]?.label) {
           const d = {
             ...V,
             ...a.sectionGrid?.sections?.[i.indexYInNode]?.[i.indexXInNode]?.label
@@ -3023,7 +3023,7 @@ class ie {
   do() {
     const t = this.canvas.model.nodes.new(this.typeId, this.coords, this.id);
     this.parentId !== void 0 && this.canvas.model.nodes.get(this.parentId)?.addChild(t), t.label && (t.label.text = this.label || ""), this.values !== void 0 ? t.valueSet.setValues(
-      Mt({
+      Ct({
         ...t.valueSet.getValues(),
         ...this.values
       })
@@ -3228,7 +3228,7 @@ class se {
     );
   }
 }
-class Lt {
+class Et {
   constructor(t, e, a, l) {
     this.canvas = t, this.fieldId = e, this.to = a, this.timestamp = l;
   }
@@ -3245,7 +3245,7 @@ class Lt {
     };
   }
   static deserialize(t, e) {
-    return new Lt(
+    return new Et(
       t,
       e.fieldId,
       e.to,
@@ -3253,7 +3253,7 @@ class Lt {
     );
   }
 }
-class Et {
+class Tt {
   constructor(t, e, a, l) {
     this.canvas = t, this.id = e, this.to = a, this.timestamp = l;
   }
@@ -3272,7 +3272,7 @@ class Et {
     };
   }
   static deserialize(t, e) {
-    return new Et(
+    return new Tt(
       t,
       e.id,
       e.to,
@@ -3433,11 +3433,11 @@ class Zo {
         break;
       }
       case "editField": {
-        Lt.deserialize(this.canvas, t).do();
+        Et.deserialize(this.canvas, t).do();
         break;
       }
       case "updateValues": {
-        Et.deserialize(
+        Tt.deserialize(
           this.canvas,
           t
         ).do();
@@ -3765,7 +3765,7 @@ class Re {
     this.canvas = t, this.fieldId = e, this.from = a, this.to = l;
   }
   do() {
-    const t = this.canvas.model.fields.get(this.fieldId), e = new Lt(
+    const t = this.canvas.model.fields.get(this.fieldId), e = new Et(
       this.canvas,
       this.fieldId,
       this.to,
@@ -3777,7 +3777,7 @@ class Re {
     const t = this.canvas.model.fields.get(this.fieldId);
     if (t) {
       this.to = t.text;
-      const e = new Lt(
+      const e = new Et(
         this.canvas,
         this.fieldId,
         this.from,
@@ -3791,7 +3791,7 @@ class Re {
     const t = this.canvas.model.fields.get(this.fieldId);
     if (t) {
       this.from = t.text;
-      const e = new Lt(
+      const e = new Et(
         this.canvas,
         this.fieldId,
         this.to,
@@ -3807,7 +3807,7 @@ class Qo {
     this.canvas = t, this.id = e, this.from = a, this.to = l;
   }
   do() {
-    const t = new Et(
+    const t = new Tt(
       this.canvas,
       this.id,
       this.to,
@@ -3816,7 +3816,7 @@ class Qo {
     return this.canvas.collabEngine.doCollaboratively(t), !0;
   }
   undo() {
-    const t = new Et(
+    const t = new Tt(
       this.canvas,
       this.id,
       this.from,
@@ -3829,7 +3829,7 @@ class Qo {
     return !e.rootElement.removed;
   }
   redo() {
-    const t = new Et(
+    const t = new Tt(
       this.canvas,
       this.id,
       this.to,
@@ -4054,7 +4054,7 @@ class tt extends Yt {
     ), this.target = t;
   }
 }
-class to extends $t {
+class to extends At {
   constructor(t, e, a, l, r, i, n, o, d = "floating", c = "floating") {
     if (t.objects.get(o) !== void 0)
       throw new Error(`DiagramDecorator with id "${o}" already exists`);
@@ -4122,7 +4122,7 @@ class ii extends ft {
     e && ((e.rootElement instanceof z || e.rootElement instanceof F) && B(e.rootElement.decorators, e), super.remove(t), e.updateInView());
   }
 }
-class si extends $t {
+class si extends At {
   constructor(t, e, a, l, r, i, n) {
     if (t.objects.get(n) !== void 0)
       throw new Error(`DiagramObject with id "${n}" already exists`);
@@ -4189,7 +4189,7 @@ class ni extends ft {
 }
 class eo {
   constructor(t, e, a, l, r, i = []) {
-    this.nodes = new Uo(this), this.sections = new Fo(this), this.ports = new Wo(this), this.connections = new Ro(this), this.fields = new Vo(this), this.objects = new ni(this), this.decorators = new ii(this), this.canvas = t, this.id = e, this.name = a, this.description = l, this.type = r, this.createdAt = /* @__PURE__ */ new Date(), this.updatedAt = /* @__PURE__ */ new Date(), this.logicalClock = 0, this.valueSet = new yt(new oe(i), this);
+    this.nodes = new Uo(this), this.sections = new Fo(this), this.ports = new jo(this), this.connections = new Ro(this), this.fields = new Vo(this), this.objects = new ni(this), this.decorators = new ii(this), this.canvas = t, this.id = e, this.name = a, this.description = l, this.type = r, this.createdAt = /* @__PURE__ */ new Date(), this.updatedAt = /* @__PURE__ */ new Date(), this.logicalClock = 0, this.valueSet = new yt(new oe(i), this);
   }
   /**
    * Deletes everything in this diagram.
@@ -4243,7 +4243,7 @@ const vt = (s) => !!s.button, he = (s, t, e, a, l, r, i, n, o) => yo(
   s.filter(".shaped-look").select("path").attr(
     "d",
     (t) => ye(
-      t.look.shape || Tt.Rectangle,
+      t.look.shape || Mt.Rectangle,
       0,
       0,
       t.width,
@@ -4327,7 +4327,7 @@ const vt = (s) => !!s.button, he = (s, t, e, a, l, r, i, n, o) => yo(
     }
     t.select("rect").attr("fill", `url(#${e})`);
   }
-}, we = 96, j = 32, It = we + j, ai = Math.PI / 4, li = 100, Ve = {
+}, we = 96, W = 32, xt = we + W, ai = Math.PI / 4, li = 100, Ve = {
   customButtons: []
 };
 class di {
@@ -4346,7 +4346,7 @@ class di {
    */
   open(t) {
     this.close();
-    const e = this.canvas.getPointerLocationRelativeToRoot(t), a = this.canvas.getPointerLocationRelativeToCanvas(t), l = this.canvas.selectSVGElement().append("foreignObject").attr("class", "daga-context-menu").attr("x", `${e[0] - It}px`).attr("y", `${e[1] - It}px`).attr("width", `${2 * It}px`).attr("height", `${2 * It}px`).style("pointer-events", "none").on($.ContextMenu, (i) => {
+    const e = this.canvas.getPointerLocationRelativeToRoot(t), a = this.canvas.getPointerLocationRelativeToCanvas(t), l = this.canvas.selectSVGElement().append("foreignObject").attr("class", "daga-context-menu").attr("x", `${e[0] - xt}px`).attr("y", `${e[1] - xt}px`).attr("width", `${2 * xt}px`).attr("height", `${2 * xt}px`).style("pointer-events", "none").on($.ContextMenu, (i) => {
       this.canvas.canUserPerformAction(k.ContextMenu) && (t.preventDefault(), this.open(i));
     }).on($.Click, (i) => {
       i.preventDefault(), this.close();
@@ -4391,19 +4391,19 @@ class di {
       const n = r[i], o = n.onPress, d = (i + 0.5 - r.length / 2) * ai, c = l.append("xhtml:div").attr(
         "class",
         `daga-context-menu-button ${n.onPress !== void 0 ? " daga-clickable" : ""}`
-      ).attr("tabindex", 0).style("position", "absolute").style("box-sizing", "border-box").style("width", `${2 * j}px`).style("height", `${2 * j}px`).style("border-radius", `${j}px`).style("pointer-events", "auto").on($.Click, (h) => {
+      ).attr("tabindex", 0).style("position", "absolute").style("box-sizing", "border-box").style("width", `${2 * W}px`).style("height", `${2 * W}px`).style("border-radius", `${W}px`).style("pointer-events", "auto").on($.Click, (h) => {
         o && (h.preventDefault(), o(this.canvas));
       }).on($.KeyDown, (h) => {
         o && h.key === K.Enter && (h.preventDefault(), o(this.canvas));
       });
-      n.imageClass !== void 0 ? c.append("xhtml:div").style("position", "absolute").style("left", `${0.75 * j}px`).style("top", `${0.5 * j}px`).style("width", `${0.5 * j}px`).style("height", `${0.5 * j}px`).style("background-size", "contain").style("background-repeat", "no-repeat").attr("class", n.imageClass) : n.image !== void 0 && c.append("xhtml:img").style("position", "absolute").style("left", `${0.75 * j}px`).style("top", `${0.5 * j}px`).style("width", `${0.5 * j}px`).style("height", `${0.5 * j}px`).attr("src", n.image), c.append("xhtml:span").style("position", "absolute").style("left", `${0.2 * j}px`).style("top", `${1.1 * j}px`).style("text-align", "center").style("width", `${1.6 * j}px`).style("height", `${0.35 * j}px`).style("margin", "0").style("font-size", `${0.35 * j}px`).style("font-weight", "700").style("user-select", "none").text(n.name), c.transition().ease(L.easeLinear).duration(li).tween("progress", () => (h) => {
+      n.imageClass !== void 0 ? c.append("xhtml:div").style("position", "absolute").style("left", `${0.75 * W}px`).style("top", `${0.5 * W}px`).style("width", `${0.5 * W}px`).style("height", `${0.5 * W}px`).style("background-size", "contain").style("background-repeat", "no-repeat").attr("class", n.imageClass) : n.image !== void 0 && c.append("xhtml:img").style("position", "absolute").style("left", `${0.75 * W}px`).style("top", `${0.5 * W}px`).style("width", `${0.5 * W}px`).style("height", `${0.5 * W}px`).attr("src", n.image), c.append("xhtml:span").style("position", "absolute").style("left", `${0.2 * W}px`).style("top", `${1.1 * W}px`).style("text-align", "center").style("width", `${1.6 * W}px`).style("height", `${0.35 * W}px`).style("margin", "0").style("font-size", `${0.35 * W}px`).style("font-weight", "700").style("user-select", "none").text(n.name), c.transition().ease(L.easeLinear).duration(li).tween("progress", () => (h) => {
         const f = d * h;
         return c.style(
           "left",
-          `${Math.sin(f) * we - j + It}px`
+          `${Math.sin(f) * we - W + xt}px`
         ).style(
           "top",
-          `${-Math.cos(f) * we - j + It}px`
+          `${-Math.cos(f) * we - W + xt}px`
         );
       });
     }
@@ -4509,8 +4509,8 @@ class oo {
         n.push({
           id: o.id,
           type: o.type?.id,
-          coords: At(o.coords),
-          connectionPoint: At(o.connectionPoint || o.coords),
+          coords: It(o.coords),
+          connectionPoint: It(o.connectionPoint || o.coords),
           direction: o.direction,
           label: o.label?.text || "",
           ...e ? {
@@ -4528,7 +4528,7 @@ class oo {
         label: i.label?.text || "",
         indexXInNode: i.indexXInNode,
         indexYInNode: i.indexYInNode,
-        coords: At(i.coords),
+        coords: It(i.coords),
         width: i.width,
         height: i.height,
         ...e ? {
@@ -4546,8 +4546,8 @@ class oo {
       r.push({
         id: i.id,
         type: i.type?.id,
-        coords: At(i.coords),
-        connectionPoint: At(i.connectionPoint || i.coords),
+        coords: It(i.coords),
+        connectionPoint: It(i.connectionPoint || i.coords),
         direction: i.direction,
         label: i.label?.text || "",
         ...e ? {
@@ -4566,7 +4566,7 @@ class oo {
       sections: l,
       ports: r,
       label: t.label?.text || "",
-      coords: At(t.coords),
+      coords: It(t.coords),
       width: t.width,
       height: t.height,
       data: t.valueSet.getValues(),
@@ -4739,7 +4739,7 @@ class fi extends ft {
     if (a === void 0)
       return;
     const l = t?.valueSet;
-    l ? (this.propertyEditorSelection = t, e && (this.propertyEditorValues = Mt(l.getValues())), a && (t instanceof z || t instanceof dt ? (t instanceof z ? t.name ? a.title = `${t.type.name}: ${t.name}` : a.title = t.type.name : t instanceof dt && (a.title = t.type.name), a.valueSet = void 0, a.valueSet = l) : (a.title = this.diagramPropertiesText, a.valueSet = void 0, a.valueSet = l))) : (this.propertyEditorSelection = void 0, this.propertyEditorValues = void 0, a && (a.title = "", a.valueSet = void 0));
+    l ? (this.propertyEditorSelection = t, e && (this.propertyEditorValues = Ct(l.getValues())), a && (t instanceof z || t instanceof dt ? (t instanceof z ? t.name ? a.title = `${t.type.name}: ${t.name}` : a.title = t.type.name : t instanceof dt && (a.title = t.type.name), a.valueSet = void 0, a.valueSet = l) : (a.title = this.diagramPropertiesText, a.valueSet = void 0, a.valueSet = l))) : (this.propertyEditorSelection = void 0, this.propertyEditorValues = void 0, a && (a.title = "", a.valueSet = void 0));
   }
   makeUpdateValuesAction() {
     if (this.propertyEditorSelection === void 0 || this.propertyEditorValues === void 0)
@@ -4750,7 +4750,7 @@ class fi extends ft {
       this.propertyEditorSelection?.valueSet.getValues()
     ))
       return;
-    const e = this.propertyEditorValues, a = Mt(this.propertyEditorSelection?.valueSet.getValues()), [l, r] = Be(
+    const e = this.propertyEditorValues, a = Ct(this.propertyEditorSelection?.valueSet.getValues()), [l, r] = Be(
       e,
       a,
       this.propertyEditorSelection?.valueSet
@@ -4774,7 +4774,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
    * @param config The configuration object used to set the parameters of this canvas.
    */
   constructor(t, e) {
-    if (this.backgroundPatternId = `daga-background-pattern-id-${te.canvasCount++}`, this.zoomTransform = L.zoomIdentity, this.draggingFrom = [0, 0], this.dragging = !1, this.secondaryButton = !1, this.validatorChange$ = new Wt(), this.diagramChange$ = new Wt(), this.diagramEvent$ = new Wt(), this.propertyEditorChanges$ = new Wt(), this.parentComponent = t, this.model = new eo(
+    if (this.backgroundPatternId = `daga-background-pattern-id-${te.canvasCount++}`, this.zoomTransform = L.zoomIdentity, this.draggingFrom = [0, 0], this.dragging = !1, this.secondaryButton = !1, this.validatorChange$ = new jt(), this.diagramChange$ = new jt(), this.diagramEvent$ = new jt(), this.propertyEditorChanges$ = new jt(), this.parentComponent = t, this.model = new eo(
       this,
       void 0,
       e.name || "unnamed",
@@ -4791,7 +4791,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       e.canvas?.grid?.thickness || Rt.thickness
     ), this.gridColor = e.canvas?.grid?.color || Rt.color, this.snapToGrid = e.canvas?.grid?.enabled === !1 || e.canvas?.grid === void 0 ? !1 : e.canvas?.grid?.snap || Rt.snap, this.zoomFactor = e.canvas?.zoomFactor || 2, this.panRate = e.canvas?.panRate || 100, this.inferConnectionType = e.connectionSettings?.inferConnectionType || !1, this.autoTightenConnections = e.connectionSettings?.autoTighten !== !1, this.tightenConnectionsAcrossPortTypes = e.connectionSettings?.tightenAcrossPortTypes || !1, this.allowConnectionLoops = e.connectionSettings?.allowLoops || !1, this.allowSharingPorts = e.connectionSettings?.sharePorts !== !1, this.allowSharingBothPorts = e.connectionSettings?.shareBothPorts || !1, this.portHighlightRadius = e.connectionSettings?.portHighlightRadius || 100, this.multipleSelectionOn = !1, this.priorityThresholds = e.canvas?.priorityThresholds || [], this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : void 0, this.layoutFormat = e.layoutFormat, this.userActions = e.userActions || {}, this.validators = [], this.actionStack = new Ko(this, vi), this.collabEngine = new Zo(this), e.nodeTypes)
       for (const a of e.nodeTypes) {
-        const l = new We({
+        const l = new je({
           ...e.nodeTypeDefaults,
           ...a
         });
@@ -4799,7 +4799,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       }
     if (e.portTypes)
       for (const a of e.portTypes) {
-        const l = new jo({
+        const l = new Wo({
           ...e.portTypeDefaults,
           ...a
         });
@@ -5718,20 +5718,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       }
     }).on($.DoubleClick, (i, n) => {
       const o = new pt(i, n);
-      this.diagramEvent$.next(o), !o.defaultPrevented && this.canUserPerformAction(k.EditField) && n.editable && !n.removed && (this.currentAction = new Re(this, n.id, n.text, ""), this.createInputField(
-        n.text,
-        n.coords,
-        n.width,
-        n.height,
-        n.fontSize,
-        n.fontFamily || V.fontFamily,
-        n.orientation,
-        (d) => {
-        },
-        (d) => {
-          n.text = d, this.currentAction instanceof Re && (this.currentAction.to = d, this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0);
-        }
-      ));
+      this.diagramEvent$.next(o), !o.defaultPrevented && this.canUserPerformAction(k.EditField) && n.editable && !n.removed && (this.currentAction = new Re(this, n.id, n.text, ""), this.openTextInput(n.id));
     }).call(
       L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, n) => {
         if (this.multipleSelectionOn || this.secondaryButton)
@@ -5758,7 +5745,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       })
     ).append("xhtml:div").style("width", "100%").style("height", "100%").style("display", "flex").append("xhtml:p").style("box-sizing", "border-box").style("outline", 0).style("margin", 0).style("border", 0).style("padding", 0).style("user-select", "none").style("font-kerning", "none").style("white-space", "nowrap"), r.attr("x", 0).attr("y", 0).attr("width", (i) => `${i.width}px`).attr("height", (i) => `${i.height}px`).attr("transform", (i) => `translate(${i.coords[0]},${i.coords[1]})`).attr("opacity", (i) => i.removed ? 0.5 : 1).select("div").style(
       "justify-content",
-      (i) => i.horizontalAlign === xt.Center ? "center" : i.horizontalAlign === xt.Right ? "flex-end" : "flex-start"
+      (i) => i.horizontalAlign === Lt.Center ? "center" : i.horizontalAlign === Lt.Right ? "flex-end" : "flex-start"
     ).style(
       "align-items",
       (i) => i.verticalAlign === Jt.Center ? "center" : i.verticalAlign === Jt.Bottom ? "end" : "start"
@@ -5770,7 +5757,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       (i) => i.fit ? "default" : `${Oe(i.width, i.height, i.orientation)[1]}px`
     ).style("overflow", (i) => i.fit ? "default" : "clip").style("text-overflow", (i) => i.fit ? "default" : "ellipsis").style(
       "text-align",
-      (i) => i.horizontalAlign === xt.Center ? "center" : i.horizontalAlign === xt.Right ? "end" : "start"
+      (i) => i.horizontalAlign === Lt.Center ? "center" : i.horizontalAlign === Lt.Right ? "end" : "start"
     ).style("transform", (i) => `rotate(${i.orientation}deg)`).style("font-size", (i) => `${i.fontSize}px`).style(
       "font-family",
       (i) => i.fontFamily || "'Wonder Unit Sans', sans-serif"
@@ -6246,6 +6233,23 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
   canUserPerformAction(t) {
     return this.userActions[t] !== !1;
   }
+  openTextInput(t) {
+    const e = this.model.fields.get(t);
+    e && this.createInputField(
+      e.text,
+      e.coords,
+      e.width,
+      e.height,
+      e.fontSize,
+      e.fontFamily || V.fontFamily,
+      e.orientation,
+      () => {
+      },
+      (a) => {
+        e.text = a, this.currentAction instanceof Re && (this.currentAction.to = a, this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0);
+      }
+    );
+  }
   createInputField(t, e, a, l, r, i, n, o, d) {
     this.removeInputField();
     const c = this.selectCanvasElements().append("foreignObject").attr("x", `${e[0]}px`).attr("y", `${e[1]}px`).attr("width", `${a}px`).attr("height", `${l}px`).style("box-sizing", "border-box").style("border", "1px solid");
@@ -6879,7 +6883,7 @@ const _e = {
   priority: new Si(),
   tree: new Ci(),
   vertical: new $i()
-}, Ai = Fe({}), Ct = Fe({});
+}, Ai = Fe({}), $t = Fe({});
 class Ii {
   constructor(t, e) {
     this.onTitleChange = t, this.onValueSetChange = e;
@@ -6945,7 +6949,7 @@ const xe = ({
     }
   ) });
 }, xi = () => {
-  const s = Dt(Ct), t = rt(null), [e, a] = D([]);
+  const s = Dt($t), t = rt(null), [e, a] = D([]);
   fo(s.validatorChange$, s.diagramChange$).pipe(
     uo(() => l())
   ).subscribe();
@@ -7363,7 +7367,7 @@ const xe = ({
   onValueChange: t,
   depth: e
 }) => {
-  const l = Dt(Ct).canUserPerformAction(k.UpdateValues) && s?.rootElement?.removed !== !0, r = (o) => "daga-property-name-" + o.replace(/\s/g, ""), i = (o) => {
+  const l = Dt($t).canUserPerformAction(k.UpdateValues) && s?.rootElement?.removed !== !0, r = (o) => "daga-property-name-" + o.replace(/\s/g, ""), i = (o) => {
     if (typeof o == "string")
       return o;
     if (o == null || isNaN(o.valueOf()))
@@ -7546,7 +7550,7 @@ const xe = ({
     o.name
   )) });
 }, co = ({ valueSet: s, depth: t }) => {
-  const e = Dt(Ct), a = rt(null), l = (o) => "daga-property-name-" + o.replace(/\s/g, ""), r = () => {
+  const e = Dt($t), a = rt(null), l = (o) => "daga-property-name-" + o.replace(/\s/g, ""), r = () => {
     for (const o of s?.displayedProperties || []) {
       let d = 0, c = 0, h = 0;
       const f = L.select(a.current).select(
@@ -7725,7 +7729,7 @@ const xe = ({
     }
   ) });
 }, Ri = 6, Vi = (s) => {
-  const t = Dt(Ct), [e, a] = D(
+  const t = Dt($t), [e, a] = D(
     s.currentPalette || s.palettes[0]
   ), [l, r] = D(0), [i, n] = D(
     void 0
@@ -7783,7 +7787,7 @@ const xe = ({
       }).on(A.End, (O) => {
         if (t.canUserPerformAction(k.AddNode)) {
           if (S(E.Auto), T.style("position", "relative").style("left", 0).style("top", 0).style("z-index", "auto"), p.isUnique && t.model.nodes.find(
-            (jt) => !jt.removed && jt.type.id === p.id
+            (Wt) => !Wt.removed && Wt.type.id === p.id
           ) !== void 0)
             return;
           const x = t.getPointerLocationRelativeToScreen(O);
@@ -7810,7 +7814,7 @@ const xe = ({
             lt[0],
             lt[1]
           ).filter(
-            (jt) => jt.type.childrenTypes.includes(p.id)
+            (Wt) => Wt.type.childrenTypes.includes(p.id)
           ), Z = Ze(
             Pt
           ), Q = Z[Z.length - 1];
@@ -7836,7 +7840,7 @@ const xe = ({
         T.append("path").attr(
           "d",
           ye(
-            C.shape || Tt.Rectangle,
+            C.shape || Mt.Rectangle,
             (C.borderThickness || 1) / 2,
             (C.borderThickness || 1) / 2,
             p.defaultWidth,
@@ -7897,7 +7901,7 @@ const xe = ({
     w.append("path").attr(
       "d",
       ye(
-        Tt.Rectangle,
+        Mt.Rectangle,
         0,
         0,
         u.width,
@@ -7999,7 +8003,7 @@ const xe = ({
         d = !0, Z.transition().duration(500).ease(L.easeLinear).style(h, "0rem").style("transform", `${f}(0)`), setTimeout(() => {
           c = !1;
         }, 500);
-  }, I = Dt(Ct), R = () => {
+  }, I = Dt($t), R = () => {
     I.zoomBy(I.zoomFactor);
   }, P = () => {
     I.zoomBy(1 / I.zoomFactor);
@@ -8121,9 +8125,9 @@ const xe = ({
       x.setValues(b.getValues()), x.rootElement = b.rootElement, v.valueSet = x, b.rootElement.valueSet = x, R.propertyEditorChanges$?.next();
     }
   };
-  return /* @__PURE__ */ y("daga-diagram", { children: /* @__PURE__ */ y(Ai.Provider, { value: s, children: /* @__PURE__ */ y(Ct.Provider, { value: R, children: /* @__PURE__ */ M("daga-diagram-editor", { children: [
+  return /* @__PURE__ */ y("daga-diagram", { children: /* @__PURE__ */ y(Ai.Provider, { value: s, children: /* @__PURE__ */ y($t.Provider, { value: R, children: /* @__PURE__ */ M("daga-diagram-editor", { children: [
     /* @__PURE__ */ y("div", { className: "daga-append-to", ref: n }),
-    /* @__PURE__ */ M(Ct.Provider, { value: R, children: [
+    /* @__PURE__ */ M($t.Provider, { value: R, children: [
       s.components?.buttons !== void 0 && s.components?.buttons?.enabled !== !1 && /* @__PURE__ */ y(
         Oi,
         {