@metadev/daga-react 4.2.3 → 4.2.5

package/index.mjs

@@ -1,9 +1,9 @@
-import { jsx as k, jsxs as V, Fragment as Di } from "react/jsx-runtime";
+import { jsx as k, jsxs as V, Fragment as Yi } from "react/jsx-runtime";
 import * as N from "d3";
-import { debounceTime as Hi, Subject as Xt, merge as Gi, map as Bi } from "rxjs";
-import { createContext as fi, useState as U, useContext as Yt, useRef as ct, useEffect as Et, useMemo as Fi } from "react";
-var b = /* @__PURE__ */ ((i) => (i.Bottom = "bottom", i.Left = "left", i.Right = "right", i.Top = "top", i))(b || {}), Wt = /* @__PURE__ */ ((i) => (i.BottomLeft = "bottom-left", i.BottomRight = "bottom-right", i.TopLeft = "top-left", i.TopRight = "top-right", i))(Wt || {}), Pt = /* @__PURE__ */ ((i) => (i.Left = "left", i.Center = "center", i.Right = "right", i))(Pt || {}), Kt = /* @__PURE__ */ ((i) => (i.Top = "top", i.Center = "center", i.Bottom = "bottom", i))(Kt || {});
-const Mt = (i) => [Math.round(i[0]), Math.round(i[1])], bt = (i, t, e) => t < e ? t <= i && i <= e : e <= i && i <= t, ii = (i, t, e) => (i - t[0]) / (t[1] - t[0]) * (e[1] - e[0]) + e[0], qt = (i, t, e, o, a, l, s) => {
+import { debounceTime as Xi, Subject as Zt, merge as ji, map as Wi } from "rxjs";
+import { createContext as Ci, useState as U, useContext as Wt, useRef as dt, useEffect as Tt, useMemo as Zi } from "react";
+var b = /* @__PURE__ */ ((i) => (i.Bottom = "bottom", i.Left = "left", i.Right = "right", i.Top = "top", i))(b || {}), qt = /* @__PURE__ */ ((i) => (i.BottomLeft = "bottom-left", i.BottomRight = "bottom-right", i.TopLeft = "top-left", i.TopRight = "top-right", i))(qt || {}), zt = /* @__PURE__ */ ((i) => (i.Left = "left", i.Center = "center", i.Right = "right", i))(zt || {}), Qt = /* @__PURE__ */ ((i) => (i.Top = "top", i.Center = "center", i.Bottom = "bottom", i))(Qt || {});
+const Nt = (i) => [Math.round(i[0]), Math.round(i[1])], kt = (i, t, e) => t < e ? t <= i && i <= e : e <= i && i <= t, di = (i, t, e) => (i - t[0]) / (t[1] - t[0]) * (e[1] - e[0]) + e[0], te = (i, t, e, o, a, l, s) => {
   const n = (() => {
     switch (l) {
       case "start":
@@ -16,7 +16,7 @@ const Mt = (i) => [Math.round(i[0]), Math.round(i[1])], bt = (i, t, e) => t < e
       }
       case "floating":
       default:
-        return ii(i[0], t, o);
+        return di(i[0], t, o);
     }
   })(), r = (() => {
     switch (s) {
@@ -30,47 +30,47 @@ const Mt = (i) => [Math.round(i[0]), Math.round(i[1])], bt = (i, t, e) => t < e
       }
       case "floating":
       default:
-        return ii(i[1], e, a);
+        return di(i[1], e, a);
     }
   })();
   return [n, r];
-}, pi = (i, t) => ((i[0] - t[0]) ** 2 + (i[1] - t[1]) ** 2) ** 0.5, Ui = (i, t) => (bt(
+}, Si = (i, t) => ((i[0] - t[0]) ** 2 + (i[1] - t[1]) ** 2) ** 0.5, Ki = (i, t) => (kt(
   i[0][0],
   t[0][0],
   t[1][0]
-) || bt(
+) || kt(
   i[1][0],
   t[1][0],
   t[0][0]
-) || bt(
+) || kt(
   t[0][0],
   i[0][0],
   i[1][0]
-) || bt(
+) || kt(
   t[1][0],
   i[1][0],
   i[0][0]
-)) && (bt(
+)) && (kt(
   i[0][1],
   t[0][1],
   t[1][1]
-) || bt(
+) || kt(
   i[1][1],
   t[1][1],
   t[0][1]
-) || bt(
+) || kt(
   t[0][1],
   i[0][1],
   i[1][1]
-) || bt(
+) || kt(
   t[1][1],
   i[1][1],
   i[0][1]
 ));
-var L = /* @__PURE__ */ ((i) => (i.Blur = "blur", i.Change = "change", i.Click = "click", i.ContextMenu = "contextmenu", i.DoubleClick = "dblclick", i.Focus = "focus", i.FocusIn = "focusin", i.FocusOut = "focusout", i.Input = "input", i.KeyDown = "keydown", i.KeyUp = "keyup", i.MouseDown = "mousedown", i.MouseEnter = "mouseenter", i.MouseLeave = "mouseleave", i.MouseMove = "mousemove", i.MouseOut = "mouseout", i.MouseOver = "mouseover", i.MouseUp = "mouseup", i.TouchStart = "touchstart", i.TouchEnd = "touchend", i.Wheel = "wheel", i))(L || {}), it = /* @__PURE__ */ ((i) => (i.Alt = "Alt", i.AltGraph = "AltGraph", i.ArrowDown = "ArrowDown", i.ArrowLeft = "ArrowLeft", i.ArrowRight = "ArrowRight", i.ArrowUp = "ArrowUp", i.Backspace = "Backspace", i.Control = "Control", i.Delete = "Delete", i.End = "End", i.Enter = "Enter", i.Escape = "Escape", i.Home = "Home", i.OS = "OS", i.PageDown = "PageDown", i.PageUp = "PageUp", i.Shift = "Shift", i.Tab = "Tab", i))(it || {}), M = /* @__PURE__ */ ((i) => (i.Drag = "drag", i.Start = "start", i.End = "end", i))(M || {}), fe = /* @__PURE__ */ ((i) => (i.Zoom = "zoom", i.Start = "start", i.End = "end", i))(fe || {});
-const pe = (i) => i.replace(/([!"#$%&'()*+,\-./:;<=>?@[\\\]^`{|}])/g, "\\$1");
-var vi = /* @__PURE__ */ ((i) => (i.Straight = "straight", i.Bezier = "bezier", i.Square = "square", i))(vi || {}), yi = /* @__PURE__ */ ((i) => (i.Solid = "solid", i.Dashed = "dashed", i.GappedDashes = "gapped-dashes", i.Dotted = "dotted", i))(yi || {});
-const Yi = 20, Xi = (i, t, e, o, a) => {
+var L = /* @__PURE__ */ ((i) => (i.Blur = "blur", i.Change = "change", i.Click = "click", i.ContextMenu = "contextmenu", i.DoubleClick = "dblclick", i.Focus = "focus", i.FocusIn = "focusin", i.FocusOut = "focusout", i.Input = "input", i.KeyDown = "keydown", i.KeyUp = "keyup", i.MouseDown = "mousedown", i.MouseEnter = "mouseenter", i.MouseLeave = "mouseleave", i.MouseMove = "mousemove", i.MouseOut = "mouseout", i.MouseOver = "mouseover", i.MouseUp = "mouseup", i.TouchStart = "touchstart", i.TouchEnd = "touchend", i.Wheel = "wheel", i))(L || {}), it = /* @__PURE__ */ ((i) => (i.Alt = "Alt", i.AltGraph = "AltGraph", i.ArrowDown = "ArrowDown", i.ArrowLeft = "ArrowLeft", i.ArrowRight = "ArrowRight", i.ArrowUp = "ArrowUp", i.Backspace = "Backspace", i.Control = "Control", i.Delete = "Delete", i.End = "End", i.Enter = "Enter", i.Escape = "Escape", i.Home = "Home", i.OS = "OS", i.PageDown = "PageDown", i.PageUp = "PageUp", i.Shift = "Shift", i.Tab = "Tab", i))(it || {}), M = /* @__PURE__ */ ((i) => (i.Drag = "drag", i.Start = "start", i.End = "end", i))(M || {}), ve = /* @__PURE__ */ ((i) => (i.Zoom = "zoom", i.Start = "start", i.End = "end", i))(ve || {});
+const ye = (i) => i.replace(/([!"#$%&'()*+,\-./:;<=>?@[\\\]^`{|}])/g, "\\$1");
+var Ii = /* @__PURE__ */ ((i) => (i.Straight = "straight", i.Bezier = "bezier", i.Square = "square", i))(Ii || {}), Se = /* @__PURE__ */ ((i) => (i.Solid = "solid", i.Dashed = "dashed", i.GappedDashes = "gapped-dashes", i.Dotted = "dotted", i))(Se || {});
+const qi = 20, Ji = (i, t, e, o, a) => {
   if (typeof i == "function")
     return i(
       t,
@@ -83,7 +83,7 @@ const Yi = 20, Xi = (i, t, e, o, a) => {
   if (t.length === 1)
     return `M ${t[0][0]} ${t[0][1]}`;
   {
-    a = a || Yi;
+    a = a || qi;
     let l = "", s, n;
     switch (i) {
       case "straight":
@@ -229,7 +229,7 @@ const Yi = 20, Xi = (i, t, e, o, a) => {
     }
     return l;
   }
-}, oi = (i, t) => {
+}, be = (i, t) => {
   switch (i) {
     case "dotted":
       return `${t}`;
@@ -245,68 +245,68 @@ const Yi = 20, Xi = (i, t, e, o, a) => {
   const e = i.indexOf(t);
   return e >= 0 && i.splice(e, 1), i;
 };
-var Qt = /* @__PURE__ */ ((i) => (i.Ellipse = "ellipse", i.Empty = "empty", i.Folder = "folder", i.Hexagon = "hexagon", i.Octagon = "octagon", i.Pill = "pill", i.Rectangle = "rectangle", i.Rhombus = "rhombus", i.RoundedRectangle = "rounded-rectangle", i.StickyNote = "sticky-note", i))(Qt || {});
-const ve = (i, t, e, o, a) => {
+var _t = /* @__PURE__ */ ((i) => (i.Ellipse = "ellipse", i.Empty = "empty", i.Folder = "folder", i.Hexagon = "hexagon", i.Octagon = "octagon", i.Pill = "pill", i.Rectangle = "rectangle", i.Rhombus = "rhombus", i.RoundedRectangle = "rounded-rectangle", i.StickyNote = "sticky-note", i))(_t || {});
+const ke = (i, t, e, o, a) => {
   if (typeof i == "function")
     return i(t, e, o, a);
   switch (i) {
     case "ellipse":
-      return bi(t, e, o, a);
+      return Ai(t, e, o, a);
     case "empty":
-      return ji();
+      return Qi();
     case "folder":
-      return Wi(t, e, o, a);
+      return to(t, e, o, a);
     case "hexagon":
-      return Zi(t, e, o, a);
+      return eo(t, e, o, a);
     case "octagon":
-      return Ki(t, e, o, a);
+      return io(t, e, o, a);
     case "pill":
-      return Zt(t, e, o, a);
+      return Jt(t, e, o, a);
     case "rectangle":
-      return si(t, e, o, a);
+      return hi(t, e, o, a);
     case "rhombus":
-      return qi(t, e, o, a);
+      return oo(t, e, o, a);
     case "rounded-rectangle":
-      return Ji(t, e, o, a);
+      return so(t, e, o, a);
     case "sticky-note":
-      return Qi(t, e, o, a);
+      return no(t, e, o, a);
     default:
-      return si(t, e, o, a);
+      return hi(t, e, o, a);
   }
-}, bi = (i, t, e, o) => `M ${i + e / 2} ${t} A ${e / 2} ${o / 2} 0 0 0 ${i + e / 2} ${t + o} A ${e / 2} ${o / 2} 0 1 0 ${i + e / 2} ${t} Z`, ji = () => "Z", Wi = (i, t, e, o) => `M ${i} ${t} L ${i + e / 3} ${t} L ${i + e / 2} ${t + o / 6} L ${i + e} ${t + o / 6} L ${i + e} ${t + o} L ${i} ${t + o} Z`, Zi = (i, t, e, o) => `M ${i + e / 4} ${t} L ${i + 3 * e / 4} ${t} L ${i + e} ${t + o / 2} L ${i + 3 * e / 4} ${t + o} L ${i + e / 4} ${t + o} L ${i} ${t + o / 2} Z`, Ki = (i, t, e, o) => `M ${i + e / 4} ${t} L ${i + 3 * e / 4} ${t} L ${i + e} ${t + o / 4} L ${i + e} ${t + 3 * o / 4} L ${i + 3 * e / 4} ${t + o} L ${i + e / 4} ${t + o} L ${i} ${t + 3 * o / 4} L ${i} ${t + o / 4} L ${i + e / 4} ${t} Z`, Zt = (i, t, e, o) => o < e ? `M ${i + o / 2} ${t} L ${i + e - o / 2} ${t} A ${o / 2} ${o / 2} 0 0 1 ${i + e} ${t + o / 2} A ${o / 2} ${o / 2} 0 0 1 ${i + e - o / 2} ${t + o} L ${i + o / 2} ${t + o} A ${o / 2} ${o / 2} 0 0 1 ${i} ${t + o / 2} A ${o / 2} ${o / 2} 0 0 1 ${i + o / 2} ${t} Z` : o > e ? `M ${i} ${t + e / 2} L ${i} ${t + o - e / 2} A ${e / 2} ${e / 2} 0 0 0 ${i + e / 2} ${t + o} A ${e / 2} ${e / 2} 0 0 0 ${i + e} ${t + o - e / 2} L ${i + e} ${t + e / 2} A ${e / 2} ${e / 2} 0 0 0 ${i + e / 2} ${t} A ${e / 2} ${e / 2} 0 0 0 ${i} ${t + e / 2} Z` : bi(i, t, e, o), si = (i, t, e, o) => `M ${i} ${t} L ${i + e} ${t} L ${i + e} ${t + o} L ${i} ${t + o} Z`, qi = (i, t, e, o) => `M ${i + e / 2} ${t} L ${i + e} ${t + o / 2} L ${i + e / 2} ${t + o} L ${i} ${t + o / 2} Z`, Ji = (i, t, e, o) => `M ${i + e / 4} ${t} L ${i + 3 * e / 4} ${t} A ${e / 4} ${o / 4} 0 0 1 ${i + e} ${t + o / 4} L ${i + e} ${t + 3 * o / 4} A ${e / 4} ${o / 4} 0 0 1 ${i + 3 * e / 4} ${t + o} L ${i + e / 4} ${t + o} A ${e / 4} ${o / 4} 0 0 1 ${i} ${t + 3 * o / 4} L ${i} ${t + o / 4} A ${e / 4} ${o / 4} 0 0 1 ${i + e / 4} ${t} Z`, Qi = (i, t, e, o) => `M ${i} ${t} L ${i + 3 * e / 4} ${t} L ${i + 3 * e / 4} ${t + o / 4} L ${i + 3 * e / 4} ${t} L ${i + e} ${t + o / 4} L ${i + 3 * e / 4} ${t + o / 4} L ${i + e} ${t + o / 4} L ${i + e} ${t + o} L ${i} ${t + o} Z`;
+}, Ai = (i, t, e, o) => `M ${i + e / 2} ${t} A ${e / 2} ${o / 2} 0 0 0 ${i + e / 2} ${t + o} A ${e / 2} ${o / 2} 0 1 0 ${i + e / 2} ${t} Z`, Qi = () => "Z", to = (i, t, e, o) => `M ${i} ${t} L ${i + e / 3} ${t} L ${i + e / 2} ${t + o / 6} L ${i + e} ${t + o / 6} L ${i + e} ${t + o} L ${i} ${t + o} Z`, eo = (i, t, e, o) => `M ${i + e / 4} ${t} L ${i + 3 * e / 4} ${t} L ${i + e} ${t + o / 2} L ${i + 3 * e / 4} ${t + o} L ${i + e / 4} ${t + o} L ${i} ${t + o / 2} Z`, io = (i, t, e, o) => `M ${i + e / 4} ${t} L ${i + 3 * e / 4} ${t} L ${i + e} ${t + o / 4} L ${i + e} ${t + 3 * o / 4} L ${i + 3 * e / 4} ${t + o} L ${i + e / 4} ${t + o} L ${i} ${t + 3 * o / 4} L ${i} ${t + o / 4} L ${i + e / 4} ${t} Z`, Jt = (i, t, e, o) => o < e ? `M ${i + o / 2} ${t} L ${i + e - o / 2} ${t} A ${o / 2} ${o / 2} 0 0 1 ${i + e} ${t + o / 2} A ${o / 2} ${o / 2} 0 0 1 ${i + e - o / 2} ${t + o} L ${i + o / 2} ${t + o} A ${o / 2} ${o / 2} 0 0 1 ${i} ${t + o / 2} A ${o / 2} ${o / 2} 0 0 1 ${i + o / 2} ${t} Z` : o > e ? `M ${i} ${t + e / 2} L ${i} ${t + o - e / 2} A ${e / 2} ${e / 2} 0 0 0 ${i + e / 2} ${t + o} A ${e / 2} ${e / 2} 0 0 0 ${i + e} ${t + o - e / 2} L ${i + e} ${t + e / 2} A ${e / 2} ${e / 2} 0 0 0 ${i + e / 2} ${t} A ${e / 2} ${e / 2} 0 0 0 ${i} ${t + e / 2} Z` : Ai(i, t, e, o), hi = (i, t, e, o) => `M ${i} ${t} L ${i + e} ${t} L ${i + e} ${t + o} L ${i} ${t + o} Z`, oo = (i, t, e, o) => `M ${i + e / 2} ${t} L ${i + e} ${t + o / 2} L ${i + e / 2} ${t + o} L ${i} ${t + o / 2} Z`, so = (i, t, e, o) => `M ${i + e / 4} ${t} L ${i + 3 * e / 4} ${t} A ${e / 4} ${o / 4} 0 0 1 ${i + e} ${t + o / 4} L ${i + e} ${t + 3 * o / 4} A ${e / 4} ${o / 4} 0 0 1 ${i + 3 * e / 4} ${t + o} L ${i + e / 4} ${t + o} A ${e / 4} ${o / 4} 0 0 1 ${i} ${t + 3 * o / 4} L ${i} ${t + o / 4} A ${e / 4} ${o / 4} 0 0 1 ${i + e / 4} ${t} Z`, no = (i, t, e, o) => `M ${i} ${t} L ${i + 3 * e / 4} ${t} L ${i + 3 * e / 4} ${t + o / 4} L ${i + 3 * e / 4} ${t} L ${i + e} ${t + o / 4} L ${i + 3 * e / 4} ${t + o / 4} L ${i + e} ${t + o / 4} L ${i + e} ${t + o} L ${i} ${t + o} Z`;
 var P = /* @__PURE__ */ ((i) => (i.AllScroll = "all-scroll", i.Auto = "auto", i.Crosshair = "crosshair", i.EWResize = "ew-resize", i.Grab = "grab", i.Grabbing = "grabbing", i.Move = "move", i.NoDrop = "no-drop", i.NSResize = "ns-resize", i.NotAllowed = "not-allowed", i.ZoomIn = "zoom-in", i.ZoomOut = "zoom-out", i))(P || {});
-const to = (i) => Math.max(...i.split(`
-`).map((t) => t.length)), eo = (i) => {
+const ro = (i) => Math.max(...i.split(`
+`).map((t) => t.length)), ao = (i) => {
   var t;
   return ((t = i.match(/\n/g)) == null ? void 0 : t.length) || 0;
 }, et = [];
 for (let i = 0; i < 256; ++i)
   et.push((i + 256).toString(16).slice(1));
-function io(i, t = 0) {
+function lo(i, t = 0) {
   return (et[i[t + 0]] + et[i[t + 1]] + et[i[t + 2]] + et[i[t + 3]] + "-" + et[i[t + 4]] + et[i[t + 5]] + "-" + et[i[t + 6]] + et[i[t + 7]] + "-" + et[i[t + 8]] + et[i[t + 9]] + "-" + et[i[t + 10]] + et[i[t + 11]] + et[i[t + 12]] + et[i[t + 13]] + et[i[t + 14]] + et[i[t + 15]]).toLowerCase();
 }
-let le;
-const oo = new Uint8Array(16);
-function so() {
-  if (!le) {
+let de;
+const co = new Uint8Array(16);
+function ho() {
+  if (!de) {
     if (typeof crypto > "u" || !crypto.getRandomValues)
       throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
-    le = crypto.getRandomValues.bind(crypto);
+    de = crypto.getRandomValues.bind(crypto);
   }
-  return le(oo);
+  return de(co);
 }
-const no = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), ni = { randomUUID: no };
-function ri(i, t, e) {
+const go = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), gi = { randomUUID: go };
+function ui(i, t, e) {
   var a;
-  if (ni.randomUUID && !i)
-    return ni.randomUUID();
+  if (gi.randomUUID && !i)
+    return gi.randomUUID();
   i = i || {};
-  const o = i.random ?? ((a = i.rng) == null ? void 0 : a.call(i)) ?? so();
+  const o = i.random ?? ((a = i.rng) == null ? void 0 : a.call(i)) ?? ho();
   if (o.length < 16)
     throw new Error("Random bytes length must be >= 16");
-  return o[6] = o[6] & 15 | 64, o[8] = o[8] & 63 | 128, io(o);
+  return o[6] = o[6] & 15 | 64, o[8] = o[8] & 63 | 128, lo(o);
 }
-const rt = (i) => {
+const at = (i) => {
   const { selected: t, highlighted: e, ...o } = i, a = o, l = {
     ...a,
     ...t
@@ -325,7 +325,7 @@ const rt = (i) => {
     selectedAndHighlightedLook: n
   };
 };
-class te {
+class ie {
   constructor() {
     this.entities = [], this.entityMap = {};
   }
@@ -436,8 +436,8 @@ class te {
       yield t;
   }
 }
-const Vt = 0;
-class $t {
+const Ot = 0;
+class Mt {
   constructor(t, e) {
     this.selfRemoved = !1, this.selfRemovedTimestamp = null, this.model = t, this._id = e;
   }
@@ -469,10 +469,10 @@ class $t {
    */
   select() {
     var t, e;
-    return (e = (t = this.model.canvas) == null ? void 0 : t.selectCanvasView()) == null ? void 0 : e.select(`[id='${pe(this.id)}']`);
+    return (e = (t = this.model.canvas) == null ? void 0 : t.selectCanvasView()) == null ? void 0 : e.select(`[id='${ye(this.id)}']`);
   }
 }
-class yt extends te {
+class bt extends ie {
   all(t = !1) {
     return t ? super.all() : super.filter((e) => !e.removed);
   }
@@ -510,13 +510,13 @@ class yt extends te {
         yield e;
   }
 }
-class ro {
-  constructor(t, e, o, a, l, s) {
-    this.name = t, this.type = e, this.defaultValue = o, this.basic = a, this.editable = l, this.rootAttribute = s, this.options = void 0, this.properties = void 0;
+class uo {
+  constructor(t, e, o, a, l, s, n) {
+    this.name = t, this.label = e, this.type = o, this.defaultValue = a, this.basic = l, this.editable = s, this.rootAttribute = n, this.options = void 0, this.properties = void 0;
   }
 }
 var _ = /* @__PURE__ */ ((i) => (i.Boolean = "boolean", i.Color = "color", i.Date = "date", i.Datetime = "datetime", i.Number = "number", i.Object = "object", i.Option = "option", i.OptionList = "option-list", i.OptionSet = "option-set", i.Text = "text", i.TextArea = "text-area", i.TextList = "text-list", i.TextSet = "text-set", i.TextMap = "text-map", i.Time = "time", i.Url = "url", i))(_ || {});
-class ee {
+class oe {
   constructor(t = []) {
     this.propertyList = t, this.propertyMap = {};
     for (const e of this.propertyList)
@@ -532,24 +532,24 @@ class ee {
     return this.propertyList.length > 0;
   }
 }
-function At(i, t) {
+function xt(i, t) {
   return !t || i[0] > t[0] ? !0 : i[0] === t[0] ? i[1] >= t[1] : !1;
 }
-const ai = (i) => i == null || i === "" || i instanceof Array && i.length === 0 || i instanceof Object && Object.keys(i).length === 0, Lt = (i, t) => i === t || JSON.stringify(i) === JSON.stringify(t), ki = (i, t, e) => {
+const mi = (i) => i == null || i === "" || i instanceof Array && i.length === 0 || i instanceof Object && Object.keys(i).length === 0, Et = (i, t) => i === t || JSON.stringify(i) === JSON.stringify(t), xi = (i, t, e) => {
   const o = {}, a = {};
   for (const l in e.propertySet.propertyMap)
     if (e.propertySet.propertyMap[l].type === _.Object) {
-      const s = ki(
+      const s = xi(
         i[l],
         t[l],
         e.getSubValueSet(l)
       );
       Object.keys(s[0]).length > 0 && Object.keys(s[1]).length > 0 && (o[l] = s[0], a[l] = s[1]);
     } else
-      Lt(i[l], t[l]) || (o[l] = i[l], a[l] = t[l]);
+      Et(i[l], t[l]) || (o[l] = i[l], a[l] = t[l]);
   return [o, a];
-}, ao = (i) => i != null && i.constructor === Object;
-class St {
+}, mo = (i) => i != null && i.constructor === Object;
+class It {
   constructor(t, e) {
     this.displayedProperties = [], this.hiddenProperties = [], this.values = {}, this.valueSets = {}, this.ownTimestamps = {}, this.propertySet = t, this.rootElement = e, this.resetValues();
   }
@@ -657,7 +657,7 @@ class St {
    */
   hasValue(t) {
     const e = this.getValue(t);
-    return !ai(e);
+    return !mi(e);
   }
   /**
    * Checks if the value under the key is not empty or the default value.
@@ -667,7 +667,7 @@ class St {
    */
   hasSetValue(t) {
     const e = this.getValue(t), o = this.propertySet.getProperty(t);
-    return o && o.type === _.Object ? this.getSubValueSet(t).hasAnySetValue() : !ai(e) && !Lt(e, o == null ? void 0 : o.defaultValue);
+    return o && o.type === _.Object ? this.getSubValueSet(t).hasAnySetValue() : !mi(e) && !Et(e, o == null ? void 0 : o.defaultValue);
   }
   /**
    * Checks if any of the values in the set are not empty or the default value.
@@ -689,7 +689,7 @@ class St {
   setValue(t, e) {
     const o = this.propertySet.getProperty(t);
     if (o) {
-      o.type === _.Object ? this.valueSets[t].setValues(e) : (this.values[t] = e, Lt(e, o.defaultValue) || this.displayProperty(o));
+      o.type === _.Object ? this.valueSets[t].setValues(e) : (this.values[t] = e, Et(e, o.defaultValue) || this.displayProperty(o));
       const a = o.rootAttribute;
       a != null && this.setRootElementValue(a, e);
     }
@@ -739,7 +739,7 @@ class St {
       this.propertySet.getProperty(o).type === _.Object ? this.valueSets[o].overwriteValuesLww(
         t[o],
         e
-      ) : At(e, this.ownTimestamps[o]) && (this.setValue(o, t[o]), this.ownTimestamps[o] = e);
+      ) : xt(e, this.ownTimestamps[o]) && (this.setValue(o, t[o]), this.ownTimestamps[o] = e);
   }
   /**
    * Sets all the values of this set to the defaults.
@@ -750,10 +750,10 @@ class St {
     this.displayedProperties = [], this.hiddenProperties = [], this.ownTimestamps = {};
     for (const t in this.propertySet.propertyMap) {
       const e = this.propertySet.getProperty(t), o = e.rootAttribute;
-      e.type === _.Object ? this.valueSets[t] = this.constructSubValueSet(t) : this.values[t] = structuredClone(e.defaultValue), o != null && e.defaultValue !== void 0 && !Lt(
+      e.type === _.Object ? this.valueSets[t] = this.constructSubValueSet(t) : this.values[t] = structuredClone(e.defaultValue), o != null && e.defaultValue !== void 0 && !Et(
         this.getRootElementValue(o),
         e.defaultValue
-      ) && this.setRootElementValue(o, this.values[t]), e.basic ? this.displayedProperties.push(e) : this.hiddenProperties.push(e);
+      ) && this.setRootElementValue(o, this.values[t]), e.basic !== !1 ? this.displayedProperties.push(e) : this.hiddenProperties.push(e);
     }
   }
   /**
@@ -763,7 +763,7 @@ class St {
    * @returns The constructed ValueSet.
    */
   constructSubValueSet(t) {
-    const e = this.propertySet.getProperty(t), o = new ee(e.properties), a = new St(o, this.rootElement);
+    const e = this.propertySet.getProperty(t), o = new oe(e.properties), a = new It(o, this.rootElement);
     return a.overwriteValues(
       structuredClone(e.defaultValue)
     ), a;
@@ -794,15 +794,15 @@ class St {
     this.hiddenProperties.includes(t) || (this.hiddenProperties.push(t), K(this.displayedProperties, t));
   }
 }
-const lo = {
+const st = {
   name: "",
   label: null,
   look: {
     lookType: "connection-look",
     color: "#000000",
     thickness: 1,
-    shape: vi.Straight,
-    style: yi.Solid,
+    shape: Ii.Straight,
+    style: Se.Solid,
     selected: {
       color: "#AA00AA"
     },
@@ -816,29 +816,29 @@ const lo = {
   endTypes: [],
   properties: []
 };
-class wi {
+class Li {
   constructor(t) {
     const e = {
-      ...lo,
+      ...st,
       ...t
     };
     this.id = e.id, this.name = e.name, this.label = e.label;
-    const o = rt(e.look);
+    const o = at(e.look);
     if (this.defaultLook = o.defaultLook, this.selectedLook = o.selectedLook, this.highlightedLook = o.highlightedLook, this.selectedAndHighlightedLook = o.selectedAndHighlightedLook, e.startMarkerLook !== void 0) {
-      const a = rt(
+      const a = at(
         e.startMarkerLook
       );
       this.defaultStartMarkerLook = a.defaultLook, this.selectedStartMarkerLook = a.selectedLook, this.highlightedStartMarkerLook = a.highlightedLook, this.selectedAndHighlightedStartMarkerLook = a.selectedAndHighlightedLook;
     } else
       this.defaultStartMarkerLook = null, this.selectedStartMarkerLook = null, this.highlightedStartMarkerLook = null, this.selectedAndHighlightedStartMarkerLook = null;
     if (e.endMarkerLook !== void 0) {
-      const a = rt(
+      const a = at(
         e.endMarkerLook
       );
       this.defaultEndMarkerLook = a.defaultLook, this.selectedEndMarkerLook = a.selectedLook, this.highlightedEndMarkerLook = a.highlightedLook, this.selectedAndHighlightedEndMarkerLook = a.selectedAndHighlightedLook;
     } else
       this.defaultEndMarkerLook = null, this.selectedEndMarkerLook = null, this.highlightedEndMarkerLook = null, this.selectedAndHighlightedEndMarkerLook = null;
-    this.startTypes = e.startTypes, this.endTypes = e.endTypes, this.propertySet = new ee(e.properties);
+    this.startTypes = e.startTypes, this.endTypes = e.endTypes, this.propertySet = new oe(e.properties);
   }
   canStartFromType(t) {
     return this.startTypes.indexOf(t) >= 0;
@@ -847,20 +847,20 @@ class wi {
     return this.endTypes.indexOf(t) >= 0;
   }
 }
-class gt extends $t {
+class ut extends Mt {
   constructor(t, e, o, a, l) {
     if (t.connections.get(l) !== void 0)
       throw new Error(`DiagramConnection with id "${l}" already exists`);
     if (!l)
       throw new Error("DiagramConnection cannot have an empty or null id");
-    super(t, l), this.startCoords = [0, 0], this.endCoords = [0, 0], this.startLabel = "", this.middleLabel = "", this.endLabel = "", this.points = [], this._type = e, this.valueSet = new St(e.propertySet, this), this.originalData = {}, this.setStart(o), this.setEnd(a);
+    super(t, l), this.startCoords = [0, 0], this.endCoords = [0, 0], this.startLabel = "", this.middleLabel = "", this.endLabel = "", this.points = [], this._type = e, this.valueSet = new It(e.propertySet, this), this.originalData = {}, this.setStart(o), this.setEnd(a);
   }
   get type() {
     return this._type;
   }
   set type(t) {
     var e, o;
-    t !== this._type && (this._type = t, this.valueSet && (this.valueSet = new St(t.propertySet, this)), (o = (e = this.model.canvas) == null ? void 0 : e.userSelection) == null || o.openInPropertyEditor(this, !1), this.updateInView());
+    t !== this._type && (this._type = t, this.valueSet && (this.valueSet = new It(t.propertySet, this)), (o = (e = this.model.canvas) == null ? void 0 : e.userSelection) == null || o.openInPropertyEditor(this, !1), this.updateInView());
   }
   get typeString() {
     return this.type.id;
@@ -895,7 +895,7 @@ class gt extends $t {
    */
   set look(t) {
     if (t) {
-      const e = rt(t);
+      const e = at(t);
       this._defaultLook = {
         ...this._defaultLook,
         ...e.defaultLook
@@ -926,7 +926,7 @@ class gt extends $t {
    */
   set startMarkerLook(t) {
     if (t) {
-      const e = rt(t);
+      const e = at(t);
       this._defaultStartMarkerLook = {
         ...this._defaultStartMarkerLook,
         ...e.defaultLook
@@ -957,7 +957,7 @@ class gt extends $t {
    */
   set endMarkerLook(t) {
     if (t) {
-      const e = rt(t);
+      const e = at(t);
       this._defaultEndMarkerLook = {
         ...this._defaultEndMarkerLook,
         ...e.defaultLook
@@ -1057,16 +1057,16 @@ class gt extends $t {
     }
   }
   getPriority() {
-    return this.start ? this.end ? Math.min(this.start.getPriority(), this.end.getPriority()) : this.start.getPriority() : this.end ? this.end.getPriority() : Vt;
+    return this.start ? this.end ? Math.min(this.start.getPriority(), this.end.getPriority()) : this.start.getPriority() : this.end ? this.end.getPriority() : Ot;
   }
 }
-class co extends yt {
+class fo extends bt {
   /**
    * Instance a set of connections for the given model. This method is used internally.
    * @private
    */
   constructor(t) {
-    super(), this.types = new te(), this.model = t;
+    super(), this.types = new ie(), this.model = t;
   }
   /**
    * Instance a new connection and add it to this set.
@@ -1079,7 +1079,7 @@ class co extends yt {
    */
   new(t, e, o, a) {
     let l;
-    if (t instanceof wi)
+    if (t instanceof Li)
       l = t;
     else {
       const n = this.types.get(t);
@@ -1089,7 +1089,7 @@ class co extends yt {
         );
       l = n;
     }
-    const s = new gt(
+    const s = new ut(
       this.model,
       l,
       e,
@@ -1104,7 +1104,7 @@ class co extends yt {
     e && (K(((o = e.start) == null ? void 0 : o.outgoingConnections) || [], e), K(((a = e.end) == null ? void 0 : a.incomingConnections) || [], e), super.remove(t), e.updateInView());
   }
 }
-const H = {
+const F = {
   editable: !0,
   fontSize: 0,
   margin: 0,
@@ -1113,13 +1113,13 @@ const H = {
   color: "#000000",
   selectedColor: "#000000",
   backgroundColor: "#00000000",
-  horizontalAlign: Pt.Center,
-  verticalAlign: Kt.Center,
+  horizontalAlign: zt.Center,
+  verticalAlign: Qt.Center,
   orientation: b.Top,
   fit: !1,
   shrink: !0
 };
-class pt extends $t {
+class vt extends Mt {
   constructor(t, e, o, a, l, s, n, r, c, d, h, u, p, f, m, g) {
     const v = `${e == null ? void 0 : e.id}_field`;
     if (t.fields.get(v) !== void 0)
@@ -1177,10 +1177,10 @@ class pt extends $t {
   }
   getPriority() {
     var t;
-    return ((t = this.rootElement) == null ? void 0 : t.getPriority()) || Vt;
+    return ((t = this.rootElement) == null ? void 0 : t.getPriority()) || Ot;
   }
 }
-class ho extends yt {
+class po extends bt {
   /**
    * Instance a set of fields for the given model. This method is used internally.
    * @private
@@ -1193,7 +1193,7 @@ class ho extends yt {
    * @private
    */
   new(t, e, o, a, l, s, n, r, c, d, h, u, p, f, m) {
-    const g = new pt(
+    const g = new vt(
       this.model,
       t,
       e,
@@ -1219,26 +1219,26 @@ class ho extends yt {
     e && (((o = e.rootElement) == null ? void 0 : o.label) !== void 0 && e.rootElement.label === e && (e.rootElement.label = void 0), super.remove(t), e.updateInView());
   }
 }
-const st = (i) => (i == null ? void 0 : i.margin) === null || (i == null ? void 0 : i.margin) === void 0 ? H.margin : typeof i.margin == "number" ? i.margin : i.margin.length === 0 ? H.margin : i.margin.length === 1 || i.margin.length === 2 ? i.margin[0] : (i.margin.length === 3, i.margin[2]), tt = (i) => (i == null ? void 0 : i.margin) === null || (i == null ? void 0 : i.margin) === void 0 ? H.margin : typeof i.margin == "number" ? i.margin : i.margin.length === 0 ? H.margin : i.margin.length === 1 ? i.margin[0] : i.margin.length === 2 || i.margin.length === 3 ? i.margin[1] : i.margin[3], lt = (i) => (i == null ? void 0 : i.margin) === null || (i == null ? void 0 : i.margin) === void 0 ? H.margin : typeof i.margin == "number" ? i.margin : i.margin.length === 0 ? H.margin : i.margin.length === 1 ? i.margin[0] : (i.margin.length === 2 || i.margin.length === 3, i.margin[1]), Z = (i) => (i == null ? void 0 : i.margin) === null || (i == null ? void 0 : i.margin) === void 0 ? H.margin : typeof i.margin == "number" ? i.margin : i.margin.length === 0 ? H.margin : (i.margin.length === 1 || i.margin.length === 2 || i.margin.length === 3, i.margin[0]), Dt = (i) => (i == null ? void 0 : i.padding) === null || (i == null ? void 0 : i.padding) === void 0 ? H.padding : typeof i.padding == "number" ? i.padding : i.padding.length === 0 ? H.padding : i.padding.length === 1 || i.padding.length === 2 ? i.padding[0] : (i.padding.length === 3, i.padding[2]), Ht = (i) => (i == null ? void 0 : i.padding) === null || (i == null ? void 0 : i.padding) === void 0 ? H.padding : typeof i.padding == "number" ? i.padding : i.padding.length === 0 ? H.padding : i.padding.length === 1 ? i.padding[0] : i.padding.length === 2 || i.padding.length === 3 ? i.padding[1] : i.padding[3], Gt = (i) => (i == null ? void 0 : i.padding) === null || (i == null ? void 0 : i.padding) === void 0 ? H.padding : typeof i.padding == "number" ? i.padding : i.padding.length === 0 ? H.padding : i.padding.length === 1 ? i.padding[0] : (i.padding.length === 2 || i.padding.length === 3, i.padding[1]), Bt = (i) => (i == null ? void 0 : i.padding) === null || (i == null ? void 0 : i.padding) === void 0 ? H.padding : typeof i.padding == "number" ? i.padding : i.padding.length === 0 ? H.padding : (i.padding.length === 1 || i.padding.length === 2 || i.padding.length === 3, i.padding[0]), li = 1, ci = 1, go = 1, uo = 1;
-class mo {
+const nt = (i) => (i == null ? void 0 : i.margin) === null || (i == null ? void 0 : i.margin) === void 0 ? F.margin : typeof i.margin == "number" ? i.margin : i.margin.length === 0 ? F.margin : i.margin.length === 1 || i.margin.length === 2 ? i.margin[0] : (i.margin.length === 3, i.margin[2]), tt = (i) => (i == null ? void 0 : i.margin) === null || (i == null ? void 0 : i.margin) === void 0 ? F.margin : typeof i.margin == "number" ? i.margin : i.margin.length === 0 ? F.margin : i.margin.length === 1 ? i.margin[0] : i.margin.length === 2 || i.margin.length === 3 ? i.margin[1] : i.margin[3], ct = (i) => (i == null ? void 0 : i.margin) === null || (i == null ? void 0 : i.margin) === void 0 ? F.margin : typeof i.margin == "number" ? i.margin : i.margin.length === 0 ? F.margin : i.margin.length === 1 ? i.margin[0] : (i.margin.length === 2 || i.margin.length === 3, i.margin[1]), Z = (i) => (i == null ? void 0 : i.margin) === null || (i == null ? void 0 : i.margin) === void 0 ? F.margin : typeof i.margin == "number" ? i.margin : i.margin.length === 0 ? F.margin : (i.margin.length === 1 || i.margin.length === 2 || i.margin.length === 3, i.margin[0]), Gt = (i) => (i == null ? void 0 : i.padding) === null || (i == null ? void 0 : i.padding) === void 0 ? F.padding : typeof i.padding == "number" ? i.padding : i.padding.length === 0 ? F.padding : i.padding.length === 1 || i.padding.length === 2 ? i.padding[0] : (i.padding.length === 3, i.padding[2]), Bt = (i) => (i == null ? void 0 : i.padding) === null || (i == null ? void 0 : i.padding) === void 0 ? F.padding : typeof i.padding == "number" ? i.padding : i.padding.length === 0 ? F.padding : i.padding.length === 1 ? i.padding[0] : i.padding.length === 2 || i.padding.length === 3 ? i.padding[1] : i.padding[3], Ut = (i) => (i == null ? void 0 : i.padding) === null || (i == null ? void 0 : i.padding) === void 0 ? F.padding : typeof i.padding == "number" ? i.padding : i.padding.length === 0 ? F.padding : i.padding.length === 1 ? i.padding[0] : (i.padding.length === 2 || i.padding.length === 3, i.padding[1]), Yt = (i) => (i == null ? void 0 : i.padding) === null || (i == null ? void 0 : i.padding) === void 0 ? F.padding : typeof i.padding == "number" ? i.padding : i.padding.length === 0 ? F.padding : (i.padding.length === 1 || i.padding.length === 2 || i.padding.length === 3, i.padding[0]), fi = 1, pi = 1, vo = 1, yo = 1;
+class bo {
   constructor(t) {
     this.margin = t.margin || 0, this.defaultWidths = t.defaultWidths || null, this.defaultHeights = t.defaultHeights || null, this.minWidths = t.minWidths || null, this.minHeights = t.minHeights || null, this.sections = [];
     for (const e of t.sections) {
       const o = [];
       this.sections.push(o);
       for (const a of e)
-        o.push(new fo(a));
+        o.push(new ko(a));
     }
   }
 }
-class fo {
+class ko {
   constructor(t) {
-    this.label = t.label || null, this.ports = t.ports || [], this.priority = t.priority || Vt, this.resizableX = t.resizableX, this.resizableY = t.resizableY;
-    const e = rt(t.look || Ci);
+    this.label = t.label || null, this.ports = t.ports || [], this.priority = t.priority || Ot, this.resizableX = t.resizableX, this.resizableY = t.resizableY;
+    const e = at(t.look || Ei);
     this.defaultLook = e.defaultLook, this.selectedLook = e.selectedLook, this.highlightedLook = e.highlightedLook, this.selectedAndHighlightedLook = e.selectedAndHighlightedLook;
   }
 }
-class X extends $t {
+class X extends Mt {
   constructor(t, e, o, a, l, s, n, r) {
     if (t.sections.get(r) !== void 0)
       throw new Error(`DiagramSection with id "${r}" already exists`);
@@ -1272,7 +1272,7 @@ class X extends $t {
    */
   set look(t) {
     if (t) {
-      const e = rt(t);
+      const e = at(t);
       this._defaultLook = {
         ...this._defaultLook,
         ...e.defaultLook
@@ -1310,15 +1310,15 @@ class X extends $t {
   }
   getMinWidth() {
     var t, e, o, a;
-    return ((a = (o = (e = (t = this.node) == null ? void 0 : t.type) == null ? void 0 : e.sectionGrid) == null ? void 0 : o.minWidths) == null ? void 0 : a[this.indexXInNode]) || go;
+    return ((a = (o = (e = (t = this.node) == null ? void 0 : t.type) == null ? void 0 : e.sectionGrid) == null ? void 0 : o.minWidths) == null ? void 0 : a[this.indexXInNode]) || vo;
   }
   getMinHeight() {
     var t, e, o, a;
-    return ((a = (o = (e = (t = this.node) == null ? void 0 : t.type) == null ? void 0 : e.sectionGrid) == null ? void 0 : o.minHeights) == null ? void 0 : a[this.indexYInNode]) || uo;
+    return ((a = (o = (e = (t = this.node) == null ? void 0 : t.type) == null ? void 0 : e.sectionGrid) == null ? void 0 : o.minHeights) == null ? void 0 : a[this.indexYInNode]) || yo;
   }
   getPriority() {
     var t, e, o, a, l, s;
-    return ((s = (l = (a = (o = (e = (t = this.node) == null ? void 0 : t.type) == null ? void 0 : e.sectionGrid) == null ? void 0 : o.sections) == null ? void 0 : a[this.indexYInNode]) == null ? void 0 : l[this.indexXInNode]) == null ? void 0 : s.priority) || Vt;
+    return ((s = (l = (a = (o = (e = (t = this.node) == null ? void 0 : t.type) == null ? void 0 : e.sectionGrid) == null ? void 0 : o.sections) == null ? void 0 : a[this.indexYInNode]) == null ? void 0 : l[this.indexXInNode]) == null ? void 0 : s.priority) || Ot;
   }
   /**
    * Returns whether this section can be resized horizontally.
@@ -1461,7 +1461,7 @@ class X extends $t {
     const a = [this.coords[0], this.coords[0] + this.width], l = [this.coords[1], this.coords[1] + this.height];
     for (const r of this.ports)
       r.move(
-        qt(
+        te(
           r.coords,
           e,
           o,
@@ -1475,10 +1475,10 @@ class X extends $t {
     this.label && (this.label.coords = [
       this.coords[0] + tt(s == null ? void 0 : s.label),
       this.coords[1] + Z(s == null ? void 0 : s.label)
-    ], this.label.width = this.width - tt(s == null ? void 0 : s.label) - lt(s == null ? void 0 : s.label), this.label.height = this.height - Z(s == null ? void 0 : s.label) - st(s == null ? void 0 : s.label), this.label.updateInView());
+    ], this.label.width = this.width - tt(s == null ? void 0 : s.label) - ct(s == null ? void 0 : s.label), this.label.height = this.height - Z(s == null ? void 0 : s.label) - nt(s == null ? void 0 : s.label), this.label.updateInView());
     for (const r of this.decorators)
       r.move(
-        qt(
+        te(
           r.coords,
           e,
           o,
@@ -1491,7 +1491,7 @@ class X extends $t {
     ((n = this.model.canvas) == null ? void 0 : n.autoTightenConnections) !== !1 && this.getConnections().forEach((r) => r.tighten()), this.updateInView();
   }
 }
-class po extends yt {
+class wo extends bt {
   /**
    * Instance a set of sections for the given model. This method is used internally.
    * @private
@@ -1537,9 +1537,9 @@ class po extends yt {
         );
         if ((m = $.type) != null && m.label) {
           const C = {
-            ...H,
+            ...F,
             ...(g = $.type) == null ? void 0 : g.label
-          }, R = 6 * C.fontSize + Ht(C) + Gt(C), T = C.fontSize + Bt(C) + Dt(C);
+          }, R = 6 * C.fontSize + Bt(C) + Ut(C), T = C.fontSize + Yt(C) + Gt(C);
           let z;
           switch ($.direction) {
             case b.Bottom:
@@ -1547,7 +1547,7 @@ class po extends yt {
             case b.Right:
               z = [
                 $.coords[0] - R / 2,
-                $.coords[1] - T - st(C)
+                $.coords[1] - T - nt(C)
               ];
               break;
             case b.Top:
@@ -1581,7 +1581,7 @@ class po extends yt {
     const d = (A = (y = (w = (v = t.type.sectionGrid) == null ? void 0 : v.sections) == null ? void 0 : w[o]) == null ? void 0 : y[e]) == null ? void 0 : A.label;
     if (d) {
       const I = {
-        ...H,
+        ...F,
         ...d
       };
       this.model.fields.new(
@@ -1594,8 +1594,8 @@ class po extends yt {
         I.fontFamily,
         I.color,
         I.selectedColor,
-        r.width - tt(I) - lt(I),
-        r.height - Z(I) - st(I),
+        r.width - tt(I) - ct(I),
+        r.height - Z(I) - nt(I),
         I.horizontalAlign,
         I.verticalAlign,
         I.orientation,
@@ -1616,9 +1616,9 @@ class po extends yt {
     }
   }
 }
-const Ci = {
+const Ei = {
   lookType: "shaped-look",
-  shape: Qt.Rectangle,
+  shape: _t.Rectangle,
   fillColor: "#FFFFFF",
   borderColor: "#000000",
   borderThickness: 1,
@@ -1629,7 +1629,7 @@ const Ci = {
   highlighted: {
     borderThickness: 3
   }
-}, vt = {
+}, yt = {
   name: "",
   defaultWidth: 1,
   defaultHeight: 1,
@@ -1642,38 +1642,38 @@ const Ci = {
   ports: [],
   decorators: [],
   sectionGrid: null,
-  look: Ci,
+  look: Ei,
   isUnique: !1,
   canBeParentless: !0,
   childrenTypes: [],
-  priority: Vt,
+  priority: Ot,
   properties: []
 };
-class Si {
+class Ti {
   constructor(t) {
     const e = {
-      ...vt,
+      ...yt,
       ...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.bottomPadding = yo(e), this.leftPadding = bo(e), this.rightPadding = ko(e), this.topPadding = wo(e), this.label = e.label, this.ports = e.ports, this.decorators = e.decorators, this.sectionGrid = e.sectionGrid ? new mo(e.sectionGrid) : null;
-    const o = rt(e.look);
-    this.defaultLook = o.defaultLook, this.selectedLook = o.selectedLook, this.highlightedLook = o.highlightedLook, this.selectedAndHighlightedLook = o.selectedAndHighlightedLook, this.isUnique = e.isUnique, this.canBeParentless = e.canBeParentless, this.childrenTypes = e.childrenTypes, this.priority = e.priority, this.propertySet = new ee((t == null ? void 0 : t.properties) || []);
+    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.bottomPadding = So(e), this.leftPadding = Io(e), this.rightPadding = Ao(e), this.topPadding = xo(e), this.label = e.label, this.ports = e.ports, this.decorators = e.decorators, this.sectionGrid = e.sectionGrid ? new bo(e.sectionGrid) : null;
+    const o = at(e.look);
+    this.defaultLook = o.defaultLook, this.selectedLook = o.selectedLook, this.highlightedLook = o.highlightedLook, this.selectedAndHighlightedLook = o.selectedAndHighlightedLook, this.isUnique = e.isUnique, this.canBeParentless = e.canBeParentless, this.childrenTypes = e.childrenTypes, this.priority = e.priority, this.propertySet = new oe((t == null ? void 0 : t.properties) || []);
   }
 }
-class O extends $t {
+class O extends Mt {
   constructor(t, e, o = [0, 0], a) {
     if (t.nodes.get(a) !== void 0)
       throw new Error(`DiagramNode with id "${a}" already exists`);
     if (!a)
       throw new Error("DiagramNode cannot have an empty or null id");
-    super(t, a), this.children = [], this.sections = [], this.ports = [], this.decorators = [], this.geometryTimestamp = null, this._type = e, this.valueSet = new St(e.propertySet, this), this.originalData = {}, this.coords = o, this.width = e.defaultWidth, this.height = e.defaultHeight;
+    super(t, a), this.children = [], this.sections = [], this.ports = [], this.decorators = [], this.geometryTimestamp = null, this._type = e, this.valueSet = new It(e.propertySet, this), this.originalData = {}, this.coords = o, this.width = e.defaultWidth, this.height = e.defaultHeight;
   }
   get type() {
     return this._type;
   }
   set type(t) {
     var e, o;
-    t !== this._type && (this._type = t, this.valueSet && (this.valueSet = new St(t.propertySet, this)), (o = (e = this.model.canvas) == null ? void 0 : e.userSelection) == null || o.openInPropertyEditor(this, !1), this.updateInView());
+    t !== this._type && (this._type = t, this.valueSet && (this.valueSet = new It(t.propertySet, this)), (o = (e = this.model.canvas) == null ? void 0 : e.userSelection) == null || o.openInPropertyEditor(this, !1), this.updateInView());
   }
   get typeString() {
     return this.type.id;
@@ -1709,7 +1709,7 @@ class O extends $t {
    */
   set look(t) {
     if (t) {
-      const e = rt(t);
+      const e = at(t);
       this._defaultLook = {
         ...this._defaultLook,
         ...e.defaultLook
@@ -2075,7 +2075,7 @@ class O extends $t {
     }
     for (const n of this.ports)
       n.move(
-        qt(
+        te(
           n.coords,
           e,
           o,
@@ -2088,10 +2088,10 @@ class O extends $t {
     this.label && (this.label.coords = [
       this.coords[0] + tt(this.type.label),
       this.coords[1] + Z(this.type.label)
-    ], this.label.width = this.width - tt(this.type.label) - lt(this.type.label), this.label.height = this.height - Z(this.type.label) - st(this.type.label), this.label.updateInView());
+    ], this.label.width = this.width - tt(this.type.label) - ct(this.type.label), this.label.height = this.height - Z(this.type.label) - nt(this.type.label), this.label.updateInView());
     for (const n of this.decorators)
       n.move(
-        qt(
+        te(
           n.coords,
           e,
           o,
@@ -2210,13 +2210,13 @@ class O extends $t {
     this.stretch(b.Bottom, e + o);
   }
 }
-class vo extends yt {
+class Co extends bt {
   /**
    * Instance a set of nodes for the given model. This method is used internally.
    * @private
    */
   constructor(t) {
-    super(), this.types = new te(), this.model = t;
+    super(), this.types = new ie(), this.model = t;
   }
   /**
    * Instance a new node and add it to this set.
@@ -2229,7 +2229,7 @@ class vo extends yt {
   new(t, e, o) {
     var s, n, r, c, d, h, u;
     let a;
-    if (t instanceof Si)
+    if (t instanceof Ti)
       a = t;
     else {
       const p = this.types.get(t);
@@ -2248,11 +2248,11 @@ class vo extends yt {
             g,
             f,
             [m, p],
-            ((s = a.sectionGrid.defaultWidths) == null ? void 0 : s[g]) || li,
-            ((n = a.sectionGrid.defaultHeights) == null ? void 0 : n[f]) || ci,
+            ((s = a.sectionGrid.defaultWidths) == null ? void 0 : s[g]) || fi,
+            ((n = a.sectionGrid.defaultHeights) == null ? void 0 : n[f]) || pi,
             `${l.id}_${f}_${g}`
-          ), m += (((r = a.sectionGrid.defaultWidths) == null ? void 0 : r[g]) || li) + (a.sectionGrid.margin || 0);
-        p += (((c = a.sectionGrid.defaultHeights) == null ? void 0 : c[f]) || ci) + (a.sectionGrid.margin || 0);
+          ), m += (((r = a.sectionGrid.defaultWidths) == null ? void 0 : r[g]) || fi) + (a.sectionGrid.margin || 0);
+        p += (((c = a.sectionGrid.defaultHeights) == null ? void 0 : c[f]) || pi) + (a.sectionGrid.margin || 0);
       }
     }
     if (a.ports.length > 0)
@@ -2275,9 +2275,9 @@ class vo extends yt {
         );
         if ((d = g.type) != null && d.label) {
           const v = {
-            ...H,
+            ...F,
             ...(h = g.type) == null ? void 0 : h.label
-          }, w = 6 * v.fontSize + Ht(v) + Gt(v), y = v.fontSize + Bt(v) + Dt(v);
+          }, w = 6 * v.fontSize + Bt(v) + Ut(v), y = v.fontSize + Yt(v) + Gt(v);
           let A;
           switch (g.direction) {
             case b.Bottom:
@@ -2285,7 +2285,7 @@ class vo extends yt {
             case b.Right:
               A = [
                 g.coords[0] - w / 2,
-                g.coords[1] - y - st(v)
+                g.coords[1] - y - nt(v)
               ];
               break;
             case b.Top:
@@ -2318,7 +2318,7 @@ class vo extends yt {
       }
     if (a.label) {
       const p = {
-        ...H,
+        ...F,
         ...a.label
       };
       this.model.fields.new(
@@ -2331,8 +2331,8 @@ class vo extends yt {
         p.fontFamily,
         p.color,
         p.selectedColor,
-        l.width - tt(p) - lt(p),
-        l.height - Z(p) - st(p),
+        l.width - tt(p) - ct(p),
+        l.height - Z(p) - nt(p),
         p.horizontalAlign,
         p.verticalAlign,
         p.orientation,
@@ -2390,14 +2390,14 @@ class vo extends yt {
     return o;
   }
 }
-const Ii = (i) => {
+const $i = (i) => {
   for (let t = 0; t < i.length; ++t)
     for (let e = 0; e < i.length; ++e)
       e !== t && i[e].isAncestorOf(i[t]) && (i.splice(e, 1), --e, t > e && --t);
   return i;
-}, yo = (i) => (i == null ? void 0 : i.padding) === null || (i == null ? void 0 : i.padding) === void 0 ? vt.padding : typeof i.padding == "number" ? i.padding : i.padding.length === 0 ? vt.padding : i.padding.length === 1 || i.padding.length === 2 ? i.padding[0] : (i.padding.length === 3, i.padding[2]), bo = (i) => (i == null ? void 0 : i.padding) === null || (i == null ? void 0 : i.padding) === void 0 ? vt.padding : typeof i.padding == "number" ? i.padding : i.padding.length === 0 ? vt.padding : i.padding.length === 1 ? i.padding[0] : i.padding.length === 2 || i.padding.length === 3 ? i.padding[1] : i.padding[3], ko = (i) => (i == null ? void 0 : i.padding) === null || (i == null ? void 0 : i.padding) === void 0 ? vt.padding : typeof i.padding == "number" ? i.padding : i.padding.length === 0 ? vt.padding : i.padding.length === 1 ? i.padding[0] : (i.padding.length === 2 || i.padding.length === 3, i.padding[1]), wo = (i) => (i == null ? void 0 : i.padding) === null || (i == null ? void 0 : i.padding) === void 0 ? vt.padding : typeof i.padding == "number" ? i.padding : i.padding.length === 0 ? vt.padding : (i.padding.length === 1 || i.padding.length === 2 || i.padding.length === 3, i.padding[0]), Ai = {
+}, So = (i) => (i == null ? void 0 : i.padding) === null || (i == null ? void 0 : i.padding) === void 0 ? yt.padding : typeof i.padding == "number" ? i.padding : i.padding.length === 0 ? yt.padding : i.padding.length === 1 || i.padding.length === 2 ? i.padding[0] : (i.padding.length === 3, i.padding[2]), Io = (i) => (i == null ? void 0 : i.padding) === null || (i == null ? void 0 : i.padding) === void 0 ? yt.padding : typeof i.padding == "number" ? i.padding : i.padding.length === 0 ? yt.padding : i.padding.length === 1 ? i.padding[0] : i.padding.length === 2 || i.padding.length === 3 ? i.padding[1] : i.padding[3], Ao = (i) => (i == null ? void 0 : i.padding) === null || (i == null ? void 0 : i.padding) === void 0 ? yt.padding : typeof i.padding == "number" ? i.padding : i.padding.length === 0 ? yt.padding : i.padding.length === 1 ? i.padding[0] : (i.padding.length === 2 || i.padding.length === 3, i.padding[1]), xo = (i) => (i == null ? void 0 : i.padding) === null || (i == null ? void 0 : i.padding) === void 0 ? yt.padding : typeof i.padding == "number" ? i.padding : i.padding.length === 0 ? yt.padding : (i.padding.length === 1 || i.padding.length === 2 || i.padding.length === 3, i.padding[0]), Mi = {
   lookType: "shaped-look",
-  shape: Qt.Ellipse,
+  shape: _t.Ellipse,
   fillColor: "transparent",
   borderColor: "transparent",
   borderThickness: 0,
@@ -2407,26 +2407,26 @@ const Ii = (i) => {
   highlighted: {
     fillColor: "rgba(0, 255, 255, 0.5)"
   }
-}, jt = rt(Ai), xi = {
+}, Kt = at(Mi), Ni = {
   name: "",
   label: null,
   allowsOutgoing: !0,
   allowsIncoming: !0,
   width: 24,
-  look: Ai
+  look: Mi
 };
-class Co {
+class Lo {
   constructor(t) {
     const e = {
-      ...xi,
+      ...Ni,
       ...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 o = rt(e.look);
+    const o = at(e.look);
     this.defaultLook = o.defaultLook, this.selectedLook = o.selectedLook, this.highlightedLook = o.highlightedLook, this.selectedAndHighlightedLook = o.selectedAndHighlightedLook;
   }
 }
-class It extends $t {
+class At extends Mt {
   constructor(t, e, o, a, l, s, n, r = "floating", c = "floating") {
     if (t.ports.get(n) !== void 0)
       throw new Error(`DiagramPort with id "${n}" already exists`);
@@ -2485,7 +2485,7 @@ class It extends $t {
    */
   get look() {
     var t, e, o, a;
-    return this.selected ? this.highlighted ? this._selectedAndHighlightedLook !== void 0 ? this._selectedAndHighlightedLook : (t = this.type || jt) == null ? void 0 : t.selectedAndHighlightedLook : this._selectedLook !== void 0 ? this._selectedLook : (e = this.type || jt) == null ? void 0 : e.selectedLook : this.highlighted ? this._highlightedLook !== void 0 ? this._highlightedLook : (o = this.type || jt) == null ? void 0 : o.highlightedLook : this._defaultLook !== void 0 ? this._defaultLook : (a = this.type || jt) == null ? void 0 : a.defaultLook;
+    return this.selected ? this.highlighted ? this._selectedAndHighlightedLook !== void 0 ? this._selectedAndHighlightedLook : (t = this.type || Kt) == null ? void 0 : t.selectedAndHighlightedLook : this._selectedLook !== void 0 ? this._selectedLook : (e = this.type || Kt) == null ? void 0 : e.selectedLook : this.highlighted ? this._highlightedLook !== void 0 ? this._highlightedLook : (o = this.type || Kt) == null ? void 0 : o.highlightedLook : this._defaultLook !== void 0 ? this._defaultLook : (a = this.type || Kt) == null ? void 0 : a.defaultLook;
   }
   /**
    * Sets the look configuration of the look to override the one determined by the type.
@@ -2494,7 +2494,7 @@ class It extends $t {
    */
   set look(t) {
     if (t) {
-      const e = rt(
+      const e = at(
         t
       );
       this._defaultLook = {
@@ -2519,7 +2519,7 @@ class It extends $t {
    */
   get width() {
     var t;
-    return ((t = this.type) == null ? void 0 : t.width) || xi.width;
+    return ((t = this.type) == null ? void 0 : t.width) || Ni.width;
   }
   /**
    * Current height of this port. Same as the width.
@@ -2572,7 +2572,7 @@ class It extends $t {
   }
   getPriority() {
     var t;
-    return ((t = this.rootElement) == null ? void 0 : t.getPriority()) || Vt;
+    return ((t = this.rootElement) == null ? void 0 : t.getPriority()) || Ot;
   }
   /**
    * Change the coordinates of this port to the given coordinates and move its labels correspondingly.
@@ -2595,23 +2595,23 @@ class It extends $t {
     ]), this.updateInView();
   }
   distanceTo(t) {
-    return pi(this.coords, t);
+    return Si(this.coords, t);
   }
 }
-class So extends yt {
+class Eo extends bt {
   /**
    * Instance a set of ports for the given model. This method is used internally.
    * @private
    */
   constructor(t) {
-    super(), this.types = new te(), this.model = t;
+    super(), this.types = new ie(), this.model = t;
   }
   /**
    * Instance a new port and add it to this set. This method is normally called when instancing an element with a port and it is rarely called by itself.
    * @private
    */
   new(t, e, o, a, l, s, n = "floating", r = "floating") {
-    const c = new It(
+    const c = new At(
       this.model,
       t,
       e,
@@ -2635,7 +2635,7 @@ class So extends yt {
     }
   }
 }
-class Li {
+class Pi {
   import(t, e) {
     t.clear(), e.id && (t.id = e.id), t.name = e.name, t.description = e.description, t.type = e.type, t.createdAt = new Date(e.createdAt), t.updatedAt = new Date(e.updatedAt);
     for (const o of e.nodes || [])
@@ -2668,17 +2668,17 @@ class Li {
           }
         if (o.label) {
           const g = {
-            ...H,
+            ...F,
             ...o.label
-          }, v = new pt(
+          }, v = new vt(
             t,
             f,
             [
               f.coords[0] + tt(g),
               f.coords[1] + Z(g)
             ],
-            f.width - tt(g) - lt(g),
-            f.height - Z(g) - st(g),
+            f.width - tt(g) - ct(g),
+            f.height - Z(g) - nt(g),
             g.fontSize,
             g.fontFamily,
             g.color,
@@ -2711,17 +2711,17 @@ class Li {
         );
         if ((l = f.sections) == null || l.push(v), t.sections.add(v), g.label && (c = (r = (n = (s = o.sectionGrid) == null ? void 0 : s.sections) == null ? void 0 : n[g.indexYInNode]) == null ? void 0 : r[g.indexXInNode]) != null && c.label) {
           const y = {
-            ...H,
+            ...F,
             ...(p = (u = (h = (d = o.sectionGrid) == null ? void 0 : d.sections) == null ? void 0 : h[g.indexYInNode]) == null ? void 0 : u[g.indexXInNode]) == null ? void 0 : p.label
-          }, A = new pt(
+          }, A = new vt(
             t,
             v,
             [
               v.coords[0] + tt(y),
               v.coords[1] + Z(y)
             ],
-            v.width - tt(y) - lt(y),
-            v.height - Z(y) - st(y),
+            v.width - tt(y) - ct(y),
+            v.height - Z(y) - nt(y),
             y.fontSize,
             y.fontFamily,
             y.color,
@@ -2738,19 +2738,19 @@ class Li {
         }
         let w = 0;
         for (const y of g.ports || []) {
-          const A = y.type !== void 0 ? t.ports.types.get(y.type) : void 0, I = new It(
+          const A = y.type !== void 0 ? t.ports.types.get(y.type) : void 0, I = new At(
             t,
             A,
             v,
             y.coords,
-            y.connectionPoint,
+            y.connectionPoint || y.coords,
             y.direction,
             y.id
           );
           if (v.ports.push(I), t.ports.add(I), y.label) {
             if (o.ports.length > w && (A != null && A.label)) {
               const E = {
-                ...H,
+                ...F,
                 ...A == null ? void 0 : A.label
               };
               let $;
@@ -2777,7 +2777,7 @@ class Li {
                 default:
                   $ = I.coords;
               }
-              const C = new pt(
+              const C = new vt(
                 t,
                 I,
                 $,
@@ -2808,19 +2808,19 @@ class Li {
       }
       let m = 0;
       for (const g of e.ports || []) {
-        const v = g.type !== void 0 ? t.ports.types.get(g.type) : void 0, w = new It(
+        const v = g.type !== void 0 ? t.ports.types.get(g.type) : void 0, w = new At(
           t,
           v,
           f,
           g.coords,
-          g.connectionPoint,
+          g.connectionPoint || g.coords,
           g.direction,
           g.id
         );
         if (f.ports.push(w), t.ports.add(w), g.label) {
           if (o.ports.length > m && (v != null && v.label)) {
             const y = {
-              ...H,
+              ...F,
               ...v == null ? void 0 : v.label
             };
             let A;
@@ -2847,7 +2847,7 @@ class Li {
               default:
                 A = w.coords;
             }
-            const I = new pt(
+            const I = new vt(
               t,
               w,
               A,
@@ -2877,7 +2877,7 @@ class Li {
   importConnection(t, e) {
     const o = t.connections.types.get(e.type);
     if (o) {
-      const a = new gt(
+      const a = new ut(
         t,
         o,
         e.start ? t.ports.get(e.start) : void 0,
@@ -2893,7 +2893,7 @@ class Li {
     t && e && (t.selfRemoved = e.selfRemoved, t.selfRemovedTimestamp = e.selfRemovedTimestamp, t.textTimestamp = e.textTimestamp);
   }
 }
-class ie {
+class se {
   constructor(t, e, o, a, l, s, n) {
     this.canvas = t, this.id = e, this.typeId = o, this.coords = a, this.parentId = l, this.label = s, this.values = n;
   }
@@ -2919,7 +2919,7 @@ class ie {
     };
   }
   static deserialize(t, e) {
-    return new ie(
+    return new se(
       t,
       e.id,
       e.typeId,
@@ -2930,13 +2930,13 @@ class ie {
     );
   }
 }
-class ke {
+class Ie {
   constructor(t, e, o, a, l, s, n) {
     this.canvas = t, this.nodeId = e, this.copyColumnIndex = o, this.copyRowIndex = a, this.removeColumnIndex = l, this.removeRowIndex = s, this.timestamp = n;
   }
   do() {
     const t = this.canvas.model.nodes.get(this.nodeId);
-    t && At(this.timestamp, t.geometryTimestamp) && (this.copyColumnIndex !== void 0 && t.copySectionColumn(this.copyColumnIndex), this.copyRowIndex !== void 0 && t.copySectionRow(this.copyRowIndex), this.removeColumnIndex !== void 0 && t.removeSectionColumn(this.removeColumnIndex), this.removeRowIndex !== void 0 && t.removeSectionRow(this.removeRowIndex), t.geometryTimestamp = this.timestamp);
+    t && xt(this.timestamp, t.geometryTimestamp) && (this.copyColumnIndex !== void 0 && t.copySectionColumn(this.copyColumnIndex), this.copyRowIndex !== void 0 && t.copySectionRow(this.copyRowIndex), this.removeColumnIndex !== void 0 && t.removeSectionColumn(this.removeColumnIndex), this.removeRowIndex !== void 0 && t.removeSectionRow(this.removeRowIndex), t.geometryTimestamp = this.timestamp);
   }
   serialize() {
     return {
@@ -2950,7 +2950,7 @@ class ke {
     };
   }
   static deserialize(t, e) {
-    return new ke(
+    return new Ie(
       t,
       e.nodeId,
       e.copyColumnIndex,
@@ -2961,14 +2961,14 @@ class ke {
     );
   }
 }
-class we {
+class Ae {
   constructor(t, e, o) {
     this.canvas = t, this.to = e, this.timestamp = o;
   }
   do() {
     for (const t in this.to) {
       const e = this.canvas.model.nodes.get(t, !0);
-      if (e && At(this.timestamp, e.geometryTimestamp)) {
+      if (e && xt(this.timestamp, e.geometryTimestamp)) {
         const o = this.to[t];
         e.move([o[0], o[1]]), e.geometryTimestamp = this.timestamp;
       }
@@ -2982,14 +2982,14 @@ class we {
     };
   }
   static deserialize(t, e) {
-    return new we(
+    return new Ae(
       t,
       e.to,
       e.timestamp
     );
   }
 }
-class Ft {
+class Xt {
   constructor(t, e, o, a) {
     this.canvas = t, this.nodeIds = e, this.delta = o, this.timestamp = a;
   }
@@ -2997,7 +2997,7 @@ class Ft {
     var t;
     for (const e of this.nodeIds) {
       const o = this.canvas.model.nodes.get(e, !0);
-      o && At(this.timestamp, o.geometryTimestamp) && (o.move([
+      o && xt(this.timestamp, o.geometryTimestamp) && (o.move([
         o.coords[0] + this.delta[0],
         o.coords[1] + this.delta[1]
       ]), (t = o.parent) == null || t.fitToChild(o), o.geometryTimestamp = this.timestamp);
@@ -3012,7 +3012,7 @@ class Ft {
     };
   }
   static deserialize(t, e) {
-    return new Ft(
+    return new Xt(
       t,
       e.nodeIds,
       e.delta,
@@ -3020,14 +3020,14 @@ class Ft {
     );
   }
 }
-class nt {
+class rt {
   constructor(t, e, o, a) {
     this.canvas = t, this.nodeId = e, this.to = o, this.timestamp = a;
   }
   do() {
     var e, o, a;
     const t = this.canvas.model.nodes.get(this.nodeId, !0);
-    if (t && At(this.timestamp, t.geometryTimestamp)) {
+    if (t && xt(this.timestamp, t.geometryTimestamp)) {
       t.setGeometry(this.to), (e = t.label) != null && e.fit && this.canvas.fitFieldRootInView(t.label.id, t.label.shrink);
       for (const l of t.sections)
         (o = l.label) != null && o.fit && this.canvas.fitFieldRootInView(
@@ -3046,7 +3046,7 @@ class nt {
     };
   }
   static deserialize(t, e) {
-    return new nt(
+    return new rt(
       t,
       e.nodeId,
       e.to,
@@ -3054,14 +3054,14 @@ class nt {
     );
   }
 }
-class Ut {
+class jt {
   constructor(t, e, o, a, l) {
     this.canvas = t, this.childId = e, this.parentId = o, this.childGeometry = a, this.timestamp = l;
   }
   do() {
     var o;
     const t = this.canvas.model.nodes.get(this.childId, !0), e = this.parentId !== void 0 ? this.canvas.model.nodes.get(this.parentId, !0) : void 0;
-    t && (this.parentId === void 0 || e) && At(this.timestamp, t.geometryTimestamp) && ((o = t.parent) == null || o.removeChild(t), t.setGeometry(this.childGeometry), e == null || e.addChild(t));
+    t && (this.parentId === void 0 || e) && xt(this.timestamp, t.geometryTimestamp) && ((o = t.parent) == null || o.removeChild(t), t.setGeometry(this.childGeometry), e == null || e.addChild(t));
   }
   serialize() {
     return {
@@ -3073,7 +3073,7 @@ class Ut {
     };
   }
   static deserialize(t, e) {
-    return new Ut(
+    return new jt(
       t,
       e.childId,
       e.parentId,
@@ -3082,7 +3082,7 @@ class Ut {
     );
   }
 }
-class oe {
+class ne {
   constructor(t, e, o, a, l) {
     this.canvas = t, this.id = e, this.typeId = o, this.startId = a, this.endId = l;
   }
@@ -3100,7 +3100,7 @@ class oe {
     };
   }
   static deserialize(t, e) {
-    return new oe(
+    return new ne(
       t,
       e.id,
       e.typeId,
@@ -3109,13 +3109,13 @@ class oe {
     );
   }
 }
-class zt {
+class Rt {
   constructor(t, e, o, a) {
     this.canvas = t, this.fieldId = e, this.to = o, this.timestamp = a;
   }
   do() {
     const t = this.canvas.model.fields.get(this.fieldId, !0);
-    t && At(this.timestamp, t.textTimestamp) && (t.text = this.to, t.textTimestamp = this.timestamp);
+    t && xt(this.timestamp, t.textTimestamp) && (t.text = this.to, t.textTimestamp = this.timestamp);
   }
   serialize() {
     return {
@@ -3126,7 +3126,7 @@ class zt {
     };
   }
   static deserialize(t, e) {
-    return new zt(
+    return new Rt(
       t,
       e.fieldId,
       e.to,
@@ -3134,7 +3134,7 @@ class zt {
     );
   }
 }
-class Rt {
+class Vt {
   constructor(t, e, o, a) {
     this.canvas = t, this.id = e, this.to = o, this.timestamp = a;
   }
@@ -3155,7 +3155,7 @@ class Rt {
     };
   }
   static deserialize(t, e) {
-    return new Rt(
+    return new Vt(
       t,
       e.id,
       e.to,
@@ -3163,12 +3163,12 @@ class Rt {
     );
   }
 }
-class dt {
+class ht {
   constructor(t, e, o, a, l, s, n, r) {
     this.canvas = t, this.nodeIds = e, this.sectionIds = o, this.portIds = a, this.connectionIds = l, this.fieldIds = s, this.selfRemoved = n, this.timestamp = r;
   }
   doOne(t) {
-    t && At(this.timestamp, t.selfRemovedTimestamp) && (t.selfRemoved = this.selfRemoved, t.selfRemovedTimestamp = this.timestamp);
+    t && xt(this.timestamp, t.selfRemovedTimestamp) && (t.selfRemoved = this.selfRemoved, t.selfRemovedTimestamp = this.timestamp);
   }
   do() {
     for (const t of this.nodeIds)
@@ -3196,7 +3196,7 @@ class dt {
     };
   }
   static deserialize(t, e) {
-    return new dt(
+    return new ht(
       t,
       e.nodeIds,
       e.sectionIds,
@@ -3208,12 +3208,12 @@ class dt {
     );
   }
 }
-class se {
+class re {
   constructor(t, e, o) {
     this.canvas = t, this.nodes = e, this.connections = o;
   }
   do() {
-    const t = new Li();
+    const t = new Pi();
     this.canvas.userSelection.clear();
     for (const e of this.nodes) {
       const o = t.importNode(this.canvas.model, e);
@@ -3235,16 +3235,16 @@ class se {
     };
   }
   static deserialize(t, e) {
-    return new se(
+    return new re(
       t,
       e.nodes,
       e.connections
     );
   }
 }
-class Io {
+class To {
   constructor(t) {
-    this.isInRoom = !1, this.canvas = t, this.replicaId = ri();
+    this.isInRoom = !1, this.canvas = t, this.replicaId = ui();
   }
   /**
    * Returns a fresh timestamp, suitable for use by new CollabActions.
@@ -3256,7 +3256,7 @@ class Io {
    * Returns a fresh unique ID, suitable for use by new CollabActions.
    */
   freshId() {
-    return "id" + ri();
+    return "id" + ui();
   }
   /**
    * Performs the action - immediately locally, and eventually for remote collaborators.
@@ -3279,62 +3279,62 @@ class Io {
       t.timestamp[0]
     )), t.type) {
       case "addNode": {
-        ie.deserialize(this.canvas, t).do();
+        se.deserialize(this.canvas, t).do();
         break;
       }
       case "addSection": {
-        ke.deserialize(this.canvas, t).do();
+        Ie.deserialize(this.canvas, t).do();
         break;
       }
       case "applyLayout": {
-        we.deserialize(
+        Ae.deserialize(
           this.canvas,
           t
         ).do();
         break;
       }
       case "move": {
-        Ft.deserialize(this.canvas, t).do();
+        Xt.deserialize(this.canvas, t).do();
         break;
       }
       case "setGeometry": {
-        nt.deserialize(
+        rt.deserialize(
           this.canvas,
           t
         ).do();
         break;
       }
       case "setParent": {
-        Ut.deserialize(this.canvas, t).do();
+        jt.deserialize(this.canvas, t).do();
         break;
       }
       case "addConnection": {
-        oe.deserialize(
+        ne.deserialize(
           this.canvas,
           t
         ).do();
         break;
       }
       case "editField": {
-        zt.deserialize(this.canvas, t).do();
+        Rt.deserialize(this.canvas, t).do();
         break;
       }
       case "updateValues": {
-        Rt.deserialize(
+        Vt.deserialize(
           this.canvas,
           t
         ).do();
         break;
       }
       case "setSelfRemoved": {
-        dt.deserialize(
+        ht.deserialize(
           this.canvas,
           t
         ).do();
         break;
       }
       case "paste": {
-        se.deserialize(this.canvas, t).do();
+        re.deserialize(this.canvas, t).do();
         break;
       }
       default:
@@ -3345,7 +3345,7 @@ class Io {
     }
   }
 }
-class Ao {
+class $o {
   constructor(t, e) {
     this.canvas = t, this.maximum = e, this.history = [], this.index = 0;
   }
@@ -3398,12 +3398,12 @@ class Ao {
   }
 }
 var S = /* @__PURE__ */ ((i) => (i.AddConnection = "add-connection", i.AddNode = "add-node", i.AddSectionAction = "add-section", i.ApplyLayout = "apply-layout", i.Clipboard = "clipboard", i.ContextMenu = "context-menu", i.EditField = "edit-field", i.MoveNode = "move-node", i.Paste = "paste", i.Remove = "remove", i.StretchNode = "stretch-node", i.StretchSection = "stretch-section", i.UpdateValues = "update-values", i.Zoom = "zoom", i))(S || {});
-class xo {
+class Mo {
   constructor(t, e, o, a, l, s, n, r, c) {
     this.canvas = t, this.type = e, this.coords = o, this.parentId = a, this.ancestorId = l, this.fromAncestorGeometry = s, this.toAncestorGeometry = n, this.label = r, this.values = c, this.id = this.canvas.collabEngine.freshId();
   }
   do() {
-    const t = new ie(
+    const t = new se(
       this.canvas,
       this.id,
       this.type.id,
@@ -3413,7 +3413,7 @@ class xo {
       this.values
     );
     if (this.canvas.collabEngine.doCollaboratively(t), this.ancestorId !== void 0 && this.toAncestorGeometry !== void 0) {
-      const e = new nt(
+      const e = new rt(
         this.canvas,
         this.ancestorId,
         this.toAncestorGeometry,
@@ -3424,7 +3424,7 @@ class xo {
     return !0;
   }
   undo() {
-    const t = this.canvas.model.nodes.get(this.id), e = new dt(
+    const t = this.canvas.model.nodes.get(this.id), e = new ht(
       this.canvas,
       [this.id],
       [],
@@ -3435,7 +3435,7 @@ class xo {
       this.canvas.collabEngine.freshTimestamp()
     );
     if (this.canvas.collabEngine.doCollaboratively(e), this.ancestorId !== void 0 && this.fromAncestorGeometry !== void 0) {
-      const o = new nt(
+      const o = new rt(
         this.canvas,
         this.ancestorId,
         this.fromAncestorGeometry,
@@ -3446,7 +3446,7 @@ class xo {
     return t !== void 0;
   }
   redo() {
-    const t = this.canvas.model.nodes.get(this.id), e = new dt(
+    const t = this.canvas.model.nodes.get(this.id), e = new ht(
       this.canvas,
       [this.id],
       [],
@@ -3457,7 +3457,7 @@ class xo {
       this.canvas.collabEngine.freshTimestamp()
     );
     if (this.canvas.collabEngine.doCollaboratively(e), this.ancestorId !== void 0 && this.toAncestorGeometry !== void 0) {
-      const o = new nt(
+      const o = new rt(
         this.canvas,
         this.ancestorId,
         this.toAncestorGeometry,
@@ -3468,12 +3468,12 @@ class xo {
     return t === void 0;
   }
 }
-class ce {
+class he {
   constructor(t, e, o) {
     this.canvas = t, this.nodeIds = e, this.delta = o;
   }
   do() {
-    const t = new Ft(
+    const t = new Xt(
       this.canvas,
       this.nodeIds,
       this.delta,
@@ -3482,7 +3482,7 @@ class ce {
     return this.canvas.collabEngine.doCollaboratively(t), this.nodeIds.map((e) => this.canvas.model.nodes.get(e) !== void 0).includes(!0) && (this.delta[0] !== 0 || this.delta[1] !== 0);
   }
   undo() {
-    const t = new Ft(
+    const t = new Xt(
       this.canvas,
       this.nodeIds,
       [-this.delta[0], -this.delta[1]],
@@ -3501,14 +3501,14 @@ class J {
   do() {
     const t = this.canvas.model.nodes.get(this.nodeId);
     if (t) {
-      const e = new nt(
+      const e = new rt(
         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 o = new nt(
+        const o = new rt(
           this.canvas,
           this.ancestorId,
           this.toAncestorGeometry,
@@ -3523,14 +3523,14 @@ class J {
     const t = this.canvas.model.nodes.get(this.nodeId);
     if (t) {
       this.to = t.getGeometry();
-      const e = new nt(
+      const e = new rt(
         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 o = new nt(
+        const o = new rt(
           this.canvas,
           this.ancestorId,
           this.fromAncestorGeometry,
@@ -3545,7 +3545,7 @@ class J {
     const t = this.canvas.model.nodes.get(this.nodeId);
     if (t) {
       this.from = t.getGeometry();
-      const e = new nt(
+      const e = new rt(
         this.canvas,
         this.nodeId,
         this.to,
@@ -3556,12 +3556,12 @@ class J {
     return t !== void 0;
   }
 }
-class Lo {
+class No {
   constructor(t, e, o, a, l, s, n, r, c) {
     this.canvas = t, this.childId = e, this.fromParentId = o, this.toParentId = a, this.fromChildGeometry = l, this.toChildGeometry = s, this.ancestorId = n, this.fromAncestorGeometry = r, this.toAncestorGeometry = c;
   }
   do() {
-    const t = this.canvas.model.nodes.get(this.childId), e = new Ut(
+    const t = this.canvas.model.nodes.get(this.childId), e = new jt(
       this.canvas,
       this.childId,
       this.toParentId,
@@ -3569,7 +3569,7 @@ class Lo {
       this.canvas.collabEngine.freshTimestamp()
     );
     if (this.canvas.collabEngine.doCollaboratively(e), this.ancestorId !== void 0 && this.toAncestorGeometry !== void 0) {
-      const o = new nt(
+      const o = new rt(
         this.canvas,
         this.ancestorId,
         this.toAncestorGeometry,
@@ -3580,7 +3580,7 @@ class Lo {
     return t !== void 0;
   }
   undo() {
-    const t = this.canvas.model.nodes.get(this.childId), e = new Ut(
+    const t = this.canvas.model.nodes.get(this.childId), e = new jt(
       this.canvas,
       this.childId,
       this.fromParentId,
@@ -3588,7 +3588,7 @@ class Lo {
       this.canvas.collabEngine.freshTimestamp()
     );
     if (this.canvas.collabEngine.doCollaboratively(e), this.ancestorId !== void 0 && this.fromAncestorGeometry !== void 0) {
-      const o = new nt(
+      const o = new rt(
         this.canvas,
         this.ancestorId,
         this.fromAncestorGeometry,
@@ -3602,12 +3602,12 @@ class Lo {
     return this.do();
   }
 }
-class de {
+class ge {
   constructor(t, e, o, a) {
     this.canvas = t, this.type = e, this.startId = o, this.endId = a, this.id = this.canvas.collabEngine.freshId();
   }
   do() {
-    const t = new oe(
+    const t = new ne(
       this.canvas,
       this.id,
       this.type.id,
@@ -3617,7 +3617,7 @@ class de {
     return this.canvas.collabEngine.doCollaboratively(t), !0;
   }
   undo() {
-    const t = this.canvas.model.connections.get(this.id), e = new dt(
+    const t = this.canvas.model.connections.get(this.id), e = new ht(
       this.canvas,
       [],
       [],
@@ -3630,7 +3630,7 @@ class de {
     return this.canvas.collabEngine.doCollaboratively(e), t !== void 0;
   }
   redo() {
-    const t = this.canvas.model.connections.get(this.id), e = new dt(
+    const t = this.canvas.model.connections.get(this.id), e = new ht(
       this.canvas,
       [],
       [],
@@ -3643,12 +3643,12 @@ class de {
     return this.canvas.collabEngine.doCollaboratively(e), t === void 0;
   }
 }
-class di {
+class vi {
   constructor(t, e, o, a) {
     this.canvas = t, this.fieldId = e, this.from = o, this.to = a;
   }
   do() {
-    const t = this.canvas.model.fields.get(this.fieldId), e = new zt(
+    const t = this.canvas.model.fields.get(this.fieldId), e = new Rt(
       this.canvas,
       this.fieldId,
       this.to,
@@ -3660,7 +3660,7 @@ class di {
     const t = this.canvas.model.fields.get(this.fieldId);
     if (t) {
       this.to = t.text;
-      const e = new zt(
+      const e = new Rt(
         this.canvas,
         this.fieldId,
         this.from,
@@ -3674,7 +3674,7 @@ class di {
     const t = this.canvas.model.fields.get(this.fieldId);
     if (t) {
       this.from = t.text;
-      const e = new zt(
+      const e = new Rt(
         this.canvas,
         this.fieldId,
         this.to,
@@ -3685,12 +3685,12 @@ class di {
     return t !== void 0;
   }
 }
-class Eo {
+class Po {
   constructor(t, e, o, a) {
     this.canvas = t, this.id = e, this.from = o, this.to = a;
   }
   do() {
-    const t = new Rt(
+    const t = new Vt(
       this.canvas,
       this.id,
       this.to,
@@ -3699,7 +3699,7 @@ class Eo {
     return this.canvas.collabEngine.doCollaboratively(t), !0;
   }
   undo() {
-    const t = new Rt(
+    const t = new Vt(
       this.canvas,
       this.id,
       this.from,
@@ -3712,7 +3712,7 @@ class Eo {
     return !e.rootElement.removed;
   }
   redo() {
-    const t = new Rt(
+    const t = new Vt(
       this.canvas,
       this.id,
       this.to,
@@ -3725,7 +3725,7 @@ class Eo {
     return !e.rootElement.removed;
   }
 }
-class To {
+class zo {
   constructor(t, e, o, a, l, s) {
     this.canvas = t, this.nodeIds = e, this.sectionIds = o, this.portIds = a, this.connectionIds = l, this.fieldIds = s;
   }
@@ -3734,7 +3734,7 @@ class To {
       (o) => this.canvas.model.sections.get(o) !== void 0
     ).includes(!0) || this.portIds.map((o) => this.canvas.model.ports.get(o) !== void 0).includes(!0) || this.connectionIds.map(
       (o) => this.canvas.model.connections.get(o) !== void 0
-    ).includes(!0) || this.fieldIds.map((o) => this.canvas.model.fields.get(o) !== void 0).includes(!0), e = new dt(
+    ).includes(!0) || this.fieldIds.map((o) => this.canvas.model.fields.get(o) !== void 0).includes(!0), e = new ht(
       this.canvas,
       this.nodeIds,
       this.sectionIds,
@@ -3751,7 +3751,7 @@ class To {
       (o) => this.canvas.model.sections.get(o) === void 0
     ).includes(!0) || this.portIds.map((o) => this.canvas.model.ports.get(o) === void 0).includes(!0) || this.connectionIds.map(
       (o) => this.canvas.model.connections.get(o) === void 0
-    ).includes(!0) || this.fieldIds.map((o) => this.canvas.model.fields.get(o) === void 0).includes(!0), e = new dt(
+    ).includes(!0) || this.fieldIds.map((o) => this.canvas.model.fields.get(o) === void 0).includes(!0), e = new ht(
       this.canvas,
       this.nodeIds,
       this.sectionIds,
@@ -3767,7 +3767,7 @@ class To {
     return this.do();
   }
 }
-class $o {
+class Ro {
   constructor(t, e, o, a) {
     this.canvas = t, this.nodes = e, this.connections = o, this.coords = a;
   }
@@ -3793,7 +3793,10 @@ class $o {
               d.id.includes(l.id) ? d.id = d.id.replace(l.id, n) : d.id = this.canvas.collabEngine.freshId(), o[h] = d.id, e && (d.coords = [
                 d.coords[0] + e[0],
                 d.coords[1] + e[1]
-              ]);
+              ], d.connectionPoint && (d.connectionPoint = [
+                d.connectionPoint[0] + e[0],
+                d.connectionPoint[1] + e[1]
+              ]));
             }
         }
       if (l.ports)
@@ -3802,7 +3805,10 @@ class $o {
           r.id.includes(l.id) ? r.id = r.id.replace(l.id, n) : r.id = this.canvas.collabEngine.freshId(), o[c] = r.id, e && (r.coords = [
             r.coords[0] + e[0],
             r.coords[1] + e[1]
-          ]);
+          ], r.connectionPoint && (r.connectionPoint = [
+            r.connectionPoint[0] + e[0],
+            r.connectionPoint[1] + e[1]
+          ]));
         }
     }
     for (const l of this.connections) {
@@ -3814,7 +3820,7 @@ class $o {
             l.points[n][1] + e[1]
           ];
     }
-    const a = new se(
+    const a = new re(
       this.canvas,
       this.nodes,
       this.connections
@@ -3824,7 +3830,7 @@ class $o {
   undo() {
     const t = this.nodes.map((o) => this.canvas.model.nodes.get(o.id) !== void 0).includes(!0) || this.connections.map(
       (o) => this.canvas.model.connections.get(o.id) !== void 0
-    ).includes(!0), e = new dt(
+    ).includes(!0), e = new ht(
       this.canvas,
       this.nodes.map((o) => o.id),
       [],
@@ -3839,7 +3845,7 @@ class $o {
   redo() {
     const t = this.nodes.map((o) => this.canvas.model.nodes.get(o.id) === void 0).includes(!0) || this.connections.map(
       (o) => this.canvas.model.connections.get(o.id) === void 0
-    ).includes(!0), e = new dt(
+    ).includes(!0), e = new ht(
       this.canvas,
       this.nodes.map((o) => o.id),
       [],
@@ -3852,7 +3858,7 @@ class $o {
     return this.canvas.collabEngine.doCollaboratively(e), t;
   }
 }
-class ne {
+class ae {
   constructor(t) {
     this.type = t, this.defaultPrevented = !1;
   }
@@ -3860,8 +3866,8 @@ class ne {
     this.defaultPrevented = !0;
   }
 }
-var Ei = /* @__PURE__ */ ((i) => (i[i.DoubleClick = 0] = "DoubleClick", i[i.SecondaryClick = 1] = "SecondaryClick", i[i.Selection = 2] = "Selection", i[i.Highlight = 3] = "Highlight", i))(Ei || {});
-class kt extends ne {
+var zi = /* @__PURE__ */ ((i) => (i[i.DoubleClick = 0] = "DoubleClick", i[i.SecondaryClick = 1] = "SecondaryClick", i[i.Selection = 2] = "Selection", i[i.Highlight = 3] = "Highlight", i))(zi || {});
+class wt extends ae {
   /**
    * Create a diagram double click event.
    *
@@ -3876,7 +3882,7 @@ class kt extends ne {
     ), this.cause = t, this.target = e, this.coords = o;
   }
 }
-class wt extends ne {
+class Ct extends ae {
   /**
    * Create a diagram secondary click event.
    *
@@ -3891,7 +3897,7 @@ class wt extends ne {
     ), this.cause = t, this.target = e, this.coords = o;
   }
 }
-class F extends ne {
+class B extends ae {
   /**
    * Create a diagram selection event.
    *
@@ -3905,7 +3911,7 @@ class F extends ne {
     ), this.targets = t, this.selected = e;
   }
 }
-class ot extends ne {
+class ot extends ae {
   /**
    * Create a diagram highlight event.
    *
@@ -3918,7 +3924,7 @@ class ot extends ne {
     ), this.target = t;
   }
 }
-class Ti extends $t {
+class Ri extends Mt {
   constructor(t, e, o, a, l, s, n, r, c = "floating", d = "floating") {
     if (t.objects.get(r) !== void 0)
       throw new Error(`DiagramDecorator with id "${r}" already exists`);
@@ -3949,7 +3955,7 @@ class Ti extends $t {
     return this.priority;
   }
 }
-class Mo extends yt {
+class Vo extends bt {
   /**
    * Instance a set of decorators for the given model. This method is used internally.
    * @private
@@ -3969,7 +3975,7 @@ class Mo extends yt {
    * @returns The instanced decorator.
    */
   new(t, e, o, a, l, s, n, r = "floating", c = "floating") {
-    const d = new Ti(
+    const d = new Ri(
       this.model,
       t,
       e,
@@ -3988,7 +3994,7 @@ class Mo extends yt {
     e && ((e.rootElement instanceof O || e.rootElement instanceof X) && K(e.rootElement.decorators, e), super.remove(t), e.updateInView());
   }
 }
-class No extends $t {
+class _o extends Mt {
   constructor(t, e, o, a, l, s, n) {
     if (t.objects.get(n) !== void 0)
       throw new Error(`DiagramObject with id "${n}" already exists`);
@@ -4019,7 +4025,7 @@ class No extends $t {
     return this.priority;
   }
 }
-class Po extends yt {
+class Oo extends bt {
   /**
    * Instance a set of objects for the given model. This method is used internally.
    * @private
@@ -4039,7 +4045,7 @@ class Po extends yt {
    * @returns The instanced object.
    */
   new(t, e, o, a, l, s) {
-    const n = new No(
+    const n = new _o(
       this.model,
       t,
       e,
@@ -4055,9 +4061,9 @@ class Po extends yt {
     e && (super.remove(t), e.updateInView());
   }
 }
-class $i {
+class Vi {
   constructor(t, e, o, a, l, s = []) {
-    this.nodes = new vo(this), this.sections = new po(this), this.ports = new So(this), this.connections = new co(this), this.fields = new ho(this), this.objects = new Po(this), this.decorators = new Mo(this), this.canvas = t, this.id = e, this.name = o, this.description = a, this.type = l, this.createdAt = /* @__PURE__ */ new Date(), this.updatedAt = /* @__PURE__ */ new Date(), this.logicalClock = 0, this.valueSet = new St(new ee(s), this);
+    this.nodes = new Co(this), this.sections = new wo(this), this.ports = new Eo(this), this.connections = new fo(this), this.fields = new po(this), this.objects = new Oo(this), this.decorators = new Vo(this), this.canvas = t, this.id = e, this.name = o, this.description = a, this.type = l, this.createdAt = /* @__PURE__ */ new Date(), this.updatedAt = /* @__PURE__ */ new Date(), this.logicalClock = 0, this.valueSet = new It(new oe(s), this);
   }
   /**
    * Deletes everything in this diagram.
@@ -4068,7 +4074,7 @@ class $i {
     (t = this.canvas) == null || t.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(), (e = this.canvas) == null || e.updateModelInView();
   }
 }
-const Ct = (i) => !!i.button, he = (i, t, e, o, a, l, s, n) => Xi(
+const St = (i) => !!i.button, ue = (i, t, e, o, a, l, s, n) => Ji(
   i,
   [t, e],
   o,
@@ -4081,13 +4087,39 @@ const Ct = (i) => !!i.button, he = (i, t, e, o, a, l, s, n) => Xi(
   ) * l
 ), x = (i) => {
   i ? N.select("body").style("cursor", i) : N.select("body").style("cursor", P.Auto);
-}, ft = (i) => i instanceof O ? i : i instanceof X ? i.node || i : i.rootElement instanceof O || i.rootElement instanceof X || i.rootElement instanceof It ? ft(i.rootElement) : i, ge = (i) => {
+}, pt = (i) => i instanceof O ? i : i instanceof X ? i.node || i : i.rootElement instanceof O || i.rootElement instanceof X || i.rootElement instanceof At ? pt(i.rootElement) : i, me = (i) => {
   i.filter(".shaped-look").append("path"), i.filter(".image-look").append("image").attr("preserveAspectRatio", "none"), i.filter(".stretchable-image-look").append("image").attr("class", "top-left-image").attr("preserveAspectRatio", "none"), i.filter(".stretchable-image-look").append("image").attr("class", "top-image").attr("preserveAspectRatio", "none"), i.filter(".stretchable-image-look").append("image").attr("class", "top-right-image").attr("preserveAspectRatio", "none"), i.filter(".stretchable-image-look").append("image").attr("class", "left-image").attr("preserveAspectRatio", "none"), i.filter(".stretchable-image-look").append("image").attr("class", "center-image").attr("preserveAspectRatio", "none"), i.filter(".stretchable-image-look").append("image").attr("class", "right-image").attr("preserveAspectRatio", "none"), i.filter(".stretchable-image-look").append("image").attr("class", "bottom-left-image").attr("preserveAspectRatio", "none"), i.filter(".stretchable-image-look").append("image").attr("class", "bottom-image").attr("preserveAspectRatio", "none"), i.filter(".stretchable-image-look").append("image").attr("class", "bottom-right-image").attr("preserveAspectRatio", "none");
-}, ue = (i) => {
+}, Ft = {
+  fillColor: "#FFFFFF",
+  borderColor: "#000000",
+  borderThickness: 1,
+  borderStyle: Se.Solid
+}, fe = (i) => {
   i.filter(".shaped-look").select("path").attr(
     "d",
-    (t) => ve(t.look.shape, 0, 0, t.width, t.height)
-  ).attr("fill", (t) => t.look.fillColor).attr("stroke", (t) => t.look.borderColor).attr("stroke-width", (t) => `${t.look.borderThickness}px`), i.filter(".image-look").select("image").attr("x", 0).attr("y", 0).attr("width", (t) => t.width).attr("height", (t) => t.height).attr("href", (t) => t.look.backgroundImage), i.filter(".stretchable-image-look").select("image.top-left-image").attr("x", 0).attr("y", 0).attr("width", (t) => t.look.leftMargin).attr("height", (t) => t.look.topMargin).attr(
+    (t) => ke(
+      t.look.shape || _t.Rectangle,
+      0,
+      0,
+      t.width,
+      t.height
+    )
+  ).attr(
+    "fill",
+    (t) => t.look.fillColor || Ft.fillColor
+  ).attr(
+    "stroke",
+    (t) => t.look.borderColor || Ft.borderColor
+  ).attr(
+    "stroke-width",
+    (t) => `${t.look.borderThickness || Ft.borderThickness}px`
+  ).attr(
+    "stroke-dasharray",
+    (t) => be(
+      t.look.borderStyle || Ft.borderStyle,
+      t.look.borderThickness || Ft.borderThickness
+    )
+  ), i.filter(".image-look").select("image").attr("x", 0).attr("y", 0).attr("width", (t) => t.width).attr("height", (t) => t.height).attr("href", (t) => t.look.backgroundImage), i.filter(".stretchable-image-look").select("image.top-left-image").attr("x", 0).attr("y", 0).attr("width", (t) => t.look.leftMargin).attr("height", (t) => t.look.topMargin).attr(
     "href",
     (t) => t.look.backgroundImageTopLeft
   ), i.filter(".stretchable-image-look").select("image.top-image").attr("x", (t) => t.look.leftMargin).attr("y", 0).attr(
@@ -4124,13 +4156,13 @@ const Ct = (i) => !!i.button, he = (i, t, e, o, a, l, s, n) => Xi(
     "href",
     (t) => t.look.backgroundImageBottomRight
   );
-}, Ot = {
+}, Ht = {
   style: "dots",
   color: "rgba(0, 0, 0, 0.1)",
   snap: !1,
   spacing: 10,
   thickness: 0.05
-}, zo = (i, t, e) => {
+}, Do = (i, t, e) => {
   const o = t.append("defs");
   if (i.gridSize > 0 && isFinite(i.gridSize)) {
     const a = o.append("pattern").attr("id", e).attr("x", -i.gridSize / 2).attr("y", -i.gridSize / 2).attr("width", i.gridSize).attr("height", i.gridSize).attr("patternUnits", "userSpaceOnUse");
@@ -4150,17 +4182,17 @@ const Ct = (i) => !!i.button, he = (i, t, e, o, a, l, s, n) => Xi(
     }
     t.select("rect").attr("fill", `url(#${e})`);
   }
-}, ye = 96, Q = 32, Nt = ye + Q, Ro = Math.PI / 4, Vo = 100, hi = {
+}, we = 96, Q = 32, Pt = we + Q, Fo = Math.PI / 4, Ho = 100, yi = {
   customButtons: []
 };
-class _o {
+class Go {
   /**
    * Constructs a context menu object.
    * @public
    * @param canvas A canvas.
    */
   constructor(t, e) {
-    this.canvas = t, this.config = e || hi;
+    this.canvas = t, this.config = e || yi;
   }
   /**
    * Opens the context menu at the location determined by the given mouse event.
@@ -4169,7 +4201,7 @@ class _o {
    */
   open(t) {
     this.close();
-    const e = this.canvas.getPointerLocationRelativeToRoot(t), o = this.canvas.getPointerLocationRelativeToCanvas(t), a = this.canvas.selectSVGElement().append("foreignObject").attr("class", "daga-context-menu").attr("x", `${e[0] - Nt}px`).attr("y", `${e[1] - Nt}px`).attr("width", `${2 * Nt}px`).attr("height", `${2 * Nt}px`).style("pointer-events", "none").on(L.ContextMenu, (s) => {
+    const e = this.canvas.getPointerLocationRelativeToRoot(t), o = this.canvas.getPointerLocationRelativeToCanvas(t), a = this.canvas.selectSVGElement().append("foreignObject").attr("class", "daga-context-menu").attr("x", `${e[0] - Pt}px`).attr("y", `${e[1] - Pt}px`).attr("width", `${2 * Pt}px`).attr("height", `${2 * Pt}px`).style("pointer-events", "none").on(L.ContextMenu, (s) => {
       this.canvas.canUserPerformAction(S.ContextMenu) && (t.preventDefault(), this.open(s));
     }).on(L.Click, (s) => {
       s.preventDefault(), this.close();
@@ -4203,7 +4235,7 @@ class _o {
         s.userSelection.removeFromModel(), s.cancelAllUserActions();
       }
     });
-    for (const s of this.config.customButtons || hi.customButtons)
+    for (const s of this.config.customButtons || yi.customButtons)
       (s.condition === void 0 || s.condition(this.canvas)) && l.push(s);
     l.length === 0 && l.push({
       name: "NONE",
@@ -4211,7 +4243,7 @@ class _o {
       onPress: void 0
     });
     for (let s = 0; s < l.length; ++s) {
-      const n = l[s], r = n.onPress, c = (s + 0.5 - l.length / 2) * Ro, d = a.append("xhtml:div").attr(
+      const n = l[s], r = n.onPress, c = (s + 0.5 - l.length / 2) * Fo, d = a.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 * Q}px`).style("height", `${2 * Q}px`).style("border-radius", `${Q}px`).style("pointer-events", "auto").on(L.Click, (h) => {
@@ -4219,14 +4251,14 @@ class _o {
       }).on(L.KeyDown, (h) => {
         r && h.key === it.Enter && (h.preventDefault(), r(this.canvas));
       });
-      n.imageClass !== void 0 ? d.append("xhtml:div").style("position", "absolute").style("left", `${0.75 * Q}px`).style("top", `${0.5 * Q}px`).style("width", `${0.5 * Q}px`).style("height", `${0.5 * Q}px`).style("background-size", "contain").style("background-repeat", "no-repeat").attr("class", n.imageClass) : n.image !== void 0 && d.append("xhtml:img").style("position", "absolute").style("left", `${0.75 * Q}px`).style("top", `${0.5 * Q}px`).style("width", `${0.5 * Q}px`).style("height", `${0.5 * Q}px`).attr("src", n.image), d.append("xhtml:span").style("position", "absolute").style("left", `${0.2 * Q}px`).style("top", `${1.1 * Q}px`).style("text-align", "center").style("width", `${1.6 * Q}px`).style("height", `${0.35 * Q}px`).style("margin", "0").style("font-size", `${0.35 * Q}px`).style("font-weight", "700").style("user-select", "none").text(n.name), d.transition().ease(N.easeLinear).duration(Vo).tween("progress", () => (h) => {
+      n.imageClass !== void 0 ? d.append("xhtml:div").style("position", "absolute").style("left", `${0.75 * Q}px`).style("top", `${0.5 * Q}px`).style("width", `${0.5 * Q}px`).style("height", `${0.5 * Q}px`).style("background-size", "contain").style("background-repeat", "no-repeat").attr("class", n.imageClass) : n.image !== void 0 && d.append("xhtml:img").style("position", "absolute").style("left", `${0.75 * Q}px`).style("top", `${0.5 * Q}px`).style("width", `${0.5 * Q}px`).style("height", `${0.5 * Q}px`).attr("src", n.image), d.append("xhtml:span").style("position", "absolute").style("left", `${0.2 * Q}px`).style("top", `${1.1 * Q}px`).style("text-align", "center").style("width", `${1.6 * Q}px`).style("height", `${0.35 * Q}px`).style("margin", "0").style("font-size", `${0.35 * Q}px`).style("font-weight", "700").style("user-select", "none").text(n.name), d.transition().ease(N.easeLinear).duration(Ho).tween("progress", () => (h) => {
         const u = c * h;
         return d.style(
           "left",
-          `${Math.sin(u) * ye - Q + Nt}px`
+          `${Math.sin(u) * we - Q + Pt}px`
         ).style(
           "top",
-          `${-Math.cos(u) * ye - Q + Nt}px`
+          `${-Math.cos(u) * we - Q + Pt}px`
         );
       });
     }
@@ -4240,7 +4272,7 @@ class _o {
     (t = this.contextMenuContainer) == null || t.remove(), this.contextMenuContainer = void 0;
   }
 }
-class Oo extends yt {
+class Bo extends bt {
   /**
    * Constructs a user highlight object.
    * @public
@@ -4262,7 +4294,7 @@ class Oo extends yt {
    * @param element
    */
   focusOn(t) {
-    this.clear(), this.focus = t, (t instanceof pt || t instanceof Ti) && t.rootElement ? this.focusOn(t.rootElement) : this.add(t);
+    this.clear(), this.focus = t, (t instanceof vt || t instanceof Ri) && t.rootElement ? this.focusOn(t.rootElement) : this.add(t);
   }
   add(t) {
     if (super.add(t), t instanceof O) {
@@ -4284,7 +4316,7 @@ class Oo extends yt {
           super.add(e), this.canvas.updatePortsInView(e.id);
         t.label && (super.add(t.label), this.canvas.updateFieldsInView(t.label.id)), this.canvas.updateSectionsInView(t.id);
       }
-    else t instanceof It ? (t.label && (super.add(t.label), this.canvas.updateFieldsInView(t.label.id)), this.canvas.updatePortsInView(t.id)) : t instanceof gt && this.canvas.updateConnectionsInView(t.id);
+    else t instanceof At ? (t.label && (super.add(t.label), this.canvas.updateFieldsInView(t.label.id)), this.canvas.updatePortsInView(t.id)) : t instanceof ut && this.canvas.updateConnectionsInView(t.id);
   }
   clear() {
     for (; this.entities.length > 0; ) {
@@ -4294,13 +4326,13 @@ class Oo extends yt {
     this.focus = void 0;
   }
 }
-const Do = 1;
-class Mi {
+const Uo = 1;
+class _i {
   export(t, e = !1) {
     const o = {
       name: t.name,
       type: t.type,
-      typeVersion: Do,
+      typeVersion: Uo,
       createdAt: t.createdAt,
       updatedAt: t.updatedAt,
       nodes: [],
@@ -4334,8 +4366,8 @@ class Mi {
         p.push({
           id: f.id,
           type: (s = f.type) == null ? void 0 : s.id,
-          coords: Mt(f.coords),
-          connectionPoint: Mt(f.connectionPoint),
+          coords: Nt(f.coords),
+          connectionPoint: Nt(f.connectionPoint || f.coords),
           direction: f.direction,
           label: ((n = f.label) == null ? void 0 : n.text) || "",
           ...e ? {
@@ -4353,7 +4385,7 @@ class Mi {
         label: ((r = u.label) == null ? void 0 : r.text) || "",
         indexXInNode: u.indexXInNode,
         indexYInNode: u.indexYInNode,
-        coords: Mt(u.coords),
+        coords: Nt(u.coords),
         width: u.width,
         height: u.height,
         ...e ? {
@@ -4371,8 +4403,8 @@ class Mi {
       l.push({
         id: u.id,
         type: (c = u.type) == null ? void 0 : c.id,
-        coords: Mt(u.coords),
-        connectionPoint: Mt(u.connectionPoint),
+        coords: Nt(u.coords),
+        connectionPoint: Nt(u.connectionPoint || u.coords),
         direction: u.direction,
         label: ((d = u.label) == null ? void 0 : d.text) || "",
         ...e ? {
@@ -4391,7 +4423,7 @@ class Mi {
       sections: a,
       ports: l,
       label: ((h = t.label) == null ? void 0 : h.text) || "",
-      coords: Mt(t.coords),
+      coords: Nt(t.coords),
       width: t.width,
       height: t.height,
       data: t.valueSet.getValues(),
@@ -4440,20 +4472,20 @@ class Mi {
     } : {};
   }
 }
-const Ho = "Diagram properties";
-class Go extends yt {
+const Yo = "Diagram properties";
+class Xo extends bt {
   /**
    * Constructs a user selection object.
    * @public
    * @param canvas A canvas.
    */
   constructor(t) {
-    super(), this.canvas = t, this.canvas.propertyEditorChanges$.pipe(Hi(2e3)).subscribe(() => {
+    super(), this.canvas = t, this.canvas.propertyEditorChanges$.pipe(Xi(2e3)).subscribe(() => {
       this.makeUpdateValuesAction();
     });
   }
   add(t) {
-    if (!this.contains(t.id) && (this.length === 0 ? this.propertyEditorSelection === void 0 && (t instanceof O || t instanceof gt) ? this.openInPropertyEditor(t) : this.propertyEditorSelection === void 0 && t instanceof X ? this.openInPropertyEditor(t.node) : this.openInPropertyEditor(void 0) : this.openInPropertyEditor(void 0), super.add(t), t.updateInView(), t instanceof O && t.sections))
+    if (!this.contains(t.id) && (this.length === 0 ? this.propertyEditorSelection === void 0 && (t instanceof O || t instanceof ut) ? this.openInPropertyEditor(t) : this.propertyEditorSelection === void 0 && t instanceof X ? this.openInPropertyEditor(t.node) : this.openInPropertyEditor(void 0) : this.openInPropertyEditor(void 0), super.add(t), t.updateInView(), t instanceof O && t.sections))
       for (const e of t.sections)
         super.add(e), e.updateInView();
   }
@@ -4498,8 +4530,8 @@ class Go extends yt {
     if (this.length > 0) {
       const t = [], e = [], o = [], a = [], l = [];
       for (const n of this.all())
-        n instanceof O ? t.push(n.id) : n instanceof X ? e.push(n.id) : n instanceof It ? o.push(n.id) : n instanceof gt ? a.push(n.id) : n instanceof pt && l.push(n.id);
-      const s = new To(
+        n instanceof O ? t.push(n.id) : n instanceof X ? e.push(n.id) : n instanceof At ? o.push(n.id) : n instanceof ut ? a.push(n.id) : n instanceof vt && l.push(n.id);
+      const s = new zo(
         this.canvas,
         t,
         e,
@@ -4515,9 +4547,9 @@ class Go extends yt {
    * @public
    */
   copyToClipboard() {
-    const t = { type: "daga-user-selection", nodes: [], connections: [] }, e = new Mi();
+    const t = { type: "daga-user-selection", nodes: [], connections: [] }, e = new _i();
     for (const o of this.all())
-      o instanceof O && t.nodes.push(e.exportNode(o, !1)), o instanceof gt && t.connections.push(
+      o instanceof O && t.nodes.push(e.exportNode(o, !1)), o instanceof ut && t.connections.push(
         e.exportConnection(o, !1)
       );
     navigator.clipboard.writeText(JSON.stringify(t));
@@ -4539,7 +4571,7 @@ class Go extends yt {
         const o = JSON.parse(e);
         if (o.type !== "daga-user-selection")
           return;
-        const a = new $o(
+        const a = new Ro(
           this.canvas,
           o.nodes,
           o.connections,
@@ -4568,25 +4600,25 @@ class Go extends yt {
     const a = t == null ? void 0 : t.valueSet;
     a ? (this.propertyEditorSelection = t, e && (this.propertyEditorValues = structuredClone(
       a.getValues()
-    )), o && (t instanceof O || t instanceof gt ? (t instanceof O ? t.name ? o.title = `${t.type.name}: ${t.name}` : o.title = t.type.name : t instanceof gt && (o.title = t.type.name), o.valueSet = void 0, o.valueSet = a) : (o.title = Ho, o.valueSet = void 0, o.valueSet = a))) : (this.propertyEditorSelection = void 0, this.propertyEditorValues = void 0, o && (o.title = "", o.valueSet = void 0));
+    )), o && (t instanceof O || t instanceof ut ? (t instanceof O ? t.name ? o.title = `${t.type.name}: ${t.name}` : o.title = t.type.name : t instanceof ut && (o.title = t.type.name), o.valueSet = void 0, o.valueSet = a) : (o.title = Yo, o.valueSet = void 0, o.valueSet = a))) : (this.propertyEditorSelection = void 0, this.propertyEditorValues = void 0, o && (o.title = "", o.valueSet = void 0));
   }
   makeUpdateValuesAction() {
     var n, r, c;
     if (this.propertyEditorSelection === void 0 || this.propertyEditorValues === void 0)
       return;
-    const t = this.propertyEditorSelection instanceof $i ? void 0 : this.propertyEditorSelection.id;
-    if (Lt(
+    const t = this.propertyEditorSelection instanceof Vi ? void 0 : this.propertyEditorSelection.id;
+    if (Et(
       this.propertyEditorValues,
       (n = this.propertyEditorSelection) == null ? void 0 : n.valueSet.getValues()
     ))
       return;
     const e = this.propertyEditorValues, o = structuredClone(
       (r = this.propertyEditorSelection) == null ? void 0 : r.valueSet.getValues()
-    ), [a, l] = ki(
+    ), [a, l] = xi(
       e,
       o,
       (c = this.propertyEditorSelection) == null ? void 0 : c.valueSet
-    ), s = new Eo(
+    ), s = new Po(
       this.canvas,
       t,
       a,
@@ -4595,10 +4627,10 @@ class Go extends yt {
     s.do(), this.canvas.actionStack.add(s), this.propertyEditorValues = o;
   }
 }
-const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
-  const o = Bo(e), a = Math.sin(o), l = Math.cos(o), s = (Math.abs(i * l) - Math.abs(t * a)) / (l * l - a * a), n = (Math.abs(i * a) - Math.abs(t * l)) / (a * a - l * l);
+const jo = (i) => i * Math.PI / 180, bi = (i, t, e) => {
+  const o = jo(e), a = Math.sin(o), l = Math.cos(o), s = (Math.abs(i * l) - Math.abs(t * a)) / (l * l - a * a), n = (Math.abs(i * a) - Math.abs(t * l)) / (a * a - l * l);
   return [s, n];
-}, Fo = 12, B = 6, Uo = 25, me = "diagram-connection-unfinished", Jt = class Jt {
+}, Wo = 12, G = 6, Zo = 25, pe = "diagram-connection-unfinished", ee = class ee {
   /**
    * Constructs a canvas object.
    * @public
@@ -4606,22 +4638,22 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
    * @param config The configuration object used to set the parameters of this canvas.
    */
   constructor(t, e) {
-    var o, a, l, s, n, r, c, d, h, u, p, f, m, g, v, w, y, A, I, E, $, C, R, T, z, j, D, q, G;
-    if (this.backgroundPatternId = `daga-background-pattern-id-${Jt.canvasCount++}`, this.zoomTransform = N.zoomIdentity, this.draggingFrom = [0, 0], this.dragging = !1, this.secondaryButton = !1, this.validatorChange$ = new Xt(), this.diagramChange$ = new Xt(), this.diagramEvent$ = new Xt(), this.propertyEditorChanges$ = new Xt(), this.parentComponent = t, this.model = new $i(
+    var o, a, l, s, n, r, c, d, h, u, p, f, m, g, v, w, y, A, I, E, $, C, R, T, z, j, D, q, H;
+    if (this.backgroundPatternId = `daga-background-pattern-id-${ee.canvasCount++}`, this.zoomTransform = N.zoomIdentity, this.draggingFrom = [0, 0], this.dragging = !1, this.secondaryButton = !1, this.validatorChange$ = new Zt(), this.diagramChange$ = new Zt(), this.diagramEvent$ = new Zt(), this.propertyEditorChanges$ = new Zt(), this.parentComponent = t, this.model = new Vi(
       this,
       void 0,
       e.name || "unnamed",
       "",
       e.type || "",
       e.properties || []
-    ), this.userSelection = new Go(this), this.userHighlight = new Oo(
+    ), this.userSelection = new Xo(this), this.userHighlight = new Bo(
       this,
       ((o = e.canvas) == null ? void 0 : o.highlightSections) !== !1
-    ), this.contextMenu = new _o(this, (a = e.canvas) == null ? void 0 : a.contextMenu), this.backgroundColor = ((l = e.canvas) == null ? void 0 : l.backgroundColor) || "#FFFFFF", this.gridStyle = ((n = (s = e.canvas) == null ? void 0 : s.grid) == null ? void 0 : n.style) ?? Ot.style, this.gridSize = ((c = (r = e.canvas) == null ? void 0 : r.grid) == null ? void 0 : c.enabled) === !1 || ((d = e.canvas) == null ? void 0 : d.grid) === void 0 ? 0 : Math.abs(((u = (h = e.canvas) == null ? void 0 : h.grid) == null ? void 0 : u.spacing) || Ot.spacing), this.gridThickness = Math.abs(
-      ((f = (p = e.canvas) == null ? void 0 : p.grid) == null ? void 0 : f.thickness) || Ot.thickness
-    ), this.gridColor = ((g = (m = e.canvas) == null ? void 0 : m.grid) == null ? void 0 : g.color) || Ot.color, this.snapToGrid = ((w = (v = e.canvas) == null ? void 0 : v.grid) == null ? void 0 : w.enabled) === !1 || ((y = e.canvas) == null ? void 0 : y.grid) === void 0 ? !1 : ((I = (A = e.canvas) == null ? void 0 : A.grid) == null ? void 0 : I.snap) || Ot.snap, this.zoomFactor = ((E = e.canvas) == null ? void 0 : E.zoomFactor) || 2, this.panRate = (($ = e.canvas) == null ? void 0 : $.panRate) || 100, this.inferConnectionType = ((C = e.connectionSettings) == null ? void 0 : C.inferConnectionType) || !1, this.autoTightenConnections = ((R = e.connectionSettings) == null ? void 0 : R.autoTighten) !== !1, this.allowConnectionLoops = ((T = e.connectionSettings) == null ? void 0 : T.allowLoops) || !1, this.allowSharingPorts = ((z = e.connectionSettings) == null ? void 0 : z.sharePorts) !== !1, this.allowSharingBothPorts = ((j = e.connectionSettings) == null ? void 0 : j.shareBothPorts) || !1, this.portHighlightRadius = ((D = e.connectionSettings) == null ? void 0 : D.portHighlightRadius) || 100, this.multipleSelectionOn = !1, this.priorityThresholds = ((q = e.canvas) == null ? void 0 : q.priorityThresholds) || [], this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : void 0, this.layoutFormat = e.layoutFormat, this.userActions = e.userActions || {}, this.validators = [], this.actionStack = new Ao(this, Uo), this.collabEngine = new Io(this), e.nodeTypes)
+    ), this.contextMenu = new Go(this, (a = e.canvas) == null ? void 0 : a.contextMenu), this.backgroundColor = ((l = e.canvas) == null ? void 0 : l.backgroundColor) || "#FFFFFF", this.gridStyle = ((n = (s = e.canvas) == null ? void 0 : s.grid) == null ? void 0 : n.style) ?? Ht.style, this.gridSize = ((c = (r = e.canvas) == null ? void 0 : r.grid) == null ? void 0 : c.enabled) === !1 || ((d = e.canvas) == null ? void 0 : d.grid) === void 0 ? 0 : Math.abs(((u = (h = e.canvas) == null ? void 0 : h.grid) == null ? void 0 : u.spacing) || Ht.spacing), this.gridThickness = Math.abs(
+      ((f = (p = e.canvas) == null ? void 0 : p.grid) == null ? void 0 : f.thickness) || Ht.thickness
+    ), this.gridColor = ((g = (m = e.canvas) == null ? void 0 : m.grid) == null ? void 0 : g.color) || Ht.color, this.snapToGrid = ((w = (v = e.canvas) == null ? void 0 : v.grid) == null ? void 0 : w.enabled) === !1 || ((y = e.canvas) == null ? void 0 : y.grid) === void 0 ? !1 : ((I = (A = e.canvas) == null ? void 0 : A.grid) == null ? void 0 : I.snap) || Ht.snap, this.zoomFactor = ((E = e.canvas) == null ? void 0 : E.zoomFactor) || 2, this.panRate = (($ = e.canvas) == null ? void 0 : $.panRate) || 100, this.inferConnectionType = ((C = e.connectionSettings) == null ? void 0 : C.inferConnectionType) || !1, this.autoTightenConnections = ((R = e.connectionSettings) == null ? void 0 : R.autoTighten) !== !1, this.allowConnectionLoops = ((T = e.connectionSettings) == null ? void 0 : T.allowLoops) || !1, this.allowSharingPorts = ((z = e.connectionSettings) == null ? void 0 : z.sharePorts) !== !1, this.allowSharingBothPorts = ((j = e.connectionSettings) == null ? void 0 : j.shareBothPorts) || !1, this.portHighlightRadius = ((D = e.connectionSettings) == null ? void 0 : D.portHighlightRadius) || 100, this.multipleSelectionOn = !1, this.priorityThresholds = ((q = e.canvas) == null ? void 0 : q.priorityThresholds) || [], this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : void 0, this.layoutFormat = e.layoutFormat, this.userActions = e.userActions || {}, this.validators = [], this.actionStack = new $o(this, Zo), this.collabEngine = new To(this), e.nodeTypes)
       for (const Y of e.nodeTypes) {
-        const W = new Si({
+        const W = new Ti({
           ...e.nodeTypeDefaults,
           ...Y
         });
@@ -4629,7 +4661,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       }
     if (e.portTypes)
       for (const Y of e.portTypes) {
-        const W = new Co({
+        const W = new Lo({
           ...e.portTypeDefaults,
           ...Y
         });
@@ -4637,13 +4669,13 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       }
     if (e.connectionTypes) {
       for (const Y of e.connectionTypes) {
-        const W = new wi({
+        const W = new Li({
           ...e.connectionTypeDefaults,
           ...Y
         });
         this.model.connections.types.add(W);
       }
-      this._connectionType = ((G = e == null ? void 0 : e.connectionSettings) == null ? void 0 : G.defaultConnection) !== void 0 ? this.model.connections.types.get(
+      this._connectionType = ((H = e == null ? void 0 : e.connectionSettings) == null ? void 0 : H.defaultConnection) !== void 0 ? this.model.connections.types.get(
         e.connectionSettings.defaultConnection
       ) : void 0;
     }
@@ -4685,10 +4717,10 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         a.preventDefault(), a.stopPropagation(), this.dragging = !1;
         return;
       }
-      const l = new wt(a, null);
+      const l = new Ct(a, null);
       this.diagramEvent$.next(l), !l.defaultPrevented && this.canUserPerformAction(S.ContextMenu) && (a.preventDefault(), this.contextMenu.open(a));
     }).on(L.DoubleClick, (a) => {
-      const l = new kt(a, null);
+      const l = new wt(a, null);
       this.diagramEvent$.next(l);
     }).on(L.KeyDown, (a) => {
       if (!a.ctrlKey && (a.key === it.Delete || a.key === it.Backspace) && this.canUserPerformAction(S.Remove) && (this.userSelection.removeFromModel(), this.cancelAllUserActions()), a.ctrlKey && a.key === "a") {
@@ -4698,7 +4730,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         for (const l of this.model.connections)
           this.userSelection.add(l);
         this.diagramEvent$.next(
-          new F(this.userSelection.all(), !0)
+          new B(this.userSelection.all(), !0)
         );
       }
       if (a.ctrlKey && a.key === "i") {
@@ -4709,9 +4741,9 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         for (const n of this.model.connections)
           this.userSelection.toggle(n), n.selected ? l.push(n) : s.push(n);
         l.length > 0 && this.diagramEvent$.next(
-          new F(l, !0)
+          new B(l, !0)
         ), s.length > 0 && this.diagramEvent$.next(
-          new F(s, !1)
+          new B(s, !1)
         );
       }
       if (a.ctrlKey && a.key === "c" && this.canUserPerformAction(S.Clipboard) && (a.preventDefault(), this.userSelection.copyToClipboard(), this.cancelAllUserActions()), a.ctrlKey && a.key === "x" && this.canUserPerformAction(S.Clipboard) && this.canUserPerformAction(S.Remove) && (a.preventDefault(), this.userSelection.cutToClipboard(), this.cancelAllUserActions()), a.ctrlKey && a.key === "v" && this.canUserPerformAction(S.Paste)) {
@@ -4728,7 +4760,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
     });
     const o = this.selectSVGElement().append("g").attr("class", "daga-canvas-view").attr("width", "100%").attr("height", "100%");
     o.call(
-      this.zoomBehavior = N.zoom().filter((a) => a.type !== L.DoubleClick).on(fe.Zoom, (a) => {
+      this.zoomBehavior = N.zoom().filter((a) => a.type !== L.DoubleClick).on(ve.Zoom, (a) => {
         if (a.sourceEvent) {
           if (!this.canUserPerformAction(S.Zoom)) {
             x(P.NotAllowed);
@@ -4742,7 +4774,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
           "patternTransform",
           l
         ), this.contextMenu.close();
-      }).on(fe.End, () => {
+      }).on(ve.End, () => {
         x();
       })
     ), o.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("fill", this.backgroundColor).attr("stroke-width", "0").on(L.MouseMove, (a) => {
@@ -4756,18 +4788,21 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       if (this.userHighlight.size() > 0 && (this.userHighlight.clear(), this.diagramEvent$.next(new ot(null))), this.contextMenu.close(), this.userSelection.size() > 0) {
         const a = this.userSelection.all();
         this.userSelection.clear(), this.diagramEvent$.next(
-          new F(a, !1)
+          new B(a, !1)
         ), this.userSelection.openInPropertyEditor(this.model);
       }
     }).call(
-      N.drag().filter((a) => this.multipleSelectionOn || Ct(a)).on(M.Start, (a) => {
+      N.drag().filter((a) => this.multipleSelectionOn || St(a)).on(M.Start, (a) => {
         this.startMultipleSelection(a);
       }).on(M.Drag, (a) => {
         this.continueMultipleSelection(a);
       }).on(M.End, (a) => {
         this.finishMultipleSelection(a);
       })
-    ), zo(this, o, this.backgroundPatternId), o.append("g").attr("class", "daga-canvas-elements");
+    ), Do(this, o, this.backgroundPatternId), o.append("g").attr("class", "daga-canvas-elements");
+  }
+  getZoomLevel() {
+    return this.zoomTransform.k;
   }
   zoomBy(t) {
     isNaN(t) || this.zoomBehavior.scaleBy(this.selectCanvasView(), t);
@@ -4775,6 +4810,9 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
   zoomTo(t) {
     isNaN(t) || this.zoomBehavior.scaleTo(this.selectCanvasView(), t);
   }
+  getViewCoordinates() {
+    return [this.zoomTransform.x, this.zoomTransform.y];
+  }
   translateBy(t, e) {
     !isNaN(t) && !isNaN(e) && this.zoomBehavior.translateBy(this.selectCanvasView(), t, e);
   }
@@ -4875,31 +4913,31 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       if (!s.ctrlKey && !s.shiftKey) {
         const r = this.userSelection.all();
         this.userSelection.clear(), this.diagramEvent$.next(
-          new F(r, !1)
+          new B(r, !1)
         );
       }
-      this.userSelection.toggle(n), this.diagramEvent$.next(new F([n], n.selected));
+      this.userSelection.toggle(n), this.diagramEvent$.next(new B([n], n.selected));
     }).on(L.ContextMenu, (s, n) => {
       if (this.dragging) {
         s.preventDefault(), s.stopPropagation(), this.dragging = !1;
         return;
       }
-      const r = new wt(s, n);
-      this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(S.ContextMenu) && (s.preventDefault(), this.userHighlight.focusOn(n), this.diagramEvent$.next(new ot(n)), this.userSelection.add(n), this.diagramEvent$.next(new F([n], !0)), this.contextMenu.open(s));
+      const r = new Ct(s, n);
+      this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(S.ContextMenu) && (s.preventDefault(), this.userHighlight.focusOn(n), this.diagramEvent$.next(new ot(n)), this.userSelection.add(n), this.diagramEvent$.next(new B([n], !0)), this.contextMenu.open(s));
     }).on(L.DoubleClick, (s, n) => {
-      const r = new kt(s, n);
+      const r = new wt(s, n);
       this.diagramEvent$.next(r);
     }).call(
-      N.drag().filter((s) => (this.secondaryButton = Ct(s), !0)).on(M.Start, (s, n) => {
+      N.drag().filter((s) => (this.secondaryButton = St(s), !0)).on(M.Start, (s, n) => {
         this.multipleSelectionOn || this.secondaryButton ? this.startMultipleSelection(s) : this.startMovingNode(s, n);
       }).on(M.Drag, (s, n) => {
         this.multipleSelectionOn || this.secondaryButton ? this.continueMultipleSelection(s) : this.continueMovingNode(s, n);
       }).on(M.End, (s, n) => {
         this.multipleSelectionOn || this.secondaryButton ? this.finishMultipleSelection(s) : this.finishMovingNode(s, n), this.secondaryButton = !1;
       })
-    ), ge(
+    ), me(
       a
-    ), a.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", `${B}px`).on(L.MouseOver, (s, n) => {
+    ), a.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(L.MouseOver, (s, n) => {
       this.canUserPerformAction(S.StretchNode) && n.type.resizableX && !n.removed && x(P.EWResize);
     }).on(L.MouseOut, (s, n) => {
       this.canUserPerformAction(S.StretchNode) && n.type.resizableX && !n.removed && x();
@@ -4924,7 +4962,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         }
         x();
       })
-    ), a.filter(".resizable-y").append("line").attr("class", "top-resizer").attr("stroke", "transparent").attr("stroke-width", `${B}px`).on(L.MouseOver, (s, n) => {
+    ), a.filter(".resizable-y").append("line").attr("class", "top-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(L.MouseOver, (s, n) => {
       this.canUserPerformAction(S.StretchNode) && n.type.resizableY && !n.removed && x(P.NSResize);
     }).on(L.MouseOut, (s, n) => {
       this.canUserPerformAction(S.StretchNode) && n.type.resizableY && !n.removed && x();
@@ -4949,7 +4987,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         }
         x();
       })
-    ), a.filter(".resizable-x").append("line").attr("class", "right-resizer").attr("stroke", "transparent").attr("stroke-width", `${B}px`).on(L.MouseOver, (s, n) => {
+    ), a.filter(".resizable-x").append("line").attr("class", "right-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(L.MouseOver, (s, n) => {
       this.canUserPerformAction(S.StretchNode) && n.type.resizableX && !n.removed && x(P.EWResize);
     }).on(L.MouseOut, (s, n) => {
       this.canUserPerformAction(S.StretchNode) && n.type.resizableX && !n.removed && x();
@@ -4974,7 +5012,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         }
         x();
       })
-    ), a.filter(".resizable-y").append("line").attr("class", "bottom-resizer").attr("stroke", "transparent").attr("stroke-width", `${B}px`).on(L.MouseOver, (s, n) => {
+    ), a.filter(".resizable-y").append("line").attr("class", "bottom-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(L.MouseOver, (s, n) => {
       this.canUserPerformAction(S.StretchNode) && n.type.resizableY && !n.removed && x(P.NSResize);
     }).on(L.MouseOut, (s, n) => {
       this.canUserPerformAction(S.StretchNode) && n.type.resizableY && !n.removed && x();
@@ -5005,9 +5043,9 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         }
         x();
       })
-    ), l.attr("transform", (s) => `translate(${s.coords[0]},${s.coords[1]})`).attr("opacity", (s) => s.removed ? 0.5 : 1), ue(
+    ), l.attr("transform", (s) => `translate(${s.coords[0]},${s.coords[1]})`).attr("opacity", (s) => s.removed ? 0.5 : 1), fe(
       l
-    ), l.filter(".resizable-x").select("line.left-resizer").attr("x1", B / 2).attr("x2", B / 2).attr("y1", 0).attr("y2", (s) => s.height), l.filter(".resizable-y").select("line.top-resizer").attr("x1", 0).attr("x2", (s) => s.width).attr("y1", B / 2).attr("y2", B / 2), l.filter(".resizable-x").select("line.right-resizer").attr("x1", (s) => s.width - B / 2).attr("x2", (s) => s.width - B / 2).attr("y1", 0).attr("y2", (s) => s.height), l.filter(".resizable-y").select("line.bottom-resizer").attr("x1", 0).attr("x2", (s) => s.width).attr("y1", (s) => s.height - B / 2).attr("y2", (s) => s.height - B / 2);
+    ), l.filter(".resizable-x").select("line.left-resizer").attr("x1", G / 2).attr("x2", G / 2).attr("y1", 0).attr("y2", (s) => s.height), l.filter(".resizable-y").select("line.top-resizer").attr("x1", 0).attr("x2", (s) => s.width).attr("y1", G / 2).attr("y2", G / 2), l.filter(".resizable-x").select("line.right-resizer").attr("x1", (s) => s.width - G / 2).attr("x2", (s) => s.width - G / 2).attr("y1", 0).attr("y2", (s) => s.height), l.filter(".resizable-y").select("line.bottom-resizer").attr("x1", 0).attr("x2", (s) => s.width).attr("y1", (s) => s.height - G / 2).attr("y2", (s) => s.height - G / 2);
   }
   updateSectionsInView(...t) {
     let e = this.selectCanvasElements().selectAll("g.diagram-section").data(
@@ -5031,12 +5069,12 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       if (!s.ctrlKey && !s.shiftKey) {
         const c = this.userSelection.all();
         this.userSelection.clear(), this.diagramEvent$.next(
-          new F(c, !1)
+          new B(c, !1)
         );
       }
-      const r = ft(n);
+      const r = pt(n);
       this.userSelection.toggle(r), this.diagramEvent$.next(
-        new F(
+        new B(
           [r],
           r.selected
         )
@@ -5046,19 +5084,19 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         s.preventDefault(), s.stopPropagation(), this.dragging = !1;
         return;
       }
-      const r = new wt(s, n);
+      const r = new Ct(s, n);
       if (this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(S.ContextMenu)) {
         s.preventDefault();
-        const c = ft(n);
+        const c = pt(n);
         this.userHighlight.focusOn(c), this.diagramEvent$.next(new ot(c)), this.userSelection.add(c), this.diagramEvent$.next(
-          new F([c], !0)
+          new B([c], !0)
         ), this.contextMenu.open(s);
       }
     }).on(L.DoubleClick, (s, n) => {
-      const r = new kt(s, n);
+      const r = new wt(s, n);
       this.diagramEvent$.next(r);
     }).call(
-      N.drag().filter((s) => (this.secondaryButton = Ct(s), !0)).on(M.Start, (s, n) => {
+      N.drag().filter((s) => (this.secondaryButton = St(s), !0)).on(M.Start, (s, n) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.startMultipleSelection(s);
         else {
@@ -5081,9 +5119,9 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         }
         this.secondaryButton = !1;
       })
-    ), ge(
+    ), me(
       a
-    ), a.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", `${B}px`).on(L.MouseOver, (s, n) => {
+    ), a.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(L.MouseOver, (s, n) => {
       this.canUserPerformAction(S.StretchSection) && n.getResizableX() && !n.removed && x(P.EWResize);
     }).on(L.MouseOut, (s, n) => {
       this.canUserPerformAction(S.StretchSection) && n.getResizableX() && !n.removed && x();
@@ -5118,7 +5156,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         }
         x();
       })
-    ), a.filter(".resizable-y").append("line").attr("class", "top-resizer").attr("stroke", "transparent").attr("stroke-width", `${B}px`).on(L.MouseOver, (s, n) => {
+    ), a.filter(".resizable-y").append("line").attr("class", "top-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(L.MouseOver, (s, n) => {
       this.canUserPerformAction(S.StretchSection) && n.getResizableY() && !n.removed && x(P.NSResize);
     }).on(L.MouseOut, (s, n) => {
       this.canUserPerformAction(S.StretchSection) && n.getResizableY() && !n.removed && x();
@@ -5153,7 +5191,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         }
         x();
       })
-    ), a.filter(".resizable-x").append("line").attr("class", "right-resizer").attr("stroke", "transparent").attr("stroke-width", `${B}px`).on(L.MouseOver, (s, n) => {
+    ), a.filter(".resizable-x").append("line").attr("class", "right-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(L.MouseOver, (s, n) => {
       this.canUserPerformAction(S.StretchSection) && n.getResizableX() && !n.removed && x(P.EWResize);
     }).on(L.MouseOut, (s, n) => {
       this.canUserPerformAction(S.StretchSection) && n.getResizableX() && !n.removed && x();
@@ -5188,7 +5226,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         }
         x();
       })
-    ), a.filter(".resizable-y").append("line").attr("class", "bottom-resizer").attr("stroke", "transparent").attr("stroke-width", `${B}px`).on(L.MouseOver, (s, n) => {
+    ), a.filter(".resizable-y").append("line").attr("class", "bottom-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(L.MouseOver, (s, n) => {
       this.canUserPerformAction(S.StretchSection) && n.getResizableY() && !n.removed && x(P.NSResize);
     }).on(L.MouseOut, (s, n) => {
       this.canUserPerformAction(S.StretchSection) && n.getResizableY() && !n.removed && x();
@@ -5223,9 +5261,9 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         }
         x();
       })
-    ), l.attr("transform", (s) => `translate(${s.coords[0]},${s.coords[1]})`).attr("opacity", (s) => s.removed ? 0.5 : 1), ue(
+    ), l.attr("transform", (s) => `translate(${s.coords[0]},${s.coords[1]})`).attr("opacity", (s) => s.removed ? 0.5 : 1), fe(
       l
-    ), l.filter(".resizable-x").select("line.left-resizer").attr("x1", B / 2).attr("x2", B / 2).attr("y1", 0).attr("y2", (s) => s.height), l.filter(".resizable-y").select("line.top-resizer").attr("x1", 0).attr("x2", (s) => s.width).attr("y1", B / 2).attr("y2", B / 2), l.filter(".resizable-x").select("line.right-resizer").attr("x1", (s) => s.width - B / 2).attr("x2", (s) => s.width - B / 2).attr("y1", 0).attr("y2", (s) => s.height), l.filter(".resizable-y").select("line.bottom-resizer").attr("x1", 0).attr("x2", (s) => s.width).attr("y1", (s) => s.height - B / 2).attr("y2", (s) => s.height - B / 2);
+    ), l.filter(".resizable-x").select("line.left-resizer").attr("x1", G / 2).attr("x2", G / 2).attr("y1", 0).attr("y2", (s) => s.height), l.filter(".resizable-y").select("line.top-resizer").attr("x1", 0).attr("x2", (s) => s.width).attr("y1", G / 2).attr("y2", G / 2), l.filter(".resizable-x").select("line.right-resizer").attr("x1", (s) => s.width - G / 2).attr("x2", (s) => s.width - G / 2).attr("y1", 0).attr("y2", (s) => s.height), l.filter(".resizable-y").select("line.bottom-resizer").attr("x1", 0).attr("x2", (s) => s.width).attr("y1", (s) => s.height - G / 2).attr("y2", (s) => s.height - G / 2);
   }
   updatePortsInView(...t) {
     let e = this.selectCanvasElements().selectAll("g.diagram-port").data(
@@ -5258,12 +5296,12 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       if (!s.ctrlKey && !s.shiftKey) {
         const c = this.userSelection.all();
         this.userSelection.clear(), this.diagramEvent$.next(
-          new F(c, !1)
+          new B(c, !1)
         );
       }
-      const r = ft(n);
+      const r = pt(n);
       this.userSelection.toggle(r), this.diagramEvent$.next(
-        new F(
+        new B(
           [r],
           r.selected
         )
@@ -5273,19 +5311,19 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         s.preventDefault(), s.stopPropagation(), this.dragging = !1;
         return;
       }
-      const r = new wt(s, n);
+      const r = new Ct(s, n);
       if (this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(S.ContextMenu)) {
         s.preventDefault();
-        const c = ft(n);
+        const c = pt(n);
         this.userHighlight.focusOn(c), this.diagramEvent$.next(new ot(c)), this.userSelection.add(c), this.diagramEvent$.next(
-          new F([c], !0)
+          new B([c], !0)
         ), this.contextMenu.open(s);
       }
     }).on(L.DoubleClick, (s, n) => {
-      const r = new kt(s, n);
+      const r = new wt(s, n);
       this.diagramEvent$.next(r);
     }).call(
-      N.drag().filter((s) => (this.secondaryButton = Ct(s), !0)).on(M.Start, (s, n) => {
+      N.drag().filter((s) => (this.secondaryButton = St(s), !0)).on(M.Start, (s, n) => {
         this.multipleSelectionOn || this.secondaryButton ? this.startMultipleSelection(s) : this.canUserPerformAction(S.AddConnection) && (this.allowSharingPorts || n.incomingConnections.length === 0 && n.outgoingConnections.length === 0) && !n.removed ? (x(P.Grabbing), this.startConnection(n), this.unfinishedConnection && (this.unfinishedConnectionTracer = this.selectCanvasElements().append("path").attr("stroke", "none").attr("fill", "none"))) : x(P.NotAllowed);
       }).on(M.Drag, (s, n) => {
         var r, c, d, h;
@@ -5295,13 +5333,13 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
           const u = [s.x, s.y];
           (d = this.unfinishedConnectionTracer) == null || d.attr(
             "d",
-            he(
-              this.unfinishedConnection.look.shape,
+            ue(
+              this.unfinishedConnection.look.shape || st.look.shape,
               this.unfinishedConnection.startCoords,
               u,
               this.unfinishedConnection.startDirection,
               this.unfinishedConnection.endDirection,
-              this.unfinishedConnection.look.thickness,
+              this.unfinishedConnection.look.thickness || st.look.thickness,
               (r = this.unfinishedConnection.startMarkerLook) == null ? void 0 : r.width,
               (c = this.unfinishedConnection.endMarkerLook) == null ? void 0 : c.width
             )
@@ -5320,7 +5358,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
             ];
           } else
             this.unfinishedConnection.endCoords = u;
-          if (this.updateConnectionsInView(me), this.model.ports.length > 0) {
+          if (this.updateConnectionsInView(pe), this.model.ports.length > 0) {
             const f = this.getPointerLocationRelativeToCanvas(s);
             let m = Number.POSITIVE_INFINITY, g;
             for (const v of this.model.ports) {
@@ -5338,11 +5376,11 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
           if (this.canUserPerformAction(S.AddConnection) && !n.removed) {
             (r = this.unfinishedConnectionTracer) == null || r.remove();
             const c = this.userHighlight.getFocus();
-            if (c instanceof It)
+            if (c instanceof At)
               this.finishConnection(c);
-            else if (c instanceof pt && c.rootElement instanceof It)
+            else if (c instanceof vt && c.rootElement instanceof At)
               this.finishConnection(c.rootElement);
-            else if (c instanceof O || c instanceof X || c instanceof pt) {
+            else if (c instanceof O || c instanceof X || c instanceof vt) {
               let d;
               if (c instanceof O || c instanceof X)
                 d = c;
@@ -5364,12 +5402,12 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         }
         this.secondaryButton = !1;
       })
-    ), a.filter(".image-look").append("image"), ge(
+    ), a.filter(".image-look").append("image"), me(
       a
     ), l.attr(
       "transform",
       (s) => `translate(${s.coords[0] - s.width / 2},${s.coords[1] - s.width / 2})`
-    ).attr("opacity", (s) => s.removed ? 0.5 : 1), ue(
+    ).attr("opacity", (s) => s.removed ? 0.5 : 1), fe(
       l
     );
   }
@@ -5388,22 +5426,22 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       if (!n.ctrlKey && !n.shiftKey) {
         const c = this.userSelection.all();
         this.userSelection.clear(), this.diagramEvent$.next(
-          new F(c, !1)
+          new B(c, !1)
         );
       }
-      this.userSelection.toggle(r), this.diagramEvent$.next(new F([r], r.selected));
+      this.userSelection.toggle(r), this.diagramEvent$.next(new B([r], r.selected));
     }).on(L.ContextMenu, (n, r) => {
       if (this.dragging) {
         n.preventDefault(), n.stopPropagation(), this.dragging = !1;
         return;
       }
-      const c = new wt(n, r);
-      this.diagramEvent$.next(c), !c.defaultPrevented && this.canUserPerformAction(S.ContextMenu) && (n.preventDefault(), this.userHighlight.focusOn(r), this.diagramEvent$.next(new ot(r)), this.userSelection.add(r), this.diagramEvent$.next(new F([r], !0)), this.contextMenu.open(n));
+      const c = new Ct(n, r);
+      this.diagramEvent$.next(c), !c.defaultPrevented && this.canUserPerformAction(S.ContextMenu) && (n.preventDefault(), this.userHighlight.focusOn(r), this.diagramEvent$.next(new ot(r)), this.userSelection.add(r), this.diagramEvent$.next(new B([r], !0)), this.contextMenu.open(n));
     }).on(L.DoubleClick, (n, r) => {
-      const c = new kt(n, r);
+      const c = new wt(n, r);
       this.diagramEvent$.next(c);
     }).call(
-      N.drag().filter((n) => (this.secondaryButton = Ct(n), !0)).on(M.Start, (n) => {
+      N.drag().filter((n) => (this.secondaryButton = St(n), !0)).on(M.Start, (n) => {
         this.startMultipleSelection(n);
       }).on(M.Drag, (n) => {
         this.continueMultipleSelection(n);
@@ -5414,41 +5452,50 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       "d",
       (n) => {
         var r, c;
-        return he(
-          n.look.shape,
+        return ue(
+          n.look.shape || st.look.shape,
           n.startCoords,
           n.endCoords,
           n.startDirection,
           n.endDirection,
-          n.look.thickness,
+          n.look.thickness || st.look.thickness,
           (r = n.startMarkerLook) == null ? void 0 : r.width,
           (c = n.endMarkerLook) == null ? void 0 : c.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).attr("stroke-width", (n) => `${n.look.thickness}px`).attr(
+    ).attr("marker-start", (n) => `url(#${n.id}-start-marker)`).attr("marker-end", (n) => `url(#${n.id}-end-marker)`).attr(
+      "stroke",
+      (n) => n.look.color || st.look.color
+    ).attr("stroke-width", (n) => `${n.look.thickness}px`).attr(
       "stroke-dasharray",
-      (n) => oi(n.look.style, n.look.thickness)
+      (n) => be(
+        n.look.style || st.look.style,
+        n.look.thickness || st.look.thickness
+      )
     ).attr("fill", "none"), s.select("path.diagram-connection-path-box").attr(
       "d",
       (n) => {
         var r, c;
-        return he(
-          n.look.shape,
+        return ue(
+          n.look.shape || st.look.shape,
           n.startCoords,
           n.endCoords,
           n.startDirection,
           n.endDirection,
-          n.look.thickness,
+          n.look.thickness || st.look.thickness,
           (r = n.startMarkerLook) == null ? void 0 : r.width,
           (c = n.endMarkerLook) == null ? void 0 : c.width
         );
       }
     ).attr("stroke", "transparent").attr("pointer-events", "stroke").attr(
       "stroke-width",
-      (n) => `${n.look.thickness + Fo}px`
+      (n) => `${(n.look.thickness || st.look.thickness) + Wo}px`
     ).attr(
       "stroke-dasharray",
-      (n) => oi(n.look.style, n.look.thickness)
+      (n) => be(
+        n.look.style || st.look.style,
+        n.look.thickness || st.look.thickness
+      )
     ).attr("fill", "none"), s.data().forEach((n) => {
       this.updateConnectionLabelsInView(n), this.updateConnectionMarkersInView(n);
     });
@@ -5471,12 +5518,12 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       if (!s.ctrlKey && !s.shiftKey) {
         const c = this.userSelection.all();
         this.userSelection.clear(), this.diagramEvent$.next(
-          new F(c, !1)
+          new B(c, !1)
         );
       }
-      const r = ft(n);
+      const r = pt(n);
       this.userSelection.toggle(r), this.diagramEvent$.next(
-        new F(
+        new B(
           [r],
           r.selected
         )
@@ -5486,32 +5533,32 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         s.preventDefault(), s.stopPropagation(), this.dragging = !1;
         return;
       }
-      const r = new wt(s, n);
+      const r = new Ct(s, n);
       if (this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(S.ContextMenu)) {
         s.preventDefault();
-        const c = ft(n);
+        const c = pt(n);
         this.userHighlight.focusOn(c), this.diagramEvent$.next(new ot(c)), this.userSelection.add(c), this.diagramEvent$.next(
-          new F([c], !0)
+          new B([c], !0)
         ), this.contextMenu.open(s);
       }
     }).on(L.DoubleClick, (s, n) => {
-      const r = new kt(s, n);
-      this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(S.EditField) && n.editable && !n.removed && (this.currentAction = new di(this, n.id, n.text, ""), this.createInputField(
+      const r = new wt(s, n);
+      this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(S.EditField) && n.editable && !n.removed && (this.currentAction = new vi(this, n.id, n.text, ""), this.createInputField(
         n.text,
         n.coords,
         n.width,
         n.height,
         n.fontSize,
-        n.fontFamily || H.fontFamily,
+        n.fontFamily || F.fontFamily,
         n.orientation,
         (c) => {
         },
         (c) => {
-          n.text = c, this.currentAction instanceof di && (this.currentAction.to = c, this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0);
+          n.text = c, this.currentAction instanceof vi && (this.currentAction.to = c, this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0);
         }
       ));
     }).call(
-      N.drag().filter((s) => (this.secondaryButton = Ct(s), !0)).on(M.Start, (s, n) => {
+      N.drag().filter((s) => (this.secondaryButton = St(s), !0)).on(M.Start, (s, n) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.startMultipleSelection(s);
         else {
@@ -5536,19 +5583,19 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       })
     ).append("xhtml:div").style("width", "100%").style("height", "100%").style("display", "flex").append("xhtml:p").style("box-sizing", "border-box").style("outline", 0).style("margin", 0).style("border", 0).style("padding", 0).style("user-select", "none").style("font-kerning", "none").style("white-space", "nowrap"), l.attr("x", 0).attr("y", 0).attr("width", (s) => `${s.width}px`).attr("height", (s) => `${s.height}px`).attr("transform", (s) => `translate(${s.coords[0]},${s.coords[1]})`).attr("opacity", (s) => s.removed ? 0.5 : 1).select("div").style(
       "justify-content",
-      (s) => s.horizontalAlign === Pt.Center ? "center" : s.horizontalAlign === Pt.Right ? "flex-end" : "flex-start"
+      (s) => s.horizontalAlign === zt.Center ? "center" : s.horizontalAlign === zt.Right ? "flex-end" : "flex-start"
     ).style(
       "align-items",
-      (s) => s.verticalAlign === Kt.Center ? "center" : s.verticalAlign === Kt.Bottom ? "end" : "start"
+      (s) => s.verticalAlign === Qt.Center ? "center" : s.verticalAlign === Qt.Bottom ? "end" : "start"
     ).select("p").style(
       "max-width",
-      (s) => s.fit ? "default" : `${gi(s.width, s.height, s.orientation)[0]}px`
+      (s) => s.fit ? "default" : `${bi(s.width, s.height, s.orientation)[0]}px`
     ).style(
       "max-height",
-      (s) => s.fit ? "default" : `${gi(s.width, s.height, s.orientation)[1]}px`
+      (s) => s.fit ? "default" : `${bi(s.width, s.height, s.orientation)[1]}px`
     ).style("overflow", (s) => s.fit ? "default" : "clip").style("text-overflow", (s) => s.fit ? "default" : "ellipsis").style(
       "text-align",
-      (s) => s.horizontalAlign === Pt.Center ? "center" : s.horizontalAlign === Pt.Right ? "end" : "start"
+      (s) => s.horizontalAlign === zt.Center ? "center" : s.horizontalAlign === zt.Right ? "end" : "start"
     ).style("transform", (s) => `rotate(${s.orientation}deg)`).style("font-size", (s) => `${s.fontSize}px`).style(
       "font-family",
       (s) => s.fontFamily || "'Wonder Unit Sans', sans-serif"
@@ -5574,13 +5621,13 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         s.preventDefault(), s.stopPropagation(), this.dragging = !1;
         return;
       }
-      const r = new wt(s, n);
+      const r = new Ct(s, n);
       this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(S.ContextMenu) && (s.preventDefault(), this.contextMenu.open(s));
     }).on(L.DoubleClick, (s, n) => {
-      const r = new kt(s, n);
+      const r = new wt(s, n);
       this.diagramEvent$.next(r);
     }).call(
-      N.drag().filter((s) => (this.secondaryButton = Ct(s), !0)).on(M.Start, (s) => {
+      N.drag().filter((s) => (this.secondaryButton = St(s), !0)).on(M.Start, (s) => {
         (this.multipleSelectionOn || this.secondaryButton) && this.startMultipleSelection(s);
       }).on(M.Drag, (s) => {
         (this.multipleSelectionOn || this.secondaryButton) && this.continueMultipleSelection(s);
@@ -5605,13 +5652,13 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       if (!s.ctrlKey && !s.shiftKey) {
         const r = this.userSelection.all();
         this.userSelection.clear(), this.diagramEvent$.next(
-          new F(r, !1)
+          new B(r, !1)
         );
       }
       if (n.rootElement) {
-        const r = ft(n.rootElement);
+        const r = pt(n.rootElement);
         this.userSelection.toggle(r), this.diagramEvent$.next(
-          new F(
+          new B(
             [r],
             r.selected
           )
@@ -5622,21 +5669,21 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         s.preventDefault(), s.stopPropagation(), this.dragging = !1;
         return;
       }
-      const r = new wt(s, n);
+      const r = new Ct(s, n);
       if (this.diagramEvent$.next(r), !r.defaultPrevented && this.canUserPerformAction(S.ContextMenu) && n.rootElement) {
         s.preventDefault();
-        const c = ft(n.rootElement);
+        const c = pt(n.rootElement);
         this.userHighlight.focusOn(c), this.diagramEvent$.next(
           new ot(c)
         ), this.userSelection.add(c), this.diagramEvent$.next(
-          new F([c], !0)
+          new B([c], !0)
         ), this.contextMenu.open(s);
       }
     }).on(L.DoubleClick, (s, n) => {
-      const r = new kt(s, n);
+      const r = new wt(s, n);
       this.diagramEvent$.next(r);
     }).call(
-      N.drag().filter((s) => (this.secondaryButton = Ct(s), !0)).on(M.Start, (s, n) => {
+      N.drag().filter((s) => (this.secondaryButton = St(s), !0)).on(M.Start, (s, n) => {
         if (this.multipleSelectionOn || this.secondaryButton)
           this.startMultipleSelection(s);
         else {
@@ -5664,9 +5711,9 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
   updateConnectionLabelsInView(t) {
     var s, n, r;
     const e = this.selectCanvasView().select(
-      `[id='${pe(t.id)}']`
+      `[id='${ye(t.id)}']`
     ), a = e.select("path").node(), l = {
-      ...H,
+      ...F,
       ...t.type.label
     };
     if (a) {
@@ -5713,17 +5760,17 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       ).style("font-kerning", "none").text(t.startLabel);
       const g = (s = e.select("g.diagram-connection-start-label text").node()) == null ? void 0 : s.getBoundingClientRect();
       if (g) {
-        const y = t.startLabel ? g.width / this.zoomTransform.k + Ht(l) + Gt(l) : 0, A = t.startLabel ? g.height / this.zoomTransform.k + Bt(l) + Dt(l) : 0, I = a.getPointAtLength(
+        const y = t.startLabel ? g.width / this.zoomTransform.k + Bt(l) + Ut(l) : 0, A = t.startLabel ? g.height / this.zoomTransform.k + Yt(l) + Gt(l) : 0, I = a.getPointAtLength(
           Math.max(
             tt(l) + y / 2,
-            lt(l) + y / 2,
+            ct(l) + y / 2,
             Z(l) + A / 2,
-            st(l) + A / 2
+            nt(l) + A / 2
           )
         );
         e.select("g.diagram-connection-start-label path").attr(
           "d",
-          Zt(
+          Jt(
             -y / 2,
             -A / 2,
             y,
@@ -5740,10 +5787,10 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       ).style("font-kerning", "none").text(t.middleLabel);
       const v = (n = e.select("g.diagram-connection-middle-label text").node()) == null ? void 0 : n.getBoundingClientRect();
       if (v) {
-        const y = t.middleLabel ? v.width / this.zoomTransform.k + Ht(l) + Gt(l) : 0, A = t.middleLabel ? v.height / this.zoomTransform.k + Bt(l) + Dt(l) : 0, I = a.getPointAtLength(c / 2);
+        const y = t.middleLabel ? v.width / this.zoomTransform.k + Bt(l) + Ut(l) : 0, A = t.middleLabel ? v.height / this.zoomTransform.k + Yt(l) + Gt(l) : 0, I = a.getPointAtLength(c / 2);
         e.select("g.diagram-connection-middle-label path").attr(
           "d",
-          Zt(
+          Jt(
             -y / 2,
             -A / 2,
             y,
@@ -5760,17 +5807,17 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       ).style("font-kerning", "none").text(t.endLabel);
       const w = (r = e.select("g.diagram-connection-end-label text").node()) == null ? void 0 : r.getBoundingClientRect();
       if (w) {
-        const y = t.endLabel ? w.width / this.zoomTransform.k + Ht(l) + Gt(l) : 0, A = t.endLabel ? w.height / this.zoomTransform.k + Bt(l) + Dt(l) : 0, I = a.getPointAtLength(
+        const y = t.endLabel ? w.width / this.zoomTransform.k + Bt(l) + Ut(l) : 0, A = t.endLabel ? w.height / this.zoomTransform.k + Yt(l) + Gt(l) : 0, I = a.getPointAtLength(
           c - Math.max(
             tt(l) + y / 2,
-            lt(l) + y / 2,
+            ct(l) + y / 2,
             Z(l) + A / 2,
-            st(l) + A / 2
+            nt(l) + A / 2
           )
         );
         e.select("g.diagram-connection-end-label path").attr(
           "d",
-          Zt(
+          Jt(
             -y / 2,
             -A / 2,
             y,
@@ -5785,7 +5832,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
   }
   updateConnectionMarkersInView(t) {
     const e = this.selectCanvasView().select(
-      `[id='${pe(t.id)}']`
+      `[id='${ye(t.id)}']`
     ), o = e.select("marker.diagram-connection-start-marker"), a = e.select("marker.diagram-connection-end-marker");
     t.startMarkerLook !== null ? o.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) : o.attr("orient", "auto-start-reverse").attr("markerWidth", 0).attr("markerHeight", 0), t.endMarkerLook !== null ? a.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) : a.attr("orient", "auto-start-reverse").attr("markerWidth", 0).attr("markerHeight", 0);
   }
@@ -5795,7 +5842,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
     if (!e)
       return !1;
     if (e.rootElement instanceof O || e.rootElement instanceof X) {
-      const n = this.minimumSizeOfField(e), r = n[0] + tt((o = e.rootElement.type) == null ? void 0 : o.label) + lt((a = e.rootElement.type) == null ? void 0 : a.label) - e.rootElement.width, c = n[1] + Z((l = e.rootElement.type) == null ? void 0 : l.label) + st((s = e.rootElement.type) == null ? void 0 : s.label) - e.rootElement.height;
+      const n = this.minimumSizeOfField(e), r = n[0] + tt((o = e.rootElement.type) == null ? void 0 : o.label) + ct((a = e.rootElement.type) == null ? void 0 : a.label) - e.rootElement.width, c = n[1] + Z((l = e.rootElement.type) == null ? void 0 : l.label) + nt((s = e.rootElement.type) == null ? void 0 : s.label) - e.rootElement.height;
       return r <= 0 && c <= 0;
     }
     return !0;
@@ -5806,7 +5853,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
     if (o) {
       if (o.rootElement instanceof O) {
         const n = this.minimumSizeOfField(o);
-        let r = n[0] + tt(o.rootElement.type.label) + lt(o.rootElement.type.label) - o.rootElement.width, c = n[1] + Z(o.rootElement.type.label) + st(o.rootElement.type.label) - o.rootElement.height;
+        let r = n[0] + tt(o.rootElement.type.label) + ct(o.rootElement.type.label) - o.rootElement.width, c = n[1] + Z(o.rootElement.type.label) + nt(o.rootElement.type.label) - o.rootElement.height;
         this.snapToGrid && (r = Math.ceil(r / this.gridSize) * this.gridSize, c = Math.ceil(c / this.gridSize) * this.gridSize), o.rootElement.width + r < o.rootElement.type.minWidth && (r = o.rootElement.type.minWidth - o.rootElement.width), o.rootElement.height + c < o.rootElement.type.minHeight && (c = o.rootElement.type.minHeight - o.rootElement.height), (e !== !1 || r > 0) && o.rootElement.stretch(b.Right, r), (e !== !1 || c > 0) && o.rootElement.stretch(b.Bottom, c);
       }
       if (o.rootElement instanceof X) {
@@ -5822,7 +5869,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
           )));
         n[0] < r && (n[0] = r), n[1] < c && (n[1] = c);
         const d = o.rootElement.type;
-        let h = n[0] + tt(d == null ? void 0 : d.label) + lt(d == null ? void 0 : d.label) - o.rootElement.width, u = n[1] + Z(d == null ? void 0 : d.label) + st(d == null ? void 0 : d.label) - o.rootElement.height;
+        let h = n[0] + tt(d == null ? void 0 : d.label) + ct(d == null ? void 0 : d.label) - o.rootElement.width, u = n[1] + Z(d == null ? void 0 : d.label) + nt(d == null ? void 0 : d.label) - o.rootElement.height;
         this.snapToGrid && (h = Math.ceil(h / this.gridSize) * this.gridSize, u = Math.ceil(u / this.gridSize) * this.gridSize), o.rootElement.width + h < (o.rootElement.getMinWidth() || 0) && (h = (o.rootElement.getMinWidth() || 0) - o.rootElement.width), o.rootElement.height + u < (o.rootElement.getMinHeight() || 0) && (u = (o.rootElement.getMinHeight() || 0) - o.rootElement.height), (e || h > 0) && ((l = o.rootElement.node) == null || l.stretchSections(
           b.Right,
           h,
@@ -5877,12 +5924,12 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       ) && t.allowsOutgoing || this.connectionType.canFinishOnType(
         ((l = (a = t.getNode()) == null ? void 0 : a.type) == null ? void 0 : l.id) || ""
       ) && t.allowsIncoming))
-        this.unfinishedConnection = new gt(
+        this.unfinishedConnection = new ut(
           this.model,
           this.connectionType,
           t,
           void 0,
-          me
+          pe
         );
       else if (this.inferConnectionType) {
         let s = this.model.connections.types.all().find(
@@ -5896,12 +5943,12 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
             var r, c;
             return t.allowsIncoming && n.canFinishOnType(((c = (r = t.getNode()) == null ? void 0 : r.type) == null ? void 0 : c.id) || "");
           }
-        )), s !== void 0 && (this.unfinishedConnection = new gt(
+        )), s !== void 0 && (this.unfinishedConnection = new ut(
           this.model,
           s,
           t,
           void 0,
-          me
+          pe
         ));
       }
     }
@@ -5931,7 +5978,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       ) && ((n = (s = this.unfinishedConnection) == null ? void 0 : s.start) != null && n.allowsOutgoing) && this.unfinishedConnection.type.canFinishOnType(
         ((c = (r = t.getNode()) == null ? void 0 : r.type) == null ? void 0 : c.id) || ""
       ) && t.allowsIncoming) {
-        const E = new de(
+        const E = new ge(
           this,
           this.unfinishedConnection.type,
           (d = this.unfinishedConnection.start) == null ? void 0 : d.id,
@@ -5943,7 +5990,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       ) && ((g = (m = this.unfinishedConnection) == null ? void 0 : m.start) != null && g.allowsIncoming) && this.unfinishedConnection.type.canStartFromType(
         ((w = (v = t.getNode()) == null ? void 0 : v.type) == null ? void 0 : w.id) || ""
       ) && t.allowsOutgoing) {
-        const E = new de(
+        const E = new ge(
           this,
           this.unfinishedConnection.type,
           t.id,
@@ -5953,21 +6000,21 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       } else if (this.inferConnectionType) {
         let E = this.model.connections.types.all().find(
           (C) => {
-            var R, T, z, j, D, q, G, Y;
+            var R, T, z, j, D, q, H, Y;
             return C.canStartFromType(
               ((j = (z = (T = (R = this.unfinishedConnection) == null ? void 0 : R.start) == null ? void 0 : T.getNode()) == null ? void 0 : z.type) == null ? void 0 : j.id) || ""
-            ) && ((q = (D = this.unfinishedConnection) == null ? void 0 : D.start) == null ? void 0 : q.allowsOutgoing) && C.canFinishOnType(((Y = (G = t.getNode()) == null ? void 0 : G.type) == null ? void 0 : Y.id) || "") && t.allowsIncoming;
+            ) && ((q = (D = this.unfinishedConnection) == null ? void 0 : D.start) == null ? void 0 : q.allowsOutgoing) && C.canFinishOnType(((Y = (H = t.getNode()) == null ? void 0 : H.type) == null ? void 0 : Y.id) || "") && t.allowsIncoming;
           }
         ), $ = !1;
         if (E === void 0 && (E = this.model.connections.types.all().find(
           (C) => {
-            var R, T, z, j, D, q, G, Y;
+            var R, T, z, j, D, q, H, Y;
             return C.canFinishOnType(
               ((j = (z = (T = (R = this.unfinishedConnection) == null ? void 0 : R.start) == null ? void 0 : T.getNode()) == null ? void 0 : z.type) == null ? void 0 : j.id) || ""
-            ) && ((q = (D = this.unfinishedConnection) == null ? void 0 : D.start) == null ? void 0 : q.allowsIncoming) && C.canStartFromType(((Y = (G = t.getNode()) == null ? void 0 : G.type) == null ? void 0 : Y.id) || "") && t.allowsOutgoing;
+            ) && ((q = (D = this.unfinishedConnection) == null ? void 0 : D.start) == null ? void 0 : q.allowsIncoming) && C.canStartFromType(((Y = (H = t.getNode()) == null ? void 0 : H.type) == null ? void 0 : Y.id) || "") && t.allowsOutgoing;
           }
         ), $ = !0), E !== void 0) {
-          const C = new de(
+          const C = new ge(
             this,
             E,
             $ ? t.id : (A = this.unfinishedConnection.start) == null ? void 0 : A.id,
@@ -6005,7 +6052,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       }
     }).on(L.Input, () => {
       const m = h.property("value");
-      h.attr("cols", to(m) + 1), h.attr("rows", eo(m) + 1), h.style("width", ""), h.style("height", ""), u = h.property("scrollWidth") + 1, p = h.property("scrollHeight") + 1;
+      h.attr("cols", ro(m) + 1), h.attr("rows", ao(m) + 1), h.style("width", ""), h.style("height", ""), u = h.property("scrollWidth") + 1, p = h.property("scrollHeight") + 1;
       const g = Math.max(u, o), v = Math.max(p, a);
       d == null || d.attr("width", `${g}px`), h.style("width", `${g}px`), d == null || d.attr("height", `${v}px`), h.style("height", `${v}px`), r && r(m);
     }).on(L.Click, (m) => {
@@ -6038,7 +6085,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
   startMovingNode(t, e) {
     if (this.canUserPerformAction(S.MoveNode) && !e.removed)
       if (x(P.Grabbing), this.draggingFrom = [t.x, t.y], e.selected && this.userSelection.count((o) => o instanceof O) > 1)
-        this.currentAction = new ce(
+        this.currentAction = new he(
           this,
           this.userSelection.filter((o) => o instanceof O).map((o) => o.id),
           e.coords
@@ -6063,7 +6110,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
    * Method to call to continue the moving of a node triggered by a user drag event.
    */
   continueMovingNode(t, e) {
-    if (this.canUserPerformAction(S.MoveNode) && (this.currentAction instanceof ce || this.currentAction instanceof J) && !e.removed) {
+    if (this.canUserPerformAction(S.MoveNode) && (this.currentAction instanceof he || this.currentAction instanceof J) && !e.removed) {
       const o = [
         t.x - e.width / 2,
         t.y - e.height / 2
@@ -6084,7 +6131,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         t.x - e.width / 2,
         t.y - e.height / 2
       ];
-      if (this.snapToGrid && (s = this.getClosestGridPoint(s)), this.currentAction instanceof ce) {
+      if (this.snapToGrid && (s = this.getClosestGridPoint(s)), this.currentAction instanceof he) {
         const n = this.currentAction.delta;
         this.currentAction.delta = [
           s[0] - n[0],
@@ -6097,11 +6144,11 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         e.move(s);
         const r = this.model.nodes.getAtCoordinates(t.x, t.y).filter((h) => h.id !== e.id && !h.isDescendantOf(e)).filter(
           (h) => h.type.childrenTypes.includes(e.type.id)
-        ), c = Ii(
+        ), c = $i(
           r
         ), d = c[c.length - 1];
         if (d !== e.parent && (e.type.canBeParentless || d !== void 0)) {
-          const h = d == null ? void 0 : d.getLastAncestor(), u = this.currentAction.from, p = new Lo(
+          const h = d == null ? void 0 : d.getLastAncestor(), u = this.currentAction.from, p = new No(
             this,
             e.id,
             (o = e.parent) == null ? void 0 : o.id,
@@ -6149,7 +6196,7 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
     const e = this.getPointerLocationRelativeToCanvas(t);
     (o = this.multipleSelectionContainer) == null || o.remove(), this.multipleSelectionContainer = void 0, this.userSelection.clear();
     for (const a of this.model.nodes)
-      Ui(
+      Ki(
         [
           a.coords,
           [a.coords[0] + a.width, a.coords[1] + a.height]
@@ -6157,13 +6204,13 @@ const Bo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         [this.draggingFrom, e]
       ) && this.userSelection.add(a);
     this.multipleSelectionOn = !1, this.diagramEvent$.next(
-      new F(this.userSelection.all(), !0)
+      new B(this.userSelection.all(), !0)
     ), x();
   }
 };
-Jt.canvasCount = 0;
-let be = Jt;
-class Ni {
+ee.canvasCount = 0;
+let Ce = ee;
+class Oi {
   constructor() {
     this.grid = [[void 0]], this.offsetX = 0, this.offsetY = 0;
   }
@@ -6275,7 +6322,7 @@ class Ni {
     }
   }
 }
-class Yo {
+class Ko {
   constructor(t) {
     this.gapSize = t;
   }
@@ -6283,9 +6330,9 @@ class Yo {
     var n;
     if (t.nodes.length === 0)
       return t;
-    const e = new Ni(), o = t.nodes.filter((r) => !r.parent);
+    const e = new Oi(), o = t.nodes.filter((r) => !r.parent);
     for (; o.length > 0; )
-      Pi(
+      Di(
         o[0],
         e,
         [0, 0],
@@ -6303,18 +6350,18 @@ class Yo {
     return t;
   }
 }
-const Pi = (i, t, e, o) => {
+const Di = (i, t, e, o) => {
   const a = t.getClosestEmptyCoordinate(e);
   t.set(a, i), K(o, i);
   for (const l of i.getAdjacentNodes())
-    o.includes(l) && Pi(
+    o.includes(l) && Di(
       l,
       t,
       a,
       o
     );
 };
-class Xo {
+class qo {
   constructor(t) {
     this.gapSize = t;
   }
@@ -6322,7 +6369,7 @@ class Xo {
     var d;
     if (t.nodes.length === 0)
       return t;
-    const e = new Ni(), o = t.nodes.filter((h) => !h.parent), a = {}, l = o[0];
+    const e = new Oi(), o = t.nodes.filter((h) => !h.parent), a = {}, l = o[0];
     let s = [l];
     for (a[l.id] = [0, 0]; o.length > 0; ) {
       const h = [];
@@ -6356,7 +6403,7 @@ class Xo {
     return t;
   }
 }
-class re {
+class le {
   constructor(t) {
     this.gapSize = t;
   }
@@ -6391,7 +6438,7 @@ class re {
     return t;
   }
 }
-class jo {
+class Jo {
   constructor(t) {
     this.gapSize = t;
   }
@@ -6399,7 +6446,7 @@ class jo {
     var h;
     if (t.nodes.length === 0)
       return t;
-    new re(this.gapSize).apply(t);
+    new le(this.gapSize).apply(t);
     const e = this.gapSize !== void 0 ? this.gapSize : (((h = t.canvas) == null ? void 0 : h.gridSize) || 0) * 2, o = 0.99, a = 1, l = 0.1, s = 2e5, n = 0.5, r = 1, c = 2e-3;
     let d = 100;
     for (; d > a; ) {
@@ -6419,7 +6466,7 @@ class jo {
           ], v = [
             m.coords[0] + m.width / 2,
             m.coords[1] + m.height / 2
-          ], w = pi(
+          ], w = Si(
             p.coords,
             m.coords
           ), y = [m.coords[0], m.coords[1]];
@@ -6442,7 +6489,7 @@ class jo {
     return t;
   }
 }
-class Wo {
+class Qo {
   constructor(t) {
     this.gapSize = t;
   }
@@ -6458,7 +6505,7 @@ class Wo {
     return t;
   }
 }
-class Zo {
+class ts {
   constructor(t) {
     this.gapSize = t;
   }
@@ -6472,7 +6519,7 @@ class Zo {
       ...t.nodes.map((h) => h.getPriority())
     );
     if (e === o)
-      return new re(this.gapSize).apply(t), t;
+      return new le(this.gapSize).apply(t), t;
     const a = this.gapSize !== void 0 ? this.gapSize : (((d = t.canvas) == null ? void 0 : d.gridSize) || 0) * 2, l = t.nodes.filter((h) => !h.parent), s = [], n = t.nodes.filter((h) => !h.parent).filter((h) => h.getPriority() >= e), r = [];
     if (n.length > 1) {
       const h = n[0];
@@ -6526,7 +6573,7 @@ class Zo {
     return t;
   }
 }
-class Ko {
+class es {
   constructor(t) {
     this.gapSize = t;
   }
@@ -6540,17 +6587,17 @@ class Ko {
       ...t.nodes.map((h) => h.getPriority())
     );
     if (e === o)
-      return new re(this.gapSize).apply(t), t;
+      return new le(this.gapSize).apply(t), t;
     const a = this.gapSize !== void 0 ? this.gapSize : (((d = t.canvas) == null ? void 0 : d.gridSize) || 0) * 2, l = t.nodes.filter((h) => !h.parent).sort((h, u) => u.getPriority() - h.getPriority()), s = [];
     for (; l.length > 0; ) {
       const h = l[0];
       l.splice(0, 1);
-      const u = new Ce(void 0, h);
-      zi(u, l), s.push(u);
+      const u = new xe(void 0, h);
+      Fi(u, l), s.push(u);
     }
     const n = [];
     for (const h of s)
-      n.push([h]), Ri(h, n, n.length);
+      n.push([h]), Hi(h, n, n.length);
     const r = Math.max(...t.nodes.map((h) => h.height));
     let c = 0;
     for (let h = 0; h < n.length; ++h) {
@@ -6569,29 +6616,29 @@ class Ko {
     return t;
   }
 }
-const zi = (i, t) => {
+const Fi = (i, t) => {
   for (const e of i.node.getAdjacentNodes().sort((o, a) => a.getPriority() - o.getPriority())) {
     const o = t.indexOf(e);
     if (o >= 0) {
       t.splice(o, 1);
       const a = i.addBranch(e);
-      zi(a, t);
+      Fi(a, t);
     }
   }
-}, Ri = (i, t, e) => {
+}, Hi = (i, t, e) => {
   if (i.branches.length > 0) {
     for (; e >= t.length; )
       t.push([]);
     for (const o of i.branches)
-      t[e].push(o), Ri(o, t, e + 1);
+      t[e].push(o), Hi(o, t, e + 1);
   }
 };
-class Ce {
+class xe {
   constructor(t, e) {
     this.parent = t, this.branches = [], this.depth = 0, this.node = e;
   }
   addBranch(t) {
-    const e = new Ce(this, t);
+    const e = new xe(this, t);
     return e.depth = this.depth + 1, this.branches.push(e), e;
   }
   countBranchHeight() {
@@ -6605,7 +6652,7 @@ class Ce {
     }
   }
 }
-class qo {
+class is {
   constructor(t) {
     this.gapSize = t;
   }
@@ -6621,17 +6668,17 @@ class qo {
     return t;
   }
 }
-const ui = {
-  adjacency: new Yo(),
-  breadth: new re(),
-  "breadth-adjacency": new Xo(),
-  force: new jo(),
-  horizontal: new Wo(),
-  priority: new Zo(),
-  tree: new Ko(),
-  vertical: new qo()
-}, Jo = fi({}), Tt = fi({});
-class Qo {
+const ki = {
+  adjacency: new Ko(),
+  breadth: new le(),
+  "breadth-adjacency": new qo(),
+  force: new Jo(),
+  horizontal: new Qo(),
+  priority: new ts(),
+  tree: new es(),
+  vertical: new is()
+}, os = Ci({}), $t = Ci({});
+class ss {
   constructor(t, e) {
     this.onTitleChange = t, this.onValueSetChange = e;
   }
@@ -6650,7 +6697,7 @@ class Qo {
   highlightProperty(...t) {
   }
 }
-const Se = ({
+const Le = ({
   direction: i,
   collapsableSelector: t,
   collapsableAdditionalSelector: e,
@@ -6695,10 +6742,10 @@ const Se = ({
       children: /* @__PURE__ */ k("div", { className: u() })
     }
   ) });
-}, ts = () => {
-  const i = Yt(Tt), t = ct(null), [e, o] = U([]);
-  Gi(i.validatorChange$, i.diagramChange$).pipe(
-    Bi(() => a())
+}, ns = () => {
+  const i = Wt($t), t = dt(null), [e, o] = U([]);
+  ji(i.validatorChange$, i.diagramChange$).pipe(
+    Wi(() => a())
   ).subscribe();
   const a = () => {
     o([]);
@@ -6731,7 +6778,7 @@ const Se = ({
         " errors found"
       ] }),
       /* @__PURE__ */ k("div", { className: "daga-collapse-button-container", children: /* @__PURE__ */ k(
-        Se,
+        Le,
         {
           collapsableSelector: t,
           collapsableAdditionalSelector: ".daga-error-panel",
@@ -6753,18 +6800,18 @@ const Se = ({
       n
     )) }) })
   ] }) });
-}, es = 200, mi = (i) => (i || "").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""), Vi = ({
+}, rs = 200, wi = (i) => (i || "").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""), Gi = ({
   disabled: i,
   options: t,
   value: e,
   onChange: o
 }) => {
-  const a = ct(null), [l, s] = U("");
+  const a = dt(null), [l, s] = U("");
   let n;
   const [r, c] = U([]), [d, h] = U([]), [u, p] = U([]), [f, m] = U([]), [g, v] = U(!1);
-  Et(() => {
+  Tt(() => {
     var T;
-    s(((T = t.find((z) => Lt(z.key, e))) == null ? void 0 : T.label) || "");
+    s(((T = t.find((z) => Et(z.key, e))) == null ? void 0 : T.label) || "");
   }, [e, t]);
   const w = (T) => {
     if (!i)
@@ -6792,12 +6839,12 @@ const Se = ({
       }
   }, y = () => {
     if (!i) {
-      const T = mi(l.trim());
+      const T = wi(l.trim());
       c([]), h([]), p([]), m([]);
       for (const z of t) {
-        const D = mi(z.label).indexOf(T);
+        const D = wi(z.label).indexOf(T);
         if (D >= 0) {
-          const q = z.label.substring(0, D), G = z.label.substring(
+          const q = z.label.substring(0, D), H = z.label.substring(
             D,
             D + T.length
           ), Y = z.label.substring(
@@ -6808,7 +6855,7 @@ const Se = ({
             q
           ]), p((W) => [
             ...W,
-            G
+            H
           ]), m((W) => [
             ...W,
             Y
@@ -6828,7 +6875,7 @@ const Se = ({
   }, E = () => {
     setTimeout(() => {
       A();
-    }, es);
+    }, rs);
   }, $ = (T) => {
     var j;
     const z = (j = a.current) == null ? void 0 : j.querySelectorAll("li")[T];
@@ -6878,10 +6925,10 @@ const Se = ({
       ]
     }
   );
-}, is = (i, t) => {
+}, as = (i, t) => {
   var e;
   return ((e = i.find((o) => o.key === t)) == null ? void 0 : e.label) || `${t}`;
-}, os = ({
+}, ls = ({
   disabled: i,
   allowRepeats: t,
   options: e,
@@ -6889,8 +6936,8 @@ const Se = ({
   onChange: a
 }) => {
   const [l, s] = U(), [n, r] = U([]), [c, d] = U([]);
-  Et(() => {
-    const g = o.length === 0, v = o.map((w) => is(e, w));
+  Tt(() => {
+    const g = o.length === 0, v = o.map((w) => as(e, w));
     r(v), g && a(o), m();
   }, [o, e]);
   const h = (g) => {
@@ -6926,7 +6973,7 @@ const Se = ({
     ] }, v)),
     !i && /* @__PURE__ */ V("div", { className: "daga-value-item-input", children: [
       /* @__PURE__ */ k("div", { className: "daga-input daga-relatively-positioned", children: /* @__PURE__ */ k(
-        Vi,
+        Gi,
         {
           disabled: i,
           options: t ? e || [] : c || [],
@@ -6937,7 +6984,7 @@ const Se = ({
       /* @__PURE__ */ k("button", { className: "daga-property-button", onClick: p, children: /* @__PURE__ */ k("div", { className: "daga-icon daga-add-icon" }) })
     ] })
   ] });
-}, ss = ({
+}, cs = ({
   disabled: i,
   allowRepeats: t,
   value: e,
@@ -6963,7 +7010,7 @@ const Se = ({
   }, h = (u) => {
     u.key === "Enter" && c();
   };
-  return /* @__PURE__ */ V(Di, { children: [
+  return /* @__PURE__ */ V(Yi, { children: [
     e.map((u, p) => /* @__PURE__ */ V("div", { className: "daga-value-item-element", children: [
       /* @__PURE__ */ k(
         "input",
@@ -7000,7 +7047,7 @@ const Se = ({
       /* @__PURE__ */ k("button", { className: "daga-property-button", onClick: c, children: /* @__PURE__ */ k("div", { className: "daga-icon daga-add-icon" }) })
     ] })
   ] });
-}, ns = ({
+}, ds = ({
   disabled: i,
   value: t,
   onChange: e
@@ -7115,13 +7162,13 @@ const Se = ({
       /* @__PURE__ */ k("button", { className: "daga-property-button", onClick: u, children: /* @__PURE__ */ k("div", { className: "daga-icon daga-add-icon" }) })
     ] })
   ] });
-}, _i = ({
+}, Bi = ({
   valueSet: i,
   onValueChange: t,
   depth: e
 }) => {
   var r;
-  const a = Yt(Tt).canUserPerformAction(S.UpdateValues) && ((r = i == null ? void 0 : i.rootElement) == null ? void 0 : r.removed) !== !0, l = (c) => "daga-property-name-" + c.replace(/\s/g, ""), s = (c) => {
+  const a = Wt($t).canUserPerformAction(S.UpdateValues) && ((r = i == null ? void 0 : i.rootElement) == null ? void 0 : r.removed) !== !0, l = (c) => "daga-property-name-" + c.replace(/\s/g, ""), s = (c) => {
     if (typeof c == "string")
       return c;
     if (c == null || isNaN(c.valueOf()))
@@ -7134,12 +7181,12 @@ const Se = ({
     {
       className: `daga-property ${l(c.name)}`,
       children: [
-        /* @__PURE__ */ k("p", { className: "daga-property-name", children: c.name }),
+        /* @__PURE__ */ k("p", { className: "daga-property-name", children: c.label || c.name }),
         c.type === _.Text && /* @__PURE__ */ k(
           "input",
           {
             type: "daga-text",
-            disabled: !c.editable || !a,
+            disabled: c.editable === !1 || !a,
             value: i == null ? void 0 : i.getValue(c.name),
             onChange: (d) => t(i, c, d.target.value)
           }
@@ -7147,7 +7194,7 @@ const Se = ({
         c.type === _.TextArea && /* @__PURE__ */ k(
           "textarea",
           {
-            disabled: !c.editable || !a,
+            disabled: c.editable === !1 || !a,
             value: i == null ? void 0 : i.getValue(c.name),
             onChange: (d) => t(i, c, d.target.value)
           }
@@ -7156,7 +7203,7 @@ const Se = ({
           "input",
           {
             type: "number",
-            disabled: !c.editable || !a,
+            disabled: c.editable === !1 || !a,
             value: i == null ? void 0 : i.getValue(c.name),
             onChange: (d) => t(i, c, d.target.value)
           }
@@ -7166,7 +7213,7 @@ const Se = ({
           {
             type: "text",
             pattern: "#[0-9a-fA-F]{6}",
-            disabled: !c.editable || !a,
+            disabled: c.editable === !1 || !a,
             value: i == null ? void 0 : i.getValue(c.name),
             onChange: (d) => t(i, c, d.target.value)
           }
@@ -7175,16 +7222,22 @@ const Se = ({
           "input",
           {
             type: "datetime-local",
-            disabled: !c.editable || !a,
-            value: s(i == null ? void 0 : i.getValue(c.name)),
-            onChange: (d) => t(i, c, n(d.target.value))
+            disabled: c.editable === !1 || !a,
+            value: s(
+              i == null ? void 0 : i.getValue(c.name)
+            ),
+            onChange: (d) => t(
+              i,
+              c,
+              n(d.target.value)
+            )
           }
         ),
         c.type === _.Date && /* @__PURE__ */ k(
           "input",
           {
             type: "date",
-            disabled: !c.editable || !a,
+            disabled: c.editable === !1 || !a,
             value: i == null ? void 0 : i.getValue(c.name),
             onChange: (d) => t(i, c, d.target.value)
           }
@@ -7193,7 +7246,7 @@ const Se = ({
           "input",
           {
             type: "time",
-            disabled: !c.editable || !a,
+            disabled: c.editable === !1 || !a,
             value: i == null ? void 0 : i.getValue(c.name),
             onChange: (d) => t(i, c, d.target.value)
           }
@@ -7202,54 +7255,66 @@ const Se = ({
           "input",
           {
             type: "url",
-            disabled: !c.editable || !a,
+            disabled: c.editable === !1 || !a,
             value: i == null ? void 0 : i.getValue(c.name),
             onChange: (d) => t(i, c, d.target.value)
           }
         ),
         c.type === _.Boolean && /* @__PURE__ */ V("div", { className: "daga-radio", children: [
-          /* @__PURE__ */ V("label", { className: "daga-radio-item daga-radio-start" + ((i == null ? void 0 : i.getValue(c.name)) === !1 ? " daga-checked" : ""), children: [
-            /* @__PURE__ */ k(
-              "input",
-              {
-                type: "radio",
-                disabled: !c.editable || !a,
-                name: c.name,
-                value: "false",
-                checked: (i == null ? void 0 : i.getValue(c.name)) === !1,
-                onChange: () => t(i, c, !1)
-              }
-            ),
-            "No"
-          ] }),
-          /* @__PURE__ */ V("label", { className: "daga-radio-item daga-radio-end" + ((i == null ? void 0 : i.getValue(c.name)) === !0 ? " daga-checked" : ""), children: [
-            /* @__PURE__ */ k(
-              "input",
-              {
-                type: "radio",
-                disabled: !c.editable || !a,
-                name: c.name,
-                value: "true",
-                checked: (i == null ? void 0 : i.getValue(c.name)) === !0,
-                onChange: () => t(i, c, !0)
-              }
-            ),
-            "Yes"
-          ] })
+          /* @__PURE__ */ V(
+            "label",
+            {
+              className: "daga-radio-item daga-radio-start" + ((i == null ? void 0 : i.getValue(c.name)) === !1 ? " daga-checked" : ""),
+              children: [
+                /* @__PURE__ */ k(
+                  "input",
+                  {
+                    type: "radio",
+                    disabled: c.editable === !1 || !a,
+                    name: c.name,
+                    value: "false",
+                    checked: (i == null ? void 0 : i.getValue(c.name)) === !1,
+                    onChange: () => t(i, c, !1)
+                  }
+                ),
+                "No"
+              ]
+            }
+          ),
+          /* @__PURE__ */ V(
+            "label",
+            {
+              className: "daga-radio-item daga-radio-end" + ((i == null ? void 0 : i.getValue(c.name)) === !0 ? " daga-checked" : ""),
+              children: [
+                /* @__PURE__ */ k(
+                  "input",
+                  {
+                    type: "radio",
+                    disabled: c.editable === !1 || !a,
+                    name: c.name,
+                    value: "true",
+                    checked: (i == null ? void 0 : i.getValue(c.name)) === !0,
+                    onChange: () => t(i, c, !0)
+                  }
+                ),
+                "Yes"
+              ]
+            }
+          )
         ] }),
         c.type === _.Option && /* @__PURE__ */ k("div", { className: "daga-relatively-positioned", children: /* @__PURE__ */ k(
-          Vi,
+          Gi,
           {
-            disabled: !c.editable || !a,
+            disabled: c.editable === !1 || !a,
             options: c.options || [],
             value: i == null ? void 0 : i.getValue(c.name),
             onChange: (d) => t(i, c, d)
           }
         ) }),
         (c.type === _.OptionList || c.type === _.OptionSet) && /* @__PURE__ */ k(
-          os,
+          ls,
           {
-            disabled: !c.editable || !a,
+            disabled: c.editable === !1 || !a,
             allowRepeats: c.type === _.OptionList,
             options: c.options || [],
             value: i == null ? void 0 : i.getValue(c.name),
@@ -7257,24 +7322,24 @@ const Se = ({
           }
         ),
         (c.type === _.TextList || c.type === _.TextSet) && /* @__PURE__ */ k(
-          ss,
+          cs,
           {
-            disabled: !c.editable || !a,
+            disabled: c.editable === !1 || !a,
             allowRepeats: c.type === _.TextList,
             value: i == null ? void 0 : i.getValue(c.name),
             onChange: (d) => t(i, c, d)
           }
         ),
         c.type === _.TextMap && /* @__PURE__ */ k(
-          ns,
+          ds,
           {
-            disabled: !c.editable || !a,
+            disabled: c.editable === !1 || !a,
             value: i == null ? void 0 : i.getValue(c.name),
             onChange: (d) => t(i, c, d)
           }
         ),
         c.type === _.Object && /* @__PURE__ */ k("div", { className: "daga-left-bar", children: /* @__PURE__ */ k(
-          _i,
+          Bi,
           {
             valueSet: i.getSubValueSet(c.name),
             onValueChange: t,
@@ -7285,8 +7350,8 @@ const Se = ({
     },
     c.name
   )) });
-}, Oi = ({ valueSet: i, depth: t }) => {
-  const e = Yt(Tt), o = ct(null), a = (r) => "daga-property-name-" + r.replace(/\s/g, ""), l = () => {
+}, Ui = ({ valueSet: i, depth: t }) => {
+  const e = Wt($t), o = dt(null), a = (r) => "daga-property-name-" + r.replace(/\s/g, ""), l = () => {
     for (const r of (i == null ? void 0 : i.displayedProperties) || []) {
       let c = 0, d = 0, h = 0;
       const u = N.select(o.current).select(
@@ -7352,7 +7417,7 @@ const Se = ({
     if (i === void 0)
       return;
     let c;
-    r instanceof ro ? c = r : r instanceof Event ? c = i == null ? void 0 : i.propertySet.getProperty(
+    r instanceof uo ? c = r : r instanceof Event ? c = i == null ? void 0 : i.propertySet.getProperty(
       ((d = r.target) == null ? void 0 : d.value) || ""
     ) : c = i == null ? void 0 : i.propertySet.getProperty(r || ""), c && (i == null || i.hideProperty(c)), l();
   };
@@ -7369,7 +7434,7 @@ const Se = ({
               className: `daga-property ${a(r.name)} daga-depth-${t}`,
               children: [
                 /* @__PURE__ */ V("div", { className: "daga-property-name", children: [
-                  /* @__PURE__ */ k("span", { children: r.name }),
+                  /* @__PURE__ */ k("span", { children: r.label || r.name }),
                   /* @__PURE__ */ V("div", { className: "daga-buttons", children: [
                     /* @__PURE__ */ k("button", { className: "daga-property-button daga-move-button", children: /* @__PURE__ */ k("div", { className: "daga-icon daga-move-icon" }) }),
                     /* @__PURE__ */ k(
@@ -7382,9 +7447,9 @@ const Se = ({
                     )
                   ] })
                 ] }),
-                r.type !== _.Object && /* @__PURE__ */ k("div", { className: "daga-property-value", children: rs(i == null ? void 0 : i.getValue(r.name)) }),
+                r.type !== _.Object && /* @__PURE__ */ k("div", { className: "daga-property-value", children: hs(i == null ? void 0 : i.getValue(r.name)) }),
                 r.type === _.Object && /* @__PURE__ */ k(
-                  Oi,
+                  Ui,
                   {
                     valueSet: i == null ? void 0 : i.getSubValueSet(r.name),
                     depth: t + 1
@@ -7404,76 +7469,76 @@ const Se = ({
       r.name
     ))
   ] });
-}, rs = (i) => Array.isArray(i) ? i.join(", ") : ao(i) ? Object.entries(i).map((t) => t.map((e) => JSON.stringify(e)).join(": ")).join(", ") : i instanceof Date ? i.toLocaleString() : i == null ? "" : "" + i, as = ({ location: i, direction: t, width: e, title: o, valueSet: a, onValueChange: l }) => {
-  const s = ct(null), [n, r] = U(!1), [c, d] = U(!1), h = () => N.select(s.current);
-  return Et(() => {
-    if (s.current)
+}, hs = (i) => Array.isArray(i) ? i.join(", ") : mo(i) ? Object.entries(i).map((t) => t.map((e) => JSON.stringify(e)).join(": ")).join(", ") : i instanceof Date ? i.toLocaleString() : i == null ? "" : "" + i, gs = ({ location: i, direction: t, width: e, height: o, title: a, valueSet: l, onValueChange: s }) => {
+  const n = dt(null), [r, c] = U(!1), [d, h] = U(!1), u = () => N.select(n.current);
+  return Tt(() => {
+    if (n.current)
       switch (t) {
         case b.Bottom:
         case b.Top:
-          h().style("width", e);
+          u().style("width", e), o && u().select(".daga-panel-content").style("height", o);
           break;
         case b.Left:
         case b.Right:
-          h().style("height", e);
+          u().style("height", e), o && u().select(".daga-panel-content").style("width", o);
           break;
       }
   }, [e, t]), /* @__PURE__ */ k("daga-property-editor", { children: /* @__PURE__ */ V(
     "div",
     {
-      ref: s,
+      ref: n,
       className: `daga-panel daga-bottom daga-${i} daga-${t}`,
       children: [
         /* @__PURE__ */ k(
-          Se,
+          Le,
           {
-            disabled: !a || !a.propertySet || !a.propertySet.hasProperties(),
-            collapsed: n,
+            disabled: !l || !l.propertySet || !l.propertySet.hasProperties(),
+            collapsed: r,
             direction: t,
-            collapsableSelector: s,
+            collapsableSelector: n,
             collapsableAdditionalSelector: ".daga-panel-content",
             rule: "display",
             collapsedValue: "none",
             visibleValue: "block",
-            onCollapse: r
+            onCollapse: c
           }
         ),
-        a && a.propertySet && a.propertySet.hasProperties() && !n && /* @__PURE__ */ V("div", { className: "daga-panel-content", children: [
-          o && /* @__PURE__ */ V("p", { className: "daga-title", children: [
-            o,
+        /* @__PURE__ */ k("div", { className: "daga-panel-content", children: l && l.propertySet && l.propertySet.hasProperties() && !r && /* @__PURE__ */ V("div", { children: [
+          a && /* @__PURE__ */ V("p", { className: "daga-title", children: [
+            a,
             /* @__PURE__ */ k(
               "button",
               {
                 className: "daga-property-button",
-                onClick: () => d(!c),
+                onClick: () => h(!d),
                 children: /* @__PURE__ */ k(
                   "div",
                   {
-                    className: `daga-icon daga-settings-icon ${c ? "daga-unrotate" : "daga-rotate"}`
+                    className: `daga-icon daga-settings-icon ${d ? "daga-unrotate" : "daga-rotate"}`
                   }
                 )
               }
             )
           ] }),
-          !c && /* @__PURE__ */ k(
-            _i,
+          !d && /* @__PURE__ */ k(
+            Bi,
             {
-              valueSet: a,
-              onValueChange: l,
+              valueSet: l,
+              onValueChange: s,
               depth: 0
             }
           ),
-          c && /* @__PURE__ */ k(Oi, { valueSet: a, depth: 0 })
-        ] })
+          d && /* @__PURE__ */ k(Ui, { valueSet: l, depth: 0 })
+        ] }) })
       ]
     }
   ) });
-}, ls = 6, cs = (i) => {
-  const t = Yt(Tt), [e, o] = U(
+}, us = 6, ms = (i) => {
+  const t = Wt($t), [e, o] = U(
     i.currentPalette || i.palettes[0]
   ), [a, l] = U(0), [s, n] = U(
     void 0
-  ), r = ct(null), c = (m) => {
+  ), r = dt(null), c = (m) => {
     if (o(m), d().selectAll("*").remove(), l(t.getPriorityThreshold() || 0), m.categories && h(m.categories), m.templates)
       for (const g of m.templates)
         u(g);
@@ -7503,7 +7568,7 @@ const Se = ({
   }, p = (m, g, v) => {
     if (a !== void 0 && m.priority < a)
       return;
-    const w = m.defaultLook.lookType === "shaped-look" ? m.defaultLook.borderThickness : 0, y = m.defaultHeight + w, A = m.defaultWidth + w, I = g.height || y, E = g.width || A, $ = d().append("div").attr(
+    const w = m.defaultLook.lookType === "shaped-look" ? m.defaultLook.borderThickness || 1 : 0, y = m.defaultHeight + w, A = m.defaultWidth + w, I = g.height || y, E = g.width || A, $ = d().append("div").attr(
       "class",
       `daga-template-container ${v !== void 0 ? v : ""}`
     ).style("width", `${E}px`).style("height", `${I}px`).call(
@@ -7528,7 +7593,7 @@ const Se = ({
         var T;
         if (t.canUserPerformAction(S.AddNode)) {
           if (x(P.Auto), $.style("position", "relative").style("left", 0).style("top", 0).style("z-index", "auto"), m.isUnique && t.model.nodes.find(
-            (xt) => !xt.removed && xt.type.id === m.id
+            (Lt) => !Lt.removed && Lt.type.id === m.id
           ) !== void 0)
             return;
           const z = t.getPointerLocationRelativeToScreen(R);
@@ -7552,24 +7617,24 @@ const Se = ({
             D[0],
             D[1]
           ).filter(
-            (xt) => xt.type.childrenTypes.includes(m.id)
-          ), W = Ii(
+            (Lt) => Lt.type.childrenTypes.includes(m.id)
+          ), W = $i(
             Y
-          ), at = W[W.length - 1];
-          if (!m.canBeParentless && at === void 0)
+          ), lt = W[W.length - 1];
+          if (!m.canBeParentless && lt === void 0)
             return;
-          const ut = at == null ? void 0 : at.getLastAncestor(), _t = new xo(
+          const mt = lt == null ? void 0 : lt.getLastAncestor(), Dt = new Mo(
             t,
             m,
             q,
-            at == null ? void 0 : at.id,
-            ut == null ? void 0 : ut.id,
-            ut == null ? void 0 : ut.getGeometry(),
+            lt == null ? void 0 : lt.id,
+            mt == null ? void 0 : mt.id,
+            mt == null ? void 0 : mt.getGeometry(),
             void 0,
             g.label,
             g.values
           );
-          _t.do(), t == null || t.actionStack.add(_t), x();
+          Dt.do(), t == null || t.actionStack.add(Dt), x();
         }
       })
     ).append("svg").attr("class", `palette-node ${m.id}`).attr("viewBox", `0 0 ${A} ${y}`).attr("preserveAspectRatio", "none").style("position", "relative").style("left", 0).style("top", 0).style("width", `${E}px`).style("height", `${I}px`), C = g.look || m.defaultLook;
@@ -7577,14 +7642,14 @@ const Se = ({
       case "shaped-look":
         $.append("path").attr(
           "d",
-          ve(
-            C.shape,
-            C.borderThickness / 2,
-            C.borderThickness / 2,
+          ke(
+            C.shape || _t.Rectangle,
+            (C.borderThickness || 1) / 2,
+            (C.borderThickness || 1) / 2,
             m.defaultWidth,
             m.defaultHeight
           )
-        ).attr("fill", C.fillColor).attr("stroke", C.borderColor).attr("stroke-width", `${C.borderThickness}px`);
+        ).attr("fill", C.fillColor || "#FFFFFF").attr("stroke", C.borderColor || "#000000").attr("stroke-width", `${C.borderThickness}px`);
         break;
       case "image-look":
         $.append("image").attr("x", 0).attr("y", 0).attr("width", m.defaultWidth).attr("height", m.defaultHeight).attr("href", C.backgroundImage).attr("preserveAspectRatio", "none");
@@ -7619,7 +7684,7 @@ const Se = ({
           ).html(R.html);
       if (g.label) {
         const R = {
-          ...H,
+          ...F,
           ...m.label,
           ...g.labelLook
         };
@@ -7638,8 +7703,8 @@ const Se = ({
     });
     w.append("path").attr(
       "d",
-      ve(
-        Qt.Rectangle,
+      ke(
+        _t.Rectangle,
         0,
         0,
         g.width,
@@ -7647,19 +7712,19 @@ const Se = ({
       )
     ).attr("fill", g.backgroundColor).attr("stroke", "black").attr("stroke-width", "1px"), g.icon !== "" && w.append("image").attr("x", 0).attr("y", 0).attr("width", g.width).attr("height", g.height).attr("href", g.icon), g.label !== "" && w.append("text").attr(
       "transform",
-      `translate(${g.width / 2},${g.height / 2 + ls})`
+      `translate(${g.width / 2},${g.height / 2 + us})`
     ).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(g.label);
   };
-  return Et(() => {
+  return Tt(() => {
     if (c(i.palettes[0]), r.current)
       switch (i.direction) {
         case b.Bottom:
         case b.Top:
-          r.current.style.width = i.width;
+          r.current.style.width = i.width, i.height && (r.current.style.height = i.height);
           break;
         case b.Left:
         case b.Right:
-          r.current.style.height = i.width;
+          r.current.style.height = i.width, i.height && (r.current.style.width = i.height);
           break;
       }
   }, [e, i.palettes]), /* @__PURE__ */ k("daga-palette", { children: /* @__PURE__ */ V(
@@ -7669,7 +7734,7 @@ const Se = ({
       className: `daga-panel daga-${i.location} daga-${i.direction}`,
       children: [
         /* @__PURE__ */ k(
-          Se,
+          Le,
           {
             direction: i.direction,
             collapsableSelector: r,
@@ -7695,7 +7760,7 @@ const Se = ({
       ]
     }
   ) });
-}, ds = ({
+}, fs = ({
   location: i,
   direction: t,
   enableAction: e,
@@ -7719,42 +7784,42 @@ const Se = ({
       d = "width", h = "scaleX", u = "left", p = "right";
       break;
   }
-  const f = ct(null), m = ct(null), g = ct(null);
-  Et(() => {
+  const f = dt(null), m = dt(null), g = dt(null);
+  Tt(() => {
     N.select(
       f.current
     ).style(`margin-${p}`, "-1rem").style(d, "0rem").style("transform", `${h}(0)`).style("transform-origin", u);
   });
   const v = async () => {
-    const G = N.select(
+    const H = N.select(
       f.current
     );
     if (!c)
       if (r) {
         r = !1;
-        const at = `${4 * G.selectChildren().size()}rem`;
-        G.transition().duration(500).ease(N.easeLinear).style(d, at).style("transform", `${h}(1)`), setTimeout(() => {
+        const lt = `${4 * H.selectChildren().size()}rem`;
+        H.transition().duration(500).ease(N.easeLinear).style(d, lt).style("transform", `${h}(1)`), setTimeout(() => {
           c = !1;
         }, 500);
       } else
-        r = !0, G.transition().duration(500).ease(N.easeLinear).style(d, "0rem").style("transform", `${h}(0)`), setTimeout(() => {
+        r = !0, H.transition().duration(500).ease(N.easeLinear).style(d, "0rem").style("transform", `${h}(0)`), setTimeout(() => {
           c = !1;
         }, 500);
-  }, w = Yt(Tt), y = () => {
+  }, w = Wt($t), y = () => {
     w.zoomBy(w.zoomFactor);
   }, A = () => {
     w.zoomBy(1 / w.zoomFactor);
   }, I = () => {
     w.center();
   }, E = () => {
-    w.layoutFormat && w.layoutFormat in ui && ui[w.layoutFormat].apply(w.model);
+    w.layoutFormat && w.layoutFormat in ki && ki[w.layoutFormat].apply(w.model);
   }, $ = () => {
     n = !n, N.select(
       g.current
     ).classed("daga-on", n).classed("daga-off", !n);
-    const G = w.getPriorityThresholdOptions();
-    G && G.length >= 2 && w.setPriorityThreshold(
-      G[n ? 1 : 0]
+    const H = w.getPriorityThresholdOptions();
+    H && H.length >= 2 && w.setPriorityThreshold(
+      H[n ? 1 : 0]
     );
   }, C = () => {
     w.actionStack.undo();
@@ -7772,10 +7837,10 @@ const Se = ({
     w.multipleSelectionOn = !0, N.select(
       m.current
     ).classed("daga-on", !0).classed("daga-off", !1);
-    const G = w.diagramEvent$.subscribe((Y) => {
-      Y.type === Ei.Selection && (N.select(
+    const H = w.diagramEvent$.subscribe((Y) => {
+      Y.type === zi.Selection && (N.select(
         m.current
-      ).classed("daga-on", !1).classed("daga-off", !0), G.unsubscribe());
+      ).classed("daga-on", !1).classed("daga-off", !0), H.unsubscribe());
     });
   };
   return /* @__PURE__ */ k("daga-diagram-buttons", { children: /* @__PURE__ */ V(
@@ -7801,15 +7866,15 @@ const Se = ({
       ]
     }
   ) });
-}, ms = ({
+}, bs = ({
   config: i,
   model: t,
   onCanvasCreated: e,
   onDiagramEvent: o,
   onModelChange: a
 }) => {
-  var $, C, R, T, z, j, D, q, G, Y, W, at, ut, _t, xt, Ie, Ae, xe, Le, Ee, Te, $e, Me, Ne, Pe, ze, Re, Ve, _e, Oe, De, He, Ge, Be, Fe, Ue, Ye, Xe, je, We, Ze, Ke, qe, Je, Qe;
-  const l = new Li(), s = new Mi(), n = ct(null), r = ct(void 0), c = ct(!1), d = [], [h, u] = U(void 0), [p, f] = U(void 0), m = {
+  var $, C, R, T, z, j, D, q, H, Y, W, lt, mt, Dt, Lt, Ee, Te, $e, Me, Ne, Pe, ze, Re, Ve, _e, Oe, De, Fe, He, Ge, Be, Ue, Ye, Xe, je, We, Ze, Ke, qe, Je, Qe, ti, ei, ii, oi, si, ni, ri, ai;
+  const l = new Pi(), s = new _i(), n = dt(null), r = dt(void 0), c = dt(!1), d = [], [h, u] = U(void 0), [p, f] = U(void 0), m = {
     zoomIn: () => {
     },
     zoomOut: () => {
@@ -7827,82 +7892,84 @@ const Se = ({
   }, g = {
     refreshPalette: () => {
     }
-  }, v = new Qo(
-    (ht) => u(ht),
-    (ht) => f(ht)
+  }, v = new ss(
+    (gt) => u(gt),
+    (gt) => f(gt)
   ), w = {
     diagramButtons: m,
     palette: g,
     propertyEditor: v
-  }, y = (ht = !1) => ((!r.current || ht) && (d.forEach((mt) => mt.unsubscribe()), r.current = new be(w, i)), r.current), A = y(), I = (ht) => {
-    A.initView(ht), d.push(
-      A.diagramEvent$.subscribe((mt) => {
-        o == null || o(mt);
+  }, y = (gt = !1) => ((!r.current || gt) && (d.forEach((ft) => ft.unsubscribe()), r.current = new Ce(w, i)), r.current), A = y(), I = (gt) => {
+    A.initView(gt), d.push(
+      A.diagramEvent$.subscribe((ft) => {
+        o == null || o(ft);
       })
     ), d.push(
       A.diagramChange$.subscribe(() => {
-        const mt = s.export(A.model);
-        a == null || a(mt);
+        const ft = s.export(A.model);
+        a == null || a(ft);
       })
     );
   };
-  Et(() => {
+  Tt(() => {
     n.current && (c.current || (I(n.current), c.current = !0, e == null || e(A)));
-  }, [n.current]), Fi(() => {
+  }, [n.current]), Zi(() => {
     n.current && (y(!0), I(n.current), e == null || e(A));
-  }, [i]), Et(() => {
+  }, [i]), Tt(() => {
     t && l.import(A.model, t);
   }, [t]);
-  const E = (ht, mt, ti) => {
-    var ei;
-    if (p !== void 0 && mt.editable && !Lt(ht.getValue(mt.name), ti)) {
-      ht.setValue(mt.name, ti);
-      const ae = new St(
+  const E = (gt, ft, li) => {
+    var ci;
+    if (p !== void 0 && ft.editable !== !1 && !Et(gt.getValue(ft.name), li)) {
+      gt.setValue(ft.name, li);
+      const ce = new It(
         p.propertySet,
         p.rootElement
       );
-      ae.setValues(p.getValues()), v.valueSet = ae, p.rootElement.valueSet = ae, (ei = A.propertyEditorChanges$) == null || ei.next();
+      ce.setValues(p.getValues()), v.valueSet = ce, p.rootElement.valueSet = ce, (ci = A.propertyEditorChanges$) == null || ci.next();
     }
   };
-  return /* @__PURE__ */ k("daga-diagram", { children: /* @__PURE__ */ k(Jo.Provider, { value: i, children: /* @__PURE__ */ k(Tt.Provider, { value: A, children: /* @__PURE__ */ V("daga-diagram-editor", { children: [
+  return /* @__PURE__ */ k("daga-diagram", { children: /* @__PURE__ */ k(os.Provider, { value: i, children: /* @__PURE__ */ k($t.Provider, { value: A, children: /* @__PURE__ */ V("daga-diagram-editor", { children: [
     /* @__PURE__ */ k("div", { className: "daga-append-to", ref: n }),
-    /* @__PURE__ */ V(Tt.Provider, { value: A, children: [
+    /* @__PURE__ */ V($t.Provider, { value: A, children: [
       (($ = i.components) == null ? void 0 : $.buttons) !== void 0 && ((R = (C = i.components) == null ? void 0 : C.buttons) == null ? void 0 : R.enabled) !== !1 && /* @__PURE__ */ k(
-        ds,
+        fs,
         {
-          location: ((z = (T = i.components) == null ? void 0 : T.buttons) == null ? void 0 : z.location) || Wt.BottomRight,
+          location: ((z = (T = i.components) == null ? void 0 : T.buttons) == null ? void 0 : z.location) || qt.BottomRight,
           direction: ((D = (j = i.components) == null ? void 0 : j.buttons) == null ? void 0 : D.direction) || b.Top,
-          enableAction: ((G = (q = i.components) == null ? void 0 : q.buttons) == null ? void 0 : G.enableAction) !== !1,
+          enableAction: ((H = (q = i.components) == null ? void 0 : q.buttons) == null ? void 0 : H.enableAction) !== !1,
           enableFilter: ((W = (Y = i.components) == null ? void 0 : Y.buttons) == null ? void 0 : W.enableFilter) === !0,
-          enableLayout: ((ut = (at = i.components) == null ? void 0 : at.buttons) == null ? void 0 : ut.enableLayout) === !0,
-          enableSelection: ((xt = (_t = i.components) == null ? void 0 : _t.buttons) == null ? void 0 : xt.enableSelection) !== !1,
-          enableZoom: ((Ae = (Ie = i.components) == null ? void 0 : Ie.buttons) == null ? void 0 : Ae.enableZoom) !== !1
+          enableLayout: ((mt = (lt = i.components) == null ? void 0 : lt.buttons) == null ? void 0 : mt.enableLayout) === !0,
+          enableSelection: ((Lt = (Dt = i.components) == null ? void 0 : Dt.buttons) == null ? void 0 : Lt.enableSelection) !== !1,
+          enableZoom: ((Te = (Ee = i.components) == null ? void 0 : Ee.buttons) == null ? void 0 : Te.enableZoom) !== !1
         }
       ),
-      ((xe = i.components) == null ? void 0 : xe.palette) !== void 0 && ((Ee = (Le = i.components) == null ? void 0 : Le.palette) == null ? void 0 : Ee.enabled) !== !1 && (($e = (Te = i.components) == null ? void 0 : Te.palette) == null ? void 0 : $e.sections) && (((Pe = (Ne = (Me = i.components) == null ? void 0 : Me.palette) == null ? void 0 : Ne.sections) == null ? void 0 : Pe.length) || 0) > 0 && /* @__PURE__ */ k(
-        cs,
+      (($e = i.components) == null ? void 0 : $e.palette) !== void 0 && ((Ne = (Me = i.components) == null ? void 0 : Me.palette) == null ? void 0 : Ne.enabled) !== !1 && ((ze = (Pe = i.components) == null ? void 0 : Pe.palette) == null ? void 0 : ze.sections) && (((_e = (Ve = (Re = i.components) == null ? void 0 : Re.palette) == null ? void 0 : Ve.sections) == null ? void 0 : _e.length) || 0) > 0 && /* @__PURE__ */ k(
+        ms,
         {
-          location: ((Re = (ze = i.components) == null ? void 0 : ze.palette) == null ? void 0 : Re.location) || Wt.TopLeft,
-          direction: ((_e = (Ve = i.components) == null ? void 0 : Ve.palette) == null ? void 0 : _e.direction) || b.Bottom,
-          width: ((De = (Oe = i.components) == null ? void 0 : Oe.palette) == null ? void 0 : De.width) || "12rem",
-          palettes: ((Ge = (He = i.components) == null ? void 0 : He.palette) == null ? void 0 : Ge.sections) || []
+          location: ((De = (Oe = i.components) == null ? void 0 : Oe.palette) == null ? void 0 : De.location) || qt.TopLeft,
+          direction: ((He = (Fe = i.components) == null ? void 0 : Fe.palette) == null ? void 0 : He.direction) || b.Bottom,
+          width: ((Be = (Ge = i.components) == null ? void 0 : Ge.palette) == null ? void 0 : Be.width) || "12rem",
+          height: (Ye = (Ue = i.components) == null ? void 0 : Ue.palette) == null ? void 0 : Ye.height,
+          palettes: ((je = (Xe = i.components) == null ? void 0 : Xe.palette) == null ? void 0 : je.sections) || []
         }
       ),
-      ((Be = i.components) == null ? void 0 : Be.propertyEditor) !== void 0 && ((Ue = (Fe = i.components) == null ? void 0 : Fe.propertyEditor) == null ? void 0 : Ue.enabled) !== !1 && /* @__PURE__ */ k(
-        as,
+      ((We = i.components) == null ? void 0 : We.propertyEditor) !== void 0 && ((Ke = (Ze = i.components) == null ? void 0 : Ze.propertyEditor) == null ? void 0 : Ke.enabled) !== !1 && /* @__PURE__ */ k(
+        gs,
         {
-          location: ((Xe = (Ye = i.components) == null ? void 0 : Ye.propertyEditor) == null ? void 0 : Xe.location) || Wt.TopRight,
-          direction: ((We = (je = i.components) == null ? void 0 : je.propertyEditor) == null ? void 0 : We.direction) || b.Bottom,
-          width: ((Ke = (Ze = i.components) == null ? void 0 : Ze.propertyEditor) == null ? void 0 : Ke.width) || "24rem",
+          location: ((Je = (qe = i.components) == null ? void 0 : qe.propertyEditor) == null ? void 0 : Je.location) || qt.TopRight,
+          direction: ((ti = (Qe = i.components) == null ? void 0 : Qe.propertyEditor) == null ? void 0 : ti.direction) || b.Bottom,
+          width: ((ii = (ei = i.components) == null ? void 0 : ei.propertyEditor) == null ? void 0 : ii.width) || "24rem",
+          height: (si = (oi = i.components) == null ? void 0 : oi.propertyEditor) == null ? void 0 : si.height,
           title: h,
           valueSet: p,
           onValueChange: E
         }
       ),
-      ((qe = i.components) == null ? void 0 : qe.errors) !== void 0 && ((Qe = (Je = i.components) == null ? void 0 : Je.errors) == null ? void 0 : Qe.enabled) !== !1 && /* @__PURE__ */ k(ts, {})
+      ((ni = i.components) == null ? void 0 : ni.errors) !== void 0 && ((ai = (ri = i.components) == null ? void 0 : ri.errors) == null ? void 0 : ai.enabled) !== !1 && /* @__PURE__ */ k(ns, {})
     ] })
   ] }) }) }) });
 };
 export {
-  ms as DagaDiagram
+  bs as DagaDiagram
 };