@metadev/daga-react 4.2.14 → 4.2.16

package/index.mjs

@@ -1,7 +1,7 @@
-import { jsx as v, jsxs as T, Fragment as ho } from "react/jsx-runtime";
-import * as x from "d3";
-import { debounceTime as go, Subject as Wt, merge as fo, map as uo } from "rxjs";
-import { createContext as Fe, useState as D, useContext as Dt, useRef as rt, useEffect as Ct, useMemo as po } from "react";
+import { jsx as y, jsxs as M, Fragment as ho } from "react/jsx-runtime";
+import * as L from "d3";
+import { debounceTime as go, Subject as 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) => {
   const n = (() => {
@@ -65,9 +65,9 @@ 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))($ || {}), 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 || {}), A = /* @__PURE__ */ ((s) => (s.Drag = "drag", s.Start = "start", s.End = "end", s))(A || {}), ue = /* @__PURE__ */ ((s) => (s.Zoom = "zoom", s.Start = "start", s.End = "end", s))(ue || {});
-const pe = (s) => s.replace(/([!"#$%&'()*+,\-./:;<=>?@[\\\]^`{|}])/g, "\\$1");
-var De = /* @__PURE__ */ ((s) => (s.Straight = "straight", s.Bezier = "bezier", s.Square = "square", s))(De || {}), Se = /* @__PURE__ */ ((s) => (s.Solid = "solid", s.Dashed = "dashed", s.GappedDashes = "gapped-dashes", s.Dotted = "dotted", s))(Se || {});
+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 || {});
+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) => {
   if (typeof s == "function")
     return s(
@@ -270,7 +270,7 @@ const vo = 20, yo = (s, t, e, a, l) => {
     }
     return r;
   }
-}, me = (s, t) => {
+}, ve = (s, t) => {
   switch (s) {
     case "dotted":
       return `${t}`;
@@ -286,7 +286,7 @@ const vo = 20, yo = (s, t, e, a, l) => {
   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 || {});
-const ve = (s, t, e, a, l) => {
+const ye = (s, t, e, a, l) => {
   if (typeof s == "function")
     return s(t, e, a, l);
   switch (s) {
@@ -314,23 +314,23 @@ const ve = (s, t, e, a, l) => {
       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`;
-var L = /* @__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))(L || {});
+var E = /* @__PURE__ */ ((s) => (s.AllScroll = "all-scroll", s.Auto = "auto", s.Crosshair = "crosshair", s.EWResize = "ew-resize", s.Grab = "grab", s.Grabbing = "grabbing", s.Move = "move", s.NoDrop = "no-drop", s.NSResize = "ns-resize", s.NotAllowed = "not-allowed", s.ZoomIn = "zoom-in", s.ZoomOut = "zoom-out", s))(E || {});
 const Io = (s) => Math.max(...s.split(`
-`).map((t) => t.length)), xo = (s) => s.match(/\n/g)?.length || 0, W = [];
+`).map((t) => t.length)), xo = (s) => s.match(/\n/g)?.length || 0, j = [];
 for (let s = 0; s < 256; ++s)
-  W.push((s + 256).toString(16).slice(1));
+  j.push((s + 256).toString(16).slice(1));
 function Lo(s, t = 0) {
-  return (W[s[t + 0]] + W[s[t + 1]] + W[s[t + 2]] + W[s[t + 3]] + "-" + W[s[t + 4]] + W[s[t + 5]] + "-" + W[s[t + 6]] + W[s[t + 7]] + "-" + W[s[t + 8]] + W[s[t + 9]] + "-" + W[s[t + 10]] + W[s[t + 11]] + W[s[t + 12]] + W[s[t + 13]] + W[s[t + 14]] + W[s[t + 15]]).toLowerCase();
+  return (j[s[t + 0]] + j[s[t + 1]] + j[s[t + 2]] + j[s[t + 3]] + "-" + j[s[t + 4]] + j[s[t + 5]] + "-" + j[s[t + 6]] + j[s[t + 7]] + "-" + j[s[t + 8]] + j[s[t + 9]] + "-" + j[s[t + 10]] + j[s[t + 11]] + j[s[t + 12]] + j[s[t + 13]] + j[s[t + 14]] + j[s[t + 15]]).toLowerCase();
 }
-let ae;
+let le;
 const Eo = new Uint8Array(16);
 function To() {
-  if (!ae) {
+  if (!le) {
     if (typeof crypto > "u" || !crypto.getRandomValues)
       throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-    ae = crypto.getRandomValues.bind(crypto);
+    le = crypto.getRandomValues.bind(crypto);
   }
-  return ae(Eo);
+  return le(Eo);
 }
 const Mo = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), Te = { randomUUID: Mo };
 function No(s, t, e) {
@@ -343,14 +343,16 @@ function No(s, t, e) {
 function Me(s, t, e) {
   return Te.randomUUID && !s ? Te.randomUUID() : No(s);
 }
-const Nt = (s) => {
+const Ct = (s) => {
   if (typeof s != "object")
     return s;
+  if (Array.isArray(s))
+    return s.map(Ct);
   const t = {};
   for (const e of Object.entries(s))
-    typeof e[1] == "object" ? t[e[0]] = Nt(e[1]) : t[e[0]] = e[1];
+    t[e[0]] = Ct(e[1]);
   return t;
-}, st = (s) => {
+}, nt = (s) => {
   const { selected: t, highlighted: e, selectedAndHighlighted: a, ...l } = s, r = l, i = {
     ...r,
     ...t
@@ -481,7 +483,7 @@ class ee {
       yield t;
   }
 }
-const Pt = 0;
+const Nt = 0;
 class At {
   constructor(t, e) {
     this.selfRemoved = !1, this.selfRemovedTimestamp = null, this.model = t, this._id = e;
@@ -511,7 +513,7 @@ class At {
    * @private
    */
   select() {
-    return this.model.canvas?.selectCanvasView()?.select(`[id='${pe(this.id)}']`);
+    return this.model.canvas?.selectCanvasView()?.select(`[id='${me(this.id)}']`);
   }
 }
 class ft extends ee {
@@ -557,7 +559,7 @@ class Po {
     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;
   }
 }
-var M = /* @__PURE__ */ ((s) => (s.Boolean = "boolean", s.Color = "color", s.Date = "date", s.Datetime = "datetime", s.Number = "number", s.Object = "object", s.Option = "option", s.OptionList = "option-list", s.OptionSet = "option-set", s.Text = "text", s.TextArea = "text-area", s.TextList = "text-list", s.TextSet = "text-set", s.TextMap = "text-map", s.Time = "time", s.Url = "url", s))(M || {});
+var N = /* @__PURE__ */ ((s) => (s.Boolean = "boolean", s.Color = "color", s.Date = "date", s.Datetime = "datetime", s.Number = "number", s.Object = "object", s.Option = "option", s.OptionList = "option-list", s.OptionSet = "option-set", s.Text = "text", s.TextArea = "text-area", s.TextList = "text-list", s.TextSet = "text-set", s.TextMap = "text-map", s.Time = "time", s.Url = "url", s))(N || {});
 class oe {
   constructor(t = []) {
     this.propertyList = t, this.propertyMap = {};
@@ -577,10 +579,10 @@ class oe {
 function kt(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, St = (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, wt = (s, t) => s === t || JSON.stringify(s) === JSON.stringify(t), Be = (s, t, e) => {
   const a = {}, l = {};
   for (const r in e.propertySet.propertyMap)
-    if (e.propertySet.propertyMap[r].type === M.Object) {
+    if (e.propertySet.propertyMap[r].type === N.Object) {
       const i = Be(
         s[r],
         t[r],
@@ -588,7 +590,7 @@ const Ne = (s) => s == null || s === "" || s instanceof Array && s.length === 0
       );
       Object.keys(i[0]).length > 0 && Object.keys(i[1]).length > 0 && (a[r] = i[0], l[r] = i[1]);
     } else
-      St(s[r], t[r]) || (a[r] = s[r], l[r] = t[r]);
+      wt(s[r], t[r]) || (a[r] = s[r], l[r] = t[r]);
   return [a, l];
 }, zo = (s) => s != null && s.constructor === Object;
 class yt {
@@ -652,7 +654,7 @@ class yt {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getValue(t) {
     const e = this.propertySet.getProperty(t)?.rootAttribute;
-    return e != null && (this.values[t] = this.getRootElementValue(e)), this.propertySet.getProperty(t).type === M.Object ? this.valueSets[t].getValues() : this.values[t];
+    return e != null && (this.values[t] = this.getRootElementValue(e)), this.propertySet.getProperty(t).type === N.Object ? this.valueSets[t].getValues() : this.values[t];
   }
   /**
    * Obtains all the values in the set.
@@ -662,7 +664,7 @@ class yt {
   getValues() {
     const t = {};
     for (const e in this.propertySet.propertyMap)
-      this.propertySet.getProperty(e).type === M.Object ? t[e] = this.valueSets[e].getValues() : t[e] = this.getValue(e);
+      this.propertySet.getProperty(e).type === N.Object ? t[e] = this.valueSets[e].getValues() : t[e] = this.getValue(e);
     return t;
   }
   /**
@@ -673,7 +675,7 @@ class yt {
   getValuesForKeys(t) {
     const e = {};
     for (const a in t)
-      this.propertySet.getProperty(a).type === M.Object ? e[a] = this.valueSets[a].getValuesForKeys(
+      this.propertySet.getProperty(a).type === N.Object ? e[a] = this.valueSets[a].getValuesForKeys(
         t[a]
       ) : e[a] = this.getValue(a);
     return e;
@@ -686,7 +688,7 @@ class yt {
   getTimestamps() {
     const t = {};
     for (const e in this.propertySet.propertyMap)
-      if (this.propertySet.getProperty(e).type === M.Object)
+      if (this.propertySet.getProperty(e).type === N.Object)
         t[e] = this.valueSets[e].getTimestamps();
       else {
         const l = this.ownTimestamps[e];
@@ -712,7 +714,7 @@ class yt {
    */
   hasSetValue(t) {
     const e = this.getValue(t), a = this.propertySet.getProperty(t);
-    return a && a.type === M.Object ? this.getSubValueSet(t).hasAnySetValue() : !Ne(e) && !St(e, a?.defaultValue);
+    return a && a.type === N.Object ? this.getSubValueSet(t).hasAnySetValue() : !Ne(e) && !wt(e, a?.defaultValue);
   }
   /**
    * Checks if any of the values in the set are not empty or the default value.
@@ -734,7 +736,7 @@ class yt {
   setValue(t, e) {
     const a = this.propertySet.getProperty(t);
     if (a) {
-      a.type === M.Object ? this.valueSets[t].setValues(e) : (this.values[t] = e, St(e, a.defaultValue) || this.displayProperty(a));
+      a.type === N.Object ? this.valueSets[t].setValues(e) : (this.values[t] = e, wt(e, a.defaultValue) || this.displayProperty(a));
       const l = a.rootAttribute;
       l != null && this.setRootElementValue(l, e);
     }
@@ -747,7 +749,7 @@ class yt {
   setValues(t) {
     this.resetValues();
     for (const e in t)
-      this.propertySet.getProperty(e).type === M.Object ? this.valueSets[e].setValues(
+      this.propertySet.getProperty(e).type === N.Object ? this.valueSets[e].setValues(
         t[e]
       ) : this.setValue(e, t[e]);
   }
@@ -759,7 +761,7 @@ class yt {
   setTimestamps(t) {
     this.ownTimestamps = {};
     for (const e in t)
-      this.propertySet.getProperty(e).type === M.Object ? this.valueSets[e].setTimestamps(
+      this.propertySet.getProperty(e).type === N.Object ? this.valueSets[e].setTimestamps(
         t[e]
       ) : this.ownTimestamps[e] = t[e];
   }
@@ -770,7 +772,7 @@ class yt {
    */
   overwriteValues(t) {
     for (const e in t)
-      this.propertySet.getProperty(e).type === M.Object ? this.valueSets[e].overwriteValues(
+      this.propertySet.getProperty(e).type === N.Object ? this.valueSets[e].overwriteValues(
         t[e]
       ) : this.setValue(e, t[e]);
   }
@@ -781,7 +783,7 @@ class yt {
    */
   overwriteValuesLww(t, e) {
     for (const a in t)
-      this.propertySet.getProperty(a).type === M.Object ? this.valueSets[a].overwriteValuesLww(
+      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);
@@ -795,7 +797,7 @@ class yt {
     this.displayedProperties = [], this.hiddenProperties = [], this.ownTimestamps = {};
     for (const t in this.propertySet.propertyMap) {
       const e = this.propertySet.getProperty(t), a = e.rootAttribute;
-      e.type === M.Object ? this.valueSets[t] = this.constructSubValueSet(t) : this.values[t] = Nt(e.defaultValue), a != null && e.defaultValue !== void 0 && !St(
+      e.type === N.Object ? this.valueSets[t] = this.constructSubValueSet(t) : this.values[t] = Ct(e.defaultValue), a != null && e.defaultValue !== void 0 && !wt(
         this.getRootElementValue(a),
         e.defaultValue
       ) && this.setRootElementValue(a, this.values[t]), e.basic !== !1 ? this.displayedProperties.push(e) : this.hiddenProperties.push(e);
@@ -810,7 +812,7 @@ class yt {
   constructSubValueSet(t) {
     const e = this.propertySet.getProperty(t), a = new oe(e.properties), l = new yt(a, this.rootElement);
     return l.overwriteValues(
-      Nt(e.defaultValue)
+      Ct(e.defaultValue)
     ), l;
   }
   /**
@@ -839,7 +841,7 @@ class yt {
     this.hiddenProperties.includes(t) || (this.hiddenProperties.push(t), B(this.displayedProperties, t));
   }
 }
-const et = {
+const ot = {
   name: "",
   label: null,
   look: {
@@ -847,7 +849,7 @@ const et = {
     color: "#000000",
     thickness: 1,
     shape: De.Straight,
-    style: Se.Solid,
+    style: Ce.Solid,
     selected: {
       color: "#AA00AA"
     },
@@ -864,20 +866,20 @@ const et = {
 class Xe {
   constructor(t) {
     const e = {
-      ...et,
+      ...ot,
       ...t
     };
     this.id = e.id, this.name = e.name, this.label = e.label;
-    const a = st(e.look);
+    const a = nt(e.look);
     if (this.defaultLook = a.defaultLook, this.selectedLook = a.selectedLook, this.highlightedLook = a.highlightedLook, this.selectedAndHighlightedLook = a.selectedAndHighlightedLook, e.startMarkerLook !== void 0) {
-      const l = st(
+      const l = nt(
         e.startMarkerLook
       );
       this.defaultStartMarkerLook = l.defaultLook, this.selectedStartMarkerLook = l.selectedLook, this.highlightedStartMarkerLook = l.highlightedLook, this.selectedAndHighlightedStartMarkerLook = l.selectedAndHighlightedLook;
     } else
       this.defaultStartMarkerLook = null, this.selectedStartMarkerLook = null, this.highlightedStartMarkerLook = null, this.selectedAndHighlightedStartMarkerLook = null;
     if (e.endMarkerLook !== void 0) {
-      const l = st(
+      const l = nt(
         e.endMarkerLook
       );
       this.defaultEndMarkerLook = l.defaultLook, this.selectedEndMarkerLook = l.selectedLook, this.highlightedEndMarkerLook = l.highlightedLook, this.selectedAndHighlightedEndMarkerLook = l.selectedAndHighlightedLook;
@@ -953,7 +955,7 @@ class dt extends At {
    */
   set lookConfig(t) {
     if (this._lookConfig = t, t) {
-      const e = st(t);
+      const e = nt(t);
       this._defaultLook = {
         ...this._defaultLook,
         ...e.defaultLook
@@ -998,7 +1000,7 @@ class dt extends At {
    */
   set startMarkerLookConfig(t) {
     if (this._startMarkerLookConfig = t, t) {
-      const e = st(
+      const e = nt(
         t
       );
       this._defaultStartMarkerLook = {
@@ -1045,7 +1047,7 @@ class dt extends At {
    */
   set endMarkerLookConfig(t) {
     if (this._endMarkerLookConfig = t, t) {
-      const e = st(t);
+      const e = nt(t);
       this._defaultEndMarkerLook = {
         ...this._defaultEndMarkerLook,
         ...e.defaultLook
@@ -1069,7 +1071,7 @@ class dt extends At {
     this.model.canvas?.updateConnectionsInView(this.id);
   }
   raise() {
-    this.select()?.raise();
+    this.select()?.raise(), this.start?.raise(!1), this.end?.raise(!1);
   }
   /**
    * Set the start of this connection to the given port or reset this connection's starting port if `undefined`.
@@ -1095,70 +1097,70 @@ class dt extends At {
    * @public
    */
   tighten() {
-    const t = this.model.canvas?.allowConnectionLoops || !1, e = this.model.canvas?.allowSharingPorts !== !1, a = this.model.canvas?.allowSharingBothPorts || !1;
+    const t = this.model.canvas?.allowConnectionLoops || !1, e = this.model.canvas?.allowSharingPorts !== !1, a = this.model.canvas?.allowSharingBothPorts || !1, l = this.model.canvas?.tightenConnectionsAcrossPortTypes || !1;
     if (this.start?.rootElement && this.end) {
-      const l = this.start.rootElement.ports.map((r) => [
-        r,
-        r.distanceTo(this.end.coords)
-      ]).sort((r, i) => r[1] - i[1]).map((r) => r[0]);
-      t: for (const r of l) {
-        if (!t && r === this.end || !r.allowsOutgoing || !e && (r.incomingConnections.filter(
-          (i) => !i.removed && i !== this
-        ).length > 0 || r.outgoingConnections.filter(
-          (i) => !i.removed && i !== this
+      const r = this.start.rootElement.ports.map((i) => [
+        i,
+        i.distanceTo(this.end.coords)
+      ]).sort((i, n) => i[1] - n[1]).map((i) => i[0]);
+      t: for (const i of r) {
+        if (!t && i === this.end || !i.allowsOutgoing || !l && i.type !== this.start.type || !e && (i.incomingConnections.filter(
+          (n) => !n.removed && n !== this
+        ).length > 0 || i.outgoingConnections.filter(
+          (n) => !n.removed && n !== this
         ).length > 0))
           continue t;
         if (!a) {
-          for (const i of r.outgoingConnections.filter(
-            (n) => !n.removed
+          for (const n of i.outgoingConnections.filter(
+            (o) => !o.removed
           ))
-            if (i !== this && i.end === this.end)
+            if (n !== this && n.end === this.end)
               continue t;
-          for (const i of r.incomingConnections.filter(
-            (n) => !n.removed
+          for (const n of i.incomingConnections.filter(
+            (o) => !o.removed
           ))
-            if (i !== this && i.start === this.end)
+            if (n !== this && n.start === this.end)
               continue t;
         }
-        if (r === this.start)
+        if (i === this.start)
           break t;
-        this.setStart(r);
+        this.setStart(i);
         break t;
       }
     }
     if (this.end?.rootElement && this.start) {
-      const l = this.end.rootElement.ports.map((r) => [
-        r,
-        r.distanceTo(this.start.coords)
-      ]).sort((r, i) => r[1] - i[1]).map((r) => r[0]);
-      t: for (const r of l) {
-        if (!t && r === this.start || !r.allowsIncoming || !e && (r.incomingConnections.filter(
-          (i) => !i.removed && i !== this
-        ).length > 0 || r.outgoingConnections.filter(
-          (i) => !i.removed && i !== this
+      const r = this.end.rootElement.ports.map((i) => [
+        i,
+        i.distanceTo(this.start.coords)
+      ]).sort((i, n) => i[1] - n[1]).map((i) => i[0]);
+      t: for (const i of r) {
+        if (!t && i === this.start || !i.allowsIncoming || !l && i.type !== this.end.type || !e && (i.incomingConnections.filter(
+          (n) => !n.removed && n !== this
+        ).length > 0 || i.outgoingConnections.filter(
+          (n) => !n.removed && n !== this
         ).length > 0))
           continue t;
         if (!a) {
-          for (const i of r.incomingConnections.filter(
-            (n) => !n.removed
+          for (const n of i.incomingConnections.filter(
+            (o) => !o.removed
           ))
-            if (i !== this && i.start === this.start)
+            if (n !== this && n.start === this.start)
               continue t;
-          for (const i of r.outgoingConnections.filter(
-            (n) => !n.removed
+          for (const n of i.outgoingConnections.filter(
+            (o) => !o.removed
           ))
-            if (i !== this && i.end === this.start)
+            if (n !== this && n.end === this.start)
               continue t;
         }
-        if (r === this.end)
+        if (i === this.end)
           break t;
-        this.setEnd(r);
+        this.setEnd(i);
         break t;
       }
     }
   }
   getPriority() {
-    return this.start ? this.end ? Math.min(this.start.getPriority(), this.end.getPriority()) : this.start.getPriority() : this.end ? this.end.getPriority() : Pt;
+    return this.start ? this.end ? Math.min(this.start.getPriority(), this.end.getPriority()) : this.start.getPriority() : this.end ? this.end.getPriority() : Nt;
   }
 }
 class Ro extends ft {
@@ -1197,7 +1199,7 @@ class Ro extends ft {
       a,
       l
     );
-    return super.add(i), i.updateInView(), i.valueSet.resetValues(), i;
+    return super.add(i), i.updateInView(), i.valueSet.resetValues(), i.start?.raise(!1), i.end?.raise(!1), i;
   }
   remove(t) {
     const e = this.get(t, !0);
@@ -1221,10 +1223,10 @@ const V = {
 };
 class ht extends At {
   constructor(t, e, a, l, r, i, n, o, d, c, h, f, b, m, p, u) {
-    const y = `${e?.id}_field`;
-    if (t.fields.get(y) !== void 0)
+    const v = `${e?.id}_field`;
+    if (t.fields.get(v) !== void 0)
       throw new Error("DiagramField for rootElement already exists");
-    if (super(t, y), 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, 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)))
       this.orientation = Number(f);
     else
       switch (f) {
@@ -1273,7 +1275,7 @@ class ht extends At {
     this.coords = t, this.updateInView();
   }
   getPriority() {
-    return this.rootElement?.getPriority() || Pt;
+    return this.rootElement?.getPriority() || Nt;
   }
 }
 class Vo extends ft {
@@ -1314,7 +1316,7 @@ class Vo extends ft {
     e && (e.rootElement?.label !== void 0 && e.rootElement.label === e && (e.rootElement.label = void 0), super.remove(t), e.updateInView());
   }
 }
-const K = (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], ot = (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]);
+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 {
@@ -1330,8 +1332,8 @@ class _o {
 }
 class Go {
   constructor(t) {
-    this.label = t.label || null, this.ports = t.ports || [], this.priority = t.priority || Pt, this.resizableX = t.resizableX, this.resizableY = t.resizableY;
-    const e = st(t.look || je);
+    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.defaultLook = e.defaultLook, this.selectedLook = e.selectedLook, this.highlightedLook = e.highlightedLook, this.selectedAndHighlightedLook = e.selectedAndHighlightedLook;
   }
 }
@@ -1381,7 +1383,7 @@ class F extends At {
    */
   set lookConfig(t) {
     if (this._lookConfig = t, t) {
-      const e = st(t);
+      const e = nt(t);
       this._defaultLook = {
         ...this._defaultLook,
         ...e.defaultLook
@@ -1421,7 +1423,7 @@ class F extends At {
     return this.node?.type?.sectionGrid?.minHeights?.[this.indexYInNode] || Ho;
   }
   getPriority() {
-    return this.node?.type?.sectionGrid?.sections?.[this.indexYInNode]?.[this.indexXInNode]?.priority || Pt;
+    return this.node?.type?.sectionGrid?.sections?.[this.indexYInNode]?.[this.indexXInNode]?.priority || Nt;
   }
   /**
    * Returns whether this section can be resized horizontally.
@@ -1575,7 +1577,7 @@ class F extends At {
     this.label && (this.label.coords = [
       this.coords[0] + Y(i?.label),
       this.coords[1] + U(i?.label)
-    ], this.label.width = this.width - Y(i?.label) - ot(i?.label), this.label.height = this.height - U(i?.label) - K(i?.label), this.label.updateInView());
+    ], this.label.width = this.width - Y(i?.label) - it(i?.label), this.label.height = this.height - U(i?.label) - q(i?.label), this.label.updateInView());
     for (const n of this.decorators)
       n.move(
         Qt(
@@ -1639,28 +1641,28 @@ class Fo extends ft {
             ...V,
             ...b.type?.label
           }, p = 6 * m.fontSize + Ot(m) + Ht(m), u = m.fontSize + _t(m) + Vt(m);
-          let y;
+          let v;
           switch (b.direction) {
             case g.Bottom:
             case g.Left:
             case g.Right:
-              y = [
+              v = [
                 b.coords[0] - p / 2,
-                b.coords[1] - u - K(m)
+                b.coords[1] - u - q(m)
               ];
               break;
             case g.Top:
-              y = [
+              v = [
                 b.coords[0] - p / 2,
                 b.coords[1] + U(m)
               ];
               break;
             default:
-              y = b.coords;
+              v = b.coords;
           }
           this.model.fields.new(
             b,
-            y,
+            v,
             m.fontSize,
             m.fontFamily,
             m.color,
@@ -1693,8 +1695,8 @@ class Fo extends ft {
         h.fontFamily,
         h.color,
         h.selectedColor,
-        o.width - Y(h) - ot(h),
-        o.height - U(h) - K(h),
+        o.width - Y(h) - it(h),
+        o.height - U(h) - q(h),
         h.horizontalAlign,
         h.verticalAlign,
         h.orientation,
@@ -1715,7 +1717,7 @@ class Fo extends ft {
     }
   }
 }
-const je = {
+const We = {
   lookType: "shaped-look",
   shape: Mt.Rectangle,
   fillColor: "#FFFFFF",
@@ -1742,21 +1744,21 @@ const je = {
   ports: [],
   decorators: [],
   sectionGrid: null,
-  look: je,
+  look: We,
   isUnique: !1,
   canBeParentless: !0,
   childrenTypes: [],
-  priority: Pt,
+  priority: Nt,
   properties: []
 };
-class We {
+class je {
   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;
-    const a = st(e.look);
+    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 || []);
   }
 }
@@ -1821,7 +1823,7 @@ class z extends At {
    */
   set lookConfig(t) {
     if (this._lookConfig = t, t) {
-      const e = st(t);
+      const e = nt(t);
       this._defaultLook = {
         ...this._defaultLook,
         ...e.defaultLook
@@ -2212,7 +2214,7 @@ class z extends At {
     this.label && (this.label.coords = [
       this.coords[0] + Y(this.type.label),
       this.coords[1] + U(this.type.label)
-    ], this.label.width = this.width - Y(this.type.label) - ot(this.type.label), this.label.height = this.height - U(this.type.label) - K(this.type.label), this.label.updateInView());
+    ], this.label.width = this.width - Y(this.type.label) - it(this.type.label), this.label.height = this.height - U(this.type.label) - q(this.type.label), this.label.updateInView());
     for (const i of this.decorators)
       i.move(
         Qt(
@@ -2348,7 +2350,7 @@ class Uo extends ft {
    */
   new(t, e, a) {
     let l;
-    if (t instanceof We)
+    if (t instanceof je)
       l = t;
     else {
       const i = this.types.get(t);
@@ -2404,7 +2406,7 @@ class Uo extends ft {
             case g.Right:
               b = [
                 d.coords[0] - h / 2,
-                d.coords[1] - f - K(c)
+                d.coords[1] - f - q(c)
               ];
               break;
             case g.Top:
@@ -2450,8 +2452,8 @@ class Uo extends ft {
         i.fontFamily,
         i.color,
         i.selectedColor,
-        r.width - Y(i) - ot(i),
-        r.height - U(i) - K(i),
+        r.width - Y(i) - it(i),
+        r.height - U(i) - q(i),
         i.horizontalAlign,
         i.verticalAlign,
         i.orientation,
@@ -2526,7 +2528,7 @@ const Ze = (s) => {
   highlighted: {
     fillColor: "rgba(0, 255, 255, 0.5)"
   }
-}, Zt = st(Ke), qe = {
+}, Zt = nt(Ke), qe = {
   name: "",
   label: null,
   allowsOutgoing: !0,
@@ -2534,14 +2536,14 @@ const Ze = (s) => {
   width: 24,
   look: Ke
 };
-class jo {
+class Wo {
   constructor(t) {
     const e = {
       ...qe,
       ...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;
-    const a = st(e.look);
+    const a = nt(e.look);
     this.defaultLook = a.defaultLook, this.selectedLook = a.selectedLook, this.highlightedLook = a.highlightedLook, this.selectedAndHighlightedLook = a.selectedAndHighlightedLook;
   }
 }
@@ -2621,7 +2623,7 @@ class bt extends At {
    */
   set lookConfig(t) {
     if (this._lookConfig = t, t) {
-      const e = st(
+      const e = nt(
         t
       );
       this._defaultLook = {
@@ -2660,12 +2662,13 @@ class bt extends At {
   updateInView() {
     this.model.canvas?.updatePortsInView(this.id);
   }
-  raise() {
-    this.select()?.raise(), this.label && this.label.raise();
-    for (const t of this.incomingConnections)
-      t.raise();
-    for (const t of this.outgoingConnections)
-      t.raise();
+  raise(t = !0) {
+    if (this.select()?.raise(), this.label && this.label.raise(), t) {
+      for (const e of this.incomingConnections)
+        e.raise();
+      for (const e of this.outgoingConnections)
+        e.raise();
+    }
   }
   /**
    * Add a connection to this port's list of outgoing connections.
@@ -2695,7 +2698,7 @@ class bt extends At {
       return this.rootElement.node;
   }
   getPriority() {
-    return this.rootElement?.getPriority() || Pt;
+    return this.rootElement?.getPriority() || Nt;
   }
   /**
    * Change the coordinates of this port to the given coordinates and move its labels correspondingly.
@@ -2721,7 +2724,7 @@ class bt extends At {
     return Ue(this.coords, t);
   }
 }
-class Wo extends ft {
+class jo extends ft {
   /**
    * Instance a set of ports for the given model. This method is used internally.
    * @private
@@ -2771,50 +2774,48 @@ class Je {
     const a = t.nodes.types.get(e.type);
     if (a) {
       const l = new z(t, a, e.coords, e.id);
-      if (t.nodes.add(l), l.width = e.width, l.height = e.height, e.label) {
-        if (a.decorators)
-          for (let i = 0; i < a.decorators.length; ++i) {
-            const n = a.decorators[i];
-            t.decorators.new(
-              l,
-              [
-                l.coords[0] + n.coords[0],
-                l.coords[1] + n.coords[1]
-              ],
-              n.width,
-              n.height,
-              l.getPriority(),
-              n.html,
-              `${l.id}_decorator_${i}`
-            );
-          }
-        if (a.label) {
-          const i = {
-            ...V,
-            ...a.label
-          }, n = new ht(
-            t,
+      if (t.nodes.add(l), l.width = e.width, l.height = e.height, a.decorators)
+        for (let i = 0; i < a.decorators.length; ++i) {
+          const n = a.decorators[i];
+          t.decorators.new(
             l,
             [
-              l.coords[0] + Y(i),
-              l.coords[1] + U(i)
+              l.coords[0] + n.coords[0],
+              l.coords[1] + n.coords[1]
             ],
-            l.width - Y(i) - ot(i),
-            l.height - U(i) - K(i),
-            i.fontSize,
-            i.fontFamily,
-            i.color,
-            i.selectedColor,
-            i.horizontalAlign,
-            i.verticalAlign,
-            i.orientation,
-            "",
-            i.editable,
-            i.fit,
-            i.shrink
+            n.width,
+            n.height,
+            l.getPriority(),
+            n.html,
+            `${l.id}_decorator_${i}`
           );
-          n.text = e.label, l.label = n, t.fields.add(n), n.updateInView();
         }
+      if (a.label) {
+        const i = {
+          ...V,
+          ...a.label
+        }, n = new ht(
+          t,
+          l,
+          [
+            l.coords[0] + Y(i),
+            l.coords[1] + U(i)
+          ],
+          l.width - Y(i) - it(i),
+          l.height - U(i) - q(i),
+          i.fontSize,
+          i.fontFamily,
+          i.color,
+          i.selectedColor,
+          i.horizontalAlign,
+          i.verticalAlign,
+          i.orientation,
+          "",
+          i.editable,
+          i.fit,
+          i.shrink
+        );
+        n.text = e.label, l.label = n, t.fields.add(n), n.updateInView();
       }
       for (const i of e.children || []) {
         const n = this.importNode(t, i);
@@ -2831,7 +2832,7 @@ class Je {
           i.height,
           i.id
         );
-        if (l.sections?.push(n), t.sections.add(n), i.label && a.sectionGrid?.sections?.[i.indexYInNode]?.[i.indexXInNode]?.label) {
+        if (l.sections?.push(n), t.sections.add(n), a.sectionGrid?.sections?.[i.indexYInNode]?.[i.indexXInNode]?.label) {
           const d = {
             ...V,
             ...a.sectionGrid?.sections?.[i.indexYInNode]?.[i.indexXInNode]?.label
@@ -2842,8 +2843,8 @@ class Je {
               n.coords[0] + Y(d),
               n.coords[1] + U(d)
             ],
-            n.width - Y(d) - ot(d),
-            n.height - U(d) - K(d),
+            n.width - Y(d) - it(d),
+            n.height - U(d) - q(d),
             d.fontSize,
             d.fontFamily,
             d.color,
@@ -3022,7 +3023,7 @@ class ie {
   do() {
     const t = this.canvas.model.nodes.new(this.typeId, this.coords, this.id);
     this.parentId !== void 0 && this.canvas.model.nodes.get(this.parentId)?.addChild(t), t.label && (t.label.text = this.label || ""), this.values !== void 0 ? t.valueSet.setValues(
-      Nt({
+      Ct({
         ...t.valueSet.getValues(),
         ...this.values
       })
@@ -3051,7 +3052,7 @@ class ie {
     );
   }
 }
-class Ce {
+class $e {
   constructor(t, e, a, l, r, i, n) {
     this.canvas = t, this.nodeId = e, this.copyColumnIndex = a, this.copyRowIndex = l, this.removeColumnIndex = r, this.removeRowIndex = i, this.timestamp = n;
   }
@@ -3071,7 +3072,7 @@ class Ce {
     };
   }
   static deserialize(t, e) {
-    return new Ce(
+    return new $e(
       t,
       e.nodeId,
       e.copyColumnIndex,
@@ -3082,7 +3083,7 @@ class Ce {
     );
   }
 }
-class $e {
+class Ae {
   constructor(t, e, a) {
     this.canvas = t, this.to = e, this.timestamp = a;
   }
@@ -3103,7 +3104,7 @@ class $e {
     };
   }
   static deserialize(t, e) {
-    return new $e(
+    return new Ae(
       t,
       e.to,
       e.timestamp
@@ -3140,7 +3141,7 @@ class Ft {
     );
   }
 }
-class it {
+class st {
   constructor(t, e, a, l) {
     this.canvas = t, this.nodeId = e, this.to = a, this.timestamp = l;
   }
@@ -3165,7 +3166,7 @@ class it {
     };
   }
   static deserialize(t, e) {
-    return new it(
+    return new st(
       t,
       e.nodeId,
       e.to,
@@ -3399,11 +3400,11 @@ class Zo {
         break;
       }
       case "addSection": {
-        Ce.deserialize(this.canvas, t).do();
+        $e.deserialize(this.canvas, t).do();
         break;
       }
       case "applyLayout": {
-        $e.deserialize(
+        Ae.deserialize(
           this.canvas,
           t
         ).do();
@@ -3414,7 +3415,7 @@ class Zo {
         break;
       }
       case "setGeometry": {
-        it.deserialize(
+        st.deserialize(
           this.canvas,
           t
         ).do();
@@ -3513,7 +3514,7 @@ class Ko {
     });
   }
 }
-var w = /* @__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))(w || {});
+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 {
   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();
@@ -3529,7 +3530,7 @@ class qo {
       this.values
     );
     if (this.canvas.collabEngine.doCollaboratively(t), this.ancestorId !== void 0 && this.toAncestorGeometry !== void 0) {
-      const e = new it(
+      const e = new st(
         this.canvas,
         this.ancestorId,
         this.toAncestorGeometry,
@@ -3551,7 +3552,7 @@ class qo {
       this.canvas.collabEngine.freshTimestamp()
     );
     if (this.canvas.collabEngine.doCollaboratively(e), this.ancestorId !== void 0 && this.fromAncestorGeometry !== void 0) {
-      const a = new it(
+      const a = new st(
         this.canvas,
         this.ancestorId,
         this.fromAncestorGeometry,
@@ -3573,7 +3574,7 @@ class qo {
       this.canvas.collabEngine.freshTimestamp()
     );
     if (this.canvas.collabEngine.doCollaboratively(e), this.ancestorId !== void 0 && this.toAncestorGeometry !== void 0) {
-      const a = new it(
+      const a = new st(
         this.canvas,
         this.ancestorId,
         this.toAncestorGeometry,
@@ -3584,7 +3585,7 @@ class qo {
     return t === void 0;
   }
 }
-class le {
+class de {
   constructor(t, e, a) {
     this.canvas = t, this.nodeIds = e, this.delta = a;
   }
@@ -3617,14 +3618,14 @@ class X {
   do() {
     const t = this.canvas.model.nodes.get(this.nodeId);
     if (t) {
-      const e = new it(
+      const e = new st(
         this.canvas,
         this.nodeId,
         this.to,
         this.canvas.collabEngine.freshTimestamp()
       );
       if (this.canvas.collabEngine.doCollaboratively(e), this.ancestorId !== void 0 && this.toAncestorGeometry !== void 0) {
-        const a = new it(
+        const a = new st(
           this.canvas,
           this.ancestorId,
           this.toAncestorGeometry,
@@ -3639,14 +3640,14 @@ class X {
     const t = this.canvas.model.nodes.get(this.nodeId);
     if (t) {
       this.to = t.getGeometry();
-      const e = new it(
+      const e = new st(
         this.canvas,
         this.nodeId,
         this.from,
         this.canvas.collabEngine.freshTimestamp()
       );
       if (this.canvas.collabEngine.doCollaboratively(e), this.ancestorId !== void 0 && this.fromAncestorGeometry !== void 0) {
-        const a = new it(
+        const a = new st(
           this.canvas,
           this.ancestorId,
           this.fromAncestorGeometry,
@@ -3661,7 +3662,7 @@ class X {
     const t = this.canvas.model.nodes.get(this.nodeId);
     if (t) {
       this.from = t.getGeometry();
-      const e = new it(
+      const e = new st(
         this.canvas,
         this.nodeId,
         this.to,
@@ -3685,7 +3686,7 @@ class Jo {
       this.canvas.collabEngine.freshTimestamp()
     );
     if (this.canvas.collabEngine.doCollaboratively(e), this.ancestorId !== void 0 && this.toAncestorGeometry !== void 0) {
-      const a = new it(
+      const a = new st(
         this.canvas,
         this.ancestorId,
         this.toAncestorGeometry,
@@ -3704,7 +3705,7 @@ class Jo {
       this.canvas.collabEngine.freshTimestamp()
     );
     if (this.canvas.collabEngine.doCollaboratively(e), this.ancestorId !== void 0 && this.fromAncestorGeometry !== void 0) {
-      const a = new it(
+      const a = new st(
         this.canvas,
         this.ancestorId,
         this.fromAncestorGeometry,
@@ -3718,7 +3719,7 @@ class Jo {
     return this.do();
   }
 }
-class de {
+class ce {
   constructor(t, e, a, l) {
     this.canvas = t, this.type = e, this.startId = a, this.endId = l, this.id = this.canvas.collabEngine.freshId();
   }
@@ -4040,7 +4041,7 @@ class G extends Yt {
     ), this.targets = t, this.selected = e;
   }
 }
-class Q extends Yt {
+class tt extends Yt {
   /**
    * Create a diagram highlight event.
    *
@@ -4188,7 +4189,7 @@ class ni extends ft {
 }
 class eo {
   constructor(t, e, a, l, r, i = []) {
-    this.nodes = new Uo(this), this.sections = new Fo(this), this.ports = new Wo(this), this.connections = new Ro(this), this.fields = new Vo(this), this.objects = new ni(this), this.decorators = new ii(this), this.canvas = t, this.id = e, this.name = a, this.description = l, this.type = r, this.createdAt = /* @__PURE__ */ new Date(), this.updatedAt = /* @__PURE__ */ new Date(), this.logicalClock = 0, this.valueSet = new yt(new oe(i), this);
+    this.nodes = new Uo(this), this.sections = new Fo(this), this.ports = new jo(this), this.connections = new Ro(this), this.fields = new Vo(this), this.objects = new ni(this), this.decorators = new ii(this), this.canvas = t, this.id = e, this.name = a, this.description = l, this.type = r, this.createdAt = /* @__PURE__ */ new Date(), this.updatedAt = /* @__PURE__ */ new Date(), this.logicalClock = 0, this.valueSet = new yt(new oe(i), this);
   }
   /**
    * Deletes everything in this diagram.
@@ -4198,50 +4199,50 @@ 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, ce = (s, t, e, a, l, r, i, n) => yo(
+const vt = (s) => !!s.button, he = (s, t, e, a, l, r, i, n, o) => yo(
   s,
-  [t, e],
+  [t, ...r, e],
   a,
   l,
   Math.max(
     // reasonable value for the minimumDistanceBeforeTurn relative to the line width
     10,
-    i || 0,
-    n || 0
-  ) * r
+    n || 0,
+    o || 0
+  ) * i
 ), S = (s) => {
-  s ? x.select("body").style("cursor", s) : x.select("body").style("cursor", L.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, ye = (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) => {
   if (s instanceof z)
     return s.type.resizableX !== !1;
   if (s instanceof F) {
     if (s.type !== void 0)
       return s.type.resizableX !== !1;
     if (s.node !== void 0)
-      return ye(s.node);
+      return be(s.node);
   }
   return !1;
-}, be = (s) => {
+}, ke = (s) => {
   if (s instanceof z)
     return s.type.resizableY !== !1;
   if (s instanceof F) {
     if (s.type !== void 0)
       return s.type.resizableY !== !1;
     if (s.node !== void 0)
-      return be(s.node);
+      return ke(s.node);
   }
   return !1;
-}, he = (s) => {
+}, 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 = {
   fillColor: "#FFFFFF",
   borderColor: "#000000",
   borderThickness: 1,
-  borderStyle: Se.Solid
-}, ge = (s) => {
+  borderStyle: Ce.Solid
+}, fe = (s) => {
   s.filter(".shaped-look").select("path").attr(
     "d",
-    (t) => ve(
+    (t) => ye(
       t.look.shape || Mt.Rectangle,
       0,
       0,
@@ -4259,7 +4260,7 @@ const vt = (s) => !!s.button, ce = (s, t, e, a, l, r, i, n) => yo(
     (t) => `${t.look.borderThickness || zt.borderThickness}px`
   ).attr(
     "stroke-dasharray",
-    (t) => me(
+    (t) => ve(
       t.look.borderStyle || zt.borderStyle,
       t.type?.defaultLook?.borderThickness || t.look?.borderThickness || zt.borderThickness
     )
@@ -4326,7 +4327,7 @@ const vt = (s) => !!s.button, ce = (s, t, e, a, l, r, i, n) => yo(
     }
     t.select("rect").attr("fill", `url(#${e})`);
   }
-}, ke = 96, j = 32, xt = ke + j, ai = Math.PI / 4, li = 100, Ve = {
+}, we = 96, W = 32, xt = we + W, ai = Math.PI / 4, li = 100, Ve = {
   customButtons: []
 };
 class di {
@@ -4346,25 +4347,25 @@ 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) => {
-      this.canvas.canUserPerformAction(w.ContextMenu) && (t.preventDefault(), this.open(i));
+      this.canvas.canUserPerformAction(k.ContextMenu) && (t.preventDefault(), this.open(i));
     }).on($.Click, (i) => {
       i.preventDefault(), this.close();
     });
     this.contextMenuContainer = l;
     const r = [];
-    this.canvas.userSelection.length !== 0 && this.canvas.canUserPerformAction(w.Clipboard) && this.canvas.canUserPerformAction(w.Remove) && r.push({
+    this.canvas.userSelection.length !== 0 && this.canvas.canUserPerformAction(k.Clipboard) && this.canvas.canUserPerformAction(k.Remove) && r.push({
       name: "CUT",
       imageClass: "daga-cut",
       onPress: (i) => {
         i.userSelection.cutToClipboard(), i.cancelAllUserActions();
       }
-    }), this.canvas.userSelection.length !== 0 && this.canvas.canUserPerformAction(w.Clipboard) && r.push({
+    }), this.canvas.userSelection.length !== 0 && this.canvas.canUserPerformAction(k.Clipboard) && r.push({
       name: "COPY",
       imageClass: "daga-copy",
       onPress: (i) => {
         i.userSelection.copyToClipboard(), i.cancelAllUserActions();
       }
-    }), this.canvas.canUserPerformAction(w.Paste) && r.push({
+    }), this.canvas.canUserPerformAction(k.Paste) && r.push({
       name: "PASTE",
       imageClass: "daga-paste",
       onPress: (i) => {
@@ -4372,7 +4373,7 @@ class di {
           i.getClosestGridPoint(a)
         ), i.cancelAllUserActions();
       }
-    }), this.canvas.userSelection.length !== 0 && this.canvas.canUserPerformAction(w.Remove) && r.push({
+    }), this.canvas.userSelection.length !== 0 && this.canvas.canUserPerformAction(k.Remove) && r.push({
       name: "DELETE",
       imageClass: "daga-delete",
       onPress: (i) => {
@@ -4390,19 +4391,19 @@ class di {
       const n = r[i], o = n.onPress, d = (i + 0.5 - r.length / 2) * ai, c = l.append("xhtml:div").attr(
         "class",
         `daga-context-menu-button ${n.onPress !== void 0 ? " daga-clickable" : ""}`
-      ).attr("tabindex", 0).style("position", "absolute").style("box-sizing", "border-box").style("width", `${2 * j}px`).style("height", `${2 * j}px`).style("border-radius", `${j}px`).style("pointer-events", "auto").on($.Click, (h) => {
+      ).attr("tabindex", 0).style("position", "absolute").style("box-sizing", "border-box").style("width", `${2 * W}px`).style("height", `${2 * W}px`).style("border-radius", `${W}px`).style("pointer-events", "auto").on($.Click, (h) => {
         o && (h.preventDefault(), o(this.canvas));
       }).on($.KeyDown, (h) => {
-        o && h.key === Z.Enter && (h.preventDefault(), o(this.canvas));
+        o && h.key === K.Enter && (h.preventDefault(), o(this.canvas));
       });
-      n.imageClass !== void 0 ? c.append("xhtml:div").style("position", "absolute").style("left", `${0.75 * j}px`).style("top", `${0.5 * j}px`).style("width", `${0.5 * j}px`).style("height", `${0.5 * j}px`).style("background-size", "contain").style("background-repeat", "no-repeat").attr("class", n.imageClass) : n.image !== void 0 && c.append("xhtml:img").style("position", "absolute").style("left", `${0.75 * j}px`).style("top", `${0.5 * j}px`).style("width", `${0.5 * j}px`).style("height", `${0.5 * j}px`).attr("src", n.image), c.append("xhtml:span").style("position", "absolute").style("left", `${0.2 * j}px`).style("top", `${1.1 * j}px`).style("text-align", "center").style("width", `${1.6 * j}px`).style("height", `${0.35 * j}px`).style("margin", "0").style("font-size", `${0.35 * j}px`).style("font-weight", "700").style("user-select", "none").text(n.name), c.transition().ease(x.easeLinear).duration(li).tween("progress", () => (h) => {
+      n.imageClass !== void 0 ? c.append("xhtml:div").style("position", "absolute").style("left", `${0.75 * W}px`).style("top", `${0.5 * W}px`).style("width", `${0.5 * W}px`).style("height", `${0.5 * W}px`).style("background-size", "contain").style("background-repeat", "no-repeat").attr("class", n.imageClass) : n.image !== void 0 && c.append("xhtml:img").style("position", "absolute").style("left", `${0.75 * W}px`).style("top", `${0.5 * W}px`).style("width", `${0.5 * W}px`).style("height", `${0.5 * W}px`).attr("src", n.image), c.append("xhtml:span").style("position", "absolute").style("left", `${0.2 * W}px`).style("top", `${1.1 * W}px`).style("text-align", "center").style("width", `${1.6 * W}px`).style("height", `${0.35 * W}px`).style("margin", "0").style("font-size", `${0.35 * W}px`).style("font-weight", "700").style("user-select", "none").text(n.name), c.transition().ease(L.easeLinear).duration(li).tween("progress", () => (h) => {
         const f = d * h;
         return c.style(
           "left",
-          `${Math.sin(f) * ke - j + xt}px`
+          `${Math.sin(f) * we - W + xt}px`
         ).style(
           "top",
-          `${-Math.cos(f) * ke - j + xt}px`
+          `${-Math.cos(f) * we - W + xt}px`
         );
       });
     }
@@ -4738,18 +4739,18 @@ class fi extends ft {
     if (a === void 0)
       return;
     const l = t?.valueSet;
-    l ? (this.propertyEditorSelection = t, e && (this.propertyEditorValues = Nt(l.getValues())), a && (t instanceof z || t instanceof dt ? (t instanceof z ? t.name ? a.title = `${t.type.name}: ${t.name}` : a.title = t.type.name : t instanceof dt && (a.title = t.type.name), a.valueSet = void 0, a.valueSet = l) : (a.title = this.diagramPropertiesText, a.valueSet = void 0, a.valueSet = l))) : (this.propertyEditorSelection = void 0, this.propertyEditorValues = void 0, a && (a.title = "", a.valueSet = void 0));
+    l ? (this.propertyEditorSelection = t, e && (this.propertyEditorValues = Ct(l.getValues())), a && (t instanceof z || t instanceof dt ? (t instanceof z ? t.name ? a.title = `${t.type.name}: ${t.name}` : a.title = t.type.name : t instanceof dt && (a.title = t.type.name), a.valueSet = void 0, a.valueSet = l) : (a.title = this.diagramPropertiesText, a.valueSet = void 0, a.valueSet = l))) : (this.propertyEditorSelection = void 0, this.propertyEditorValues = void 0, a && (a.title = "", a.valueSet = void 0));
   }
   makeUpdateValuesAction() {
     if (this.propertyEditorSelection === void 0 || this.propertyEditorValues === void 0)
       return;
     const t = this.propertyEditorSelection instanceof eo ? void 0 : this.propertyEditorSelection.id;
-    if (St(
+    if (wt(
       this.propertyEditorValues,
       this.propertyEditorSelection?.valueSet.getValues()
     ))
       return;
-    const e = this.propertyEditorValues, a = Nt(this.propertyEditorSelection?.valueSet.getValues()), [l, r] = Be(
+    const e = this.propertyEditorValues, a = Ct(this.propertyEditorSelection?.valueSet.getValues()), [l, r] = Be(
       e,
       a,
       this.propertyEditorSelection?.valueSet
@@ -4765,7 +4766,7 @@ class fi extends ft {
 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, fe = "diagram-connection-unfinished", te = class te {
+}, 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 {
   /**
    * Constructs a canvas object.
    * @public
@@ -4773,7 +4774,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
    * @param config The configuration object used to set the parameters of this canvas.
    */
   constructor(t, e) {
-    if (this.backgroundPatternId = `daga-background-pattern-id-${te.canvasCount++}`, this.zoomTransform = x.zoomIdentity, this.draggingFrom = [0, 0], this.dragging = !1, this.secondaryButton = !1, this.validatorChange$ = new Wt(), this.diagramChange$ = new Wt(), this.diagramEvent$ = new Wt(), this.propertyEditorChanges$ = new Wt(), this.parentComponent = t, this.model = new eo(
+    if (this.backgroundPatternId = `daga-background-pattern-id-${te.canvasCount++}`, this.zoomTransform = L.zoomIdentity, this.draggingFrom = [0, 0], this.dragging = !1, this.secondaryButton = !1, this.validatorChange$ = new jt(), this.diagramChange$ = new jt(), this.diagramEvent$ = new jt(), this.propertyEditorChanges$ = new jt(), this.parentComponent = t, this.model = new eo(
       this,
       void 0,
       e.name || "unnamed",
@@ -4788,9 +4789,9 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       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.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.gridColor = e.canvas?.grid?.color || Rt.color, this.snapToGrid = e.canvas?.grid?.enabled === !1 || e.canvas?.grid === void 0 ? !1 : e.canvas?.grid?.snap || Rt.snap, this.zoomFactor = e.canvas?.zoomFactor || 2, this.panRate = e.canvas?.panRate || 100, this.inferConnectionType = e.connectionSettings?.inferConnectionType || !1, this.autoTightenConnections = e.connectionSettings?.autoTighten !== !1, this.tightenConnectionsAcrossPortTypes = e.connectionSettings?.tightenAcrossPortTypes || !1, this.allowConnectionLoops = e.connectionSettings?.allowLoops || !1, this.allowSharingPorts = e.connectionSettings?.sharePorts !== !1, this.allowSharingBothPorts = e.connectionSettings?.shareBothPorts || !1, this.portHighlightRadius = e.connectionSettings?.portHighlightRadius || 100, this.multipleSelectionOn = !1, this.priorityThresholds = e.canvas?.priorityThresholds || [], this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : void 0, this.layoutFormat = e.layoutFormat, this.userActions = e.userActions || {}, this.validators = [], this.actionStack = new Ko(this, vi), this.collabEngine = new Zo(this), e.nodeTypes)
       for (const a of e.nodeTypes) {
-        const l = new We({
+        const l = new je({
           ...e.nodeTypeDefaults,
           ...a
         });
@@ -4798,7 +4799,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       }
     if (e.portTypes)
       for (const a of e.portTypes) {
-        const l = new jo({
+        const l = new Wo({
           ...e.portTypeDefaults,
           ...a
         });
@@ -4843,21 +4844,21 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
   }
   // View methods
   initView(t) {
-    const e = x.select(t);
-    e.html(""), this.diagramRoot = e.append("div").node(), x.select(this.diagramRoot).attr("tabindex", 0).style("width", "100%").style("height", "100%").append("svg").style("width", "100%").style("height", "100%"), x.select(this.diagramRoot).on($.Click, () => {
-      x.select(this.diagramRoot).node()?.focus();
+    const e = L.select(t);
+    e.html(""), this.diagramRoot = e.append("div").node(), L.select(this.diagramRoot).attr("tabindex", 0).style("width", "100%").style("height", "100%").append("svg").style("width", "100%").style("height", "100%"), L.select(this.diagramRoot).on($.Click, () => {
+      L.select(this.diagramRoot).node()?.focus();
     }).on($.ContextMenu, (l) => {
       if (this.dragging) {
         l.preventDefault(), l.stopPropagation(), this.dragging = !1;
         return;
       }
       const r = new mt(l, null);
-      this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(w.ContextMenu) && (l.preventDefault(), this.contextMenu.open(l));
+      this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(k.ContextMenu) && (l.preventDefault(), this.contextMenu.open(l));
     }).on($.DoubleClick, (l) => {
       const r = new pt(l, null);
       this.diagramEvent$.next(r);
     }).on($.KeyDown, (l) => {
-      if (!l.ctrlKey && (l.key === Z.Delete || l.key === Z.Backspace) && this.canUserPerformAction(w.Remove) && (this.userSelection.removeFromModel(), this.cancelAllUserActions()), l.ctrlKey && l.key === "a") {
+      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") {
         l.preventDefault();
         for (const r of this.model.nodes)
           this.userSelection.add(r);
@@ -4880,7 +4881,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           new G(i, !1)
         );
       }
-      if (l.ctrlKey && l.key === "c" && this.canUserPerformAction(w.Clipboard) && (l.preventDefault(), this.userSelection.copyToClipboard(), this.cancelAllUserActions()), l.ctrlKey && l.key === "x" && this.canUserPerformAction(w.Clipboard) && this.canUserPerformAction(w.Remove) && (l.preventDefault(), this.userSelection.cutToClipboard(), this.cancelAllUserActions()), l.ctrlKey && l.key === "v" && this.canUserPerformAction(w.Paste)) {
+      if (l.ctrlKey && l.key === "c" && this.canUserPerformAction(k.Clipboard) && (l.preventDefault(), this.userSelection.copyToClipboard(), this.cancelAllUserActions()), l.ctrlKey && l.key === "x" && this.canUserPerformAction(k.Clipboard) && this.canUserPerformAction(k.Remove) && (l.preventDefault(), this.userSelection.cutToClipboard(), this.cancelAllUserActions()), l.ctrlKey && l.key === "v" && this.canUserPerformAction(k.Paste)) {
         l.preventDefault();
         const r = this.getCoordinatesOnScreen();
         this.userSelection.pasteFromClipboard(
@@ -4890,21 +4891,21 @@ 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(w.Zoom) && (l.preventDefault(), this.zoomBy(this.zoomFactor)), l.key === "-" && this.canUserPerformAction(w.Zoom) && (l.preventDefault(), this.zoomBy(1 / this.zoomFactor)), l.key === Z.ArrowLeft && this.canUserPerformAction(w.Zoom) && (l.preventDefault(), this.translateBy(this.panRate / this.zoomTransform.k, 0)), l.key === Z.ArrowRight && this.canUserPerformAction(w.Zoom) && (l.preventDefault(), this.translateBy(-this.panRate / this.zoomTransform.k, 0)), l.key === Z.ArrowDown && this.canUserPerformAction(w.Zoom) && (l.preventDefault(), this.translateBy(0, -this.panRate / this.zoomTransform.k)), l.key === Z.ArrowUp && this.canUserPerformAction(w.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 === 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));
     });
     const a = this.selectSVGElement().append("g").attr("class", "daga-canvas-view").attr("width", "100%").attr("height", "100%");
     a.call(
-      this.zoomBehavior = x.zoom().filter((l) => l.type !== $.DoubleClick).on(ue.Zoom, (l) => {
+      this.zoomBehavior = L.zoom().filter((l) => l.type !== $.DoubleClick).on(pe.Zoom, (l) => {
         if (l.sourceEvent) {
-          if (!this.canUserPerformAction(w.Zoom)) {
-            S(L.NotAllowed);
+          if (!this.canUserPerformAction(k.Zoom)) {
+            S(E.NotAllowed);
             return;
           }
-          l.sourceEvent.type === $.Wheel && l.sourceEvent.wheelDelta !== void 0 ? (l.sourceEvent.wheelDelta > 0 && S(L.ZoomIn), l.sourceEvent.wheelDelta < 0 && S(L.ZoomOut)) : l.sourceEvent.type === $.MouseMove && S(L.AllScroll);
+          l.sourceEvent.type === $.Wheel && l.sourceEvent.wheelDelta !== void 0 ? (l.sourceEvent.wheelDelta > 0 && S(E.ZoomIn), l.sourceEvent.wheelDelta < 0 && S(E.ZoomOut)) : l.sourceEvent.type === $.MouseMove && S(E.AllScroll);
         }
         this.zoomTransform = l.transform;
         const r = l.transform.toString();
-        this.selectCanvasElements().attr("transform", r), x.select(`#${this.backgroundPatternId}`).attr(
+        this.selectCanvasElements().attr("transform", r), L.select(`#${this.backgroundPatternId}`).attr(
           "patternTransform",
           r
         ), He && this.updateFieldsInView(), this.contextMenu.close(), this.diagramEvent$.next(
@@ -4913,7 +4914,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
             this.zoomTransform.k
           )
         );
-      }).on(ue.End, () => {
+      }).on(pe.End, () => {
         S();
       })
     ), a.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("fill", this.backgroundColor).attr("stroke-width", "0").on($.MouseMove, (l) => {
@@ -4922,9 +4923,9 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         this.unfinishedConnection.endCoords = r;
       }
     }).on($.MouseOver, () => {
-      this.userHighlight.size() > 0 && (this.userHighlight.clear(), this.diagramEvent$.next(new Q(null)));
+      this.userHighlight.size() > 0 && (this.userHighlight.clear(), this.diagramEvent$.next(new tt(null)));
     }).on($.Click, () => {
-      if (this.userHighlight.size() > 0 && (this.userHighlight.clear(), this.diagramEvent$.next(new Q(null))), this.contextMenu.close(), this.userSelection.size() > 0) {
+      if (this.userHighlight.size() > 0 && (this.userHighlight.clear(), this.diagramEvent$.next(new tt(null))), this.contextMenu.close(), this.userSelection.size() > 0) {
         const l = this.userSelection.all();
         this.userSelection.clear(), this.diagramEvent$.next(
           new G(l, !1)
@@ -4932,7 +4933,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       }
       this.userSelection.openInPropertyEditor(this.model);
     }).call(
-      x.drag().filter((l) => this.multipleSelectionOn || vt(l)).on(A.Start, (l) => {
+      L.drag().filter((l) => this.multipleSelectionOn || vt(l)).on(A.Start, (l) => {
         this.startMultipleSelection(l);
       }).on(A.Drag, (l) => {
         this.continueMultipleSelection(l);
@@ -4968,23 +4969,32 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       this.zoomBehavior.scaleTo(this.selectCanvasView(), a), this.zoomBehavior.translateTo(this.selectCanvasView(), t, e);
       return;
     }
-    this.zoomBehavior.interpolate(x.interpolate);
+    this.zoomBehavior.interpolate(L.interpolate);
     const [r, i] = this.getViewCoordinates(), n = this.getZoomLevel(), o = t, d = e, c = a;
-    this.selectCanvasElements().transition().duration(l).ease(x.easeCubicInOut).tween("progress", () => (h) => {
-      const f = h * (o - r) + r, b = h * (d - i) + i, m = h * (c - n) + n;
-      this.zoomBehavior.scaleTo(this.selectCanvasView(), m), this.zoomBehavior.translateTo(
-        this.selectCanvasView(),
-        f,
-        b
-      );
+    this.selectCanvasElements().transition().duration(l).ease(L.easeCubicInOut).tween("progress", () => {
+      let h = !1;
+      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(
+              this.selectCanvasView(),
+              b,
+              m
+            );
+          }
+        } catch {
+          console.warn("Animation has been interrupted"), h = !0;
+        }
+      };
     });
   }
   center(t, e, a) {
     if (this.model.nodes.length > 0) {
-      const l = this.selectCanvasView().select("rect").node()?.getBBox(), r = t?.map((y) => this.model.nodes.get(y)).filter((y) => !!y) || this.model.nodes.all(), i = Math.min(...r.map((y) => y.coords[0])), n = Math.max(
-        ...r.map((y) => y.coords[0] + y.width)
-      ), o = (i + n) / 2, d = n - i, c = l.width, h = Math.min(...r.map((y) => y.coords[1])), f = Math.max(
-        ...r.map((y) => y.coords[1] + y.height)
+      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(
         c / d,
         p / m,
@@ -5029,21 +5039,21 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
     return t;
   }
   getPointerLocationRelativeToCanvas(t) {
-    return x.pointer(
+    return L.pointer(
       this.getEventHoldingCoordinates(t),
       this.selectCanvasElements().node()
     );
   }
   getPointerLocationRelativeToRoot(t) {
-    return x.pointer(
+    return L.pointer(
       this.getEventHoldingCoordinates(t),
       this.selectSVGElement().node()
     );
   }
   getPointerLocationRelativeToBody(t) {
-    return x.pointer(
+    return L.pointer(
       this.getEventHoldingCoordinates(t),
-      x.select("body").node()
+      L.select("body").node()
     );
   }
   getPointerLocationRelativeToScreen(t) {
@@ -5065,12 +5075,12 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
     );
     const a = e.exit(), l = e.enter().append("g").attr("id", (i) => i.id).attr(
       "class",
-      (i) => `diagram-node${ye(i) ? " resizable-x" : ""}${be(i) ? " resizable-y" : ""} ${i.type.defaultLook.lookType}`
+      (i) => `diagram-node${be(i) ? " resizable-x" : ""}${ke(i) ? " resizable-y" : ""} ${i.type.defaultLook.lookType}`
     );
     t && t.length > 0 && (e = e.filter((i) => t.includes(i.id)));
     const r = l.merge(e);
     a.remove(), l.on($.MouseOver, (i, n) => {
-      this.dragging || (this.userHighlight.focusOn(n), this.diagramEvent$.next(new Q(n)));
+      this.dragging || (this.userHighlight.focusOn(n), this.diagramEvent$.next(new tt(n)));
     }).on($.Click, (i, n) => {
       if (!i.ctrlKey && !i.shiftKey) {
         const o = this.userSelection.all();
@@ -5085,40 +5095,40 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         return;
       }
       const o = new mt(i, n);
-      this.diagramEvent$.next(o), !o.defaultPrevented && this.canUserPerformAction(w.ContextMenu) && (i.preventDefault(), this.userHighlight.focusOn(n), this.diagramEvent$.next(new Q(n)), this.userSelection.add(n), this.diagramEvent$.next(new G([n], !0)), this.contextMenu.open(i));
+      this.diagramEvent$.next(o), !o.defaultPrevented && this.canUserPerformAction(k.ContextMenu) && (i.preventDefault(), this.userHighlight.focusOn(n), this.diagramEvent$.next(new tt(n)), this.userSelection.add(n), this.diagramEvent$.next(new G([n], !0)), this.contextMenu.open(i));
     }).on($.DoubleClick, (i, n) => {
       const o = new pt(i, n);
       this.diagramEvent$.next(o);
     }).call(
-      x.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, n) => {
+      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, n) => {
         this.multipleSelectionOn || this.secondaryButton ? this.startMultipleSelection(i) : this.startMovingNode(i, n);
       }).on(A.Drag, (i, n) => {
         this.multipleSelectionOn || this.secondaryButton ? this.continueMultipleSelection(i) : this.continueMovingNode(i, n);
       }).on(A.End, (i, n) => {
         this.multipleSelectionOn || this.secondaryButton ? this.finishMultipleSelection(i) : this.finishMovingNode(i, n), this.secondaryButton = !1;
       })
-    ), he(
+    ), ge(
       l
     ), l.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", `${H}px`).on($.MouseOver, (i, n) => {
-      this.canUserPerformAction(w.StretchNode) && n.getResizableX() && !n.removed && S(L.EWResize);
+      this.canUserPerformAction(k.StretchNode) && n.getResizableX() && !n.removed && S(E.EWResize);
     }).on($.MouseOut, (i, n) => {
-      this.canUserPerformAction(w.StretchNode) && n.getResizableX() && !n.removed && S();
+      this.canUserPerformAction(k.StretchNode) && n.getResizableX() && !n.removed && S();
     }).call(
-      x.drag().on(A.Start, (i, n) => {
-        this.canUserPerformAction(w.StretchNode) && n.getResizableX() && !n.removed ? (S(L.EWResize), this.currentAction = new X(
+      L.drag().on(A.Start, (i, n) => {
+        this.canUserPerformAction(k.StretchNode) && n.getResizableX() && !n.removed ? (S(E.EWResize), this.currentAction = new X(
           this,
-          w.StretchNode,
+          k.StretchNode,
           n.id,
           n.getGeometry(),
           n.getGeometry()
-        )) : S(L.NotAllowed);
+        )) : S(E.NotAllowed);
       }).on(A.Drag, (i, n) => {
-        if (this.canUserPerformAction(w.StretchNode) && n.getResizableX() && !n.removed) {
+        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) => {
-        if (this.canUserPerformAction(w.StretchNode) && n.getResizableX() && !n.removed && this.currentAction instanceof X && this.currentAction.intent === w.StretchNode) {
+        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([
             o[0] - n.type.snapToGridOffset[0],
@@ -5128,25 +5138,25 @@ 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) => {
-      this.canUserPerformAction(w.StretchNode) && n.getResizableY() && !n.removed && S(L.NSResize);
+      this.canUserPerformAction(k.StretchNode) && n.getResizableY() && !n.removed && S(E.NSResize);
     }).on($.MouseOut, (i, n) => {
-      this.canUserPerformAction(w.StretchNode) && n.getResizableY() && !n.removed && S();
+      this.canUserPerformAction(k.StretchNode) && n.getResizableY() && !n.removed && S();
     }).call(
-      x.drag().on(A.Start, (i, n) => {
-        this.canUserPerformAction(w.StretchNode) && n.getResizableY() && !n.removed ? (S(L.NSResize), this.currentAction = new X(
+      L.drag().on(A.Start, (i, n) => {
+        this.canUserPerformAction(k.StretchNode) && n.getResizableY() && !n.removed ? (S(E.NSResize), this.currentAction = new X(
           this,
-          w.StretchNode,
+          k.StretchNode,
           n.id,
           n.getGeometry(),
           n.getGeometry()
-        )) : S(L.NotAllowed);
+        )) : S(E.NotAllowed);
       }).on(A.Drag, (i, n) => {
-        if (this.canUserPerformAction(w.StretchNode) && n.getResizableY() && !n.removed) {
+        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) => {
-        if (this.canUserPerformAction(w.StretchNode) && n.getResizableY() && !n.removed && this.currentAction instanceof X && this.currentAction.intent === w.StretchNode) {
+        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([
             o[0] - n.type.snapToGridOffset[0],
@@ -5156,25 +5166,25 @@ 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) => {
-      this.canUserPerformAction(w.StretchNode) && n.getResizableX() && !n.removed && S(L.EWResize);
+      this.canUserPerformAction(k.StretchNode) && n.getResizableX() && !n.removed && S(E.EWResize);
     }).on($.MouseOut, (i, n) => {
-      this.canUserPerformAction(w.StretchNode) && n.getResizableX() && !n.removed && S();
+      this.canUserPerformAction(k.StretchNode) && n.getResizableX() && !n.removed && S();
     }).call(
-      x.drag().on(A.Start, (i, n) => {
-        this.canUserPerformAction(w.StretchNode) && n.getResizableX() && !n.removed ? (S(L.EWResize), this.currentAction = new X(
+      L.drag().on(A.Start, (i, n) => {
+        this.canUserPerformAction(k.StretchNode) && n.getResizableX() && !n.removed ? (S(E.EWResize), this.currentAction = new X(
           this,
-          w.StretchNode,
+          k.StretchNode,
           n.id,
           n.getGeometry(),
           n.getGeometry()
-        )) : S(L.NotAllowed);
+        )) : S(E.NotAllowed);
       }).on(A.Drag, (i, n) => {
-        if (this.canUserPerformAction(w.StretchNode) && n.getResizableX() && !n.removed) {
+        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) => {
-        if (this.canUserPerformAction(w.StretchNode) && n.getResizableX() && !n.removed && this.currentAction instanceof X && this.currentAction.intent === w.StretchNode) {
+        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([
             o[0] - n.type.snapToGridOffset[2],
@@ -5184,20 +5194,20 @@ 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) => {
-      this.canUserPerformAction(w.StretchNode) && n.getResizableY() && !n.removed && S(L.NSResize);
+      this.canUserPerformAction(k.StretchNode) && n.getResizableY() && !n.removed && S(E.NSResize);
     }).on($.MouseOut, (i, n) => {
-      this.canUserPerformAction(w.StretchNode) && n.getResizableY() && !n.removed && S();
+      this.canUserPerformAction(k.StretchNode) && n.getResizableY() && !n.removed && S();
     }).call(
-      x.drag().on(A.Start, (i, n) => {
-        this.canUserPerformAction(w.StretchNode) && n.getResizableY() && !n.removed ? (S(L.NSResize), this.currentAction = new X(
+      L.drag().on(A.Start, (i, n) => {
+        this.canUserPerformAction(k.StretchNode) && n.getResizableY() && !n.removed ? (S(E.NSResize), this.currentAction = new X(
           this,
-          w.StretchNode,
+          k.StretchNode,
           n.id,
           n.getGeometry(),
           n.getGeometry()
-        )) : S(L.NotAllowed);
+        )) : S(E.NotAllowed);
       }).on(A.Drag, (i, n) => {
-        if (this.canUserPerformAction(w.StretchNode) && n.getResizableY() && !n.removed) {
+        if (this.canUserPerformAction(k.StretchNode) && n.getResizableY() && !n.removed) {
           const o = this.getPointerLocationRelativeToCanvas(i);
           n.stretch(
             g.Bottom,
@@ -5205,7 +5215,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           );
         }
       }).on(A.End, (i, n) => {
-        if (this.canUserPerformAction(w.StretchNode) && n.getResizableY() && !n.removed && this.currentAction instanceof X && this.currentAction.intent === w.StretchNode) {
+        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([
             o[0] - n.type.snapToGridOffset[2],
@@ -5217,7 +5227,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         }
         S();
       })
-    ), r.attr("transform", (i) => `translate(${i.coords[0]},${i.coords[1]})`).attr("opacity", (i) => i.removed ? 0.5 : 1), ge(
+    ), r.attr("transform", (i) => `translate(${i.coords[0]},${i.coords[1]})`).attr("opacity", (i) => i.removed ? 0.5 : 1), fe(
       r
     ), r.filter(".resizable-x").select("line.left-resizer").style("pointer-events", (i) => i.getResizableX() ? "initial" : "none").attr("x1", H / 2).attr("x2", H / 2).attr("y1", 0).attr("y2", (i) => i.height), r.filter(".resizable-y").select("line.top-resizer").style("pointer-events", (i) => i.getResizableY() ? "initial" : "none").attr("x1", 0).attr("x2", (i) => i.width).attr("y1", H / 2).attr("y2", H / 2), r.filter(".resizable-x").select("line.right-resizer").style("pointer-events", (i) => i.getResizableX() ? "initial" : "none").attr("x1", (i) => i.width - H / 2).attr("x2", (i) => i.width - H / 2).attr("y1", 0).attr("y2", (i) => i.height), r.filter(".resizable-y").select("line.bottom-resizer").style("pointer-events", (i) => i.getResizableY() ? "initial" : "none").attr("x1", 0).attr("x2", (i) => i.width).attr("y1", (i) => i.height - H / 2).attr("y2", (i) => i.height - H / 2);
   }
@@ -5230,12 +5240,12 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
     );
     const a = e.exit(), l = e.enter().append("g").attr("id", (i) => i.id).attr(
       "class",
-      (i) => `diagram-section${ye(i) ? " resizable-x" : ""}${be(i) ? " resizable-y" : ""} ${i.look?.lookType}`
+      (i) => `diagram-section${be(i) ? " resizable-x" : ""}${ke(i) ? " resizable-y" : ""} ${i.look?.lookType}`
     );
     t && t.length > 0 && (e = e.filter((i) => t.includes(i.id)));
     const r = l.merge(e);
     a.remove(), l.on($.MouseOver, (i, n) => {
-      this.dragging || (this.userHighlight.focusOn(n), this.diagramEvent$.next(new Q(n)));
+      this.dragging || (this.userHighlight.focusOn(n), this.diagramEvent$.next(new tt(n)));
     }).on($.Click, (i, n) => {
       if (!i.ctrlKey && !i.shiftKey) {
         const d = this.userSelection.all();
@@ -5256,10 +5266,10 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         return;
       }
       const o = new mt(i, n);
-      if (this.diagramEvent$.next(o), !o.defaultPrevented && this.canUserPerformAction(w.ContextMenu)) {
+      if (this.diagramEvent$.next(o), !o.defaultPrevented && this.canUserPerformAction(k.ContextMenu)) {
         i.preventDefault();
         const d = ct(n);
-        this.userHighlight.focusOn(d), this.diagramEvent$.next(new Q(d)), this.userSelection.add(d), this.diagramEvent$.next(
+        this.userHighlight.focusOn(d), this.diagramEvent$.next(new tt(d)), this.userSelection.add(d), this.diagramEvent$.next(
           new G([d], !0)
         ), this.contextMenu.open(i);
       }
@@ -5267,19 +5277,19 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       const o = new pt(i, n);
       this.diagramEvent$.next(o);
     }).call(
-      x.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, n) => {
+      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, n) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.startMultipleSelection(i);
         else {
           const o = n?.node;
-          o ? this.startMovingNode(i, o) : S(L.NotAllowed);
+          o ? this.startMovingNode(i, o) : S(E.NotAllowed);
         }
       }).on(A.Drag, (i, n) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.continueMultipleSelection(i);
         else {
           const o = n?.node;
-          o ? this.continueMovingNode(i, o) : S(L.NotAllowed);
+          o ? this.continueMovingNode(i, o) : S(E.NotAllowed);
         }
       }).on(A.End, (i, n) => {
         if (this.multipleSelectionOn || this.secondaryButton)
@@ -5290,23 +5300,23 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         }
         this.secondaryButton = !1;
       })
-    ), he(
+    ), ge(
       l
     ), l.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", `${H}px`).on($.MouseOver, (i, n) => {
-      this.canUserPerformAction(w.StretchSection) && n.getResizableX() && !n.removed && S(L.EWResize);
+      this.canUserPerformAction(k.StretchSection) && n.getResizableX() && !n.removed && S(E.EWResize);
     }).on($.MouseOut, (i, n) => {
-      this.canUserPerformAction(w.StretchSection) && n.getResizableX() && !n.removed && S();
+      this.canUserPerformAction(k.StretchSection) && n.getResizableX() && !n.removed && S();
     }).call(
-      x.drag().on(A.Start, (i, n) => {
-        this.canUserPerformAction(w.StretchSection) && n.getResizableX() && !n.removed && n.node ? (S(L.EWResize), this.currentAction = new X(
+      L.drag().on(A.Start, (i, n) => {
+        this.canUserPerformAction(k.StretchSection) && n.getResizableX() && !n.removed && n.node ? (S(E.EWResize), this.currentAction = new X(
           this,
-          w.StretchSection,
+          k.StretchSection,
           n.node.id,
           n.node.getGeometry(),
           n.node.getGeometry()
-        )) : S(L.NotAllowed);
+        )) : S(E.NotAllowed);
       }).on(A.Drag, (i, n) => {
-        if (this.canUserPerformAction(w.StretchSection) && n.getResizableX() && !n.removed && n.node) {
+        if (this.canUserPerformAction(k.StretchSection) && n.getResizableX() && !n.removed && n.node) {
           const o = this.getPointerLocationRelativeToCanvas(i);
           n.node.stretchSections(
             g.Left,
@@ -5316,7 +5326,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           );
         }
       }).on(A.End, (i, n) => {
-        if (this.canUserPerformAction(w.StretchSection) && n.getResizableX() && !n.removed && this.currentAction instanceof X && this.currentAction.intent === w.StretchSection && n.node) {
+        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(
             g.Left,
@@ -5328,20 +5338,20 @@ 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) => {
-      this.canUserPerformAction(w.StretchSection) && n.getResizableY() && !n.removed && S(L.NSResize);
+      this.canUserPerformAction(k.StretchSection) && n.getResizableY() && !n.removed && S(E.NSResize);
     }).on($.MouseOut, (i, n) => {
-      this.canUserPerformAction(w.StretchSection) && n.getResizableY() && !n.removed && S();
+      this.canUserPerformAction(k.StretchSection) && n.getResizableY() && !n.removed && S();
     }).call(
-      x.drag().on(A.Start, (i, n) => {
-        this.canUserPerformAction(w.StretchSection) && n.getResizableY() && !n.removed && n.node ? (S(L.NSResize), this.currentAction = new X(
+      L.drag().on(A.Start, (i, n) => {
+        this.canUserPerformAction(k.StretchSection) && n.getResizableY() && !n.removed && n.node ? (S(E.NSResize), this.currentAction = new X(
           this,
-          w.StretchSection,
+          k.StretchSection,
           n.node.id,
           n.node.getGeometry(),
           n.node.getGeometry()
-        )) : S(L.NotAllowed);
+        )) : S(E.NotAllowed);
       }).on(A.Drag, (i, n) => {
-        if (this.canUserPerformAction(w.StretchSection) && n.getResizableY() && !n.removed && n.node) {
+        if (this.canUserPerformAction(k.StretchSection) && n.getResizableY() && !n.removed && n.node) {
           const o = this.getPointerLocationRelativeToCanvas(i);
           n.node.stretchSections(
             g.Top,
@@ -5351,7 +5361,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           );
         }
       }).on(A.End, (i, n) => {
-        if (this.canUserPerformAction(w.StretchSection) && n.getResizableY() && !n.removed && this.currentAction instanceof X && this.currentAction.intent === w.StretchSection && n.node) {
+        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(
             g.Top,
@@ -5363,20 +5373,20 @@ 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) => {
-      this.canUserPerformAction(w.StretchSection) && n.getResizableX() && !n.removed && S(L.EWResize);
+      this.canUserPerformAction(k.StretchSection) && n.getResizableX() && !n.removed && S(E.EWResize);
     }).on($.MouseOut, (i, n) => {
-      this.canUserPerformAction(w.StretchSection) && n.getResizableX() && !n.removed && S();
+      this.canUserPerformAction(k.StretchSection) && n.getResizableX() && !n.removed && S();
     }).call(
-      x.drag().on(A.Start, (i, n) => {
-        this.canUserPerformAction(w.StretchSection) && n.getResizableX() && !n.removed && n.node ? (S(L.EWResize), this.currentAction = new X(
+      L.drag().on(A.Start, (i, n) => {
+        this.canUserPerformAction(k.StretchSection) && n.getResizableX() && !n.removed && n.node ? (S(E.EWResize), this.currentAction = new X(
           this,
-          w.StretchSection,
+          k.StretchSection,
           n.node.id,
           n.node.getGeometry(),
           n.node.getGeometry()
-        )) : S(L.NotAllowed);
+        )) : S(E.NotAllowed);
       }).on(A.Drag, (i, n) => {
-        if (this.canUserPerformAction(w.StretchSection) && n.getResizableX() && !n.removed && n.node) {
+        if (this.canUserPerformAction(k.StretchSection) && n.getResizableX() && !n.removed && n.node) {
           const o = this.getPointerLocationRelativeToCanvas(i);
           n.node.stretchSections(
             g.Right,
@@ -5386,7 +5396,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           );
         }
       }).on(A.End, (i, n) => {
-        if (this.canUserPerformAction(w.StretchSection) && n.getResizableX() && !n.removed && this.currentAction instanceof X && this.currentAction.intent === w.StretchSection && n.node) {
+        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(
             g.Right,
@@ -5398,20 +5408,20 @@ 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) => {
-      this.canUserPerformAction(w.StretchSection) && n.getResizableY() && !n.removed && S(L.NSResize);
+      this.canUserPerformAction(k.StretchSection) && n.getResizableY() && !n.removed && S(E.NSResize);
     }).on($.MouseOut, (i, n) => {
-      this.canUserPerformAction(w.StretchSection) && n.getResizableY() && !n.removed && S();
+      this.canUserPerformAction(k.StretchSection) && n.getResizableY() && !n.removed && S();
     }).call(
-      x.drag().on(A.Start, (i, n) => {
-        this.canUserPerformAction(w.StretchSection) && n.getResizableY() && !n.removed && n.node ? (S(L.NSResize), this.currentAction = new X(
+      L.drag().on(A.Start, (i, n) => {
+        this.canUserPerformAction(k.StretchSection) && n.getResizableY() && !n.removed && n.node ? (S(E.NSResize), this.currentAction = new X(
           this,
-          w.StretchSection,
+          k.StretchSection,
           n.node.id,
           n.node.getGeometry(),
           n.node.getGeometry()
-        )) : S(L.NotAllowed);
+        )) : S(E.NotAllowed);
       }).on(A.Drag, (i, n) => {
-        if (this.canUserPerformAction(w.StretchSection) && n.getResizableY() && !n.removed && n.node) {
+        if (this.canUserPerformAction(k.StretchSection) && n.getResizableY() && !n.removed && n.node) {
           const o = this.getPointerLocationRelativeToCanvas(i);
           n.node.stretchSections(
             g.Bottom,
@@ -5421,7 +5431,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           );
         }
       }).on(A.End, (i, n) => {
-        if (this.canUserPerformAction(w.StretchSection) && n.getResizableY() && !n.removed && this.currentAction instanceof X && this.currentAction.intent === w.StretchSection && n.node) {
+        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(
             g.Bottom,
@@ -5432,7 +5442,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         }
         S();
       })
-    ), r.attr("transform", (i) => `translate(${i.coords[0]},${i.coords[1]})`).attr("opacity", (i) => i.removed ? 0.5 : 1), ge(
+    ), r.attr("transform", (i) => `translate(${i.coords[0]},${i.coords[1]})`).attr("opacity", (i) => i.removed ? 0.5 : 1), fe(
       r
     ), r.filter(".resizable-x").select("line.left-resizer").style("pointer-events", (i) => i.getResizableX() ? "initial" : "none").attr("x1", H / 2).attr("x2", H / 2).attr("y1", 0).attr("y2", (i) => i.height), r.filter(".resizable-y").select("line.top-resizer").style("pointer-events", (i) => i.getResizableY() ? "initial" : "none").attr("x1", 0).attr("x2", (i) => i.width).attr("y1", H / 2).attr("y2", H / 2), r.filter(".resizable-x").select("line.right-resizer").style("pointer-events", (i) => i.getResizableX() ? "initial" : "none").attr("x1", (i) => i.width - H / 2).attr("x2", (i) => i.width - H / 2).attr("y1", 0).attr("y2", (i) => i.height), r.filter(".resizable-y").select("line.bottom-resizer").style("pointer-events", (i) => i.getResizableY() ? "initial" : "none").attr("x1", 0).attr("x2", (i) => i.width).attr("y1", (i) => i.height - H / 2).attr("y2", (i) => i.height - H / 2);
   }
@@ -5447,7 +5457,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
     t && t.length > 0 && (e = e.filter((i) => t.includes(i.id)));
     const r = l.merge(e);
     a.remove(), l.on($.MouseOver, (i, n) => {
-      !this.unfinishedConnection && !this.dragging && (this.userHighlight.focusOn(n), this.diagramEvent$.next(new Q(n))), this.unfinishedConnection && (// can start at the starting port
+      !this.unfinishedConnection && !this.dragging && (this.userHighlight.focusOn(n), this.diagramEvent$.next(new tt(n))), this.unfinishedConnection && (// can start at the starting port
       this.unfinishedConnection.type.canStartFromType(
         this.unfinishedConnection.start?.getNode()?.type?.id || ""
       ) && this.unfinishedConnection.start?.allowsOutgoing && // can end at the ending port
@@ -5459,9 +5469,9 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       ) && n.allowsOutgoing && // can end at the starting port
       this.unfinishedConnection.type.canFinishOnType(
         this.unfinishedConnection.start?.getNode()?.type?.id || ""
-      ) && this.unfinishedConnection.start?.allowsIncoming || S(L.NoDrop));
+      ) && this.unfinishedConnection.start?.allowsIncoming || S(E.NoDrop));
     }).on($.MouseOut, () => {
-      this.unfinishedConnection && S(L.Grabbing);
+      this.unfinishedConnection && S(E.Grabbing);
     }).on($.Click, (i, n) => {
       if (!i.ctrlKey && !i.shiftKey) {
         const d = this.userSelection.all();
@@ -5482,10 +5492,10 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         return;
       }
       const o = new mt(i, n);
-      if (this.diagramEvent$.next(o), !o.defaultPrevented && this.canUserPerformAction(w.ContextMenu)) {
+      if (this.diagramEvent$.next(o), !o.defaultPrevented && this.canUserPerformAction(k.ContextMenu)) {
         i.preventDefault();
         const d = ct(n);
-        this.userHighlight.focusOn(d), this.diagramEvent$.next(new Q(d)), this.userSelection.add(d), this.diagramEvent$.next(
+        this.userHighlight.focusOn(d), this.diagramEvent$.next(new tt(d)), this.userSelection.add(d), this.diagramEvent$.next(
           new G([d], !0)
         ), this.contextMenu.open(i);
       }
@@ -5493,22 +5503,23 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       const o = new pt(i, n);
       this.diagramEvent$.next(o);
     }).call(
-      x.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, n) => {
-        this.multipleSelectionOn || this.secondaryButton ? this.startMultipleSelection(i) : this.canUserPerformAction(w.AddConnection) && (this.allowSharingPorts || n.incomingConnections.filter((o) => !o.removed).length === 0 && n.outgoingConnections.filter((o) => !o.removed).length === 0) && !n.removed ? (S(L.Grabbing), this.startConnection(n), this.unfinishedConnection && (this.unfinishedConnectionTracer = this.selectCanvasElements().append("path").attr("stroke", "none").attr("fill", "none"))) : S(L.NotAllowed);
+      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.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) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.continueMultipleSelection(i);
-        else if (this.canUserPerformAction(w.AddConnection) && !n.removed && this.unfinishedConnection !== void 0) {
+        else if (this.canUserPerformAction(k.AddConnection) && !n.removed && this.unfinishedConnection !== void 0) {
           const o = [i.x, i.y];
           this.unfinishedConnectionTracer?.attr(
             "d",
-            ce(
-              this.unfinishedConnection.look.shape || et.look.shape,
+            he(
+              this.unfinishedConnection.look.shape || ot.look.shape,
               this.unfinishedConnection.startCoords,
               o,
               this.unfinishedConnection.startDirection,
               this.unfinishedConnection.endDirection,
-              this.unfinishedConnection.type.defaultLook.thickness || et.look.thickness,
+              this.unfinishedConnection.points,
+              this.unfinishedConnection.type.defaultLook.thickness || ot.look.thickness,
               this.unfinishedConnection.type.defaultStartMarkerLook?.width,
               this.unfinishedConnection.type.defaultEndMarkerLook?.width
             )
@@ -5527,7 +5538,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
             ];
           } else
             this.unfinishedConnection.endCoords = o;
-          if (this.updateConnectionsInView(fe), this.model.ports.length > 0) {
+          if (this.updateConnectionsInView(ue), this.unfinishedConnectionPort?.raise(!1), this.model.ports.length > 0) {
             const c = this.getPointerLocationRelativeToCanvas(i);
             let h = Number.POSITIVE_INFINITY, f;
             for (const b of this.model.ports) {
@@ -5541,7 +5552,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.finishMultipleSelection(i);
         else {
-          if (this.canUserPerformAction(w.AddConnection) && !n.removed) {
+          if (this.canUserPerformAction(k.AddConnection) && !n.removed) {
             this.unfinishedConnectionTracer?.remove();
             const o = this.userHighlight.getFocus();
             if (o instanceof bt)
@@ -5570,12 +5581,12 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         }
         this.secondaryButton = !1;
       })
-    ), l.filter(".image-look").append("image"), he(
+    ), l.filter(".image-look").append("image"), ge(
       l
     ), r.attr(
       "transform",
       (i) => `translate(${i.coords[0] - i.width / 2},${i.coords[1] - i.width / 2})`
-    ).attr("opacity", (i) => i.removed ? 0.5 : 1), ge(
+    ).attr("opacity", (i) => i.removed ? 0.5 : 1), fe(
       r
     );
   }
@@ -5589,7 +5600,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
     t && t.length > 0 && (a = a.filter((n) => t.includes(n.id)));
     const i = r.merge(a);
     l.remove(), r.on($.MouseOver, (n, o) => {
-      o.end !== void 0 && !this.dragging && (this.userHighlight.focusOn(o), this.diagramEvent$.next(new Q(o)));
+      o.end !== void 0 && !this.dragging && (this.userHighlight.focusOn(o), this.diagramEvent$.next(new tt(o)));
     }).on($.Click, (n, o) => {
       if (!n.ctrlKey && !n.shiftKey) {
         const d = this.userSelection.all();
@@ -5604,12 +5615,12 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         return;
       }
       const d = new mt(n, o);
-      this.diagramEvent$.next(d), !d.defaultPrevented && this.canUserPerformAction(w.ContextMenu) && (n.preventDefault(), this.userHighlight.focusOn(o), this.diagramEvent$.next(new Q(o)), this.userSelection.add(o), this.diagramEvent$.next(new G([o], !0)), this.contextMenu.open(n));
+      this.diagramEvent$.next(d), !d.defaultPrevented && this.canUserPerformAction(k.ContextMenu) && (n.preventDefault(), this.userHighlight.focusOn(o), this.diagramEvent$.next(new tt(o)), this.userSelection.add(o), this.diagramEvent$.next(new G([o], !0)), this.contextMenu.open(n));
     }).on($.DoubleClick, (n, o) => {
       const d = new pt(n, o);
       this.diagramEvent$.next(d);
     }).call(
-      x.drag().filter((n) => (this.secondaryButton = vt(n), !0)).on(A.Start, (n) => {
+      L.drag().filter((n) => (this.secondaryButton = vt(n), !0)).on(A.Start, (n) => {
         this.startMultipleSelection(n);
       }).on(A.Drag, (n) => {
         this.continueMultipleSelection(n);
@@ -5618,45 +5629,47 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       })
     ), 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) => ce(
-        n.look.shape || et.look.shape,
+      (n) => he(
+        n.look.shape || ot.look.shape,
         n.startCoords,
         n.endCoords,
         n.startDirection,
         n.endDirection,
-        n.type.defaultLook.thickness || et.look.thickness,
+        n.points,
+        n.type.defaultLook.thickness || ot.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 || et.look.color
+      (n) => n.look.color || ot.look.color
     ).attr("stroke-width", (n) => `${n.look.thickness}px`).attr(
       "stroke-dasharray",
-      (n) => me(
-        n.look.style || et.look.style,
-        n.type.defaultLook.thickness || et.look.thickness
+      (n) => ve(
+        n.look.style || ot.look.style,
+        n.type.defaultLook.thickness || ot.look.thickness
       )
     ).attr("fill", "none"), i.select("path.diagram-connection-path-box").attr(
       "d",
-      (n) => ce(
-        n.look.shape || et.look.shape,
+      (n) => he(
+        n.look.shape || ot.look.shape,
         n.startCoords,
         n.endCoords,
         n.startDirection,
         n.endDirection,
-        n.type.defaultLook.thickness || et.look.thickness,
+        n.points,
+        n.type.defaultLook.thickness || ot.look.thickness,
         n.type.defaultStartMarkerLook?.width,
         n.type.defaultEndMarkerLook?.width
       )
     ).attr("stroke", "transparent").attr("pointer-events", "stroke").attr(
       "stroke-width",
-      (n) => `${(n.look.thickness || et.look.thickness) + mi}px`
+      (n) => `${(n.look.thickness || ot.look.thickness) + mi}px`
     ).attr(
       "stroke-dasharray",
-      (n) => me(
-        n.look.style || et.look.style,
-        n.type.defaultLook.thickness || et.look.thickness
+      (n) => ve(
+        n.look.style || ot.look.style,
+        n.type.defaultLook.thickness || ot.look.thickness
       )
     ).attr("fill", "none"), i.data().forEach((n) => {
       this.updateConnectionLabelsInView(n), this.updateConnectionMarkersInView(n);
@@ -5675,7 +5688,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
     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) => {
-      this.dragging || (this.userHighlight.focusOn(n), this.diagramEvent$.next(new Q(n)));
+      this.dragging || (this.userHighlight.focusOn(n), this.diagramEvent$.next(new tt(n)));
     }).on($.Click, (i, n) => {
       if (!i.ctrlKey && !i.shiftKey) {
         const d = this.userSelection.all();
@@ -5696,43 +5709,30 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         return;
       }
       const o = new mt(i, n);
-      if (this.diagramEvent$.next(o), !o.defaultPrevented && this.canUserPerformAction(w.ContextMenu)) {
+      if (this.diagramEvent$.next(o), !o.defaultPrevented && this.canUserPerformAction(k.ContextMenu)) {
         i.preventDefault();
         const d = ct(n);
-        this.userHighlight.focusOn(d), this.diagramEvent$.next(new Q(d)), this.userSelection.add(d), this.diagramEvent$.next(
+        this.userHighlight.focusOn(d), this.diagramEvent$.next(new tt(d)), this.userSelection.add(d), this.diagramEvent$.next(
           new G([d], !0)
         ), this.contextMenu.open(i);
       }
     }).on($.DoubleClick, (i, n) => {
       const o = new pt(i, n);
-      this.diagramEvent$.next(o), !o.defaultPrevented && this.canUserPerformAction(w.EditField) && n.editable && !n.removed && (this.currentAction = new Re(this, n.id, n.text, ""), this.createInputField(
-        n.text,
-        n.coords,
-        n.width,
-        n.height,
-        n.fontSize,
-        n.fontFamily || V.fontFamily,
-        n.orientation,
-        (d) => {
-        },
-        (d) => {
-          n.text = d, this.currentAction instanceof Re && (this.currentAction.to = d, this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0);
-        }
-      ));
+      this.diagramEvent$.next(o), !o.defaultPrevented && this.canUserPerformAction(k.EditField) && n.editable && !n.removed && (this.currentAction = new Re(this, n.id, n.text, ""), this.openTextInput(n.id));
     }).call(
-      x.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, n) => {
+      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.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(L.NotAllowed);
+          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) => {
         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(L.NotAllowed);
+          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) => {
         if (this.multipleSelectionOn || this.secondaryButton)
@@ -5791,12 +5791,12 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         return;
       }
       const o = new mt(i, n);
-      this.diagramEvent$.next(o), !o.defaultPrevented && this.canUserPerformAction(w.ContextMenu) && (i.preventDefault(), this.contextMenu.open(i));
+      this.diagramEvent$.next(o), !o.defaultPrevented && this.canUserPerformAction(k.ContextMenu) && (i.preventDefault(), this.contextMenu.open(i));
     }).on($.DoubleClick, (i, n) => {
       const o = new pt(i, n);
       this.diagramEvent$.next(o);
     }).call(
-      x.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i) => {
+      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i) => {
         (this.multipleSelectionOn || this.secondaryButton) && this.startMultipleSelection(i);
       }).on(A.Drag, (i) => {
         (this.multipleSelectionOn || this.secondaryButton) && this.continueMultipleSelection(i);
@@ -5814,7 +5814,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
     );
     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) => {
-      this.dragging || (this.userHighlight.focusOn(n), this.diagramEvent$.next(new Q(n)));
+      this.dragging || (this.userHighlight.focusOn(n), this.diagramEvent$.next(new tt(n)));
     }).on($.Click, (i, n) => {
       if (!i.ctrlKey && !i.shiftKey) {
         const o = this.userSelection.all();
@@ -5837,11 +5837,11 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         return;
       }
       const o = new mt(i, n);
-      if (this.diagramEvent$.next(o), !o.defaultPrevented && this.canUserPerformAction(w.ContextMenu) && n.rootElement) {
+      if (this.diagramEvent$.next(o), !o.defaultPrevented && this.canUserPerformAction(k.ContextMenu) && n.rootElement) {
         i.preventDefault();
         const d = ct(n.rootElement);
         this.userHighlight.focusOn(d), this.diagramEvent$.next(
-          new Q(d)
+          new tt(d)
         ), this.userSelection.add(d), this.diagramEvent$.next(
           new G([d], !0)
         ), this.contextMenu.open(i);
@@ -5850,19 +5850,19 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       const o = new pt(i, n);
       this.diagramEvent$.next(o);
     }).call(
-      x.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.Start, (i, n) => {
+      L.drag().filter((i) => (this.secondaryButton = vt(i), !0)).on(A.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(L.NotAllowed);
+          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) => {
         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(L.NotAllowed);
+          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) => {
         if (this.multipleSelectionOn || this.secondaryButton)
@@ -5877,7 +5877,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
   }
   updateConnectionLabelsInView(t) {
     const e = this.selectCanvasView().select(
-      `[id='${pe(t.id)}']`
+      `[id='${me(t.id)}']`
     ), l = e.select("path").node(), r = {
       ...V,
       ...t.type.label
@@ -5886,7 +5886,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], y = t.endCoords[1] - t.startCoords[1];
+        const u = t.endCoords[0] - t.startCoords[0], v = t.endCoords[1] - t.startCoords[1];
         switch (t.startDirection) {
           case g.Top:
             n = u >= 0 ? -0.5 : 0.5, h = n;
@@ -5895,10 +5895,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 = y > 0 ? -0.5 : 0.5, f = o;
+            o = v > 0 ? -0.5 : 0.5, f = o;
             break;
           case g.Right:
-            o = y > 0 ? -0.5 : 0.5, f = o;
+            o = v > 0 ? -0.5 : 0.5, f = o;
             break;
           default:
             n = 0.5, h = n, o = -0.5, f = o;
@@ -5911,15 +5911,15 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
             h = u >= 0 ? 0.5 : -0.5;
             break;
           case g.Left:
-            f = y > 0 ? 0.5 : -0.5;
+            f = v > 0 ? 0.5 : -0.5;
             break;
           case g.Right:
-            f = y > 0 ? 0.5 : -0.5;
+            f = v > 0 ? 0.5 : -0.5;
             break;
           default:
             h = 0.5, f = -0.5;
         }
-        Math.abs(u) >= Math.abs(y) ? (d = u > 0 ? -0.5 : 0.5, c = y > 0 ? 0.5 : -0.5) : (d = u > 0 ? 0.5 : -0.5, c = y > 0 ? -0.5 : 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);
       }
       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,36 +5927,36 @@ 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, y = t.startLabel ? b.height / this.zoomTransform.k + _t(r) + Vt(r) : 0;
-        let k;
+        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;
+        let w;
         switch (t.startDirection) {
           case g.Left:
-            k = l.getPointAtLength(
-              ot(r) + u / 2
+            w = l.getPointAtLength(
+              it(r) + u / 2
             );
             break;
           case g.Right:
-            k = l.getPointAtLength(
+            w = l.getPointAtLength(
               Y(r) + u / 2
             );
             break;
           case g.Top:
-            k = l.getPointAtLength(
-              K(r) + u / 2
+            w = l.getPointAtLength(
+              q(r) + u / 2
             );
             break;
           case g.Bottom:
-            k = l.getPointAtLength(
+            w = l.getPointAtLength(
               U(r) + u / 2
             );
             break;
           default:
-            k = l.getPointAtLength(
+            w = l.getPointAtLength(
               Math.max(
                 Y(r) + u / 2,
-                ot(r) + u / 2,
-                U(r) + y / 2,
-                K(r) + y / 2
+                it(r) + u / 2,
+                U(r) + v / 2,
+                q(r) + v / 2
               )
             );
         }
@@ -5964,13 +5964,13 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           "d",
           qt(
             -u / 2,
-            -y / 2,
+            -v / 2,
             u,
-            y
+            v
           )
         ).attr("fill", r.backgroundColor).attr("stroke", "none"), e.select("g.diagram-connection-start-label").attr(
           "transform",
-          `translate(${k.x + n * u},${k.y + o * y})`
+          `translate(${w.x + n * u},${w.y + o * v})`
         );
       }
       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,18 +5979,18 @@ 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, y = t.middleLabel ? m.height / this.zoomTransform.k + _t(r) + Vt(r) : 0, k = l.getPointAtLength(i / 2);
+        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);
         e.select("g.diagram-connection-middle-label path").attr(
           "d",
           qt(
             -u / 2,
-            -y / 2,
+            -v / 2,
             u,
-            y
+            v
           )
         ).attr("fill", r.backgroundColor).attr("stroke", "none"), e.select("g.diagram-connection-middle-label").attr(
           "transform",
-          `translate(${k.x + d * u},${k.y + c * y})`
+          `translate(${w.x + d * u},${w.y + c * v})`
         );
       }
       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(
@@ -5999,36 +5999,36 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       ).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, y = t.endLabel ? p.height / this.zoomTransform.k + _t(r) + Vt(r) : 0;
-        let k;
+        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;
+        let w;
         switch (t.endDirection) {
           case g.Left:
-            k = l.getPointAtLength(
-              i - (ot(r) + u / 2)
+            w = l.getPointAtLength(
+              i - (it(r) + u / 2)
             );
             break;
           case g.Right:
-            k = l.getPointAtLength(
+            w = l.getPointAtLength(
               i - (Y(r) + u / 2)
             );
             break;
           case g.Top:
-            k = l.getPointAtLength(
-              i - (K(r) + u / 2)
+            w = l.getPointAtLength(
+              i - (q(r) + u / 2)
             );
             break;
           case g.Bottom:
-            k = l.getPointAtLength(
+            w = l.getPointAtLength(
               i - (U(r) + u / 2)
             );
             break;
           default:
-            k = l.getPointAtLength(
+            w = l.getPointAtLength(
               i - Math.max(
                 Y(r) + u / 2,
-                ot(r) + u / 2,
-                U(r) + y / 2,
-                K(r) + y / 2
+                it(r) + u / 2,
+                U(r) + v / 2,
+                q(r) + v / 2
               )
             );
         }
@@ -6036,20 +6036,20 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           "d",
           qt(
             -u / 2,
-            -y / 2,
+            -v / 2,
             u,
-            y
+            v
           )
         ).attr("fill", r.backgroundColor).attr("stroke", "none"), e.select("g.diagram-connection-end-label").attr(
           "transform",
-          `translate(${k.x + h * u},${k.y + f * y})`
+          `translate(${w.x + h * u},${w.y + f * v})`
         );
       }
     }
   }
   updateConnectionMarkersInView(t) {
     const e = this.selectCanvasView().select(
-      `[id='${pe(t.id)}']`
+      `[id='${me(t.id)}']`
     ), a = e.select("marker.diagram-connection-start-marker"), l = e.select("marker.diagram-connection-end-marker");
     t.startMarkerLook !== null ? a.attr("orient", "auto-start-reverse").attr("markerWidth", t.startMarkerLook.width).attr("markerHeight", t.startMarkerLook.height).attr("refX", t.startMarkerLook.refX).attr("refY", t.startMarkerLook.refY).select("image").attr("href", t.startMarkerLook.image).attr("width", t.startMarkerLook.width).attr("height", t.startMarkerLook.height) : a.attr("orient", "auto-start-reverse").attr("markerWidth", 0).attr("markerHeight", 0), t.endMarkerLook !== null ? l.attr("orient", "auto-start-reverse").attr("markerWidth", t.endMarkerLook.width).attr("markerHeight", t.endMarkerLook.height).attr("refX", t.endMarkerLook.refX).attr("refY", t.endMarkerLook.refY).select("image").attr("href", t.endMarkerLook.image).attr("width", t.endMarkerLook.width).attr("height", t.endMarkerLook.height) : l.attr("orient", "auto-start-reverse").attr("markerWidth", 0).attr("markerHeight", 0);
   }
@@ -6058,7 +6058,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
     if (!e)
       return !1;
     if (e.rootElement instanceof z || e.rootElement instanceof F) {
-      const a = this.minimumSizeOfField(e), l = a[0] + Y(e.rootElement.type?.label) + ot(e.rootElement.type?.label) - e.rootElement.width, r = a[1] + U(e.rootElement.type?.label) + K(e.rootElement.type?.label) - e.rootElement.height;
+      const a = this.minimumSizeOfField(e), l = a[0] + Y(e.rootElement.type?.label) + it(e.rootElement.type?.label) - e.rootElement.width, r = a[1] + U(e.rootElement.type?.label) + q(e.rootElement.type?.label) - e.rootElement.height;
       return l <= 0 && r <= 0;
     }
     return !0;
@@ -6068,7 +6068,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
     if (a) {
       if (a.rootElement instanceof z) {
         const l = this.minimumSizeOfField(a);
-        let r = l[0] + Y(a.rootElement.type.label) + ot(a.rootElement.type.label) - a.rootElement.width, i = l[1] + U(a.rootElement.type.label) + K(a.rootElement.type.label) - a.rootElement.height;
+        let r = l[0] + Y(a.rootElement.type.label) + it(a.rootElement.type.label) - a.rootElement.width, i = l[1] + U(a.rootElement.type.label) + q(a.rootElement.type.label) - a.rootElement.height;
         this.snapToGrid && (r = Math.ceil(r / this.gridSize) * this.gridSize, i = Math.ceil(i / this.gridSize) * this.gridSize), a.rootElement.width + r < a.rootElement.type.minWidth && (r = a.rootElement.type.minWidth - a.rootElement.width), a.rootElement.height + i < a.rootElement.type.minHeight && (i = a.rootElement.type.minHeight - a.rootElement.height), (e !== !1 || r > 0) && a.rootElement.stretch(g.Right, r), (e !== !1 || i > 0) && a.rootElement.stretch(g.Bottom, i);
       }
       if (a.rootElement instanceof F) {
@@ -6084,7 +6084,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           )));
         l[0] < r && (l[0] = r), l[1] < i && (l[1] = i);
         const n = a.rootElement.type;
-        let o = l[0] + Y(n?.label) + ot(n?.label) - a.rootElement.width, d = l[1] + U(n?.label) + K(n?.label) - a.rootElement.height;
+        let o = l[0] + Y(n?.label) + it(n?.label) - a.rootElement.width, d = l[1] + U(n?.label) + q(n?.label) - a.rootElement.height;
         this.snapToGrid && (o = Math.ceil(o / this.gridSize) * this.gridSize, d = Math.ceil(d / this.gridSize) * this.gridSize), a.rootElement.width + o < (a.rootElement.getMinWidth() || 0) && (o = (a.rootElement.getMinWidth() || 0) - a.rootElement.width), a.rootElement.height + d < (a.rootElement.getMinHeight() || 0) && (d = (a.rootElement.getMinHeight() || 0) - a.rootElement.height), (e || o > 0) && a.rootElement.node?.stretchSections(
           g.Right,
           o,
@@ -6118,10 +6118,10 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
     }
   }
   selectRoot() {
-    return x.select(this.diagramRoot);
+    return L.select(this.diagramRoot);
   }
   selectSVGElement() {
-    return x.select(this.diagramRoot).select("svg");
+    return L.select(this.diagramRoot).select("svg");
   }
   selectCanvasView() {
     return this.selectSVGElement().select(".daga-canvas-view");
@@ -6142,8 +6142,8 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           this.connectionType,
           t,
           void 0,
-          fe
-        );
+          ue
+        ), this.unfinishedConnectionPort = t;
       else if (this.inferConnectionType) {
         let e = this.model.connections.types.all().find(
           (a) => t.allowsOutgoing && a.canStartFromType(t.getNode()?.type?.id || "")
@@ -6155,8 +6155,8 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
           e,
           t,
           void 0,
-          fe
-        ));
+          ue
+        ), this.unfinishedConnectionPort = t);
       }
     }
   }
@@ -6181,7 +6181,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       ) && this.unfinishedConnection?.start?.allowsOutgoing && this.unfinishedConnection.type.canFinishOnType(
         t.getNode()?.type?.id || ""
       ) && t.allowsIncoming) {
-        const e = new de(
+        const e = new ce(
           this,
           this.unfinishedConnection.type,
           this.unfinishedConnection.start?.id,
@@ -6193,7 +6193,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       ) && this.unfinishedConnection?.start?.allowsIncoming && this.unfinishedConnection.type.canStartFromType(
         t.getNode()?.type?.id || ""
       ) && t.allowsOutgoing) {
-        const e = new de(
+        const e = new ce(
           this,
           this.unfinishedConnection.type,
           t.id,
@@ -6211,7 +6211,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
             this.unfinishedConnection?.start?.getNode()?.type?.id || ""
           ) && this.unfinishedConnection?.start?.allowsIncoming && l.canStartFromType(t.getNode()?.type?.id || "") && t.allowsOutgoing
         ), a = !0), e !== void 0) {
-          const l = new de(
+          const l = new ce(
             this,
             e,
             a ? t.id : this.unfinishedConnection.start?.id,
@@ -6225,7 +6225,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
     }
   }
   dropConnection() {
-    this.unfinishedConnection?.setStart(void 0), this.unfinishedConnection?.setEnd(void 0), this.unfinishedConnection?.select()?.remove(), this.unfinishedConnection = void 0;
+    this.unfinishedConnection?.setStart(void 0), this.unfinishedConnection?.setEnd(void 0), this.unfinishedConnection?.select()?.remove(), this.unfinishedConnection = void 0, this.unfinishedConnectionPort = void 0;
   }
   cancelAllUserActions() {
     this.currentAction = void 0, this.dropConnection(), this.removeInputField(), this.contextMenu.close(), this.userSelection.clear();
@@ -6233,6 +6233,23 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
   canUserPerformAction(t) {
     return this.userActions[t] !== !1;
   }
+  openTextInput(t) {
+    const e = this.model.fields.get(t);
+    e && this.createInputField(
+      e.text,
+      e.coords,
+      e.width,
+      e.height,
+      e.fontSize,
+      e.fontFamily || V.fontFamily,
+      e.orientation,
+      () => {
+      },
+      (a) => {
+        e.text = a, this.currentAction instanceof Re && (this.currentAction.to = a, this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0);
+      }
+    );
+  }
   createInputField(t, e, a, l, r, i, n, o, d) {
     this.removeInputField();
     const c = this.selectCanvasElements().append("foreignObject").attr("x", `${e[0]}px`).attr("y", `${e[1]}px`).attr("width", `${a}px`).attr("height", `${l}px`).style("box-sizing", "border-box").style("border", "1px solid");
@@ -6242,15 +6259,15 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
     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 === Z.Escape) {
+      if (p.stopPropagation(), p.key === K.Escape) {
         const u = h.property("value");
         this.removeInputField(), d && d(u);
       }
     }).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), y = Math.max(b, l);
-      c?.attr("width", `${u}px`), h.style("width", `${u}px`), c?.attr("height", `${y}px`), h.style("height", `${y}px`), o && o(p);
+      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($.FocusOut, () => {
@@ -6277,9 +6294,9 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
    * Method to call to start the moving of a node triggered by a user drag event.
    */
   startMovingNode(t, e) {
-    if (this.canUserPerformAction(w.MoveNode) && !e.removed)
-      if (S(L.Grabbing), this.draggingFrom = [t.x, t.y], e.selected && this.userSelection.count((a) => a instanceof z) > 1)
-        this.currentAction = new le(
+    if (this.canUserPerformAction(k.MoveNode) && !e.removed)
+      if (S(E.Grabbing), this.draggingFrom = [t.x, t.y], e.selected && this.userSelection.count((a) => a instanceof z) > 1)
+        this.currentAction = new de(
           this,
           this.userSelection.filter((a) => a instanceof z).map((a) => a.id),
           e.coords
@@ -6288,7 +6305,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         const a = e.getLastAncestor();
         this.currentAction = new X(
           this,
-          w.MoveNode,
+          k.MoveNode,
           e.id,
           e.getGeometry(),
           e.getGeometry(),
@@ -6298,13 +6315,13 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
         );
       }
     else
-      S(L.NotAllowed);
+      S(E.NotAllowed);
   }
   /**
    * Method to call to continue the moving of a node triggered by a user drag event.
    */
   continueMovingNode(t, e) {
-    if (this.canUserPerformAction(w.MoveNode) && (this.currentAction instanceof le || this.currentAction instanceof X) && !e.removed) {
+    if (this.canUserPerformAction(k.MoveNode) && (this.currentAction instanceof de || this.currentAction instanceof X) && !e.removed) {
       const a = [
         t.x - e.width / 2,
         t.y - e.height / 2
@@ -6319,7 +6336,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
    * Method to call to finish the moving of a node triggered by a user drag event.
    */
   finishMovingNode(t, e) {
-    if (this.canUserPerformAction(w.MoveNode) && !e.removed && (this.draggingFrom[0] !== t.x || this.draggingFrom[1] !== t.y)) {
+    if (this.canUserPerformAction(k.MoveNode) && !e.removed && (this.draggingFrom[0] !== t.x || this.draggingFrom[1] !== t.y)) {
       let a = [
         t.x - e.width / 2,
         t.y - e.height / 2
@@ -6327,7 +6344,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
       if (this.snapToGrid && (a = this.getClosestGridPoint([
         a[0] - e.type.snapToGridOffset[0],
         a[1] - e.type.snapToGridOffset[1]
-      ]), a[0] += e.type.snapToGridOffset[0], a[1] += e.type.snapToGridOffset[1]), this.currentAction instanceof le) {
+      ]), a[0] += e.type.snapToGridOffset[0], a[1] += e.type.snapToGridOffset[1]), this.currentAction instanceof de) {
         const l = this.currentAction.delta;
         this.currentAction.delta = [
           a[0] - l[0],
@@ -6372,7 +6389,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
   }
   continueMultipleSelection(t) {
     const e = this.getPointerLocationRelativeToCanvas(t);
-    (this.draggingFrom[0] !== e[0] || this.draggingFrom[1] !== e[1]) && (S(L.Crosshair), this.multipleSelectionContainer?.attr(
+    (this.draggingFrom[0] !== e[0] || this.draggingFrom[1] !== e[1]) && (S(E.Crosshair), this.multipleSelectionContainer?.attr(
       "x",
       Math.min(this.draggingFrom[0], e[0]) * this.zoomTransform.k + this.zoomTransform.x
     )?.attr(
@@ -6403,7 +6420,7 @@ const ui = (s) => s * Math.PI / 180, Oe = (s, t, e) => {
   }
 };
 te.canvasCount = 0;
-let we = te;
+let Se = te;
 class io {
   constructor() {
     this.grid = [[void 0]], this.offsetX = 0, this.offsetY = 0;
@@ -6656,16 +6673,16 @@ class ki {
           ], u = [
             m.coords[0] + m.width / 2,
             m.coords[1] + m.height / 2
-          ], y = Ue(
+          ], v = Ue(
             f.coords,
             m.coords
-          ), k = [m.coords[0], m.coords[1]];
-          if (b.includes(m) && y > 0 && (y > e + (Math.max(f.width, f.height) + Math.max(m.width, m.height)) / 2 ? (k[0] = k[0] - (u[0] - p[0]) * r, k[1] = k[1] - (u[1] - p[1]) * r) : (k[0] = k[0] + (u[0] - p[0]) * n, k[1] = k[1] + (u[1] - p[1]) * n)), y > 0) {
-            const N = i / (y * y);
-            k[0] = k[0] + N * (u[0] - p[0]) / y, k[1] = k[1] + N * (u[1] - p[1]) / y;
+          ), 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;
           } else
-            k[0] = k[0] + o * (Math.random() * 2 - 1), k[1] = k[1] + o * (Math.random() * 2 - 1);
-          k[0] = k[0] - (u[0] - h[0]) * d, k[1] = k[1] - (u[1] - h[1]) * d, k[0] - m.coords[0] > c ? k[0] = m.coords[0] + c : k[0] - m.coords[0] < -c && (k[0] = m.coords[0] - c), k[1] - m.coords[1] > c ? k[1] = m.coords[1] + c : k[1] - m.coords[1] < -c && (k[1] = m.coords[1] - c), m.move(k);
+            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);
         }
       }
     }
@@ -6743,8 +6760,8 @@ class Si {
           break;
         } else {
           const u = m.getAdjacentNodes();
-          for (const y of u)
-            f.includes(y) || (h.push(y), f.push(y));
+          for (const v of u)
+            f.includes(v) || (h.push(v), f.push(v));
         }
       }
       b || i[i.length - 1].push(c);
@@ -6782,7 +6799,7 @@ class Ci {
     for (; r.length > 0; ) {
       const c = r[0];
       r.splice(0, 1);
-      const h = new Ae(void 0, c);
+      const h = new Ie(void 0, c);
       no(h, r), i.push(h);
     }
     const n = [];
@@ -6823,12 +6840,12 @@ const no = (s, t) => {
       t[e].push(a), ro(a, t, e + 1);
   }
 };
-class Ae {
+class Ie {
   constructor(t, e) {
     this.parent = t, this.branches = [], this.depth = 0, this.node = e;
   }
   addBranch(t) {
-    const e = new Ae(this, t);
+    const e = new Ie(this, t);
     return e.depth = this.depth + 1, this.branches.push(e), e;
   }
   countBranchHeight() {
@@ -6886,7 +6903,7 @@ class Ii {
   highlightProperty(...t) {
   }
 }
-const Ie = ({
+const xe = ({
   direction: s,
   collapsableSelector: t,
   collapsableAdditionalSelector: e,
@@ -6903,11 +6920,11 @@ const Ie = ({
       c(b), o?.(b);
       let m;
       if (typeof t == "string")
-        m = x.select(t), e && (m = m.select(e));
+        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 = x.select(p.current), e && (m = m.select(e));
+        m = L.select(p.current), e && (m = m.select(e));
       }
       m.style(r, b ? i : n);
     }
@@ -6923,12 +6940,12 @@ const Ie = ({
         return l ? "daga-vertical-none" : d ? "daga-vertical-up" : "daga-vertical-down";
     }
   };
-  return /* @__PURE__ */ v("daga-collapse-button", { children: /* @__PURE__ */ v(
+  return /* @__PURE__ */ y("daga-collapse-button", { children: /* @__PURE__ */ y(
     "button",
     {
       className: `daga-collapse-button daga-${s}`,
       onClick: h,
-      children: /* @__PURE__ */ v("div", { className: f() })
+      children: /* @__PURE__ */ y("div", { className: f() })
     }
   ) });
 }, xi = () => {
@@ -6958,15 +6975,15 @@ const Ie = ({
       ...i.propertyNames
     ));
   };
-  return /* @__PURE__ */ v("daga-errors", { children: /* @__PURE__ */ T("div", { ref: t, className: "daga-errors", children: [
-    e.length === 0 && /* @__PURE__ */ v("div", { className: "daga-errors-summary daga-no-errors daga-prevent-user-select", children: /* @__PURE__ */ v("span", { children: "No errors found" }) }),
-    e.length > 0 && /* @__PURE__ */ T("div", { className: "daga-errors-summary daga-with-errors daga-prevent-user-select", children: [
-      /* @__PURE__ */ T("span", { children: [
+  return /* @__PURE__ */ y("daga-errors", { children: /* @__PURE__ */ M("div", { ref: t, className: "daga-errors", children: [
+    e.length === 0 && /* @__PURE__ */ y("div", { className: "daga-errors-summary daga-no-errors daga-prevent-user-select", children: /* @__PURE__ */ y("span", { children: "No errors found" }) }),
+    e.length > 0 && /* @__PURE__ */ M("div", { className: "daga-errors-summary daga-with-errors daga-prevent-user-select", children: [
+      /* @__PURE__ */ M("span", { children: [
         e.length,
         " errors found"
       ] }),
-      /* @__PURE__ */ v("div", { className: "daga-collapse-button-container", children: /* @__PURE__ */ v(
-        Ie,
+      /* @__PURE__ */ y("div", { className: "daga-collapse-button-container", children: /* @__PURE__ */ y(
+        xe,
         {
           collapsableSelector: t,
           collapsableAdditionalSelector: ".daga-error-panel",
@@ -6979,7 +6996,7 @@ const Ie = ({
         }
       ) })
     ] }),
-    e.length > 0 && /* @__PURE__ */ v("div", { className: "daga-error-panel", children: /* @__PURE__ */ v("ol", { children: e.map((i, n) => /* @__PURE__ */ v(
+    e.length > 0 && /* @__PURE__ */ y("div", { className: "daga-error-panel", children: /* @__PURE__ */ y("ol", { children: e.map((i, n) => /* @__PURE__ */ y(
       "li",
       {
         onClick: () => r(i),
@@ -6996,113 +7013,113 @@ const Ie = ({
 }) => {
   const l = rt(null), [r, i] = D("");
   let n;
-  const [o, d] = D([]), [c, h] = D([]), [f, b] = D([]), [m, p] = D([]), [u, y] = D(!1);
-  Ct(() => {
-    i(t.find((I) => St(I.key, e))?.label || "");
+  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 || "");
   }, [e, t]);
-  const k = (I) => {
+  const w = (x) => {
     if (!s)
-      switch (I.key) {
-        case Z.PageDown:
-          n === void 0 ? (P(0), E(0)) : (P(n + 5), E(n)), I.preventDefault();
+      switch (x.key) {
+        case K.PageDown:
+          n === void 0 ? (P(0), T(0)) : (P(n + 5), T(n)), x.preventDefault();
           break;
-        case Z.ArrowDown:
-          n === void 0 ? (P(0), E(0)) : (P(n + 1), E(n)), I.preventDefault();
+        case K.ArrowDown:
+          n === void 0 ? (P(0), T(0)) : (P(n + 1), T(n)), x.preventDefault();
           break;
-        case Z.PageUp:
-          n === void 0 ? (P(t.length - 1), E(t.length - 1)) : (P(n - 5), E(n)), I.preventDefault();
+        case K.PageUp:
+          n === void 0 ? (P(t.length - 1), T(t.length - 1)) : (P(n - 5), T(n)), x.preventDefault();
           break;
-        case Z.ArrowUp:
-          n === void 0 ? (P(t.length - 1), E(t.length - 1)) : (P(n - 1), E(n)), I.preventDefault();
+        case K.ArrowUp:
+          n === void 0 ? (P(t.length - 1), T(t.length - 1)) : (P(n - 1), T(n)), x.preventDefault();
           break;
-        case Z.Escape:
-          R(), I.preventDefault();
+        case K.Escape:
+          R(), x.preventDefault();
           break;
-        case Z.Enter:
-          O(t[n || 0]), I.preventDefault();
+        case K.Enter:
+          O(t[n || 0]), x.preventDefault();
           break;
         default:
-          N();
+          I();
       }
-  }, N = () => {
+  }, I = () => {
     if (!s) {
-      const I = Ge(r.trim());
+      const x = Ge(r.trim());
       d([]), h([]), b([]), p([]);
       for (const _ of t) {
-        const q = Ge(_.label).indexOf(I);
-        if (q >= 0) {
-          const Bt = _.label.substring(0, q), J = _.label.substring(
-            q,
-            q + I.length
-          ), wt = _.label.substring(
-            q + I.length
+        const J = Ge(_.label).indexOf(x);
+        if (J >= 0) {
+          const Bt = _.label.substring(0, J), Pt = _.label.substring(
+            J,
+            J + x.length
+          ), Z = _.label.substring(
+            J + x.length
           );
-          d((nt) => [...nt, _]), h((nt) => [
-            ...nt,
+          d((Q) => [...Q, _]), h((Q) => [
+            ...Q,
             Bt
-          ]), b((nt) => [
-            ...nt,
-            J
-          ]), p((nt) => [
-            ...nt,
-            wt
+          ]), b((Q) => [
+            ...Q,
+            Pt
+          ]), p((Q) => [
+            ...Q,
+            Z
           ]);
         }
       }
-      y(!0);
+      v(!0);
     }
   }, R = () => {
-    y(!1);
-  }, P = (I) => {
+    v(!1);
+  }, P = (x) => {
     if (!s) {
-      if (n = I, I === void 0)
+      if (n = x, x === void 0)
         return;
-      I < 0 && (n = 0), I >= t.length && (n = t.length - 1);
+      x < 0 && (n = 0), x >= t.length && (n = t.length - 1);
     }
-  }, tt = () => {
+  }, et = () => {
     setTimeout(() => {
       R();
     }, Li);
-  }, E = (I) => {
-    const _ = l.current?.querySelectorAll("li")[I];
+  }, T = (x) => {
+    const _ = l.current?.querySelectorAll("li")[x];
     _ && _.scrollIntoView({ block: "center" });
   }, C = () => {
-    s || (i(""), y(!1), n = void 0);
-  }, O = (I) => {
-    s || (i(I.label), y(!1), n = void 0, a(I.key));
+    s || (i(""), v(!1), n = void 0);
+  }, O = (x) => {
+    s || (i(x.label), v(!1), n = void 0, a(x.key));
   };
-  return /* @__PURE__ */ T(
+  return /* @__PURE__ */ M(
     "div",
     {
       ref: l,
       className: `daga-autocomplete ${u ? "daga-showing-options" : ""}`,
       children: [
-        /* @__PURE__ */ T("div", { className: "daga-autocomplete-input", children: [
-          /* @__PURE__ */ v(
+        /* @__PURE__ */ M("div", { className: "daga-autocomplete-input", children: [
+          /* @__PURE__ */ y(
             "input",
             {
               value: r,
               disabled: s,
-              onKeyUp: k,
-              onFocus: N,
-              onBlur: tt,
-              onChange: (I) => i(I.target.value)
+              onKeyUp: w,
+              onFocus: I,
+              onBlur: et,
+              onChange: (x) => i(x.target.value)
             }
           ),
-          r !== "" && /* @__PURE__ */ v("button", { className: "daga-clear", onClick: C })
+          r !== "" && /* @__PURE__ */ y("button", { className: "daga-clear", onClick: C })
         ] }),
-        /* @__PURE__ */ v("div", { className: "daga-autocomplete-options", children: /* @__PURE__ */ T("ul", { className: "daga-autocomplete-option-list", children: [
-          o.length === 0 && /* @__PURE__ */ v("li", { className: "daga-autocomplete-option no-options", children: "(No options)" }),
-          o.map((I, _) => /* @__PURE__ */ T(
+        /* @__PURE__ */ y("div", { className: "daga-autocomplete-options", children: /* @__PURE__ */ M("ul", { className: "daga-autocomplete-option-list", children: [
+          o.length === 0 && /* @__PURE__ */ y("li", { className: "daga-autocomplete-option no-options", children: "(No options)" }),
+          o.map((x, _) => /* @__PURE__ */ M(
             "li",
             {
               className: `daga-autocomplete-option ${_ === n ? "daga-focused" : ""}`,
               onMouseMove: () => P(_),
-              onClick: () => O(I),
+              onClick: () => O(x),
               children: [
-                /* @__PURE__ */ v("span", { children: c[_] }),
-                /* @__PURE__ */ v("span", { className: "daga-match", children: f[_] }),
-                /* @__PURE__ */ v("span", { children: m[_] })
+                /* @__PURE__ */ y("span", { children: c[_] }),
+                /* @__PURE__ */ y("span", { className: "daga-match", children: f[_] }),
+                /* @__PURE__ */ y("span", { children: m[_] })
               ]
             },
             _
@@ -7119,17 +7136,17 @@ const Ie = ({
   onChange: l
 }) => {
   const [r, i] = D(), [n, o] = D([]), [d, c] = D([]);
-  Ct(() => {
-    const u = a.length === 0, y = a.map((k) => Ei(e, k));
-    o(y), u && l(a), p();
+  St(() => {
+    const u = a.length === 0, v = a.map((w) => Ei(e, w));
+    o(v), u && l(a), p();
   }, [a, e]);
   const h = (u) => {
-    for (const y of a)
-      if (y === u)
+    for (const v of a)
+      if (v === u)
         return !0;
     return !1;
   }, f = (u) => {
-    a.length > u && (a.splice(u, 1), o(n.filter((y, k) => k !== u)), l(a), p());
+    a.length > u && (a.splice(u, 1), o(n.filter((v, w) => w !== u)), l(a), p());
   }, b = () => {
     r !== void 0 && (t || !h(r)) && (l(a.concat(r)), m());
   }, m = () => {
@@ -7137,25 +7154,25 @@ const Ie = ({
   }, p = () => {
     if (!t) {
       const u = [];
-      for (const y of e)
-        h(y.key) || u.push(y);
+      for (const v of e)
+        h(v.key) || u.push(v);
       c(u);
     }
   };
-  return /* @__PURE__ */ T("div", { children: [
-    a.map((u, y) => /* @__PURE__ */ T("div", { className: "daga-value-item-element", children: [
-      /* @__PURE__ */ v("span", { className: "daga-input", children: n[y] }),
-      !s && /* @__PURE__ */ v(
+  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] }),
+      !s && /* @__PURE__ */ y(
         "button",
         {
           className: "daga-property-button",
-          onClick: () => f(y),
-          children: /* @__PURE__ */ v("div", { className: "daga-icon daga-close-icon" })
+          onClick: () => f(v),
+          children: /* @__PURE__ */ y("div", { className: "daga-icon daga-close-icon" })
         }
       )
-    ] }, y)),
-    !s && /* @__PURE__ */ T("div", { className: "daga-value-item-input", children: [
-      /* @__PURE__ */ v("div", { className: "daga-input daga-relatively-positioned", children: /* @__PURE__ */ v(
+    ] }, v)),
+    !s && /* @__PURE__ */ M("div", { className: "daga-value-item-input", children: [
+      /* @__PURE__ */ y("div", { className: "daga-input daga-relatively-positioned", children: /* @__PURE__ */ y(
         ao,
         {
           disabled: s,
@@ -7164,7 +7181,7 @@ const Ie = ({
           onChange: i
         }
       ) }),
-      /* @__PURE__ */ v("button", { className: "daga-property-button", onClick: b, children: /* @__PURE__ */ v("div", { className: "daga-icon daga-add-icon" }) })
+      /* @__PURE__ */ y("button", { className: "daga-property-button", onClick: b, children: /* @__PURE__ */ y("div", { className: "daga-icon daga-add-icon" }) })
     ] })
   ] });
 }, Mi = ({
@@ -7182,7 +7199,7 @@ const Ie = ({
     e.length > f && a(e.filter((b, m) => m !== f));
   }, o = (f, b, m) => {
     const p = e.map(
-      (u, y) => y === b ? m === "blur" ? f.trim() : f : u
+      (u, v) => v === b ? m === "blur" ? f.trim() : f : u
     );
     a(p);
   }, d = () => {
@@ -7193,9 +7210,9 @@ const Ie = ({
   }, h = (f) => {
     f.key === "Enter" && d();
   };
-  return /* @__PURE__ */ T(ho, { children: [
-    e.map((f, b) => /* @__PURE__ */ T("div", { className: "daga-value-item-element", children: [
-      /* @__PURE__ */ v(
+  return /* @__PURE__ */ M(ho, { children: [
+    e.map((f, b) => /* @__PURE__ */ M("div", { className: "daga-value-item-element", children: [
+      /* @__PURE__ */ y(
         "input",
         {
           className: "daga-input",
@@ -7205,18 +7222,18 @@ const Ie = ({
           onBlur: (m) => o(m.target.value, b, "blur")
         }
       ),
-      /* @__PURE__ */ v(
+      /* @__PURE__ */ y(
         "button",
         {
           className: "daga-property-button",
           onClick: () => n(b),
-          children: /* @__PURE__ */ v("div", { className: "daga-icon daga-close-icon" })
+          children: /* @__PURE__ */ y("div", { className: "daga-icon daga-close-icon" })
         }
       )
     ] }, b)),
-    !s && /* @__PURE__ */ T("div", { className: "daga-value-item-input", children: [
-      /* @__PURE__ */ T("div", { className: "daga-input daga-relatively-positioned", children: [
-        /* @__PURE__ */ v(
+    !s && /* @__PURE__ */ M("div", { className: "daga-value-item-input", children: [
+      /* @__PURE__ */ M("div", { className: "daga-input daga-relatively-positioned", children: [
+        /* @__PURE__ */ y(
           "input",
           {
             type: "text",
@@ -7225,9 +7242,9 @@ const Ie = ({
             onChange: (f) => r(f.target.value)
           }
         ),
-        /* @__PURE__ */ v("button", { className: "daga-clear", onClick: c })
+        /* @__PURE__ */ y("button", { className: "daga-clear", onClick: c })
       ] }),
-      /* @__PURE__ */ v("button", { className: "daga-property-button", onClick: d, children: /* @__PURE__ */ v("div", { className: "daga-icon daga-add-icon" }) })
+      /* @__PURE__ */ y("button", { className: "daga-property-button", onClick: d, children: /* @__PURE__ */ y("div", { className: "daga-icon daga-add-icon" }) })
     ] })
   ] });
 }, Ni = ({
@@ -7236,42 +7253,42 @@ const Ie = ({
   onChange: e
 }) => {
   const [a, l] = D(""), [r, i] = D(""), [n, o] = D({}), d = (u) => {
-    const y = {};
-    Object.keys(t).forEach((k) => {
-      k !== u && (y[k] = t[k]);
-    }), e(y);
-  }, c = (u, y, k) => {
-    const N = k === "blur" ? y.trim() : y;
-    if (k === "blur") {
-      if (u !== N) {
+    const v = {};
+    Object.keys(t).forEach((w) => {
+      w !== u && (v[w] = t[w]);
+    }), e(v);
+  }, c = (u, v, w) => {
+    const I = w === "blur" ? v.trim() : v;
+    if (w === "blur") {
+      if (u !== I) {
         const R = {};
         Object.keys(t).forEach((P) => {
-          P === u ? R[N] = t[P] : R[P] = t[P];
+          P === u ? R[I] = t[P] : R[P] = t[P];
         }), e(R), o((P) => {
-          const tt = { ...P };
-          return delete tt[u], tt;
+          const et = { ...P };
+          return delete et[u], et;
         });
       }
     } else
       o((R) => ({
         ...R,
-        [u]: y
+        [u]: v
       }));
-  }, h = (u, y, k) => {
-    const N = k === "blur" ? y.trim() : y;
-    if (N !== "") {
+  }, h = (u, v, w) => {
+    const I = w === "blur" ? v.trim() : v;
+    if (I !== "") {
       const R = {};
       Object.keys(t).forEach((P) => {
-        P === u ? R[P] = N : R[P] = t[P];
+        P === u ? R[P] = I : R[P] = t[P];
       }), e(R);
     }
   }, f = () => {
-    const u = a.trim(), y = r.trim();
-    if (u !== "" && y !== "") {
-      const k = {};
-      Object.keys(t).forEach((N) => {
-        k[N] = t[N];
-      }), k[u] = y, e(k), l(""), i("");
+    const u = a.trim(), v = r.trim();
+    if (u !== "" && v !== "") {
+      const w = {};
+      Object.keys(t).forEach((I) => {
+        w[I] = t[I];
+      }), w[u] = v, e(w), l(""), i("");
     }
   }, b = () => {
     l("");
@@ -7280,44 +7297,44 @@ const Ie = ({
   }, p = (u) => {
     u.key === "Enter" && f();
   };
-  return /* @__PURE__ */ T("div", { children: [
-    Object.entries(t).map(([u, y], k) => /* @__PURE__ */ T("div", { className: "daga-value-item-element", children: [
-      /* @__PURE__ */ v(
+  return /* @__PURE__ */ M("div", { children: [
+    Object.entries(t).map(([u, v], w) => /* @__PURE__ */ M("div", { className: "daga-value-item-element", children: [
+      /* @__PURE__ */ y(
         "input",
         {
-          id: `key-${k}`,
+          id: `key-${w}`,
           className: "daga-input",
           type: "text",
           disabled: s,
           value: n[u] ?? u,
-          onChange: (N) => c(u, N.target.value, "change"),
-          onBlur: (N) => c(u, N.target.value, "blur")
+          onChange: (I) => c(u, I.target.value, "change"),
+          onBlur: (I) => c(u, I.target.value, "blur")
         }
       ),
-      /* @__PURE__ */ v(
+      /* @__PURE__ */ y(
         "input",
         {
-          id: `value-${k}`,
+          id: `value-${w}`,
           className: "daga-input",
           type: "text",
           disabled: s,
-          value: y,
-          onChange: (N) => h(u, N.target.value, "change"),
-          onBlur: (N) => h(u, N.target.value, "blur")
+          value: v,
+          onChange: (I) => h(u, I.target.value, "change"),
+          onBlur: (I) => h(u, I.target.value, "blur")
         }
       ),
-      /* @__PURE__ */ v(
+      /* @__PURE__ */ y(
         "button",
         {
           className: "daga-property-button",
           onClick: () => d(u),
-          children: /* @__PURE__ */ v("div", { className: "daga-icon daga-close-icon" })
+          children: /* @__PURE__ */ y("div", { className: "daga-icon daga-close-icon" })
         }
       )
     ] }, u)),
-    !s && /* @__PURE__ */ T("div", { className: "daga-value-item-input", children: [
-      /* @__PURE__ */ T("div", { className: "daga-input daga-relatively-positioned", children: [
-        /* @__PURE__ */ v(
+    !s && /* @__PURE__ */ M("div", { className: "daga-value-item-input", children: [
+      /* @__PURE__ */ M("div", { className: "daga-input daga-relatively-positioned", children: [
+        /* @__PURE__ */ y(
           "input",
           {
             type: "text",
@@ -7327,10 +7344,10 @@ const Ie = ({
             onBlur: (u) => c(a, u.target.value, "blur")
           }
         ),
-        /* @__PURE__ */ v("button", { className: "daga-clear", onClick: b })
+        /* @__PURE__ */ y("button", { className: "daga-clear", onClick: b })
       ] }),
-      /* @__PURE__ */ T("div", { className: "daga-input daga-relatively-positioned", children: [
-        /* @__PURE__ */ v(
+      /* @__PURE__ */ M("div", { className: "daga-input daga-relatively-positioned", children: [
+        /* @__PURE__ */ y(
           "input",
           {
             type: "text",
@@ -7340,9 +7357,9 @@ const Ie = ({
             onBlur: (u) => h(a, u.target.value, "blur")
           }
         ),
-        /* @__PURE__ */ v("button", { className: "daga-clear", onClick: m })
+        /* @__PURE__ */ y("button", { className: "daga-clear", onClick: m })
       ] }),
-      /* @__PURE__ */ v("button", { className: "daga-property-button", onClick: f, children: /* @__PURE__ */ v("div", { className: "daga-icon daga-add-icon" }) })
+      /* @__PURE__ */ y("button", { className: "daga-property-button", onClick: f, children: /* @__PURE__ */ y("div", { className: "daga-icon daga-add-icon" }) })
     ] })
   ] });
 }, lo = ({
@@ -7350,7 +7367,7 @@ const Ie = ({
   onValueChange: t,
   depth: e
 }) => {
-  const l = Dt($t).canUserPerformAction(w.UpdateValues) && s?.rootElement?.removed !== !0, r = (o) => "daga-property-name-" + o.replace(/\s/g, ""), i = (o) => {
+  const l = Dt($t).canUserPerformAction(k.UpdateValues) && s?.rootElement?.removed !== !0, r = (o) => "daga-property-name-" + o.replace(/\s/g, ""), i = (o) => {
     if (typeof o == "string")
       return o;
     if (o == null || isNaN(o.valueOf()))
@@ -7358,13 +7375,13 @@ const Ie = ({
     const d = new Date(o), c = d.getTimezoneOffset();
     return d.setMinutes(d.getMinutes() - c), d.toISOString().substring(0, 19);
   }, n = (o) => new Date(o);
-  return /* @__PURE__ */ v("daga-object-editor", { children: s.displayedProperties.map((o) => /* @__PURE__ */ T(
+  return /* @__PURE__ */ y("daga-object-editor", { children: s.displayedProperties.map((o) => /* @__PURE__ */ M(
     "div",
     {
       className: `daga-property ${r(o.name)}`,
       children: [
-        /* @__PURE__ */ v("p", { className: "daga-property-name", children: o.label || o.name }),
-        o.type === M.Text && /* @__PURE__ */ v(
+        /* @__PURE__ */ y("p", { className: "daga-property-name", children: o.label || o.name }),
+        o.type === N.Text && /* @__PURE__ */ y(
           "input",
           {
             type: "daga-text",
@@ -7373,7 +7390,7 @@ const Ie = ({
             onChange: (d) => t(s, o, d.target.value)
           }
         ),
-        o.type === M.TextArea && /* @__PURE__ */ v(
+        o.type === N.TextArea && /* @__PURE__ */ y(
           "textarea",
           {
             disabled: o.editable === !1 || !l,
@@ -7381,7 +7398,7 @@ const Ie = ({
             onChange: (d) => t(s, o, d.target.value)
           }
         ),
-        o.type === M.Number && /* @__PURE__ */ v(
+        o.type === N.Number && /* @__PURE__ */ y(
           "input",
           {
             type: "number",
@@ -7390,7 +7407,7 @@ const Ie = ({
             onChange: (d) => t(s, o, d.target.value)
           }
         ),
-        o.type === M.Color && /* @__PURE__ */ v(
+        o.type === N.Color && /* @__PURE__ */ y(
           "input",
           {
             type: "text",
@@ -7400,7 +7417,7 @@ const Ie = ({
             onChange: (d) => t(s, o, d.target.value)
           }
         ),
-        o.type === M.Datetime && /* @__PURE__ */ v(
+        o.type === N.Datetime && /* @__PURE__ */ y(
           "input",
           {
             type: "datetime-local",
@@ -7415,7 +7432,7 @@ const Ie = ({
             )
           }
         ),
-        o.type === M.Date && /* @__PURE__ */ v(
+        o.type === N.Date && /* @__PURE__ */ y(
           "input",
           {
             type: "date",
@@ -7424,7 +7441,7 @@ const Ie = ({
             onChange: (d) => t(s, o, d.target.value)
           }
         ),
-        o.type === M.Time && /* @__PURE__ */ v(
+        o.type === N.Time && /* @__PURE__ */ y(
           "input",
           {
             type: "time",
@@ -7433,7 +7450,7 @@ const Ie = ({
             onChange: (d) => t(s, o, d.target.value)
           }
         ),
-        o.type === M.Url && /* @__PURE__ */ v(
+        o.type === N.Url && /* @__PURE__ */ y(
           "input",
           {
             type: "url",
@@ -7442,13 +7459,13 @@ const Ie = ({
             onChange: (d) => t(s, o, d.target.value)
           }
         ),
-        o.type === M.Boolean && /* @__PURE__ */ T("div", { className: "daga-radio", children: [
-          /* @__PURE__ */ T(
+        o.type === N.Boolean && /* @__PURE__ */ M("div", { className: "daga-radio", children: [
+          /* @__PURE__ */ M(
             "label",
             {
               className: "daga-radio-item daga-radio-start" + (s?.getValue(o.name) === !1 ? " daga-checked" : ""),
               children: [
-                /* @__PURE__ */ v(
+                /* @__PURE__ */ y(
                   "input",
                   {
                     type: "radio",
@@ -7463,12 +7480,12 @@ const Ie = ({
               ]
             }
           ),
-          /* @__PURE__ */ T(
+          /* @__PURE__ */ M(
             "label",
             {
               className: "daga-radio-item daga-radio-end" + (s?.getValue(o.name) === !0 ? " daga-checked" : ""),
               children: [
-                /* @__PURE__ */ v(
+                /* @__PURE__ */ y(
                   "input",
                   {
                     type: "radio",
@@ -7484,7 +7501,7 @@ const Ie = ({
             }
           )
         ] }),
-        o.type === M.Option && /* @__PURE__ */ v("div", { className: "daga-relatively-positioned", children: /* @__PURE__ */ v(
+        o.type === N.Option && /* @__PURE__ */ y("div", { className: "daga-relatively-positioned", children: /* @__PURE__ */ y(
           ao,
           {
             disabled: o.editable === !1 || !l,
@@ -7493,26 +7510,26 @@ const Ie = ({
             onChange: (d) => t(s, o, d)
           }
         ) }),
-        (o.type === M.OptionList || o.type === M.OptionSet) && /* @__PURE__ */ v(
+        (o.type === N.OptionList || o.type === N.OptionSet) && /* @__PURE__ */ y(
           Ti,
           {
             disabled: o.editable === !1 || !l,
-            allowRepeats: o.type === M.OptionList,
+            allowRepeats: o.type === N.OptionList,
             options: o.options || [],
             value: s?.getValue(o.name),
             onChange: (d) => t(s, o, d)
           }
         ),
-        (o.type === M.TextList || o.type === M.TextSet) && /* @__PURE__ */ v(
+        (o.type === N.TextList || o.type === N.TextSet) && /* @__PURE__ */ y(
           Mi,
           {
             disabled: o.editable === !1 || !l,
-            allowRepeats: o.type === M.TextList,
+            allowRepeats: o.type === N.TextList,
             value: s?.getValue(o.name),
             onChange: (d) => t(s, o, d)
           }
         ),
-        o.type === M.TextMap && /* @__PURE__ */ v(
+        o.type === N.TextMap && /* @__PURE__ */ y(
           Ni,
           {
             disabled: o.editable === !1 || !l,
@@ -7520,7 +7537,7 @@ const Ie = ({
             onChange: (d) => t(s, o, d)
           }
         ),
-        o.type === M.Object && /* @__PURE__ */ v("div", { className: "daga-left-bar", children: /* @__PURE__ */ v(
+        o.type === N.Object && /* @__PURE__ */ y("div", { className: "daga-left-bar", children: /* @__PURE__ */ y(
           lo,
           {
             valueSet: s.getSubValueSet(o.name),
@@ -7536,27 +7553,27 @@ const Ie = ({
   const e = Dt($t), a = rt(null), l = (o) => "daga-property-name-" + o.replace(/\s/g, ""), r = () => {
     for (const o of s?.displayedProperties || []) {
       let d = 0, c = 0, h = 0;
-      const f = x.select(a.current).select(
+      const f = L.select(a.current).select(
         `.daga-property.${l(o.name)}.daga-depth-${t}`
       );
       f.select("button.daga-move-button").call(
-        x.drag().on(A.Start, (b) => {
-          S(L.Grabbing);
+        L.drag().on(A.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) => {
-          S(L.Grabbing);
+          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), x.select(a.current).select(
+          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(
             `.daga-dropbar.daga-index-${h}.daga-depth-${t}`
-          ).style("visibility", "hidden").style("height", 0), h = i(m), x.select(a.current).select(
+          ).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) => {
-          S(L.Auto), f.style("position", "relative").style("left", 0).style("top", 0).style("z-index", 0).style("width", "unset").style("height", "unset"), x.select(a.current).select(
+          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);
           const m = e.getPointerLocationRelativeToScreen(b);
@@ -7574,7 +7591,7 @@ const Ie = ({
   }, i = (o) => {
     const d = s?.propertySet.propertyList || [], c = [];
     for (let h = 0; h <= d.length; ++h) {
-      const f = x.select(a.current).select(
+      const f = L.select(a.current).select(
         `.daga-dropbar.daga-index-${h}.daga-depth-${t}`
       ).node()?.getBoundingClientRect();
       f && c.push([
@@ -7599,34 +7616,34 @@ const Ie = ({
       o.target?.value || ""
     ) : d = s?.propertySet.getProperty(o || ""), d && s?.hideProperty(d), r();
   };
-  return /* @__PURE__ */ T("daga-property-settings", { ref: a, children: [
-    /* @__PURE__ */ v("div", { className: `daga-dropbar daga-index-0 daga-depth-${t}` }),
-    s?.displayedProperties.map((o, d) => /* @__PURE__ */ T(
+  return /* @__PURE__ */ M("daga-property-settings", { ref: a, children: [
+    /* @__PURE__ */ y("div", { className: `daga-dropbar daga-index-0 daga-depth-${t}` }),
+    s?.displayedProperties.map((o, d) => /* @__PURE__ */ M(
       "div",
       {
         className: `daga-property-and-dropbar ${l(o.name)} daga-depth-${t}`,
         children: [
-          /* @__PURE__ */ T(
+          /* @__PURE__ */ M(
             "div",
             {
               className: `daga-property ${l(o.name)} daga-depth-${t}`,
               children: [
-                /* @__PURE__ */ T("div", { className: "daga-property-name", children: [
-                  /* @__PURE__ */ v("span", { children: o.label || o.name }),
-                  /* @__PURE__ */ T("div", { className: "daga-buttons", children: [
-                    /* @__PURE__ */ v("button", { className: "daga-property-button daga-move-button", children: /* @__PURE__ */ v("div", { className: "daga-icon daga-move-icon" }) }),
-                    /* @__PURE__ */ v(
+                /* @__PURE__ */ M("div", { className: "daga-property-name", children: [
+                  /* @__PURE__ */ y("span", { children: o.label || o.name }),
+                  /* @__PURE__ */ M("div", { className: "daga-buttons", children: [
+                    /* @__PURE__ */ y("button", { className: "daga-property-button daga-move-button", children: /* @__PURE__ */ y("div", { className: "daga-icon daga-move-icon" }) }),
+                    /* @__PURE__ */ y(
                       "button",
                       {
                         className: "daga-property-button daga-hide-button",
                         onClick: () => n(o.name),
-                        children: /* @__PURE__ */ v("div", { className: "daga-icon daga-hide-icon" })
+                        children: /* @__PURE__ */ y("div", { className: "daga-icon daga-hide-icon" })
                       }
                     )
                   ] })
                 ] }),
-                o.type !== M.Object && /* @__PURE__ */ v("div", { className: "daga-property-value", children: Pi(s?.getValue(o.name)) }),
-                o.type === M.Object && /* @__PURE__ */ v(
+                o.type !== N.Object && /* @__PURE__ */ y("div", { className: "daga-property-value", children: Pi(s?.getValue(o.name)) }),
+                o.type === N.Object && /* @__PURE__ */ y(
                   co,
                   {
                     valueSet: s?.getSubValueSet(o.name),
@@ -7636,7 +7653,7 @@ const Ie = ({
               ]
             }
           ),
-          /* @__PURE__ */ v(
+          /* @__PURE__ */ y(
             "div",
             {
               className: `daga-dropbar daga-index-${d + 1} daga-depth-${t}`
@@ -7648,8 +7665,8 @@ const Ie = ({
     ))
   ] });
 }, 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 }) => {
-  const n = rt(null), [o, d] = D(!1), [c, h] = D(!1), f = () => x.select(n.current);
-  return Ct(() => {
+  const n = rt(null), [o, d] = D(!1), [c, h] = D(!1), f = () => L.select(n.current);
+  return St(() => {
     if (n.current)
       switch (t) {
         case g.Bottom:
@@ -7661,14 +7678,14 @@ const Ie = ({
           f().style("height", e), a && f().select(".daga-panel-content").style("width", a);
           break;
       }
-  }, [e, t]), /* @__PURE__ */ v("daga-property-editor", { children: /* @__PURE__ */ T(
+  }, [e, t]), /* @__PURE__ */ y("daga-property-editor", { children: /* @__PURE__ */ M(
     "div",
     {
       ref: n,
       className: `daga-panel daga-bottom daga-${s} daga-${t}`,
       children: [
-        /* @__PURE__ */ v(
-          Ie,
+        /* @__PURE__ */ y(
+          xe,
           {
             disabled: !r || !r.propertySet || !r.propertySet.hasProperties(),
             collapsed: o,
@@ -7681,15 +7698,15 @@ const Ie = ({
             onCollapse: d
           }
         ),
-        /* @__PURE__ */ v("div", { className: "daga-panel-content", children: r && r.propertySet && r.propertySet.hasProperties() && !o && /* @__PURE__ */ T("div", { children: [
-          l && /* @__PURE__ */ T("p", { className: "daga-title", children: [
+        /* @__PURE__ */ y("div", { className: "daga-panel-content", children: r && r.propertySet && r.propertySet.hasProperties() && !o && /* @__PURE__ */ M("div", { children: [
+          l && /* @__PURE__ */ M("p", { className: "daga-title", children: [
             l,
-            /* @__PURE__ */ v(
+            /* @__PURE__ */ y(
               "button",
               {
                 className: "daga-property-button",
                 onClick: () => h(!c),
-                children: /* @__PURE__ */ v(
+                children: /* @__PURE__ */ y(
                   "div",
                   {
                     className: `daga-icon daga-settings-icon ${c ? "daga-unrotate" : "daga-rotate"}`
@@ -7698,7 +7715,7 @@ const Ie = ({
               }
             )
           ] }),
-          !c && /* @__PURE__ */ v(
+          !c && /* @__PURE__ */ y(
             lo,
             {
               valueSet: r,
@@ -7706,7 +7723,7 @@ const Ie = ({
               depth: 0
             }
           ),
-          c && /* @__PURE__ */ v(co, { valueSet: r, depth: 0 })
+          c && /* @__PURE__ */ y(co, { valueSet: r, depth: 0 })
         ] }) })
       ]
     }
@@ -7720,109 +7737,109 @@ const Ie = ({
     if (a(p), c().selectAll("*").remove(), r(t.getPriorityThreshold() || 0), p.categories && h(p.categories), p.templates)
       for (const u of p.templates)
         f(u);
-  }, c = () => x.select(o.current).select(".daga-palette-view"), h = (p) => {
+  }, c = () => L.select(o.current).select(".daga-palette-view"), h = (p) => {
     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 y in p)
-      u.append("option").attr("value", y).text(y);
+    for (const v in p)
+      u.append("option").attr("value", v).text(v);
     u.on($.Change, () => {
       i && c().selectAll(".daga-template-container.daga-in-category").remove();
-      const y = u.property("value");
-      n(y);
-      const k = p[y] || [];
-      for (const N of k)
-        f(N, "daga-in-category");
+      const v = u.property("value");
+      n(v);
+      const w = p[v] || [];
+      for (const I of w)
+        f(I, "daga-in-category");
     }), i && (u.property("value", i), u.dispatch($.Change));
   }, f = (p, u) => {
     if (p.templateType === "node") {
-      const y = t.model.nodes.types.get(p.type);
-      y ? b(y, p, u) : console.error(`Could not find a node type called '${p.type}'`);
+      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 y = t.model.connections.types.get(p.type);
-      y ? m(y, p, u) : console.error(
+      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}'`
       );
     }
-  }, b = (p, u, y) => {
+  }, b = (p, u, v) => {
     if (l !== void 0 && p.priority < l)
       return;
-    const k = p.defaultLook.lookType === "shaped-look" ? p.defaultLook.borderThickness || 1 : 0, N = p.defaultHeight + k, R = p.defaultWidth + k, P = u.height || N, tt = u.width || R, E = c().append("div").attr(
+    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(
       "class",
-      `daga-template-container ${y !== void 0 ? y : ""}`
-    ).style("width", `${tt}px`).style("height", `${P}px`).call(
-      x.drag().on(A.Drag, (O) => {
-        if (t.canUserPerformAction(w.AddNode)) {
-          const I = t.getPointerLocationRelativeToScreen(O);
-          if (I.length < 2 || isNaN(I[0]) || isNaN(I[1]))
+      `daga-template-container ${v !== void 0 ? v : ""}`
+    ).style("width", `${et}px`).style("height", `${P}px`).call(
+      L.drag().on(A.Drag, (O) => {
+        if (t.canUserPerformAction(k.AddNode)) {
+          const x = t.getPointerLocationRelativeToScreen(O);
+          if (x.length < 2 || isNaN(x[0]) || isNaN(x[1]))
             return;
-          E.style("position", "fixed").style("left", `${I[0] - tt / 2}px`).style("top", `${I[1] - P / 2}px`).style("z-index", 1);
+          T.style("position", "fixed").style("left", `${x[0] - et / 2}px`).style("top", `${x[1] - P / 2}px`).style("z-index", 1);
         }
       }).on(A.Start, (O) => {
-        if (t.canUserPerformAction(w.AddNode)) {
-          S(L.Grabbing);
-          const I = t.getPointerLocationRelativeToScreen(O);
-          if (I.length < 2 || isNaN(I[0]) || isNaN(I[1]))
+        if (t.canUserPerformAction(k.AddNode)) {
+          S(E.Grabbing);
+          const x = t.getPointerLocationRelativeToScreen(O);
+          if (x.length < 2 || isNaN(x[0]) || isNaN(x[1]))
             return;
-          E.style("position", "fixed").style("left", `${I[0] - tt / 2}px`).style("top", `${I[1] - P / 2}px`).style("z-index", 1), p.isUnique && t.model.nodes.find(
+          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
-          ) !== void 0 && S(L.NotAllowed);
+          ) !== void 0 && S(E.NotAllowed);
         }
       }).on(A.End, (O) => {
-        if (t.canUserPerformAction(w.AddNode)) {
-          if (S(L.Auto), E.style("position", "relative").style("left", 0).style("top", 0).style("z-index", "auto"), p.isUnique && t.model.nodes.find(
-            (jt) => !jt.removed && jt.type.id === p.id
+        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
           ) !== void 0)
             return;
-          const I = t.getPointerLocationRelativeToScreen(O);
-          if (I.length < 2 || isNaN(I[0]) || isNaN(I[1]))
+          const x = t.getPointerLocationRelativeToScreen(O);
+          if (x.length < 2 || isNaN(x[0]) || isNaN(x[1]))
             return;
           const _ = document.elementFromPoint(
-            I[0],
-            I[1]
+            x[0],
+            x[1]
           );
           if (_ && !t.selectCanvasView().node()?.contains(_))
             return;
           const lt = t.getPointerLocationRelativeToCanvas(O);
           if (lt.length < 2 || isNaN(lt[0]) || isNaN(lt[1]))
             return;
-          let q = [
+          let J = [
             lt[0] - p.defaultWidth / 2,
             lt[1] - p.defaultHeight / 2
           ];
-          t.snapToGrid && (q = t.getClosestGridPoint([
-            q[0] - p.snapToGridOffset[0],
-            q[1] - p.snapToGridOffset[1]
-          ]), q[0] += p.snapToGridOffset[0], q[1] += p.snapToGridOffset[1]);
-          const J = t.model.nodes.getAtCoordinates(
+          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(
             lt[0],
             lt[1]
           ).filter(
-            (jt) => jt.type.childrenTypes.includes(p.id)
-          ), wt = Ze(
-            J
-          ), nt = wt[wt.length - 1];
-          if (!p.canBeParentless && nt === void 0)
+            (Wt) => Wt.type.childrenTypes.includes(p.id)
+          ), Z = Ze(
+            Pt
+          ), Q = Z[Z.length - 1];
+          if (!p.canBeParentless && Q === void 0)
             return;
-          const Xt = nt?.getLastAncestor(), xe = new qo(
+          const ae = Q?.getLastAncestor(), Xt = new qo(
             t,
             p,
-            q,
-            nt?.id,
-            Xt?.id,
-            Xt?.getGeometry(),
+            J,
+            Q?.id,
+            ae?.id,
+            ae?.getGeometry(),
             void 0,
             u.label,
             u.values
           );
-          xe.do(), t?.actionStack.add(xe), S();
+          Xt.do(), t?.actionStack.add(Xt), S();
         }
       })
-    ).append("svg").attr("class", `palette-node ${p.id}`).attr("viewBox", `0 0 ${R} ${N}`).attr("preserveAspectRatio", "none").style("position", "relative").style("left", 0).style("top", 0).style("width", `${tt}px`).style("height", `${P}px`), C = u.look || p.defaultLook;
+    ).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;
     switch (C.lookType) {
       case "shaped-look":
-        E.append("path").attr(
+        T.append("path").attr(
           "d",
-          ve(
+          ye(
             C.shape || Mt.Rectangle,
             (C.borderThickness || 1) / 2,
             (C.borderThickness || 1) / 2,
@@ -7832,33 +7849,33 @@ const Ie = ({
         ).attr("fill", C.fillColor || "#FFFFFF").attr("stroke", C.borderColor || "#000000").attr("stroke-width", `${C.borderThickness}px`);
         break;
       case "image-look":
-        E.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", p.defaultWidth).attr("height", p.defaultHeight).attr("href", C.backgroundImage).attr("preserveAspectRatio", "none");
         break;
       case "stretchable-image-look":
-        E.append("image").attr("x", 0).attr("y", 0).attr("width", C.leftMargin).attr("height", C.topMargin).attr("href", C.backgroundImageTopLeft).attr("preserveAspectRatio", "none"), E.append("image").attr("x", C.leftMargin).attr("y", 0).attr(
+        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"), E.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"), E.append("image").attr("x", 0).attr("y", C.topMargin).attr("width", C.leftMargin).attr(
+        ).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(
           "height",
           p.defaultHeight - C.bottomMargin - C.topMargin
-        ).attr("href", C.backgroundImageLeft).attr("preserveAspectRatio", "none"), E.append("image").attr("x", C.leftMargin).attr("y", C.topMargin).attr(
+        ).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
         ).attr(
           "height",
           p.defaultHeight - C.bottomMargin - C.topMargin
-        ).attr("href", C.backgroundImageCenter).attr("preserveAspectRatio", "none"), E.append("image").attr("x", p.defaultWidth - C.rightMargin).attr("y", C.topMargin).attr("width", C.rightMargin).attr(
+        ).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(
           "height",
           p.defaultHeight - C.bottomMargin - C.topMargin
-        ).attr("href", C.backgroundImageRight).attr("preserveAspectRatio", "none"), E.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"), E.append("image").attr("x", C.leftMargin).attr("y", p.defaultHeight - C.bottomMargin).attr(
+        ).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(
           "width",
           p.defaultWidth - C.rightMargin - C.leftMargin
-        ).attr("height", C.bottomMargin).attr("href", C.backgroundImageBottom).attr("preserveAspectRatio", "none"), E.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");
+        ).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");
     }
     if (u.look === void 0) {
       if (p.decorators)
         for (const O of p.decorators)
-          E.append("foreignObject").attr("width", `${O.width}px`).attr("height", `${O.height}px`).attr(
+          T.append("foreignObject").attr("width", `${O.width}px`).attr("height", `${O.height}px`).attr(
             "transform",
             `translate(${O.coords[0]},${O.coords[1]})`
           ).html(O.html);
@@ -7868,34 +7885,34 @@ const Ie = ({
           ...p.label,
           ...u.labelLook
         };
-        E.append("text").attr(
+        T.append("text").attr(
           "transform",
           `translate(${(Y(O) + p.defaultWidth) / 2},${(U(O) + p.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, y) => {
-    const k = c().append("div").attr(
+  }, m = (p, u, v) => {
+    const w = c().append("div").attr(
       "class",
-      `daga-template-container ${y !== void 0 ? y : ""}`
+      `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;
     });
-    k.append("path").attr(
+    w.append("path").attr(
       "d",
-      ve(
+      ye(
         Mt.Rectangle,
         0,
         0,
         u.width,
         u.height
       )
-    ).attr("fill", u.backgroundColor).attr("stroke", "black").attr("stroke-width", "1px"), u.icon !== "" && k.append("image").attr("x", 0).attr("y", 0).attr("width", u.width).attr("height", u.height).attr("href", u.icon), u.label !== "" && k.append("text").attr(
+    ).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})`
     ).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 Ct(() => {
+  return St(() => {
     if (d(s.palettes[0]), o.current)
       switch (s.direction) {
         case g.Bottom:
@@ -7907,14 +7924,14 @@ const Ie = ({
           o.current.style.height = s.width, s.height && (o.current.style.width = s.height);
           break;
       }
-  }, [e, s.palettes]), /* @__PURE__ */ v("daga-palette", { children: /* @__PURE__ */ T(
+  }, [e, s.palettes]), /* @__PURE__ */ y("daga-palette", { children: /* @__PURE__ */ M(
     "div",
     {
       ref: o,
       className: `daga-panel daga-${s.location} daga-${s.direction}`,
       children: [
-        /* @__PURE__ */ v(
-          Ie,
+        /* @__PURE__ */ y(
+          xe,
           {
             direction: s.direction,
             collapsableSelector: o,
@@ -7926,8 +7943,8 @@ const Ie = ({
             disabled: !1
           }
         ),
-        /* @__PURE__ */ T("div", { className: "daga-panel-content", children: [
-          s.palettes.length > 1 && /* @__PURE__ */ v("div", { className: "daga-panel-tabs", children: s.palettes.map((p) => /* @__PURE__ */ v(
+        /* @__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(
             "div",
             {
               className: `daga-panel-tab ${p === e ? "daga-current-tab" : ""}`,
@@ -7935,7 +7952,7 @@ const Ie = ({
               children: p.name
             }
           )) }),
-          /* @__PURE__ */ v("div", { className: "daga-palette-view" })
+          /* @__PURE__ */ y("div", { className: "daga-palette-view" })
         ] })
       ]
     }
@@ -7943,106 +7960,107 @@ const Ie = ({
 }, Oi = ({
   location: s,
   direction: t,
-  enableAction: e,
-  enableFilter: a,
-  enableLayout: l,
-  enableSelection: r,
-  enableZoom: i
+  centerAnimationDuration: e,
+  enableAction: a,
+  enableFilter: l,
+  enableLayout: r,
+  enableSelection: i,
+  enableZoom: n
 }) => {
-  let n = !1, o = !0, d = !1, c, h, f, b;
+  let o = !1, d = !0, c = !1, h, f, b, m;
   switch (t) {
     case g.Bottom:
-      c = "height", h = "scaleY", f = "top", b = "bottom";
+      h = "height", f = "scaleY", b = "top", m = "bottom";
       break;
     case g.Top:
-      c = "height", h = "scaleY", f = "bottom", b = "top";
+      h = "height", f = "scaleY", b = "bottom", m = "top";
       break;
     case g.Left:
-      c = "width", h = "scaleX", f = "right", b = "left";
+      h = "width", f = "scaleX", b = "right", m = "left";
       break;
     case g.Right:
-      c = "width", h = "scaleX", f = "left", b = "right";
+      h = "width", f = "scaleX", b = "left", m = "right";
       break;
   }
-  const m = rt(null), p = rt(null), u = rt(null);
-  Ct(() => {
-    x.select(
-      m.current
-    ).style(`margin-${b}`, "-1rem").style(c, "0rem").style("transform", `${h}(0)`).style("transform-origin", f);
+  const p = rt(null), u = rt(null), v = rt(null);
+  St(() => {
+    L.select(
+      p.current
+    ).style(`margin-${m}`, "-1rem").style(h, "0rem").style("transform", `${f}(0)`).style("transform-origin", b);
   });
-  const y = async () => {
-    const J = x.select(
-      m.current
+  const w = async () => {
+    const Z = L.select(
+      p.current
     );
-    if (!d)
-      if (o) {
-        o = !1;
-        const Xt = `${4 * J.selectChildren().size()}rem`;
-        J.transition().duration(500).ease(x.easeLinear).style(c, Xt).style("transform", `${h}(1)`), setTimeout(() => {
-          d = !1;
+    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(() => {
+          c = !1;
         }, 500);
       } else
-        o = !0, J.transition().duration(500).ease(x.easeLinear).style(c, "0rem").style("transform", `${h}(0)`), setTimeout(() => {
-          d = !1;
+        d = !0, Z.transition().duration(500).ease(L.easeLinear).style(h, "0rem").style("transform", `${f}(0)`), setTimeout(() => {
+          c = !1;
         }, 500);
-  }, k = Dt($t), N = () => {
-    k.zoomBy(k.zoomFactor);
-  }, R = () => {
-    k.zoomBy(1 / k.zoomFactor);
+  }, I = Dt($t), R = () => {
+    I.zoomBy(I.zoomFactor);
   }, P = () => {
-    k.center();
-  }, tt = () => {
-    k.layoutFormat && k.layoutFormat in _e && _e[k.layoutFormat].apply(k.model);
-  }, E = () => {
-    n = !n, x.select(
-      u.current
-    ).classed("daga-on", n).classed("daga-off", !n);
-    const J = k.getPriorityThresholdOptions();
-    J && J.length >= 2 && k.setPriorityThreshold(
-      J[n ? 1 : 0]
-    );
+    I.zoomBy(1 / I.zoomFactor);
+  }, et = () => {
+    I.center(void 0, 1, e);
+  }, T = () => {
+    I.layoutFormat && I.layoutFormat in _e && _e[I.layoutFormat].apply(I.model);
   }, C = () => {
-    k.actionStack.undo();
+    o = !o, L.select(
+      v.current
+    ).classed("daga-on", o).classed("daga-off", !o);
+    const Z = I.getPriorityThresholdOptions();
+    Z && Z.length >= 2 && I.setPriorityThreshold(
+      Z[o ? 1 : 0]
+    );
   }, O = () => {
-    k.actionStack.redo();
-  }, I = () => {
-    k.userSelection.copyToClipboard();
+    I.actionStack.undo();
+  }, x = () => {
+    I.actionStack.redo();
   }, _ = () => {
-    k.userSelection.cutToClipboard();
+    I.userSelection.copyToClipboard();
   }, lt = () => {
-    k.userSelection.pasteFromClipboard();
-  }, q = () => {
-    k.userSelection.removeFromModel();
+    I.userSelection.cutToClipboard();
+  }, J = () => {
+    I.userSelection.pasteFromClipboard();
   }, Bt = () => {
-    k.multipleSelectionOn = !0, x.select(
-      p.current
+    I.userSelection.removeFromModel();
+  }, Pt = () => {
+    I.multipleSelectionOn = !0, L.select(
+      u.current
     ).classed("daga-on", !0).classed("daga-off", !1);
-    const J = k.diagramEvent$.subscribe((wt) => {
-      wt.type === Qe.Selection && (x.select(
-        p.current
-      ).classed("daga-on", !1).classed("daga-off", !0), J.unsubscribe());
+    const Z = I.diagramEvent$.subscribe((Q) => {
+      Q.type === Qe.Selection && (L.select(
+        u.current
+      ).classed("daga-on", !1).classed("daga-off", !0), Z.unsubscribe());
     });
   };
-  return /* @__PURE__ */ v("daga-diagram-buttons", { children: /* @__PURE__ */ T(
+  return /* @__PURE__ */ y("daga-diagram-buttons", { children: /* @__PURE__ */ M(
     "div",
     {
       className: `daga-diagram-buttons daga-${s} daga-${t}`,
       children: [
-        i && k.canUserPerformAction(w.Zoom) && /* @__PURE__ */ v("button", { className: "daga-zoom-in", onClick: N, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Zoom in" }) }),
-        i && k.canUserPerformAction(w.Zoom) && /* @__PURE__ */ v("button", { className: "daga-zoom-out", onClick: R, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Zoom out" }) }),
-        /* @__PURE__ */ T("div", { className: "daga-collapsable-buttons daga-collapsed", ref: m, children: [
-          i && k.canUserPerformAction(w.Zoom) && /* @__PURE__ */ v("button", { className: "daga-center", onClick: P, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Fit diagram to screen" }) }),
-          e && /* @__PURE__ */ v("button", { className: "daga-undo", onClick: C, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Undo" }) }),
-          e && /* @__PURE__ */ v("button", { className: "daga-redo", onClick: O, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Redo" }) }),
-          r && /* @__PURE__ */ v("button", { className: "daga-copy", onClick: I, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Copy" }) }),
-          r && /* @__PURE__ */ v("button", { className: "daga-cut", onClick: _, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Cut" }) }),
-          r && /* @__PURE__ */ v("button", { className: `daga-multiple-selection ${n ? "daga-on" : "daga-off"}`, onClick: Bt, ref: p, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Multiple selection" }) }),
-          r && /* @__PURE__ */ v("button", { className: "daga-paste", onClick: lt, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Paste" }) }),
-          r && /* @__PURE__ */ v("button", { className: "daga-delete", onClick: q, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Delete" }) }),
-          l && k.layoutFormat && /* @__PURE__ */ v("button", { className: "daga-layout", onClick: tt, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Apply layout" }) }),
-          a && /* @__PURE__ */ v("button", { className: `daga-filter ${n ? "daga-on" : "daga-off"}`, onClick: E, ref: u, children: /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Apply filter" }) })
+        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" }) }),
+          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-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" }) })
         ] }),
-        /* @__PURE__ */ v("button", { className: "daga-more-options", onClick: y, children: o ? /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "More options" }) : /* @__PURE__ */ v("span", { className: "daga-tooltip", children: "Less options" }) })
+        /* @__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" }) })
       ]
     }
   ) });
@@ -8071,15 +8089,15 @@ const Ie = ({
   }, u = {
     refreshPalette: () => {
     }
-  }, y = new Ii(
-    (E) => f(E),
-    (E) => m(E)
-  ), k = {
+  }, v = new Ii(
+    (T) => f(T),
+    (T) => m(T)
+  ), w = {
     diagramButtons: p,
     palette: u,
-    propertyEditor: y
-  }, N = (E = !1) => ((!o.current || E) && (c.forEach((C) => C.unsubscribe()), o.current = new we(k, s)), o.current), R = N(), P = (E) => {
-    R.initView(E), c.push(
+    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) => {
+    R.initView(T), c.push(
       R.diagramEvent$.subscribe((C) => {
         a?.(C);
       })
@@ -8090,31 +8108,32 @@ const Ie = ({
       })
     );
   };
-  Ct(() => {
+  St(() => {
     n.current && (d.current || (P(n.current), d.current = !0, e?.(R)));
   }, [n.current]), po(() => {
-    n.current && (N(!0), P(n.current), e?.(R));
-  }, [s]), Ct(() => {
+    n.current && (I(!0), P(n.current), e?.(R));
+  }, [s]), St(() => {
     t && r.import(R.model, t);
   }, [t]);
-  const tt = (E, C, O) => {
-    if (b !== void 0 && C.editable !== !1 && !St(E.getValue(C.name), O)) {
-      E.setValue(C.name, O);
-      const I = new yt(
+  const et = (T, C, O) => {
+    if (b !== void 0 && C.editable !== !1 && !wt(T.getValue(C.name), O)) {
+      T.setValue(C.name, O);
+      const x = new yt(
         b.propertySet,
         void 0
       );
-      I.setValues(b.getValues()), I.rootElement = b.rootElement, y.valueSet = I, b.rootElement.valueSet = I, R.propertyEditorChanges$?.next();
+      x.setValues(b.getValues()), x.rootElement = b.rootElement, v.valueSet = x, b.rootElement.valueSet = x, R.propertyEditorChanges$?.next();
     }
   };
-  return /* @__PURE__ */ v("daga-diagram", { children: /* @__PURE__ */ v(Ai.Provider, { value: s, children: /* @__PURE__ */ v($t.Provider, { value: R, children: /* @__PURE__ */ T("daga-diagram-editor", { children: [
-    /* @__PURE__ */ v("div", { className: "daga-append-to", ref: n }),
-    /* @__PURE__ */ T($t.Provider, { value: R, children: [
-      s.components?.buttons !== void 0 && s.components?.buttons?.enabled !== !1 && /* @__PURE__ */ v(
+  return /* @__PURE__ */ y("daga-diagram", { children: /* @__PURE__ */ y(Ai.Provider, { value: s, children: /* @__PURE__ */ y($t.Provider, { value: R, children: /* @__PURE__ */ M("daga-diagram-editor", { children: [
+    /* @__PURE__ */ y("div", { className: "daga-append-to", ref: n }),
+    /* @__PURE__ */ M($t.Provider, { value: R, children: [
+      s.components?.buttons !== void 0 && s.components?.buttons?.enabled !== !1 && /* @__PURE__ */ y(
         Oi,
         {
           location: s.components?.buttons?.location || Kt.BottomRight,
           direction: s.components?.buttons?.direction || g.Top,
+          centerAnimationDuration: s.components?.buttons?.centerAnimationDuration,
           enableAction: s.components?.buttons?.enableAction !== !1,
           enableFilter: s.components?.buttons?.enableFilter === !0,
           enableLayout: s.components?.buttons?.enableLayout === !0,
@@ -8122,7 +8141,7 @@ const Ie = ({
           enableZoom: s.components?.buttons?.enableZoom !== !1
         }
       ),
-      s.components?.palette !== void 0 && s.components?.palette?.enabled !== !1 && s.components?.palette?.sections && (s.components?.palette?.sections?.length || 0) > 0 && /* @__PURE__ */ v(
+      s.components?.palette !== void 0 && s.components?.palette?.enabled !== !1 && s.components?.palette?.sections && (s.components?.palette?.sections?.length || 0) > 0 && /* @__PURE__ */ y(
         Vi,
         {
           location: s.components?.palette?.location || Kt.TopLeft,
@@ -8132,7 +8151,7 @@ const Ie = ({
           palettes: s.components?.palette?.sections || []
         }
       ),
-      s.components?.propertyEditor !== void 0 && s.components?.propertyEditor?.enabled !== !1 && /* @__PURE__ */ v(
+      s.components?.propertyEditor !== void 0 && s.components?.propertyEditor?.enabled !== !1 && /* @__PURE__ */ y(
         zi,
         {
           location: s.components?.propertyEditor?.location || Kt.TopRight,
@@ -8141,10 +8160,10 @@ const Ie = ({
           height: s.components?.propertyEditor?.height,
           title: h,
           valueSet: b,
-          onValueChange: tt
+          onValueChange: et
         }
       ),
-      s.components?.errors !== void 0 && s.components?.errors?.enabled !== !1 && /* @__PURE__ */ v(xi, {})
+      s.components?.errors !== void 0 && s.components?.errors?.enabled !== !1 && /* @__PURE__ */ y(xi, {})
     ] })
   ] }) }) }) });
 };