@metadev/daga-react 4.2.16 → 4.2.18

package/index.mjs

@@ -1,9 +1,9 @@
-import { jsx as y, jsxs as M, Fragment as ho } from "react/jsx-runtime";
+import { jsx as y, jsxs as M, Fragment as lo } from "react/jsx-runtime";
 import * as L from "d3";
-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 || {}), 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) => {
+import { debounceTime as co, Subject as Zt, merge as ho, map as go } from "rxjs";
+import { createContext as _e, useState as D, useContext as Bt, useRef as rt, useEffect as $t, useMemo as fo } from "react";
+var g = /* @__PURE__ */ ((s) => (s.Bottom = "bottom", s.Left = "left", s.Right = "right", s.Top = "top", s))(g || {}), qt = /* @__PURE__ */ ((s) => (s.BottomLeft = "bottom-left", s.BottomRight = "bottom-right", s.TopLeft = "top-left", s.TopRight = "top-right", s))(qt || {}), yt = /* @__PURE__ */ ((s) => (s.Left = "left", s.Center = "center", s.Right = "right", s))(yt || {}), bt = /* @__PURE__ */ ((s) => (s.Top = "top", s.Center = "center", s.Bottom = "bottom", s))(bt || {});
+const Lt = (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":
@@ -32,7 +32,7 @@ const It = (s) => [Math.round(s[0]), Math.round(s[1])], ut = (s, t, e) => t < e
     }
   })();
   return [n, o];
-}, Ue = (s, t) => ((s[0] - t[0]) ** 2 + (s[1] - t[1]) ** 2) ** 0.5, mo = (s, t) => (ut(
+}, Ge = (s, t) => ((s[0] - t[0]) ** 2 + (s[1] - t[1]) ** 2) ** 0.5, uo = (s, t) => (ut(
   s[0][0],
   t[0][0],
   t[1][0]
@@ -65,10 +65,10 @@ const It = (s) => [Math.round(s[0]), Math.round(s[1])], ut = (s, t, e) => t < e
   s[1][1],
   s[0][1]
 ));
-var $ = /* @__PURE__ */ ((s) => (s.Blur = "blur", s.Change = "change", s.Click = "click", s.ContextMenu = "contextmenu", s.DoubleClick = "dblclick", s.Focus = "focus", s.FocusIn = "focusin", s.FocusOut = "focusout", s.Input = "input", s.KeyDown = "keydown", s.KeyUp = "keyup", s.MouseDown = "mousedown", s.MouseEnter = "mouseenter", s.MouseLeave = "mouseleave", s.MouseMove = "mousemove", s.MouseOut = "mouseout", s.MouseOver = "mouseover", s.MouseUp = "mouseup", s.TouchStart = "touchstart", s.TouchEnd = "touchend", s.Wheel = "wheel", s))($ || {}), K = /* @__PURE__ */ ((s) => (s.Alt = "Alt", s.AltGraph = "AltGraph", s.ArrowDown = "ArrowDown", s.ArrowLeft = "ArrowLeft", s.ArrowRight = "ArrowRight", s.ArrowUp = "ArrowUp", s.Backspace = "Backspace", s.Control = "Control", s.Delete = "Delete", s.End = "End", s.Enter = "Enter", s.Escape = "Escape", s.Home = "Home", s.OS = "OS", s.PageDown = "PageDown", s.PageUp = "PageUp", s.Shift = "Shift", s.Tab = "Tab", s))(K || {}), A = /* @__PURE__ */ ((s) => (s.Drag = "drag", s.Start = "start", s.End = "end", s))(A || {}), pe = /* @__PURE__ */ ((s) => (s.Zoom = "zoom", s.Start = "start", s.End = "end", s))(pe || {});
+var $ = /* @__PURE__ */ ((s) => (s.Blur = "blur", s.Change = "change", s.Click = "click", s.ContextMenu = "contextmenu", s.DoubleClick = "dblclick", s.Focus = "focus", s.FocusIn = "focusin", s.FocusOut = "focusout", s.Input = "input", s.KeyDown = "keydown", s.KeyUp = "keyup", s.MouseDown = "mousedown", s.MouseEnter = "mouseenter", s.MouseLeave = "mouseleave", s.MouseMove = "mousemove", s.MouseOut = "mouseout", s.MouseOver = "mouseover", s.MouseUp = "mouseup", s.TouchStart = "touchstart", s.TouchEnd = "touchend", s.Wheel = "wheel", s))($ || {}), Z = /* @__PURE__ */ ((s) => (s.Alt = "Alt", s.AltGraph = "AltGraph", s.ArrowDown = "ArrowDown", s.ArrowLeft = "ArrowLeft", s.ArrowRight = "ArrowRight", s.ArrowUp = "ArrowUp", s.Backspace = "Backspace", s.Control = "Control", s.Delete = "Delete", s.End = "End", s.Enter = "Enter", s.Escape = "Escape", s.Home = "Home", s.OS = "OS", s.PageDown = "PageDown", s.PageUp = "PageUp", s.Shift = "Shift", s.Tab = "Tab", s))(Z || {}), I = /* @__PURE__ */ ((s) => (s.Drag = "drag", s.Start = "start", s.End = "end", s))(I || {}), pe = /* @__PURE__ */ ((s) => (s.Zoom = "zoom", s.Start = "start", s.End = "end", s))(pe || {});
 const me = (s) => s.replace(/([!"#$%&'()*+,\-./:;<=>?@[\\\]^`{|}])/g, "\\$1");
-var De = /* @__PURE__ */ ((s) => (s.Straight = "straight", s.Bezier = "bezier", s.Square = "square", s))(De || {}), Ce = /* @__PURE__ */ ((s) => (s.Solid = "solid", s.Dashed = "dashed", s.GappedDashes = "gapped-dashes", s.Dotted = "dotted", s))(Ce || {});
-const vo = 20, yo = (s, t, e, a, l) => {
+var Fe = /* @__PURE__ */ ((s) => (s.Straight = "straight", s.Bezier = "bezier", s.Square = "square", s))(Fe || {}), Ce = /* @__PURE__ */ ((s) => (s.Solid = "solid", s.Dashed = "dashed", s.GappedDashes = "gapped-dashes", s.Dotted = "dotted", s))(Ce || {});
+const po = 20, mo = (s, t, e, a, l) => {
   if (typeof s == "function")
     return s(
       t,
@@ -81,7 +81,7 @@ const vo = 20, yo = (s, t, e, a, l) => {
   if (t.length === 1)
     return `M ${t[0][0]} ${t[0][1]}`;
   {
-    l = l || vo;
+    l = l || po;
     let r = "", i, n;
     switch (s) {
       case "straight":
@@ -285,72 +285,72 @@ const vo = 20, yo = (s, t, e, a, l) => {
   const e = s.indexOf(t);
   return e >= 0 && s.splice(e, 1), s;
 };
-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 || {});
+var Nt = /* @__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))(Nt || {});
 const ye = (s, t, e, a, l) => {
   if (typeof s == "function")
     return s(t, e, a, l);
   switch (s) {
     case "ellipse":
-      return Ye(t, e, a, l);
+      return Ue(t, e, a, l);
     case "empty":
-      return bo();
+      return vo();
     case "folder":
-      return ko(t, e, a, l);
+      return yo(t, e, a, l);
     case "hexagon":
-      return wo(t, e, a, l);
+      return bo(t, e, a, l);
     case "octagon":
-      return So(t, e, a, l);
+      return ko(t, e, a, l);
     case "pill":
-      return qt(t, e, a, l);
+      return Jt(t, e, a, l);
     case "rectangle":
       return Ee(t, e, a, l);
     case "rhombus":
-      return Co(t, e, a, l);
+      return wo(t, e, a, l);
     case "rounded-rectangle":
-      return $o(t, e, a, l);
+      return So(t, e, a, l);
     case "sticky-note":
-      return Ao(t, e, a, l);
+      return Co(t, e, a, l);
     default:
       return Ee(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`;
+}, Ue = (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`, vo = () => "Z", yo = (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`, bo = (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`, ko = (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`, Jt = (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` : Ue(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`, wo = (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`, So = (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`, Co = (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, j = [];
+const $o = (s) => Math.max(...s.split(`
+`).map((t) => t.length)), Ao = (s) => s.match(/\n/g)?.length || 0, j = [];
 for (let s = 0; s < 256; ++s)
   j.push((s + 256).toString(16).slice(1));
-function Lo(s, t = 0) {
+function Io(s, t = 0) {
   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);
-function To() {
+const xo = new Uint8Array(16);
+function Lo() {
   if (!le) {
     if (typeof crypto > "u" || !crypto.getRandomValues)
       throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
     le = crypto.getRandomValues.bind(crypto);
   }
-  return le(Eo);
+  return le(xo);
 }
-const Mo = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), Te = { randomUUID: Mo };
-function No(s, t, e) {
+const Eo = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), Te = { randomUUID: Eo };
+function To(s, t, e) {
   s = s || {};
-  const a = s.random ?? s.rng?.() ?? To();
+  const a = s.random ?? s.rng?.() ?? Lo();
   if (a.length < 16)
     throw new Error("Random bytes length must be >= 16");
-  return a[6] = a[6] & 15 | 64, a[8] = a[8] & 63 | 128, Lo(a);
+  return a[6] = a[6] & 15 | 64, a[8] = a[8] & 63 | 128, Io(a);
 }
 function Me(s, t, e) {
-  return Te.randomUUID && !s ? Te.randomUUID() : No(s);
+  return Te.randomUUID && !s ? Te.randomUUID() : To(s);
 }
-const Ct = (s) => {
+const At = (s) => {
   if (typeof s != "object")
     return s;
   if (Array.isArray(s))
-    return s.map(Ct);
+    return s.map(At);
   const t = {};
   for (const e of Object.entries(s))
-    t[e[0]] = Ct(e[1]);
+    t[e[0]] = At(e[1]);
   return t;
 }, nt = (s) => {
   const { selected: t, highlighted: e, selectedAndHighlighted: a, ...l } = s, r = l, i = {
@@ -483,8 +483,8 @@ class ee {
       yield t;
   }
 }
-const Nt = 0;
-class At {
+const Pt = 0;
+class xt {
   constructor(t, e) {
     this.selfRemoved = !1, this.selfRemovedTimestamp = null, this.model = t, this._id = e;
   }
@@ -554,7 +554,7 @@ class ft extends ee {
         yield e;
   }
 }
-class Po {
+class Mo {
   constructor(t, e, a, l, r, i, n) {
     this.name = t, this.label = e, this.type = a, this.defaultValue = l, this.basic = r, this.editable = i, this.rootAttribute = n, this.options = void 0, this.properties = void 0;
   }
@@ -576,24 +576,24 @@ class oe {
     return this.propertyList.length > 0;
   }
 }
-function kt(s, t) {
+function St(s, t) {
   return !t || s[0] > t[0] ? !0 : s[0] === t[0] ? s[1] >= t[1] : !1;
 }
-const Ne = (s) => s == null || s === "" || s instanceof Array && s.length === 0 || s instanceof Object && Object.keys(s).length === 0, wt = (s, t) => s === t || JSON.stringify(s) === JSON.stringify(t), Be = (s, t, e) => {
+const Ne = (s) => s == null || s === "" || s instanceof Array && s.length === 0 || s instanceof Object && Object.keys(s).length === 0, Ct = (s, t) => s === t || JSON.stringify(s) === JSON.stringify(t), De = (s, t, e) => {
   const a = {}, l = {};
   for (const r in e.propertySet.propertyMap)
     if (e.propertySet.propertyMap[r].type === N.Object) {
-      const i = Be(
+      const i = De(
         s[r],
         t[r],
         e.getSubValueSet(r)
       );
       Object.keys(i[0]).length > 0 && Object.keys(i[1]).length > 0 && (a[r] = i[0], l[r] = i[1]);
     } else
-      wt(s[r], t[r]) || (a[r] = s[r], l[r] = t[r]);
+      Ct(s[r], t[r]) || (a[r] = s[r], l[r] = t[r]);
   return [a, l];
-}, zo = (s) => s != null && s.constructor === Object;
-class yt {
+}, No = (s) => s != null && s.constructor === Object;
+class kt {
   constructor(t, e) {
     this.displayedProperties = [], this.hiddenProperties = [], this.values = {}, this.valueSets = {}, this.ownTimestamps = {}, this.propertySet = t, this.rootElement = e, this.resetValues();
   }
@@ -714,7 +714,7 @@ class yt {
    */
   hasSetValue(t) {
     const e = this.getValue(t), a = this.propertySet.getProperty(t);
-    return a && a.type === N.Object ? this.getSubValueSet(t).hasAnySetValue() : !Ne(e) && !wt(e, a?.defaultValue);
+    return a && a.type === N.Object ? this.getSubValueSet(t).hasAnySetValue() : !Ne(e) && !Ct(e, a?.defaultValue);
   }
   /**
    * Checks if any of the values in the set are not empty or the default value.
@@ -736,7 +736,7 @@ class yt {
   setValue(t, e) {
     const a = this.propertySet.getProperty(t);
     if (a) {
-      a.type === N.Object ? this.valueSets[t].setValues(e) : (this.values[t] = e, wt(e, a.defaultValue) || this.displayProperty(a));
+      a.type === N.Object ? this.valueSets[t].setValues(e) : (this.values[t] = e, Ct(e, a.defaultValue) || this.displayProperty(a));
       const l = a.rootAttribute;
       l != null && this.setRootElementValue(l, e);
     }
@@ -786,7 +786,7 @@ class yt {
       this.propertySet.getProperty(a).type === N.Object ? this.valueSets[a].overwriteValuesLww(
         t[a],
         e
-      ) : kt(e, this.ownTimestamps[a]) && (this.setValue(a, t[a]), this.ownTimestamps[a] = e);
+      ) : St(e, this.ownTimestamps[a]) && (this.setValue(a, t[a]), this.ownTimestamps[a] = e);
   }
   /**
    * Sets all the values of this set to the defaults.
@@ -797,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] = Ct(e.defaultValue), a != null && e.defaultValue !== void 0 && !wt(
+      e.type === N.Object ? this.valueSets[t] = this.constructSubValueSet(t) : this.values[t] = At(e.defaultValue), a != null && e.defaultValue !== void 0 && !Ct(
         this.getRootElementValue(a),
         e.defaultValue
       ) && this.setRootElementValue(a, this.values[t]), e.basic !== !1 ? this.displayedProperties.push(e) : this.hiddenProperties.push(e);
@@ -810,9 +810,9 @@ class yt {
    * @returns The constructed ValueSet.
    */
   constructSubValueSet(t) {
-    const e = this.propertySet.getProperty(t), a = new oe(e.properties), l = new yt(a, this.rootElement);
+    const e = this.propertySet.getProperty(t), a = new oe(e.properties), l = new kt(a, this.rootElement);
     return l.overwriteValues(
-      Ct(e.defaultValue)
+      At(e.defaultValue)
     ), l;
   }
   /**
@@ -841,14 +841,14 @@ class yt {
     this.hiddenProperties.includes(t) || (this.hiddenProperties.push(t), B(this.displayedProperties, t));
   }
 }
-const ot = {
+const et = {
   name: "",
   label: null,
   look: {
     lookType: "connection-look",
     color: "#000000",
     thickness: 1,
-    shape: De.Straight,
+    shape: Fe.Straight,
     style: Ce.Solid,
     selected: {
       color: "#AA00AA"
@@ -863,10 +863,10 @@ const ot = {
   endTypes: [],
   properties: []
 };
-class Xe {
+class Ye {
   constructor(t) {
     const e = {
-      ...ot,
+      ...et,
       ...t
     };
     this.id = e.id, this.name = e.name, this.label = e.label;
@@ -894,19 +894,19 @@ class Xe {
     return this.endTypes.indexOf(t) >= 0;
   }
 }
-class dt extends At {
+class dt extends xt {
   constructor(t, e, a, l, r) {
     if (t.connections.get(r) !== void 0)
       throw new Error(`DiagramConnection with id "${r}" already exists`);
     if (!r)
       throw new Error("DiagramConnection cannot have an empty or null id");
-    super(t, r), this.startCoords = [0, 0], this.endCoords = [0, 0], this.startLabel = "", this.middleLabel = "", this.endLabel = "", this.points = [], this._type = e, this.valueSet = new yt(e.propertySet, this), this.originalData = {}, this.setStart(a), this.setEnd(l);
+    super(t, r), this.startCoords = [0, 0], this.endCoords = [0, 0], this.startLabel = "", this.middleLabel = "", this.endLabel = "", this.points = [], this._type = e, this.valueSet = new kt(e.propertySet, this), this.originalData = {}, this.setStart(a), this.setEnd(l);
   }
   get type() {
     return this._type;
   }
   set type(t) {
-    t !== this._type && (this._type = t, this.valueSet && (this.valueSet = new yt(t.propertySet, this)), this.model.canvas?.userSelection?.openInPropertyEditor(this, !1), this.updateInView());
+    t !== this._type && (this._type = t, this.valueSet && (this.valueSet = new kt(t.propertySet, this)), this.model.canvas?.userSelection?.openInPropertyEditor(this, !1), this.updateInView());
   }
   get typeString() {
     return this.type.id;
@@ -1160,10 +1160,10 @@ class dt extends At {
     }
   }
   getPriority() {
-    return this.start ? this.end ? Math.min(this.start.getPriority(), this.end.getPriority()) : this.start.getPriority() : this.end ? this.end.getPriority() : Nt;
+    return this.start ? this.end ? Math.min(this.start.getPriority(), this.end.getPriority()) : this.start.getPriority() : this.end ? this.end.getPriority() : Pt;
   }
 }
-class Ro extends ft {
+class Po extends ft {
   /**
    * Instance a set of connections for the given model. This method is used internally.
    * @private
@@ -1182,7 +1182,7 @@ class Ro extends ft {
    */
   new(t, e, a, l) {
     let r;
-    if (t instanceof Xe)
+    if (t instanceof Ye)
       r = t;
     else {
       const n = this.types.get(t);
@@ -1215,18 +1215,19 @@ const V = {
   color: "#000000",
   selectedColor: "#000000",
   backgroundColor: "#00000000",
-  horizontalAlign: Lt.Center,
-  verticalAlign: Jt.Center,
+  horizontalAlign: yt.Center,
+  verticalAlign: bt.Center,
   orientation: g.Top,
+  multiline: !1,
   fit: !1,
   shrink: !0
 };
-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)
+class ht extends xt {
+  constructor(t, e, a, l, r, i, n, o, d, c, h, f, b, m, v, u, p) {
+    const w = `${e?.id}_field`;
+    if (t.fields.get(w) !== void 0)
       throw new Error("DiagramField for rootElement already exists");
-    if (super(t, v), this.textTimestamp = null, this.rootElement = e, this.coords = a, this.width = l, this.height = r, this.fontSize = i, this.fontFamily = n, this.color = o, this.selectedColor = d, this.horizontalAlign = c, this.verticalAlign = h, !isNaN(Number(f)))
+    if (super(t, w), this.textTimestamp = null, this.rootElement = e, this.coords = a, this.width = l, this.height = r, this.fontSize = i, this.fontFamily = n, this.color = o, this.selectedColor = d, this.horizontalAlign = c, this.verticalAlign = h, !isNaN(Number(f)))
       this.orientation = Number(f);
     else
       switch (f) {
@@ -1245,7 +1246,7 @@ class ht extends At {
         default:
           this.orientation = 0;
       }
-    this.defaultText = b, this._text = b, this.editable = m, this.fit = p, this.shrink = u;
+    this.multiline = b, this.defaultText = m, this._text = m, this.editable = v, this.fit = u, this.shrink = p;
   }
   /**
    * Text contents of this field.
@@ -1275,10 +1276,10 @@ class ht extends At {
     this.coords = t, this.updateInView();
   }
   getPriority() {
-    return this.rootElement?.getPriority() || Nt;
+    return this.rootElement?.getPriority() || Pt;
   }
 }
-class Vo extends ft {
+class zo extends ft {
   /**
    * Instance a set of fields for the given model. This method is used internally.
    * @private
@@ -1290,8 +1291,8 @@ class Vo extends ft {
    * Instance a new field and add it to this set. This method is normally called when instancing an element with a field and it is rarely called by itself.
    * @private
    */
-  new(t, e, a, l, r, i, n, o, d, c, h, f, b, m, p) {
-    const u = new ht(
+  new(t, e, a, l, r, i, n, o, d, c, h, f, b, m, v, u) {
+    const p = new ht(
       this.model,
       t,
       e,
@@ -1307,37 +1308,38 @@ class Vo extends ft {
       f,
       b,
       m,
-      p
+      v,
+      u
     );
-    return super.add(u), u.updateInView(), t !== void 0 && (t.label = u), u;
+    return super.add(p), p.updateInView(), t !== void 0 && (t.label = p), p;
   }
   remove(t) {
     const e = this.get(t, !0);
     e && (e.rootElement?.label !== void 0 && e.rootElement.label === e && (e.rootElement.label = void 0), super.remove(t), e.updateInView());
   }
 }
-const q = (s) => s?.margin === null || s?.margin === void 0 ? V.margin : typeof s.margin == "number" ? s.margin : s.margin.length === 0 ? V.margin : s.margin.length === 1 || s.margin.length === 2 ? s.margin[0] : (s.margin.length === 3, s.margin[2]), Y = (s) => s?.margin === null || s?.margin === void 0 ? V.margin : typeof s.margin == "number" ? s.margin : s.margin.length === 0 ? V.margin : s.margin.length === 1 ? s.margin[0] : s.margin.length === 2 || s.margin.length === 3 ? s.margin[1] : s.margin[3], it = (s) => s?.margin === null || s?.margin === void 0 ? V.margin : typeof s.margin == "number" ? s.margin : s.margin.length === 0 ? V.margin : s.margin.length === 1 ? s.margin[0] : (s.margin.length === 2 || s.margin.length === 3, s.margin[1]), U = (s) => s?.margin === null || s?.margin === void 0 ? V.margin : typeof s.margin == "number" ? s.margin : s.margin.length === 0 ? V.margin : (s.margin.length === 1 || s.margin.length === 2 || s.margin.length === 3, s.margin[0]), Vt = (s) => s?.padding === null || s?.padding === void 0 ? V.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? V.padding : s.padding.length === 1 || s.padding.length === 2 ? s.padding[0] : (s.padding.length === 3, s.padding[2]), Ot = (s) => s?.padding === null || s?.padding === void 0 ? V.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? V.padding : s.padding.length === 1 ? s.padding[0] : s.padding.length === 2 || s.padding.length === 3 ? s.padding[1] : s.padding[3], Ht = (s) => s?.padding === null || s?.padding === void 0 ? V.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? V.padding : s.padding.length === 1 ? s.padding[0] : (s.padding.length === 2 || s.padding.length === 3, s.padding[1]), _t = (s) => s?.padding === null || s?.padding === void 0 ? V.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? V.padding : (s.padding.length === 1 || s.padding.length === 2 || s.padding.length === 3, s.padding[0]);
-var Gt = /* @__PURE__ */ ((s) => (s[s.OnlyWhenSelected = 0] = "OnlyWhenSelected", s))(Gt || {});
-const Pe = 1, ze = 1, Oo = 1, Ho = 1;
-class _o {
+const q = (s) => s?.margin === null || s?.margin === void 0 ? V.margin : typeof s.margin == "number" ? s.margin : s.margin.length === 0 ? V.margin : s.margin.length === 1 || s.margin.length === 2 ? s.margin[0] : (s.margin.length === 3, s.margin[2]), Y = (s) => s?.margin === null || s?.margin === void 0 ? V.margin : typeof s.margin == "number" ? s.margin : s.margin.length === 0 ? V.margin : s.margin.length === 1 ? s.margin[0] : s.margin.length === 2 || s.margin.length === 3 ? s.margin[1] : s.margin[3], it = (s) => s?.margin === null || s?.margin === void 0 ? V.margin : typeof s.margin == "number" ? s.margin : s.margin.length === 0 ? V.margin : s.margin.length === 1 ? s.margin[0] : (s.margin.length === 2 || s.margin.length === 3, s.margin[1]), U = (s) => s?.margin === null || s?.margin === void 0 ? V.margin : typeof s.margin == "number" ? s.margin : s.margin.length === 0 ? V.margin : (s.margin.length === 1 || s.margin.length === 2 || s.margin.length === 3, s.margin[0]), Ht = (s) => s?.padding === null || s?.padding === void 0 ? V.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? V.padding : s.padding.length === 1 || s.padding.length === 2 ? s.padding[0] : (s.padding.length === 3, s.padding[2]), _t = (s) => s?.padding === null || s?.padding === void 0 ? V.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? V.padding : s.padding.length === 1 ? s.padding[0] : s.padding.length === 2 || s.padding.length === 3 ? s.padding[1] : s.padding[3], Gt = (s) => s?.padding === null || s?.padding === void 0 ? V.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? V.padding : s.padding.length === 1 ? s.padding[0] : (s.padding.length === 2 || s.padding.length === 3, s.padding[1]), Ft = (s) => s?.padding === null || s?.padding === void 0 ? V.padding : typeof s.padding == "number" ? s.padding : s.padding.length === 0 ? V.padding : (s.padding.length === 1 || s.padding.length === 2 || s.padding.length === 3, s.padding[0]);
+var Ut = /* @__PURE__ */ ((s) => (s[s.OnlyWhenSelected = 0] = "OnlyWhenSelected", s))(Ut || {});
+const Pe = 1, ze = 1, Ro = 1, Vo = 1;
+class Oo {
   constructor(t) {
     this.margin = t.margin || 0, this.defaultWidths = t.defaultWidths || null, this.defaultHeights = t.defaultHeights || null, this.minWidths = t.minWidths || null, this.minHeights = t.minHeights || null, this.sections = [];
     for (const e of t.sections) {
       const a = [];
       this.sections.push(a);
       for (const l of e)
-        a.push(new Go(l));
+        a.push(new Ho(l));
     }
   }
 }
-class Go {
+class Ho {
   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 || We);
+    this.label = t.label || null, this.ports = t.ports || [], this.priority = t.priority || Pt, this.resizableX = t.resizableX, this.resizableY = t.resizableY;
+    const e = nt(t.look || Be);
     this.defaultLook = e.defaultLook, this.selectedLook = e.selectedLook, this.highlightedLook = e.highlightedLook, this.selectedAndHighlightedLook = e.selectedAndHighlightedLook;
   }
 }
-class F extends At {
+class F extends xt {
   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`);
@@ -1417,13 +1419,13 @@ class F extends At {
     return this.node?.type?.sectionGrid?.sections?.[this.indexYInNode]?.[this.indexXInNode];
   }
   getMinWidth() {
-    return this.node?.type?.sectionGrid?.minWidths?.[this.indexXInNode] || Oo;
+    return this.node?.type?.sectionGrid?.minWidths?.[this.indexXInNode] || Ro;
   }
   getMinHeight() {
-    return this.node?.type?.sectionGrid?.minHeights?.[this.indexYInNode] || Ho;
+    return this.node?.type?.sectionGrid?.minHeights?.[this.indexYInNode] || Vo;
   }
   getPriority() {
-    return this.node?.type?.sectionGrid?.sections?.[this.indexYInNode]?.[this.indexXInNode]?.priority || Nt;
+    return this.node?.type?.sectionGrid?.sections?.[this.indexYInNode]?.[this.indexXInNode]?.priority || Pt;
   }
   /**
    * Returns whether this section can be resized horizontally.
@@ -1433,7 +1435,7 @@ class F extends At {
    */
   getResizableX() {
     const t = this.type;
-    return t?.resizableX !== void 0 ? t.resizableX === Gt.OnlyWhenSelected ? this.selected : t.resizableX : this.node?.getResizableX() || !1;
+    return t?.resizableX !== void 0 ? t.resizableX === Ut.OnlyWhenSelected ? this.selected : t.resizableX : this.node?.getResizableX() || !1;
   }
   /**
    * Returns whether this section can be resized vertically.
@@ -1443,7 +1445,7 @@ class F extends At {
    */
   getResizableY() {
     const t = this.type;
-    return t?.resizableY !== void 0 ? t.resizableY === Gt.OnlyWhenSelected ? this.selected : t.resizableY : this.node?.getResizableY() || !1;
+    return t?.resizableY !== void 0 ? t.resizableY === Ut.OnlyWhenSelected ? this.selected : t.resizableY : this.node?.getResizableY() || !1;
   }
   /**
    * Get the port of this section which is closest to the given coordinates.
@@ -1593,7 +1595,7 @@ class F extends At {
     this.model.canvas?.autoTightenConnections !== !1 && this.getConnections().forEach((n) => n.tighten()), this.updateInView();
   }
 }
-class Fo extends ft {
+class _o extends ft {
   /**
    * Instance a set of sections for the given model. This method is used internally.
    * @private
@@ -1640,38 +1642,39 @@ class Fo extends ft {
           const m = {
             ...V,
             ...b.type?.label
-          }, p = 6 * m.fontSize + Ot(m) + Ht(m), u = m.fontSize + _t(m) + Vt(m);
-          let v;
+          }, v = 6 * m.fontSize + _t(m) + Gt(m), u = m.fontSize + Ft(m) + Ht(m);
+          let p;
           switch (b.direction) {
             case g.Bottom:
             case g.Left:
             case g.Right:
-              v = [
-                b.coords[0] - p / 2,
+              p = [
+                b.coords[0] - v / 2,
                 b.coords[1] - u - q(m)
               ];
               break;
             case g.Top:
-              v = [
-                b.coords[0] - p / 2,
+              p = [
+                b.coords[0] - v / 2,
                 b.coords[1] + U(m)
               ];
               break;
             default:
-              v = b.coords;
+              p = b.coords;
           }
           this.model.fields.new(
             b,
-            v,
+            p,
             m.fontSize,
             m.fontFamily,
             m.color,
             m.selectedColor,
-            p,
+            v,
             u,
             m.horizontalAlign,
             m.verticalAlign,
             m.orientation,
+            m.multiline,
             "",
             m.editable,
             m.fit,
@@ -1700,6 +1703,7 @@ class Fo extends ft {
         h.horizontalAlign,
         h.verticalAlign,
         h.orientation,
+        h.multiline,
         "",
         h.editable,
         h.fit,
@@ -1717,9 +1721,9 @@ class Fo extends ft {
     }
   }
 }
-const We = {
+const Be = {
   lookType: "shaped-look",
-  shape: Mt.Rectangle,
+  shape: Nt.Rectangle,
   fillColor: "#FFFFFF",
   borderColor: "#000000",
   borderThickness: 1,
@@ -1744,37 +1748,37 @@ const We = {
   ports: [],
   decorators: [],
   sectionGrid: null,
-  look: We,
+  look: Be,
   isUnique: !1,
   canBeParentless: !0,
   childrenTypes: [],
-  priority: Nt,
+  priority: Pt,
   properties: []
 };
-class je {
+class Xe {
   constructor(t) {
     const e = {
       ...gt,
       ...t
     };
-    this.id = e.id, this.name = e.name, this.defaultWidth = e.defaultWidth, this.defaultHeight = e.defaultHeight, this.minWidth = e.minWidth, this.minHeight = e.minHeight, this.resizableX = e.resizableX, this.resizableY = e.resizableY, this.snapToGridOffset = e.snapToGridOffset, this.bottomPadding = Do(e), this.leftPadding = Yo(e), this.rightPadding = Bo(e), this.topPadding = Xo(e), this.label = e.label, this.ports = e.ports, this.decorators = e.decorators, this.sectionGrid = e.sectionGrid ? new _o(e.sectionGrid) : null;
+    this.id = e.id, this.name = e.name, this.defaultWidth = e.defaultWidth, this.defaultHeight = e.defaultHeight, this.minWidth = e.minWidth, this.minHeight = e.minHeight, this.resizableX = e.resizableX, this.resizableY = e.resizableY, this.snapToGridOffset = e.snapToGridOffset, this.bottomPadding = Fo(e), this.leftPadding = Uo(e), this.rightPadding = Do(e), this.topPadding = Yo(e), this.label = e.label, this.ports = e.ports, this.decorators = e.decorators, this.sectionGrid = e.sectionGrid ? new Oo(e.sectionGrid) : null;
     const a = nt(e.look);
     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 At {
+class z extends xt {
   constructor(t, e, a = [0, 0], l) {
     if (t.nodes.get(l) !== void 0)
       throw new Error(`DiagramNode with id "${l}" already exists`);
     if (!l)
       throw new Error("DiagramNode cannot have an empty or null id");
-    super(t, l), this.children = [], this.sections = [], this.ports = [], this.decorators = [], this.geometryTimestamp = null, this._type = e, this.valueSet = new yt(e.propertySet, this), this.originalData = {}, this.coords = a, this.width = e.defaultWidth, this.height = e.defaultHeight;
+    super(t, l), this.children = [], this.sections = [], this.ports = [], this.decorators = [], this.geometryTimestamp = null, this._type = e, this.valueSet = new kt(e.propertySet, this), this.originalData = {}, this.coords = a, this.width = e.defaultWidth, this.height = e.defaultHeight;
   }
   get type() {
     return this._type;
   }
   set type(t) {
-    t !== this._type && (this._type = t, this.valueSet && (this.valueSet = new yt(t.propertySet, this)), this.model.canvas?.userSelection?.openInPropertyEditor(this, !1), this.updateInView());
+    t !== this._type && (this._type = t, this.valueSet && (this.valueSet = new kt(t.propertySet, this)), this.model.canvas?.userSelection?.openInPropertyEditor(this, !1), this.updateInView());
   }
   get typeString() {
     return this.type.id;
@@ -1867,7 +1871,7 @@ class z extends At {
    */
   getResizableX() {
     const t = this.type.resizableX;
-    return t === Gt.OnlyWhenSelected ? this.selected : t;
+    return t === Ut.OnlyWhenSelected ? this.selected : t;
   }
   /**
    * Returns whether this node can be resized vertically.
@@ -1875,7 +1879,7 @@ class z extends At {
    */
   getResizableY() {
     const t = this.type.resizableY;
-    return t === Gt.OnlyWhenSelected ? this.selected : t;
+    return t === Ut.OnlyWhenSelected ? this.selected : t;
   }
   /**
    * Get the port of this node which is closest to the given coordinates.
@@ -2332,7 +2336,7 @@ class z extends At {
     this.stretch(g.Bottom, e + a);
   }
 }
-class Uo extends ft {
+class Go extends ft {
   /**
    * Instance a set of nodes for the given model. This method is used internally.
    * @private
@@ -2350,7 +2354,7 @@ class Uo extends ft {
    */
   new(t, e, a) {
     let l;
-    if (t instanceof je)
+    if (t instanceof Xe)
       l = t;
     else {
       const i = this.types.get(t);
@@ -2398,7 +2402,7 @@ class Uo extends ft {
           const c = {
             ...V,
             ...d.type?.label
-          }, h = 6 * c.fontSize + Ot(c) + Ht(c), f = c.fontSize + _t(c) + Vt(c);
+          }, h = 6 * c.fontSize + _t(c) + Gt(c), f = c.fontSize + Ft(c) + Ht(c);
           let b;
           switch (d.direction) {
             case g.Bottom:
@@ -2430,6 +2434,7 @@ class Uo extends ft {
             c.horizontalAlign,
             c.verticalAlign,
             c.orientation,
+            c.multiline,
             "",
             c.editable,
             c.fit,
@@ -2457,6 +2462,7 @@ class Uo extends ft {
         i.horizontalAlign,
         i.verticalAlign,
         i.orientation,
+        i.multiline,
         "",
         i.editable,
         i.fit,
@@ -2511,14 +2517,14 @@ class Uo extends ft {
     return a;
   }
 }
-const Ze = (s) => {
+const We = (s) => {
   for (let t = 0; t < s.length; ++t)
     for (let e = 0; e < s.length; ++e)
       e !== t && s[e].isAncestorOf(s[t]) && (s.splice(e, 1), --e, t > e && --t);
   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 = {
+}, Fo = (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]), Uo = (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], 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[0] : (s.padding.length === 2 || s.padding.length === 3, s.padding[1]), 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.length === 2 || s.padding.length === 3, s.padding[0]), je = {
   lookType: "shaped-look",
-  shape: Mt.Ellipse,
+  shape: Nt.Ellipse,
   fillColor: "transparent",
   borderColor: "transparent",
   borderThickness: 0,
@@ -2528,18 +2534,18 @@ const Ze = (s) => {
   highlighted: {
     fillColor: "rgba(0, 255, 255, 0.5)"
   }
-}, Zt = nt(Ke), qe = {
+}, Kt = nt(je), Ze = {
   name: "",
   label: null,
   allowsOutgoing: !0,
   allowsIncoming: !0,
   width: 24,
-  look: Ke
+  look: je
 };
-class Wo {
+class Bo {
   constructor(t) {
     const e = {
-      ...qe,
+      ...Ze,
       ...t
     };
     this.id = e.id, this.name = e.name, this.label = e.label, this.allowsOutgoing = e.allowsOutgoing, this.allowsIncoming = e.allowsIncoming, this.width = e.width;
@@ -2547,7 +2553,7 @@ class Wo {
     this.defaultLook = a.defaultLook, this.selectedLook = a.selectedLook, this.highlightedLook = a.highlightedLook, this.selectedAndHighlightedLook = a.selectedAndHighlightedLook;
   }
 }
-class bt extends At {
+class wt extends xt {
   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`);
@@ -2600,7 +2606,7 @@ class bt extends At {
    * @private
    */
   get look() {
-    return this.selected ? this.highlighted ? this._selectedAndHighlightedLook !== void 0 ? this._selectedAndHighlightedLook : (this.type || Zt)?.selectedAndHighlightedLook : this._selectedLook !== void 0 ? this._selectedLook : (this.type || Zt)?.selectedLook : this.highlighted ? this._highlightedLook !== void 0 ? this._highlightedLook : (this.type || Zt)?.highlightedLook : this._defaultLook !== void 0 ? this._defaultLook : (this.type || Zt)?.defaultLook;
+    return this.selected ? this.highlighted ? this._selectedAndHighlightedLook !== void 0 ? this._selectedAndHighlightedLook : (this.type || Kt)?.selectedAndHighlightedLook : this._selectedLook !== void 0 ? this._selectedLook : (this.type || Kt)?.selectedLook : this.highlighted ? this._highlightedLook !== void 0 ? this._highlightedLook : (this.type || Kt)?.highlightedLook : this._defaultLook !== void 0 ? this._defaultLook : (this.type || Kt)?.defaultLook;
   }
   /**
    * An alias for the `lookConfig` attribute.
@@ -2647,7 +2653,7 @@ class bt extends At {
    * @private
    */
   get width() {
-    return this.type?.width || qe.width;
+    return this.type?.width || Ze.width;
   }
   /**
    * Current height of this port. Same as the width.
@@ -2698,7 +2704,7 @@ class bt extends At {
       return this.rootElement.node;
   }
   getPriority() {
-    return this.rootElement?.getPriority() || Nt;
+    return this.rootElement?.getPriority() || Pt;
   }
   /**
    * Change the coordinates of this port to the given coordinates and move its labels correspondingly.
@@ -2721,10 +2727,10 @@ class bt extends At {
     ]), this.updateInView();
   }
   distanceTo(t) {
-    return Ue(this.coords, t);
+    return Ge(this.coords, t);
   }
 }
-class jo extends ft {
+class Xo extends ft {
   /**
    * Instance a set of ports for the given model. This method is used internally.
    * @private
@@ -2737,7 +2743,7 @@ class jo extends ft {
    * @private
    */
   new(t, e, a, l, r, i, n = "floating", o = "floating") {
-    const d = new bt(
+    const d = new wt(
       this.model,
       t,
       e,
@@ -2761,7 +2767,7 @@ class jo extends ft {
     }
   }
 }
-class Je {
+class Ke {
   import(t, e) {
     t.clear(), e.id && (t.id = e.id), t.name = e.name, t.description = e.description, t.type = e.type, t.createdAt = new Date(e.createdAt), t.updatedAt = new Date(e.updatedAt);
     for (const a of e.nodes || [])
@@ -2810,6 +2816,7 @@ class Je {
           i.horizontalAlign,
           i.verticalAlign,
           i.orientation,
+          i.multiline,
           "",
           i.editable,
           i.fit,
@@ -2852,6 +2859,7 @@ class Je {
             d.horizontalAlign,
             d.verticalAlign,
             d.orientation,
+            d.multiline,
             "",
             d.editable,
             d.fit,
@@ -2861,7 +2869,7 @@ class Je {
         }
         let o = 0;
         for (const d of i.ports || []) {
-          const c = d.type !== void 0 ? t.ports.types.get(d.type) : void 0, h = new bt(
+          const c = d.type !== void 0 ? t.ports.types.get(d.type) : void 0, h = new wt(
             t,
             c,
             n,
@@ -2913,6 +2921,7 @@ class Je {
                 f.horizontalAlign,
                 f.verticalAlign,
                 f.orientation,
+                f.multiline,
                 "",
                 f.editable,
                 f.fit,
@@ -2931,7 +2940,7 @@ class Je {
       }
       let r = 0;
       for (const i of e.ports || []) {
-        const n = i.type !== void 0 ? t.ports.types.get(i.type) : void 0, o = new bt(
+        const n = i.type !== void 0 ? t.ports.types.get(i.type) : void 0, o = new wt(
           t,
           n,
           l,
@@ -2983,6 +2992,7 @@ class Je {
               d.horizontalAlign,
               d.verticalAlign,
               d.orientation,
+              d.multiline,
               "",
               d.editable,
               d.fit,
@@ -3023,7 +3033,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(
-      Ct({
+      At({
         ...t.valueSet.getValues(),
         ...this.values
       })
@@ -3058,7 +3068,7 @@ class $e {
   }
   do() {
     const t = this.canvas.model.nodes.get(this.nodeId);
-    t && kt(this.timestamp, t.geometryTimestamp) && (this.copyColumnIndex !== void 0 && t.copySectionColumn(this.copyColumnIndex), this.copyRowIndex !== void 0 && t.copySectionRow(this.copyRowIndex), this.removeColumnIndex !== void 0 && t.removeSectionColumn(this.removeColumnIndex), this.removeRowIndex !== void 0 && t.removeSectionRow(this.removeRowIndex), t.geometryTimestamp = this.timestamp);
+    t && St(this.timestamp, t.geometryTimestamp) && (this.copyColumnIndex !== void 0 && t.copySectionColumn(this.copyColumnIndex), this.copyRowIndex !== void 0 && t.copySectionRow(this.copyRowIndex), this.removeColumnIndex !== void 0 && t.removeSectionColumn(this.removeColumnIndex), this.removeRowIndex !== void 0 && t.removeSectionRow(this.removeRowIndex), t.geometryTimestamp = this.timestamp);
   }
   serialize() {
     return {
@@ -3090,7 +3100,7 @@ class Ae {
   do() {
     for (const t in this.to) {
       const e = this.canvas.model.nodes.get(t, !0);
-      if (e && kt(this.timestamp, e.geometryTimestamp)) {
+      if (e && St(this.timestamp, e.geometryTimestamp)) {
         const a = this.to[t];
         e.move([a[0], a[1]]), e.geometryTimestamp = this.timestamp;
       }
@@ -3111,14 +3121,14 @@ class Ae {
     );
   }
 }
-class Ft {
+class Dt {
   constructor(t, e, a, l) {
     this.canvas = t, this.nodeIds = e, this.delta = a, this.timestamp = l;
   }
   do() {
     for (const t of this.nodeIds) {
       const e = this.canvas.model.nodes.get(t, !0);
-      e && kt(this.timestamp, e.geometryTimestamp) && (e.move([
+      e && St(this.timestamp, e.geometryTimestamp) && (e.move([
         e.coords[0] + this.delta[0],
         e.coords[1] + this.delta[1]
       ]), e.parent?.fitToChild(e), e.geometryTimestamp = this.timestamp);
@@ -3133,7 +3143,7 @@ class Ft {
     };
   }
   static deserialize(t, e) {
-    return new Ft(
+    return new Dt(
       t,
       e.nodeIds,
       e.delta,
@@ -3147,7 +3157,7 @@ class st {
   }
   do() {
     const t = this.canvas.model.nodes.get(this.nodeId, !0);
-    if (t && kt(this.timestamp, t.geometryTimestamp)) {
+    if (t && St(this.timestamp, t.geometryTimestamp)) {
       t.setGeometry(this.to), t.label?.fit && this.canvas.fitFieldRootInView(t.label.id, t.label.shrink);
       for (const e of t.sections)
         e.label?.fit && this.canvas.fitFieldRootInView(
@@ -3174,13 +3184,13 @@ class st {
     );
   }
 }
-class Ut {
+class Yt {
   constructor(t, e, a, l, r) {
     this.canvas = t, this.childId = e, this.parentId = a, this.childGeometry = l, this.timestamp = r;
   }
   do() {
     const t = this.canvas.model.nodes.get(this.childId, !0), e = this.parentId !== void 0 ? this.canvas.model.nodes.get(this.parentId, !0) : void 0;
-    t && (this.parentId === void 0 || e) && kt(this.timestamp, t.geometryTimestamp) && (t.parent?.removeChild(t), t.setGeometry(this.childGeometry), e?.addChild(t));
+    t && (this.parentId === void 0 || e) && St(this.timestamp, t.geometryTimestamp) && (t.parent?.removeChild(t), t.setGeometry(this.childGeometry), e?.addChild(t));
   }
   serialize() {
     return {
@@ -3192,7 +3202,7 @@ class Ut {
     };
   }
   static deserialize(t, e) {
-    return new Ut(
+    return new Yt(
       t,
       e.childId,
       e.parentId,
@@ -3228,13 +3238,13 @@ class se {
     );
   }
 }
-class Et {
+class Tt {
   constructor(t, e, a, l) {
     this.canvas = t, this.fieldId = e, this.to = a, this.timestamp = l;
   }
   do() {
     const t = this.canvas.model.fields.get(this.fieldId, !0);
-    t && kt(this.timestamp, t.textTimestamp) && (t.text = this.to, t.textTimestamp = this.timestamp);
+    t && St(this.timestamp, t.textTimestamp) && (t.text = this.to, t.textTimestamp = this.timestamp);
   }
   serialize() {
     return {
@@ -3245,7 +3255,7 @@ class Et {
     };
   }
   static deserialize(t, e) {
-    return new Et(
+    return new Tt(
       t,
       e.fieldId,
       e.to,
@@ -3253,7 +3263,7 @@ class Et {
     );
   }
 }
-class Tt {
+class Mt {
   constructor(t, e, a, l) {
     this.canvas = t, this.id = e, this.to = a, this.timestamp = l;
   }
@@ -3272,7 +3282,7 @@ class Tt {
     };
   }
   static deserialize(t, e) {
-    return new Tt(
+    return new Mt(
       t,
       e.id,
       e.to,
@@ -3285,7 +3295,7 @@ class at {
     this.canvas = t, this.nodeIds = e, this.sectionIds = a, this.portIds = l, this.connectionIds = r, this.fieldIds = i, this.selfRemoved = n, this.timestamp = o;
   }
   doOne(t) {
-    t && kt(this.timestamp, t.selfRemovedTimestamp) && (t.selfRemoved = this.selfRemoved, t.selfRemovedTimestamp = this.timestamp);
+    t && St(this.timestamp, t.selfRemovedTimestamp) && (t.selfRemoved = this.selfRemoved, t.selfRemovedTimestamp = this.timestamp);
   }
   do() {
     for (const t of this.nodeIds)
@@ -3330,7 +3340,7 @@ class ne {
     this.canvas = t, this.nodes = e, this.connections = a;
   }
   do() {
-    const t = new Je();
+    const t = new Ke();
     this.canvas.userSelection.clear();
     for (const e of this.nodes) {
       const a = t.importNode(this.canvas.model, e);
@@ -3359,7 +3369,7 @@ class ne {
     );
   }
 }
-class Zo {
+class Wo {
   constructor(t) {
     this.isInRoom = !1, this.canvas = t, this.replicaId = Me();
   }
@@ -3411,7 +3421,7 @@ class Zo {
         break;
       }
       case "move": {
-        Ft.deserialize(this.canvas, t).do();
+        Dt.deserialize(this.canvas, t).do();
         break;
       }
       case "setGeometry": {
@@ -3422,7 +3432,7 @@ class Zo {
         break;
       }
       case "setParent": {
-        Ut.deserialize(this.canvas, t).do();
+        Yt.deserialize(this.canvas, t).do();
         break;
       }
       case "addConnection": {
@@ -3433,11 +3443,11 @@ class Zo {
         break;
       }
       case "editField": {
-        Et.deserialize(this.canvas, t).do();
+        Tt.deserialize(this.canvas, t).do();
         break;
       }
       case "updateValues": {
-        Tt.deserialize(
+        Mt.deserialize(
           this.canvas,
           t
         ).do();
@@ -3462,7 +3472,7 @@ class Zo {
     }
   }
 }
-class Ko {
+class jo {
   constructor(t, e) {
     this.canvas = t, this.maximum = e, this.history = [], this.index = 0;
   }
@@ -3515,7 +3525,7 @@ class Ko {
   }
 }
 var k = /* @__PURE__ */ ((s) => (s.AddConnection = "add-connection", s.AddNode = "add-node", s.AddSectionAction = "add-section", s.ApplyLayout = "apply-layout", s.Clipboard = "clipboard", s.ContextMenu = "context-menu", s.EditField = "edit-field", s.MoveNode = "move-node", s.Paste = "paste", s.Remove = "remove", s.StretchNode = "stretch-node", s.StretchSection = "stretch-section", s.UpdateValues = "update-values", s.Zoom = "zoom", s))(k || {});
-class qo {
+class Zo {
   constructor(t, e, a, l, r, i, n, o, d) {
     this.canvas = t, this.type = e, this.coords = a, this.parentId = l, this.ancestorId = r, this.fromAncestorGeometry = i, this.toAncestorGeometry = n, this.label = o, this.values = d, this.id = this.canvas.collabEngine.freshId();
   }
@@ -3590,7 +3600,7 @@ class de {
     this.canvas = t, this.nodeIds = e, this.delta = a;
   }
   do() {
-    const t = new Ft(
+    const t = new Dt(
       this.canvas,
       this.nodeIds,
       this.delta,
@@ -3599,7 +3609,7 @@ class de {
     return this.canvas.collabEngine.doCollaboratively(t), this.nodeIds.map((e) => this.canvas.model.nodes.get(e) !== void 0).includes(!0) && (this.delta[0] !== 0 || this.delta[1] !== 0);
   }
   undo() {
-    const t = new Ft(
+    const t = new Dt(
       this.canvas,
       this.nodeIds,
       [-this.delta[0], -this.delta[1]],
@@ -3673,12 +3683,12 @@ class X {
     return t !== void 0;
   }
 }
-class Jo {
+class Ko {
   constructor(t, e, a, l, r, i, n, o, d) {
     this.canvas = t, this.childId = e, this.fromParentId = a, this.toParentId = l, this.fromChildGeometry = r, this.toChildGeometry = i, this.ancestorId = n, this.fromAncestorGeometry = o, this.toAncestorGeometry = d;
   }
   do() {
-    const t = this.canvas.model.nodes.get(this.childId), e = new Ut(
+    const t = this.canvas.model.nodes.get(this.childId), e = new Yt(
       this.canvas,
       this.childId,
       this.toParentId,
@@ -3697,7 +3707,7 @@ class Jo {
     return t !== void 0;
   }
   undo() {
-    const t = this.canvas.model.nodes.get(this.childId), e = new Ut(
+    const t = this.canvas.model.nodes.get(this.childId), e = new Yt(
       this.canvas,
       this.childId,
       this.fromParentId,
@@ -3765,7 +3775,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 Et(
+    const t = this.canvas.model.fields.get(this.fieldId), e = new Tt(
       this.canvas,
       this.fieldId,
       this.to,
@@ -3777,7 +3787,7 @@ class Re {
     const t = this.canvas.model.fields.get(this.fieldId);
     if (t) {
       this.to = t.text;
-      const e = new Et(
+      const e = new Tt(
         this.canvas,
         this.fieldId,
         this.from,
@@ -3791,7 +3801,7 @@ class Re {
     const t = this.canvas.model.fields.get(this.fieldId);
     if (t) {
       this.from = t.text;
-      const e = new Et(
+      const e = new Tt(
         this.canvas,
         this.fieldId,
         this.to,
@@ -3802,12 +3812,12 @@ class Re {
     return t !== void 0;
   }
 }
-class Qo {
+class qo {
   constructor(t, e, a, l) {
     this.canvas = t, this.id = e, this.from = a, this.to = l;
   }
   do() {
-    const t = new Tt(
+    const t = new Mt(
       this.canvas,
       this.id,
       this.to,
@@ -3816,7 +3826,7 @@ class Qo {
     return this.canvas.collabEngine.doCollaboratively(t), !0;
   }
   undo() {
-    const t = new Tt(
+    const t = new Mt(
       this.canvas,
       this.id,
       this.from,
@@ -3829,7 +3839,7 @@ class Qo {
     return !e.rootElement.removed;
   }
   redo() {
-    const t = new Tt(
+    const t = new Mt(
       this.canvas,
       this.id,
       this.to,
@@ -3842,7 +3852,7 @@ class Qo {
     return !e.rootElement.removed;
   }
 }
-class ti {
+class Jo {
   constructor(t, e, a, l, r, i) {
     this.canvas = t, this.nodeIds = e, this.sectionIds = a, this.portIds = l, this.connectionIds = r, this.fieldIds = i;
   }
@@ -3884,7 +3894,7 @@ class ti {
     return this.do();
   }
 }
-class ei {
+class Qo {
   constructor(t, e, a, l) {
     this.canvas = t, this.nodes = e, this.connections = a, this.coords = l;
   }
@@ -3975,7 +3985,7 @@ class ei {
     return this.canvas.collabEngine.doCollaboratively(e), t;
   }
 }
-class Yt {
+class zt {
   constructor(t) {
     this.type = t, this.defaultPrevented = !1;
   }
@@ -3983,8 +3993,8 @@ class Yt {
     this.defaultPrevented = !0;
   }
 }
-var Qe = /* @__PURE__ */ ((s) => (s[s.Zoom = 0] = "Zoom", s[s.DoubleClick = 1] = "DoubleClick", s[s.SecondaryClick = 2] = "SecondaryClick", s[s.Selection = 3] = "Selection", s[s.Highlight = 4] = "Highlight", s))(Qe || {});
-class oi extends Yt {
+var qe = /* @__PURE__ */ ((s) => (s[s.Zoom = 0] = "Zoom", s[s.DoubleClick = 1] = "DoubleClick", s[s.SecondaryClick = 2] = "SecondaryClick", s[s.Selection = 3] = "Selection", s[s.Highlight = 4] = "Highlight", s[s.DraggingNode = 5] = "DraggingNode", s))(qe || {});
+class ti extends zt {
   /**
    * Create a diagram zoom event.
    *
@@ -3997,7 +4007,7 @@ class oi extends Yt {
     ), this.coords = t, this.zoom = e;
   }
 }
-class pt extends Yt {
+class pt extends zt {
   /**
    * Create a diagram double click event.
    *
@@ -4012,7 +4022,7 @@ class pt extends Yt {
     ), this.cause = t, this.target = e, this.coords = a;
   }
 }
-class mt extends Yt {
+class mt extends zt {
   /**
    * Create a diagram secondary click event.
    *
@@ -4027,7 +4037,7 @@ class mt extends Yt {
     ), this.cause = t, this.target = e, this.coords = a;
   }
 }
-class G extends Yt {
+class G extends zt {
   /**
    * Create a diagram selection event.
    *
@@ -4041,7 +4051,7 @@ class G extends Yt {
     ), this.targets = t, this.selected = e;
   }
 }
-class tt extends Yt {
+class tt extends zt {
   /**
    * Create a diagram highlight event.
    *
@@ -4054,7 +4064,20 @@ class tt extends Yt {
     ), this.target = t;
   }
 }
-class to extends At {
+class ei extends zt {
+  /**
+   * Create a diagram dragging node event.
+   *
+   * @param target Diagram node which is targeted by the event.
+   */
+  constructor(t) {
+    super(
+      5
+      /* DraggingNode */
+    ), this.target = t;
+  }
+}
+class Je extends xt {
   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`);
@@ -4083,7 +4106,7 @@ class to extends At {
     return this.priority;
   }
 }
-class ii extends ft {
+class oi extends ft {
   /**
    * Instance a set of decorators for the given model. This method is used internally.
    * @private
@@ -4103,7 +4126,7 @@ class ii extends ft {
    * @returns The instanced decorator.
    */
   new(t, e, a, l, r, i, n, o = "floating", d = "floating") {
-    const c = new to(
+    const c = new Je(
       this.model,
       t,
       e,
@@ -4122,7 +4145,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 At {
+class ii extends xt {
   constructor(t, e, a, l, r, i, n) {
     if (t.objects.get(n) !== void 0)
       throw new Error(`DiagramObject with id "${n}" already exists`);
@@ -4151,7 +4174,7 @@ class si extends At {
     return this.priority;
   }
 }
-class ni extends ft {
+class si extends ft {
   /**
    * Instance a set of objects for the given model. This method is used internally.
    * @private
@@ -4171,7 +4194,7 @@ class ni extends ft {
    * @returns The instanced object.
    */
   new(t, e, a, l, r, i) {
-    const n = new si(
+    const n = new ii(
       this.model,
       t,
       e,
@@ -4187,9 +4210,9 @@ class ni extends ft {
     e && (super.remove(t), e.updateInView());
   }
 }
-class eo {
+class Qe {
   constructor(t, e, a, l, r, i = []) {
-    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);
+    this.nodes = new Go(this), this.sections = new _o(this), this.ports = new Xo(this), this.connections = new Po(this), this.fields = new zo(this), this.objects = new si(this), this.decorators = new oi(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 kt(new oe(i), this);
   }
   /**
    * Deletes everything in this diagram.
@@ -4199,7 +4222,7 @@ class eo {
     this.canvas?.cancelAllUserActions(), this.id = void 0, this.name = "", this.description = void 0, this.createdAt = /* @__PURE__ */ new Date(), this.updatedAt = /* @__PURE__ */ new Date(), this.logicalClock = 0, this.nodes.clear(), this.sections.clear(), this.ports.clear(), this.connections.clear(), this.fields.clear(), this.objects.clear(), this.decorators.clear(), this.valueSet.resetValues(), this.canvas?.updateModelInView();
   }
 }
-const vt = (s) => !!s.button, he = (s, t, e, a, l, r, i, n, o) => yo(
+const vt = (s) => !!s.button, he = (s, t, e, a, l, r, i, n, o) => mo(
   s,
   [t, ...r, e],
   a,
@@ -4212,7 +4235,7 @@ const vt = (s) => !!s.button, he = (s, t, e, a, l, r, i, n, o) => yo(
   ) * i
 ), S = (s) => {
   s ? L.select("body").style("cursor", s) : L.select("body").style("cursor", E.Auto);
-}, ct = (s) => s instanceof z ? s : s instanceof F ? s.node || s : s.rootElement instanceof z || s.rootElement instanceof F || s.rootElement instanceof bt ? ct(s.rootElement) : s, be = (s) => {
+}, ct = (s) => s instanceof z ? s : s instanceof F ? s.node || s : s.rootElement instanceof z || s.rootElement instanceof F || s.rootElement instanceof wt ? ct(s.rootElement) : s, be = (s) => {
   if (s instanceof z)
     return s.type.resizableX !== !1;
   if (s instanceof F) {
@@ -4234,7 +4257,7 @@ const vt = (s) => !!s.button, he = (s, t, e, a, l, r, i, n, o) => yo(
   return !1;
 }, ge = (s) => {
   s.filter(".shaped-look").append("path"), s.filter(".image-look").append("image").attr("preserveAspectRatio", "none"), s.filter(".stretchable-image-look").append("image").attr("class", "top-left-image").attr("preserveAspectRatio", "none"), s.filter(".stretchable-image-look").append("image").attr("class", "top-image").attr("preserveAspectRatio", "none"), s.filter(".stretchable-image-look").append("image").attr("class", "top-right-image").attr("preserveAspectRatio", "none"), s.filter(".stretchable-image-look").append("image").attr("class", "left-image").attr("preserveAspectRatio", "none"), s.filter(".stretchable-image-look").append("image").attr("class", "center-image").attr("preserveAspectRatio", "none"), s.filter(".stretchable-image-look").append("image").attr("class", "right-image").attr("preserveAspectRatio", "none"), s.filter(".stretchable-image-look").append("image").attr("class", "bottom-left-image").attr("preserveAspectRatio", "none"), s.filter(".stretchable-image-look").append("image").attr("class", "bottom-image").attr("preserveAspectRatio", "none"), s.filter(".stretchable-image-look").append("image").attr("class", "bottom-right-image").attr("preserveAspectRatio", "none");
-}, zt = {
+}, Vt = {
   fillColor: "#FFFFFF",
   borderColor: "#000000",
   borderThickness: 1,
@@ -4243,7 +4266,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 || Mt.Rectangle,
+      t.look.shape || Nt.Rectangle,
       0,
       0,
       t.width,
@@ -4251,18 +4274,18 @@ const vt = (s) => !!s.button, he = (s, t, e, a, l, r, i, n, o) => yo(
     )
   ).attr(
     "fill",
-    (t) => t.look.fillColor || zt.fillColor
+    (t) => t.look.fillColor || Vt.fillColor
   ).attr(
     "stroke",
-    (t) => t.look.borderColor || zt.borderColor
+    (t) => t.look.borderColor || Vt.borderColor
   ).attr(
     "stroke-width",
-    (t) => `${t.look.borderThickness || zt.borderThickness}px`
+    (t) => `${t.look.borderThickness || Vt.borderThickness}px`
   ).attr(
     "stroke-dasharray",
     (t) => ve(
-      t.look.borderStyle || zt.borderStyle,
-      t.type?.defaultLook?.borderThickness || t.look?.borderThickness || zt.borderThickness
+      t.look.borderStyle || Vt.borderStyle,
+      t.type?.defaultLook?.borderThickness || t.look?.borderThickness || Vt.borderThickness
     )
   ), s.filter(".image-look").select("image").attr("x", 0).attr("y", 0).attr("width", (t) => t.width).attr("height", (t) => t.height).attr("href", (t) => t.look.backgroundImage), s.filter(".stretchable-image-look").select("image.top-left-image").attr("x", 0).attr("y", 0).attr("width", (t) => t.look.leftMargin).attr("height", (t) => t.look.topMargin).attr(
     "href",
@@ -4301,13 +4324,13 @@ const vt = (s) => !!s.button, he = (s, t, e, a, l, r, i, n, o) => yo(
     "href",
     (t) => t.look.backgroundImageBottomRight
   );
-}, Rt = {
+}, Ot = {
   style: "dots",
   color: "rgba(0, 0, 0, 0.1)",
   snap: !1,
   spacing: 10,
   thickness: 0.05
-}, ri = (s, t, e) => {
+}, ni = (s, t, e) => {
   const a = t.append("defs");
   if (s.gridSize > 0 && isFinite(s.gridSize)) {
     const l = a.append("pattern").attr("id", e).attr("x", -s.gridSize / 2).attr("y", -s.gridSize / 2).attr("width", s.gridSize).attr("height", s.gridSize).attr("patternUnits", "userSpaceOnUse");
@@ -4327,10 +4350,10 @@ 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, W = 32, xt = we + W, ai = Math.PI / 4, li = 100, Ve = {
+}, we = 96, W = 32, Et = we + W, ri = Math.PI / 4, ai = 100, Ve = {
   customButtons: []
 };
-class di {
+class li {
   /**
    * Constructs a context menu object.
    * @public
@@ -4346,7 +4369,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] - 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) => {
+    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] - Et}px`).attr("y", `${e[1] - Et}px`).attr("width", `${2 * Et}px`).attr("height", `${2 * Et}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();
@@ -4388,22 +4411,22 @@ class di {
       onPress: void 0
     });
     for (let i = 0; i < r.length; ++i) {
-      const n = r[i], o = n.onPress, d = (i + 0.5 - r.length / 2) * ai, c = l.append("xhtml:div").attr(
+      const n = r[i], o = n.onPress, d = (i + 0.5 - r.length / 2) * ri, 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 * 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));
+        o && h.key === Z.Enter && (h.preventDefault(), o(this.canvas));
       });
-      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) => {
+      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(ai).tween("progress", () => (h) => {
         const f = d * h;
         return c.style(
           "left",
-          `${Math.sin(f) * we - W + xt}px`
+          `${Math.sin(f) * we - W + Et}px`
         ).style(
           "top",
-          `${-Math.cos(f) * we - W + xt}px`
+          `${-Math.cos(f) * we - W + Et}px`
         );
       });
     }
@@ -4416,7 +4439,7 @@ class di {
     this.contextMenuContainer?.remove(), this.contextMenuContainer = void 0;
   }
 }
-class ci extends ft {
+class di extends ft {
   /**
    * Constructs a user highlight object.
    * @public
@@ -4438,7 +4461,7 @@ class ci extends ft {
    * @param element
    */
   focusOn(t) {
-    this.clear(), this.focus = t, (t instanceof ht || t instanceof to) && t.rootElement ? this.focusOn(t.rootElement) : this.add(t);
+    this.clear(), this.focus = t, (t instanceof ht || t instanceof Je) && t.rootElement ? this.focusOn(t.rootElement) : this.add(t);
   }
   add(t) {
     if (super.add(t), t instanceof z) {
@@ -4460,7 +4483,7 @@ class ci extends ft {
           super.add(e), this.canvas.updatePortsInView(e.id);
         t.label && (super.add(t.label), this.canvas.updateFieldsInView(t.label.id)), this.canvas.updateSectionsInView(t.id);
       }
-    else t instanceof bt ? (t.label && (super.add(t.label), this.canvas.updateFieldsInView(t.label.id)), this.canvas.updatePortsInView(t.id)) : t instanceof dt && this.canvas.updateConnectionsInView(t.id);
+    else t instanceof wt ? (t.label && (super.add(t.label), this.canvas.updateFieldsInView(t.label.id)), this.canvas.updatePortsInView(t.id)) : t instanceof dt && this.canvas.updateConnectionsInView(t.id);
   }
   clear() {
     for (; this.entities.length > 0; ) {
@@ -4470,13 +4493,13 @@ class ci extends ft {
     this.focus = void 0;
   }
 }
-const hi = 1;
-class oo {
+const ci = 1;
+class to {
   export(t, e = !1) {
     const a = {
       name: t.name,
       type: t.type,
-      typeVersion: hi,
+      typeVersion: ci,
       createdAt: t.createdAt,
       updatedAt: t.updatedAt,
       nodes: [],
@@ -4509,8 +4532,8 @@ class oo {
         n.push({
           id: o.id,
           type: o.type?.id,
-          coords: It(o.coords),
-          connectionPoint: It(o.connectionPoint || o.coords),
+          coords: Lt(o.coords),
+          connectionPoint: Lt(o.connectionPoint || o.coords),
           direction: o.direction,
           label: o.label?.text || "",
           ...e ? {
@@ -4528,7 +4551,7 @@ class oo {
         label: i.label?.text || "",
         indexXInNode: i.indexXInNode,
         indexYInNode: i.indexYInNode,
-        coords: It(i.coords),
+        coords: Lt(i.coords),
         width: i.width,
         height: i.height,
         ...e ? {
@@ -4546,8 +4569,8 @@ class oo {
       r.push({
         id: i.id,
         type: i.type?.id,
-        coords: It(i.coords),
-        connectionPoint: It(i.connectionPoint || i.coords),
+        coords: Lt(i.coords),
+        connectionPoint: Lt(i.connectionPoint || i.coords),
         direction: i.direction,
         label: i.label?.text || "",
         ...e ? {
@@ -4566,7 +4589,7 @@ class oo {
       sections: l,
       ports: r,
       label: t.label?.text || "",
-      coords: It(t.coords),
+      coords: Lt(t.coords),
       width: t.width,
       height: t.height,
       data: t.valueSet.getValues(),
@@ -4614,17 +4637,17 @@ class oo {
     } : {};
   }
 }
-const gi = "Diagram properties";
-class fi extends ft {
+const hi = "Diagram properties";
+class gi extends ft {
   /**
    * Constructs a user selection object.
    * @public
    * @param canvas A canvas.
    */
   constructor(t, e) {
-    super(), this.canvas = t, this.canvas.propertyEditorChanges$.pipe(go(2e3)).subscribe(() => {
+    super(), this.canvas = t, this.canvas.propertyEditorChanges$.pipe(co(2e3)).subscribe(() => {
       this.makeUpdateValuesAction();
-    }), this.diagramPropertiesText = e !== void 0 ? e : gi;
+    }), this.diagramPropertiesText = e !== void 0 ? e : hi;
   }
   add(t) {
     if (!this.contains(t.id) && (this.length === 0 ? this.propertyEditorSelection === void 0 && (t instanceof z || t instanceof dt) ? this.openInPropertyEditor(t) : this.propertyEditorSelection === void 0 && t instanceof F ? this.openInPropertyEditor(t.node) : this.openInPropertyEditor(void 0) : this.openInPropertyEditor(void 0), super.add(t), t.updateInView(), t instanceof z && t.sections))
@@ -4672,8 +4695,8 @@ class fi extends ft {
     if (this.length > 0) {
       const t = [], e = [], a = [], l = [], r = [];
       for (const n of this.all())
-        n instanceof z ? t.push(n.id) : n instanceof F ? e.push(n.id) : n instanceof bt ? a.push(n.id) : n instanceof dt ? l.push(n.id) : n instanceof ht && r.push(n.id);
-      const i = new ti(
+        n instanceof z ? t.push(n.id) : n instanceof F ? e.push(n.id) : n instanceof wt ? a.push(n.id) : n instanceof dt ? l.push(n.id) : n instanceof ht && r.push(n.id);
+      const i = new Jo(
         this.canvas,
         t,
         e,
@@ -4689,7 +4712,7 @@ class fi extends ft {
    * @public
    */
   copyToClipboard() {
-    const t = { type: "daga-user-selection", nodes: [], connections: [] }, e = new oo();
+    const t = { type: "daga-user-selection", nodes: [], connections: [] }, e = new to();
     for (const a of this.all())
       a instanceof z && t.nodes.push(e.exportNode(a, !1)), a instanceof dt && t.connections.push(
         e.exportConnection(a, !1)
@@ -4713,7 +4736,7 @@ class fi extends ft {
         const a = JSON.parse(e);
         if (a.type !== "daga-user-selection")
           return;
-        const l = new ei(
+        const l = new Qo(
           this.canvas,
           a.nodes,
           a.connections,
@@ -4739,22 +4762,22 @@ class fi extends ft {
     if (a === void 0)
       return;
     const l = t?.valueSet;
-    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));
+    l ? (this.propertyEditorSelection = t, e && (this.propertyEditorValues = At(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)
       return;
-    const t = this.propertyEditorSelection instanceof eo ? void 0 : this.propertyEditorSelection.id;
-    if (wt(
+    const t = this.propertyEditorSelection instanceof Qe ? void 0 : this.propertyEditorSelection.id;
+    if (Ct(
       this.propertyEditorValues,
       this.propertyEditorSelection?.valueSet.getValues()
     ))
       return;
-    const e = this.propertyEditorValues, a = Ct(this.propertyEditorSelection?.valueSet.getValues()), [l, r] = Be(
+    const e = this.propertyEditorValues, a = At(this.propertyEditorSelection?.valueSet.getValues()), [l, r] = De(
       e,
       a,
       this.propertyEditorSelection?.valueSet
-    ), i = new Qo(
+    ), i = new qo(
       this.canvas,
       t,
       l,
@@ -4763,10 +4786,7 @@ class fi extends ft {
     i.do(), this.canvas.actionStack.add(i), this.propertyEditorValues = a;
   }
 }
-const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
-  const a = ui(e), l = Math.sin(a), r = Math.cos(a), i = (Math.abs(s * r) - Math.abs(t * l)) / (r * r - l * l), n = (Math.abs(s * l) - Math.abs(t * r)) / (l * l - r * r);
-  return [i, n];
-}, pi = (s) => /^((?!chrome|android).)*safari/i.test(s), He = pi(navigator.userAgent), mi = 12, H = 6, vi = 25, ue = "diagram-connection-unfinished", te = class te {
+const fi = 12, H = 6, ui = 25, ue = "diagram-connection-unfinished", te = class te {
   /**
    * Constructs a canvas object.
    * @public
@@ -4774,24 +4794,24 @@ 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 jt(), this.diagramChange$ = new jt(), this.diagramEvent$ = new jt(), this.propertyEditorChanges$ = new jt(), 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 Zt(), this.diagramChange$ = new Zt(), this.diagramEvent$ = new Zt(), this.propertyEditorChanges$ = new Zt(), this.parentComponent = t, this.model = new Qe(
       this,
       void 0,
       e.name || "unnamed",
       "",
       e.type || "",
       e.properties || []
-    ), this.userSelection = new fi(
+    ), this.userSelection = new gi(
       this,
       e.components?.propertyEditor?.title
-    ), this.userHighlight = new ci(
+    ), this.userHighlight = new di(
       this,
       e.canvas?.highlightSections !== !1
-    ), this.contextMenu = new di(this, e.canvas?.contextMenu), this.backgroundColor = e.canvas?.backgroundColor || "#FFFFFF", this.gridStyle = e.canvas?.grid?.style ?? Rt.style, this.gridSize = e.canvas?.grid?.enabled === !1 || e.canvas?.grid === void 0 ? 0 : Math.abs(e.canvas?.grid?.spacing || Rt.spacing), this.gridThickness = Math.abs(
-      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)
+    ), this.contextMenu = new li(this, e.canvas?.contextMenu), this.backgroundColor = e.canvas?.backgroundColor || "#FFFFFF", this.gridStyle = e.canvas?.grid?.style ?? Ot.style, this.gridSize = e.canvas?.grid?.enabled === !1 || e.canvas?.grid === void 0 ? 0 : Math.abs(e.canvas?.grid?.spacing || Ot.spacing), this.gridThickness = Math.abs(
+      e.canvas?.grid?.thickness || Ot.thickness
+    ), this.gridColor = e.canvas?.grid?.color || Ot.color, this.snapToGrid = e.canvas?.grid?.enabled === !1 || e.canvas?.grid === void 0 ? !1 : e.canvas?.grid?.snap || Ot.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 jo(this, ui), this.collabEngine = new Wo(this), e.nodeTypes)
       for (const a of e.nodeTypes) {
-        const l = new je({
+        const l = new Xe({
           ...e.nodeTypeDefaults,
           ...a
         });
@@ -4799,7 +4819,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       }
     if (e.portTypes)
       for (const a of e.portTypes) {
-        const l = new Wo({
+        const l = new Bo({
           ...e.portTypeDefaults,
           ...a
         });
@@ -4807,7 +4827,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       }
     if (e.connectionTypes) {
       for (const a of e.connectionTypes) {
-        const l = new Xe({
+        const l = new Ye({
           ...e.connectionTypeDefaults,
           ...a
         });
@@ -4858,7 +4878,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       const r = new pt(l, null);
       this.diagramEvent$.next(r);
     }).on($.KeyDown, (l) => {
-      if (!l.ctrlKey && (l.key === K.Delete || l.key === K.Backspace) && this.canUserPerformAction(k.Remove) && (this.userSelection.removeFromModel(), this.cancelAllUserActions()), l.ctrlKey && l.key === "a") {
+      if (!l.ctrlKey && (l.key === Z.Delete || l.key === Z.Backspace) && this.canUserPerformAction(k.Remove) && (this.userSelection.removeFromModel(), this.cancelAllUserActions()), l.ctrlKey && l.key === "a") {
         l.preventDefault();
         for (const r of this.model.nodes)
           this.userSelection.add(r);
@@ -4891,7 +4911,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           ])
         ), this.cancelAllUserActions();
       }
-      l.ctrlKey && l.key === "y" && (l.preventDefault(), this.actionStack.redo()), l.ctrlKey && l.key === "z" && (l.preventDefault(), this.actionStack.undo()), l.key === "+" && this.canUserPerformAction(k.Zoom) && (l.preventDefault(), this.zoomBy(this.zoomFactor)), l.key === "-" && this.canUserPerformAction(k.Zoom) && (l.preventDefault(), this.zoomBy(1 / this.zoomFactor)), l.key === K.ArrowLeft && this.canUserPerformAction(k.Zoom) && (l.preventDefault(), this.translateBy(this.panRate / this.zoomTransform.k, 0)), l.key === K.ArrowRight && this.canUserPerformAction(k.Zoom) && (l.preventDefault(), this.translateBy(-this.panRate / this.zoomTransform.k, 0)), l.key === K.ArrowDown && this.canUserPerformAction(k.Zoom) && (l.preventDefault(), this.translateBy(0, -this.panRate / this.zoomTransform.k)), l.key === K.ArrowUp && this.canUserPerformAction(k.Zoom) && (l.preventDefault(), this.translateBy(0, this.panRate / this.zoomTransform.k));
+      l.ctrlKey && l.key === "y" && (l.preventDefault(), this.actionStack.redo()), l.ctrlKey && l.key === "z" && (l.preventDefault(), this.actionStack.undo()), l.key === "+" && this.canUserPerformAction(k.Zoom) && (l.preventDefault(), this.zoomBy(this.zoomFactor)), l.key === "-" && this.canUserPerformAction(k.Zoom) && (l.preventDefault(), this.zoomBy(1 / this.zoomFactor)), l.key === Z.ArrowLeft && this.canUserPerformAction(k.Zoom) && (l.preventDefault(), this.translateBy(this.panRate / this.zoomTransform.k, 0)), l.key === Z.ArrowRight && this.canUserPerformAction(k.Zoom) && (l.preventDefault(), this.translateBy(-this.panRate / this.zoomTransform.k, 0)), l.key === Z.ArrowDown && this.canUserPerformAction(k.Zoom) && (l.preventDefault(), this.translateBy(0, -this.panRate / this.zoomTransform.k)), l.key === Z.ArrowUp && this.canUserPerformAction(k.Zoom) && (l.preventDefault(), this.translateBy(0, this.panRate / this.zoomTransform.k));
     });
     const a = this.selectSVGElement().append("g").attr("class", "daga-canvas-view").attr("width", "100%").attr("height", "100%");
     a.call(
@@ -4908,8 +4928,8 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         this.selectCanvasElements().attr("transform", r), L.select(`#${this.backgroundPatternId}`).attr(
           "patternTransform",
           r
-        ), He && this.updateFieldsInView(), this.contextMenu.close(), this.diagramEvent$.next(
-          new oi(
+        ), this.contextMenu.close(), this.diagramEvent$.next(
+          new ti(
             [this.zoomTransform.x, this.zoomTransform.y],
             this.zoomTransform.k
           )
@@ -4933,14 +4953,14 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       }
       this.userSelection.openInPropertyEditor(this.model);
     }).call(
-      L.drag().filter((l) => this.multipleSelectionOn || vt(l)).on(A.Start, (l) => {
+      L.drag().filter((l) => this.multipleSelectionOn || vt(l)).on(I.Start, (l) => {
         this.startMultipleSelection(l);
-      }).on(A.Drag, (l) => {
+      }).on(I.Drag, (l) => {
         this.continueMultipleSelection(l);
-      }).on(A.End, (l) => {
+      }).on(I.End, (l) => {
         this.finishMultipleSelection(l);
       })
-    ), ri(this, a, this.backgroundPatternId), a.append("g").attr("class", "daga-canvas-elements");
+    ), ni(this, a, this.backgroundPatternId), a.append("g").attr("class", "daga-canvas-elements");
   }
   getZoomLevel() {
     return this.zoomTransform.k;
@@ -4976,8 +4996,8 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       return (f) => {
         try {
           if (!h) {
-            const b = f * (o - r) + r, m = f * (d - i) + i, p = f * (c - n) + n;
-            this.zoomBehavior.scaleTo(this.selectCanvasView(), p), this.zoomBehavior.translateTo(
+            const b = f * (o - r) + r, m = f * (d - i) + i, v = f * (c - n) + n;
+            this.zoomBehavior.scaleTo(this.selectCanvasView(), v), this.zoomBehavior.translateTo(
               this.selectCanvasView(),
               b,
               m
@@ -4991,13 +5011,13 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
   }
   center(t, e, a) {
     if (this.model.nodes.length > 0) {
-      const l = this.selectCanvasView().select("rect").node()?.getBBox(), r = t?.map((v) => this.model.nodes.get(v)).filter((v) => !!v) || this.model.nodes.all(), i = Math.min(...r.map((v) => v.coords[0])), n = Math.max(
-        ...r.map((v) => v.coords[0] + v.width)
-      ), o = (i + n) / 2, d = n - i, c = l.width, h = Math.min(...r.map((v) => v.coords[1])), f = Math.max(
-        ...r.map((v) => v.coords[1] + v.height)
-      ), b = (h + f) / 2, m = f - h, p = l.height, u = Math.min(
+      const l = this.selectCanvasView().select("rect").node()?.getBBox(), r = t?.map((p) => this.model.nodes.get(p)).filter((p) => !!p) || this.model.nodes.all(), i = Math.min(...r.map((p) => p.coords[0])), n = Math.max(
+        ...r.map((p) => p.coords[0] + p.width)
+      ), o = (i + n) / 2, d = n - i, c = l.width, h = Math.min(...r.map((p) => p.coords[1])), f = Math.max(
+        ...r.map((p) => p.coords[1] + p.height)
+      ), b = (h + f) / 2, m = f - h, v = l.height, u = Math.min(
         c / d,
-        p / m,
+        v / m,
         e !== void 0 ? e : 1
       );
       this.zoomAndPanTo(o, b, u, a);
@@ -5100,21 +5120,21 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       const o = new pt(i, n);
       this.diagramEvent$.next(o);
     }).call(
-      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, n) => {
+      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(I.Start, (i, n) => {
         this.multipleSelectionOn || this.secondaryButton ? this.startMultipleSelection(i) : this.startMovingNode(i, n);
-      }).on(A.Drag, (i, n) => {
+      }).on(I.Drag, (i, n) => {
         this.multipleSelectionOn || this.secondaryButton ? this.continueMultipleSelection(i) : this.continueMovingNode(i, n);
-      }).on(A.End, (i, n) => {
+      }).on(I.End, (i, n) => {
         this.multipleSelectionOn || this.secondaryButton ? this.finishMultipleSelection(i) : this.finishMovingNode(i, n), this.secondaryButton = !1;
       })
     ), ge(
       l
-    ), l.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", `${H}px`).on($.MouseOver, (i, n) => {
+    ), l.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", H).on($.MouseOver, (i, n) => {
       this.canUserPerformAction(k.StretchNode) && n.getResizableX() && !n.removed && S(E.EWResize);
     }).on($.MouseOut, (i, n) => {
       this.canUserPerformAction(k.StretchNode) && n.getResizableX() && !n.removed && S();
     }).call(
-      L.drag().on(A.Start, (i, n) => {
+      L.drag().on(I.Start, (i, n) => {
         this.canUserPerformAction(k.StretchNode) && n.getResizableX() && !n.removed ? (S(E.EWResize), this.currentAction = new X(
           this,
           k.StretchNode,
@@ -5122,12 +5142,12 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           n.getGeometry(),
           n.getGeometry()
         )) : S(E.NotAllowed);
-      }).on(A.Drag, (i, n) => {
+      }).on(I.Drag, (i, n) => {
         if (this.canUserPerformAction(k.StretchNode) && n.getResizableX() && !n.removed) {
           const o = this.getPointerLocationRelativeToCanvas(i);
           n.stretch(g.Left, n.coords[0] - o[0]);
         }
-      }).on(A.End, (i, n) => {
+      }).on(I.End, (i, n) => {
         if (this.canUserPerformAction(k.StretchNode) && n.getResizableX() && !n.removed && this.currentAction instanceof X && this.currentAction.intent === k.StretchNode) {
           let o = this.getPointerLocationRelativeToCanvas(i);
           this.snapToGrid && (o = this.getClosestGridPoint([
@@ -5137,12 +5157,12 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         }
         S();
       })
-    ), l.filter(".resizable-y").append("line").attr("class", "top-resizer").attr("stroke", "transparent").attr("stroke-width", `${H}px`).on($.MouseOver, (i, n) => {
+    ), l.filter(".resizable-y").append("line").attr("class", "top-resizer").attr("stroke", "transparent").attr("stroke-width", H).on($.MouseOver, (i, n) => {
       this.canUserPerformAction(k.StretchNode) && n.getResizableY() && !n.removed && S(E.NSResize);
     }).on($.MouseOut, (i, n) => {
       this.canUserPerformAction(k.StretchNode) && n.getResizableY() && !n.removed && S();
     }).call(
-      L.drag().on(A.Start, (i, n) => {
+      L.drag().on(I.Start, (i, n) => {
         this.canUserPerformAction(k.StretchNode) && n.getResizableY() && !n.removed ? (S(E.NSResize), this.currentAction = new X(
           this,
           k.StretchNode,
@@ -5150,12 +5170,12 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           n.getGeometry(),
           n.getGeometry()
         )) : S(E.NotAllowed);
-      }).on(A.Drag, (i, n) => {
+      }).on(I.Drag, (i, n) => {
         if (this.canUserPerformAction(k.StretchNode) && n.getResizableY() && !n.removed) {
           const o = this.getPointerLocationRelativeToCanvas(i);
           n.stretch(g.Top, n.coords[1] - o[1]);
         }
-      }).on(A.End, (i, n) => {
+      }).on(I.End, (i, n) => {
         if (this.canUserPerformAction(k.StretchNode) && n.getResizableY() && !n.removed && this.currentAction instanceof X && this.currentAction.intent === k.StretchNode) {
           let o = this.getPointerLocationRelativeToCanvas(i);
           this.snapToGrid && (o = this.getClosestGridPoint([
@@ -5165,12 +5185,12 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         }
         S();
       })
-    ), l.filter(".resizable-x").append("line").attr("class", "right-resizer").attr("stroke", "transparent").attr("stroke-width", `${H}px`).on($.MouseOver, (i, n) => {
+    ), l.filter(".resizable-x").append("line").attr("class", "right-resizer").attr("stroke", "transparent").attr("stroke-width", H).on($.MouseOver, (i, n) => {
       this.canUserPerformAction(k.StretchNode) && n.getResizableX() && !n.removed && S(E.EWResize);
     }).on($.MouseOut, (i, n) => {
       this.canUserPerformAction(k.StretchNode) && n.getResizableX() && !n.removed && S();
     }).call(
-      L.drag().on(A.Start, (i, n) => {
+      L.drag().on(I.Start, (i, n) => {
         this.canUserPerformAction(k.StretchNode) && n.getResizableX() && !n.removed ? (S(E.EWResize), this.currentAction = new X(
           this,
           k.StretchNode,
@@ -5178,12 +5198,12 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           n.getGeometry(),
           n.getGeometry()
         )) : S(E.NotAllowed);
-      }).on(A.Drag, (i, n) => {
+      }).on(I.Drag, (i, n) => {
         if (this.canUserPerformAction(k.StretchNode) && n.getResizableX() && !n.removed) {
           const o = this.getPointerLocationRelativeToCanvas(i);
           n.stretch(g.Right, o[0] - (n.coords[0] + n.width));
         }
-      }).on(A.End, (i, n) => {
+      }).on(I.End, (i, n) => {
         if (this.canUserPerformAction(k.StretchNode) && n.getResizableX() && !n.removed && this.currentAction instanceof X && this.currentAction.intent === k.StretchNode) {
           let o = this.getPointerLocationRelativeToCanvas(i);
           this.snapToGrid && (o = this.getClosestGridPoint([
@@ -5193,12 +5213,12 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         }
         S();
       })
-    ), l.filter(".resizable-y").append("line").attr("class", "bottom-resizer").attr("stroke", "transparent").attr("stroke-width", `${H}px`).on($.MouseOver, (i, n) => {
+    ), l.filter(".resizable-y").append("line").attr("class", "bottom-resizer").attr("stroke", "transparent").attr("stroke-width", H).on($.MouseOver, (i, n) => {
       this.canUserPerformAction(k.StretchNode) && n.getResizableY() && !n.removed && S(E.NSResize);
     }).on($.MouseOut, (i, n) => {
       this.canUserPerformAction(k.StretchNode) && n.getResizableY() && !n.removed && S();
     }).call(
-      L.drag().on(A.Start, (i, n) => {
+      L.drag().on(I.Start, (i, n) => {
         this.canUserPerformAction(k.StretchNode) && n.getResizableY() && !n.removed ? (S(E.NSResize), this.currentAction = new X(
           this,
           k.StretchNode,
@@ -5206,7 +5226,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           n.getGeometry(),
           n.getGeometry()
         )) : S(E.NotAllowed);
-      }).on(A.Drag, (i, n) => {
+      }).on(I.Drag, (i, n) => {
         if (this.canUserPerformAction(k.StretchNode) && n.getResizableY() && !n.removed) {
           const o = this.getPointerLocationRelativeToCanvas(i);
           n.stretch(
@@ -5214,7 +5234,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
             o[1] - (n.coords[1] + n.height)
           );
         }
-      }).on(A.End, (i, n) => {
+      }).on(I.End, (i, n) => {
         if (this.canUserPerformAction(k.StretchNode) && n.getResizableY() && !n.removed && this.currentAction instanceof X && this.currentAction.intent === k.StretchNode) {
           let o = this.getPointerLocationRelativeToCanvas(i);
           this.snapToGrid && this.snapToGrid && (o = this.getClosestGridPoint([
@@ -5277,21 +5297,21 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       const o = new pt(i, n);
       this.diagramEvent$.next(o);
     }).call(
-      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, n) => {
+      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(I.Start, (i, n) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.startMultipleSelection(i);
         else {
           const o = n?.node;
           o ? this.startMovingNode(i, o) : S(E.NotAllowed);
         }
-      }).on(A.Drag, (i, n) => {
+      }).on(I.Drag, (i, n) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.continueMultipleSelection(i);
         else {
           const o = n?.node;
           o ? this.continueMovingNode(i, o) : S(E.NotAllowed);
         }
-      }).on(A.End, (i, n) => {
+      }).on(I.End, (i, n) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.finishMultipleSelection(i);
         else {
@@ -5302,12 +5322,12 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       })
     ), ge(
       l
-    ), l.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", `${H}px`).on($.MouseOver, (i, n) => {
+    ), l.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", H).on($.MouseOver, (i, n) => {
       this.canUserPerformAction(k.StretchSection) && n.getResizableX() && !n.removed && S(E.EWResize);
     }).on($.MouseOut, (i, n) => {
       this.canUserPerformAction(k.StretchSection) && n.getResizableX() && !n.removed && S();
     }).call(
-      L.drag().on(A.Start, (i, n) => {
+      L.drag().on(I.Start, (i, n) => {
         this.canUserPerformAction(k.StretchSection) && n.getResizableX() && !n.removed && n.node ? (S(E.EWResize), this.currentAction = new X(
           this,
           k.StretchSection,
@@ -5315,7 +5335,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           n.node.getGeometry(),
           n.node.getGeometry()
         )) : S(E.NotAllowed);
-      }).on(A.Drag, (i, n) => {
+      }).on(I.Drag, (i, n) => {
         if (this.canUserPerformAction(k.StretchSection) && n.getResizableX() && !n.removed && n.node) {
           const o = this.getPointerLocationRelativeToCanvas(i);
           n.node.stretchSections(
@@ -5325,7 +5345,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
             n.indexYInNode
           );
         }
-      }).on(A.End, (i, n) => {
+      }).on(I.End, (i, n) => {
         if (this.canUserPerformAction(k.StretchSection) && n.getResizableX() && !n.removed && this.currentAction instanceof X && this.currentAction.intent === k.StretchSection && n.node) {
           let o = this.getPointerLocationRelativeToCanvas(i);
           this.snapToGrid && (o = this.getClosestGridPoint(o)), n.node.stretchSections(
@@ -5337,12 +5357,12 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         }
         S();
       })
-    ), l.filter(".resizable-y").append("line").attr("class", "top-resizer").attr("stroke", "transparent").attr("stroke-width", `${H}px`).on($.MouseOver, (i, n) => {
+    ), l.filter(".resizable-y").append("line").attr("class", "top-resizer").attr("stroke", "transparent").attr("stroke-width", H).on($.MouseOver, (i, n) => {
       this.canUserPerformAction(k.StretchSection) && n.getResizableY() && !n.removed && S(E.NSResize);
     }).on($.MouseOut, (i, n) => {
       this.canUserPerformAction(k.StretchSection) && n.getResizableY() && !n.removed && S();
     }).call(
-      L.drag().on(A.Start, (i, n) => {
+      L.drag().on(I.Start, (i, n) => {
         this.canUserPerformAction(k.StretchSection) && n.getResizableY() && !n.removed && n.node ? (S(E.NSResize), this.currentAction = new X(
           this,
           k.StretchSection,
@@ -5350,7 +5370,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           n.node.getGeometry(),
           n.node.getGeometry()
         )) : S(E.NotAllowed);
-      }).on(A.Drag, (i, n) => {
+      }).on(I.Drag, (i, n) => {
         if (this.canUserPerformAction(k.StretchSection) && n.getResizableY() && !n.removed && n.node) {
           const o = this.getPointerLocationRelativeToCanvas(i);
           n.node.stretchSections(
@@ -5360,7 +5380,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
             n.indexYInNode
           );
         }
-      }).on(A.End, (i, n) => {
+      }).on(I.End, (i, n) => {
         if (this.canUserPerformAction(k.StretchSection) && n.getResizableY() && !n.removed && this.currentAction instanceof X && this.currentAction.intent === k.StretchSection && n.node) {
           let o = this.getPointerLocationRelativeToCanvas(i);
           this.snapToGrid && (o = this.getClosestGridPoint(o)), n.node.stretchSections(
@@ -5372,12 +5392,12 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         }
         S();
       })
-    ), l.filter(".resizable-x").append("line").attr("class", "right-resizer").attr("stroke", "transparent").attr("stroke-width", `${H}px`).on($.MouseOver, (i, n) => {
+    ), l.filter(".resizable-x").append("line").attr("class", "right-resizer").attr("stroke", "transparent").attr("stroke-width", H).on($.MouseOver, (i, n) => {
       this.canUserPerformAction(k.StretchSection) && n.getResizableX() && !n.removed && S(E.EWResize);
     }).on($.MouseOut, (i, n) => {
       this.canUserPerformAction(k.StretchSection) && n.getResizableX() && !n.removed && S();
     }).call(
-      L.drag().on(A.Start, (i, n) => {
+      L.drag().on(I.Start, (i, n) => {
         this.canUserPerformAction(k.StretchSection) && n.getResizableX() && !n.removed && n.node ? (S(E.EWResize), this.currentAction = new X(
           this,
           k.StretchSection,
@@ -5385,7 +5405,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           n.node.getGeometry(),
           n.node.getGeometry()
         )) : S(E.NotAllowed);
-      }).on(A.Drag, (i, n) => {
+      }).on(I.Drag, (i, n) => {
         if (this.canUserPerformAction(k.StretchSection) && n.getResizableX() && !n.removed && n.node) {
           const o = this.getPointerLocationRelativeToCanvas(i);
           n.node.stretchSections(
@@ -5395,7 +5415,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
             n.indexYInNode
           );
         }
-      }).on(A.End, (i, n) => {
+      }).on(I.End, (i, n) => {
         if (this.canUserPerformAction(k.StretchSection) && n.getResizableX() && !n.removed && this.currentAction instanceof X && this.currentAction.intent === k.StretchSection && n.node) {
           let o = this.getPointerLocationRelativeToCanvas(i);
           this.snapToGrid && (o = this.getClosestGridPoint(o)), n.node.stretchSections(
@@ -5407,12 +5427,12 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         }
         S();
       })
-    ), l.filter(".resizable-y").append("line").attr("class", "bottom-resizer").attr("stroke", "transparent").attr("stroke-width", `${H}px`).on($.MouseOver, (i, n) => {
+    ), l.filter(".resizable-y").append("line").attr("class", "bottom-resizer").attr("stroke", "transparent").attr("stroke-width", H).on($.MouseOver, (i, n) => {
       this.canUserPerformAction(k.StretchSection) && n.getResizableY() && !n.removed && S(E.NSResize);
     }).on($.MouseOut, (i, n) => {
       this.canUserPerformAction(k.StretchSection) && n.getResizableY() && !n.removed && S();
     }).call(
-      L.drag().on(A.Start, (i, n) => {
+      L.drag().on(I.Start, (i, n) => {
         this.canUserPerformAction(k.StretchSection) && n.getResizableY() && !n.removed && n.node ? (S(E.NSResize), this.currentAction = new X(
           this,
           k.StretchSection,
@@ -5420,7 +5440,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           n.node.getGeometry(),
           n.node.getGeometry()
         )) : S(E.NotAllowed);
-      }).on(A.Drag, (i, n) => {
+      }).on(I.Drag, (i, n) => {
         if (this.canUserPerformAction(k.StretchSection) && n.getResizableY() && !n.removed && n.node) {
           const o = this.getPointerLocationRelativeToCanvas(i);
           n.node.stretchSections(
@@ -5430,7 +5450,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
             n.indexYInNode
           );
         }
-      }).on(A.End, (i, n) => {
+      }).on(I.End, (i, n) => {
         if (this.canUserPerformAction(k.StretchSection) && n.getResizableY() && !n.removed && this.currentAction instanceof X && this.currentAction.intent === k.StretchSection && n.node) {
           let o = this.getPointerLocationRelativeToCanvas(i);
           this.snapToGrid && (o = this.getClosestGridPoint(o)), n.node.stretchSections(
@@ -5503,9 +5523,9 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       const o = new pt(i, n);
       this.diagramEvent$.next(o);
     }).call(
-      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, n) => {
+      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(I.Start, (i, n) => {
         this.multipleSelectionOn || this.secondaryButton ? this.startMultipleSelection(i) : this.canUserPerformAction(k.AddConnection) && (this.allowSharingPorts || n.incomingConnections.filter((o) => !o.removed).length === 0 && n.outgoingConnections.filter((o) => !o.removed).length === 0) && !n.removed ? (S(E.Grabbing), this.startConnection(n), this.unfinishedConnection && (this.unfinishedConnectionTracer = this.selectCanvasElements().append("path").attr("stroke", "none").attr("fill", "none"))) : S(E.NotAllowed);
-      }).on(A.Drag, (i, n) => {
+      }).on(I.Drag, (i, n) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.continueMultipleSelection(i);
         else if (this.canUserPerformAction(k.AddConnection) && !n.removed && this.unfinishedConnection !== void 0) {
@@ -5513,13 +5533,13 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           this.unfinishedConnectionTracer?.attr(
             "d",
             he(
-              this.unfinishedConnection.look.shape || ot.look.shape,
+              this.unfinishedConnection.look.shape || et.look.shape,
               this.unfinishedConnection.startCoords,
               o,
               this.unfinishedConnection.startDirection,
               this.unfinishedConnection.endDirection,
               this.unfinishedConnection.points,
-              this.unfinishedConnection.type.defaultLook.thickness || ot.look.thickness,
+              this.unfinishedConnection.type.defaultLook.thickness || et.look.thickness,
               this.unfinishedConnection.type.defaultStartMarkerLook?.width,
               this.unfinishedConnection.type.defaultEndMarkerLook?.width
             )
@@ -5548,16 +5568,16 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
             f && h < this.portHighlightRadius ? this.userHighlight.focusOn(f) : this.userHighlight.clear();
           }
         }
-      }).on(A.End, (i, n) => {
+      }).on(I.End, (i, n) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.finishMultipleSelection(i);
         else {
           if (this.canUserPerformAction(k.AddConnection) && !n.removed) {
             this.unfinishedConnectionTracer?.remove();
             const o = this.userHighlight.getFocus();
-            if (o instanceof bt)
+            if (o instanceof wt)
               this.finishConnection(o);
-            else if (o instanceof ht && o.rootElement instanceof bt)
+            else if (o instanceof ht && o.rootElement instanceof wt)
               this.finishConnection(o.rootElement);
             else if (o instanceof z || o instanceof F || o instanceof ht) {
               let d;
@@ -5620,74 +5640,75 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       const d = new pt(n, o);
       this.diagramEvent$.next(d);
     }).call(
-      L.drag().filter((n) => (this.secondaryButton = vt(n), !0)).on(A.Start, (n) => {
+      L.drag().filter((n) => (this.secondaryButton = vt(n), !0)).on(I.Start, (n) => {
         this.startMultipleSelection(n);
-      }).on(A.Drag, (n) => {
+      }).on(I.Drag, (n) => {
         this.continueMultipleSelection(n);
-      }).on(A.End, (n) => {
+      }).on(I.End, (n) => {
         this.finishMultipleSelection(n);
       })
     ), r.append("path").attr("class", "diagram-connection-path"), r.append("path").attr("class", "diagram-connection-path-box"), r.append("marker").attr("id", (n) => `${n.id}-start-marker`).attr("class", "diagram-connection-start-marker").append("image").attr("preserveAspectRatio", "none"), r.append("marker").attr("id", (n) => `${n.id}-end-marker`).attr("class", "diagram-connection-end-marker").append("image").attr("preserveAspectRatio", "none"), r.append("g").attr("class", "diagram-connection-start-label"), r.select("g.diagram-connection-start-label").append("path"), r.select("g.diagram-connection-start-label").append("text").style("user-select", "none"), r.append("g").attr("class", "diagram-connection-middle-label"), r.select("g.diagram-connection-middle-label").append("path"), r.select("g.diagram-connection-middle-label").append("text").style("user-select", "none"), r.append("g").attr("class", "diagram-connection-end-label"), r.select("g.diagram-connection-end-label").append("path"), r.select("g.diagram-connection-end-label").append("text").style("user-select", "none"), i.attr("opacity", (n) => n.removed ? 0.5 : 1).select("path.diagram-connection-path").attr(
       "d",
       (n) => he(
-        n.look.shape || ot.look.shape,
+        n.look.shape || et.look.shape,
         n.startCoords,
         n.endCoords,
         n.startDirection,
         n.endDirection,
         n.points,
-        n.type.defaultLook.thickness || ot.look.thickness,
+        n.type.defaultLook.thickness || et.look.thickness,
         n.type.defaultStartMarkerLook?.width,
         n.type.defaultEndMarkerLook?.width
       )
     ).attr("marker-start", (n) => `url(#${n.id}-start-marker)`).attr("marker-end", (n) => `url(#${n.id}-end-marker)`).attr(
       "stroke",
-      (n) => n.look.color || ot.look.color
-    ).attr("stroke-width", (n) => `${n.look.thickness}px`).attr(
+      (n) => n.look.color || et.look.color
+    ).attr(
+      "stroke-width",
+      (n) => n.look.thickness || et.look.thickness
+    ).attr(
       "stroke-dasharray",
       (n) => ve(
-        n.look.style || ot.look.style,
-        n.type.defaultLook.thickness || ot.look.thickness
+        n.look.style || et.look.style,
+        n.type.defaultLook.thickness || et.look.thickness
       )
     ).attr("fill", "none"), i.select("path.diagram-connection-path-box").attr(
       "d",
       (n) => he(
-        n.look.shape || ot.look.shape,
+        n.look.shape || et.look.shape,
         n.startCoords,
         n.endCoords,
         n.startDirection,
         n.endDirection,
         n.points,
-        n.type.defaultLook.thickness || ot.look.thickness,
+        n.type.defaultLook.thickness || et.look.thickness,
         n.type.defaultStartMarkerLook?.width,
         n.type.defaultEndMarkerLook?.width
       )
     ).attr("stroke", "transparent").attr("pointer-events", "stroke").attr(
       "stroke-width",
-      (n) => `${(n.look.thickness || ot.look.thickness) + mi}px`
+      (n) => (n.look.thickness || et.look.thickness) + fi
     ).attr(
       "stroke-dasharray",
       (n) => ve(
-        n.look.style || ot.look.style,
-        n.type.defaultLook.thickness || ot.look.thickness
+        n.look.style || et.look.style,
+        n.type.defaultLook.thickness || et.look.thickness
       )
     ).attr("fill", "none"), i.data().forEach((n) => {
       this.updateConnectionLabelsInView(n), this.updateConnectionMarkersInView(n);
     });
   }
   updateFieldsInView(...t) {
-    let e = this.selectCanvasElements().selectAll(
-      "foreignObject.diagram-field"
-    ).data(
+    let e = this.selectCanvasElements().selectAll("g.diagram-field").data(
       this.model.fields.filter(
         (i) => this.priorityThreshold !== void 0 ? i.getPriority() >= this.priorityThreshold : !0
       ),
       (i) => i.id
     );
-    const a = e.exit(), l = e.enter().append("foreignObject").attr("id", (i) => i.id).attr("class", "diagram-field");
+    const a = e.exit(), l = e.enter().append("g").attr("id", (i) => i.id).attr("class", "diagram-field");
     t && t.length > 0 && (e = e.filter((i) => t.includes(i.id)));
     const r = l.merge(e);
-    if (a.remove(), l.style("box-sizing", "border-box").on($.MouseOver, (i, n) => {
+    a.remove(), l.on($.MouseOver, (i, n) => {
       this.dragging || (this.userHighlight.focusOn(n), this.diagramEvent$.next(new tt(n)));
     }).on($.Click, (i, n) => {
       if (!i.ctrlKey && !i.shiftKey) {
@@ -5720,21 +5741,21 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       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.openTextInput(n.id));
     }).call(
-      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, n) => {
+      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(I.Start, (i, n) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.startMultipleSelection(i);
         else {
           let o;
           n.rootElement instanceof z ? o = n.rootElement : n.rootElement instanceof F && (o = n.rootElement.node), o ? this.startMovingNode(i, o) : S(E.NotAllowed);
         }
-      }).on(A.Drag, (i, n) => {
+      }).on(I.Drag, (i, n) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.continueMultipleSelection(i);
         else {
           let o;
           n.rootElement instanceof z ? o = n.rootElement : n.rootElement instanceof F && (o = n.rootElement.node), o ? this.continueMovingNode(i, o) : S(E.NotAllowed);
         }
-      }).on(A.End, (i, n) => {
+      }).on(I.End, (i, n) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.finishMultipleSelection(i);
         else {
@@ -5743,39 +5764,30 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         }
         this.secondaryButton = !1;
       })
-    ).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 === 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"
-    ).select("p").style(
-      "max-width",
-      (i) => i.fit ? "default" : `${Oe(i.width, i.height, i.orientation)[0]}px`
-    ).style(
-      "max-height",
-      (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 === Lt.Center ? "center" : i.horizontalAlign === Lt.Right ? "end" : "start"
-    ).style("transform", (i) => `rotate(${i.orientation}deg)`).style("font-size", (i) => `${i.fontSize}px`).style(
+    ), l.append("text"), l.append("rect"), r.attr("x", 0).attr("y", 0).attr("width", (i) => i.width).attr("height", (i) => i.height).attr(
+      "transform",
+      (i) => `translate(${i.coords[0]},${i.coords[1]}) rotate(${i.orientation} ${i.width / 2} ${i.height / 2})`
+    ).attr("opacity", (i) => i.removed ? 0.5 : 1).select("text").attr(
+      "x",
+      (i) => i.horizontalAlign === yt.Center ? i.width / 2 : i.horizontalAlign === yt.Right ? i.width : 0
+    ).attr(
+      "text-anchor",
+      (i) => i.horizontalAlign === yt.Center ? "middle" : i.horizontalAlign === yt.Right ? "end" : "start"
+    ).attr(
+      "y",
+      (i) => i.verticalAlign === bt.Center ? i.height / 2 : i.verticalAlign === bt.Bottom ? i.height : 0
+    ).attr(
+      "dominant-baseline",
+      (i) => i.verticalAlign === bt.Center ? "middle" : i.verticalAlign === bt.Bottom ? "auto" : "hanging"
+    ).attr("font-size", (i) => i.fontSize).attr(
       "font-family",
       (i) => i.fontFamily || "'Wonder Unit Sans', sans-serif"
-    ).style("font-weight", (i) => i.highlighted ? 600 : 400).style(
-      "color",
+    ).attr("font-weight", (i) => i.highlighted ? 600 : 400).attr(
+      "fill",
       (i) => i.selected ? i.selectedColor || "#000000" : i.color || "#000000"
-    ).html(
-      (i) => i.text.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\n/g, "<br/>")
-    ), He) {
-      const i = this.zoomTransform.k;
-      r.attr("width", (n) => `${n.width * i}px`).attr("height", (n) => `${n.height * i}px`).select("div").style("position", "absolute").style(
-        "left",
-        (n) => `${n.coords[0] * i + this.zoomTransform.x}px`
-      ).style(
-        "top",
-        (n) => `${n.coords[1] * i + this.zoomTransform.y}px`
-      ).select("p").style("font-size", (n) => `${n.fontSize * i}px`);
-    }
+    ).each((i) => {
+      this.setFieldTextAndWrap(i);
+    }), r.select("rect").attr("x", 0).attr("y", 0).attr("width", (i) => i.width).attr("height", (i) => i.height).attr("fill", "transparent");
   }
   updateObjectsInView(...t) {
     let e = this.selectCanvasElements().selectAll("g.diagram-object").data(
@@ -5785,7 +5797,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       (i) => i.id
     );
     const a = e.exit(), l = e.enter().append("g").attr("id", (i) => i.id).attr("class", "diagram-object");
-    t && t.length > 0 && (e = e.filter((i) => t.includes(i.id))), l.merge(e).attr("width", (i) => `${i.width}px`).attr("height", (i) => `${i.height}px`).attr("transform", (i) => `translate(${i.coords[0]},${i.coords[1]})`).html((i) => i.html), a.remove(), l.on($.ContextMenu, (i, n) => {
+    t && t.length > 0 && (e = e.filter((i) => t.includes(i.id))), l.merge(e).attr("width", (i) => i.width).attr("height", (i) => i.height).attr("transform", (i) => `translate(${i.coords[0]},${i.coords[1]})`).html((i) => i.html), a.remove(), l.on($.ContextMenu, (i, n) => {
       if (this.dragging) {
         i.preventDefault(), i.stopPropagation(), this.dragging = !1;
         return;
@@ -5796,11 +5808,11 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       const o = new pt(i, n);
       this.diagramEvent$.next(o);
     }).call(
-      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i) => {
+      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(I.Start, (i) => {
         (this.multipleSelectionOn || this.secondaryButton) && this.startMultipleSelection(i);
-      }).on(A.Drag, (i) => {
+      }).on(I.Drag, (i) => {
         (this.multipleSelectionOn || this.secondaryButton) && this.continueMultipleSelection(i);
-      }).on(A.End, (i) => {
+      }).on(I.End, (i) => {
         (this.multipleSelectionOn || this.secondaryButton) && this.finishMultipleSelection(i);
       })
     );
@@ -5813,7 +5825,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       (i) => i.id
     );
     const a = e.exit(), l = e.enter().append("g").attr("id", (i) => i.id).attr("class", "diagram-decorator");
-    t && t.length > 0 && (e = e.filter((i) => t.includes(i.id))), l.merge(e).attr("width", (i) => `${i.width}px`).attr("height", (i) => `${i.height}px`).attr("transform", (i) => `translate(${i.coords[0]},${i.coords[1]})`).html((i) => i.html), a.remove(), l.on($.MouseOver, (i, n) => {
+    t && t.length > 0 && (e = e.filter((i) => t.includes(i.id))), l.merge(e).attr("width", (i) => i.width).attr("height", (i) => i.height).attr("transform", (i) => `translate(${i.coords[0]},${i.coords[1]})`).html((i) => i.html), a.remove(), l.on($.MouseOver, (i, n) => {
       this.dragging || (this.userHighlight.focusOn(n), this.diagramEvent$.next(new tt(n)));
     }).on($.Click, (i, n) => {
       if (!i.ctrlKey && !i.shiftKey) {
@@ -5850,21 +5862,21 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       const o = new pt(i, n);
       this.diagramEvent$.next(o);
     }).call(
-      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, n) => {
+      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(I.Start, (i, n) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.startMultipleSelection(i);
         else {
           let o;
           n.rootElement instanceof z ? o = n.rootElement : n.rootElement instanceof F && (o = n.rootElement.node), o ? this.startMovingNode(i, o) : S(E.NotAllowed);
         }
-      }).on(A.Drag, (i, n) => {
+      }).on(I.Drag, (i, n) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.continueMultipleSelection(i);
         else {
           let o;
           n.rootElement instanceof z ? o = n.rootElement : n.rootElement instanceof F && (o = n.rootElement.node), o ? this.continueMovingNode(i, o) : S(E.NotAllowed);
         }
-      }).on(A.End, (i, n) => {
+      }).on(I.End, (i, n) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.finishMultipleSelection(i);
         else {
@@ -5886,7 +5898,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       const i = l.getTotalLength();
       let n = 0, o = 0, d = 0, c = 0, h = 0, f = 0;
       if (r.backgroundColor === "#00000000") {
-        const u = t.endCoords[0] - t.startCoords[0], v = t.endCoords[1] - t.startCoords[1];
+        const u = t.endCoords[0] - t.startCoords[0], p = t.endCoords[1] - t.startCoords[1];
         switch (t.startDirection) {
           case g.Top:
             n = u >= 0 ? -0.5 : 0.5, h = n;
@@ -5895,10 +5907,10 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
             n = u >= 0 ? -0.5 : 0.5, h = n;
             break;
           case g.Left:
-            o = v > 0 ? -0.5 : 0.5, f = o;
+            o = p > 0 ? -0.5 : 0.5, f = o;
             break;
           case g.Right:
-            o = v > 0 ? -0.5 : 0.5, f = o;
+            o = p > 0 ? -0.5 : 0.5, f = o;
             break;
           default:
             n = 0.5, h = n, o = -0.5, f = o;
@@ -5911,15 +5923,15 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
             h = u >= 0 ? 0.5 : -0.5;
             break;
           case g.Left:
-            f = v > 0 ? 0.5 : -0.5;
+            f = p > 0 ? 0.5 : -0.5;
             break;
           case g.Right:
-            f = v > 0 ? 0.5 : -0.5;
+            f = p > 0 ? 0.5 : -0.5;
             break;
           default:
             h = 0.5, f = -0.5;
         }
-        Math.abs(u) >= Math.abs(v) ? (d = u > 0 ? -0.5 : 0.5, c = v > 0 ? 0.5 : -0.5) : (d = u > 0 ? 0.5 : -0.5, c = v > 0 ? -0.5 : 0.5);
+        Math.abs(u) >= Math.abs(p) ? (d = u > 0 ? -0.5 : 0.5, c = p > 0 ? 0.5 : -0.5) : (d = u > 0 ? 0.5 : -0.5, c = p > 0 ? -0.5 : 0.5);
       }
       e.select("g.diagram-connection-start-label text").attr("x", 0).attr("y", r.fontSize / 3).attr("text-anchor", "middle").attr("font-family", r.fontFamily).attr("font-size", r.fontSize).attr(
         "fill",
@@ -5927,7 +5939,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       ).style("font-kerning", "none").text(t.startLabel);
       const b = e.select("g.diagram-connection-start-label text").node()?.getBoundingClientRect();
       if (b) {
-        const u = t.startLabel ? b.width / this.zoomTransform.k + Ot(r) + Ht(r) : 0, v = t.startLabel ? b.height / this.zoomTransform.k + _t(r) + Vt(r) : 0;
+        const u = t.startLabel ? b.width / this.zoomTransform.k + _t(r) + Gt(r) : 0, p = t.startLabel ? b.height / this.zoomTransform.k + Ft(r) + Ht(r) : 0;
         let w;
         switch (t.startDirection) {
           case g.Left:
@@ -5955,22 +5967,22 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
               Math.max(
                 Y(r) + u / 2,
                 it(r) + u / 2,
-                U(r) + v / 2,
-                q(r) + v / 2
+                U(r) + p / 2,
+                q(r) + p / 2
               )
             );
         }
         e.select("g.diagram-connection-start-label path").attr(
           "d",
-          qt(
+          Jt(
             -u / 2,
-            -v / 2,
+            -p / 2,
             u,
-            v
+            p
           )
         ).attr("fill", r.backgroundColor).attr("stroke", "none"), e.select("g.diagram-connection-start-label").attr(
           "transform",
-          `translate(${w.x + n * u},${w.y + o * v})`
+          `translate(${w.x + n * u},${w.y + o * p})`
         );
       }
       e.select("g.diagram-connection-middle-label text").attr("x", 0).attr("y", r.fontSize / 3).attr("text-anchor", "middle").attr("font-family", r.fontFamily).attr("font-size", r.fontSize).attr(
@@ -5979,27 +5991,27 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       ).style("font-kerning", "none").text(t.middleLabel);
       const m = e.select("g.diagram-connection-middle-label text").node()?.getBoundingClientRect();
       if (m) {
-        const u = t.middleLabel ? m.width / this.zoomTransform.k + Ot(r) + Ht(r) : 0, v = t.middleLabel ? m.height / this.zoomTransform.k + _t(r) + Vt(r) : 0, w = l.getPointAtLength(i / 2);
+        const u = t.middleLabel ? m.width / this.zoomTransform.k + _t(r) + Gt(r) : 0, p = t.middleLabel ? m.height / this.zoomTransform.k + Ft(r) + Ht(r) : 0, w = l.getPointAtLength(i / 2);
         e.select("g.diagram-connection-middle-label path").attr(
           "d",
-          qt(
+          Jt(
             -u / 2,
-            -v / 2,
+            -p / 2,
             u,
-            v
+            p
           )
         ).attr("fill", r.backgroundColor).attr("stroke", "none"), e.select("g.diagram-connection-middle-label").attr(
           "transform",
-          `translate(${w.x + d * u},${w.y + c * v})`
+          `translate(${w.x + d * u},${w.y + c * p})`
         );
       }
       e.select("g.diagram-connection-end-label text").attr("x", 0).attr("y", r.fontSize / 3).attr("text-anchor", "middle").attr("font-family", r.fontFamily).attr("font-size", r.fontSize).attr(
         "fill",
         t.selected ? r.selectedColor : r.color
       ).style("font-kerning", "none").text(t.endLabel);
-      const p = e.select("g.diagram-connection-end-label text").node()?.getBoundingClientRect();
-      if (p) {
-        const u = t.endLabel ? p.width / this.zoomTransform.k + Ot(r) + Ht(r) : 0, v = t.endLabel ? p.height / this.zoomTransform.k + _t(r) + Vt(r) : 0;
+      const v = e.select("g.diagram-connection-end-label text").node()?.getBoundingClientRect();
+      if (v) {
+        const u = t.endLabel ? v.width / this.zoomTransform.k + _t(r) + Gt(r) : 0, p = t.endLabel ? v.height / this.zoomTransform.k + Ft(r) + Ht(r) : 0;
         let w;
         switch (t.endDirection) {
           case g.Left:
@@ -6027,22 +6039,22 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
               i - Math.max(
                 Y(r) + u / 2,
                 it(r) + u / 2,
-                U(r) + v / 2,
-                q(r) + v / 2
+                U(r) + p / 2,
+                q(r) + p / 2
               )
             );
         }
         e.select("g.diagram-connection-end-label path").attr(
           "d",
-          qt(
+          Jt(
             -u / 2,
-            -v / 2,
+            -p / 2,
             u,
-            v
+            p
           )
         ).attr("fill", r.backgroundColor).attr("stroke", "none"), e.select("g.diagram-connection-end-label").attr(
           "transform",
-          `translate(${w.x + h * u},${w.y + f * v})`
+          `translate(${w.x + h * u},${w.y + f * p})`
         );
       }
     }
@@ -6243,6 +6255,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       e.fontSize,
       e.fontFamily || V.fontFamily,
       e.orientation,
+      e.multiline,
       () => {
       },
       (a) => {
@@ -6250,38 +6263,38 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       }
     );
   }
-  createInputField(t, e, a, l, r, i, n, o, d) {
+  createInputField(t, e, a, l, r, i, n, o, d, c) {
     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");
-    this.inputFieldContainer = c;
-    const h = c.append("xhtml:textarea");
-    let f, b;
-    h.text(t).style("box-sizing", "border-box").style("width", `${a}px`).style("height", `${l}px`).style("font-size", `${r}px`).style("font-family", i).style("resize", "none").style("outline", 0).style("border", 0).style("margin", 0).style("padding", 0).on($.KeyDown, (p) => {
-      p.stopPropagation();
-    }).on($.KeyUp, (p) => {
-      if (p.stopPropagation(), p.key === K.Escape) {
-        const u = h.property("value");
-        this.removeInputField(), d && d(u);
+    const h = 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");
+    this.inputFieldContainer = h;
+    const f = h.append("xhtml:textarea");
+    let b, m;
+    f.text(t).style("box-sizing", "border-box").style("width", `${a}px`).style("height", `${l}px`).style("font-size", `${r}px`).style("font-family", i).style("resize", "none").style("outline", 0).style("border", 0).style("margin", 0).style("padding", 0).on($.KeyDown, (u) => {
+      if (u.stopPropagation(), u.key === Z.Escape || u.key === Z.Enter && !o) {
+        const p = f.property("value") || "";
+        this.removeInputField(), c && c(p);
       }
-    }).on($.Input, () => {
-      const p = h.property("value");
-      h.attr("cols", Io(p) + 1), h.attr("rows", xo(p) + 1), h.style("width", ""), h.style("height", ""), f = h.property("scrollWidth") + 1, b = h.property("scrollHeight") + 1;
-      const u = Math.max(f, a), v = Math.max(b, l);
-      c?.attr("width", `${u}px`), h.style("width", `${u}px`), c?.attr("height", `${v}px`), h.style("height", `${v}px`), o && o(p);
-    }).on($.Click, (p) => {
-      p.stopPropagation();
+    }).on($.KeyUp, (u) => {
+      u.stopPropagation();
+    }).on($.Input, (u) => {
+      const p = f.property("value");
+      f.attr("cols", $o(p) + 1), f.attr("rows", Ao(p) + 1), f.style("width", ""), f.style("height", ""), b = f.property("scrollWidth") + 1, m = f.property("scrollHeight") + 1;
+      const w = Math.max(b, a), A = Math.max(m, l);
+      h?.attr("width", `${w}px`), f.style("width", `${w}px`), h?.attr("height", `${A}px`), f.style("height", `${A}px`), d && d(p);
+    }).on($.Click, (u) => {
+      u.stopPropagation();
     }).on($.FocusOut, () => {
-      const p = h.property("value");
-      this.removeInputField(), d && d(p);
+      const u = f.property("value");
+      this.removeInputField(), c && c(u);
     });
-    const m = h.node();
-    m.focus(), m.select();
+    const v = f.node();
+    v.focus(), v.select();
   }
   removeInputField() {
     this.inputFieldContainer?.select("input")?.on($.Blur, null), this.inputFieldContainer?.remove(), this.inputFieldContainer = void 0;
   }
   minimumSizeOfField(t) {
-    const e = t.select()?.select("p")?.node();
+    const e = t.select()?.select("text")?.node();
     if (!e)
       return [0, 0];
     const a = e.getBoundingClientRect();
@@ -6290,6 +6303,37 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       a.height / this.zoomTransform.k
     ];
   }
+  setFieldTextAndWrap(t) {
+    const e = t.select()?.select("text"), a = e?.node();
+    if (e && a)
+      this.setFieldText(t, e, t.text);
+    else
+      return;
+    if (t.fit)
+      return;
+    let l = this.minimumSizeOfField(t);
+    for (; l[0] > t.width || l[1] > t.height; ) {
+      const r = e?.html()?.replace(/<\/tspan>/g, `
+`)?.replace(/<tspan[^>]*>/g, "")?.slice(0, -1) || "";
+      let i = "...";
+      if (r.endsWith("...") ? i = r.slice(0, -4) + "..." : i = r.slice(0, -1) + "...", e && this.setFieldText(t, e, i), i === "...")
+        return;
+      l = this.minimumSizeOfField(t);
+    }
+  }
+  setFieldText(t, e, a) {
+    const l = a.split(`
+`);
+    e.html("");
+    for (let r = 0; r < l.length; ++r)
+      e.append("tspan").attr(
+        "x",
+        t.horizontalAlign === yt.Center ? t.width / 2 : t.horizontalAlign === yt.Right ? t.width : 0
+      ).attr(
+        "y",
+        t.verticalAlign === bt.Center ? (r + 0.5 - l.length / 2) * t.fontSize + t.height / 2 : t.verticalAlign === bt.Bottom ? t.height - (l.length - r - 1) * t.fontSize : r * t.fontSize
+      ).text(l[r]);
+  }
   /**
    * Method to call to start the moving of a node triggered by a user drag event.
    */
@@ -6329,7 +6373,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       e.selected ? this.userSelection.move([
         a[0] - e.coords[0],
         a[1] - e.coords[1]
-      ]) : e.move(a), this.userHighlight.clear(), this.dragging = !0;
+      ]) : e.move(a), this.userHighlight.clear(), this.dragging = !0, this.diagramEvent$.next(new ei(e));
     }
   }
   /**
@@ -6357,11 +6401,11 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         e.move(a);
         const r = this.model.nodes.getAtCoordinates(t.x, t.y).filter((o) => o.id !== e.id && !o.isDescendantOf(e)).filter(
           (o) => o.type.childrenTypes.includes(e.type.id)
-        ), i = Ze(
+        ), i = We(
           r
         ), n = i[i.length - 1];
         if (n !== e.parent && (e.type.canBeParentless || n !== void 0)) {
-          const o = n?.getLastAncestor(), d = this.currentAction.from, c = new Jo(
+          const o = n?.getLastAncestor(), d = this.currentAction.from, c = new Ko(
             this,
             e.id,
             e.parent?.id,
@@ -6407,7 +6451,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
     const e = this.getPointerLocationRelativeToCanvas(t);
     this.multipleSelectionContainer?.remove(), this.multipleSelectionContainer = void 0, this.userSelection.clear();
     for (const a of this.model.nodes)
-      mo(
+      uo(
         [
           a.coords,
           [a.coords[0] + a.width, a.coords[1] + a.height]
@@ -6421,7 +6465,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
 };
 te.canvasCount = 0;
 let Se = te;
-class io {
+class eo {
   constructor() {
     this.grid = [[void 0]], this.offsetX = 0, this.offsetY = 0;
   }
@@ -6533,16 +6577,16 @@ class io {
     }
   }
 }
-class yi {
+class pi {
   constructor(t) {
     this.gapSize = t;
   }
   apply(t) {
     if (t.nodes.length === 0)
       return t;
-    const e = new io(), a = t.nodes.filter((n) => !n.parent);
+    const e = new eo(), a = t.nodes.filter((n) => !n.parent);
     for (; a.length > 0; )
-      so(
+      oo(
         a[0],
         e,
         [0, 0],
@@ -6560,25 +6604,25 @@ class yi {
     return t;
   }
 }
-const so = (s, t, e, a) => {
+const oo = (s, t, e, a) => {
   const l = t.getClosestEmptyCoordinate(e);
   t.set(l, s), B(a, s);
   for (const r of s.getAdjacentNodes())
-    a.includes(r) && so(
+    a.includes(r) && oo(
       r,
       t,
       l,
       a
     );
 };
-class bi {
+class mi {
   constructor(t) {
     this.gapSize = t;
   }
   apply(t) {
     if (t.nodes.length === 0)
       return t;
-    const e = new io(), a = t.nodes.filter((c) => !c.parent), l = {}, r = a[0];
+    const e = new eo(), a = t.nodes.filter((c) => !c.parent), l = {}, r = a[0];
     let i = [r];
     for (l[r.id] = [0, 0]; a.length > 0; ) {
       const c = [];
@@ -6646,7 +6690,7 @@ class re {
     return t;
   }
 }
-class ki {
+class vi {
   constructor(t) {
     this.gapSize = t;
   }
@@ -6667,19 +6711,19 @@ class ki {
       for (const f of t.nodes) {
         const b = f.getAdjacentNodes();
         for (const m of t.nodes) {
-          const p = [
+          const v = [
             f.coords[0] + f.width / 2,
             f.coords[1] + f.height / 2
           ], u = [
             m.coords[0] + m.width / 2,
             m.coords[1] + m.height / 2
-          ], v = Ue(
+          ], p = Ge(
             f.coords,
             m.coords
           ), w = [m.coords[0], m.coords[1]];
-          if (b.includes(m) && v > 0 && (v > e + (Math.max(f.width, f.height) + Math.max(m.width, m.height)) / 2 ? (w[0] = w[0] - (u[0] - p[0]) * r, w[1] = w[1] - (u[1] - p[1]) * r) : (w[0] = w[0] + (u[0] - p[0]) * n, w[1] = w[1] + (u[1] - p[1]) * n)), v > 0) {
-            const I = i / (v * v);
-            w[0] = w[0] + I * (u[0] - p[0]) / v, w[1] = w[1] + I * (u[1] - p[1]) / v;
+          if (b.includes(m) && p > 0 && (p > e + (Math.max(f.width, f.height) + Math.max(m.width, m.height)) / 2 ? (w[0] = w[0] - (u[0] - v[0]) * r, w[1] = w[1] - (u[1] - v[1]) * r) : (w[0] = w[0] + (u[0] - v[0]) * n, w[1] = w[1] + (u[1] - v[1]) * n)), p > 0) {
+            const A = i / (p * p);
+            w[0] = w[0] + A * (u[0] - v[0]) / p, w[1] = w[1] + A * (u[1] - v[1]) / p;
           } else
             w[0] = w[0] + o * (Math.random() * 2 - 1), w[1] = w[1] + o * (Math.random() * 2 - 1);
           w[0] = w[0] - (u[0] - h[0]) * d, w[1] = w[1] - (u[1] - h[1]) * d, w[0] - m.coords[0] > c ? w[0] = m.coords[0] + c : w[0] - m.coords[0] < -c && (w[0] = m.coords[0] - c), w[1] - m.coords[1] > c ? w[1] = m.coords[1] + c : w[1] - m.coords[1] < -c && (w[1] = m.coords[1] - c), m.move(w);
@@ -6699,7 +6743,7 @@ class ki {
     return t;
   }
 }
-class wi {
+class yi {
   constructor(t) {
     this.gapSize = t;
   }
@@ -6714,7 +6758,7 @@ class wi {
     return t;
   }
 }
-class Si {
+class bi {
   constructor(t) {
     this.gapSize = t;
   }
@@ -6737,8 +6781,8 @@ class Si {
         const b = h[0];
         h.splice(0, 1), n.includes(b) && (o.push(b), B(n, b));
         const m = b.getAdjacentNodes();
-        for (const p of m)
-          f.includes(p) || (h.push(p), f.push(p));
+        for (const v of m)
+          f.includes(v) || (h.push(v), f.push(v));
       }
       for (const b of n)
         o.push(b);
@@ -6754,14 +6798,14 @@ class Si {
       for (; h.length > 0; ) {
         const m = h[0];
         h.splice(0, 1);
-        const p = o.indexOf(m);
-        if (p >= 0) {
-          i[p].push(c), b = !0;
+        const v = o.indexOf(m);
+        if (v >= 0) {
+          i[v].push(c), b = !0;
           break;
         } else {
           const u = m.getAdjacentNodes();
-          for (const v of u)
-            f.includes(v) || (h.push(v), f.push(v));
+          for (const p of u)
+            f.includes(p) || (h.push(p), f.push(p));
         }
       }
       b || i[i.length - 1].push(c);
@@ -6781,7 +6825,7 @@ class Si {
     return t;
   }
 }
-class Ci {
+class ki {
   constructor(t) {
     this.gapSize = t;
   }
@@ -6800,11 +6844,11 @@ class Ci {
       const c = r[0];
       r.splice(0, 1);
       const h = new Ie(void 0, c);
-      no(h, r), i.push(h);
+      io(h, r), i.push(h);
     }
     const n = [];
     for (const c of i)
-      n.push([c]), ro(c, n, n.length);
+      n.push([c]), so(c, n, n.length);
     const o = Math.max(...t.nodes.map((c) => c.height));
     let d = 0;
     for (let c = 0; c < n.length; ++c) {
@@ -6823,21 +6867,21 @@ class Ci {
     return t;
   }
 }
-const no = (s, t) => {
+const io = (s, t) => {
   for (const e of s.node.getAdjacentNodes().sort((a, l) => l.getPriority() - a.getPriority())) {
     const a = t.indexOf(e);
     if (a >= 0) {
       t.splice(a, 1);
       const l = s.addBranch(e);
-      no(l, t);
+      io(l, t);
     }
   }
-}, ro = (s, t, e) => {
+}, so = (s, t, e) => {
   if (s.branches.length > 0) {
     for (; e >= t.length; )
       t.push([]);
     for (const a of s.branches)
-      t[e].push(a), ro(a, t, e + 1);
+      t[e].push(a), so(a, t, e + 1);
   }
 };
 class Ie {
@@ -6859,7 +6903,7 @@ class Ie {
     }
   }
 }
-class $i {
+class wi {
   constructor(t) {
     this.gapSize = t;
   }
@@ -6874,17 +6918,17 @@ class $i {
     return t;
   }
 }
-const _e = {
-  adjacency: new yi(),
+const Oe = {
+  adjacency: new pi(),
   breadth: new re(),
-  "breadth-adjacency": new bi(),
-  force: new ki(),
-  horizontal: new wi(),
-  priority: new Si(),
-  tree: new Ci(),
-  vertical: new $i()
-}, Ai = Fe({}), $t = Fe({});
-class Ii {
+  "breadth-adjacency": new mi(),
+  force: new vi(),
+  horizontal: new yi(),
+  priority: new bi(),
+  tree: new ki(),
+  vertical: new wi()
+}, Si = _e({}), It = _e({});
+class Ci {
   constructor(t, e) {
     this.onTitleChange = t, this.onValueSetChange = e;
   }
@@ -6922,9 +6966,9 @@ const xe = ({
       if (typeof t == "string")
         m = L.select(t), e && (m = m.select(e));
       else {
-        const p = t;
-        if (!p) throw new Error("collapsableSelector is not a valid ref");
-        m = L.select(p.current), e && (m = m.select(e));
+        const v = t;
+        if (!v) throw new Error("collapsableSelector is not a valid ref");
+        m = L.select(v.current), e && (m = m.select(e));
       }
       m.style(r, b ? i : n);
     }
@@ -6948,10 +6992,10 @@ const xe = ({
       children: /* @__PURE__ */ y("div", { className: f() })
     }
   ) });
-}, xi = () => {
-  const s = Dt($t), t = rt(null), [e, a] = D([]);
-  fo(s.validatorChange$, s.diagramChange$).pipe(
-    uo(() => l())
+}, $i = () => {
+  const s = Bt(It), t = rt(null), [e, a] = D([]);
+  ho(s.validatorChange$, s.diagramChange$).pipe(
+    go(() => l())
   ).subscribe();
   const l = () => {
     a([]);
@@ -7005,7 +7049,7 @@ const xe = ({
       n
     )) }) })
   ] }) });
-}, Li = 200, Ge = (s) => (s || "").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""), ao = ({
+}, Ai = 200, He = (s) => (s || "").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""), no = ({
   disabled: s,
   options: t,
   value: e,
@@ -7013,80 +7057,80 @@ const xe = ({
 }) => {
   const l = rt(null), [r, i] = D("");
   let n;
-  const [o, d] = D([]), [c, h] = D([]), [f, b] = D([]), [m, p] = D([]), [u, v] = D(!1);
-  St(() => {
-    i(t.find((x) => wt(x.key, e))?.label || "");
+  const [o, d] = D([]), [c, h] = D([]), [f, b] = D([]), [m, v] = D([]), [u, p] = D(!1);
+  $t(() => {
+    i(t.find((x) => Ct(x.key, e))?.label || "");
   }, [e, t]);
   const w = (x) => {
     if (!s)
       switch (x.key) {
-        case K.PageDown:
+        case Z.PageDown:
           n === void 0 ? (P(0), T(0)) : (P(n + 5), T(n)), x.preventDefault();
           break;
-        case K.ArrowDown:
+        case Z.ArrowDown:
           n === void 0 ? (P(0), T(0)) : (P(n + 1), T(n)), x.preventDefault();
           break;
-        case K.PageUp:
+        case Z.PageUp:
           n === void 0 ? (P(t.length - 1), T(t.length - 1)) : (P(n - 5), T(n)), x.preventDefault();
           break;
-        case K.ArrowUp:
+        case Z.ArrowUp:
           n === void 0 ? (P(t.length - 1), T(t.length - 1)) : (P(n - 1), T(n)), x.preventDefault();
           break;
-        case K.Escape:
+        case Z.Escape:
           R(), x.preventDefault();
           break;
-        case K.Enter:
+        case Z.Enter:
           O(t[n || 0]), x.preventDefault();
           break;
         default:
-          I();
+          A();
       }
-  }, I = () => {
+  }, A = () => {
     if (!s) {
-      const x = Ge(r.trim());
-      d([]), h([]), b([]), p([]);
+      const x = He(r.trim());
+      d([]), h([]), b([]), v([]);
       for (const _ of t) {
-        const J = Ge(_.label).indexOf(x);
+        const J = He(_.label).indexOf(x);
         if (J >= 0) {
-          const Bt = _.label.substring(0, J), Pt = _.label.substring(
+          const Xt = _.label.substring(0, J), Rt = _.label.substring(
             J,
             J + x.length
-          ), Z = _.label.substring(
+          ), K = _.label.substring(
             J + x.length
           );
           d((Q) => [...Q, _]), h((Q) => [
             ...Q,
-            Bt
+            Xt
           ]), b((Q) => [
             ...Q,
-            Pt
-          ]), p((Q) => [
+            Rt
+          ]), v((Q) => [
             ...Q,
-            Z
+            K
           ]);
         }
       }
-      v(!0);
+      p(!0);
     }
   }, R = () => {
-    v(!1);
+    p(!1);
   }, P = (x) => {
     if (!s) {
       if (n = x, x === void 0)
         return;
       x < 0 && (n = 0), x >= t.length && (n = t.length - 1);
     }
-  }, et = () => {
+  }, ot = () => {
     setTimeout(() => {
       R();
-    }, Li);
+    }, Ai);
   }, T = (x) => {
     const _ = l.current?.querySelectorAll("li")[x];
     _ && _.scrollIntoView({ block: "center" });
   }, C = () => {
-    s || (i(""), v(!1), n = void 0);
+    s || (i(""), p(!1), n = void 0);
   }, O = (x) => {
-    s || (i(x.label), v(!1), n = void 0, a(x.key));
+    s || (i(x.label), p(!1), n = void 0, a(x.key));
   };
   return /* @__PURE__ */ M(
     "div",
@@ -7101,8 +7145,8 @@ const xe = ({
               value: r,
               disabled: s,
               onKeyUp: w,
-              onFocus: I,
-              onBlur: et,
+              onFocus: A,
+              onBlur: ot,
               onChange: (x) => i(x.target.value)
             }
           ),
@@ -7128,7 +7172,7 @@ const xe = ({
       ]
     }
   );
-}, Ei = (s, t) => s.find((e) => e.key === t)?.label || `${t}`, Ti = ({
+}, Ii = (s, t) => s.find((e) => e.key === t)?.label || `${t}`, xi = ({
   disabled: s,
   allowRepeats: t,
   options: e,
@@ -7136,44 +7180,44 @@ const xe = ({
   onChange: l
 }) => {
   const [r, i] = D(), [n, o] = D([]), [d, c] = D([]);
-  St(() => {
-    const u = a.length === 0, v = a.map((w) => Ei(e, w));
-    o(v), u && l(a), p();
+  $t(() => {
+    const u = a.length === 0, p = a.map((w) => Ii(e, w));
+    o(p), u && l(a), v();
   }, [a, e]);
   const h = (u) => {
-    for (const v of a)
-      if (v === u)
+    for (const p of a)
+      if (p === u)
         return !0;
     return !1;
   }, f = (u) => {
-    a.length > u && (a.splice(u, 1), o(n.filter((v, w) => w !== u)), l(a), p());
+    a.length > u && (a.splice(u, 1), o(n.filter((p, w) => w !== u)), l(a), v());
   }, b = () => {
     r !== void 0 && (t || !h(r)) && (l(a.concat(r)), m());
   }, m = () => {
     i("");
-  }, p = () => {
+  }, v = () => {
     if (!t) {
       const u = [];
-      for (const v of e)
-        h(v.key) || u.push(v);
+      for (const p of e)
+        h(p.key) || u.push(p);
       c(u);
     }
   };
   return /* @__PURE__ */ M("div", { children: [
-    a.map((u, v) => /* @__PURE__ */ M("div", { className: "daga-value-item-element", children: [
-      /* @__PURE__ */ y("span", { className: "daga-input", children: n[v] }),
+    a.map((u, p) => /* @__PURE__ */ M("div", { className: "daga-value-item-element", children: [
+      /* @__PURE__ */ y("span", { className: "daga-input", children: n[p] }),
       !s && /* @__PURE__ */ y(
         "button",
         {
           className: "daga-property-button",
-          onClick: () => f(v),
+          onClick: () => f(p),
           children: /* @__PURE__ */ y("div", { className: "daga-icon daga-close-icon" })
         }
       )
-    ] }, v)),
+    ] }, p)),
     !s && /* @__PURE__ */ M("div", { className: "daga-value-item-input", children: [
       /* @__PURE__ */ y("div", { className: "daga-input daga-relatively-positioned", children: /* @__PURE__ */ y(
-        ao,
+        no,
         {
           disabled: s,
           options: t ? e || [] : d || [],
@@ -7184,7 +7228,7 @@ const xe = ({
       /* @__PURE__ */ y("button", { className: "daga-property-button", onClick: b, children: /* @__PURE__ */ y("div", { className: "daga-icon daga-add-icon" }) })
     ] })
   ] });
-}, Mi = ({
+}, Li = ({
   disabled: s,
   allowRepeats: t,
   value: e,
@@ -7198,10 +7242,10 @@ const xe = ({
   }, n = (f) => {
     e.length > f && a(e.filter((b, m) => m !== f));
   }, o = (f, b, m) => {
-    const p = e.map(
-      (u, v) => v === b ? m === "blur" ? f.trim() : f : u
+    const v = e.map(
+      (u, p) => p === b ? m === "blur" ? f.trim() : f : u
     );
-    a(p);
+    a(v);
   }, d = () => {
     const f = l.trim();
     f !== "" && (t || !i(f)) && (a(e.concat(f)), c());
@@ -7210,7 +7254,7 @@ const xe = ({
   }, h = (f) => {
     f.key === "Enter" && d();
   };
-  return /* @__PURE__ */ M(ho, { children: [
+  return /* @__PURE__ */ M(lo, { children: [
     e.map((f, b) => /* @__PURE__ */ M("div", { className: "daga-value-item-element", children: [
       /* @__PURE__ */ y(
         "input",
@@ -7247,58 +7291,58 @@ const xe = ({
       /* @__PURE__ */ y("button", { className: "daga-property-button", onClick: d, children: /* @__PURE__ */ y("div", { className: "daga-icon daga-add-icon" }) })
     ] })
   ] });
-}, Ni = ({
+}, Ei = ({
   disabled: s,
   value: t,
   onChange: e
 }) => {
   const [a, l] = D(""), [r, i] = D(""), [n, o] = D({}), d = (u) => {
-    const v = {};
+    const p = {};
     Object.keys(t).forEach((w) => {
-      w !== u && (v[w] = t[w]);
-    }), e(v);
-  }, c = (u, v, w) => {
-    const I = w === "blur" ? v.trim() : v;
+      w !== u && (p[w] = t[w]);
+    }), e(p);
+  }, c = (u, p, w) => {
+    const A = w === "blur" ? p.trim() : p;
     if (w === "blur") {
-      if (u !== I) {
+      if (u !== A) {
         const R = {};
         Object.keys(t).forEach((P) => {
-          P === u ? R[I] = t[P] : R[P] = t[P];
+          P === u ? R[A] = t[P] : R[P] = t[P];
         }), e(R), o((P) => {
-          const et = { ...P };
-          return delete et[u], et;
+          const ot = { ...P };
+          return delete ot[u], ot;
         });
       }
     } else
       o((R) => ({
         ...R,
-        [u]: v
+        [u]: p
       }));
-  }, h = (u, v, w) => {
-    const I = w === "blur" ? v.trim() : v;
-    if (I !== "") {
+  }, h = (u, p, w) => {
+    const A = w === "blur" ? p.trim() : p;
+    if (A !== "") {
       const R = {};
       Object.keys(t).forEach((P) => {
-        P === u ? R[P] = I : R[P] = t[P];
+        P === u ? R[P] = A : R[P] = t[P];
       }), e(R);
     }
   }, f = () => {
-    const u = a.trim(), v = r.trim();
-    if (u !== "" && v !== "") {
+    const u = a.trim(), p = r.trim();
+    if (u !== "" && p !== "") {
       const w = {};
-      Object.keys(t).forEach((I) => {
-        w[I] = t[I];
-      }), w[u] = v, e(w), l(""), i("");
+      Object.keys(t).forEach((A) => {
+        w[A] = t[A];
+      }), w[u] = p, e(w), l(""), i("");
     }
   }, b = () => {
     l("");
   }, m = () => {
     i("");
-  }, p = (u) => {
+  }, v = (u) => {
     u.key === "Enter" && f();
   };
   return /* @__PURE__ */ M("div", { children: [
-    Object.entries(t).map(([u, v], w) => /* @__PURE__ */ M("div", { className: "daga-value-item-element", children: [
+    Object.entries(t).map(([u, p], w) => /* @__PURE__ */ M("div", { className: "daga-value-item-element", children: [
       /* @__PURE__ */ y(
         "input",
         {
@@ -7307,8 +7351,8 @@ const xe = ({
           type: "text",
           disabled: s,
           value: n[u] ?? u,
-          onChange: (I) => c(u, I.target.value, "change"),
-          onBlur: (I) => c(u, I.target.value, "blur")
+          onChange: (A) => c(u, A.target.value, "change"),
+          onBlur: (A) => c(u, A.target.value, "blur")
         }
       ),
       /* @__PURE__ */ y(
@@ -7318,9 +7362,9 @@ const xe = ({
           className: "daga-input",
           type: "text",
           disabled: s,
-          value: v,
-          onChange: (I) => h(u, I.target.value, "change"),
-          onBlur: (I) => h(u, I.target.value, "blur")
+          value: p,
+          onChange: (A) => h(u, A.target.value, "change"),
+          onBlur: (A) => h(u, A.target.value, "blur")
         }
       ),
       /* @__PURE__ */ y(
@@ -7339,7 +7383,7 @@ const xe = ({
           {
             type: "text",
             value: a,
-            onKeyUp: p,
+            onKeyUp: v,
             onChange: (u) => l(u.target.value),
             onBlur: (u) => c(a, u.target.value, "blur")
           }
@@ -7352,7 +7396,7 @@ const xe = ({
           {
             type: "text",
             value: r,
-            onKeyUp: p,
+            onKeyUp: v,
             onChange: (u) => i(u.target.value),
             onBlur: (u) => h(a, u.target.value, "blur")
           }
@@ -7362,12 +7406,12 @@ const xe = ({
       /* @__PURE__ */ y("button", { className: "daga-property-button", onClick: f, children: /* @__PURE__ */ y("div", { className: "daga-icon daga-add-icon" }) })
     ] })
   ] });
-}, lo = ({
+}, ro = ({
   valueSet: s,
   onValueChange: t,
   depth: e
 }) => {
-  const l = Dt($t).canUserPerformAction(k.UpdateValues) && s?.rootElement?.removed !== !0, r = (o) => "daga-property-name-" + o.replace(/\s/g, ""), i = (o) => {
+  const l = Bt(It).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()))
@@ -7502,7 +7546,7 @@ const xe = ({
           )
         ] }),
         o.type === N.Option && /* @__PURE__ */ y("div", { className: "daga-relatively-positioned", children: /* @__PURE__ */ y(
-          ao,
+          no,
           {
             disabled: o.editable === !1 || !l,
             options: o.options || [],
@@ -7511,7 +7555,7 @@ const xe = ({
           }
         ) }),
         (o.type === N.OptionList || o.type === N.OptionSet) && /* @__PURE__ */ y(
-          Ti,
+          xi,
           {
             disabled: o.editable === !1 || !l,
             allowRepeats: o.type === N.OptionList,
@@ -7521,7 +7565,7 @@ const xe = ({
           }
         ),
         (o.type === N.TextList || o.type === N.TextSet) && /* @__PURE__ */ y(
-          Mi,
+          Li,
           {
             disabled: o.editable === !1 || !l,
             allowRepeats: o.type === N.TextList,
@@ -7530,7 +7574,7 @@ const xe = ({
           }
         ),
         o.type === N.TextMap && /* @__PURE__ */ y(
-          Ni,
+          Ei,
           {
             disabled: o.editable === !1 || !l,
             value: s?.getValue(o.name),
@@ -7538,7 +7582,7 @@ const xe = ({
           }
         ),
         o.type === N.Object && /* @__PURE__ */ y("div", { className: "daga-left-bar", children: /* @__PURE__ */ y(
-          lo,
+          ro,
           {
             valueSet: s.getSubValueSet(o.name),
             onValueChange: t,
@@ -7549,22 +7593,22 @@ const xe = ({
     },
     o.name
   )) });
-}, co = ({ valueSet: s, depth: t }) => {
-  const e = Dt($t), a = rt(null), l = (o) => "daga-property-name-" + o.replace(/\s/g, ""), r = () => {
+}, ao = ({ valueSet: s, depth: t }) => {
+  const e = Bt(It), 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(
         `.daga-property.${l(o.name)}.daga-depth-${t}`
       );
       f.select("button.daga-move-button").call(
-        L.drag().on(A.Start, (b) => {
+        L.drag().on(I.Start, (b) => {
           S(E.Grabbing);
           const m = e.getPointerLocationRelativeToScreen(b);
           if (m.length < 2 || isNaN(m[0]) || isNaN(m[1]))
             return;
-          const p = f.node()?.getBoundingClientRect();
-          d = p?.width || 0, c = p?.height || 0, f.style("position", "fixed").style("left", `${m[0] - d / 2}px`).style("top", `${m[1] - c / 2}px`).style("width", `${d}px`).style("height", `${c}px`).style("z-index", 1);
-        }).on(A.Drag, (b) => {
+          const v = f.node()?.getBoundingClientRect();
+          d = v?.width || 0, c = v?.height || 0, f.style("position", "fixed").style("left", `${m[0] - d / 2}px`).style("top", `${m[1] - c / 2}px`).style("width", `${d}px`).style("height", `${c}px`).style("z-index", 1);
+        }).on(I.Drag, (b) => {
           S(E.Grabbing);
           const m = e.getPointerLocationRelativeToScreen(b);
           m.length < 2 || isNaN(m[0]) || isNaN(m[1]) || (f.style("position", "fixed").style("left", `${m[0] - d / 2}px`).style("top", `${m[1] - c / 2}px`).style("width", `${d}px`).style("height", `${c}px`).style("z-index", 1), L.select(a.current).select(
@@ -7572,7 +7616,7 @@ const xe = ({
           ).style("visibility", "hidden").style("height", 0), h = i(m), L.select(a.current).select(
             `.daga-dropbar.daga-index-${h}.daga-depth-${t}`
           ).style("visibility", "visible").style("height", "0.25rem"));
-        }).on(A.End, (b) => {
+        }).on(I.End, (b) => {
           S(E.Auto), f.style("position", "relative").style("left", 0).style("top", 0).style("z-index", 0).style("width", "unset").style("height", "unset"), L.select(a.current).select(
             `.daga-dropbar.daga-index-${h}.daga-depth-${t}`
           ).style("visibility", "hidden").style("height", 0);
@@ -7612,7 +7656,7 @@ const xe = ({
     if (s === void 0)
       return;
     let d;
-    o instanceof Po ? d = o : o instanceof Event ? d = s?.propertySet.getProperty(
+    o instanceof Mo ? d = o : o instanceof Event ? d = s?.propertySet.getProperty(
       o.target?.value || ""
     ) : d = s?.propertySet.getProperty(o || ""), d && s?.hideProperty(d), r();
   };
@@ -7642,9 +7686,9 @@ const xe = ({
                     )
                   ] })
                 ] }),
-                o.type !== N.Object && /* @__PURE__ */ y("div", { className: "daga-property-value", children: Pi(s?.getValue(o.name)) }),
+                o.type !== N.Object && /* @__PURE__ */ y("div", { className: "daga-property-value", children: Ti(s?.getValue(o.name)) }),
                 o.type === N.Object && /* @__PURE__ */ y(
-                  co,
+                  ao,
                   {
                     valueSet: s?.getSubValueSet(o.name),
                     depth: t + 1
@@ -7664,9 +7708,9 @@ const xe = ({
       o.name
     ))
   ] });
-}, Pi = (s) => Array.isArray(s) ? s.join(", ") : zo(s) ? Object.entries(s).map((t) => t.map((e) => JSON.stringify(e)).join(": ")).join(", ") : s instanceof Date ? s.toLocaleString() : s == null ? "" : "" + s, zi = ({ location: s, direction: t, width: e, height: a, title: l, valueSet: r, onValueChange: i }) => {
+}, Ti = (s) => Array.isArray(s) ? s.join(", ") : No(s) ? Object.entries(s).map((t) => t.map((e) => JSON.stringify(e)).join(": ")).join(", ") : s instanceof Date ? s.toLocaleString() : s == null ? "" : "" + s, Mi = ({ location: s, direction: t, width: e, height: a, title: l, valueSet: r, onValueChange: i }) => {
   const n = rt(null), [o, d] = D(!1), [c, h] = D(!1), f = () => L.select(n.current);
-  return St(() => {
+  return $t(() => {
     if (n.current)
       switch (t) {
         case g.Bottom:
@@ -7716,78 +7760,78 @@ const xe = ({
             )
           ] }),
           !c && /* @__PURE__ */ y(
-            lo,
+            ro,
             {
               valueSet: r,
               onValueChange: i,
               depth: 0
             }
           ),
-          c && /* @__PURE__ */ y(co, { valueSet: r, depth: 0 })
+          c && /* @__PURE__ */ y(ao, { valueSet: r, depth: 0 })
         ] }) })
       ]
     }
   ) });
-}, Ri = 6, Vi = (s) => {
-  const t = Dt($t), [e, a] = D(
+}, Ni = 6, Pi = (s) => {
+  const t = Bt(It), [e, a] = D(
     s.currentPalette || s.palettes[0]
   ), [l, r] = D(0), [i, n] = D(
     void 0
-  ), o = rt(null), d = (p) => {
-    if (a(p), c().selectAll("*").remove(), r(t.getPriorityThreshold() || 0), p.categories && h(p.categories), p.templates)
-      for (const u of p.templates)
+  ), o = rt(null), d = (v) => {
+    if (a(v), c().selectAll("*").remove(), r(t.getPriorityThreshold() || 0), v.categories && h(v.categories), v.templates)
+      for (const u of v.templates)
         f(u);
-  }, c = () => L.select(o.current).select(".daga-palette-view"), h = (p) => {
+  }, c = () => L.select(o.current).select(".daga-palette-view"), h = (v) => {
     const u = c().append("select").style("width", "100%").style("height", "2rem").style("padding", "0.5rem").style("border-radius", "0.25rem").style("background-color", "#f7f8fc").style("border", "1px solid #e6e6e6");
     u.append("option").attr("value", "").text("(None selected)");
-    for (const v in p)
-      u.append("option").attr("value", v).text(v);
+    for (const p in v)
+      u.append("option").attr("value", p).text(p);
     u.on($.Change, () => {
       i && c().selectAll(".daga-template-container.daga-in-category").remove();
-      const v = u.property("value");
-      n(v);
-      const w = p[v] || [];
-      for (const I of w)
-        f(I, "daga-in-category");
+      const p = u.property("value");
+      n(p);
+      const w = v[p] || [];
+      for (const A of w)
+        f(A, "daga-in-category");
     }), i && (u.property("value", i), u.dispatch($.Change));
-  }, f = (p, u) => {
-    if (p.templateType === "node") {
-      const v = t.model.nodes.types.get(p.type);
-      v ? b(v, p, u) : console.error(`Could not find a node type called '${p.type}'`);
-    } else if (p.templateType === "connection") {
-      const v = t.model.connections.types.get(p.type);
-      v ? m(v, p, u) : console.error(
-        `Could not find a connection type called '${p.type}'`
+  }, f = (v, u) => {
+    if (v.templateType === "node") {
+      const p = t.model.nodes.types.get(v.type);
+      p ? b(p, v, u) : console.error(`Could not find a node type called '${v.type}'`);
+    } else if (v.templateType === "connection") {
+      const p = t.model.connections.types.get(v.type);
+      p ? m(p, v, u) : console.error(
+        `Could not find a connection type called '${v.type}'`
       );
     }
-  }, b = (p, u, v) => {
-    if (l !== void 0 && p.priority < l)
+  }, b = (v, u, p) => {
+    if (l !== void 0 && v.priority < l)
       return;
-    const w = p.defaultLook.lookType === "shaped-look" ? p.defaultLook.borderThickness || 1 : 0, I = p.defaultHeight + w, R = p.defaultWidth + w, P = u.height || I, et = u.width || R, T = c().append("div").attr(
+    const w = v.defaultLook.lookType === "shaped-look" ? v.defaultLook.borderThickness || 1 : 0, A = v.defaultHeight + w, R = v.defaultWidth + w, P = u.height || A, ot = u.width || R, T = c().append("div").attr(
       "class",
-      `daga-template-container ${v !== void 0 ? v : ""}`
-    ).style("width", `${et}px`).style("height", `${P}px`).call(
-      L.drag().on(A.Drag, (O) => {
+      `daga-template-container ${p !== void 0 ? p : ""}`
+    ).style("width", `${ot}px`).style("height", `${P}px`).call(
+      L.drag().on(I.Drag, (O) => {
         if (t.canUserPerformAction(k.AddNode)) {
           const x = t.getPointerLocationRelativeToScreen(O);
           if (x.length < 2 || isNaN(x[0]) || isNaN(x[1]))
             return;
-          T.style("position", "fixed").style("left", `${x[0] - et / 2}px`).style("top", `${x[1] - P / 2}px`).style("z-index", 1);
+          T.style("position", "fixed").style("left", `${x[0] - ot / 2}px`).style("top", `${x[1] - P / 2}px`).style("z-index", 1);
         }
-      }).on(A.Start, (O) => {
+      }).on(I.Start, (O) => {
         if (t.canUserPerformAction(k.AddNode)) {
           S(E.Grabbing);
           const x = t.getPointerLocationRelativeToScreen(O);
           if (x.length < 2 || isNaN(x[0]) || isNaN(x[1]))
             return;
-          T.style("position", "fixed").style("left", `${x[0] - et / 2}px`).style("top", `${x[1] - P / 2}px`).style("z-index", 1), p.isUnique && t.model.nodes.find(
-            (_) => !_.removed && _.type.id === p.id
+          T.style("position", "fixed").style("left", `${x[0] - ot / 2}px`).style("top", `${x[1] - P / 2}px`).style("z-index", 1), v.isUnique && t.model.nodes.find(
+            (_) => !_.removed && _.type.id === v.id
           ) !== void 0 && S(E.NotAllowed);
         }
-      }).on(A.End, (O) => {
+      }).on(I.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(
-            (Wt) => !Wt.removed && Wt.type.id === p.id
+          if (S(E.Auto), T.style("position", "relative").style("left", 0).style("top", 0).style("z-index", "auto"), v.isUnique && t.model.nodes.find(
+            (jt) => !jt.removed && jt.type.id === v.id
           ) !== void 0)
             return;
           const x = t.getPointerLocationRelativeToScreen(O);
@@ -7803,26 +7847,26 @@ const xe = ({
           if (lt.length < 2 || isNaN(lt[0]) || isNaN(lt[1]))
             return;
           let J = [
-            lt[0] - p.defaultWidth / 2,
-            lt[1] - p.defaultHeight / 2
+            lt[0] - v.defaultWidth / 2,
+            lt[1] - v.defaultHeight / 2
           ];
           t.snapToGrid && (J = t.getClosestGridPoint([
-            J[0] - p.snapToGridOffset[0],
-            J[1] - p.snapToGridOffset[1]
-          ]), J[0] += p.snapToGridOffset[0], J[1] += p.snapToGridOffset[1]);
-          const Pt = t.model.nodes.getAtCoordinates(
+            J[0] - v.snapToGridOffset[0],
+            J[1] - v.snapToGridOffset[1]
+          ]), J[0] += v.snapToGridOffset[0], J[1] += v.snapToGridOffset[1]);
+          const Rt = t.model.nodes.getAtCoordinates(
             lt[0],
             lt[1]
           ).filter(
-            (Wt) => Wt.type.childrenTypes.includes(p.id)
-          ), Z = Ze(
-            Pt
-          ), Q = Z[Z.length - 1];
-          if (!p.canBeParentless && Q === void 0)
+            (jt) => jt.type.childrenTypes.includes(v.id)
+          ), K = We(
+            Rt
+          ), Q = K[K.length - 1];
+          if (!v.canBeParentless && Q === void 0)
             return;
-          const ae = Q?.getLastAncestor(), Xt = new qo(
+          const ae = Q?.getLastAncestor(), Wt = new Zo(
             t,
-            p,
+            v,
             J,
             Q?.id,
             ae?.id,
@@ -7831,50 +7875,50 @@ const xe = ({
             u.label,
             u.values
           );
-          Xt.do(), t?.actionStack.add(Xt), S();
+          Wt.do(), t?.actionStack.add(Wt), S();
         }
       })
-    ).append("svg").attr("class", `palette-node ${p.id}`).attr("viewBox", `0 0 ${R} ${I}`).attr("preserveAspectRatio", "none").style("position", "relative").style("left", 0).style("top", 0).style("width", `${et}px`).style("height", `${P}px`), C = u.look || p.defaultLook;
+    ).append("svg").attr("class", `palette-node ${v.id}`).attr("viewBox", `0 0 ${R} ${A}`).attr("preserveAspectRatio", "none").style("position", "relative").style("left", 0).style("top", 0).style("width", `${ot}px`).style("height", `${P}px`), C = u.look || v.defaultLook;
     switch (C.lookType) {
       case "shaped-look":
         T.append("path").attr(
           "d",
           ye(
-            C.shape || Mt.Rectangle,
+            C.shape || Nt.Rectangle,
             (C.borderThickness || 1) / 2,
             (C.borderThickness || 1) / 2,
-            p.defaultWidth,
-            p.defaultHeight
+            v.defaultWidth,
+            v.defaultHeight
           )
         ).attr("fill", C.fillColor || "#FFFFFF").attr("stroke", C.borderColor || "#000000").attr("stroke-width", `${C.borderThickness}px`);
         break;
       case "image-look":
-        T.append("image").attr("x", 0).attr("y", 0).attr("width", p.defaultWidth).attr("height", p.defaultHeight).attr("href", C.backgroundImage).attr("preserveAspectRatio", "none");
+        T.append("image").attr("x", 0).attr("y", 0).attr("width", v.defaultWidth).attr("height", v.defaultHeight).attr("href", C.backgroundImage).attr("preserveAspectRatio", "none");
         break;
       case "stretchable-image-look":
         T.append("image").attr("x", 0).attr("y", 0).attr("width", C.leftMargin).attr("height", C.topMargin).attr("href", C.backgroundImageTopLeft).attr("preserveAspectRatio", "none"), T.append("image").attr("x", C.leftMargin).attr("y", 0).attr(
           "width",
-          p.defaultWidth - C.rightMargin - C.leftMargin
-        ).attr("height", C.topMargin).attr("href", C.backgroundImageTop).attr("preserveAspectRatio", "none"), T.append("image").attr("x", p.defaultWidth - C.rightMargin).attr("y", 0).attr("width", C.rightMargin).attr("height", C.topMargin).attr("href", C.backgroundImageTopRight).attr("preserveAspectRatio", "none"), T.append("image").attr("x", 0).attr("y", C.topMargin).attr("width", C.leftMargin).attr(
+          v.defaultWidth - C.rightMargin - C.leftMargin
+        ).attr("height", C.topMargin).attr("href", C.backgroundImageTop).attr("preserveAspectRatio", "none"), T.append("image").attr("x", v.defaultWidth - C.rightMargin).attr("y", 0).attr("width", C.rightMargin).attr("height", C.topMargin).attr("href", C.backgroundImageTopRight).attr("preserveAspectRatio", "none"), T.append("image").attr("x", 0).attr("y", C.topMargin).attr("width", C.leftMargin).attr(
           "height",
-          p.defaultHeight - C.bottomMargin - C.topMargin
+          v.defaultHeight - C.bottomMargin - C.topMargin
         ).attr("href", C.backgroundImageLeft).attr("preserveAspectRatio", "none"), T.append("image").attr("x", C.leftMargin).attr("y", C.topMargin).attr(
           "width",
-          p.defaultWidth - C.rightMargin - C.leftMargin
+          v.defaultWidth - C.rightMargin - C.leftMargin
         ).attr(
           "height",
-          p.defaultHeight - C.bottomMargin - C.topMargin
-        ).attr("href", C.backgroundImageCenter).attr("preserveAspectRatio", "none"), T.append("image").attr("x", p.defaultWidth - C.rightMargin).attr("y", C.topMargin).attr("width", C.rightMargin).attr(
+          v.defaultHeight - C.bottomMargin - C.topMargin
+        ).attr("href", C.backgroundImageCenter).attr("preserveAspectRatio", "none"), T.append("image").attr("x", v.defaultWidth - C.rightMargin).attr("y", C.topMargin).attr("width", C.rightMargin).attr(
           "height",
-          p.defaultHeight - C.bottomMargin - C.topMargin
-        ).attr("href", C.backgroundImageRight).attr("preserveAspectRatio", "none"), T.append("image").attr("x", 0).attr("y", p.defaultHeight - C.bottomMargin).attr("width", C.leftMargin).attr("height", C.bottomMargin).attr("href", C.backgroundImageBottomLeft).attr("preserveAspectRatio", "none"), T.append("image").attr("x", C.leftMargin).attr("y", p.defaultHeight - C.bottomMargin).attr(
+          v.defaultHeight - C.bottomMargin - C.topMargin
+        ).attr("href", C.backgroundImageRight).attr("preserveAspectRatio", "none"), T.append("image").attr("x", 0).attr("y", v.defaultHeight - C.bottomMargin).attr("width", C.leftMargin).attr("height", C.bottomMargin).attr("href", C.backgroundImageBottomLeft).attr("preserveAspectRatio", "none"), T.append("image").attr("x", C.leftMargin).attr("y", v.defaultHeight - C.bottomMargin).attr(
           "width",
-          p.defaultWidth - C.rightMargin - C.leftMargin
-        ).attr("height", C.bottomMargin).attr("href", C.backgroundImageBottom).attr("preserveAspectRatio", "none"), T.append("image").attr("x", p.defaultWidth - C.rightMargin).attr("y", p.defaultHeight - C.bottomMargin).attr("width", C.rightMargin).attr("height", C.bottomMargin).attr("href", C.backgroundImageBottomRight).attr("preserveAspectRatio", "none");
+          v.defaultWidth - C.rightMargin - C.leftMargin
+        ).attr("height", C.bottomMargin).attr("href", C.backgroundImageBottom).attr("preserveAspectRatio", "none"), T.append("image").attr("x", v.defaultWidth - C.rightMargin).attr("y", v.defaultHeight - C.bottomMargin).attr("width", C.rightMargin).attr("height", C.bottomMargin).attr("href", C.backgroundImageBottomRight).attr("preserveAspectRatio", "none");
     }
     if (u.look === void 0) {
-      if (p.decorators)
-        for (const O of p.decorators)
+      if (v.decorators)
+        for (const O of v.decorators)
           T.append("foreignObject").attr("width", `${O.width}px`).attr("height", `${O.height}px`).attr(
             "transform",
             `translate(${O.coords[0]},${O.coords[1]})`
@@ -7882,26 +7926,26 @@ const xe = ({
       if (u.label) {
         const O = {
           ...V,
-          ...p.label,
+          ...v.label,
           ...u.labelLook
         };
         T.append("text").attr(
           "transform",
-          `translate(${(Y(O) + p.defaultWidth) / 2},${(U(O) + p.defaultHeight) / 2})`
+          `translate(${(Y(O) + v.defaultWidth) / 2},${(U(O) + v.defaultHeight) / 2})`
         ).attr("x", 0).attr("y", 0).attr("font-size", `${O.fontSize}px`).attr("text-anchor", "middle").attr("font-family", O.fontFamily).attr("font-weight", 400).attr("fill", O.color).attr("stroke", "none").style("font-kerning", "none").style("user-select", "none").text(u.label);
       }
     }
-  }, m = (p, u, v) => {
+  }, m = (v, u, p) => {
     const w = c().append("div").attr(
       "class",
-      `daga-template-container ${v !== void 0 ? v : ""}`
-    ).style("width", `${u.width}px`).style("height", `${u.height}px`).append("svg").attr("class", `palette-button ${p.id}`).style("position", "relative").style("left", 0).style("top", 0).style("width", "100%").style("height", "100%").on("click", () => {
-      t.connectionType = p;
+      `daga-template-container ${p !== void 0 ? p : ""}`
+    ).style("width", `${u.width}px`).style("height", `${u.height}px`).append("svg").attr("class", `palette-button ${v.id}`).style("position", "relative").style("left", 0).style("top", 0).style("width", "100%").style("height", "100%").on("click", () => {
+      t.connectionType = v;
     });
     w.append("path").attr(
       "d",
       ye(
-        Mt.Rectangle,
+        Nt.Rectangle,
         0,
         0,
         u.width,
@@ -7909,10 +7953,10 @@ const xe = ({
       )
     ).attr("fill", u.backgroundColor).attr("stroke", "black").attr("stroke-width", "1px"), u.icon !== "" && w.append("image").attr("x", 0).attr("y", 0).attr("width", u.width).attr("height", u.height).attr("href", u.icon), u.label !== "" && w.append("text").attr(
       "transform",
-      `translate(${u.width / 2},${u.height / 2 + Ri})`
+      `translate(${u.width / 2},${u.height / 2 + Ni})`
     ).attr("x", 0).attr("y", 0).attr("font-size", "20px").attr("text-anchor", "middle").attr("font-family", "'Wonder Unit Sans', sans-serif").attr("font-weight", 400).attr("fill", "#000000").attr("stroke", "none").style("font-kerning", "none").style("user-select", "none").text(u.label);
   };
-  return St(() => {
+  return $t(() => {
     if (d(s.palettes[0]), o.current)
       switch (s.direction) {
         case g.Bottom:
@@ -7944,12 +7988,12 @@ const xe = ({
           }
         ),
         /* @__PURE__ */ M("div", { className: "daga-panel-content", children: [
-          s.palettes.length > 1 && /* @__PURE__ */ y("div", { className: "daga-panel-tabs", children: s.palettes.map((p) => /* @__PURE__ */ y(
+          s.palettes.length > 1 && /* @__PURE__ */ y("div", { className: "daga-panel-tabs", children: s.palettes.map((v) => /* @__PURE__ */ y(
             "div",
             {
-              className: `daga-panel-tab ${p === e ? "daga-current-tab" : ""}`,
-              onClick: () => d(p),
-              children: p.name
+              className: `daga-panel-tab ${v === e ? "daga-current-tab" : ""}`,
+              onClick: () => d(v),
+              children: v.name
             }
           )) }),
           /* @__PURE__ */ y("div", { className: "daga-palette-view" })
@@ -7957,7 +8001,7 @@ const xe = ({
       ]
     }
   ) });
-}, Oi = ({
+}, zi = ({
   location: s,
   direction: t,
   centerAnimationDuration: e,
@@ -7982,63 +8026,63 @@ const xe = ({
       h = "width", f = "scaleX", b = "left", m = "right";
       break;
   }
-  const p = rt(null), u = rt(null), v = rt(null);
-  St(() => {
+  const v = rt(null), u = rt(null), p = rt(null);
+  $t(() => {
     L.select(
-      p.current
+      v.current
     ).style(`margin-${m}`, "-1rem").style(h, "0rem").style("transform", `${f}(0)`).style("transform-origin", b);
   });
   const w = async () => {
-    const Z = L.select(
-      p.current
+    const K = L.select(
+      v.current
     );
     if (!c)
       if (d) {
         d = !1;
-        const Xt = `${4 * Z.selectChildren().size()}rem`;
-        Z.transition().duration(500).ease(L.easeLinear).style(h, Xt).style("transform", `${f}(1)`), setTimeout(() => {
+        const Wt = `${4 * K.selectChildren().size()}rem`;
+        K.transition().duration(500).ease(L.easeLinear).style(h, Wt).style("transform", `${f}(1)`), setTimeout(() => {
           c = !1;
         }, 500);
       } else
-        d = !0, Z.transition().duration(500).ease(L.easeLinear).style(h, "0rem").style("transform", `${f}(0)`), setTimeout(() => {
+        d = !0, K.transition().duration(500).ease(L.easeLinear).style(h, "0rem").style("transform", `${f}(0)`), setTimeout(() => {
           c = !1;
         }, 500);
-  }, I = Dt($t), R = () => {
-    I.zoomBy(I.zoomFactor);
+  }, A = Bt(It), R = () => {
+    A.zoomBy(A.zoomFactor);
   }, P = () => {
-    I.zoomBy(1 / I.zoomFactor);
-  }, et = () => {
-    I.center(void 0, 1, e);
+    A.zoomBy(1 / A.zoomFactor);
+  }, ot = () => {
+    A.center(void 0, 1, e);
   }, T = () => {
-    I.layoutFormat && I.layoutFormat in _e && _e[I.layoutFormat].apply(I.model);
+    A.layoutFormat && A.layoutFormat in Oe && Oe[A.layoutFormat].apply(A.model);
   }, C = () => {
     o = !o, L.select(
-      v.current
+      p.current
     ).classed("daga-on", o).classed("daga-off", !o);
-    const Z = I.getPriorityThresholdOptions();
-    Z && Z.length >= 2 && I.setPriorityThreshold(
-      Z[o ? 1 : 0]
+    const K = A.getPriorityThresholdOptions();
+    K && K.length >= 2 && A.setPriorityThreshold(
+      K[o ? 1 : 0]
     );
   }, O = () => {
-    I.actionStack.undo();
+    A.actionStack.undo();
   }, x = () => {
-    I.actionStack.redo();
+    A.actionStack.redo();
   }, _ = () => {
-    I.userSelection.copyToClipboard();
+    A.userSelection.copyToClipboard();
   }, lt = () => {
-    I.userSelection.cutToClipboard();
+    A.userSelection.cutToClipboard();
   }, J = () => {
-    I.userSelection.pasteFromClipboard();
-  }, Bt = () => {
-    I.userSelection.removeFromModel();
-  }, Pt = () => {
-    I.multipleSelectionOn = !0, L.select(
+    A.userSelection.pasteFromClipboard();
+  }, Xt = () => {
+    A.userSelection.removeFromModel();
+  }, Rt = () => {
+    A.multipleSelectionOn = !0, L.select(
       u.current
     ).classed("daga-on", !0).classed("daga-off", !1);
-    const Z = I.diagramEvent$.subscribe((Q) => {
-      Q.type === Qe.Selection && (L.select(
+    const K = A.diagramEvent$.subscribe((Q) => {
+      Q.type === qe.Selection && (L.select(
         u.current
-      ).classed("daga-on", !1).classed("daga-off", !0), Z.unsubscribe());
+      ).classed("daga-on", !1).classed("daga-off", !0), K.unsubscribe());
     });
   };
   return /* @__PURE__ */ y("daga-diagram-buttons", { children: /* @__PURE__ */ M(
@@ -8046,32 +8090,32 @@ const xe = ({
     {
       className: `daga-diagram-buttons daga-${s} daga-${t}`,
       children: [
-        n && I.canUserPerformAction(k.Zoom) && /* @__PURE__ */ y("button", { className: "daga-zoom-in", onClick: R, children: /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Zoom in" }) }),
-        n && I.canUserPerformAction(k.Zoom) && /* @__PURE__ */ y("button", { className: "daga-zoom-out", onClick: P, children: /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Zoom out" }) }),
-        /* @__PURE__ */ M("div", { className: "daga-collapsable-buttons daga-collapsed", ref: p, children: [
-          n && I.canUserPerformAction(k.Zoom) && /* @__PURE__ */ y("button", { className: "daga-center", onClick: et, children: /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Fit diagram to screen" }) }),
+        n && A.canUserPerformAction(k.Zoom) && /* @__PURE__ */ y("button", { className: "daga-zoom-in", onClick: R, children: /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Zoom in" }) }),
+        n && A.canUserPerformAction(k.Zoom) && /* @__PURE__ */ y("button", { className: "daga-zoom-out", onClick: P, children: /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Zoom out" }) }),
+        /* @__PURE__ */ M("div", { className: "daga-collapsable-buttons daga-collapsed", ref: v, children: [
+          n && A.canUserPerformAction(k.Zoom) && /* @__PURE__ */ y("button", { className: "daga-center", onClick: ot, children: /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Fit diagram to screen" }) }),
           a && /* @__PURE__ */ y("button", { className: "daga-undo", onClick: O, children: /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Undo" }) }),
           a && /* @__PURE__ */ y("button", { className: "daga-redo", onClick: x, children: /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Redo" }) }),
           i && /* @__PURE__ */ y("button", { className: "daga-copy", onClick: _, children: /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Copy" }) }),
           i && /* @__PURE__ */ y("button", { className: "daga-cut", onClick: lt, children: /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Cut" }) }),
-          i && /* @__PURE__ */ y("button", { className: `daga-multiple-selection ${o ? "daga-on" : "daga-off"}`, onClick: Pt, ref: u, children: /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Multiple selection" }) }),
+          i && /* @__PURE__ */ y("button", { className: `daga-multiple-selection ${o ? "daga-on" : "daga-off"}`, onClick: Rt, ref: u, children: /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Multiple selection" }) }),
           i && /* @__PURE__ */ y("button", { className: "daga-paste", onClick: J, children: /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Paste" }) }),
-          i && /* @__PURE__ */ y("button", { className: "daga-delete", onClick: Bt, children: /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Delete" }) }),
-          r && I.layoutFormat && /* @__PURE__ */ y("button", { className: "daga-layout", onClick: T, children: /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Apply layout" }) }),
-          l && /* @__PURE__ */ y("button", { className: `daga-filter ${o ? "daga-on" : "daga-off"}`, onClick: C, ref: v, children: /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Apply filter" }) })
+          i && /* @__PURE__ */ y("button", { className: "daga-delete", onClick: Xt, children: /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Delete" }) }),
+          r && A.layoutFormat && /* @__PURE__ */ y("button", { className: "daga-layout", onClick: T, children: /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Apply layout" }) }),
+          l && /* @__PURE__ */ y("button", { className: `daga-filter ${o ? "daga-on" : "daga-off"}`, onClick: C, ref: p, children: /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Apply filter" }) })
         ] }),
         /* @__PURE__ */ y("button", { className: "daga-more-options", onClick: w, children: d ? /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "More options" }) : /* @__PURE__ */ y("span", { className: "daga-tooltip", children: "Less options" }) })
       ]
     }
   ) });
-}, Fi = ({
+}, Hi = ({
   config: s,
   model: t,
   onCanvasCreated: e,
   onDiagramEvent: a,
   onModelChange: l
 }) => {
-  const r = new Je(), i = new oo(), n = rt(null), o = rt(void 0), d = rt(!1), c = [], [h, f] = D(void 0), [b, m] = D(void 0), p = {
+  const r = new Ke(), i = new to(), n = rt(null), o = rt(void 0), d = rt(!1), c = [], [h, f] = D(void 0), [b, m] = D(void 0), v = {
     zoomIn: () => {
     },
     zoomOut: () => {
@@ -8089,14 +8133,14 @@ const xe = ({
   }, u = {
     refreshPalette: () => {
     }
-  }, v = new Ii(
+  }, p = new Ci(
     (T) => f(T),
     (T) => m(T)
   ), w = {
-    diagramButtons: p,
+    diagramButtons: v,
     palette: u,
-    propertyEditor: v
-  }, I = (T = !1) => ((!o.current || T) && (c.forEach((C) => C.unsubscribe()), o.current = new Se(w, s)), o.current), R = I(), P = (T) => {
+    propertyEditor: p
+  }, A = (T = !1) => ((!o.current || T) && (c.forEach((C) => C.unsubscribe()), o.current = new Se(w, s)), o.current), R = A(), P = (T) => {
     R.initView(T), c.push(
       R.diagramEvent$.subscribe((C) => {
         a?.(C);
@@ -8108,30 +8152,30 @@ const xe = ({
       })
     );
   };
-  St(() => {
+  $t(() => {
     n.current && (d.current || (P(n.current), d.current = !0, e?.(R)));
-  }, [n.current]), po(() => {
-    n.current && (I(!0), P(n.current), e?.(R));
-  }, [s]), St(() => {
+  }, [n.current]), fo(() => {
+    n.current && (A(!0), P(n.current), e?.(R));
+  }, [s]), $t(() => {
     t && r.import(R.model, t);
   }, [t]);
-  const et = (T, C, O) => {
-    if (b !== void 0 && C.editable !== !1 && !wt(T.getValue(C.name), O)) {
+  const ot = (T, C, O) => {
+    if (b !== void 0 && C.editable !== !1 && !Ct(T.getValue(C.name), O)) {
       T.setValue(C.name, O);
-      const x = new yt(
+      const x = new kt(
         b.propertySet,
         void 0
       );
-      x.setValues(b.getValues()), x.rootElement = b.rootElement, v.valueSet = x, b.rootElement.valueSet = x, R.propertyEditorChanges$?.next();
+      x.setValues(b.getValues()), x.rootElement = b.rootElement, p.valueSet = x, b.rootElement.valueSet = x, R.propertyEditorChanges$?.next();
     }
   };
-  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: [
+  return /* @__PURE__ */ y("daga-diagram", { children: /* @__PURE__ */ y(Si.Provider, { value: s, children: /* @__PURE__ */ y(It.Provider, { value: R, children: /* @__PURE__ */ M("daga-diagram-editor", { children: [
     /* @__PURE__ */ y("div", { className: "daga-append-to", ref: n }),
-    /* @__PURE__ */ M($t.Provider, { value: R, children: [
+    /* @__PURE__ */ M(It.Provider, { value: R, children: [
       s.components?.buttons !== void 0 && s.components?.buttons?.enabled !== !1 && /* @__PURE__ */ y(
-        Oi,
+        zi,
         {
-          location: s.components?.buttons?.location || Kt.BottomRight,
+          location: s.components?.buttons?.location || qt.BottomRight,
           direction: s.components?.buttons?.direction || g.Top,
           centerAnimationDuration: s.components?.buttons?.centerAnimationDuration,
           enableAction: s.components?.buttons?.enableAction !== !1,
@@ -8142,9 +8186,9 @@ const xe = ({
         }
       ),
       s.components?.palette !== void 0 && s.components?.palette?.enabled !== !1 && s.components?.palette?.sections && (s.components?.palette?.sections?.length || 0) > 0 && /* @__PURE__ */ y(
-        Vi,
+        Pi,
         {
-          location: s.components?.palette?.location || Kt.TopLeft,
+          location: s.components?.palette?.location || qt.TopLeft,
           direction: s.components?.palette?.direction || g.Bottom,
           width: s.components?.palette?.width || "12rem",
           height: s.components?.palette?.height,
@@ -8152,21 +8196,21 @@ const xe = ({
         }
       ),
       s.components?.propertyEditor !== void 0 && s.components?.propertyEditor?.enabled !== !1 && /* @__PURE__ */ y(
-        zi,
+        Mi,
         {
-          location: s.components?.propertyEditor?.location || Kt.TopRight,
+          location: s.components?.propertyEditor?.location || qt.TopRight,
           direction: s.components?.propertyEditor?.direction || g.Bottom,
           width: s.components?.propertyEditor?.width || "24rem",
           height: s.components?.propertyEditor?.height,
           title: h,
           valueSet: b,
-          onValueChange: et
+          onValueChange: ot
         }
       ),
-      s.components?.errors !== void 0 && s.components?.errors?.enabled !== !1 && /* @__PURE__ */ y(xi, {})
+      s.components?.errors !== void 0 && s.components?.errors?.enabled !== !1 && /* @__PURE__ */ y($i, {})
     ] })
   ] }) }) }) });
 };
 export {
-  Fi as DagaDiagram
+  Hi as DagaDiagram
 };