@metadev/daga-react 4.2.1 → 4.2.2

package/index.mjs

@@ -67,7 +67,7 @@ const Mt = (i) => [Math.round(i[0]), Math.round(i[1])], bt = (i, t, e) => t < e
   i[1][1],
   i[0][1]
 ));
-var E = /* @__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))(E || {}), et = /* @__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))(et || {}), $ = /* @__PURE__ */ ((i) => (i.Drag = "drag", i.Start = "start", i.End = "end", i))($ || {}), fe = /* @__PURE__ */ ((i) => (i.Zoom = "zoom", i.Start = "start", i.End = "end", i))(fe || {});
+var x = /* @__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))(x || {}), et = /* @__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))(et || {}), $ = /* @__PURE__ */ ((i) => (i.Drag = "drag", i.Start = "start", i.End = "end", i))($ || {}), 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, s, r) => {
@@ -1501,7 +1501,7 @@ class po extends yt {
    * @private
    */
   new(t, e, s, r, l, o, n) {
-    var d, u, p, m, f, g, v, w, b, x;
+    var d, u, p, m, f, g, v, w, b, E;
     const a = new Y(
       this.model,
       t,
@@ -1575,7 +1575,7 @@ class po extends yt {
           );
         }
       }
-    const h = (x = (b = (w = (v = t.type.sectionGrid) == null ? void 0 : v.sections) == null ? void 0 : w[s]) == null ? void 0 : b[e]) == null ? void 0 : x.label;
+    const h = (E = (b = (w = (v = t.type.sectionGrid) == null ? void 0 : v.sections) == null ? void 0 : w[s]) == null ? void 0 : b[e]) == null ? void 0 : E.label;
     if (h) {
       const I = {
         ...D,
@@ -2274,28 +2274,28 @@ class vo extends yt {
             ...D,
             ...(d = g.type) == null ? void 0 : d.label
           }, w = 6 * v.fontSize + Ht(v) + Gt(v), b = v.fontSize + Ft(v) + Dt(v);
-          let x;
+          let E;
           switch (g.direction) {
             case y.Bottom:
             case y.Left:
             case y.Right:
-              x = [
+              E = [
                 g.coords[0] - w / 2,
                 g.coords[1] - b - st(v)
               ];
               break;
             case y.Top:
-              x = [
+              E = [
                 g.coords[0] - w / 2,
                 g.coords[1] + X(v)
               ];
               break;
             default:
-              x = g.coords;
+              E = g.coords;
           }
           this.model.fields.new(
             g,
-            x,
+            E,
             v.fontSize,
             v.fontFamily,
             v.color,
@@ -2709,7 +2709,7 @@ class Ei {
           const b = {
             ...D,
             ...(p = (u = (d = (h = s.sectionGrid) == null ? void 0 : h.sections) == null ? void 0 : d[g.indexYInNode]) == null ? void 0 : u[g.indexXInNode]) == null ? void 0 : p.label
-          }, x = new pt(
+          }, E = new pt(
             t,
             v,
             [
@@ -2730,13 +2730,13 @@ class Ei {
             b.fit,
             b.shrink
           );
-          x.text = g.label, v.label = x, t.fields.add(x), x.updateInView();
+          E.text = g.label, v.label = E, t.fields.add(E), E.updateInView();
         }
         let w = 0;
         for (const b of g.ports || []) {
-          const x = b.type !== void 0 ? t.ports.types.get(b.type) : void 0, I = new It(
+          const E = b.type !== void 0 ? t.ports.types.get(b.type) : void 0, I = new It(
             t,
-            x,
+            E,
             v,
             b.coords,
             b.connectionPoint,
@@ -2744,10 +2744,10 @@ class Ei {
             b.id
           );
           if (v.ports.push(I), t.ports.add(I), b.label) {
-            if (s.ports.length > w && (x != null && x.label)) {
+            if (s.ports.length > w && (E != null && E.label)) {
               const T = {
                 ...D,
-                ...x == null ? void 0 : x.label
+                ...E == null ? void 0 : E.label
               };
               let M;
               switch (I.direction) {
@@ -2819,34 +2819,34 @@ class Ei {
               ...D,
               ...v == null ? void 0 : v.label
             };
-            let x;
+            let E;
             switch (w.direction) {
               case y.Top:
               case y.Left:
-                x = [
+                E = [
                   w.coords[0] - b.fontSize,
                   w.coords[1] - b.fontSize
                 ];
                 break;
               case y.Bottom:
-                x = [
+                E = [
                   w.coords[0] - b.fontSize,
                   w.coords[1] + b.fontSize
                 ];
                 break;
               case y.Right:
-                x = [
+                E = [
                   w.coords[0] + b.fontSize,
                   w.coords[1] - b.fontSize
                 ];
                 break;
               default:
-                x = w.coords;
+                E = w.coords;
             }
             const I = new pt(
               t,
               w,
-              x,
+              E,
               b.fontSize,
               b.fontSize,
               b.fontSize,
@@ -4165,9 +4165,9 @@ class _o {
    */
   open(t) {
     this.close();
-    const e = this.canvas.getPointerLocationRelativeToRoot(t), s = this.canvas.getPointerLocationRelativeToCanvas(t), r = 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(E.ContextMenu, (o) => {
+    const e = this.canvas.getPointerLocationRelativeToRoot(t), s = this.canvas.getPointerLocationRelativeToCanvas(t), r = 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(x.ContextMenu, (o) => {
       this.canvas.canUserPerformAction(S.ContextMenu) && (t.preventDefault(), this.open(o));
-    }).on(E.Click, (o) => {
+    }).on(x.Click, (o) => {
       o.preventDefault(), this.close();
     });
     this.contextMenuContainer = r;
@@ -4210,9 +4210,9 @@ class _o {
       const n = l[o], a = n.onPress, c = (o + 0.5 - l.length / 2) * Ro, h = r.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 * Z}px`).style("height", `${2 * Z}px`).style("border-radius", `${Z}px`).style("pointer-events", "auto").on(E.Click, (d) => {
+      ).attr("tabindex", 0).style("position", "absolute").style("box-sizing", "border-box").style("width", `${2 * Z}px`).style("height", `${2 * Z}px`).style("border-radius", `${Z}px`).style("pointer-events", "auto").on(x.Click, (d) => {
         a && (d.preventDefault(), a(this.canvas));
-      }).on(E.KeyDown, (d) => {
+      }).on(x.KeyDown, (d) => {
         a && d.key === et.Enter && (d.preventDefault(), a(this.canvas));
       });
       n.imageClass !== void 0 ? h.append("xhtml:div").style("position", "absolute").style("left", `${0.75 * Z}px`).style("top", `${0.5 * Z}px`).style("width", `${0.5 * Z}px`).style("height", `${0.5 * Z}px`).style("background-size", "contain").style("background-repeat", "no-repeat").attr("class", n.imageClass) : n.image !== void 0 && h.append("xhtml:img").style("position", "absolute").style("left", `${0.75 * Z}px`).style("top", `${0.5 * Z}px`).style("width", `${0.5 * Z}px`).style("height", `${0.5 * Z}px`).attr("src", n.image), h.append("xhtml:span").style("position", "absolute").style("left", `${0.2 * Z}px`).style("top", `${1.1 * Z}px`).style("text-align", "center").style("width", `${1.6 * Z}px`).style("height", `${0.35 * Z}px`).style("margin", "0").style("font-size", `${0.35 * Z}px`).style("font-weight", "700").style("user-select", "none").text(n.name), h.transition().ease(N.easeLinear).duration(Vo).tween("progress", () => (d) => {
@@ -4591,7 +4591,7 @@ const Fo = (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 s, r, l, o, n, a, c, h, d, u, p, m, f, g, v, w, b, x, I, T, M;
+    var s, r, l, o, n, a, c, h, d, u, p, m, f, g, v, w, b, E, I, T, M;
     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(
       this,
       void 0,
@@ -4601,7 +4601,7 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       e.properties || []
     ), this.userSelection = new Go(this), this.userHighlight = new Oo(this), this.contextMenu = new _o(this, (s = e.canvas) == null ? void 0 : s.contextMenu), this.backgroundColor = ((r = e.canvas) == null ? void 0 : r.backgroundColor) || "#FFFFFF", this.gridStyle = ((o = (l = e.canvas) == null ? void 0 : l.grid) == null ? void 0 : o.style) ?? Ot.style, this.gridSize = ((a = (n = e.canvas) == null ? void 0 : n.grid) == null ? void 0 : a.enabled) === !1 || ((c = e.canvas) == null ? void 0 : c.grid) === void 0 ? 0 : Math.abs(((d = (h = e.canvas) == null ? void 0 : h.grid) == null ? void 0 : d.spacing) || Ot.spacing), this.gridThickness = Math.abs(
       ((p = (u = e.canvas) == null ? void 0 : u.grid) == null ? void 0 : p.thickness) || Ot.thickness
-    ), this.gridColor = ((f = (m = e.canvas) == null ? void 0 : m.grid) == null ? void 0 : f.color) || Ot.color, this.snapToGrid = ((v = (g = e.canvas) == null ? void 0 : g.grid) == null ? void 0 : v.enabled) === !1 || ((w = e.canvas) == null ? void 0 : w.grid) === void 0 ? !1 : ((x = (b = e.canvas) == null ? void 0 : b.grid) == null ? void 0 : x.snap) || Ot.snap, this.zoomFactor = ((I = e.canvas) == null ? void 0 : I.zoomFactor) || 2, this.panRate = ((T = e.canvas) == null ? void 0 : T.panRate) || 100, this.inferConnectionType = e.inferConnectionType || !1, this.multipleSelectionOn = !1, this.priorityThresholds = ((M = e.canvas) == null ? void 0 : M.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.gridColor = ((f = (m = e.canvas) == null ? void 0 : m.grid) == null ? void 0 : f.color) || Ot.color, this.snapToGrid = ((v = (g = e.canvas) == null ? void 0 : g.grid) == null ? void 0 : v.enabled) === !1 || ((w = e.canvas) == null ? void 0 : w.grid) === void 0 ? !1 : ((E = (b = e.canvas) == null ? void 0 : b.grid) == null ? void 0 : E.snap) || Ot.snap, this.zoomFactor = ((I = e.canvas) == null ? void 0 : I.zoomFactor) || 2, this.panRate = ((T = e.canvas) == null ? void 0 : T.panRate) || 100, this.inferConnectionType = e.inferConnectionType || !1, this.multipleSelectionOn = !1, this.priorityThresholds = ((M = e.canvas) == null ? void 0 : M.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)
       for (const C of e.nodeTypes) {
         const z = new Si({
           ...e.nodeTypeDefaults,
@@ -4657,20 +4657,20 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
   // View methods
   initView(t) {
     const e = N.select(t);
-    e.html(""), this.diagramRoot = e.append("div").node(), N.select(this.diagramRoot).attr("tabindex", 0).style("width", "100%").style("height", "100%").append("svg").style("width", "100%").style("height", "100%"), N.select(this.diagramRoot).on(E.Click, () => {
+    e.html(""), this.diagramRoot = e.append("div").node(), N.select(this.diagramRoot).attr("tabindex", 0).style("width", "100%").style("height", "100%").append("svg").style("width", "100%").style("height", "100%"), N.select(this.diagramRoot).on(x.Click, () => {
       var r;
       (r = N.select(this.diagramRoot).node()) == null || r.focus();
-    }).on(E.ContextMenu, (r) => {
+    }).on(x.ContextMenu, (r) => {
       if (this.dragging) {
         r.preventDefault(), r.stopPropagation(), this.dragging = !1;
         return;
       }
       const l = new wt(r, null);
       this.diagramEvent$.next(l), !l.defaultPrevented && this.canUserPerformAction(S.ContextMenu) && (r.preventDefault(), this.contextMenu.open(r));
-    }).on(E.DoubleClick, (r) => {
+    }).on(x.DoubleClick, (r) => {
       const l = new kt(r, null);
       this.diagramEvent$.next(l);
-    }).on(E.KeyDown, (r) => {
+    }).on(x.KeyDown, (r) => {
       if (!r.ctrlKey && (r.key === et.Delete || r.key === et.Backspace) && this.canUserPerformAction(S.Remove) && (this.userSelection.removeFromModel(), this.cancelAllUserActions()), r.ctrlKey && r.key === "a") {
         r.preventDefault();
         for (const l of this.model.nodes)
@@ -4708,13 +4708,13 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
     });
     const s = this.selectSVGElement().append("g").attr("class", "daga-canvas-view").attr("width", "100%").attr("height", "100%");
     s.call(
-      this.zoomBehavior = N.zoom().on(fe.Zoom, (r) => {
+      this.zoomBehavior = N.zoom().filter((r) => r.type !== x.DoubleClick).on(fe.Zoom, (r) => {
         if (r.sourceEvent) {
           if (!this.canUserPerformAction(S.Zoom)) {
             A(P.NotAllowed);
             return;
           }
-          r.sourceEvent.type === E.Wheel && r.sourceEvent.wheelDelta !== void 0 ? (r.sourceEvent.wheelDelta > 0 && A(P.ZoomIn), r.sourceEvent.wheelDelta < 0 && A(P.ZoomOut)) : r.sourceEvent.type === E.MouseMove && A(P.AllScroll);
+          r.sourceEvent.type === x.Wheel && r.sourceEvent.wheelDelta !== void 0 ? (r.sourceEvent.wheelDelta > 0 && A(P.ZoomIn), r.sourceEvent.wheelDelta < 0 && A(P.ZoomOut)) : r.sourceEvent.type === x.MouseMove && A(P.AllScroll);
         }
         this.zoomTransform = r.transform;
         const l = r.transform.toString();
@@ -4725,14 +4725,14 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       }).on(fe.End, () => {
         A();
       })
-    ), s.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("fill", this.backgroundColor).attr("stroke-width", "0").on(E.MouseMove, (r) => {
+    ), s.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("fill", this.backgroundColor).attr("stroke-width", "0").on(x.MouseMove, (r) => {
       if (this.unfinishedConnection !== void 0) {
         const l = this.getPointerLocationRelativeToCanvas(r);
         this.unfinishedConnection.endCoords = l;
       }
-    }).on(E.MouseOver, () => {
+    }).on(x.MouseOver, () => {
       this.userHighlight.size() > 0 && (this.userHighlight.clear(), this.diagramEvent$.next(new ot(null)));
-    }).on(E.Click, () => {
+    }).on(x.Click, () => {
       if (this.userHighlight.size() > 0 && (this.userHighlight.clear(), this.diagramEvent$.next(new ot(null))), this.contextMenu.close(), this.userSelection.size() > 0) {
         const r = this.userSelection.all();
         this.userSelection.clear(), this.diagramEvent$.next(
@@ -4849,9 +4849,9 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
     );
     t && t.length > 0 && (e = e.filter((o) => t.includes(o.id)));
     const l = r.merge(e);
-    s.remove(), r.on(E.MouseOver, (o, n) => {
+    s.remove(), r.on(x.MouseOver, (o, n) => {
       this.dragging || (this.userHighlight.focusOn(n), this.diagramEvent$.next(new ot(n)));
-    }).on(E.Click, (o, n) => {
+    }).on(x.Click, (o, n) => {
       if (!o.ctrlKey && !o.shiftKey) {
         const a = this.userSelection.all();
         this.userSelection.clear(), this.diagramEvent$.next(
@@ -4859,14 +4859,14 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         );
       }
       this.userSelection.toggle(n), this.diagramEvent$.next(new F([n], n.selected));
-    }).on(E.ContextMenu, (o, n) => {
+    }).on(x.ContextMenu, (o, n) => {
       if (this.dragging) {
         o.preventDefault(), o.stopPropagation(), this.dragging = !1;
         return;
       }
       const a = new wt(o, n);
       this.diagramEvent$.next(a), !a.defaultPrevented && this.canUserPerformAction(S.ContextMenu) && (o.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(o));
-    }).on(E.DoubleClick, (o, n) => {
+    }).on(x.DoubleClick, (o, n) => {
       const a = new kt(o, n);
       this.diagramEvent$.next(a);
     }).call(
@@ -4879,9 +4879,9 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       })
     ), ge(
       r
-    ), r.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(E.MouseOver, (o, n) => {
+    ), r.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(x.MouseOver, (o, n) => {
       this.canUserPerformAction(S.StretchNode) && n.type.resizableX && !n.removed && A(P.EWResize);
-    }).on(E.MouseOut, (o, n) => {
+    }).on(x.MouseOut, (o, n) => {
       this.canUserPerformAction(S.StretchNode) && n.type.resizableX && !n.removed && A();
     }).call(
       N.drag().on($.Start, (o, n) => {
@@ -4904,9 +4904,9 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         }
         A();
       })
-    ), r.filter(".resizable-y").append("line").attr("class", "top-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(E.MouseOver, (o, n) => {
+    ), r.filter(".resizable-y").append("line").attr("class", "top-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(x.MouseOver, (o, n) => {
       this.canUserPerformAction(S.StretchNode) && n.type.resizableY && !n.removed && A(P.NSResize);
-    }).on(E.MouseOut, (o, n) => {
+    }).on(x.MouseOut, (o, n) => {
       this.canUserPerformAction(S.StretchNode) && n.type.resizableY && !n.removed && A();
     }).call(
       N.drag().on($.Start, (o, n) => {
@@ -4929,9 +4929,9 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         }
         A();
       })
-    ), r.filter(".resizable-x").append("line").attr("class", "right-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(E.MouseOver, (o, n) => {
+    ), r.filter(".resizable-x").append("line").attr("class", "right-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(x.MouseOver, (o, n) => {
       this.canUserPerformAction(S.StretchNode) && n.type.resizableX && !n.removed && A(P.EWResize);
-    }).on(E.MouseOut, (o, n) => {
+    }).on(x.MouseOut, (o, n) => {
       this.canUserPerformAction(S.StretchNode) && n.type.resizableX && !n.removed && A();
     }).call(
       N.drag().on($.Start, (o, n) => {
@@ -4954,9 +4954,9 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         }
         A();
       })
-    ), r.filter(".resizable-y").append("line").attr("class", "bottom-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(E.MouseOver, (o, n) => {
+    ), r.filter(".resizable-y").append("line").attr("class", "bottom-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(x.MouseOver, (o, n) => {
       this.canUserPerformAction(S.StretchNode) && n.type.resizableY && !n.removed && A(P.NSResize);
-    }).on(E.MouseOut, (o, n) => {
+    }).on(x.MouseOut, (o, n) => {
       this.canUserPerformAction(S.StretchNode) && n.type.resizableY && !n.removed && A();
     }).call(
       N.drag().on($.Start, (o, n) => {
@@ -5005,9 +5005,9 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
     );
     t && t.length > 0 && (e = e.filter((o) => t.includes(o.id)));
     const l = r.merge(e);
-    s.remove(), r.on(E.MouseOver, (o, n) => {
+    s.remove(), r.on(x.MouseOver, (o, n) => {
       this.dragging || (this.userHighlight.focusOn(n), this.diagramEvent$.next(new ot(n)));
-    }).on(E.Click, (o, n) => {
+    }).on(x.Click, (o, n) => {
       if (!o.ctrlKey && !o.shiftKey) {
         const c = this.userSelection.all();
         this.userSelection.clear(), this.diagramEvent$.next(
@@ -5021,7 +5021,7 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
           a.selected
         )
       );
-    }).on(E.ContextMenu, (o, n) => {
+    }).on(x.ContextMenu, (o, n) => {
       if (this.dragging) {
         o.preventDefault(), o.stopPropagation(), this.dragging = !1;
         return;
@@ -5034,7 +5034,7 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
           new F([c], !0)
         ), this.contextMenu.open(o);
       }
-    }).on(E.DoubleClick, (o, n) => {
+    }).on(x.DoubleClick, (o, n) => {
       const a = new kt(o, n);
       this.diagramEvent$.next(a);
     }).call(
@@ -5063,9 +5063,9 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       })
     ), ge(
       r
-    ), r.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(E.MouseOver, (o, n) => {
+    ), r.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(x.MouseOver, (o, n) => {
       this.canUserPerformAction(S.StretchSection) && n.getResizableX() && !n.removed && A(P.EWResize);
-    }).on(E.MouseOut, (o, n) => {
+    }).on(x.MouseOut, (o, n) => {
       this.canUserPerformAction(S.StretchSection) && n.getResizableX() && !n.removed && A();
     }).call(
       N.drag().on($.Start, (o, n) => {
@@ -5098,9 +5098,9 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         }
         A();
       })
-    ), r.filter(".resizable-y").append("line").attr("class", "top-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(E.MouseOver, (o, n) => {
+    ), r.filter(".resizable-y").append("line").attr("class", "top-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(x.MouseOver, (o, n) => {
       this.canUserPerformAction(S.StretchSection) && n.getResizableY() && !n.removed && A(P.NSResize);
-    }).on(E.MouseOut, (o, n) => {
+    }).on(x.MouseOut, (o, n) => {
       this.canUserPerformAction(S.StretchSection) && n.getResizableY() && !n.removed && A();
     }).call(
       N.drag().on($.Start, (o, n) => {
@@ -5133,9 +5133,9 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         }
         A();
       })
-    ), r.filter(".resizable-x").append("line").attr("class", "right-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(E.MouseOver, (o, n) => {
+    ), r.filter(".resizable-x").append("line").attr("class", "right-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(x.MouseOver, (o, n) => {
       this.canUserPerformAction(S.StretchSection) && n.getResizableX() && !n.removed && A(P.EWResize);
-    }).on(E.MouseOut, (o, n) => {
+    }).on(x.MouseOut, (o, n) => {
       this.canUserPerformAction(S.StretchSection) && n.getResizableX() && !n.removed && A();
     }).call(
       N.drag().on($.Start, (o, n) => {
@@ -5168,9 +5168,9 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         }
         A();
       })
-    ), r.filter(".resizable-y").append("line").attr("class", "bottom-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(E.MouseOver, (o, n) => {
+    ), r.filter(".resizable-y").append("line").attr("class", "bottom-resizer").attr("stroke", "transparent").attr("stroke-width", `${G}px`).on(x.MouseOver, (o, n) => {
       this.canUserPerformAction(S.StretchSection) && n.getResizableY() && !n.removed && A(P.NSResize);
-    }).on(E.MouseOut, (o, n) => {
+    }).on(x.MouseOut, (o, n) => {
       this.canUserPerformAction(S.StretchSection) && n.getResizableY() && !n.removed && A();
     }).call(
       N.drag().on($.Start, (o, n) => {
@@ -5217,7 +5217,7 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
     const s = e.exit(), r = e.enter().append("g").attr("id", (o) => o.id).attr("class", (o) => `diagram-port ${o.look.lookType}`);
     t && t.length > 0 && (e = e.filter((o) => t.includes(o.id)));
     const l = r.merge(e);
-    s.remove(), r.on(E.MouseOver, (o, n) => {
+    s.remove(), r.on(x.MouseOver, (o, n) => {
       var a, c, h, d, u, p, m, f, g, v, w, b;
       !this.unfinishedConnection && !this.dragging && (this.userHighlight.focusOn(n), this.diagramEvent$.next(new ot(n))), this.unfinishedConnection && (// can start at the starting port
       this.unfinishedConnection.type.canStartFromType(
@@ -5232,9 +5232,9 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       this.unfinishedConnection.type.canFinishOnType(
         ((w = (v = (g = this.unfinishedConnection.start) == null ? void 0 : g.getNode()) == null ? void 0 : v.type) == null ? void 0 : w.id) || ""
       ) && ((b = this.unfinishedConnection.start) != null && b.allowsIncoming) || A(P.NoDrop));
-    }).on(E.MouseOut, () => {
+    }).on(x.MouseOut, () => {
       this.unfinishedConnection && A(P.Grabbing);
-    }).on(E.Click, (o, n) => {
+    }).on(x.Click, (o, n) => {
       if (!o.ctrlKey && !o.shiftKey) {
         const c = this.userSelection.all();
         this.userSelection.clear(), this.diagramEvent$.next(
@@ -5248,7 +5248,7 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
           a.selected
         )
       );
-    }).on(E.ContextMenu, (o, n) => {
+    }).on(x.ContextMenu, (o, n) => {
       if (this.dragging) {
         o.preventDefault(), o.stopPropagation(), this.dragging = !1;
         return;
@@ -5261,7 +5261,7 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
           new F([c], !0)
         ), this.contextMenu.open(o);
       }
-    }).on(E.DoubleClick, (o, n) => {
+    }).on(x.DoubleClick, (o, n) => {
       const a = new kt(o, n);
       this.diagramEvent$.next(a);
     }).call(
@@ -5362,9 +5362,9 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
     const r = s.exit(), l = s.enter().append("g").attr("id", (n) => n.id).attr("class", "diagram-connection");
     t && t.length > 0 && (s = s.filter((n) => t.includes(n.id)));
     const o = l.merge(s);
-    r.remove(), l.on(E.MouseOver, (n, a) => {
+    r.remove(), l.on(x.MouseOver, (n, a) => {
       a.end !== void 0 && !this.dragging && (this.userHighlight.focusOn(a), this.diagramEvent$.next(new ot(a)));
-    }).on(E.Click, (n, a) => {
+    }).on(x.Click, (n, a) => {
       if (!n.ctrlKey && !n.shiftKey) {
         const c = this.userSelection.all();
         this.userSelection.clear(), this.diagramEvent$.next(
@@ -5372,14 +5372,14 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
         );
       }
       this.userSelection.toggle(a), this.diagramEvent$.next(new F([a], a.selected));
-    }).on(E.ContextMenu, (n, a) => {
+    }).on(x.ContextMenu, (n, a) => {
       if (this.dragging) {
         n.preventDefault(), n.stopPropagation(), this.dragging = !1;
         return;
       }
       const c = new wt(n, a);
       this.diagramEvent$.next(c), !c.defaultPrevented && this.canUserPerformAction(S.ContextMenu) && (n.preventDefault(), this.userHighlight.focusOn(a), this.diagramEvent$.next(new ot(a)), this.userSelection.add(a), this.diagramEvent$.next(new F([a], !0)), this.contextMenu.open(n));
-    }).on(E.DoubleClick, (n, a) => {
+    }).on(x.DoubleClick, (n, a) => {
       const c = new kt(n, a);
       this.diagramEvent$.next(c);
     }).call(
@@ -5445,9 +5445,9 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
     const s = e.exit(), r = e.enter().append("foreignObject").attr("id", (o) => o.id).attr("class", "diagram-field");
     t && t.length > 0 && (e = e.filter((o) => t.includes(o.id)));
     const l = r.merge(e);
-    s.remove(), r.style("box-sizing", "border-box").on(E.MouseOver, (o, n) => {
+    s.remove(), r.style("box-sizing", "border-box").on(x.MouseOver, (o, n) => {
       this.dragging || (this.userHighlight.focusOn(n), this.diagramEvent$.next(new ot(n)));
-    }).on(E.Click, (o, n) => {
+    }).on(x.Click, (o, n) => {
       if (!o.ctrlKey && !o.shiftKey) {
         const c = this.userSelection.all();
         this.userSelection.clear(), this.diagramEvent$.next(
@@ -5461,7 +5461,7 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
           a.selected
         )
       );
-    }).on(E.ContextMenu, (o, n) => {
+    }).on(x.ContextMenu, (o, n) => {
       if (this.dragging) {
         o.preventDefault(), o.stopPropagation(), this.dragging = !1;
         return;
@@ -5474,7 +5474,7 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
           new F([c], !0)
         ), this.contextMenu.open(o);
       }
-    }).on(E.DoubleClick, (o, n) => {
+    }).on(x.DoubleClick, (o, n) => {
       const a = new kt(o, n);
       this.diagramEvent$.next(a), !a.defaultPrevented && this.canUserPerformAction(S.EditField) && n.editable && !n.removed && (this.currentAction = new di(this, n.id, n.text, ""), this.createInputField(
         n.text,
@@ -5549,14 +5549,14 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       (o) => o.id
     );
     const s = e.exit(), r = e.enter().append("foreignObject").attr("id", (o) => o.id).attr("class", "diagram-object");
-    t && t.length > 0 && (e = e.filter((o) => t.includes(o.id))), r.merge(e).attr("width", (o) => `${o.width}px`).attr("height", (o) => `${o.height}px`).attr("transform", (o) => `translate(${o.coords[0]},${o.coords[1]})`).html((o) => o.html), s.remove(), r.on(E.ContextMenu, (o, n) => {
+    t && t.length > 0 && (e = e.filter((o) => t.includes(o.id))), r.merge(e).attr("width", (o) => `${o.width}px`).attr("height", (o) => `${o.height}px`).attr("transform", (o) => `translate(${o.coords[0]},${o.coords[1]})`).html((o) => o.html), s.remove(), r.on(x.ContextMenu, (o, n) => {
       if (this.dragging) {
         o.preventDefault(), o.stopPropagation(), this.dragging = !1;
         return;
       }
       const a = new wt(o, n);
       this.diagramEvent$.next(a), !a.defaultPrevented && this.canUserPerformAction(S.ContextMenu) && (o.preventDefault(), this.contextMenu.open(o));
-    }).on(E.DoubleClick, (o, n) => {
+    }).on(x.DoubleClick, (o, n) => {
       const a = new kt(o, n);
       this.diagramEvent$.next(a);
     }).call(
@@ -5579,9 +5579,9 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
       (o) => o.id
     );
     const s = e.exit(), r = e.enter().append("foreignObject").attr("id", (o) => o.id).attr("class", "diagram-decorator");
-    t && t.length > 0 && (e = e.filter((o) => t.includes(o.id))), r.merge(e).attr("width", (o) => `${o.width}px`).attr("height", (o) => `${o.height}px`).attr("transform", (o) => `translate(${o.coords[0]},${o.coords[1]})`).html((o) => o.html), s.remove(), r.on(E.MouseOver, (o, n) => {
+    t && t.length > 0 && (e = e.filter((o) => t.includes(o.id))), r.merge(e).attr("width", (o) => `${o.width}px`).attr("height", (o) => `${o.height}px`).attr("transform", (o) => `translate(${o.coords[0]},${o.coords[1]})`).html((o) => o.html), s.remove(), r.on(x.MouseOver, (o, n) => {
       this.dragging || (this.userHighlight.focusOn(n), this.diagramEvent$.next(new ot(n)));
-    }).on(E.Click, (o, n) => {
+    }).on(x.Click, (o, n) => {
       if (!o.ctrlKey && !o.shiftKey) {
         const a = this.userSelection.all();
         this.userSelection.clear(), this.diagramEvent$.next(
@@ -5597,7 +5597,7 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
           )
         );
       }
-    }).on(E.ContextMenu, (o, n) => {
+    }).on(x.ContextMenu, (o, n) => {
       if (this.dragging) {
         o.preventDefault(), o.stopPropagation(), this.dragging = !1;
         return;
@@ -5612,7 +5612,7 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
           new F([c], !0)
         ), this.contextMenu.open(o);
       }
-    }).on(E.DoubleClick, (o, n) => {
+    }).on(x.DoubleClick, (o, n) => {
       const a = new kt(o, n);
       this.diagramEvent$.next(a);
     }).call(
@@ -5851,7 +5851,7 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
     }
   }
   finishConnection(t) {
-    var e, s, r, l, o, n, a, c, h, d, u, p, m, f, g, v, w, b, x, I;
+    var e, s, r, l, o, n, a, c, h, d, u, p, m, f, g, v, w, b, E, I;
     if (this.userHighlight.clear(), this.unfinishedConnection !== void 0)
       if (this.unfinishedConnection.start !== t)
         if (this.unfinishedConnection.type.canStartFromType(
@@ -5898,7 +5898,7 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
             const C = new de(
               this,
               T,
-              M ? t.id : (x = this.unfinishedConnection.start) == null ? void 0 : x.id,
+              M ? t.id : (E = this.unfinishedConnection.start) == null ? void 0 : E.id,
               M ? (I = this.unfinishedConnection.start) == null ? void 0 : I.id : t.id
             );
             this.dropConnection(), C.do(), this.actionStack.add(C);
@@ -5925,21 +5925,21 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
     this.inputFieldContainer = h;
     const d = h.append("xhtml:textarea");
     let u, p;
-    d.text(t).style("box-sizing", "border-box").style("width", `${s}px`).style("height", `${r}px`).style("font-size", `${l}px`).style("font-family", o).style("resize", "none").style("outline", 0).style("border", 0).style("margin", 0).style("padding", 0).on(E.KeyDown, (f) => {
+    d.text(t).style("box-sizing", "border-box").style("width", `${s}px`).style("height", `${r}px`).style("font-size", `${l}px`).style("font-family", o).style("resize", "none").style("outline", 0).style("border", 0).style("margin", 0).style("padding", 0).on(x.KeyDown, (f) => {
       f.stopPropagation();
-    }).on(E.KeyUp, (f) => {
+    }).on(x.KeyUp, (f) => {
       if (f.stopPropagation(), f.key === et.Escape) {
         const g = d.property("value");
         this.removeInputField(), c && c(g);
       }
-    }).on(E.Input, () => {
+    }).on(x.Input, () => {
       const f = d.property("value");
       d.attr("cols", to(f) + 1), d.attr("rows", eo(f) + 1), d.style("width", ""), d.style("height", ""), u = d.property("scrollWidth") + 1, p = d.property("scrollHeight") + 1;
       const g = Math.max(u, s), v = Math.max(p, r);
       h == null || h.attr("width", `${g}px`), d.style("width", `${g}px`), h == null || h.attr("height", `${v}px`), d.style("height", `${v}px`), a && a(f);
-    }).on(E.Click, (f) => {
+    }).on(x.Click, (f) => {
       f.stopPropagation();
-    }).on(E.FocusOut, () => {
+    }).on(x.FocusOut, () => {
       const f = d.property("value");
       this.removeInputField(), c && c(f);
     });
@@ -5948,7 +5948,7 @@ const Fo = (i) => i * Math.PI / 180, gi = (i, t, e) => {
   }
   removeInputField() {
     var t, e, s;
-    (e = (t = this.inputFieldContainer) == null ? void 0 : t.select("input")) == null || e.on(E.Blur, null), (s = this.inputFieldContainer) == null || s.remove(), this.inputFieldContainer = void 0;
+    (e = (t = this.inputFieldContainer) == null ? void 0 : t.select("input")) == null || e.on(x.Blur, null), (s = this.inputFieldContainer) == null || s.remove(), this.inputFieldContainer = void 0;
   }
   minimumSizeOfField(t) {
     var r, l;
@@ -6353,8 +6353,8 @@ class Wo {
             f.coords
           ), b = [f.coords[0], f.coords[1]];
           if (m.includes(f) && w > 0 && (w > e + (Math.max(p.width, p.height) + Math.max(f.width, f.height)) / 2 ? (b[0] = b[0] - (v[0] - g[0]) * l, b[1] = b[1] - (v[1] - g[1]) * l) : (b[0] = b[0] + (v[0] - g[0]) * n, b[1] = b[1] + (v[1] - g[1]) * n)), w > 0) {
-            const x = o / (w * w);
-            b[0] = b[0] + x * (v[0] - g[0]) / w, b[1] = b[1] + x * (v[1] - g[1]) / w;
+            const E = o / (w * w);
+            b[0] = b[0] + E * (v[0] - g[0]) / w, b[1] = b[1] + E * (v[1] - g[1]) / w;
           } else
             b[0] = b[0] + a * (Math.random() * 2 - 1), b[1] = b[1] + a * (Math.random() * 2 - 1);
           b[0] = b[0] - (v[0] - u[0]) * c, b[1] = b[1] - (v[1] - u[1]) * c, b[0] - f.coords[0] > h ? b[0] = f.coords[0] + h : b[0] - f.coords[0] < -h && (b[0] = f.coords[0] - h), b[1] - f.coords[1] > h ? b[1] = f.coords[1] + h : b[1] - f.coords[1] < -h && (b[1] = f.coords[1] - h), f.move(b);
@@ -6711,7 +6711,7 @@ const Se = ({
           n === void 0 ? (I(t.length - 1), M(t.length - 1)) : (I(n - 1), M(n)), L.preventDefault();
           break;
         case et.Escape:
-          x(), L.preventDefault();
+          E(), L.preventDefault();
           break;
         case et.Enter:
           z(t[n || 0]), L.preventDefault();
@@ -6746,7 +6746,7 @@ const Se = ({
       }
       v(!0);
     }
-  }, x = () => {
+  }, E = () => {
     v(!1);
   }, I = (L) => {
     if (!i) {
@@ -6756,7 +6756,7 @@ const Se = ({
     }
   }, T = () => {
     setTimeout(() => {
-      x();
+      E();
     }, is);
   }, M = (L) => {
     var q;
@@ -6943,26 +6943,26 @@ const Se = ({
     const b = w === "blur" ? v.trim() : v;
     if (w === "blur") {
       if (g !== b) {
-        const x = {};
+        const E = {};
         Object.keys(t).forEach((I) => {
-          I === g ? x[b] = t[I] : x[I] = t[I];
-        }), e(x), a((I) => {
+          I === g ? E[b] = t[I] : E[I] = t[I];
+        }), e(E), a((I) => {
           const T = { ...I };
           return delete T[g], T;
         });
       }
     } else
-      a((x) => ({
-        ...x,
+      a((E) => ({
+        ...E,
         [g]: v
       }));
   }, d = (g, v, w) => {
     const b = w === "blur" ? v.trim() : v;
     if (b !== "") {
-      const x = {};
+      const E = {};
       Object.keys(t).forEach((I) => {
-        I === g ? x[I] = b : x[I] = t[I];
-      }), e(x);
+        I === g ? E[I] = b : E[I] = t[I];
+      }), e(E);
     }
   }, u = () => {
     const g = s.trim(), v = l.trim();
@@ -7411,14 +7411,14 @@ const Se = ({
     g.append("option").attr("value", "").text("(None selected)");
     for (const v in f)
       g.append("option").attr("value", v).text(v);
-    g.on(E.Change, () => {
+    g.on(x.Change, () => {
       o && h().selectAll(".daga-template-container.daga-in-category").remove();
       const v = g.property("value");
       n(v);
       const w = f[v] || [];
       for (const b of w)
         u(b, "daga-in-category");
-    }), o && (g.property("value", o), g.dispatch(E.Change));
+    }), o && (g.property("value", o), g.dispatch(x.Change));
   }, u = (f, g) => {
     if (f.templateType === "node") {
       const v = t.model.nodes.types.get(f.type);
@@ -7432,7 +7432,7 @@ const Se = ({
   }, p = (f, g, v) => {
     if (r !== void 0 && f.priority < r)
       return;
-    const w = f.defaultLook.lookType === "shaped-look" ? f.defaultLook.borderThickness : 0, b = f.defaultHeight + w, x = f.defaultWidth + w, I = g.height || b, T = g.width || x, M = h().append("div").attr(
+    const w = f.defaultLook.lookType === "shaped-look" ? f.defaultLook.borderThickness : 0, b = f.defaultHeight + w, E = f.defaultWidth + w, I = g.height || b, T = g.width || E, M = h().append("div").attr(
       "class",
       `daga-template-container ${v !== void 0 ? v : ""}`
     ).style("width", `${T}px`).style("height", `${I}px`).call(
@@ -7501,7 +7501,7 @@ const Se = ({
           _t.do(), t == null || t.actionStack.add(_t), A();
         }
       })
-    ).append("svg").attr("class", `palette-node ${f.id}`).attr("viewBox", `0 0 ${x} ${b}`).attr("preserveAspectRatio", "none").style("position", "relative").style("left", 0).style("top", 0).style("width", `${T}px`).style("height", `${I}px`), C = g.look || f.defaultLook;
+    ).append("svg").attr("class", `palette-node ${f.id}`).attr("viewBox", `0 0 ${E} ${b}`).attr("preserveAspectRatio", "none").style("position", "relative").style("left", 0).style("top", 0).style("width", `${T}px`).style("height", `${I}px`), C = g.look || f.defaultLook;
     switch (C.lookType) {
       case "shaped-look":
         M.append("path").attr(
@@ -7671,7 +7671,7 @@ const Se = ({
         }, 500);
   }, w = Yt(Lt), b = () => {
     w.zoomBy(w.zoomFactor);
-  }, x = () => {
+  }, E = () => {
     w.zoomBy(1 / w.zoomFactor);
   }, I = () => {
     w.center();
@@ -7713,7 +7713,7 @@ const Se = ({
       className: `daga-diagram-buttons daga-${i} daga-${t}`,
       children: [
         o && w.canUserPerformAction(S.Zoom) && /* @__PURE__ */ k("button", { className: "daga-zoom-in", onClick: b, children: /* @__PURE__ */ k("span", { className: "daga-tooltip", children: "Zoom in" }) }),
-        o && w.canUserPerformAction(S.Zoom) && /* @__PURE__ */ k("button", { className: "daga-zoom-out", onClick: x, children: /* @__PURE__ */ k("span", { className: "daga-tooltip", children: "Zoom out" }) }),
+        o && w.canUserPerformAction(S.Zoom) && /* @__PURE__ */ k("button", { className: "daga-zoom-out", onClick: E, children: /* @__PURE__ */ k("span", { className: "daga-tooltip", children: "Zoom out" }) }),
         /* @__PURE__ */ V("div", { className: "daga-collapsable-buttons daga-collapsed", ref: m, children: [
           o && w.canUserPerformAction(S.Zoom) && /* @__PURE__ */ k("button", { className: "daga-center", onClick: I, children: /* @__PURE__ */ k("span", { className: "daga-tooltip", children: "Fit diagram to screen" }) }),
           e && /* @__PURE__ */ k("button", { className: "daga-undo", onClick: C, children: /* @__PURE__ */ k("span", { className: "daga-tooltip", children: "Undo" }) }),
@@ -7763,24 +7763,24 @@ const Se = ({
     diagramButtons: f,
     palette: g,
     propertyEditor: v
-  }, b = (ht = !1) => ((!a.current || ht) && (h.forEach((mt) => mt.unsubscribe()), a.current = new be(w, i)), a.current), x = b(), I = (ht) => {
-    x.initView(ht), h.push(
-      x.diagramEvent$.subscribe((mt) => {
+  }, b = (ht = !1) => ((!a.current || ht) && (h.forEach((mt) => mt.unsubscribe()), a.current = new be(w, i)), a.current), E = b(), I = (ht) => {
+    E.initView(ht), h.push(
+      E.diagramEvent$.subscribe((mt) => {
         s == null || s(mt);
       })
     ), h.push(
-      x.diagramChange$.subscribe(() => {
-        const mt = o.export(x.model);
+      E.diagramChange$.subscribe(() => {
+        const mt = o.export(E.model);
         r == null || r(mt);
       })
     );
   };
   Tt(() => {
-    n.current && (c.current || (I(n.current), c.current = !0, e == null || e(x)));
+    n.current && (c.current || (I(n.current), c.current = !0, e == null || e(E)));
   }, [n.current]), Bi(() => {
-    n.current && (b(!0), I(n.current), e == null || e(x));
+    n.current && (b(!0), I(n.current), e == null || e(E));
   }, [i]), Tt(() => {
-    t && l.import(x.model, t);
+    t && l.import(E.model, t);
   }, [t]);
   const T = (ht, mt, ti) => {
     var ei;
@@ -7790,12 +7790,12 @@ const Se = ({
         p.propertySet,
         p.rootElement
       );
-      ae.setValues(p.getValues()), v.valueSet = ae, p.rootElement.valueSet = ae, (ei = x.propertyEditorChanges$) == null || ei.next();
+      ae.setValues(p.getValues()), v.valueSet = ae, p.rootElement.valueSet = ae, (ei = E.propertyEditorChanges$) == null || ei.next();
     }
   };
-  return /* @__PURE__ */ k("daga-diagram", { children: /* @__PURE__ */ k(Qo.Provider, { value: i, children: /* @__PURE__ */ k(Lt.Provider, { value: x, children: /* @__PURE__ */ V("daga-diagram-editor", { children: [
+  return /* @__PURE__ */ k("daga-diagram", { children: /* @__PURE__ */ k(Qo.Provider, { value: i, children: /* @__PURE__ */ k(Lt.Provider, { value: E, children: /* @__PURE__ */ V("daga-diagram-editor", { children: [
     /* @__PURE__ */ k("div", { className: "daga-append-to", ref: n }),
-    /* @__PURE__ */ V(Lt.Provider, { value: x, children: [
+    /* @__PURE__ */ V(Lt.Provider, { value: E, children: [
       ((M = i.components) == null ? void 0 : M.buttons) !== void 0 && ((z = (C = i.components) == null ? void 0 : C.buttons) == null ? void 0 : z.enabled) !== !1 && /* @__PURE__ */ k(
         hs,
         {