@metadev/daga-react 5.0.5 → 5.1.0

package/index.mjs

@@ -43,19 +43,19 @@ var p = /* @__PURE__ */ function(e) {
 	return e.Straight = "straight", e.Bezier = "bezier", e.Square = "square", e;
 }({}), te = /* @__PURE__ */ function(e) {
 	return e.Solid = "solid", e.Dashed = "dashed", e.GappedDashes = "gapped-dashes", e.Dotted = "dotted", e;
-}({}), ne = 20, re = (e, t, n, r, i) => {
+}({}), O = 20, ne = (e, t, n, r, i) => {
 	if (typeof e == "function") return e(t, n, r, i);
 	if (t.length === 0) return "";
 	if (t.length === 1) return `M ${t[0][0]} ${t[0][1]}`;
 	{
-		i ||= ne;
+		i ||= O;
 		let a = "", o, s;
 		switch (e) {
-			case D.Straight:
+			case "straight":
 				a += `M ${t[0][0]} ${t[0][1]}`;
 				for (let e = 1; e < t.length; ++e) a += ` L ${t[e][0]} ${t[e][1]}`;
 				break;
-			case D.Bezier:
+			case "bezier":
 				o = n, a += `M ${t[0][0]} ${t[0][1]}`;
 				for (let e = 1; e < t.length; ++e) {
 					if (e + 1 >= t.length) switch (r) {
@@ -127,7 +127,7 @@ var p = /* @__PURE__ */ function(e) {
 					o = s;
 				}
 				break;
-			case D.Square:
+			case "square":
 				o = n, a += `M ${t[0][0]} ${t[0][1]}`;
 				for (let e = 1; e < t.length; ++e) {
 					if (e + 1 >= t.length) switch (r) {
@@ -228,32 +228,31 @@ var p = /* @__PURE__ */ function(e) {
 		}
 		return a;
 	}
-}, ie = (e, t) => {
+}, re = (e, t) => {
 	switch (e) {
-		case te.Dotted: return `${t}`;
-		case te.Dashed: return `${4 * t} ${t}`;
-		case te.GappedDashes: return `${4 * t} ${4 * t}`;
-		case te.Solid:
+		case "dotted": return `${t}`;
+		case "dashed": return `${4 * t} ${t}`;
+		case "gapped-dashes": return `${4 * t} ${4 * t}`;
 		default: return "none";
 	}
-}, O = (e, t) => {
+}, k = (e, t) => {
 	let n = e.indexOf(t);
 	return n >= 0 && e.splice(n, 1), e;
-}, k = /* @__PURE__ */ function(e) {
+}, ie = /* @__PURE__ */ function(e) {
 	return e.Ellipse = "ellipse", e.Empty = "empty", e.Folder = "folder", e.Hexagon = "hexagon", e.Octagon = "octagon", e.Pill = "pill", e.Rectangle = "rectangle", e.Rhombus = "rhombus", e.RoundedRectangle = "rounded-rectangle", e.StickyNote = "sticky-note", e;
 }({}), ae = (e, t, n, r, i) => {
 	if (typeof e == "function") return e(t, n, r, i);
 	switch (e) {
-		case k.Ellipse: return oe(t, n, r, i);
-		case k.Empty: return se();
-		case k.Folder: return ce(t, n, r, i);
-		case k.Hexagon: return le(t, n, r, i);
-		case k.Octagon: return ue(t, n, r, i);
-		case k.Pill: return de(t, n, r, i);
-		case k.Rectangle: return fe(t, n, r, i);
-		case k.Rhombus: return pe(t, n, r, i);
-		case k.RoundedRectangle: return me(t, n, r, i);
-		case k.StickyNote: return he(t, n, r, i);
+		case "ellipse": return oe(t, n, r, i);
+		case "empty": return se();
+		case "folder": return ce(t, n, r, i);
+		case "hexagon": return le(t, n, r, i);
+		case "octagon": return ue(t, n, r, i);
+		case "pill": return de(t, n, r, i);
+		case "rectangle": return fe(t, n, r, i);
+		case "rhombus": return pe(t, n, r, i);
+		case "rounded-rectangle": return me(t, n, r, i);
+		case "sticky-note": return he(t, n, r, i);
 		default: return fe(t, n, r, i);
 	}
 }, oe = (e, t, n, r) => `M ${e + n / 2} ${t} A ${n / 2} ${r / 2} 0 0 0 ${e + n / 2} ${t + r} A ${n / 2} ${r / 2} 0 1 0 ${e + n / 2} ${t} Z`, se = () => "Z", ce = (e, t, n, r) => `M ${e} ${t} L ${e + n / 3} ${t} L ${e + n / 2} ${t + r / 6} L ${e + n} ${t + r / 6} L ${e + n} ${t + r} L ${e} ${t + r} Z`, le = (e, t, n, r) => `M ${e + n / 4} ${t} L ${e + 3 * n / 4} ${t} L ${e + n} ${t + r / 2} L ${e + 3 * n / 4} ${t + r} L ${e + n / 4} ${t + r} L ${e} ${t + r / 2} Z`, ue = (e, t, n, r) => `M ${e + n / 4} ${t} L ${e + 3 * n / 4} ${t} L ${e + n} ${t + r / 4} L ${e + n} ${t + 3 * r / 4} L ${e + 3 * n / 4} ${t + r} L ${e + n / 4} ${t + r} L ${e} ${t + 3 * r / 4} L ${e} ${t + r / 4} L ${e + n / 4} ${t} Z`, de = (e, t, n, r) => r < n ? `M ${e + r / 2} ${t} L ${e + n - r / 2} ${t} A ${r / 2} ${r / 2} 0 0 1 ${e + n} ${t + r / 2} A ${r / 2} ${r / 2} 0 0 1 ${e + n - r / 2} ${t + r} L ${e + r / 2} ${t + r} A ${r / 2} ${r / 2} 0 0 1 ${e} ${t + r / 2} A ${r / 2} ${r / 2} 0 0 1 ${e + r / 2} ${t} Z` : r > n ? `M ${e} ${t + n / 2} L ${e} ${t + r - n / 2} A ${n / 2} ${n / 2} 0 0 0 ${e + n / 2} ${t + r} A ${n / 2} ${n / 2} 0 0 0 ${e + n} ${t + r - n / 2} L ${e + n} ${t + n / 2} A ${n / 2} ${n / 2} 0 0 0 ${e + n / 2} ${t} A ${n / 2} ${n / 2} 0 0 0 ${e} ${t + n / 2} Z` : oe(e, t, n, r), fe = (e, t, n, r) => `M ${e} ${t} L ${e + n} ${t} L ${e + n} ${t + r} L ${e} ${t + r} Z`, pe = (e, t, n, r) => `M ${e + n / 2} ${t} L ${e + n} ${t + r / 2} L ${e + n / 2} ${t + r} L ${e} ${t + r / 2} Z`, me = (e, t, n, r) => `M ${e + n / 4} ${t} L ${e + 3 * n / 4} ${t} A ${n / 4} ${r / 4} 0 0 1 ${e + n} ${t + r / 4} L ${e + n} ${t + 3 * r / 4} A ${n / 4} ${r / 4} 0 0 1 ${e + 3 * n / 4} ${t + r} L ${e + n / 4} ${t + r} A ${n / 4} ${r / 4} 0 0 1 ${e} ${t + 3 * r / 4} L ${e} ${t + r / 4} A ${n / 4} ${r / 4} 0 0 1 ${e + n / 4} ${t} Z`, he = (e, t, n, r) => `M ${e} ${t} L ${e + 3 * n / 4} ${t} L ${e + 3 * n / 4} ${t + r / 4} L ${e + 3 * n / 4} ${t} L ${e + n} ${t + r / 4} L ${e + 3 * n / 4} ${t + r / 4} L ${e + n} ${t + r / 4} L ${e + n} ${t + r} L ${e} ${t + r} Z`, A = /* @__PURE__ */ function(e) {
@@ -348,7 +347,7 @@ var Ce = (e) => {
 	}
 	remove(e) {
 		let t = this.get(e);
-		t !== void 0 && (delete this.entityMap[e], O(this.entities, t));
+		t !== void 0 && (delete this.entityMap[e], k(this.entities, t));
 	}
 	size() {
 		return this.entities.length;
@@ -396,7 +395,7 @@ var Ce = (e) => {
 	}
 	remove(e) {
 		let t = this.get(e, !0);
-		t !== void 0 && (delete this.entityMap[e], O(this.entities, t));
+		t !== void 0 && (delete this.entityMap[e], k(this.entities, t));
 	}
 	size(e = !1) {
 		return e ? super.size() : super.filter((e) => !e.removed).length;
@@ -543,10 +542,10 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		return this.valueSets[e];
 	}
 	displayProperty(e) {
-		this.displayedProperties.includes(e) || (this.displayedProperties.push(e), O(this.hiddenProperties, e));
+		this.displayedProperties.includes(e) || (this.displayedProperties.push(e), k(this.hiddenProperties, e));
 	}
 	hideProperty(e) {
-		this.hiddenProperties.includes(e) || (this.hiddenProperties.push(e), O(this.displayedProperties, e));
+		this.hiddenProperties.includes(e) || (this.hiddenProperties.push(e), k(this.displayedProperties, e));
 	}
 }, F = {
 	name: "",
@@ -707,10 +706,10 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		this.select()?.raise(), this.start?.raise(!1), this.end?.raise(!1);
 	}
 	setStart(e) {
-		this.start === e ? (this.startDirection = e?.direction, this.startCoords = e?.connectionPoint || [0, 0]) : (this.start !== void 0 && O(this.start.outgoingConnections, this), this.start = e, e !== void 0 && (e.outgoingConnections.push(this), this.startDirection = e?.direction, this.startCoords = e?.connectionPoint || [0, 0])), this.updateInView();
+		this.start === e ? (this.startDirection = e?.direction, this.startCoords = e?.connectionPoint || [0, 0]) : (this.start !== void 0 && k(this.start.outgoingConnections, this), this.start = e, e !== void 0 && (e.outgoingConnections.push(this), this.startDirection = e?.direction, this.startCoords = e?.connectionPoint || [0, 0])), this.updateInView();
 	}
 	setEnd(e) {
-		this.end === e ? (this.endDirection = e?.direction, this.endCoords = e?.connectionPoint || [0, 0]) : (this.end !== void 0 && O(this.end.incomingConnections, this), this.end = e, e !== void 0 && (e.incomingConnections.push(this), this.endDirection = e?.direction, this.endCoords = e?.connectionPoint || [0, 0])), this.updateInView();
+		this.end === e ? (this.endDirection = e?.direction, this.endCoords = e?.connectionPoint || [0, 0]) : (this.end !== void 0 && k(this.end.incomingConnections, this), this.end = e, e !== void 0 && (e.incomingConnections.push(this), this.endDirection = e?.direction, this.endCoords = e?.connectionPoint || [0, 0])), this.updateInView();
 	}
 	tighten() {
 		let e = this.model.canvas?.allowConnectionLoops || !1, t = this.model.canvas?.allowSharingPorts !== !1, n = this.model.canvas?.allowSharingBothPorts || !1, r = this.model.canvas?.tightenConnectionsAcrossPortTypes || !1;
@@ -761,35 +760,43 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}
 	remove(e) {
 		let t = this.get(e, !0);
-		t && (O(t.start?.outgoingConnections || [], t), O(t.end?.incomingConnections || [], t), super.remove(e), t.updateInView());
+		t && (k(t.start?.outgoingConnections || [], t), k(t.end?.incomingConnections || [], t), super.remove(e), t.updateInView());
 	}
-}, L = {
+}, Ie = /* @__PURE__ */ function(e) {
+	return e[e.OnlyWhenSelected = 0] = "OnlyWhenSelected", e;
+}({}), L = {
 	editable: !0,
-	fontSize: 0,
 	margin: 0,
 	padding: 0,
-	fontFamily: "'Wonder Unit Sans', sans-serif",
-	color: "#000000",
-	selectedColor: "#000000",
-	backgroundColor: "transparent",
 	horizontalAlign: h.Center,
 	verticalAlign: g.Center,
 	orientation: p.Top,
 	multiline: !1,
 	fit: !1,
-	shrink: !0
-}, Ie = class extends Te {
+	shrink: !0,
+	look: {
+		lookType: "field-look",
+		fillColor: "transparent",
+		fontColor: "#000000",
+		fontFamily: "'Wonder Unit Sans', sans-serif",
+		fontSize: 10,
+		fontWeight: 400
+	}
+}, Le = class extends Te {
 	get text() {
 		return this._text;
 	}
 	set text(e) {
 		(e == null || e?.trim() === "") && (e = this.defaultText), this._text = e, this.updateInView(), this.fit && this.model.canvas?.fitFieldRootInView(this.id, this.shrink);
 	}
-	constructor(e, t, n, r, i, a, o, s, c, l, u, d, f, m, h, g, _) {
-		let v = `${t?.id}_field`;
-		if (e.fields.get(v) !== void 0) throw Error("DiagramField for rootElement already exists");
-		if (super(e, v), this.textTimestamp = null, this.rootElement = t, this.coords = n, this.width = r, this.height = i, this.fontSize = a, this.fontFamily = o, this.color = s, this.selectedColor = c, this.horizontalAlign = l, this.verticalAlign = u, !isNaN(Number(d))) this.orientation = Number(d);
-		else switch (d) {
+	get look() {
+		return this.selected ? this.highlighted ? this.selectedAndHighlightedLook : this.selectedLook : this.highlighted ? this.highlightedLook : this.defaultLook;
+	}
+	constructor(e, t, n, r, i, a, o, s, c, l, u, d, f, m) {
+		let h = `${t?.id}_field`;
+		if (e.fields.get(h) !== void 0) throw Error("DiagramField for rootElement already exists");
+		if (super(e, h), this.textTimestamp = null, this.rootElement = t, this.coords = n, this.width = r, this.height = i, this.horizontalAlign = a, this.verticalAlign = o, this.multiline = c, !isNaN(Number(s))) this.orientation = Number(s);
+		else switch (s) {
 			case p.Top:
 				this.orientation = 0;
 				break;
@@ -804,7 +811,8 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 				break;
 			default: this.orientation = 0;
 		}
-		this.multiline = f, this.defaultText = m, this._text = m, this.editable = h, this.fit = g, this.shrink = _;
+		let g = M(l);
+		this.defaultLook = g.defaultLook, this.selectedLook = g.selectedLook, this.highlightedLook = g.highlightedLook, this.selectedAndHighlightedLook = g.selectedAndHighlightedLook, this.defaultText = u, this._text = u, this.editable = d, this.fit = f, this.shrink = m;
 	}
 	get removed() {
 		return this.selfRemoved || this.rootElement !== void 0 && this.rootElement.removed;
@@ -821,21 +829,19 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	getPriority() {
 		return this.rootElement?.getPriority() || 0;
 	}
-}, Le = class extends N {
+}, Re = class extends N {
 	constructor(e) {
 		super(), this.model = e;
 	}
-	new(e, t, n, r, i, a, o, s, c, l, u, d, f, p, m, h) {
-		let g = new Ie(this.model, e, t, o, s, n, r, i, a, c, l, u, d, f, p, m, h);
-		return super.add(g), g.updateInView(), e !== void 0 && (e.label = g), g;
+	new(e, t, n, r, i, a, o, s, c, l, u, d, f) {
+		let p = new Le(this.model, e, t, n, r, i, a, o, s, c, l, u, d, f);
+		return super.add(p), p.updateInView(), e !== void 0 && (e.label = p), p;
 	}
 	remove(e) {
 		let t = this.get(e, !0);
 		t && (t.rootElement?.label !== void 0 && t.rootElement.label === t && (t.rootElement.label = void 0), super.remove(e), t.updateInView());
 	}
-}, R = (e) => e?.margin === null || e?.margin === void 0 ? L.margin : typeof e.margin == "number" ? e.margin : e.margin.length === 0 ? L.margin : e.margin.length === 1 || e.margin.length === 2 ? e.margin[0] : (e.margin.length, e.margin[2]), z = (e) => e?.margin === null || e?.margin === void 0 ? L.margin : typeof e.margin == "number" ? e.margin : e.margin.length === 0 ? L.margin : e.margin.length === 1 ? e.margin[0] : e.margin.length === 2 || e.margin.length === 3 ? e.margin[1] : e.margin[3], B = (e) => e?.margin === null || e?.margin === void 0 ? L.margin : typeof e.margin == "number" ? e.margin : e.margin.length === 0 ? L.margin : e.margin.length === 1 ? e.margin[0] : (e.margin.length === 2 || e.margin.length, e.margin[1]), V = (e) => e?.margin === null || e?.margin === void 0 ? L.margin : typeof e.margin == "number" ? e.margin : e.margin.length === 0 ? L.margin : (e.margin.length === 1 || e.margin.length === 2 || e.margin.length, e.margin[0]), Re = (e) => e?.padding === null || e?.padding === void 0 ? L.padding : typeof e.padding == "number" ? e.padding : e.padding.length === 0 ? L.padding : e.padding.length === 1 || e.padding.length === 2 ? e.padding[0] : (e.padding.length, e.padding[2]), ze = (e) => e?.padding === null || e?.padding === void 0 ? L.padding : typeof e.padding == "number" ? e.padding : e.padding.length === 0 ? L.padding : e.padding.length === 1 ? e.padding[0] : e.padding.length === 2 || e.padding.length === 3 ? e.padding[1] : e.padding[3], Be = (e) => e?.padding === null || e?.padding === void 0 ? L.padding : typeof e.padding == "number" ? e.padding : e.padding.length === 0 ? L.padding : e.padding.length === 1 ? e.padding[0] : (e.padding.length === 2 || e.padding.length, e.padding[1]), Ve = (e) => e?.padding === null || e?.padding === void 0 ? L.padding : typeof e.padding == "number" ? e.padding : e.padding.length === 0 ? L.padding : (e.padding.length === 1 || e.padding.length === 2 || e.padding.length, e.padding[0]), He = /* @__PURE__ */ function(e) {
-	return e[e.OnlyWhenSelected = 0] = "OnlyWhenSelected", e;
-}({}), Ue = class {
+}, R = (e) => e?.margin === null || e?.margin === void 0 ? L.margin : typeof e.margin == "number" ? e.margin : e.margin.length === 0 ? L.margin : e.margin.length === 1 || e.margin.length === 2 ? e.margin[0] : (e.margin.length, e.margin[2]), z = (e) => e?.margin === null || e?.margin === void 0 ? L.margin : typeof e.margin == "number" ? e.margin : e.margin.length === 0 ? L.margin : e.margin.length === 1 ? e.margin[0] : e.margin.length === 2 || e.margin.length === 3 ? e.margin[1] : e.margin[3], B = (e) => e?.margin === null || e?.margin === void 0 ? L.margin : typeof e.margin == "number" ? e.margin : e.margin.length === 0 ? L.margin : e.margin.length === 1 ? e.margin[0] : (e.margin.length === 2 || e.margin.length, e.margin[1]), V = (e) => e?.margin === null || e?.margin === void 0 ? L.margin : typeof e.margin == "number" ? e.margin : e.margin.length === 0 ? L.margin : (e.margin.length === 1 || e.margin.length === 2 || e.margin.length, e.margin[0]), ze = (e) => e?.padding === null || e?.padding === void 0 ? L.padding : typeof e.padding == "number" ? e.padding : e.padding.length === 0 ? L.padding : e.padding.length === 1 || e.padding.length === 2 ? e.padding[0] : (e.padding.length, e.padding[2]), Be = (e) => e?.padding === null || e?.padding === void 0 ? L.padding : typeof e.padding == "number" ? e.padding : e.padding.length === 0 ? L.padding : e.padding.length === 1 ? e.padding[0] : e.padding.length === 2 || e.padding.length === 3 ? e.padding[1] : e.padding[3], Ve = (e) => e?.padding === null || e?.padding === void 0 ? L.padding : typeof e.padding == "number" ? e.padding : e.padding.length === 0 ? L.padding : e.padding.length === 1 ? e.padding[0] : (e.padding.length === 2 || e.padding.length, e.padding[1]), He = (e) => e?.padding === null || e?.padding === void 0 ? L.padding : typeof e.padding == "number" ? e.padding : e.padding.length === 0 ? L.padding : (e.padding.length === 1 || e.padding.length === 2 || e.padding.length, e.padding[0]), Ue = class {
 	constructor(e) {
 		this.margin = e.margin || 0, this.defaultWidths = e.defaultWidths || null, this.defaultHeights = e.defaultHeights || null, this.minWidths = e.minWidths || null, this.minHeights = e.minHeights || null, this.sections = [];
 		for (let t of e.sections) {
@@ -914,11 +920,11 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}
 	getResizableX() {
 		let e = this.type;
-		return e?.resizableX === void 0 ? this.node?.getResizableX() || !1 : e.resizableX === He.OnlyWhenSelected ? this.selected : e.resizableX;
+		return e?.resizableX === void 0 ? this.node?.getResizableX() || !1 : e.resizableX === Ie.OnlyWhenSelected ? this.selected : e.resizableX;
 	}
 	getResizableY() {
 		let e = this.type;
-		return e?.resizableY === void 0 ? this.node?.getResizableY() || !1 : e.resizableY === He.OnlyWhenSelected ? this.selected : e.resizableY;
+		return e?.resizableY === void 0 ? this.node?.getResizableY() || !1 : e.resizableY === Ie.OnlyWhenSelected ? this.selected : e.resizableY;
 	}
 	getClosestPortToPoint(e) {
 		if (this.ports.length !== 0) {
@@ -1007,7 +1013,12 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 				let e = {
 					...L,
 					...n.type?.label
-				}, t = 6 * e.fontSize + ze(e) + Be(e), r = e.fontSize + Ve(e) + Re(e), i;
+				};
+				e.look = {
+					...L.look,
+					...e.look
+				};
+				let t = 6 * (e.look.fontSize || L.look.fontSize) + Be(e) + Ve(e), r = (e.look.fontSize || L.look.fontSize) + He(e) + ze(e), i;
 				switch (n.direction) {
 					case p.Bottom:
 					case p.Left:
@@ -1019,7 +1030,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 						break;
 					default: i = n.coords;
 				}
-				this.model.fields.new(n, i, e.fontSize, e.fontFamily, e.color, e.selectedColor, t, r, e.horizontalAlign, e.verticalAlign, e.orientation, e.multiline, "", e.editable, e.fit, e.shrink);
+				this.model.fields.new(n, i, t, r, e.horizontalAlign, e.verticalAlign, e.orientation, e.multiline, e.look, "", e.editable, e.fit, e.shrink);
 			}
 		}
 		let l = e.type.sectionGrid?.sections?.[n]?.[t]?.label;
@@ -1028,7 +1039,10 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 				...L,
 				...l
 			};
-			this.model.fields.new(s, [s.coords[0] + z(e), s.coords[1] + V(e)], e.fontSize, e.fontFamily, e.color, e.selectedColor, s.width - z(e) - B(e), s.height - V(e) - R(e), e.horizontalAlign, e.verticalAlign, e.orientation, e.multiline, "", e.editable, e.fit, e.shrink);
+			e.look = {
+				...L.look,
+				...e.look
+			}, this.model.fields.new(s, [s.coords[0] + z(e), s.coords[1] + V(e)], s.width - z(e) - B(e), s.height - V(e) - R(e), e.horizontalAlign, e.verticalAlign, e.orientation, e.multiline, e.look, "", e.editable, e.fit, e.shrink);
 		}
 		return s;
 	}
@@ -1036,12 +1050,12 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		let t = this.get(e, !0);
 		if (t) {
 			for (; t.ports.length > 0;) this.model.ports.remove(t.ports[0].id);
-			t.label && this.model.fields.remove(t.label.id), t.node && O(t.node.sections, t), super.remove(e), t.updateInView();
+			t.label && this.model.fields.remove(t.label.id), t.node && k(t.node.sections, t), super.remove(e), t.updateInView();
 		}
 	}
 }, Ke = {
 	lookType: "shaped-look",
-	shape: k.Rectangle,
+	shape: ie.Rectangle,
 	fillColor: "#FFFFFF",
 	borderColor: "#000000",
 	borderThickness: 1,
@@ -1158,11 +1172,11 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}
 	getResizableX() {
 		let e = this.type.resizableX;
-		return e === He.OnlyWhenSelected ? this.selected : e;
+		return e === Ie.OnlyWhenSelected ? this.selected : e;
 	}
 	getResizableY() {
 		let e = this.type.resizableY;
-		return e === He.OnlyWhenSelected ? this.selected : e;
+		return e === Ie.OnlyWhenSelected ? this.selected : e;
 	}
 	getClosestPortToPoint(e) {
 		if (this.ports.length !== 0) {
@@ -1242,7 +1256,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		n || this.children.indexOf(e) >= 0 || (this.fitToChild(e), this.children.push(e), e.parent = this, e.raise());
 	}
 	removeChild(e) {
-		O(this.children, e), e.parent = void 0;
+		k(this.children, e), e.parent = void 0;
 	}
 	fitToChild(e) {
 		let t = Math.max(...this.sections.map((e) => e.indexXInNode)), n = Math.max(...this.sections.map((e) => e.indexYInNode)), r = this.coords[0] - e.coords[0] + this.type.leftPadding;
@@ -1408,7 +1422,12 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 				let e = {
 					...L,
 					...a.type?.label
-				}, t = 6 * e.fontSize + ze(e) + Be(e), n = e.fontSize + Ve(e) + Re(e), r;
+				};
+				e.look = {
+					...L.look,
+					...e.look
+				};
+				let t = 6 * (e.look.fontSize || L.look.fontSize) + Be(e) + Ve(e), n = (e.look.fontSize || L.look.fontSize) + He(e) + ze(e), r;
 				switch (a.direction) {
 					case p.Bottom:
 					case p.Left:
@@ -1420,7 +1439,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 						break;
 					default: r = a.coords;
 				}
-				this.model.fields.new(a, r, e.fontSize, e.fontFamily, e.color, e.selectedColor, t, n, e.horizontalAlign, e.verticalAlign, e.orientation, e.multiline, "", e.editable, e.fit, e.shrink);
+				this.model.fields.new(a, r, t, n, e.horizontalAlign, e.verticalAlign, e.orientation, e.multiline, e.look, "", e.editable, e.fit, e.shrink);
 			}
 		}
 		if (r.label) {
@@ -1428,18 +1447,21 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 				...L,
 				...r.label
 			};
-			this.model.fields.new(i, [i.coords[0] + z(e), i.coords[1] + V(e)], e.fontSize, e.fontFamily, e.color, e.selectedColor, i.width - z(e) - B(e), i.height - V(e) - R(e), e.horizontalAlign, e.verticalAlign, e.orientation, e.multiline, "", e.editable, e.fit, e.shrink);
+			e.look = {
+				...L.look,
+				...e.look
+			}, this.model.fields.new(i, [i.coords[0] + z(e), i.coords[1] + V(e)], i.width - z(e) - B(e), i.height - V(e) - R(e), e.horizontalAlign, e.verticalAlign, e.orientation, e.multiline, e.look, "", e.editable, e.fit, e.shrink);
 		}
 		if (r.decorators.length > 0) for (let e = 0; e < r.decorators.length; ++e) {
 			let t = r.decorators[e];
-			this.model.decorators.new(i, [i.coords[0] + t.coords[0], i.coords[1] + t.coords[1]], t.width, t.height, i.getPriority(), t.html, `${i.id}_decorator_${e}`, t.anchorPointX || "floating", t.anchorPointY || "floating");
+			this.model.decorators.new(i, [i.coords[0] + t.coords[0], i.coords[1] + t.coords[1]], t.width, t.height, i.getPriority(), t.svg, `${i.id}_decorator_${e}`, t.anchorPointX || "floating", t.anchorPointY || "floating");
 		}
 		return i.valueSet.resetValues(), i.model.canvas?.fitNodeInView(i.id), i;
 	}
 	remove(e) {
 		let t = this.get(e, !0);
 		if (t) {
-			for (t.parent && O(t.parent.children, t); t.children.length > 0;) this.model.nodes.remove(t.children[0].id);
+			for (t.parent && k(t.parent.children, t); t.children.length > 0;) this.model.nodes.remove(t.children[0].id);
 			for (; t.sections.length > 0;) this.model.sections.remove(t.sections[0].id);
 			for (; t.ports.length > 0;) this.model.ports.remove(t.ports[0].id);
 			for (; t.decorators.length > 0;) this.model.decorators.remove(t.decorators[0].id);
@@ -1454,32 +1476,98 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 }, Ye = (e) => {
 	for (let t = 0; t < e.length; ++t) for (let n = 0; n < e.length; ++n) n !== t && e[n].isAncestorOf(e[t]) && (e.splice(n, 1), --n, t > n && --t);
 	return e;
-}, Xe = (e) => e?.padding === null || e?.padding === void 0 ? U.padding : typeof e.padding == "number" ? e.padding : e.padding.length === 0 ? U.padding : e.padding.length === 1 || e.padding.length === 2 ? e.padding[0] : (e.padding.length, e.padding[2]), Ze = (e) => e?.padding === null || e?.padding === void 0 ? U.padding : typeof e.padding == "number" ? e.padding : e.padding.length === 0 ? U.padding : e.padding.length === 1 ? e.padding[0] : e.padding.length === 2 || e.padding.length === 3 ? e.padding[1] : e.padding[3], Qe = (e) => e?.padding === null || e?.padding === void 0 ? U.padding : typeof e.padding == "number" ? e.padding : e.padding.length === 0 ? U.padding : e.padding.length === 1 ? e.padding[0] : (e.padding.length === 2 || e.padding.length, e.padding[1]), $e = (e) => e?.padding === null || e?.padding === void 0 ? U.padding : typeof e.padding == "number" ? e.padding : e.padding.length === 0 ? U.padding : (e.padding.length === 1 || e.padding.length === 2 || e.padding.length, e.padding[0]), et = {
+}, Xe = (e) => e?.padding === null || e?.padding === void 0 ? U.padding : typeof e.padding == "number" ? e.padding : e.padding.length === 0 ? U.padding : e.padding.length === 1 || e.padding.length === 2 ? e.padding[0] : (e.padding.length, e.padding[2]), Ze = (e) => e?.padding === null || e?.padding === void 0 ? U.padding : typeof e.padding == "number" ? e.padding : e.padding.length === 0 ? U.padding : e.padding.length === 1 ? e.padding[0] : e.padding.length === 2 || e.padding.length === 3 ? e.padding[1] : e.padding[3], Qe = (e) => e?.padding === null || e?.padding === void 0 ? U.padding : typeof e.padding == "number" ? e.padding : e.padding.length === 0 ? U.padding : e.padding.length === 1 ? e.padding[0] : (e.padding.length === 2 || e.padding.length, e.padding[1]), $e = (e) => e?.padding === null || e?.padding === void 0 ? U.padding : typeof e.padding == "number" ? e.padding : e.padding.length === 0 ? U.padding : (e.padding.length === 1 || e.padding.length === 2 || e.padding.length, e.padding[0]), et = class extends Te {
+	constructor(e, t, n, r, i, a, o, s, c = "floating", l = "floating") {
+		if (e.objects.get(s) !== void 0) throw Error(`DiagramDecorator with id "${s}" already exists`);
+		if (!s) throw Error("DiagramDecorator cannot have an empty or null id");
+		super(e, s), this.rootElement = t, this.coords = n, this.width = r, this.height = i, this.priority = a, this.svg = o, this.anchorPointX = c, this.anchorPointY = l;
+	}
+	get removed() {
+		return this.selfRemoved || this.rootElement !== void 0 && this.rootElement.removed;
+	}
+	updateInView() {
+		this.model.canvas?.updateDecoratorsInView(this.id);
+	}
+	raise() {
+		this.select()?.raise();
+	}
+	move(e) {
+		this.coords = e, this.updateInView();
+	}
+	getPriority() {
+		return this.priority;
+	}
+}, tt = class extends N {
+	constructor(e) {
+		super(), this.model = e;
+	}
+	new(e, t, n, r, i, a, o, s = "floating", c = "floating") {
+		let l = new et(this.model, e, t, n, r, i, a, o, s, c);
+		return super.add(l), l.updateInView(), e !== void 0 && e.decorators.push(l), l;
+	}
+	remove(e) {
+		let t = this.get(e, !0);
+		t && ((t.rootElement instanceof W || t.rootElement instanceof H) && k(t.rootElement.decorators, t), super.remove(e), t.updateInView());
+	}
+}, nt = class extends Te {
+	constructor(e, t, n, r, i, a, o) {
+		if (e.objects.get(o) !== void 0) throw Error(`DiagramObject with id "${o}" already exists`);
+		if (!o) throw Error("DiagramObject cannot have an empty or null id");
+		super(e, o), this.coords = t, this.width = n, this.height = r, this.priority = i, this.svg = a;
+	}
+	get removed() {
+		return this.selfRemoved;
+	}
+	updateInView() {
+		this.model.canvas?.updateObjectsInView(this.id);
+	}
+	raise() {
+		this.select()?.raise();
+	}
+	move(e) {
+		this.coords = e, this.updateInView();
+	}
+	getPriority() {
+		return this.priority;
+	}
+}, rt = class extends N {
+	constructor(e) {
+		super(), this.model = e;
+	}
+	new(e, t, n, r, i, a) {
+		let o = new nt(this.model, e, t, n, r, i, a);
+		return super.add(o), o.updateInView(), o;
+	}
+	remove(e) {
+		let t = this.get(e, !0);
+		t && (super.remove(e), t.updateInView());
+	}
+}, it = {
 	lookType: "shaped-look",
-	shape: k.Ellipse,
+	shape: ie.Ellipse,
 	fillColor: "transparent",
 	borderColor: "transparent",
 	borderThickness: 0,
 	selected: { fillColor: "rgba(255, 0, 255, 0.5)" },
 	highlighted: { fillColor: "rgba(0, 255, 255, 0.5)" }
-}, tt = M(et), nt = {
+}, at = M(it), ot = {
 	name: "",
 	label: null,
 	allowsOutgoing: !0,
 	allowsIncoming: !0,
 	width: 24,
-	look: et
-}, rt = class {
+	look: it
+}, st = class {
 	constructor(e) {
 		let t = {
-			...nt,
+			...ot,
 			...e
 		};
 		this.id = t.id, this.name = t.name, this.label = t.label, this.allowsOutgoing = t.allowsOutgoing, this.allowsIncoming = t.allowsIncoming, this.width = t.width;
 		let n = M(t.look);
 		this.defaultLook = n.defaultLook, this.selectedLook = n.selectedLook, this.highlightedLook = n.highlightedLook, this.selectedAndHighlightedLook = n.selectedAndHighlightedLook;
 	}
-}, it = class extends Te {
+}, ct = class extends Te {
 	get type() {
 		return this._type;
 	}
@@ -1509,7 +1597,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		this.label && (this.label.text = e);
 	}
 	get look() {
-		return this.selected ? this.highlighted ? this._selectedAndHighlightedLook === void 0 ? (this.type || tt)?.selectedAndHighlightedLook : this._selectedAndHighlightedLook : this._selectedLook === void 0 ? (this.type || tt)?.selectedLook : this._selectedLook : this.highlighted ? this._highlightedLook === void 0 ? (this.type || tt)?.highlightedLook : this._highlightedLook : this._defaultLook === void 0 ? (this.type || tt)?.defaultLook : this._defaultLook;
+		return this.selected ? this.highlighted ? this._selectedAndHighlightedLook === void 0 ? (this.type || at)?.selectedAndHighlightedLook : this._selectedAndHighlightedLook : this._selectedLook === void 0 ? (this.type || at)?.selectedLook : this._selectedLook : this.highlighted ? this._highlightedLook === void 0 ? (this.type || at)?.highlightedLook : this._highlightedLook : this._defaultLook === void 0 ? (this.type || at)?.defaultLook : this._defaultLook;
 	}
 	set look(e) {
 		this.lookConfig = e;
@@ -1536,7 +1624,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		} else this._defaultLook = e, this._selectedLook = e, this._highlightedLook = e, this._selectedAndHighlightedLook = e;
 	}
 	get width() {
-		return this.type?.width || nt.width;
+		return this.type?.width || ot.width;
 	}
 	get height() {
 		return this.width;
@@ -1581,12 +1669,12 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	distanceTo(e) {
 		return x(this.coords, e);
 	}
-}, at = class extends N {
+}, lt = class extends N {
 	constructor(e) {
 		super(), this.types = new we(), this.model = e;
 	}
 	new(e, t, n, r, i, a, o = "floating", s = "floating") {
-		let c = new it(this.model, e, t, n, r, i, a, o, s);
+		let c = new ct(this.model, e, t, n, r, i, a, o, s);
 		return super.add(c), c.updateInView(), t !== void 0 && t.ports.push(c), c;
 	}
 	remove(e) {
@@ -1594,29 +1682,34 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		if (t) {
 			for (; t.outgoingConnections.length > 0;) this.model.connections.remove(t.outgoingConnections[0].id);
 			for (; t.incomingConnections.length > 0;) this.model.connections.remove(t.incomingConnections[0].id);
-			t.label && this.model.fields.remove(t.label.id), (t.rootElement instanceof W || t.rootElement instanceof H) && O(t.rootElement.ports, t), super.remove(e), t.updateInView();
+			t.label && this.model.fields.remove(t.label.id), (t.rootElement instanceof W || t.rootElement instanceof H) && k(t.rootElement.ports, t), super.remove(e), t.updateInView();
 		}
 	}
-}, ot = class {
+}, ut = class {
 	import(e, t) {
 		e.clear(), t.id && (e.id = t.id), e.name = t.name, e.description = t.description, e.type = t.type, e.createdAt = new Date(t.createdAt), e.updatedAt = new Date(t.updatedAt);
 		for (let n of t.nodes || []) this.importNode(e, n);
 		for (let n of t.connections || []) this.importConnection(e, n);
+		for (let n of t.objects || []) {
+			let t = new nt(e, n.coords, n.width, n.height, n.priority, n.svg, n.id);
+			n.collabMeta && (t.selfRemoved = n.collabMeta.selfRemoved), e.objects.add(t), t.updateInView();
+		}
 		return t.data && e.valueSet.setValues(t.data), t.collabMeta && (e.logicalClock = t.collabMeta.logicalClock, e.valueSet.setTimestamps(t.collabMeta.dataTimestamps)), e;
 	}
 	importNode(e, t) {
 		let n = e.nodes.types.get(t.type);
 		if (n) {
 			let r = new W(e, n, t.coords, t.id);
-			if (e.nodes.add(r), r.width = t.width, r.height = t.height, n.decorators) for (let t = 0; t < n.decorators.length; ++t) {
-				let i = n.decorators[t];
-				e.decorators.new(r, [r.coords[0] + i.coords[0], r.coords[1] + i.coords[1]], i.width, i.height, r.getPriority(), i.html, `${r.id}_decorator_${t}`);
-			}
-			if (n.label) {
+			if (e.nodes.add(r), r.width = t.width, r.height = t.height, n.label) {
 				let i = {
 					...L,
 					...n.label
-				}, a = new Ie(e, r, [r.coords[0] + z(i), r.coords[1] + V(i)], r.width - z(i) - B(i), r.height - V(i) - R(i), i.fontSize, i.fontFamily, i.color, i.selectedColor, i.horizontalAlign, i.verticalAlign, i.orientation, i.multiline, "", i.editable, i.fit, i.shrink);
+				};
+				i.look = {
+					...L.look,
+					...i.look
+				};
+				let a = new Le(e, r, [r.coords[0] + z(i), r.coords[1] + V(i)], r.width - z(i) - B(i), r.height - V(i) - R(i), i.horizontalAlign, i.verticalAlign, i.orientation, i.multiline, i.look, "", i.editable, i.fit, i.shrink);
 				a.text = t.label, r.label = a, e.fields.add(a), a.updateInView();
 			}
 			for (let n of t.children || []) {
@@ -1629,69 +1722,92 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 					let r = {
 						...L,
 						...n.sectionGrid?.sections?.[i.indexYInNode]?.[i.indexXInNode]?.label
-					}, a = new Ie(e, t, [t.coords[0] + z(r), t.coords[1] + V(r)], t.width - z(r) - B(r), t.height - V(r) - R(r), r.fontSize, r.fontFamily, r.color, r.selectedColor, r.horizontalAlign, r.verticalAlign, r.orientation, r.multiline, "", r.editable, r.fit, r.shrink);
+					};
+					r.look = {
+						...L.look,
+						...r.look
+					};
+					let a = new Le(e, t, [t.coords[0] + z(r), t.coords[1] + V(r)], t.width - z(r) - B(r), t.height - V(r) - R(r), r.horizontalAlign, r.verticalAlign, r.orientation, r.multiline, r.look, "", r.editable, r.fit, r.shrink);
 					a.text = i.label, t.label = a, e.fields.add(a), a.updateInView();
 				}
 				let a = 0;
 				for (let r of i.ports || []) {
-					let i = r.type === void 0 ? void 0 : e.ports.types.get(r.type), o = new it(e, i, t, r.coords, r.connectionPoint || r.coords, r.direction, r.id);
+					let i = r.type === void 0 ? void 0 : e.ports.types.get(r.type), o = new ct(e, i, t, r.coords, r.connectionPoint || r.coords, r.direction, r.id);
 					if (t.ports.push(o), e.ports.add(o), r.label) {
 						if (n.ports.length > a && i?.label) {
 							let t = {
 								...L,
 								...i?.label
-							}, n;
+							};
+							t.look = {
+								...L.look,
+								...t.look
+							};
+							let n;
 							switch (o.direction) {
 								case p.Top:
 								case p.Left:
-									n = [o.coords[0] - t.fontSize, o.coords[1] - t.fontSize];
+									n = [o.coords[0] - (t.look.fontSize || L.look.fontSize), o.coords[1] - (t.look.fontSize || L.look.fontSize)];
 									break;
 								case p.Bottom:
-									n = [o.coords[0] - t.fontSize, o.coords[1] + t.fontSize];
+									n = [o.coords[0] - (t.look.fontSize || L.look.fontSize), o.coords[1] + (t.look.fontSize || L.look.fontSize)];
 									break;
 								case p.Right:
-									n = [o.coords[0] + t.fontSize, o.coords[1] - t.fontSize];
+									n = [o.coords[0] + (t.look.fontSize || L.look.fontSize), o.coords[1] - (t.look.fontSize || L.look.fontSize)];
 									break;
 								default: n = o.coords;
 							}
-							let a = new Ie(e, o, n, t.fontSize, t.fontSize, t.fontSize, t.fontFamily, t.color, t.selectedColor, t.horizontalAlign, t.verticalAlign, t.orientation, t.multiline, "", t.editable, t.fit, t.shrink);
+							let a = new Le(e, o, n, t.look.fontSize || L.look.fontSize, t.look.fontSize || L.look.fontSize, t.horizontalAlign, t.verticalAlign, t.orientation, t.multiline, t.look, "", t.editable, t.fit, t.shrink);
 							a.text = r.label, o.label = a, e.fields.add(a), a.updateInView();
 						}
 						++a;
 					}
 					r.collabMeta && (o.selfRemoved = r.collabMeta.selfRemoved, o.selfRemovedTimestamp = r.collabMeta.selfRemovedTimestamp, this.importLabelCollabMeta(o.label, r.collabMeta.label)), o.updateInView();
 				}
+				for (let n of i.decorators || []) {
+					let i = new et(e, t, n.coords, n.width, n.height, n.priority, n.svg, n.id, n.anchorPoints[0], n.anchorPoints[1]);
+					n.collabMeta && (i.selfRemoved = n.collabMeta.selfRemoved), r.decorators.push(i), e.decorators.add(i), i.updateInView();
+				}
 				i.collabMeta && (t.selfRemoved = i.collabMeta.selfRemoved, t.selfRemovedTimestamp = i.collabMeta.selfRemovedTimestamp, this.importLabelCollabMeta(t.label, i.collabMeta.label)), t.updateInView();
 			}
 			let i = 0;
 			for (let a of t.ports || []) {
-				let t = a.type === void 0 ? void 0 : e.ports.types.get(a.type), o = new it(e, t, r, a.coords, a.connectionPoint || a.coords, a.direction, a.id);
+				let t = a.type === void 0 ? void 0 : e.ports.types.get(a.type), o = new ct(e, t, r, a.coords, a.connectionPoint || a.coords, a.direction, a.id);
 				if (r.ports.push(o), e.ports.add(o), a.label) {
 					if (n.ports.length > i && t?.label) {
 						let n = {
 							...L,
 							...t?.label
-						}, r;
+						};
+						n.look = {
+							...L.look,
+							...n.look
+						};
+						let r;
 						switch (o.direction) {
 							case p.Top:
 							case p.Left:
-								r = [o.coords[0] - n.fontSize, o.coords[1] - n.fontSize];
+								r = [o.coords[0] - (n.look.fontSize || L.look.fontSize), o.coords[1] - (n.look.fontSize || L.look.fontSize)];
 								break;
 							case p.Bottom:
-								r = [o.coords[0] - n.fontSize, o.coords[1] + n.fontSize];
+								r = [o.coords[0] - (n.look.fontSize || L.look.fontSize), o.coords[1] + (n.look.fontSize || L.look.fontSize)];
 								break;
 							case p.Right:
-								r = [o.coords[0] + n.fontSize, o.coords[1] - n.fontSize];
+								r = [o.coords[0] + (n.look.fontSize || L.look.fontSize), o.coords[1] - (n.look.fontSize || L.look.fontSize)];
 								break;
 							default: r = o.coords;
 						}
-						let i = new Ie(e, o, r, n.fontSize, n.fontSize, n.fontSize, n.fontFamily, n.color, n.selectedColor, n.horizontalAlign, n.verticalAlign, n.orientation, n.multiline, "", n.editable, n.fit, n.shrink);
+						let i = new Le(e, o, r, n.look.fontSize || L.look.fontSize, n.look.fontSize || L.look.fontSize, n.horizontalAlign, n.verticalAlign, n.orientation, n.multiline, n.look, "", n.editable, n.fit, n.shrink);
 						i.text = a.label, o.label = i, e.fields.add(i), i.updateInView();
 					}
 					++i;
 				}
 				a.collabMeta && (o.selfRemoved = a.collabMeta.selfRemoved, o.selfRemovedTimestamp = a.collabMeta.selfRemovedTimestamp, this.importLabelCollabMeta(o.label, a.collabMeta.label)), o.updateInView();
 			}
+			for (let n of t.decorators || []) {
+				let t = new et(e, r, n.coords, n.width, n.height, n.priority, n.svg, n.id, n.anchorPoints[0], n.anchorPoints[1]);
+				n.collabMeta && (t.selfRemoved = n.collabMeta.selfRemoved), r.decorators.push(t), e.decorators.add(t), t.updateInView();
+			}
 			return t.data && r.valueSet.setValues(t.data), t.collabMeta && (r.selfRemoved = t.collabMeta.selfRemoved, r.selfRemovedTimestamp = t.collabMeta.selfRemovedTimestamp, r.geometryTimestamp = t.collabMeta.geometryTimestamp, this.importLabelCollabMeta(r.label, t.collabMeta.label), r.valueSet.setTimestamps(t.collabMeta.dataTimestamps)), r.updateInView(), r.raise(), r;
 		}
 	}
@@ -1705,7 +1821,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	importLabelCollabMeta(e, t) {
 		e && t && (e.selfRemoved = t.selfRemoved, e.selfRemovedTimestamp = t.selfRemovedTimestamp, e.textTimestamp = t.textTimestamp);
 	}
-}, st = class e {
+}, dt = class e {
 	constructor(e, t, n, r, i, a, o) {
 		this.canvas = e, this.id = t, this.typeId = n, this.coords = r, this.parentId = i, this.label = a, this.values = o;
 	}
@@ -1730,7 +1846,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	static deserialize(t, n) {
 		return new e(t, n.id, n.typeId, n.coords, n.parentId, n.label, n.values);
 	}
-}, ct = class e {
+}, ft = class e {
 	constructor(e, t, n, r, i, a, o) {
 		this.canvas = e, this.nodeId = t, this.copyColumnIndex = n, this.copyRowIndex = r, this.removeColumnIndex = i, this.removeRowIndex = a, this.timestamp = o;
 	}
@@ -1752,7 +1868,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	static deserialize(t, n) {
 		return new e(t, n.nodeId, n.copyColumnIndex, n.copyRowIndex, n.removeColumnIndex, n.removeRowIndex, n.timestamp);
 	}
-}, lt = class e {
+}, pt = class e {
 	constructor(e, t, n) {
 		this.canvas = e, this.to = t, this.timestamp = n;
 	}
@@ -1775,7 +1891,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	static deserialize(t, n) {
 		return new e(t, n.to, n.timestamp);
 	}
-}, ut = class e {
+}, mt = class e {
 	constructor(e, t, n, r) {
 		this.canvas = e, this.nodeIds = t, this.delta = n, this.timestamp = r;
 	}
@@ -1819,7 +1935,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	static deserialize(t, n) {
 		return new e(t, n.nodeId, n.to, n.timestamp);
 	}
-}, dt = class e {
+}, ht = class e {
 	constructor(e, t, n, r, i) {
 		this.canvas = e, this.childId = t, this.parentId = n, this.childGeometry = r, this.timestamp = i;
 	}
@@ -1839,7 +1955,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	static deserialize(t, n) {
 		return new e(t, n.childId, n.parentId, n.childGeometry, n.timestamp);
 	}
-}, ft = class e {
+}, gt = class e {
 	constructor(e, t, n, r, i) {
 		this.canvas = e, this.id = t, this.typeId = n, this.startId = r, this.endId = i;
 	}
@@ -1859,7 +1975,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	static deserialize(t, n) {
 		return new e(t, n.id, n.typeId, n.startId, n.endId);
 	}
-}, pt = class e {
+}, _t = class e {
 	constructor(e, t, n, r) {
 		this.canvas = e, this.fieldId = t, this.to = n, this.timestamp = r;
 	}
@@ -1878,7 +1994,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	static deserialize(t, n) {
 		return new e(t, n.fieldId, n.to, n.timestamp);
 	}
-}, mt = class e {
+}, vt = class e {
 	constructor(e, t, n, r) {
 		this.canvas = e, this.id = t, this.to = n, this.timestamp = r;
 	}
@@ -1899,7 +2015,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	static deserialize(t, n) {
 		return new e(t, n.id, n.to, n.timestamp);
 	}
-}, K = class e {
+}, yt = class e {
 	constructor(e, t, n, r, i, a, o, s) {
 		this.canvas = e, this.nodeIds = t, this.sectionIds = n, this.portIds = r, this.connectionIds = i, this.fieldIds = a, this.selfRemoved = o, this.timestamp = s;
 	}
@@ -1929,12 +2045,12 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	static deserialize(t, n) {
 		return new e(t, n.nodeIds, n.sectionIds, n.portIds, n.connectionIds, n.fieldIds, n.removed, n.timestamp);
 	}
-}, ht = class e {
+}, bt = class e {
 	constructor(e, t, n) {
 		this.canvas = e, this.nodes = t, this.connections = n;
 	}
 	do() {
-		let e = new ot();
+		let e = new ut();
 		this.canvas.userSelection.clear();
 		for (let t of this.nodes) {
 			let n = e.importNode(this.canvas.model, t);
@@ -1955,7 +2071,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	static deserialize(t, n) {
 		return new e(t, n.nodes, n.connections);
 	}
-}, gt = class {
+}, xt = class {
 	constructor(e) {
 		this.isInRoom = !1, this.canvas = e, this.replicaId = xe();
 	}
@@ -1974,49 +2090,49 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	receive(e) {
 		switch ("timestamp" in e && (this.canvas.model.logicalClock = Math.max(this.canvas.model.logicalClock, e.timestamp[0])), e.type) {
 			case "addNode":
-				st.deserialize(this.canvas, e).do();
+				dt.deserialize(this.canvas, e).do();
 				break;
 			case "addSection":
-				ct.deserialize(this.canvas, e).do();
+				ft.deserialize(this.canvas, e).do();
 				break;
 			case "applyLayout":
-				lt.deserialize(this.canvas, e).do();
+				pt.deserialize(this.canvas, e).do();
 				break;
 			case "move":
-				ut.deserialize(this.canvas, e).do();
+				mt.deserialize(this.canvas, e).do();
 				break;
 			case "setGeometry":
 				G.deserialize(this.canvas, e).do();
 				break;
 			case "setParent":
-				dt.deserialize(this.canvas, e).do();
+				ht.deserialize(this.canvas, e).do();
 				break;
 			case "addConnection":
-				ft.deserialize(this.canvas, e).do();
+				gt.deserialize(this.canvas, e).do();
 				break;
 			case "editField":
-				pt.deserialize(this.canvas, e).do();
+				_t.deserialize(this.canvas, e).do();
 				break;
 			case "updateValues":
-				mt.deserialize(this.canvas, e).do();
+				vt.deserialize(this.canvas, e).do();
 				break;
 			case "setSelfRemoved":
-				K.deserialize(this.canvas, e).do();
+				yt.deserialize(this.canvas, e).do();
 				break;
 			case "paste":
-				ht.deserialize(this.canvas, e).do();
+				bt.deserialize(this.canvas, e).do();
 				break;
 			default: console.error("Unknown CollabAction type, skipping:", e);
 		}
 	}
-}, _t = class {
+}, St = class {
 	constructor(e, t) {
 		this.canvas = e, this.maximum = t, this.history = [], this.index = 0;
 	}
 	add(e) {
 		this.index < this.history.length && (this.history = this.history.slice(0, this.index)), this.history.length >= this.maximum ? (this.history = this.history.slice(1, this.history.length), this.history.push(e)) : (this.history.push(e), ++this.index), this.canvas.diagramChange$.next({
 			action: e,
-			method: vt.Do
+			method: 0
 		});
 	}
 	undo() {
@@ -2029,7 +2145,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		}
 		this.canvas.diagramChange$.next({
 			action: e,
-			method: vt.Undo
+			method: 1
 		});
 	}
 	redo() {
@@ -2042,19 +2158,17 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		}
 		this.canvas.diagramChange$.next({
 			action: e,
-			method: vt.Redo
+			method: 2
 		});
 	}
-}, vt = /* @__PURE__ */ function(e) {
-	return e[e.Do = 0] = "Do", e[e.Undo = 1] = "Undo", e[e.Redo = 2] = "Redo", e;
-}({}), q = /* @__PURE__ */ function(e) {
+}, K = /* @__PURE__ */ function(e) {
 	return e.AddConnection = "add-connection", e.AddNode = "add-node", e.AddSectionAction = "add-section", e.ApplyLayout = "apply-layout", e.Clipboard = "clipboard", e.ContextMenu = "context-menu", e.EditField = "edit-field", e.MoveNode = "move-node", e.Paste = "paste", e.Remove = "remove", e.StretchNode = "stretch-node", e.StretchSection = "stretch-section", e.UpdateValues = "update-values", e.Zoom = "zoom", e;
-}({}), yt = class {
+}({}), Ct = class {
 	constructor(e, t, n, r, i, a, o, s, c) {
 		this.canvas = e, this.type = t, this.coords = n, this.parentId = r, this.ancestorId = i, this.fromAncestorGeometry = a, this.toAncestorGeometry = o, this.label = s, this.values = c, this.id = this.canvas.collabEngine.freshId();
 	}
 	do() {
-		let e = new st(this.canvas, this.id, this.type.id, this.coords, this.parentId, this.label, this.values);
+		let e = new dt(this.canvas, this.id, this.type.id, this.coords, this.parentId, this.label, this.values);
 		if (this.canvas.collabEngine.doCollaboratively(e), this.ancestorId !== void 0 && this.toAncestorGeometry !== void 0) {
 			let e = new G(this.canvas, this.ancestorId, this.toAncestorGeometry, this.canvas.collabEngine.freshTimestamp());
 			this.canvas.collabEngine.doCollaboratively(e);
@@ -2062,7 +2176,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		return !0;
 	}
 	undo() {
-		let e = this.canvas.model.nodes.get(this.id), t = new K(this.canvas, [this.id], [], [], [], [], !0, this.canvas.collabEngine.freshTimestamp());
+		let e = this.canvas.model.nodes.get(this.id), t = new yt(this.canvas, [this.id], [], [], [], [], !0, this.canvas.collabEngine.freshTimestamp());
 		if (this.canvas.collabEngine.doCollaboratively(t), this.ancestorId !== void 0 && this.fromAncestorGeometry !== void 0) {
 			let e = new G(this.canvas, this.ancestorId, this.fromAncestorGeometry, this.canvas.collabEngine.freshTimestamp());
 			this.canvas.collabEngine.doCollaboratively(e);
@@ -2070,29 +2184,29 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		return e !== void 0;
 	}
 	redo() {
-		let e = this.canvas.model.nodes.get(this.id), t = new K(this.canvas, [this.id], [], [], [], [], !1, this.canvas.collabEngine.freshTimestamp());
+		let e = this.canvas.model.nodes.get(this.id), t = new yt(this.canvas, [this.id], [], [], [], [], !1, this.canvas.collabEngine.freshTimestamp());
 		if (this.canvas.collabEngine.doCollaboratively(t), this.ancestorId !== void 0 && this.toAncestorGeometry !== void 0) {
 			let e = new G(this.canvas, this.ancestorId, this.toAncestorGeometry, this.canvas.collabEngine.freshTimestamp());
 			this.canvas.collabEngine.doCollaboratively(e);
 		}
 		return e === void 0;
 	}
-}, bt = class {
+}, wt = class {
 	constructor(e, t, n) {
 		this.canvas = e, this.nodeIds = t, this.delta = n;
 	}
 	do() {
-		let e = new ut(this.canvas, this.nodeIds, this.delta, this.canvas.collabEngine.freshTimestamp());
+		let e = new mt(this.canvas, this.nodeIds, this.delta, this.canvas.collabEngine.freshTimestamp());
 		return this.canvas.collabEngine.doCollaboratively(e), this.nodeIds.map((e) => this.canvas.model.nodes.get(e) !== void 0).includes(!0) && (this.delta[0] !== 0 || this.delta[1] !== 0);
 	}
 	undo() {
-		let e = new ut(this.canvas, this.nodeIds, [-this.delta[0], -this.delta[1]], this.canvas.collabEngine.freshTimestamp());
+		let e = new mt(this.canvas, this.nodeIds, [-this.delta[0], -this.delta[1]], this.canvas.collabEngine.freshTimestamp());
 		return this.canvas.collabEngine.doCollaboratively(e), this.nodeIds.map((e) => this.canvas.model.nodes.get(e) !== void 0).includes(!0) && (this.delta[0] !== 0 || this.delta[1] !== 0);
 	}
 	redo() {
 		return this.do();
 	}
-}, J = class {
+}, q = class {
 	constructor(e, t, n, r, i, a, o, s) {
 		this.canvas = e, this.intent = t, this.nodeId = n, this.from = r, this.to = i, this.ancestorId = a, this.fromAncestorGeometry = o, this.toAncestorGeometry = s;
 	}
@@ -2128,12 +2242,12 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		}
 		return e !== void 0;
 	}
-}, xt = class {
+}, Tt = class {
 	constructor(e, t, n, r, i, a, o, s, c) {
 		this.canvas = e, this.childId = t, this.fromParentId = n, this.toParentId = r, this.fromChildGeometry = i, this.toChildGeometry = a, this.ancestorId = o, this.fromAncestorGeometry = s, this.toAncestorGeometry = c;
 	}
 	do() {
-		let e = this.canvas.model.nodes.get(this.childId), t = new dt(this.canvas, this.childId, this.toParentId, this.toChildGeometry, this.canvas.collabEngine.freshTimestamp());
+		let e = this.canvas.model.nodes.get(this.childId), t = new ht(this.canvas, this.childId, this.toParentId, this.toChildGeometry, this.canvas.collabEngine.freshTimestamp());
 		if (this.canvas.collabEngine.doCollaboratively(t), this.ancestorId !== void 0 && this.toAncestorGeometry !== void 0) {
 			let e = new G(this.canvas, this.ancestorId, this.toAncestorGeometry, this.canvas.collabEngine.freshTimestamp());
 			this.canvas.collabEngine.doCollaboratively(e);
@@ -2141,7 +2255,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		return e !== void 0;
 	}
 	undo() {
-		let e = this.canvas.model.nodes.get(this.childId), t = new dt(this.canvas, this.childId, this.fromParentId, this.fromChildGeometry, this.canvas.collabEngine.freshTimestamp());
+		let e = this.canvas.model.nodes.get(this.childId), t = new ht(this.canvas, this.childId, this.fromParentId, this.fromChildGeometry, this.canvas.collabEngine.freshTimestamp());
 		if (this.canvas.collabEngine.doCollaboratively(t), this.ancestorId !== void 0 && this.fromAncestorGeometry !== void 0) {
 			let e = new G(this.canvas, this.ancestorId, this.fromAncestorGeometry, this.canvas.collabEngine.freshTimestamp());
 			this.canvas.collabEngine.doCollaboratively(e);
@@ -2151,35 +2265,35 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	redo() {
 		return this.do();
 	}
-}, St = class {
+}, Et = class {
 	constructor(e, t, n, r) {
 		this.canvas = e, this.type = t, this.startId = n, this.endId = r, this.id = this.canvas.collabEngine.freshId();
 	}
 	do() {
-		let e = new ft(this.canvas, this.id, this.type.id, this.startId, this.endId);
+		let e = new gt(this.canvas, this.id, this.type.id, this.startId, this.endId);
 		return this.canvas.collabEngine.doCollaboratively(e), !0;
 	}
 	undo() {
-		let e = this.canvas.model.connections.get(this.id), t = new K(this.canvas, [], [], [], [this.id], [], !0, this.canvas.collabEngine.freshTimestamp());
+		let e = this.canvas.model.connections.get(this.id), t = new yt(this.canvas, [], [], [], [this.id], [], !0, this.canvas.collabEngine.freshTimestamp());
 		return this.canvas.collabEngine.doCollaboratively(t), e !== void 0;
 	}
 	redo() {
-		let e = this.canvas.model.connections.get(this.id), t = new K(this.canvas, [], [], [], [this.id], [], !1, this.canvas.collabEngine.freshTimestamp());
+		let e = this.canvas.model.connections.get(this.id), t = new yt(this.canvas, [], [], [], [this.id], [], !1, this.canvas.collabEngine.freshTimestamp());
 		return this.canvas.collabEngine.doCollaboratively(t), e === void 0;
 	}
-}, Ct = class {
+}, Dt = class {
 	constructor(e, t, n, r) {
 		this.canvas = e, this.fieldId = t, this.from = n, this.to = r;
 	}
 	do() {
-		let e = this.canvas.model.fields.get(this.fieldId), t = new pt(this.canvas, this.fieldId, this.to, this.canvas.collabEngine.freshTimestamp());
+		let e = this.canvas.model.fields.get(this.fieldId), t = new _t(this.canvas, this.fieldId, this.to, this.canvas.collabEngine.freshTimestamp());
 		return this.canvas.collabEngine.doCollaboratively(t), e !== void 0;
 	}
 	undo() {
 		let e = this.canvas.model.fields.get(this.fieldId);
 		if (e) {
 			this.to = e.text;
-			let t = new pt(this.canvas, this.fieldId, this.from, this.canvas.collabEngine.freshTimestamp());
+			let t = new _t(this.canvas, this.fieldId, this.from, this.canvas.collabEngine.freshTimestamp());
 			this.canvas.collabEngine.doCollaboratively(t);
 		}
 		return e !== void 0;
@@ -2188,47 +2302,47 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		let e = this.canvas.model.fields.get(this.fieldId);
 		if (e) {
 			this.from = e.text;
-			let t = new pt(this.canvas, this.fieldId, this.to, this.canvas.collabEngine.freshTimestamp());
+			let t = new _t(this.canvas, this.fieldId, this.to, this.canvas.collabEngine.freshTimestamp());
 			this.canvas.collabEngine.doCollaboratively(t);
 		}
 		return e !== void 0;
 	}
-}, wt = class {
+}, Ot = class {
 	constructor(e, t, n, r) {
 		this.canvas = e, this.id = t, this.from = n, this.to = r;
 	}
 	do() {
-		let e = new mt(this.canvas, this.id, this.to, this.canvas.collabEngine.freshTimestamp());
+		let e = new vt(this.canvas, this.id, this.to, this.canvas.collabEngine.freshTimestamp());
 		return this.canvas.collabEngine.doCollaboratively(e), !0;
 	}
 	undo() {
-		let e = new mt(this.canvas, this.id, this.from, this.canvas.collabEngine.freshTimestamp()), t = e.getValueSet();
+		let e = new vt(this.canvas, this.id, this.from, this.canvas.collabEngine.freshTimestamp()), t = e.getValueSet();
 		if (t) this.to = t.getValuesForKeys(this.to), this.canvas.collabEngine.doCollaboratively(e);
 		else return !1;
 		return !t.rootElement.removed;
 	}
 	redo() {
-		let e = new mt(this.canvas, this.id, this.to, this.canvas.collabEngine.freshTimestamp()), t = e.getValueSet();
+		let e = new vt(this.canvas, this.id, this.to, this.canvas.collabEngine.freshTimestamp()), t = e.getValueSet();
 		if (t) this.from = t.getValuesForKeys(this.from), this.canvas.collabEngine.doCollaboratively(e);
 		else return !1;
 		return !t.rootElement.removed;
 	}
-}, Tt = class {
+}, kt = class {
 	constructor(e, t, n, r, i, a) {
 		this.canvas = e, this.nodeIds = t, this.sectionIds = n, this.portIds = r, this.connectionIds = i, this.fieldIds = a;
 	}
 	do() {
-		let e = this.nodeIds.map((e) => this.canvas.model.nodes.get(e) !== void 0).includes(!0) || this.sectionIds.map((e) => this.canvas.model.sections.get(e) !== void 0).includes(!0) || this.portIds.map((e) => this.canvas.model.ports.get(e) !== void 0).includes(!0) || this.connectionIds.map((e) => this.canvas.model.connections.get(e) !== void 0).includes(!0) || this.fieldIds.map((e) => this.canvas.model.fields.get(e) !== void 0).includes(!0), t = new K(this.canvas, this.nodeIds, this.sectionIds, this.portIds, this.connectionIds, this.fieldIds, !0, this.canvas.collabEngine.freshTimestamp());
+		let e = this.nodeIds.map((e) => this.canvas.model.nodes.get(e) !== void 0).includes(!0) || this.sectionIds.map((e) => this.canvas.model.sections.get(e) !== void 0).includes(!0) || this.portIds.map((e) => this.canvas.model.ports.get(e) !== void 0).includes(!0) || this.connectionIds.map((e) => this.canvas.model.connections.get(e) !== void 0).includes(!0) || this.fieldIds.map((e) => this.canvas.model.fields.get(e) !== void 0).includes(!0), t = new yt(this.canvas, this.nodeIds, this.sectionIds, this.portIds, this.connectionIds, this.fieldIds, !0, this.canvas.collabEngine.freshTimestamp());
 		return this.canvas.collabEngine.doCollaboratively(t), e;
 	}
 	undo() {
-		let e = this.nodeIds.map((e) => this.canvas.model.nodes.get(e) === void 0).includes(!0) || this.sectionIds.map((e) => this.canvas.model.sections.get(e) === void 0).includes(!0) || this.portIds.map((e) => this.canvas.model.ports.get(e) === void 0).includes(!0) || this.connectionIds.map((e) => this.canvas.model.connections.get(e) === void 0).includes(!0) || this.fieldIds.map((e) => this.canvas.model.fields.get(e) === void 0).includes(!0), t = new K(this.canvas, this.nodeIds, this.sectionIds, this.portIds, this.connectionIds, this.fieldIds, !1, this.canvas.collabEngine.freshTimestamp());
+		let e = this.nodeIds.map((e) => this.canvas.model.nodes.get(e) === void 0).includes(!0) || this.sectionIds.map((e) => this.canvas.model.sections.get(e) === void 0).includes(!0) || this.portIds.map((e) => this.canvas.model.ports.get(e) === void 0).includes(!0) || this.connectionIds.map((e) => this.canvas.model.connections.get(e) === void 0).includes(!0) || this.fieldIds.map((e) => this.canvas.model.fields.get(e) === void 0).includes(!0), t = new yt(this.canvas, this.nodeIds, this.sectionIds, this.portIds, this.connectionIds, this.fieldIds, !1, this.canvas.collabEngine.freshTimestamp());
 		return this.canvas.collabEngine.doCollaboratively(t), e;
 	}
 	redo() {
 		return this.do();
 	}
-}, Et = class {
+}, At = class {
 	constructor(e, t, n, r) {
 		this.canvas = e, this.nodes = t, this.connections = n, this.coords = r;
 	}
@@ -2254,233 +2368,201 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			let r = this.canvas.collabEngine.freshId();
 			if (n[e.id] = r, e.id = r, e.start = n[e.start] || e.start, e.end = n[e.end] || e.end, t) for (let n = 0; n < e.points.length; ++n) e.points[n] = [e.points[n][0] + t[0], e.points[n][1] + t[1]];
 		}
-		let r = new ht(this.canvas, this.nodes, this.connections);
+		let r = new bt(this.canvas, this.nodes, this.connections);
 		return this.canvas.collabEngine.doCollaboratively(r), !0;
 	}
 	undo() {
-		let e = this.nodes.map((e) => this.canvas.model.nodes.get(e.id) !== void 0).includes(!0) || this.connections.map((e) => this.canvas.model.connections.get(e.id) !== void 0).includes(!0), t = new K(this.canvas, this.nodes.map((e) => e.id), [], [], this.connections.map((e) => e.id), [], !0, this.canvas.collabEngine.freshTimestamp());
+		let e = this.nodes.map((e) => this.canvas.model.nodes.get(e.id) !== void 0).includes(!0) || this.connections.map((e) => this.canvas.model.connections.get(e.id) !== void 0).includes(!0), t = new yt(this.canvas, this.nodes.map((e) => e.id), [], [], this.connections.map((e) => e.id), [], !0, this.canvas.collabEngine.freshTimestamp());
 		return this.canvas.collabEngine.doCollaboratively(t), e;
 	}
 	redo() {
-		let e = this.nodes.map((e) => this.canvas.model.nodes.get(e.id) === void 0).includes(!0) || this.connections.map((e) => this.canvas.model.connections.get(e.id) === void 0).includes(!0), t = new K(this.canvas, this.nodes.map((e) => e.id), [], [], this.connections.map((e) => e.id), [], !1, this.canvas.collabEngine.freshTimestamp());
+		let e = this.nodes.map((e) => this.canvas.model.nodes.get(e.id) === void 0).includes(!0) || this.connections.map((e) => this.canvas.model.connections.get(e.id) === void 0).includes(!0), t = new yt(this.canvas, this.nodes.map((e) => e.id), [], [], this.connections.map((e) => e.id), [], !1, this.canvas.collabEngine.freshTimestamp());
 		return this.canvas.collabEngine.doCollaboratively(t), e;
 	}
-}, Dt = class {
+}, jt = class {
 	constructor(e) {
 		this.type = e, this.defaultPrevented = !1;
 	}
 	preventDefault() {
 		this.defaultPrevented = !0;
 	}
-}, Ot = /* @__PURE__ */ function(e) {
+}, Mt = /* @__PURE__ */ function(e) {
 	return e[e.Zoom = 0] = "Zoom", e[e.DoubleClick = 1] = "DoubleClick", e[e.SecondaryClick = 2] = "SecondaryClick", e[e.Selection = 3] = "Selection", e[e.Highlight = 4] = "Highlight", e[e.DraggingNode = 5] = "DraggingNode", e;
-}({}), kt = class extends Dt {
+}({}), Nt = class extends jt {
 	constructor(e, t) {
-		super(Ot.Zoom), this.coords = e, this.zoom = t;
+		super(0), this.coords = e, this.zoom = t;
 	}
-}, At = class extends Dt {
+}, Pt = class extends jt {
 	constructor(e, t, n) {
-		super(Ot.DoubleClick), this.cause = e, this.target = t, this.coords = n;
+		super(1), this.cause = e, this.target = t, this.coords = n;
 	}
-}, jt = class extends Dt {
+}, Ft = class extends jt {
 	constructor(e, t, n) {
-		super(Ot.SecondaryClick), this.cause = e, this.target = t, this.coords = n;
+		super(2), this.cause = e, this.target = t, this.coords = n;
 	}
-}, Y = class extends Dt {
+}, J = class extends jt {
 	constructor(e, t) {
-		super(Ot.Selection), this.targets = e, this.selected = t;
+		super(3), this.targets = e, this.selected = t;
 	}
-}, X = class extends Dt {
+}, Y = class extends jt {
 	constructor(e) {
-		super(Ot.Highlight), this.target = e;
+		super(4), this.target = e;
 	}
-}, Mt = class extends Dt {
+}, It = class extends jt {
 	constructor(e) {
-		super(Ot.DraggingNode), this.target = e;
-	}
-}, Nt = class extends Te {
-	constructor(e, t, n, r, i, a, o, s, c = "floating", l = "floating") {
-		if (e.objects.get(s) !== void 0) throw Error(`DiagramDecorator with id "${s}" already exists`);
-		if (!s) throw Error("DiagramDecorator cannot have an empty or null id");
-		super(e, s), this.rootElement = t, this.coords = n, this.width = r, this.height = i, this.priority = a, this.html = o, this.anchorPointX = c, this.anchorPointY = l;
-	}
-	get removed() {
-		return this.selfRemoved || this.rootElement !== void 0 && this.rootElement.removed;
-	}
-	updateInView() {
-		this.model.canvas?.updateDecoratorsInView(this.id);
-	}
-	raise() {
-		this.select()?.raise();
-	}
-	move(e) {
-		this.coords = e, this.updateInView();
-	}
-	getPriority() {
-		return this.priority;
-	}
-}, Pt = class extends N {
-	constructor(e) {
-		super(), this.model = e;
-	}
-	new(e, t, n, r, i, a, o, s = "floating", c = "floating") {
-		let l = new Nt(this.model, e, t, n, r, i, a, o, s, c);
-		return super.add(l), l.updateInView(), e !== void 0 && e.decorators.push(l), l;
-	}
-	remove(e) {
-		let t = this.get(e, !0);
-		t && ((t.rootElement instanceof W || t.rootElement instanceof H) && O(t.rootElement.decorators, t), super.remove(e), t.updateInView());
-	}
-}, Ft = class extends Te {
-	constructor(e, t, n, r, i, a, o) {
-		if (e.objects.get(o) !== void 0) throw Error(`DiagramObject with id "${o}" already exists`);
-		if (!o) throw Error("DiagramObject cannot have an empty or null id");
-		super(e, o), this.coords = t, this.width = n, this.height = r, this.priority = i, this.html = a;
-	}
-	get removed() {
-		return this.selfRemoved;
-	}
-	updateInView() {
-		this.model.canvas?.updateObjectsInView(this.id);
-	}
-	raise() {
-		this.select()?.raise();
-	}
-	move(e) {
-		this.coords = e, this.updateInView();
-	}
-	getPriority() {
-		return this.priority;
-	}
-}, It = class extends N {
-	constructor(e) {
-		super(), this.model = e;
-	}
-	new(e, t, n, r, i, a) {
-		let o = new Ft(this.model, e, t, n, r, i, a);
-		return super.add(o), o.updateInView(), o;
-	}
-	remove(e) {
-		let t = this.get(e, !0);
-		t && (super.remove(e), t.updateInView());
+		super(5), this.target = e;
 	}
 }, Lt = class {
 	constructor(e, t, n, r, i, a = []) {
-		this.nodes = new Je(this), this.sections = new Ge(this), this.ports = new at(this), this.connections = new Fe(this), this.fields = new Le(this), this.objects = new It(this), this.decorators = new Pt(this), this.canvas = e, this.id = t, this.name = n, this.description = r, this.type = i, this.createdAt = /* @__PURE__ */ new Date(), this.updatedAt = /* @__PURE__ */ new Date(), this.logicalClock = 0, this.valueSet = new Ne(new De(a), this);
+		this.nodes = new Je(this), this.sections = new Ge(this), this.ports = new lt(this), this.connections = new Fe(this), this.fields = new Re(this), this.objects = new rt(this), this.decorators = new tt(this), this.canvas = e, this.id = t, this.name = n, this.description = r, this.type = i, this.createdAt = /* @__PURE__ */ new Date(), this.updatedAt = /* @__PURE__ */ new Date(), this.logicalClock = 0, this.valueSet = new Ne(new De(a), this);
 	}
 	clear() {
 		this.canvas?.cancelAllUserActions(), this.id = void 0, this.name = "", this.description = void 0, this.createdAt = /* @__PURE__ */ new Date(), this.updatedAt = /* @__PURE__ */ new Date(), this.logicalClock = 0, this.nodes.clear(), this.sections.clear(), this.ports.clear(), this.connections.clear(), this.fields.clear(), this.objects.clear(), this.decorators.clear(), this.valueSet.resetValues(), this.canvas?.updateModelInView();
 	}
-}, Rt = (e) => !!e.button, zt = (e, t, n, r, i, a, o, s, c) => re(e, [
+}, Rt = (e) => !!e.button, zt = (e, t, n, r, i, a, o, s, c) => ne(e, [
 	t,
 	...a,
 	n
-], r, i, Math.max(10, s || 0, c || 0) * o), Z = (t) => {
+], r, i, Math.max(10, s ?? 0, c ?? 0) * o), X = (t) => {
 	t ? e.select("body").style("cursor", t) : e.select("body").style("cursor", A.Auto);
-}, Q = (e) => e instanceof W ? e : e instanceof H ? e.node || e : e.rootElement instanceof W || e.rootElement instanceof H || e.rootElement instanceof it ? Q(e.rootElement) : e, Bt = (e) => {
+}, Bt = (e) => e instanceof W ? e : e instanceof H ? e.node ?? e : e.rootElement instanceof W || e.rootElement instanceof H || e.rootElement instanceof ct ? Bt(e.rootElement) : e, Vt = (e) => {
 	if (e instanceof W) return e.type.resizableX !== !1;
 	if (e instanceof H) {
 		if (e.type !== void 0) return e.type.resizableX !== !1;
-		if (e.node !== void 0) return Bt(e.node);
+		if (e.node !== void 0) return Vt(e.node);
 	}
 	return !1;
-}, Vt = (e) => {
+}, Ht = (e) => {
 	if (e instanceof W) return e.type.resizableY !== !1;
 	if (e instanceof H) {
 		if (e.type !== void 0) return e.type.resizableY !== !1;
-		if (e.node !== void 0) return Vt(e.node);
+		if (e.node !== void 0) return Ht(e.node);
 	}
 	return !1;
-}, Ht = (e) => {
+}, Ut = (e) => {
 	e.filter(".shaped-look").append("path"), e.filter(".image-look").append("image").attr("preserveAspectRatio", "none"), e.filter(".stretchable-image-look").append("image").attr("class", "top-left-image").attr("preserveAspectRatio", "none"), e.filter(".stretchable-image-look").append("image").attr("class", "top-image").attr("preserveAspectRatio", "none"), e.filter(".stretchable-image-look").append("image").attr("class", "top-right-image").attr("preserveAspectRatio", "none"), e.filter(".stretchable-image-look").append("image").attr("class", "left-image").attr("preserveAspectRatio", "none"), e.filter(".stretchable-image-look").append("image").attr("class", "center-image").attr("preserveAspectRatio", "none"), e.filter(".stretchable-image-look").append("image").attr("class", "right-image").attr("preserveAspectRatio", "none"), e.filter(".stretchable-image-look").append("image").attr("class", "bottom-left-image").attr("preserveAspectRatio", "none"), e.filter(".stretchable-image-look").append("image").attr("class", "bottom-image").attr("preserveAspectRatio", "none"), e.filter(".stretchable-image-look").append("image").attr("class", "bottom-right-image").attr("preserveAspectRatio", "none");
-}, Ut = {
+}, Wt = {
 	fillColor: "#FFFFFF",
 	borderColor: "#000000",
 	borderThickness: 1,
 	borderStyle: te.Solid
-}, Wt = (e) => {
-	e.filter(".shaped-look").select("path").attr("d", (e) => ae(e.look.shape || k.Rectangle, 0, 0, e.width, e.height)).attr("fill", (e) => e.look.fillColor || Ut.fillColor).attr("stroke", (e) => e.look.borderColor || Ut.borderColor).attr("stroke-width", (e) => `${e.look.borderThickness || Ut.borderThickness}px`).attr("stroke-dasharray", (e) => ie(e.look.borderStyle || Ut.borderStyle, e.type?.defaultLook?.borderThickness || e.look?.borderThickness || Ut.borderThickness)), e.filter(".image-look").select("image").attr("x", 0).attr("y", 0).attr("width", (e) => e.width).attr("height", (e) => e.height).attr("href", (e) => e.look.backgroundImage), e.filter(".stretchable-image-look").select("image.top-left-image").attr("x", 0).attr("y", 0).attr("width", (e) => e.look.leftMargin).attr("height", (e) => e.look.topMargin).attr("href", (e) => e.look.backgroundImageTopLeft), e.filter(".stretchable-image-look").select("image.top-image").attr("x", (e) => e.look.leftMargin).attr("y", 0).attr("width", (e) => e.width - e.look.rightMargin - e.look.leftMargin).attr("height", (e) => e.look.topMargin).attr("href", (e) => e.look.backgroundImageTop), e.filter(".stretchable-image-look").select("image.top-right-image").attr("x", (e) => e.width - e.look.rightMargin).attr("y", 0).attr("width", (e) => e.look.rightMargin).attr("height", (e) => e.look.topMargin).attr("href", (e) => e.look.backgroundImageTopRight), e.filter(".stretchable-image-look").select("image.left-image").attr("x", 0).attr("y", (e) => e.look.topMargin).attr("width", (e) => e.look.leftMargin).attr("height", (e) => e.height - e.look.bottomMargin - e.look.topMargin).attr("href", (e) => e.look.backgroundImageLeft), e.filter(".stretchable-image-look").select("image.center-image").attr("x", (e) => e.look.leftMargin).attr("y", (e) => e.look.topMargin).attr("width", (e) => e.width - e.look.rightMargin - e.look.leftMargin).attr("height", (e) => e.height - e.look.bottomMargin - e.look.topMargin).attr("href", (e) => e.look.backgroundImageCenter), e.filter(".stretchable-image-look").select("image.right-image").attr("x", (e) => e.width - e.look.rightMargin).attr("y", (e) => e.look.topMargin).attr("width", (e) => e.look.rightMargin).attr("height", (e) => e.height - e.look.bottomMargin - e.look.topMargin).attr("href", (e) => e.look.backgroundImageRight), e.filter(".stretchable-image-look").select("image.bottom-left-image").attr("x", 0).attr("y", (e) => e.height - e.look.bottomMargin).attr("width", (e) => e.look.leftMargin).attr("height", (e) => e.look.bottomMargin).attr("href", (e) => e.look.backgroundImageBottomLeft), e.filter(".stretchable-image-look").select("image.bottom-image").attr("x", (e) => e.look.leftMargin).attr("y", (e) => e.height - e.look.bottomMargin).attr("width", (e) => e.width - e.look.rightMargin - e.look.leftMargin).attr("height", (e) => e.look.bottomMargin).attr("href", (e) => e.look.backgroundImageBottom), e.filter(".stretchable-image-look").select("image.bottom-right-image").attr("x", (e) => e.width - e.look.rightMargin).attr("y", (e) => e.height - e.look.bottomMargin).attr("width", (e) => e.look.rightMargin).attr("height", (e) => e.look.bottomMargin).attr("href", (e) => e.look.backgroundImageBottomRight);
-}, Gt = {
+}, Gt = (e) => {
+	e.filter(".shaped-look").select("path").attr("d", (e) => ae(e.look.shape ?? ie.Rectangle, 0, 0, e.width, e.height)).attr("fill", (e) => e.look.fillColor ?? Wt.fillColor).attr("stroke", (e) => e.look.borderColor ?? Wt.borderColor).attr("stroke-width", (e) => `${e.look.borderThickness ?? Wt.borderThickness}px`).attr("stroke-dasharray", (e) => re(e.look.borderStyle ?? Wt.borderStyle, e.type?.defaultLook?.borderThickness ?? e.look?.borderThickness ?? Wt.borderThickness)), e.filter(".image-look").select("image").attr("x", 0).attr("y", 0).attr("width", (e) => e.width).attr("height", (e) => e.height).attr("href", (e) => e.look.backgroundImage), e.filter(".stretchable-image-look").select("image.top-left-image").attr("x", 0).attr("y", 0).attr("width", (e) => e.look.leftMargin).attr("height", (e) => e.look.topMargin).attr("href", (e) => e.look.backgroundImageTopLeft), e.filter(".stretchable-image-look").select("image.top-image").attr("x", (e) => e.look.leftMargin).attr("y", 0).attr("width", (e) => e.width - e.look.rightMargin - e.look.leftMargin).attr("height", (e) => e.look.topMargin).attr("href", (e) => e.look.backgroundImageTop), e.filter(".stretchable-image-look").select("image.top-right-image").attr("x", (e) => e.width - e.look.rightMargin).attr("y", 0).attr("width", (e) => e.look.rightMargin).attr("height", (e) => e.look.topMargin).attr("href", (e) => e.look.backgroundImageTopRight), e.filter(".stretchable-image-look").select("image.left-image").attr("x", 0).attr("y", (e) => e.look.topMargin).attr("width", (e) => e.look.leftMargin).attr("height", (e) => e.height - e.look.bottomMargin - e.look.topMargin).attr("href", (e) => e.look.backgroundImageLeft), e.filter(".stretchable-image-look").select("image.center-image").attr("x", (e) => e.look.leftMargin).attr("y", (e) => e.look.topMargin).attr("width", (e) => e.width - e.look.rightMargin - e.look.leftMargin).attr("height", (e) => e.height - e.look.bottomMargin - e.look.topMargin).attr("href", (e) => e.look.backgroundImageCenter), e.filter(".stretchable-image-look").select("image.right-image").attr("x", (e) => e.width - e.look.rightMargin).attr("y", (e) => e.look.topMargin).attr("width", (e) => e.look.rightMargin).attr("height", (e) => e.height - e.look.bottomMargin - e.look.topMargin).attr("href", (e) => e.look.backgroundImageRight), e.filter(".stretchable-image-look").select("image.bottom-left-image").attr("x", 0).attr("y", (e) => e.height - e.look.bottomMargin).attr("width", (e) => e.look.leftMargin).attr("height", (e) => e.look.bottomMargin).attr("href", (e) => e.look.backgroundImageBottomLeft), e.filter(".stretchable-image-look").select("image.bottom-image").attr("x", (e) => e.look.leftMargin).attr("y", (e) => e.height - e.look.bottomMargin).attr("width", (e) => e.width - e.look.rightMargin - e.look.leftMargin).attr("height", (e) => e.look.bottomMargin).attr("href", (e) => e.look.backgroundImageBottom), e.filter(".stretchable-image-look").select("image.bottom-right-image").attr("x", (e) => e.width - e.look.rightMargin).attr("y", (e) => e.height - e.look.bottomMargin).attr("width", (e) => e.look.rightMargin).attr("height", (e) => e.look.bottomMargin).attr("href", (e) => e.look.backgroundImageBottomRight);
+}, Kt = {
+	style: "solid",
+	color: "#FFFFFF"
+}, qt = {
 	enabled: !0,
+	style: "none",
+	snap: !1,
+	spacing: 1
+}, Jt = {
+	...qt,
 	style: "dots",
-	color: "rgba(0, 0, 0, 0.1)",
 	snap: !1,
 	spacing: 10,
-	thickness: .05
-}, Kt = (e, t, n) => {
-	let r = t.append("defs");
-	if (e.gridSize > 0 && isFinite(e.gridSize)) {
-		let i = r.append("pattern").attr("id", n).attr("x", -e.gridSize / 2).attr("y", -e.gridSize / 2).attr("width", e.gridSize).attr("height", e.gridSize).attr("patternUnits", "userSpaceOnUse");
-		switch (i.append("rect").attr("x", 0).attr("y", 0).attr("width", e.gridSize).attr("height", e.gridSize).attr("fill", e.backgroundColor), e.gridStyle) {
+	thickness: .05,
+	color: "rgba(0, 0, 0, 0.1)"
+}, Yt = (e, t, n) => {
+	switch (n?.style ?? "") {
+		case "image": return t.append("image").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("href", n.image).attr("preserveAspectRatio", "none");
+		default: return t.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("fill", n.color ?? "#FFFFFF").attr("stroke-width", "0");
+	}
+}, Xt = (e) => {
+	if (!e) return Jt;
+	switch (e.style) {
+		case "dots":
+		case "lines": return {
+			...Jt,
+			...e
+		};
+		default: return {
+			...qt,
+			...e
+		};
+	}
+}, Zt = (e, t, n, r, i) => {
+	if (Z(i) !== 0 && Q(i) !== 0) {
+		let e = n.append("pattern").attr("id", r).attr("x", -Z(i) / 2).attr("y", -Q(i) / 2).attr("width", Z(i)).attr("height", Q(i)).attr("patternUnits", "userSpaceOnUse");
+		switch (e.append("rect").attr("x", 0).attr("y", 0).attr("width", Z(i)).attr("height", Q(i)).attr("fill", "transparent"), i.style) {
 			case "dots":
-				i.append("circle").attr("cx", e.gridSize / 2).attr("cy", e.gridSize / 2).attr("r", e.gridSize * e.gridThickness).attr("fill", e.gridColor);
+				e.append("circle").attr("cx", Z(i) / 2).attr("cy", Q(i) / 2).attr("r", Math.min(Z(i), Q(i)) * (i.thickness ?? 0)).attr("fill", i.color ?? "");
 				break;
 			case "lines":
-				i.append("line").attr("x1", e.gridSize / 2).attr("x2", e.gridSize / 2).attr("y1", 0).attr("y2", e.gridSize).attr("stroke-width", e.gridSize * e.gridThickness).attr("stroke", e.gridColor), i.append("line").attr("x1", 0).attr("x2", (e.gridSize - e.gridSize * e.gridThickness) / 2).attr("y1", e.gridSize / 2).attr("y2", e.gridSize / 2).attr("stroke-width", e.gridSize * e.gridThickness).attr("stroke", e.gridColor), i.append("line").attr("x1", (e.gridSize + e.gridSize * e.gridThickness) / 2).attr("x2", e.gridSize).attr("y1", e.gridSize / 2).attr("y2", e.gridSize / 2).attr("stroke-width", e.gridSize * e.gridThickness).attr("stroke", e.gridColor);
+				e.append("line").attr("x1", Z(i) / 2).attr("x2", Z(i) / 2).attr("y1", 0).attr("y2", Q(i)).attr("stroke-width", Math.min(Z(i), Q(i)) * (i.thickness ?? 0)).attr("stroke", i.color ?? ""), e.append("line").attr("x1", 0).attr("x2", (Z(i) - Z(i) * (i.thickness ?? 0)) / 2).attr("y1", Q(i) / 2).attr("y2", Q(i) / 2).attr("stroke-width", Math.min(Z(i), Q(i)) * (i.thickness ?? 0)).attr("stroke", i.color ?? ""), e.append("line").attr("x1", (Z(i) + Z(i) * (i.thickness ?? 0)) / 2).attr("x2", Z(i)).attr("y1", Q(i) / 2).attr("y2", Q(i) / 2).attr("stroke-width", Math.min(Z(i), Q(i)) * (i.thickness ?? 0)).attr("stroke", i.color ?? "");
+				break;
+			case "image":
+				e.append("image").attr("x", 0).attr("y", 0).attr("width", Z(i)).attr("height", Q(i)).attr("href", i.image).attr("preserveAspectRatio", "none");
 				break;
 		}
-		t.select("rect").attr("fill", `url(#${n})`);
-	}
-}, qt = 96, $ = 32, Jt = qt + $, Yt = Math.PI / 4, Xt = 100, Zt = { customButtons: [] }, Qt = class {
+		return t.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("fill", `url(#${r})`).attr("stroke-width", "0");
+	}
+}, Z = (e) => {
+	let t = 0;
+	return typeof e.spacing == "number" ? t = e.spacing : Array.isArray(e.spacing) && typeof e.spacing[0] == "number" && (t = e.spacing[0]), isFinite(t) ? t : 0;
+}, Q = (e) => {
+	let t = 0;
+	return typeof e.spacing == "number" ? t = e.spacing : Array.isArray(e.spacing) && typeof e.spacing[1] == "number" && (t = e.spacing[1]), isFinite(t) ? t : 0;
+}, Qt = 96, $ = 32, $t = 128, en = Math.PI / 4, tn = 100, nn = { customButtons: [] }, rn = class {
 	constructor(e, t) {
-		this.canvas = e, this.config = t || Zt;
+		this.canvas = e, this.config = t || nn;
 	}
 	open(t) {
 		this.close();
-		let n = this.canvas.getPointerLocationRelativeToRoot(t), r = this.canvas.getPointerLocationRelativeToCanvas(t), i = this.canvas.selectSVGElement().append("foreignObject").attr("class", "daga-context-menu").attr("x", `${n[0] - Jt}px`).attr("y", `${n[1] - Jt}px`).attr("width", `${2 * Jt}px`).attr("height", `${2 * Jt}px`).style("pointer-events", "none").on(S.ContextMenu, (e) => {
-			this.canvas.canUserPerformAction(q.ContextMenu) && (t.preventDefault(), this.open(e));
+		let n = this.canvas.getPointerLocationRelativeToRoot(t), r = this.canvas.getPointerLocationRelativeToCanvas(t), i = this.canvas.selectSVGElement().append("foreignObject").attr("class", "daga-context-menu").attr("x", `${n[0] - $t}px`).attr("y", `${n[1] - $t}px`).attr("width", `${2 * $t}px`).attr("height", `${2 * $t}px`).style("pointer-events", "none").on(S.ContextMenu, (e) => {
+			this.canvas.canUserPerformAction(K.ContextMenu) && (t.preventDefault(), this.open(e));
 		}).on(S.Click, (e) => {
 			e.preventDefault(), this.close();
 		});
 		this.contextMenuContainer = i;
 		let a = [];
-		this.canvas.userSelection.length !== 0 && this.canvas.canUserPerformAction(q.Clipboard) && this.canvas.canUserPerformAction(q.Remove) && a.push({
+		this.canvas.userSelection.length !== 0 && this.canvas.canUserPerformAction(K.Clipboard) && this.canvas.canUserPerformAction(K.Remove) && a.push({
 			name: "CUT",
 			imageClass: "daga-cut",
 			onPress: (e) => {
 				e.userSelection.cutToClipboard(), e.cancelAllUserActions();
 			}
-		}), this.canvas.userSelection.length !== 0 && this.canvas.canUserPerformAction(q.Clipboard) && a.push({
+		}), this.canvas.userSelection.length !== 0 && this.canvas.canUserPerformAction(K.Clipboard) && a.push({
 			name: "COPY",
 			imageClass: "daga-copy",
 			onPress: (e) => {
 				e.userSelection.copyToClipboard(), e.cancelAllUserActions();
 			}
-		}), this.canvas.canUserPerformAction(q.Paste) && a.push({
+		}), this.canvas.canUserPerformAction(K.Paste) && a.push({
 			name: "PASTE",
 			imageClass: "daga-paste",
 			onPress: (e) => {
 				e.userSelection.pasteFromClipboard(e.getClosestGridPoint(r)), e.cancelAllUserActions();
 			}
-		}), this.canvas.userSelection.length !== 0 && this.canvas.canUserPerformAction(q.Remove) && a.push({
+		}), this.canvas.userSelection.length !== 0 && this.canvas.canUserPerformAction(K.Remove) && a.push({
 			name: "DELETE",
 			imageClass: "daga-delete",
 			onPress: (e) => {
 				e.userSelection.removeFromModel(), e.cancelAllUserActions();
 			}
 		});
-		for (let e of this.config.customButtons || Zt.customButtons) (e.condition === void 0 || e.condition(this.canvas)) && a.push(e);
+		for (let e of this.config.customButtons || nn.customButtons) (e.condition === void 0 || e.condition(this.canvas)) && a.push(e);
 		a.length === 0 && a.push({
 			name: "NONE",
 			imageClass: "daga-cross",
 			onPress: void 0
 		});
 		for (let t = 0; t < a.length; ++t) {
-			let n = a[t], r = n.onPress, o = (t + .5 - a.length / 2) * Yt, s = i.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 * $}px`).style("height", `${2 * $}px`).style("border-radius", `${$}px`).style("pointer-events", "auto").on(S.Click, (e) => {
+			let n = a[t], r = n.onPress, o = (t + .5 - a.length / 2) * en, s = i.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 * $}px`).style("height", `${2 * $}px`).style("border-radius", `${$}px`).style("pointer-events", "auto").on(S.Click, (e) => {
 				r && (e.preventDefault(), r(this.canvas));
 			}).on(S.KeyDown, (e) => {
 				r && e.key === C.Enter && (e.preventDefault(), r(this.canvas));
 			});
-			n.imageClass === void 0 ? n.image !== void 0 && s.append("xhtml:img").style("position", "absolute").style("left", `${.75 * $}px`).style("top", `${.5 * $}px`).style("width", `${.5 * $}px`).style("height", `${.5 * $}px`).attr("src", n.image) : s.append("xhtml:div").style("position", "absolute").style("left", `${.75 * $}px`).style("top", `${.5 * $}px`).style("width", `${.5 * $}px`).style("height", `${.5 * $}px`).style("background-size", "contain").style("background-repeat", "no-repeat").attr("class", n.imageClass), s.append("xhtml:span").style("position", "absolute").style("left", `${.2 * $}px`).style("top", `${1.1 * $}px`).style("text-align", "center").style("width", `${1.6 * $}px`).style("height", `${.35 * $}px`).style("margin", "0").style("font-size", `${.35 * $}px`).style("font-weight", "700").style("user-select", "none").text(n.name), s.transition().ease(e.easeLinear).duration(Xt).tween("progress", () => (e) => {
+			n.imageClass === void 0 ? n.image !== void 0 && s.append("xhtml:img").style("position", "absolute").style("left", `${.75 * $}px`).style("top", `${.5 * $}px`).style("width", `${.5 * $}px`).style("height", `${.5 * $}px`).attr("src", n.image) : s.append("xhtml:div").style("position", "absolute").style("left", `${.75 * $}px`).style("top", `${.5 * $}px`).style("width", `${.5 * $}px`).style("height", `${.5 * $}px`).style("background-size", "contain").style("background-repeat", "no-repeat").attr("class", n.imageClass), s.append("xhtml:span").style("position", "absolute").style("left", `${.2 * $}px`).style("top", `${1.1 * $}px`).style("text-align", "center").style("width", `${1.6 * $}px`).style("height", `${.35 * $}px`).style("margin", "0").style("font-size", `${.35 * $}px`).style("font-weight", "700").style("user-select", "none").text(n.name), s.transition().ease(e.easeLinear).duration(tn).tween("progress", () => (e) => {
 				let t = o * e;
-				return s.style("left", `${Math.sin(t) * qt - $ + Jt}px`).style("top", `${-Math.cos(t) * qt - $ + Jt}px`);
+				return s.style("left", `${Math.sin(t) * Qt - $ + $t}px`).style("top", `${-Math.cos(t) * Qt - $ + $t}px`);
 			});
 		}
 	}
 	close() {
 		this.contextMenuContainer?.remove(), this.contextMenuContainer = void 0;
 	}
-}, $t = class extends N {
+}, an = class extends N {
 	constructor(e, t = !0) {
 		super(), this.focus = void 0, this.canvas = e, this.highlightSections = t;
 	}
@@ -2488,7 +2570,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		return this.focus;
 	}
 	focusOn(e) {
-		this.clear(), this.focus = e, (e instanceof Ie || e instanceof Nt) && e.rootElement ? this.focusOn(e.rootElement) : this.add(e);
+		this.clear(), this.focus = e, (e instanceof Le || e instanceof et) && e.rootElement ? this.focusOn(e.rootElement) : this.add(e);
 	}
 	add(e) {
 		if (super.add(e), e instanceof W) {
@@ -2504,7 +2586,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			for (let t of e.ports) super.add(t), this.canvas.updatePortsInView(t.id);
 			e.label && (super.add(e.label), this.canvas.updateFieldsInView(e.label.id)), this.canvas.updateSectionsInView(e.id);
 		}
-		else e instanceof it ? (e.label && (super.add(e.label), this.canvas.updateFieldsInView(e.label.id)), this.canvas.updatePortsInView(e.id)) : e instanceof I && this.canvas.updateConnectionsInView(e.id);
+		else e instanceof ct ? (e.label && (super.add(e.label), this.canvas.updateFieldsInView(e.label.id)), this.canvas.updatePortsInView(e.id)) : e instanceof I && this.canvas.updateConnectionsInView(e.id);
 	}
 	clear() {
 		for (; this.entities.length > 0;) {
@@ -2513,7 +2595,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		}
 		this.focus = void 0;
 	}
-}, en = class {
+}, on = class {
 	export(e, t = !1) {
 		let n = {
 			name: e.name,
@@ -2523,6 +2605,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			updatedAt: e.updatedAt,
 			nodes: [],
 			connections: [],
+			objects: [],
 			data: e.valueSet.getValues(),
 			...t ? { collabMeta: {
 				logicalClock: e.logicalClock,
@@ -2532,6 +2615,18 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		e.id && (n.id = e.id), e.description && (n.description = e.description);
 		for (let r of e.nodes.all(!0)) !t && r.removed || r.parent === void 0 && n.nodes.push(this.exportNode(r, t));
 		for (let r of e.connections.all(!0)) !t && r.removed || n.connections.push(this.exportConnection(r, t));
+		for (let r of e.objects.all(!0)) n.objects?.push({
+			id: r.id,
+			coords: _(r.coords),
+			width: r.width,
+			height: r.height,
+			priority: r.priority,
+			svg: r.svg,
+			...t ? { collabMeta: {
+				removed: r.removed,
+				selfRemoved: r.selfRemoved
+			} } : {}
+		});
 		return n;
 	}
 	exportNode(e, t = !1) {
@@ -2554,9 +2649,24 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 					...this.exportLabelCollabMeta(r)
 				} } : {}
 			});
+			let i = [];
+			for (let e of n.decorators) i.push({
+				id: e.id,
+				coords: _(e.coords),
+				width: e.width,
+				height: e.height,
+				priority: e.priority,
+				svg: e.svg,
+				anchorPoints: [e.anchorPointX, e.anchorPointY],
+				...t ? { collabMeta: {
+					removed: e.removed,
+					selfRemoved: e.selfRemoved
+				} } : {}
+			});
 			r.push({
 				id: n.id,
 				ports: e,
+				decorators: i,
 				label: n.label?.text || "",
 				indexXInNode: n.indexXInNode,
 				indexYInNode: n.indexYInNode,
@@ -2586,12 +2696,27 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 				...this.exportLabelCollabMeta(n)
 			} } : {}
 		});
+		let a = [];
+		for (let n of e.decorators) a.push({
+			id: n.id,
+			coords: _(n.coords),
+			width: n.width,
+			height: n.height,
+			priority: n.priority,
+			svg: n.svg,
+			anchorPoints: [n.anchorPointX, n.anchorPointY],
+			...t ? { collabMeta: {
+				removed: n.removed,
+				selfRemoved: n.selfRemoved
+			} } : {}
+		});
 		return {
 			id: e.id,
 			type: e.type.id,
 			children: n,
 			sections: r,
 			ports: i,
+			decorators: a,
 			label: e.label?.text || "",
 			coords: _(e.coords),
 			width: e.width,
@@ -2634,11 +2759,11 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			textTimestamp: e.textTimestamp
 		} } : {};
 	}
-}, tn = "Diagram properties", nn = class extends N {
+}, sn = "Diagram properties", cn = class extends N {
 	constructor(e, t) {
 		super(), this.canvas = e, this.canvas.propertyEditorChanges$.pipe(n(2e3)).subscribe(() => {
 			this.makeUpdateValuesAction();
-		}), this.diagramPropertiesText = t === void 0 ? tn : t;
+		}), this.diagramPropertiesText = t === void 0 ? sn : t;
 	}
 	add(e) {
 		if (!this.contains(e.id) && (this.length === 0 ? this.propertyEditorSelection === void 0 && (e instanceof W || e instanceof I) ? this.openInPropertyEditor(e) : this.propertyEditorSelection === void 0 && e instanceof H ? this.openInPropertyEditor(e.node) : this.openInPropertyEditor(void 0) : this.openInPropertyEditor(void 0), super.add(e), e.updateInView(), e instanceof W && e.sections)) for (let t of e.sections) super.add(t), t.updateInView();
@@ -2662,8 +2787,8 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	removeFromModel() {
 		if (this.length > 0) {
 			let e = [], t = [], n = [], r = [], i = [];
-			for (let a of this.all()) a instanceof W ? e.push(a.id) : a instanceof H ? t.push(a.id) : a instanceof it ? n.push(a.id) : a instanceof I ? r.push(a.id) : a instanceof Ie && i.push(a.id);
-			let a = new Tt(this.canvas, e, t, n, r, i);
+			for (let a of this.all()) a instanceof W ? e.push(a.id) : a instanceof H ? t.push(a.id) : a instanceof ct ? n.push(a.id) : a instanceof I ? r.push(a.id) : a instanceof Le && i.push(a.id);
+			let a = new kt(this.canvas, e, t, n, r, i);
 			a.do(), this.canvas.actionStack.add(a);
 		}
 	}
@@ -2672,7 +2797,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			type: "daga-user-selection",
 			nodes: [],
 			connections: []
-		}, t = new en();
+		}, t = new on();
 		for (let n of this.all()) n instanceof W && e.nodes.push(t.exportNode(n, !1)), n instanceof I && e.connections.push(t.exportConnection(n, !1));
 		navigator.clipboard.writeText(JSON.stringify(e));
 	}
@@ -2684,7 +2809,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			try {
 				let n = JSON.parse(t);
 				if (n.type !== "daga-user-selection") return;
-				let r = new Et(this.canvas, n.nodes, n.connections, e);
+				let r = new At(this.canvas, n.nodes, n.connections, e);
 				this.canvas.actionStack.add(r), r.do();
 			} catch {
 				return;
@@ -2702,10 +2827,10 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		if (this.propertyEditorSelection === void 0 || this.propertyEditorValues === void 0) return;
 		let e = this.propertyEditorSelection instanceof Lt ? void 0 : this.propertyEditorSelection.id;
 		if (Ae(this.propertyEditorValues, this.propertyEditorSelection?.valueSet.getValues())) return;
-		let t = this.propertyEditorValues, n = Ce(this.propertyEditorSelection?.valueSet.getValues()), [r, i] = je(t, n, this.propertyEditorSelection?.valueSet), a = new wt(this.canvas, e, r, i);
+		let t = this.propertyEditorValues, n = Ce(this.propertyEditorSelection?.valueSet.getValues()), [r, i] = je(t, n, this.propertyEditorSelection?.valueSet), a = new Ot(this.canvas, e, r, i);
 		a.do(), this.canvas.actionStack.add(a), this.propertyEditorValues = n;
 	}
-}, rn = "diagram-connection-unfinished", an = class n {
+}, ln = "diagram-connection-unfinished", un = class n {
 	static {
 		this.canvasCount = 0;
 	}
@@ -2716,7 +2841,9 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		this._connectionType = e, this.parentComponent?.palette?.refreshPalette();
 	}
 	constructor(r, i) {
-		if (this.backgroundPatternId = `daga-background-pattern-id-${n.canvasCount++}`, this.zoomTransform = e.zoomIdentity, this.draggingFrom = [0, 0], this.dragging = !1, this.secondaryButton = !1, this.validatorChange$ = new t(), this.diagramChange$ = new t(), this.diagramEvent$ = new t(), this.propertyEditorChanges$ = new t(), this.parentComponent = r, this.model = new Lt(this, void 0, i.name || "unnamed", "", i.type || "", i.properties || []), this.userSelection = new nn(this, i.components?.propertyEditor?.title), this.userHighlight = new $t(this, i.canvas?.highlightSections !== !1), this.contextMenu = new Qt(this, i.canvas?.contextMenu), this.backgroundColor = i.canvas?.backgroundColor || "#FFFFFF", this.gridStyle = i.canvas?.grid?.style ?? Gt.style, this.gridSize = i.canvas?.grid?.enabled === !1 || i.canvas?.grid === void 0 ? 0 : Math.abs(i.canvas?.grid?.spacing || Gt.spacing), this.gridThickness = Math.abs(i.canvas?.grid?.thickness || Gt.thickness), this.gridColor = i.canvas?.grid?.color || Gt.color, this.snapToGrid = i.canvas?.grid?.enabled === !1 || i.canvas?.grid === void 0 ? !1 : i.canvas?.grid?.snap || Gt.snap, this.zoomFactor = i.canvas?.zoomFactor || 2, this.panRate = i.canvas?.panRate || 100, this.inferConnectionType = i.connectionSettings?.inferConnectionType || !1, this.autoTightenConnections = i.connectionSettings?.autoTighten !== !1, this.tightenConnectionsAcrossPortTypes = i.connectionSettings?.tightenAcrossPortTypes || !1, this.allowConnectionLoops = i.connectionSettings?.allowLoops || !1, this.allowSharingPorts = i.connectionSettings?.sharePorts !== !1, this.allowSharingBothPorts = i.connectionSettings?.shareBothPorts || !1, this.portHighlightRadius = i.connectionSettings?.portHighlightRadius || 100, this.multipleSelectionOn = !1, this.priorityThresholds = i.canvas?.priorityThresholds || [], this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : void 0, this.layoutFormat = i.layoutFormat, this.userActions = i.userActions || {}, this.validators = [], this.actionStack = new _t(this, 25), this.collabEngine = new gt(this), i.nodeTypes) for (let e of i.nodeTypes) {
+		this.gridPatternId = `daga-grid-pattern-id-${++n.canvasCount}`, this.ancillaryGridPatternIds = [], this.zoomTransform = e.zoomIdentity, this.draggingFrom = [0, 0], this.dragging = !1, this.secondaryButton = !1, this.validatorChange$ = new t(), this.diagramChange$ = new t(), this.diagramEvent$ = new t(), this.propertyEditorChanges$ = new t(), this.parentComponent = r, this.model = new Lt(this, void 0, i.name || "unnamed", "", i.type || "", i.properties || []), this.userSelection = new cn(this, i.components?.propertyEditor?.title), this.userHighlight = new an(this, i.canvas?.highlightSections !== !1), this.contextMenu = new rn(this, i.canvas?.contextMenu), this.backgroundConfig = i.canvas?.background ?? Kt, this.gridConfig = Xt(i.canvas?.grid), this.ancillaryGridsConfig = [];
+		for (let e = 0; e < (i.canvas?.ancillaryGrids?.length || 0); ++e) this.ancillaryGridsConfig.push(Xt(i.canvas?.ancillaryGrids?.[e])), this.ancillaryGridPatternIds.push(`${this.gridPatternId}-ancillary-${e}`);
+		if (this.zoomFactor = i.canvas?.zoomFactor || 2, this.panRate = i.canvas?.panRate || 100, this.inferConnectionType = i.connectionSettings?.inferConnectionType || !1, this.autoTightenConnections = i.connectionSettings?.autoTighten !== !1, this.tightenConnectionsAcrossPortTypes = i.connectionSettings?.tightenAcrossPortTypes || !1, this.allowConnectionLoops = i.connectionSettings?.allowLoops || !1, this.allowSharingPorts = i.connectionSettings?.sharePorts !== !1, this.allowSharingBothPorts = i.connectionSettings?.shareBothPorts || !1, this.portHighlightRadius = i.connectionSettings?.portHighlightRadius || 100, this.multipleSelectionOn = !1, this.priorityThresholds = i.canvas?.priorityThresholds || [], this.priorityThreshold = this.priorityThresholds ? this.priorityThresholds[0] : void 0, this.layoutFormat = i.layoutFormat, this.userActions = i.userActions || {}, this.validators = [], this.actionStack = new St(this, 25), this.collabEngine = new xt(this), i.nodeTypes) for (let e of i.nodeTypes) {
 			let t = new qe({
 				...i.nodeTypeDefaults,
 				...e
@@ -2724,7 +2851,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			this.model.nodes.types.add(t);
 		}
 		if (i.portTypes) for (let e of i.portTypes) {
-			let t = new rt({
+			let t = new st({
 				...i.portTypeDefaults,
 				...e
 			});
@@ -2745,7 +2872,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		this.validators.push(e), this.validatorChange$.next();
 	}
 	removeValidator(e) {
-		O(this.validators, e), this.validatorChange$.next();
+		k(this.validators, e), this.validatorChange$.next();
 	}
 	getPriorityThresholdOptions() {
 		return this.priorityThresholds;
@@ -2760,73 +2887,81 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}
 	initView(t) {
 		let n = e.select(t);
-		n.html(""), this.diagramRoot = n.append("div").node(), e.select(this.diagramRoot).attr("tabindex", 0).style("width", "100%").style("height", "100%").append("svg").style("width", "100%").style("height", "100%"), e.select(this.diagramRoot).on(S.Click, () => {
-			e.select(this.diagramRoot).node()?.focus();
+		n.html(""), this.diagramRoot = n.append("div").node(), this.selectRoot().attr("tabindex", 0).style("width", "100%").style("height", "100%").append("svg").style("width", "100%").style("height", "100%"), this.selectRoot().on(S.Click, () => {
+			this.selectRoot().node()?.focus();
 		}).on(S.ContextMenu, (e) => {
 			if (this.dragging) {
 				e.preventDefault(), e.stopPropagation(), this.dragging = !1;
 				return;
 			}
-			let t = new jt(e, null);
-			this.diagramEvent$.next(t), !t.defaultPrevented && this.canUserPerformAction(q.ContextMenu) && (e.preventDefault(), this.contextMenu.open(e));
+			let t = new Ft(e, null);
+			this.diagramEvent$.next(t), !t.defaultPrevented && this.canUserPerformAction(K.ContextMenu) && (e.preventDefault(), this.contextMenu.open(e));
 		}).on(S.DoubleClick, (e) => {
-			let t = new At(e, null);
+			let t = new Pt(e, null);
 			this.diagramEvent$.next(t);
 		}).on(S.KeyDown, (e) => {
-			if (!e.ctrlKey && (e.key === C.Delete || e.key === C.Backspace) && this.canUserPerformAction(q.Remove) && (this.userSelection.removeFromModel(), this.cancelAllUserActions()), e.ctrlKey && e.key === "a") {
+			if (!e.ctrlKey && (e.key === C.Delete || e.key === C.Backspace) && this.canUserPerformAction(K.Remove) && (this.userSelection.removeFromModel(), this.cancelAllUserActions()), e.ctrlKey && e.key === "a") {
 				e.preventDefault();
 				for (let e of this.model.nodes) this.userSelection.add(e);
 				for (let e of this.model.connections) this.userSelection.add(e);
-				this.diagramEvent$.next(new Y(this.userSelection.all(), !0));
+				this.diagramEvent$.next(new J(this.userSelection.all(), !0));
 			}
 			if (e.ctrlKey && e.key === "i") {
 				e.preventDefault();
 				let t = [], n = [];
 				for (let e of this.model.nodes) this.userSelection.toggle(e), e.selected ? t.push(e) : n.push(e);
 				for (let e of this.model.connections) this.userSelection.toggle(e), e.selected ? t.push(e) : n.push(e);
-				t.length > 0 && this.diagramEvent$.next(new Y(t, !0)), n.length > 0 && this.diagramEvent$.next(new Y(n, !1));
+				t.length > 0 && this.diagramEvent$.next(new J(t, !0)), n.length > 0 && this.diagramEvent$.next(new J(n, !1));
 			}
-			if (e.ctrlKey && e.key === "c" && this.canUserPerformAction(q.Clipboard) && (e.preventDefault(), this.userSelection.copyToClipboard(), this.cancelAllUserActions()), e.ctrlKey && e.key === "x" && this.canUserPerformAction(q.Clipboard) && this.canUserPerformAction(q.Remove) && (e.preventDefault(), this.userSelection.cutToClipboard(), this.cancelAllUserActions()), e.ctrlKey && e.key === "v" && this.canUserPerformAction(q.Paste)) {
+			if (e.ctrlKey && e.key === "c" && this.canUserPerformAction(K.Clipboard) && (e.preventDefault(), this.userSelection.copyToClipboard(), this.cancelAllUserActions()), e.ctrlKey && e.key === "x" && this.canUserPerformAction(K.Clipboard) && this.canUserPerformAction(K.Remove) && (e.preventDefault(), this.userSelection.cutToClipboard(), this.cancelAllUserActions()), e.ctrlKey && e.key === "v" && this.canUserPerformAction(K.Paste)) {
 				e.preventDefault();
 				let t = this.getCoordinatesOnScreen();
 				this.userSelection.pasteFromClipboard(this.getClosestGridPoint([(t[0][0] + t[1][0]) / 2, (t[0][1] + t[1][1]) / 2])), this.cancelAllUserActions();
 			}
-			e.ctrlKey && e.key === "y" && (e.preventDefault(), this.actionStack.redo()), e.ctrlKey && e.key === "z" && (e.preventDefault(), this.actionStack.undo()), e.key === "+" && this.canUserPerformAction(q.Zoom) && (e.preventDefault(), this.zoomBy(this.zoomFactor)), e.key === "-" && this.canUserPerformAction(q.Zoom) && (e.preventDefault(), this.zoomBy(1 / this.zoomFactor)), e.key === C.ArrowLeft && this.canUserPerformAction(q.Zoom) && (e.preventDefault(), this.translateBy(this.panRate / this.zoomTransform.k, 0)), e.key === C.ArrowRight && this.canUserPerformAction(q.Zoom) && (e.preventDefault(), this.translateBy(-this.panRate / this.zoomTransform.k, 0)), e.key === C.ArrowDown && this.canUserPerformAction(q.Zoom) && (e.preventDefault(), this.translateBy(0, -this.panRate / this.zoomTransform.k)), e.key === C.ArrowUp && this.canUserPerformAction(q.Zoom) && (e.preventDefault(), this.translateBy(0, this.panRate / this.zoomTransform.k));
+			e.ctrlKey && e.key === "y" && (e.preventDefault(), this.actionStack.redo()), e.ctrlKey && e.key === "z" && (e.preventDefault(), this.actionStack.undo()), e.key === "+" && this.canUserPerformAction(K.Zoom) && (e.preventDefault(), this.zoomBy(this.zoomFactor)), e.key === "-" && this.canUserPerformAction(K.Zoom) && (e.preventDefault(), this.zoomBy(1 / this.zoomFactor)), e.key === C.ArrowLeft && this.canUserPerformAction(K.Zoom) && (e.preventDefault(), this.translateBy(this.panRate / this.zoomTransform.k, 0)), e.key === C.ArrowRight && this.canUserPerformAction(K.Zoom) && (e.preventDefault(), this.translateBy(-this.panRate / this.zoomTransform.k, 0)), e.key === C.ArrowDown && this.canUserPerformAction(K.Zoom) && (e.preventDefault(), this.translateBy(0, -this.panRate / this.zoomTransform.k)), e.key === C.ArrowUp && this.canUserPerformAction(K.Zoom) && (e.preventDefault(), this.translateBy(0, this.panRate / this.zoomTransform.k));
 		});
 		let r = this.selectSVGElement().append("g").attr("class", "daga-canvas-view").attr("width", "100%").attr("height", "100%");
-		r.call(this.zoomBehavior = e.zoom().filter((e) => e.type !== S.DoubleClick).on(T.Zoom, (t) => {
-			if (t.sourceEvent) {
-				if (!this.canUserPerformAction(q.Zoom)) {
-					Z(A.NotAllowed);
+		r.call(this.zoomBehavior = e.zoom().filter((e) => e.type !== S.DoubleClick).on(T.Zoom, (e) => {
+			if (e.sourceEvent) {
+				if (!this.canUserPerformAction(K.Zoom)) {
+					X(A.NotAllowed);
 					return;
 				}
-				t.sourceEvent.type === S.Wheel && t.sourceEvent.wheelDelta !== void 0 ? (t.sourceEvent.wheelDelta > 0 && Z(A.ZoomIn), t.sourceEvent.wheelDelta < 0 && Z(A.ZoomOut)) : t.sourceEvent.type === S.MouseMove && Z(A.AllScroll);
+				e.sourceEvent.type === S.Wheel && e.sourceEvent.wheelDelta !== void 0 ? (e.sourceEvent.wheelDelta > 0 && X(A.ZoomIn), e.sourceEvent.wheelDelta < 0 && X(A.ZoomOut)) : e.sourceEvent.type === S.MouseMove && X(A.AllScroll);
 			}
-			this.zoomTransform = t.transform;
-			let n = t.transform.toString();
-			this.selectCanvasElements().attr("transform", n), e.select(`#${this.backgroundPatternId}`).attr("patternTransform", n), this.contextMenu.close(), this.diagramEvent$.next(new kt([this.zoomTransform.x, this.zoomTransform.y], this.zoomTransform.k));
+			this.zoomTransform = e.transform;
+			let t = e.transform.toString();
+			this.selectCanvasElements().attr("transform", t);
+			for (let e of [this.gridPatternId, ...this.ancillaryGridPatternIds]) this.selectCanvasView().select(`#${e}`).attr("patternTransform", t);
+			this.contextMenu.close(), this.diagramEvent$.next(new Nt([this.zoomTransform.x, this.zoomTransform.y], this.zoomTransform.k));
 		}).on(T.End, () => {
-			Z();
-		})), r.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("fill", this.backgroundColor).attr("stroke-width", "0").on(S.MouseMove, (e) => {
+			X();
+		}));
+		let i = r.append("defs"), a = [];
+		a.push(Yt(this, r, this.backgroundConfig));
+		for (let e = 0; e < this.ancillaryGridsConfig.length; ++e) a.push(Zt(this, r, i, this.ancillaryGridPatternIds[e], this.ancillaryGridsConfig[e]));
+		a.push(Zt(this, r, i, this.gridPatternId, this.gridConfig));
+		for (let t of a) t.on(S.MouseMove, (e) => {
 			if (this.unfinishedConnection !== void 0) {
 				let t = this.getPointerLocationRelativeToCanvas(e);
 				this.unfinishedConnection.endCoords = t;
 			}
-		}).on(S.MouseOver, () => {
-			this.userHighlight.size() > 0 && (this.userHighlight.clear(), this.diagramEvent$.next(new X(null)));
-		}).on(S.Click, () => {
-			if (this.userHighlight.size() > 0 && (this.userHighlight.clear(), this.diagramEvent$.next(new X(null))), this.contextMenu.close(), this.userSelection.size() > 0) {
+		}), t.on(S.MouseOver, () => {
+			this.userHighlight.size() > 0 && (this.userHighlight.clear(), this.diagramEvent$.next(new Y(null)));
+		}), t.on(S.Click, () => {
+			if (this.userHighlight.size() > 0 && (this.userHighlight.clear(), this.diagramEvent$.next(new Y(null))), this.contextMenu.close(), this.userSelection.size() > 0) {
 				let e = this.userSelection.all();
-				this.userSelection.clear(), this.diagramEvent$.next(new Y(e, !1));
+				this.userSelection.clear(), this.diagramEvent$.next(new J(e, !1));
 			}
 			this.userSelection.openInPropertyEditor(this.model);
-		}).call(e.drag().filter((e) => this.multipleSelectionOn || Rt(e)).on(w.Start, (e) => {
+		}), t.call(e.drag().filter((e) => this.multipleSelectionOn || Rt(e)).on(w.Start, (e) => {
 			this.startMultipleSelection(e);
 		}).on(w.Drag, (e) => {
 			this.continueMultipleSelection(e);
 		}).on(w.End, (e) => {
 			this.finishMultipleSelection(e);
-		})), Kt(this, r, this.backgroundPatternId), r.append("g").attr("class", "daga-canvas-elements");
+		}));
+		r.append("g").attr("class", "daga-canvas-elements");
 	}
 	getZoomLevel() {
 		return this.zoomTransform.k;
@@ -2875,7 +3010,10 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		}
 	}
 	getClosestGridPoint(e) {
-		return this.gridSize === 0 || !isFinite(this.gridSize) ? e : [Math.round(e[0] / this.gridSize) * this.gridSize, Math.round(e[1] / this.gridSize) * this.gridSize];
+		let t = e[0], n = Z(this.gridConfig);
+		n !== 0 && (t = Math.round(t / n) * n);
+		let r = e[1], i = Q(this.gridConfig);
+		return i !== 0 && (r = Math.round(r / i) * i), [t, r];
 	}
 	getCoordinatesOnScreen() {
 		let e = this.selectSVGElement().node()?.getBoundingClientRect(), t = [e?.width || 0, e?.height || 0];
@@ -2905,26 +3043,26 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		this.updateNodesInView(), this.updateSectionsInView(), this.updatePortsInView(), this.updateConnectionsInView(), this.updateFieldsInView(), this.updateObjectsInView(), this.updateDecoratorsInView();
 	}
 	updateNodesInView(...t) {
-		let n = this.selectCanvasElements().selectAll("g.diagram-node").data(this.model.nodes.filter((e) => this.priorityThreshold === void 0 ? !0 : e.getPriority() >= this.priorityThreshold), (e) => e.id), r = n.exit(), i = n.enter().append("g").attr("id", (e) => e.id).attr("class", (e) => `diagram-node${Bt(e) ? " resizable-x" : ""}${Vt(e) ? " resizable-y" : ""} ${e.type.defaultLook.lookType}`);
+		let n = this.selectCanvasElements().selectAll("g.diagram-node").data(this.model.nodes.filter((e) => this.priorityThreshold === void 0 ? !0 : e.getPriority() >= this.priorityThreshold), (e) => e.id), r = n.exit(), i = n.enter().append("g").attr("id", (e) => e.id).attr("class", (e) => `diagram-node${Vt(e) ? " resizable-x" : ""}${Ht(e) ? " resizable-y" : ""} ${e.type.defaultLook.lookType}`);
 		t && t.length > 0 && (n = n.filter((e) => t.includes(e.id)));
 		let a = i.merge(n);
 		r.remove(), i.on(S.MouseOver, (e, t) => {
-			this.dragging || (this.userHighlight.focusOn(t), this.diagramEvent$.next(new X(t)));
+			this.dragging || (this.userHighlight.focusOn(t), this.diagramEvent$.next(new Y(t)));
 		}).on(S.Click, (e, t) => {
 			if (!e.ctrlKey && !e.shiftKey) {
 				let e = this.userSelection.all();
-				this.userSelection.clear(), this.diagramEvent$.next(new Y(e, !1));
+				this.userSelection.clear(), this.diagramEvent$.next(new J(e, !1));
 			}
-			this.userSelection.toggle(t), this.diagramEvent$.next(new Y([t], t.selected));
+			this.userSelection.toggle(t), this.diagramEvent$.next(new J([t], t.selected));
 		}).on(S.ContextMenu, (e, t) => {
 			if (this.dragging) {
 				e.preventDefault(), e.stopPropagation(), this.dragging = !1;
 				return;
 			}
-			let n = new jt(e, t);
-			this.diagramEvent$.next(n), !n.defaultPrevented && this.canUserPerformAction(q.ContextMenu) && (e.preventDefault(), this.userHighlight.focusOn(t), this.diagramEvent$.next(new X(t)), this.userSelection.add(t), this.diagramEvent$.next(new Y([t], !0)), this.contextMenu.open(e));
+			let n = new Ft(e, t);
+			this.diagramEvent$.next(n), !n.defaultPrevented && this.canUserPerformAction(K.ContextMenu) && (e.preventDefault(), this.userHighlight.focusOn(t), this.diagramEvent$.next(new Y(t)), this.userSelection.add(t), this.diagramEvent$.next(new J([t], !0)), this.contextMenu.open(e));
 		}).on(S.DoubleClick, (e, t) => {
-			let n = new At(e, t);
+			let n = new Pt(e, t);
 			this.diagramEvent$.next(n);
 		}).call(e.drag().filter((e) => (this.secondaryButton = Rt(e), !0)).on(w.Start, (e, t) => {
 			this.multipleSelectionOn || this.secondaryButton ? this.startMultipleSelection(e) : this.startMovingNode(e, t);
@@ -2932,226 +3070,226 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			this.multipleSelectionOn || this.secondaryButton ? this.continueMultipleSelection(e) : this.continueMovingNode(e, t);
 		}).on(w.End, (e, t) => {
 			this.multipleSelectionOn || this.secondaryButton ? this.finishMultipleSelection(e) : this.finishMovingNode(e, t), this.secondaryButton = !1;
-		})), Ht(i), i.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", 6).on(S.MouseOver, (e, t) => {
-			this.canUserPerformAction(q.StretchNode) && t.getResizableX() && !t.removed && Z(A.EWResize);
+		})), Ut(i), i.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", 6).on(S.MouseOver, (e, t) => {
+			this.canUserPerformAction(K.StretchNode) && t.getResizableX() && !t.removed && X(A.EWResize);
 		}).on(S.MouseOut, (e, t) => {
-			this.canUserPerformAction(q.StretchNode) && t.getResizableX() && !t.removed && Z();
+			this.canUserPerformAction(K.StretchNode) && t.getResizableX() && !t.removed && X();
 		}).call(e.drag().on(w.Start, (e, t) => {
-			this.canUserPerformAction(q.StretchNode) && t.getResizableX() && !t.removed ? (Z(A.EWResize), this.currentAction = new J(this, q.StretchNode, t.id, t.getGeometry(), t.getGeometry())) : Z(A.NotAllowed);
+			this.canUserPerformAction(K.StretchNode) && t.getResizableX() && !t.removed ? (X(A.EWResize), this.currentAction = new q(this, K.StretchNode, t.id, t.getGeometry(), t.getGeometry())) : X(A.NotAllowed);
 		}).on(w.Drag, (e, t) => {
-			if (this.canUserPerformAction(q.StretchNode) && t.getResizableX() && !t.removed) {
+			if (this.canUserPerformAction(K.StretchNode) && t.getResizableX() && !t.removed) {
 				let n = this.getPointerLocationRelativeToCanvas(e);
 				t.stretch(p.Left, t.coords[0] - n[0]);
 			}
 		}).on(w.End, (e, t) => {
-			if (this.canUserPerformAction(q.StretchNode) && t.getResizableX() && !t.removed && this.currentAction instanceof J && this.currentAction.intent === q.StretchNode) {
+			if (this.canUserPerformAction(K.StretchNode) && t.getResizableX() && !t.removed && this.currentAction instanceof q && this.currentAction.intent === K.StretchNode) {
 				let n = this.getPointerLocationRelativeToCanvas(e);
-				this.snapToGrid && (n = this.getClosestGridPoint([n[0] - t.type.snapToGridOffset[0], n[1] - t.type.snapToGridOffset[1]]), n[0] += t.type.snapToGridOffset[0], n[1] += t.type.snapToGridOffset[1]), t.stretch(p.Left, t.coords[0] - n[0]), this.currentAction.to = t.getGeometry(), this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0;
+				this.gridConfig.snap && (n = this.getClosestGridPoint([n[0] - t.type.snapToGridOffset[0], n[1] - t.type.snapToGridOffset[1]]), n[0] += t.type.snapToGridOffset[0], n[1] += t.type.snapToGridOffset[1]), t.stretch(p.Left, t.coords[0] - n[0]), this.currentAction.to = t.getGeometry(), this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0;
 			}
-			Z();
+			X();
 		})), i.filter(".resizable-y").append("line").attr("class", "top-resizer").attr("stroke", "transparent").attr("stroke-width", 6).on(S.MouseOver, (e, t) => {
-			this.canUserPerformAction(q.StretchNode) && t.getResizableY() && !t.removed && Z(A.NSResize);
+			this.canUserPerformAction(K.StretchNode) && t.getResizableY() && !t.removed && X(A.NSResize);
 		}).on(S.MouseOut, (e, t) => {
-			this.canUserPerformAction(q.StretchNode) && t.getResizableY() && !t.removed && Z();
+			this.canUserPerformAction(K.StretchNode) && t.getResizableY() && !t.removed && X();
 		}).call(e.drag().on(w.Start, (e, t) => {
-			this.canUserPerformAction(q.StretchNode) && t.getResizableY() && !t.removed ? (Z(A.NSResize), this.currentAction = new J(this, q.StretchNode, t.id, t.getGeometry(), t.getGeometry())) : Z(A.NotAllowed);
+			this.canUserPerformAction(K.StretchNode) && t.getResizableY() && !t.removed ? (X(A.NSResize), this.currentAction = new q(this, K.StretchNode, t.id, t.getGeometry(), t.getGeometry())) : X(A.NotAllowed);
 		}).on(w.Drag, (e, t) => {
-			if (this.canUserPerformAction(q.StretchNode) && t.getResizableY() && !t.removed) {
+			if (this.canUserPerformAction(K.StretchNode) && t.getResizableY() && !t.removed) {
 				let n = this.getPointerLocationRelativeToCanvas(e);
 				t.stretch(p.Top, t.coords[1] - n[1]);
 			}
 		}).on(w.End, (e, t) => {
-			if (this.canUserPerformAction(q.StretchNode) && t.getResizableY() && !t.removed && this.currentAction instanceof J && this.currentAction.intent === q.StretchNode) {
+			if (this.canUserPerformAction(K.StretchNode) && t.getResizableY() && !t.removed && this.currentAction instanceof q && this.currentAction.intent === K.StretchNode) {
 				let n = this.getPointerLocationRelativeToCanvas(e);
-				this.snapToGrid && (n = this.getClosestGridPoint([n[0] - t.type.snapToGridOffset[0], n[1] - t.type.snapToGridOffset[1]]), n[0] += t.type.snapToGridOffset[0], n[1] += t.type.snapToGridOffset[1]), t.stretch(p.Top, t.coords[1] - n[1]), this.currentAction.to = t.getGeometry(), this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0;
+				this.gridConfig.snap && (n = this.getClosestGridPoint([n[0] - t.type.snapToGridOffset[0], n[1] - t.type.snapToGridOffset[1]]), n[0] += t.type.snapToGridOffset[0], n[1] += t.type.snapToGridOffset[1]), t.stretch(p.Top, t.coords[1] - n[1]), this.currentAction.to = t.getGeometry(), this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0;
 			}
-			Z();
+			X();
 		})), i.filter(".resizable-x").append("line").attr("class", "right-resizer").attr("stroke", "transparent").attr("stroke-width", 6).on(S.MouseOver, (e, t) => {
-			this.canUserPerformAction(q.StretchNode) && t.getResizableX() && !t.removed && Z(A.EWResize);
+			this.canUserPerformAction(K.StretchNode) && t.getResizableX() && !t.removed && X(A.EWResize);
 		}).on(S.MouseOut, (e, t) => {
-			this.canUserPerformAction(q.StretchNode) && t.getResizableX() && !t.removed && Z();
+			this.canUserPerformAction(K.StretchNode) && t.getResizableX() && !t.removed && X();
 		}).call(e.drag().on(w.Start, (e, t) => {
-			this.canUserPerformAction(q.StretchNode) && t.getResizableX() && !t.removed ? (Z(A.EWResize), this.currentAction = new J(this, q.StretchNode, t.id, t.getGeometry(), t.getGeometry())) : Z(A.NotAllowed);
+			this.canUserPerformAction(K.StretchNode) && t.getResizableX() && !t.removed ? (X(A.EWResize), this.currentAction = new q(this, K.StretchNode, t.id, t.getGeometry(), t.getGeometry())) : X(A.NotAllowed);
 		}).on(w.Drag, (e, t) => {
-			if (this.canUserPerformAction(q.StretchNode) && t.getResizableX() && !t.removed) {
+			if (this.canUserPerformAction(K.StretchNode) && t.getResizableX() && !t.removed) {
 				let n = this.getPointerLocationRelativeToCanvas(e);
 				t.stretch(p.Right, n[0] - (t.coords[0] + t.width));
 			}
 		}).on(w.End, (e, t) => {
-			if (this.canUserPerformAction(q.StretchNode) && t.getResizableX() && !t.removed && this.currentAction instanceof J && this.currentAction.intent === q.StretchNode) {
+			if (this.canUserPerformAction(K.StretchNode) && t.getResizableX() && !t.removed && this.currentAction instanceof q && this.currentAction.intent === K.StretchNode) {
 				let n = this.getPointerLocationRelativeToCanvas(e);
-				this.snapToGrid && (n = this.getClosestGridPoint([n[0] - t.type.snapToGridOffset[2], n[1] - t.type.snapToGridOffset[3]]), n[0] += t.type.snapToGridOffset[2], n[1] += t.type.snapToGridOffset[3]), t.stretch(p.Right, n[0] - (t.coords[0] + t.width)), this.currentAction.to = t.getGeometry(), this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0;
+				this.gridConfig.snap && (n = this.getClosestGridPoint([n[0] - t.type.snapToGridOffset[2], n[1] - t.type.snapToGridOffset[3]]), n[0] += t.type.snapToGridOffset[2], n[1] += t.type.snapToGridOffset[3]), t.stretch(p.Right, n[0] - (t.coords[0] + t.width)), this.currentAction.to = t.getGeometry(), this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0;
 			}
-			Z();
+			X();
 		})), i.filter(".resizable-y").append("line").attr("class", "bottom-resizer").attr("stroke", "transparent").attr("stroke-width", 6).on(S.MouseOver, (e, t) => {
-			this.canUserPerformAction(q.StretchNode) && t.getResizableY() && !t.removed && Z(A.NSResize);
+			this.canUserPerformAction(K.StretchNode) && t.getResizableY() && !t.removed && X(A.NSResize);
 		}).on(S.MouseOut, (e, t) => {
-			this.canUserPerformAction(q.StretchNode) && t.getResizableY() && !t.removed && Z();
+			this.canUserPerformAction(K.StretchNode) && t.getResizableY() && !t.removed && X();
 		}).call(e.drag().on(w.Start, (e, t) => {
-			this.canUserPerformAction(q.StretchNode) && t.getResizableY() && !t.removed ? (Z(A.NSResize), this.currentAction = new J(this, q.StretchNode, t.id, t.getGeometry(), t.getGeometry())) : Z(A.NotAllowed);
+			this.canUserPerformAction(K.StretchNode) && t.getResizableY() && !t.removed ? (X(A.NSResize), this.currentAction = new q(this, K.StretchNode, t.id, t.getGeometry(), t.getGeometry())) : X(A.NotAllowed);
 		}).on(w.Drag, (e, t) => {
-			if (this.canUserPerformAction(q.StretchNode) && t.getResizableY() && !t.removed) {
+			if (this.canUserPerformAction(K.StretchNode) && t.getResizableY() && !t.removed) {
 				let n = this.getPointerLocationRelativeToCanvas(e);
 				t.stretch(p.Bottom, n[1] - (t.coords[1] + t.height));
 			}
 		}).on(w.End, (e, t) => {
-			if (this.canUserPerformAction(q.StretchNode) && t.getResizableY() && !t.removed && this.currentAction instanceof J && this.currentAction.intent === q.StretchNode) {
+			if (this.canUserPerformAction(K.StretchNode) && t.getResizableY() && !t.removed && this.currentAction instanceof q && this.currentAction.intent === K.StretchNode) {
 				let n = this.getPointerLocationRelativeToCanvas(e);
-				this.snapToGrid && this.snapToGrid && (n = this.getClosestGridPoint([n[0] - t.type.snapToGridOffset[2], n[1] - t.type.snapToGridOffset[3]]), n[0] += t.type.snapToGridOffset[2], n[1] += t.type.snapToGridOffset[3]), t.stretch(p.Bottom, n[1] - (t.coords[1] + t.height)), this.currentAction.to = t.getGeometry(), this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0;
+				this.gridConfig.snap && (n = this.getClosestGridPoint([n[0] - t.type.snapToGridOffset[2], n[1] - t.type.snapToGridOffset[3]]), n[0] += t.type.snapToGridOffset[2], n[1] += t.type.snapToGridOffset[3]), t.stretch(p.Bottom, n[1] - (t.coords[1] + t.height)), this.currentAction.to = t.getGeometry(), this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0;
 			}
-			Z();
-		})), a.attr("transform", (e) => `translate(${e.coords[0]},${e.coords[1]})`).attr("opacity", (e) => e.removed ? .5 : 1), Wt(a), a.filter(".resizable-x").select("line.left-resizer").style("pointer-events", (e) => e.getResizableX() ? "initial" : "none").attr("x1", 6 / 2).attr("x2", 6 / 2).attr("y1", 0).attr("y2", (e) => e.height), a.filter(".resizable-y").select("line.top-resizer").style("pointer-events", (e) => e.getResizableY() ? "initial" : "none").attr("x1", 0).attr("x2", (e) => e.width).attr("y1", 6 / 2).attr("y2", 6 / 2), a.filter(".resizable-x").select("line.right-resizer").style("pointer-events", (e) => e.getResizableX() ? "initial" : "none").attr("x1", (e) => e.width - 6 / 2).attr("x2", (e) => e.width - 6 / 2).attr("y1", 0).attr("y2", (e) => e.height), a.filter(".resizable-y").select("line.bottom-resizer").style("pointer-events", (e) => e.getResizableY() ? "initial" : "none").attr("x1", 0).attr("x2", (e) => e.width).attr("y1", (e) => e.height - 6 / 2).attr("y2", (e) => e.height - 6 / 2);
+			X();
+		})), a.attr("transform", (e) => `translate(${e.coords[0]},${e.coords[1]})`).attr("opacity", (e) => e.removed ? .5 : 1), Gt(a), a.filter(".resizable-x").select("line.left-resizer").style("pointer-events", (e) => e.getResizableX() ? "initial" : "none").attr("x1", 6 / 2).attr("x2", 6 / 2).attr("y1", 0).attr("y2", (e) => e.height), a.filter(".resizable-y").select("line.top-resizer").style("pointer-events", (e) => e.getResizableY() ? "initial" : "none").attr("x1", 0).attr("x2", (e) => e.width).attr("y1", 6 / 2).attr("y2", 6 / 2), a.filter(".resizable-x").select("line.right-resizer").style("pointer-events", (e) => e.getResizableX() ? "initial" : "none").attr("x1", (e) => e.width - 6 / 2).attr("x2", (e) => e.width - 6 / 2).attr("y1", 0).attr("y2", (e) => e.height), a.filter(".resizable-y").select("line.bottom-resizer").style("pointer-events", (e) => e.getResizableY() ? "initial" : "none").attr("x1", 0).attr("x2", (e) => e.width).attr("y1", (e) => e.height - 6 / 2).attr("y2", (e) => e.height - 6 / 2);
 	}
 	updateSectionsInView(...t) {
-		let n = this.selectCanvasElements().selectAll("g.diagram-section").data(this.model.sections.filter((e) => this.priorityThreshold === void 0 ? !0 : e.getPriority() >= this.priorityThreshold), (e) => e.id), r = n.exit(), i = n.enter().append("g").attr("id", (e) => e.id).attr("class", (e) => `diagram-section${Bt(e) ? " resizable-x" : ""}${Vt(e) ? " resizable-y" : ""} ${e.look?.lookType}`);
+		let n = this.selectCanvasElements().selectAll("g.diagram-section").data(this.model.sections.filter((e) => this.priorityThreshold === void 0 ? !0 : e.getPriority() >= this.priorityThreshold), (e) => e.id), r = n.exit(), i = n.enter().append("g").attr("id", (e) => e.id).attr("class", (e) => `diagram-section${Vt(e) ? " resizable-x" : ""}${Ht(e) ? " resizable-y" : ""} ${e.look?.lookType}`);
 		t && t.length > 0 && (n = n.filter((e) => t.includes(e.id)));
 		let a = i.merge(n);
 		r.remove(), i.on(S.MouseOver, (e, t) => {
-			this.dragging || (this.userHighlight.focusOn(t), this.diagramEvent$.next(new X(t)));
+			this.dragging || (this.userHighlight.focusOn(t), this.diagramEvent$.next(new Y(t)));
 		}).on(S.Click, (e, t) => {
 			if (!e.ctrlKey && !e.shiftKey) {
 				let e = this.userSelection.all();
-				this.userSelection.clear(), this.diagramEvent$.next(new Y(e, !1));
+				this.userSelection.clear(), this.diagramEvent$.next(new J(e, !1));
 			}
-			let n = Q(t);
-			this.userSelection.toggle(n), this.diagramEvent$.next(new Y([n], n.selected));
+			let n = Bt(t);
+			this.userSelection.toggle(n), this.diagramEvent$.next(new J([n], n.selected));
 		}).on(S.ContextMenu, (e, t) => {
 			if (this.dragging) {
 				e.preventDefault(), e.stopPropagation(), this.dragging = !1;
 				return;
 			}
-			let n = new jt(e, t);
-			if (this.diagramEvent$.next(n), !n.defaultPrevented && this.canUserPerformAction(q.ContextMenu)) {
+			let n = new Ft(e, t);
+			if (this.diagramEvent$.next(n), !n.defaultPrevented && this.canUserPerformAction(K.ContextMenu)) {
 				e.preventDefault();
-				let n = Q(t);
-				this.userHighlight.focusOn(n), this.diagramEvent$.next(new X(n)), this.userSelection.add(n), this.diagramEvent$.next(new Y([n], !0)), this.contextMenu.open(e);
+				let n = Bt(t);
+				this.userHighlight.focusOn(n), this.diagramEvent$.next(new Y(n)), this.userSelection.add(n), this.diagramEvent$.next(new J([n], !0)), this.contextMenu.open(e);
 			}
 		}).on(S.DoubleClick, (e, t) => {
-			let n = new At(e, t);
+			let n = new Pt(e, t);
 			this.diagramEvent$.next(n);
 		}).call(e.drag().filter((e) => (this.secondaryButton = Rt(e), !0)).on(w.Start, (e, t) => {
 			if (this.multipleSelectionOn || this.secondaryButton) this.startMultipleSelection(e);
 			else {
 				let n = t?.node;
-				n ? this.startMovingNode(e, n) : Z(A.NotAllowed);
+				n ? this.startMovingNode(e, n) : X(A.NotAllowed);
 			}
 		}).on(w.Drag, (e, t) => {
 			if (this.multipleSelectionOn || this.secondaryButton) this.continueMultipleSelection(e);
 			else {
 				let n = t?.node;
-				n ? this.continueMovingNode(e, n) : Z(A.NotAllowed);
+				n ? this.continueMovingNode(e, n) : X(A.NotAllowed);
 			}
 		}).on(w.End, (e, t) => {
 			if (this.multipleSelectionOn || this.secondaryButton) this.finishMultipleSelection(e);
 			else {
 				let n = t?.node;
-				n ? this.finishMovingNode(e, n) : Z();
+				n ? this.finishMovingNode(e, n) : X();
 			}
 			this.secondaryButton = !1;
-		})), Ht(i), i.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", 6).on(S.MouseOver, (e, t) => {
-			this.canUserPerformAction(q.StretchSection) && t.getResizableX() && !t.removed && Z(A.EWResize);
+		})), Ut(i), i.filter(".resizable-x").append("line").attr("class", "left-resizer").attr("stroke", "transparent").attr("stroke-width", 6).on(S.MouseOver, (e, t) => {
+			this.canUserPerformAction(K.StretchSection) && t.getResizableX() && !t.removed && X(A.EWResize);
 		}).on(S.MouseOut, (e, t) => {
-			this.canUserPerformAction(q.StretchSection) && t.getResizableX() && !t.removed && Z();
+			this.canUserPerformAction(K.StretchSection) && t.getResizableX() && !t.removed && X();
 		}).call(e.drag().on(w.Start, (e, t) => {
-			this.canUserPerformAction(q.StretchSection) && t.getResizableX() && !t.removed && t.node ? (Z(A.EWResize), this.currentAction = new J(this, q.StretchSection, t.node.id, t.node.getGeometry(), t.node.getGeometry())) : Z(A.NotAllowed);
+			this.canUserPerformAction(K.StretchSection) && t.getResizableX() && !t.removed && t.node ? (X(A.EWResize), this.currentAction = new q(this, K.StretchSection, t.node.id, t.node.getGeometry(), t.node.getGeometry())) : X(A.NotAllowed);
 		}).on(w.Drag, (e, t) => {
-			if (this.canUserPerformAction(q.StretchSection) && t.getResizableX() && !t.removed && t.node) {
+			if (this.canUserPerformAction(K.StretchSection) && t.getResizableX() && !t.removed && t.node) {
 				let n = this.getPointerLocationRelativeToCanvas(e);
 				t.node.stretchSections(p.Left, t.coords[0] - n[0], t.indexXInNode, t.indexYInNode);
 			}
 		}).on(w.End, (e, t) => {
-			if (this.canUserPerformAction(q.StretchSection) && t.getResizableX() && !t.removed && this.currentAction instanceof J && this.currentAction.intent === q.StretchSection && t.node) {
+			if (this.canUserPerformAction(K.StretchSection) && t.getResizableX() && !t.removed && this.currentAction instanceof q && this.currentAction.intent === K.StretchSection && t.node) {
 				let n = this.getPointerLocationRelativeToCanvas(e);
-				this.snapToGrid && (n = this.getClosestGridPoint(n)), t.node.stretchSections(p.Left, t.coords[0] - n[0], t.indexXInNode, t.indexYInNode), this.currentAction.to = t.node.getGeometry(), this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0;
+				this.gridConfig.snap && (n = this.getClosestGridPoint(n)), t.node.stretchSections(p.Left, t.coords[0] - n[0], t.indexXInNode, t.indexYInNode), this.currentAction.to = t.node.getGeometry(), this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0;
 			}
-			Z();
+			X();
 		})), i.filter(".resizable-y").append("line").attr("class", "top-resizer").attr("stroke", "transparent").attr("stroke-width", 6).on(S.MouseOver, (e, t) => {
-			this.canUserPerformAction(q.StretchSection) && t.getResizableY() && !t.removed && Z(A.NSResize);
+			this.canUserPerformAction(K.StretchSection) && t.getResizableY() && !t.removed && X(A.NSResize);
 		}).on(S.MouseOut, (e, t) => {
-			this.canUserPerformAction(q.StretchSection) && t.getResizableY() && !t.removed && Z();
+			this.canUserPerformAction(K.StretchSection) && t.getResizableY() && !t.removed && X();
 		}).call(e.drag().on(w.Start, (e, t) => {
-			this.canUserPerformAction(q.StretchSection) && t.getResizableY() && !t.removed && t.node ? (Z(A.NSResize), this.currentAction = new J(this, q.StretchSection, t.node.id, t.node.getGeometry(), t.node.getGeometry())) : Z(A.NotAllowed);
+			this.canUserPerformAction(K.StretchSection) && t.getResizableY() && !t.removed && t.node ? (X(A.NSResize), this.currentAction = new q(this, K.StretchSection, t.node.id, t.node.getGeometry(), t.node.getGeometry())) : X(A.NotAllowed);
 		}).on(w.Drag, (e, t) => {
-			if (this.canUserPerformAction(q.StretchSection) && t.getResizableY() && !t.removed && t.node) {
+			if (this.canUserPerformAction(K.StretchSection) && t.getResizableY() && !t.removed && t.node) {
 				let n = this.getPointerLocationRelativeToCanvas(e);
 				t.node.stretchSections(p.Top, t.coords[1] - n[1], t.indexXInNode, t.indexYInNode);
 			}
 		}).on(w.End, (e, t) => {
-			if (this.canUserPerformAction(q.StretchSection) && t.getResizableY() && !t.removed && this.currentAction instanceof J && this.currentAction.intent === q.StretchSection && t.node) {
+			if (this.canUserPerformAction(K.StretchSection) && t.getResizableY() && !t.removed && this.currentAction instanceof q && this.currentAction.intent === K.StretchSection && t.node) {
 				let n = this.getPointerLocationRelativeToCanvas(e);
-				this.snapToGrid && (n = this.getClosestGridPoint(n)), t.node.stretchSections(p.Top, t.coords[1] - n[1], t.indexXInNode, t.indexYInNode), this.currentAction.to = t.node.getGeometry(), this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0;
+				this.gridConfig.snap && (n = this.getClosestGridPoint(n)), t.node.stretchSections(p.Top, t.coords[1] - n[1], t.indexXInNode, t.indexYInNode), this.currentAction.to = t.node.getGeometry(), this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0;
 			}
-			Z();
+			X();
 		})), i.filter(".resizable-x").append("line").attr("class", "right-resizer").attr("stroke", "transparent").attr("stroke-width", 6).on(S.MouseOver, (e, t) => {
-			this.canUserPerformAction(q.StretchSection) && t.getResizableX() && !t.removed && Z(A.EWResize);
+			this.canUserPerformAction(K.StretchSection) && t.getResizableX() && !t.removed && X(A.EWResize);
 		}).on(S.MouseOut, (e, t) => {
-			this.canUserPerformAction(q.StretchSection) && t.getResizableX() && !t.removed && Z();
+			this.canUserPerformAction(K.StretchSection) && t.getResizableX() && !t.removed && X();
 		}).call(e.drag().on(w.Start, (e, t) => {
-			this.canUserPerformAction(q.StretchSection) && t.getResizableX() && !t.removed && t.node ? (Z(A.EWResize), this.currentAction = new J(this, q.StretchSection, t.node.id, t.node.getGeometry(), t.node.getGeometry())) : Z(A.NotAllowed);
+			this.canUserPerformAction(K.StretchSection) && t.getResizableX() && !t.removed && t.node ? (X(A.EWResize), this.currentAction = new q(this, K.StretchSection, t.node.id, t.node.getGeometry(), t.node.getGeometry())) : X(A.NotAllowed);
 		}).on(w.Drag, (e, t) => {
-			if (this.canUserPerformAction(q.StretchSection) && t.getResizableX() && !t.removed && t.node) {
+			if (this.canUserPerformAction(K.StretchSection) && t.getResizableX() && !t.removed && t.node) {
 				let n = this.getPointerLocationRelativeToCanvas(e);
 				t.node.stretchSections(p.Right, n[0] - (t.coords[0] + t.width), t.indexXInNode, t.indexYInNode);
 			}
 		}).on(w.End, (e, t) => {
-			if (this.canUserPerformAction(q.StretchSection) && t.getResizableX() && !t.removed && this.currentAction instanceof J && this.currentAction.intent === q.StretchSection && t.node) {
+			if (this.canUserPerformAction(K.StretchSection) && t.getResizableX() && !t.removed && this.currentAction instanceof q && this.currentAction.intent === K.StretchSection && t.node) {
 				let n = this.getPointerLocationRelativeToCanvas(e);
-				this.snapToGrid && (n = this.getClosestGridPoint(n)), t.node.stretchSections(p.Right, n[0] - (t.coords[0] + t.width), t.indexXInNode, t.indexYInNode), this.currentAction.to = t.node.getGeometry(), this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0;
+				this.gridConfig.snap && (n = this.getClosestGridPoint(n)), t.node.stretchSections(p.Right, n[0] - (t.coords[0] + t.width), t.indexXInNode, t.indexYInNode), this.currentAction.to = t.node.getGeometry(), this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0;
 			}
-			Z();
+			X();
 		})), i.filter(".resizable-y").append("line").attr("class", "bottom-resizer").attr("stroke", "transparent").attr("stroke-width", 6).on(S.MouseOver, (e, t) => {
-			this.canUserPerformAction(q.StretchSection) && t.getResizableY() && !t.removed && Z(A.NSResize);
+			this.canUserPerformAction(K.StretchSection) && t.getResizableY() && !t.removed && X(A.NSResize);
 		}).on(S.MouseOut, (e, t) => {
-			this.canUserPerformAction(q.StretchSection) && t.getResizableY() && !t.removed && Z();
+			this.canUserPerformAction(K.StretchSection) && t.getResizableY() && !t.removed && X();
 		}).call(e.drag().on(w.Start, (e, t) => {
-			this.canUserPerformAction(q.StretchSection) && t.getResizableY() && !t.removed && t.node ? (Z(A.NSResize), this.currentAction = new J(this, q.StretchSection, t.node.id, t.node.getGeometry(), t.node.getGeometry())) : Z(A.NotAllowed);
+			this.canUserPerformAction(K.StretchSection) && t.getResizableY() && !t.removed && t.node ? (X(A.NSResize), this.currentAction = new q(this, K.StretchSection, t.node.id, t.node.getGeometry(), t.node.getGeometry())) : X(A.NotAllowed);
 		}).on(w.Drag, (e, t) => {
-			if (this.canUserPerformAction(q.StretchSection) && t.getResizableY() && !t.removed && t.node) {
+			if (this.canUserPerformAction(K.StretchSection) && t.getResizableY() && !t.removed && t.node) {
 				let n = this.getPointerLocationRelativeToCanvas(e);
 				t.node.stretchSections(p.Bottom, n[1] - (t.coords[1] + t.height), t.indexXInNode, t.indexYInNode);
 			}
 		}).on(w.End, (e, t) => {
-			if (this.canUserPerformAction(q.StretchSection) && t.getResizableY() && !t.removed && this.currentAction instanceof J && this.currentAction.intent === q.StretchSection && t.node) {
+			if (this.canUserPerformAction(K.StretchSection) && t.getResizableY() && !t.removed && this.currentAction instanceof q && this.currentAction.intent === K.StretchSection && t.node) {
 				let n = this.getPointerLocationRelativeToCanvas(e);
-				this.snapToGrid && (n = this.getClosestGridPoint(n)), t.node.stretchSections(p.Bottom, n[1] - (t.coords[1] + t.height), t.indexXInNode, t.indexYInNode), this.currentAction.to = t.node.getGeometry(), this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0;
+				this.gridConfig.snap && (n = this.getClosestGridPoint(n)), t.node.stretchSections(p.Bottom, n[1] - (t.coords[1] + t.height), t.indexXInNode, t.indexYInNode), this.currentAction.to = t.node.getGeometry(), this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0;
 			}
-			Z();
-		})), a.attr("transform", (e) => `translate(${e.coords[0]},${e.coords[1]})`).attr("opacity", (e) => e.removed ? .5 : 1), Wt(a), a.filter(".resizable-x").select("line.left-resizer").style("pointer-events", (e) => e.getResizableX() ? "initial" : "none").attr("x1", 6 / 2).attr("x2", 6 / 2).attr("y1", 0).attr("y2", (e) => e.height), a.filter(".resizable-y").select("line.top-resizer").style("pointer-events", (e) => e.getResizableY() ? "initial" : "none").attr("x1", 0).attr("x2", (e) => e.width).attr("y1", 6 / 2).attr("y2", 6 / 2), a.filter(".resizable-x").select("line.right-resizer").style("pointer-events", (e) => e.getResizableX() ? "initial" : "none").attr("x1", (e) => e.width - 6 / 2).attr("x2", (e) => e.width - 6 / 2).attr("y1", 0).attr("y2", (e) => e.height), a.filter(".resizable-y").select("line.bottom-resizer").style("pointer-events", (e) => e.getResizableY() ? "initial" : "none").attr("x1", 0).attr("x2", (e) => e.width).attr("y1", (e) => e.height - 6 / 2).attr("y2", (e) => e.height - 6 / 2);
+			X();
+		})), a.attr("transform", (e) => `translate(${e.coords[0]},${e.coords[1]})`).attr("opacity", (e) => e.removed ? .5 : 1), Gt(a), a.filter(".resizable-x").select("line.left-resizer").style("pointer-events", (e) => e.getResizableX() ? "initial" : "none").attr("x1", 6 / 2).attr("x2", 6 / 2).attr("y1", 0).attr("y2", (e) => e.height), a.filter(".resizable-y").select("line.top-resizer").style("pointer-events", (e) => e.getResizableY() ? "initial" : "none").attr("x1", 0).attr("x2", (e) => e.width).attr("y1", 6 / 2).attr("y2", 6 / 2), a.filter(".resizable-x").select("line.right-resizer").style("pointer-events", (e) => e.getResizableX() ? "initial" : "none").attr("x1", (e) => e.width - 6 / 2).attr("x2", (e) => e.width - 6 / 2).attr("y1", 0).attr("y2", (e) => e.height), a.filter(".resizable-y").select("line.bottom-resizer").style("pointer-events", (e) => e.getResizableY() ? "initial" : "none").attr("x1", 0).attr("x2", (e) => e.width).attr("y1", (e) => e.height - 6 / 2).attr("y2", (e) => e.height - 6 / 2);
 	}
 	updatePortsInView(...t) {
 		let n = this.selectCanvasElements().selectAll("g.diagram-port").data(this.model.ports.filter((e) => this.priorityThreshold === void 0 ? !0 : e.getPriority() >= this.priorityThreshold), (e) => e.id), r = n.exit(), i = n.enter().append("g").attr("id", (e) => e.id).attr("class", (e) => `diagram-port ${e.look.lookType}`);
 		t && t.length > 0 && (n = n.filter((e) => t.includes(e.id)));
 		let a = i.merge(n);
 		r.remove(), i.on(S.MouseOver, (e, t) => {
-			!this.unfinishedConnection && !this.dragging && (this.userHighlight.focusOn(t), this.diagramEvent$.next(new X(t))), this.unfinishedConnection && (this.unfinishedConnection.type.canStartFromType(this.unfinishedConnection.start?.getNode()?.type?.id || "") && this.unfinishedConnection.start?.allowsOutgoing && this.unfinishedConnection.type.canFinishOnType(t.getNode()?.type?.id || "") && t.allowsIncoming || this.unfinishedConnection.type.canStartFromType(t.getNode()?.type?.id || "") && t.allowsOutgoing && this.unfinishedConnection.type.canFinishOnType(this.unfinishedConnection.start?.getNode()?.type?.id || "") && this.unfinishedConnection.start?.allowsIncoming || Z(A.NoDrop));
+			!this.unfinishedConnection && !this.dragging && (this.userHighlight.focusOn(t), this.diagramEvent$.next(new Y(t))), this.unfinishedConnection && (this.unfinishedConnection.type.canStartFromType(this.unfinishedConnection.start?.getNode()?.type?.id || "") && this.unfinishedConnection.start?.allowsOutgoing && this.unfinishedConnection.type.canFinishOnType(t.getNode()?.type?.id || "") && t.allowsIncoming || this.unfinishedConnection.type.canStartFromType(t.getNode()?.type?.id || "") && t.allowsOutgoing && this.unfinishedConnection.type.canFinishOnType(this.unfinishedConnection.start?.getNode()?.type?.id || "") && this.unfinishedConnection.start?.allowsIncoming || X(A.NoDrop));
 		}).on(S.MouseOut, () => {
-			this.unfinishedConnection && Z(A.Grabbing);
+			this.unfinishedConnection && X(A.Grabbing);
 		}).on(S.Click, (e, t) => {
 			if (!e.ctrlKey && !e.shiftKey) {
 				let e = this.userSelection.all();
-				this.userSelection.clear(), this.diagramEvent$.next(new Y(e, !1));
+				this.userSelection.clear(), this.diagramEvent$.next(new J(e, !1));
 			}
-			let n = Q(t);
-			this.userSelection.toggle(n), this.diagramEvent$.next(new Y([n], n.selected));
+			let n = Bt(t);
+			this.userSelection.toggle(n), this.diagramEvent$.next(new J([n], n.selected));
 		}).on(S.ContextMenu, (e, t) => {
 			if (this.dragging) {
 				e.preventDefault(), e.stopPropagation(), this.dragging = !1;
 				return;
 			}
-			let n = new jt(e, t);
-			if (this.diagramEvent$.next(n), !n.defaultPrevented && this.canUserPerformAction(q.ContextMenu)) {
+			let n = new Ft(e, t);
+			if (this.diagramEvent$.next(n), !n.defaultPrevented && this.canUserPerformAction(K.ContextMenu)) {
 				e.preventDefault();
-				let n = Q(t);
-				this.userHighlight.focusOn(n), this.diagramEvent$.next(new X(n)), this.userSelection.add(n), this.diagramEvent$.next(new Y([n], !0)), this.contextMenu.open(e);
+				let n = Bt(t);
+				this.userHighlight.focusOn(n), this.diagramEvent$.next(new Y(n)), this.userSelection.add(n), this.diagramEvent$.next(new J([n], !0)), this.contextMenu.open(e);
 			}
 		}).on(S.DoubleClick, (e, t) => {
-			let n = new At(e, t);
+			let n = new Pt(e, t);
 			this.diagramEvent$.next(n);
 		}).call(e.drag().filter((e) => (this.secondaryButton = Rt(e), !0)).on(w.Start, (e, t) => {
-			this.multipleSelectionOn || this.secondaryButton ? this.startMultipleSelection(e) : this.canUserPerformAction(q.AddConnection) && (this.allowSharingPorts || t.incomingConnections.filter((e) => !e.removed).length === 0 && t.outgoingConnections.filter((e) => !e.removed).length === 0) && !t.removed ? (Z(A.Grabbing), this.startConnection(t), this.unfinishedConnection && (this.unfinishedConnectionTracer = this.selectCanvasElements().append("path").attr("stroke", "none").attr("fill", "none"))) : Z(A.NotAllowed);
+			this.multipleSelectionOn || this.secondaryButton ? this.startMultipleSelection(e) : this.canUserPerformAction(K.AddConnection) && (this.allowSharingPorts || t.incomingConnections.filter((e) => !e.removed).length === 0 && t.outgoingConnections.filter((e) => !e.removed).length === 0) && !t.removed ? (X(A.Grabbing), this.startConnection(t), this.unfinishedConnection && (this.unfinishedConnectionTracer = this.selectCanvasElements().append("path").attr("stroke", "none").attr("fill", "none"))) : X(A.NotAllowed);
 		}).on(w.Drag, (e, t) => {
 			if (this.multipleSelectionOn || this.secondaryButton) this.continueMultipleSelection(e);
-			else if (this.canUserPerformAction(q.AddConnection) && !t.removed && this.unfinishedConnection !== void 0) {
+			else if (this.canUserPerformAction(K.AddConnection) && !t.removed && this.unfinishedConnection !== void 0) {
 				let t = [e.x, e.y];
 				this.unfinishedConnectionTracer?.attr("d", zt(this.unfinishedConnection.look.shape || F.look.shape, this.unfinishedConnection.startCoords, t, this.unfinishedConnection.startDirection, this.unfinishedConnection.endDirection, this.unfinishedConnection.points, this.unfinishedConnection.type.defaultLook.thickness || F.look.thickness, this.unfinishedConnection.type.defaultStartMarkerLook?.width, this.unfinishedConnection.type.defaultEndMarkerLook?.width));
 				let n = this.unfinishedConnectionTracer?.node();
@@ -3161,7 +3299,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 					let r = n.getPointAtLength(t - e);
 					this.unfinishedConnection.endCoords = [r.x, r.y];
 				} else this.unfinishedConnection.endCoords = t;
-				if (this.updateConnectionsInView(rn), this.unfinishedConnectionPort?.raise(!1), this.model.ports.length > 0) {
+				if (this.updateConnectionsInView(ln), this.unfinishedConnectionPort?.raise(!1), this.model.ports.length > 0) {
 					let t = this.getPointerLocationRelativeToCanvas(e), n = Infinity, r;
 					for (let e of this.model.ports) {
 						let i = e.distanceTo(t);
@@ -3173,12 +3311,12 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		}).on(w.End, (e, t) => {
 			if (this.multipleSelectionOn || this.secondaryButton) this.finishMultipleSelection(e);
 			else {
-				if (this.canUserPerformAction(q.AddConnection) && !t.removed) {
+				if (this.canUserPerformAction(K.AddConnection) && !t.removed) {
 					this.unfinishedConnectionTracer?.remove();
 					let t = this.userHighlight.getFocus();
-					if (t instanceof it) this.finishConnection(t);
-					else if (t instanceof Ie && t.rootElement instanceof it) this.finishConnection(t.rootElement);
-					else if (t instanceof W || t instanceof H || t instanceof Ie) {
+					if (t instanceof ct) this.finishConnection(t);
+					else if (t instanceof Le && t.rootElement instanceof ct) this.finishConnection(t.rootElement);
+					else if (t instanceof W || t instanceof H || t instanceof Le) {
 						let n;
 						if (t instanceof W || t instanceof H) n = t;
 						else if (t.rootElement instanceof W || t.rootElement instanceof H) n = t.rootElement;
@@ -3190,10 +3328,10 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 						r === void 0 ? this.dropConnection() : this.finishConnection(r);
 					} else this.dropConnection();
 				}
-				Z();
+				X();
 			}
 			this.secondaryButton = !1;
-		})), i.filter(".image-look").append("image"), Ht(i), a.attr("transform", (e) => `translate(${e.coords[0] - e.width / 2},${e.coords[1] - e.width / 2})`).attr("opacity", (e) => e.removed ? .5 : 1), Wt(a);
+		})), i.filter(".image-look").append("image"), Ut(i), a.attr("transform", (e) => `translate(${e.coords[0] - e.width / 2},${e.coords[1] - e.width / 2})`).attr("opacity", (e) => e.removed ? .5 : 1), Gt(a);
 	}
 	updateConnectionsInView(...t) {
 		let n = this.model.connections.filter((e) => this.priorityThreshold === void 0 ? !0 : e.getPriority() >= this.priorityThreshold);
@@ -3202,22 +3340,22 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		t && t.length > 0 && (r = r.filter((e) => t.includes(e.id)));
 		let o = a.merge(r);
 		i.remove(), a.on(S.MouseOver, (e, t) => {
-			t.end !== void 0 && !this.dragging && (this.userHighlight.focusOn(t), this.diagramEvent$.next(new X(t)));
+			t.end !== void 0 && !this.dragging && (this.userHighlight.focusOn(t), this.diagramEvent$.next(new Y(t)));
 		}).on(S.Click, (e, t) => {
 			if (!e.ctrlKey && !e.shiftKey) {
 				let e = this.userSelection.all();
-				this.userSelection.clear(), this.diagramEvent$.next(new Y(e, !1));
+				this.userSelection.clear(), this.diagramEvent$.next(new J(e, !1));
 			}
-			this.userSelection.toggle(t), this.diagramEvent$.next(new Y([t], t.selected));
+			this.userSelection.toggle(t), this.diagramEvent$.next(new J([t], t.selected));
 		}).on(S.ContextMenu, (e, t) => {
 			if (this.dragging) {
 				e.preventDefault(), e.stopPropagation(), this.dragging = !1;
 				return;
 			}
-			let n = new jt(e, t);
-			this.diagramEvent$.next(n), !n.defaultPrevented && this.canUserPerformAction(q.ContextMenu) && (e.preventDefault(), this.userHighlight.focusOn(t), this.diagramEvent$.next(new X(t)), this.userSelection.add(t), this.diagramEvent$.next(new Y([t], !0)), this.contextMenu.open(e));
+			let n = new Ft(e, t);
+			this.diagramEvent$.next(n), !n.defaultPrevented && this.canUserPerformAction(K.ContextMenu) && (e.preventDefault(), this.userHighlight.focusOn(t), this.diagramEvent$.next(new Y(t)), this.userSelection.add(t), this.diagramEvent$.next(new J([t], !0)), this.contextMenu.open(e));
 		}).on(S.DoubleClick, (e, t) => {
-			let n = new At(e, t);
+			let n = new Pt(e, t);
 			this.diagramEvent$.next(n);
 		}).call(e.drag().filter((e) => (this.secondaryButton = Rt(e), !0)).on(w.Start, (e) => {
 			this.startMultipleSelection(e);
@@ -3225,7 +3363,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			this.continueMultipleSelection(e);
 		}).on(w.End, (e) => {
 			this.finishMultipleSelection(e);
-		})), a.append("path").attr("class", "diagram-connection-path"), a.append("path").attr("class", "diagram-connection-path-box"), a.append("marker").attr("id", (e) => `${e.id}-start-marker`).attr("class", "diagram-connection-start-marker").append("image").attr("preserveAspectRatio", "none"), a.append("marker").attr("id", (e) => `${e.id}-end-marker`).attr("class", "diagram-connection-end-marker").append("image").attr("preserveAspectRatio", "none"), a.append("g").attr("class", "diagram-connection-start-label"), a.select("g.diagram-connection-start-label").append("path"), a.select("g.diagram-connection-start-label").append("text").style("user-select", "none"), a.append("g").attr("class", "diagram-connection-middle-label"), a.select("g.diagram-connection-middle-label").append("path"), a.select("g.diagram-connection-middle-label").append("text").style("user-select", "none"), a.append("g").attr("class", "diagram-connection-end-label"), a.select("g.diagram-connection-end-label").append("path"), a.select("g.diagram-connection-end-label").append("text").style("user-select", "none"), o.attr("opacity", (e) => e.removed ? .5 : 1).select("path.diagram-connection-path").attr("d", (e) => zt(e.look.shape || F.look.shape, e.startCoords, e.endCoords, e.startDirection, e.endDirection, e.points, e.type.defaultLook.thickness || F.look.thickness, e.type.defaultStartMarkerLook?.width, e.type.defaultEndMarkerLook?.width)).attr("marker-start", (e) => `url(#${e.id}-start-marker)`).attr("marker-end", (e) => `url(#${e.id}-end-marker)`).attr("stroke", (e) => e.look.color || F.look.color).attr("stroke-width", (e) => e.look.thickness || F.look.thickness).attr("stroke-dasharray", (e) => ie(e.look.style || F.look.style, e.type.defaultLook.thickness || F.look.thickness)).attr("fill", "none"), o.select("path.diagram-connection-path-box").attr("d", (e) => zt(e.look.shape || F.look.shape, e.startCoords, e.endCoords, e.startDirection, e.endDirection, e.points, e.type.defaultLook.thickness || F.look.thickness, e.type.defaultStartMarkerLook?.width, e.type.defaultEndMarkerLook?.width)).attr("stroke", "transparent").attr("pointer-events", "stroke").attr("stroke-width", (e) => (e.look.thickness || F.look.thickness) + 12).attr("stroke-dasharray", (e) => ie(e.look.style || F.look.style, e.type.defaultLook.thickness || F.look.thickness)).attr("fill", "none"), o.data().forEach((e) => {
+		})), a.append("path").attr("class", "diagram-connection-path"), a.append("path").attr("class", "diagram-connection-path-box"), a.append("marker").attr("id", (e) => `${e.id}-start-marker`).attr("class", "diagram-connection-start-marker").append("image").attr("preserveAspectRatio", "none"), a.append("marker").attr("id", (e) => `${e.id}-end-marker`).attr("class", "diagram-connection-end-marker").append("image").attr("preserveAspectRatio", "none"), a.append("g").attr("class", "diagram-connection-start-label"), a.select("g.diagram-connection-start-label").append("path"), a.select("g.diagram-connection-start-label").append("text").style("user-select", "none"), a.append("g").attr("class", "diagram-connection-middle-label"), a.select("g.diagram-connection-middle-label").append("path"), a.select("g.diagram-connection-middle-label").append("text").style("user-select", "none"), a.append("g").attr("class", "diagram-connection-end-label"), a.select("g.diagram-connection-end-label").append("path"), a.select("g.diagram-connection-end-label").append("text").style("user-select", "none"), o.attr("opacity", (e) => e.removed ? .5 : 1).select("path.diagram-connection-path").attr("d", (e) => zt(e.look.shape || F.look.shape, e.startCoords, e.endCoords, e.startDirection, e.endDirection, e.points, e.type.defaultLook.thickness || F.look.thickness, e.type.defaultStartMarkerLook?.width, e.type.defaultEndMarkerLook?.width)).attr("marker-start", (e) => `url(#${e.id}-start-marker)`).attr("marker-end", (e) => `url(#${e.id}-end-marker)`).attr("stroke", (e) => e.look.color || F.look.color).attr("stroke-width", (e) => e.look.thickness || F.look.thickness).attr("stroke-dasharray", (e) => re(e.look.style || F.look.style, e.type.defaultLook.thickness || F.look.thickness)).attr("fill", "none"), o.select("path.diagram-connection-path-box").attr("d", (e) => zt(e.look.shape || F.look.shape, e.startCoords, e.endCoords, e.startDirection, e.endDirection, e.points, e.type.defaultLook.thickness || F.look.thickness, e.type.defaultStartMarkerLook?.width, e.type.defaultEndMarkerLook?.width)).attr("stroke", "transparent").attr("pointer-events", "stroke").attr("stroke-width", (e) => (e.look.thickness || F.look.thickness) + 12).attr("stroke-dasharray", (e) => re(e.look.style || F.look.style, e.type.defaultLook.thickness || F.look.thickness)).attr("fill", "none"), o.data().forEach((e) => {
 			this.updateConnectionLabelsInView(e), this.updateConnectionMarkersInView(e);
 		});
 	}
@@ -3234,62 +3372,62 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		t && t.length > 0 && (n = n.filter((e) => t.includes(e.id)));
 		let a = i.merge(n);
 		r.remove(), i.on(S.MouseOver, (e, t) => {
-			this.dragging || (this.userHighlight.focusOn(t), this.diagramEvent$.next(new X(t)));
+			this.dragging || (this.userHighlight.focusOn(t), this.diagramEvent$.next(new Y(t)));
 		}).on(S.Click, (e, t) => {
 			if (!e.ctrlKey && !e.shiftKey) {
 				let e = this.userSelection.all();
-				this.userSelection.clear(), this.diagramEvent$.next(new Y(e, !1));
+				this.userSelection.clear(), this.diagramEvent$.next(new J(e, !1));
 			}
-			let n = Q(t);
-			this.userSelection.toggle(n), this.diagramEvent$.next(new Y([n], n.selected));
+			let n = Bt(t);
+			this.userSelection.toggle(n), this.diagramEvent$.next(new J([n], n.selected));
 		}).on(S.ContextMenu, (e, t) => {
 			if (this.dragging) {
 				e.preventDefault(), e.stopPropagation(), this.dragging = !1;
 				return;
 			}
-			let n = new jt(e, t);
-			if (this.diagramEvent$.next(n), !n.defaultPrevented && this.canUserPerformAction(q.ContextMenu)) {
+			let n = new Ft(e, t);
+			if (this.diagramEvent$.next(n), !n.defaultPrevented && this.canUserPerformAction(K.ContextMenu)) {
 				e.preventDefault();
-				let n = Q(t);
-				this.userHighlight.focusOn(n), this.diagramEvent$.next(new X(n)), this.userSelection.add(n), this.diagramEvent$.next(new Y([n], !0)), this.contextMenu.open(e);
+				let n = Bt(t);
+				this.userHighlight.focusOn(n), this.diagramEvent$.next(new Y(n)), this.userSelection.add(n), this.diagramEvent$.next(new J([n], !0)), this.contextMenu.open(e);
 			}
 		}).on(S.DoubleClick, (e, t) => {
-			let n = new At(e, t);
-			this.diagramEvent$.next(n), !n.defaultPrevented && this.canUserPerformAction(q.EditField) && t.editable && !t.removed && (this.currentAction = new Ct(this, t.id, t.text, ""), this.openTextInput(t.id));
+			let n = new Pt(e, t);
+			this.diagramEvent$.next(n), !n.defaultPrevented && this.canUserPerformAction(K.EditField) && t.editable && !t.removed && (this.currentAction = new Dt(this, t.id, t.text, ""), this.openTextInput(t.id));
 		}).call(e.drag().filter((e) => (this.secondaryButton = Rt(e), !0)).on(w.Start, (e, t) => {
 			if (this.multipleSelectionOn || this.secondaryButton) this.startMultipleSelection(e);
 			else {
 				let n;
-				t.rootElement instanceof W ? n = t.rootElement : t.rootElement instanceof H && (n = t.rootElement.node), n ? this.startMovingNode(e, n) : Z(A.NotAllowed);
+				t.rootElement instanceof W ? n = t.rootElement : t.rootElement instanceof H && (n = t.rootElement.node), n ? this.startMovingNode(e, n) : X(A.NotAllowed);
 			}
 		}).on(w.Drag, (e, t) => {
 			if (this.multipleSelectionOn || this.secondaryButton) this.continueMultipleSelection(e);
 			else {
 				let n;
-				t.rootElement instanceof W ? n = t.rootElement : t.rootElement instanceof H && (n = t.rootElement.node), n ? this.continueMovingNode(e, n) : Z(A.NotAllowed);
+				t.rootElement instanceof W ? n = t.rootElement : t.rootElement instanceof H && (n = t.rootElement.node), n ? this.continueMovingNode(e, n) : X(A.NotAllowed);
 			}
 		}).on(w.End, (e, t) => {
 			if (this.multipleSelectionOn || this.secondaryButton) this.finishMultipleSelection(e);
 			else {
 				let n;
-				t.rootElement instanceof W ? n = t.rootElement : t.rootElement instanceof H && (n = t.rootElement.node), n ? this.finishMovingNode(e, n) : Z();
+				t.rootElement instanceof W ? n = t.rootElement : t.rootElement instanceof H && (n = t.rootElement.node), n ? this.finishMovingNode(e, n) : X();
 			}
 			this.secondaryButton = !1;
-		})), i.append("text"), i.append("rect"), a.attr("x", 0).attr("y", 0).attr("width", (e) => e.width).attr("height", (e) => e.height).attr("transform", (e) => `translate(${e.coords[0]},${e.coords[1]}) rotate(${e.orientation} ${e.width / 2} ${e.height / 2})`).attr("opacity", (e) => e.removed ? .5 : 1).select("text").attr("x", (e) => e.horizontalAlign === h.Center ? e.width / 2 : e.horizontalAlign === h.Right ? e.width : 0).attr("text-anchor", (e) => e.horizontalAlign === h.Center ? "middle" : e.horizontalAlign === h.Right ? "end" : "start").attr("y", (e) => e.verticalAlign === g.Center ? e.height / 2 : e.verticalAlign === g.Bottom ? e.height : 0).attr("dominant-baseline", (e) => e.verticalAlign === g.Center ? "middle" : e.verticalAlign === g.Bottom ? "auto" : "hanging").attr("font-size", (e) => e.fontSize).attr("font-family", (e) => e.fontFamily || "'Wonder Unit Sans', sans-serif").attr("font-weight", (e) => e.highlighted ? 600 : 400).attr("fill", (e) => e.selected ? e.selectedColor || "#000000" : e.color || "#000000").each((e) => {
+		})), i.append("text").style("user-select", "none").style("font-kerning", "none").style("white-space", "nowrap"), i.append("rect"), a.attr("x", 0).attr("y", 0).attr("width", (e) => e.width).attr("height", (e) => e.height).attr("transform", (e) => `translate(${e.coords[0]},${e.coords[1]}) rotate(${e.orientation} ${e.width / 2} ${e.height / 2})`).attr("opacity", (e) => e.removed ? .5 : 1).select("text").attr("x", (e) => e.horizontalAlign === h.Center ? e.width / 2 : e.horizontalAlign === h.Right ? e.width : 0).attr("text-anchor", (e) => e.horizontalAlign === h.Center ? "middle" : e.horizontalAlign === h.Right ? "end" : "start").attr("y", (e) => e.verticalAlign === g.Center ? e.height / 2 : e.verticalAlign === g.Bottom ? e.height : 0).attr("dominant-baseline", (e) => e.verticalAlign === g.Center ? "middle" : e.verticalAlign === g.Bottom ? "auto" : "hanging").attr("font-size", (e) => e.look.fontSize || L.look.fontSize).attr("font-family", (e) => e.look.fontFamily || "'Wonder Unit Sans', sans-serif").attr("font-weight", (e) => e.look.fontWeight || L.look.fontWeight).attr("fill", (e) => e.look.fontColor || L.look.fontColor).style("font-kerning", "none").each((e) => {
 			this.setFieldTextAndWrap(e);
 		}), a.select("rect").attr("x", 0).attr("y", 0).attr("width", (e) => e.width).attr("height", (e) => e.height).attr("fill", "transparent");
 	}
 	updateObjectsInView(...t) {
 		let n = this.selectCanvasElements().selectAll("g.diagram-object").data(this.model.objects.filter((e) => this.priorityThreshold === void 0 ? !0 : e.getPriority() >= this.priorityThreshold), (e) => e.id), r = n.exit(), i = n.enter().append("g").attr("id", (e) => e.id).attr("class", "diagram-object");
-		t && t.length > 0 && (n = n.filter((e) => t.includes(e.id))), i.merge(n).attr("width", (e) => e.width).attr("height", (e) => e.height).attr("transform", (e) => `translate(${e.coords[0]},${e.coords[1]})`).html((e) => e.html), r.remove(), i.on(S.ContextMenu, (e, t) => {
+		t && t.length > 0 && (n = n.filter((e) => t.includes(e.id))), i.merge(n).attr("width", (e) => e.width).attr("height", (e) => e.height).attr("transform", (e) => `translate(${e.coords[0]},${e.coords[1]})`).html((e) => e.svg), r.remove(), i.on(S.ContextMenu, (e, t) => {
 			if (this.dragging) {
 				e.preventDefault(), e.stopPropagation(), this.dragging = !1;
 				return;
 			}
-			let n = new jt(e, t);
-			this.diagramEvent$.next(n), !n.defaultPrevented && this.canUserPerformAction(q.ContextMenu) && (e.preventDefault(), this.contextMenu.open(e));
+			let n = new Ft(e, t);
+			this.diagramEvent$.next(n), !n.defaultPrevented && this.canUserPerformAction(K.ContextMenu) && (e.preventDefault(), this.contextMenu.open(e));
 		}).on(S.DoubleClick, (e, t) => {
-			let n = new At(e, t);
+			let n = new Pt(e, t);
 			this.diagramEvent$.next(n);
 		}).call(e.drag().filter((e) => (this.secondaryButton = Rt(e), !0)).on(w.Start, (e) => {
 			(this.multipleSelectionOn || this.secondaryButton) && this.startMultipleSelection(e);
@@ -3301,48 +3439,48 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}
 	updateDecoratorsInView(...t) {
 		let n = this.selectCanvasElements().selectAll("g.diagram-decorator").data(this.model.decorators.filter((e) => this.priorityThreshold === void 0 ? !0 : e.getPriority() >= this.priorityThreshold), (e) => e.id), r = n.exit(), i = n.enter().append("g").attr("id", (e) => e.id).attr("class", "diagram-decorator");
-		t && t.length > 0 && (n = n.filter((e) => t.includes(e.id))), i.merge(n).attr("width", (e) => e.width).attr("height", (e) => e.height).attr("transform", (e) => `translate(${e.coords[0]},${e.coords[1]})`).html((e) => e.html), r.remove(), i.on(S.MouseOver, (e, t) => {
-			this.dragging || (this.userHighlight.focusOn(t), this.diagramEvent$.next(new X(t)));
+		t && t.length > 0 && (n = n.filter((e) => t.includes(e.id))), i.merge(n).attr("width", (e) => e.width).attr("height", (e) => e.height).attr("transform", (e) => `translate(${e.coords[0]},${e.coords[1]})`).html((e) => e.svg), r.remove(), i.on(S.MouseOver, (e, t) => {
+			this.dragging || (this.userHighlight.focusOn(t), this.diagramEvent$.next(new Y(t)));
 		}).on(S.Click, (e, t) => {
 			if (!e.ctrlKey && !e.shiftKey) {
 				let e = this.userSelection.all();
-				this.userSelection.clear(), this.diagramEvent$.next(new Y(e, !1));
+				this.userSelection.clear(), this.diagramEvent$.next(new J(e, !1));
 			}
 			if (t.rootElement) {
-				let e = Q(t.rootElement);
-				this.userSelection.toggle(e), this.diagramEvent$.next(new Y([e], e.selected));
+				let e = Bt(t.rootElement);
+				this.userSelection.toggle(e), this.diagramEvent$.next(new J([e], e.selected));
 			}
 		}).on(S.ContextMenu, (e, t) => {
 			if (this.dragging) {
 				e.preventDefault(), e.stopPropagation(), this.dragging = !1;
 				return;
 			}
-			let n = new jt(e, t);
-			if (this.diagramEvent$.next(n), !n.defaultPrevented && this.canUserPerformAction(q.ContextMenu) && t.rootElement) {
+			let n = new Ft(e, t);
+			if (this.diagramEvent$.next(n), !n.defaultPrevented && this.canUserPerformAction(K.ContextMenu) && t.rootElement) {
 				e.preventDefault();
-				let n = Q(t.rootElement);
-				this.userHighlight.focusOn(n), this.diagramEvent$.next(new X(n)), this.userSelection.add(n), this.diagramEvent$.next(new Y([n], !0)), this.contextMenu.open(e);
+				let n = Bt(t.rootElement);
+				this.userHighlight.focusOn(n), this.diagramEvent$.next(new Y(n)), this.userSelection.add(n), this.diagramEvent$.next(new J([n], !0)), this.contextMenu.open(e);
 			}
 		}).on(S.DoubleClick, (e, t) => {
-			let n = new At(e, t);
+			let n = new Pt(e, t);
 			this.diagramEvent$.next(n);
 		}).call(e.drag().filter((e) => (this.secondaryButton = Rt(e), !0)).on(w.Start, (e, t) => {
 			if (this.multipleSelectionOn || this.secondaryButton) this.startMultipleSelection(e);
 			else {
 				let n;
-				t.rootElement instanceof W ? n = t.rootElement : t.rootElement instanceof H && (n = t.rootElement.node), n ? this.startMovingNode(e, n) : Z(A.NotAllowed);
+				t.rootElement instanceof W ? n = t.rootElement : t.rootElement instanceof H && (n = t.rootElement.node), n ? this.startMovingNode(e, n) : X(A.NotAllowed);
 			}
 		}).on(w.Drag, (e, t) => {
 			if (this.multipleSelectionOn || this.secondaryButton) this.continueMultipleSelection(e);
 			else {
 				let n;
-				t.rootElement instanceof W ? n = t.rootElement : t.rootElement instanceof H && (n = t.rootElement.node), n ? this.continueMovingNode(e, n) : Z(A.NotAllowed);
+				t.rootElement instanceof W ? n = t.rootElement : t.rootElement instanceof H && (n = t.rootElement.node), n ? this.continueMovingNode(e, n) : X(A.NotAllowed);
 			}
 		}).on(w.End, (e, t) => {
 			if (this.multipleSelectionOn || this.secondaryButton) this.finishMultipleSelection(e);
 			else {
 				let n;
-				t.rootElement instanceof W ? n = t.rootElement : t.rootElement instanceof H && (n = t.rootElement.node), n ? this.finishMovingNode(e, n) : Z();
+				t.rootElement instanceof W ? n = t.rootElement : t.rootElement instanceof H && (n = t.rootElement.node), n ? this.finishMovingNode(e, n) : X();
 			}
 			this.secondaryButton = !1;
 		}));
@@ -3352,9 +3490,12 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			...L,
 			...e.type.label
 		};
-		if (n) {
+		if (r.look = {
+			...L.look,
+			...r.look
+		}, n) {
 			let i = n.getTotalLength(), a = 0, o = 0, s = 0, c = 0, l = 0, u = 0;
-			if (r.backgroundColor === "transparent") {
+			if (r.look.fillColor === "transparent") {
 				let t = e.endCoords[0] - e.startCoords[0], n = e.endCoords[1] - e.startCoords[1];
 				switch (e.startDirection) {
 					case p.Top:
@@ -3388,10 +3529,10 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 				}
 				Math.abs(t) >= Math.abs(n) ? (s = t > 0 ? -.5 : .5, c = n > 0 ? .5 : -.5) : (s = t > 0 ? .5 : -.5, c = n > 0 ? -.5 : .5);
 			}
-			t.select("g.diagram-connection-start-label text").attr("x", 0).attr("y", r.fontSize / 3).attr("text-anchor", "middle").attr("font-family", r.fontFamily).attr("font-size", r.fontSize).attr("fill", e.selected ? r.selectedColor : r.color).style("font-kerning", "none").text(e.startLabel);
+			t.select("g.diagram-connection-start-label text").attr("x", 0).attr("y", (r.look.fontSize || L.look.fontSize) / 3).attr("text-anchor", "middle").attr("font-family", r.look.fontFamily || L.look.fontFamily).attr("font-size", r.look.fontSize || L.look.fontSize).attr("fill", r.look.fontColor || L.look.fontColor).text(e.startLabel);
 			let d = t.select("g.diagram-connection-start-label text").node()?.getBoundingClientRect();
 			if (d) {
-				let i = e.startLabel ? d.width / this.zoomTransform.k + ze(r) + Be(r) : 0, s = e.startLabel ? d.height / this.zoomTransform.k + Ve(r) + Re(r) : 0, c;
+				let i = e.startLabel ? d.width / this.zoomTransform.k + Be(r) + Ve(r) : 0, s = e.startLabel ? d.height / this.zoomTransform.k + He(r) + ze(r) : 0, c;
 				switch (e.startDirection) {
 					case p.Left:
 						c = n.getPointAtLength(B(r) + i / 2);
@@ -3407,18 +3548,18 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 						break;
 					default: c = n.getPointAtLength(Math.max(z(r) + i / 2, B(r) + i / 2, V(r) + s / 2, R(r) + s / 2));
 				}
-				t.select("g.diagram-connection-start-label path").attr("d", de(-i / 2, -s / 2, i, s)).attr("fill", r.backgroundColor).attr("stroke", "none"), t.select("g.diagram-connection-start-label").attr("transform", `translate(${c.x + a * i},${c.y + o * s})`);
+				t.select("g.diagram-connection-start-label path").attr("d", de(-i / 2, -s / 2, i, s)).attr("fill", r.look.fillColor || L.look.fillColor).attr("stroke", "none"), t.select("g.diagram-connection-start-label").attr("transform", `translate(${c.x + a * i},${c.y + o * s})`);
 			}
-			t.select("g.diagram-connection-middle-label text").attr("x", 0).attr("y", r.fontSize / 3).attr("text-anchor", "middle").attr("font-family", r.fontFamily).attr("font-size", r.fontSize).attr("fill", e.selected ? r.selectedColor : r.color).style("font-kerning", "none").text(e.middleLabel);
+			t.select("g.diagram-connection-middle-label text").attr("x", 0).attr("y", (r.look.fontSize || L.look.fontSize) / 3).attr("text-anchor", "middle").attr("font-family", r.look.fontFamily || L.look.fontFamily).attr("font-size", r.look.fontSize || L.look.fontSize).attr("fill", r.look.fontColor || L.look.fillColor).style("font-kerning", "none").text(e.middleLabel);
 			let f = t.select("g.diagram-connection-middle-label text").node()?.getBoundingClientRect();
 			if (f) {
-				let a = e.middleLabel ? f.width / this.zoomTransform.k + ze(r) + Be(r) : 0, o = e.middleLabel ? f.height / this.zoomTransform.k + Ve(r) + Re(r) : 0, l = n.getPointAtLength(i / 2);
-				t.select("g.diagram-connection-middle-label path").attr("d", de(-a / 2, -o / 2, a, o)).attr("fill", r.backgroundColor).attr("stroke", "none"), t.select("g.diagram-connection-middle-label").attr("transform", `translate(${l.x + s * a},${l.y + c * o})`);
+				let a = e.middleLabel ? f.width / this.zoomTransform.k + Be(r) + Ve(r) : 0, o = e.middleLabel ? f.height / this.zoomTransform.k + He(r) + ze(r) : 0, l = n.getPointAtLength(i / 2);
+				t.select("g.diagram-connection-middle-label path").attr("d", de(-a / 2, -o / 2, a, o)).attr("fill", r.look.fillColor || L.look.fillColor).attr("stroke", "none"), t.select("g.diagram-connection-middle-label").attr("transform", `translate(${l.x + s * a},${l.y + c * o})`);
 			}
-			t.select("g.diagram-connection-end-label text").attr("x", 0).attr("y", r.fontSize / 3).attr("text-anchor", "middle").attr("font-family", r.fontFamily).attr("font-size", r.fontSize).attr("fill", e.selected ? r.selectedColor : r.color).style("font-kerning", "none").text(e.endLabel);
+			t.select("g.diagram-connection-end-label text").attr("x", 0).attr("y", (r.look.fontSize || L.look.fontSize) / 3).attr("text-anchor", "middle").attr("font-family", r.look.fontFamily || L.look.fontFamily).attr("font-size", r.look.fontSize || L.look.fontSize).attr("fill", r.look.fontColor || L.look.fontColor).style("font-kerning", "none").text(e.endLabel);
 			let m = t.select("g.diagram-connection-end-label text").node()?.getBoundingClientRect();
 			if (m) {
-				let a = e.endLabel ? m.width / this.zoomTransform.k + ze(r) + Be(r) : 0, o = e.endLabel ? m.height / this.zoomTransform.k + Ve(r) + Re(r) : 0, s;
+				let a = e.endLabel ? m.width / this.zoomTransform.k + Be(r) + Ve(r) : 0, o = e.endLabel ? m.height / this.zoomTransform.k + He(r) + ze(r) : 0, s;
 				switch (e.endDirection) {
 					case p.Left:
 						s = n.getPointAtLength(i - (B(r) + a / 2));
@@ -3434,7 +3575,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 						break;
 					default: s = n.getPointAtLength(i - Math.max(z(r) + a / 2, B(r) + a / 2, V(r) + o / 2, R(r) + o / 2));
 				}
-				t.select("g.diagram-connection-end-label path").attr("d", de(-a / 2, -o / 2, a, o)).attr("fill", r.backgroundColor).attr("stroke", "none"), t.select("g.diagram-connection-end-label").attr("transform", `translate(${s.x + l * a},${s.y + u * o})`);
+				t.select("g.diagram-connection-end-label path").attr("d", de(-a / 2, -o / 2, a, o)).attr("fill", r.look.fillColor || L.look.fillColor).attr("stroke", "none"), t.select("g.diagram-connection-end-label").attr("transform", `translate(${s.x + l * a},${s.y + u * o})`);
 			}
 		}
 	}
@@ -3455,15 +3596,15 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		let n = this.model.fields.get(e);
 		if (n) {
 			if (n.rootElement instanceof W) {
-				let e = this.minimumSizeOfField(n), r = e[0] + z(n.rootElement.type.label) + B(n.rootElement.type.label) - n.rootElement.width, i = e[1] + V(n.rootElement.type.label) + R(n.rootElement.type.label) - n.rootElement.height;
-				this.snapToGrid && (r = Math.ceil(r / this.gridSize) * this.gridSize, i = Math.ceil(i / this.gridSize) * this.gridSize), n.rootElement.width + r < n.rootElement.type.minWidth && (r = n.rootElement.type.minWidth - n.rootElement.width), n.rootElement.height + i < n.rootElement.type.minHeight && (i = n.rootElement.type.minHeight - n.rootElement.height), (t !== !1 || r > 0) && n.rootElement.stretch(p.Right, r), (t !== !1 || i > 0) && n.rootElement.stretch(p.Bottom, i);
+				let e = this.minimumSizeOfField(n), r = e[0] + z(n.rootElement.type.label) + B(n.rootElement.type.label) - n.rootElement.width, i = e[1] + V(n.rootElement.type.label) + R(n.rootElement.type.label) - n.rootElement.height, a = Z(this.gridConfig), o = Q(this.gridConfig);
+				this.gridConfig.snap && a !== 0 && (r = Math.ceil(r / a) * a), this.gridConfig.snap && o !== 0 && (i = Math.ceil(i / o) * o), n.rootElement.width + r < n.rootElement.type.minWidth && (r = n.rootElement.type.minWidth - n.rootElement.width), n.rootElement.height + i < n.rootElement.type.minHeight && (i = n.rootElement.type.minHeight - n.rootElement.height), (t !== !1 || r > 0) && n.rootElement.stretch(p.Right, r), (t !== !1 || i > 0) && n.rootElement.stretch(p.Bottom, i);
 			}
 			if (n.rootElement instanceof H) {
 				let e = this.minimumSizeOfField(n), r = e[0], i = e[1];
 				for (let e of n.rootElement.node?.sections || []) e.label && (e.indexXInNode === n.rootElement.indexXInNode && e.indexYInNode !== n.rootElement.indexYInNode ? r = Math.max(r, this.minimumSizeOfField(e.label)[0]) : e.indexXInNode !== n.rootElement.indexXInNode && e.indexYInNode === n.rootElement.indexYInNode && (i = Math.max(i, this.minimumSizeOfField(e.label)[1])));
 				e[0] < r && (e[0] = r), e[1] < i && (e[1] = i);
-				let a = n.rootElement.type, o = e[0] + z(a?.label) + B(a?.label) - n.rootElement.width, s = e[1] + V(a?.label) + R(a?.label) - n.rootElement.height;
-				this.snapToGrid && (o = Math.ceil(o / this.gridSize) * this.gridSize, s = Math.ceil(s / this.gridSize) * this.gridSize), n.rootElement.width + o < (n.rootElement.getMinWidth() || 0) && (o = (n.rootElement.getMinWidth() || 0) - n.rootElement.width), n.rootElement.height + s < (n.rootElement.getMinHeight() || 0) && (s = (n.rootElement.getMinHeight() || 0) - n.rootElement.height), (t || o > 0) && n.rootElement.node?.stretchSections(p.Right, o, n.rootElement.indexXInNode, n.rootElement.indexYInNode), (t || s > 0) && n.rootElement.node?.stretchSections(p.Bottom, s, n.rootElement.indexXInNode, n.rootElement.indexYInNode);
+				let a = n.rootElement.type, o = e[0] + z(a?.label) + B(a?.label) - n.rootElement.width, s = e[1] + V(a?.label) + R(a?.label) - n.rootElement.height, c = Z(this.gridConfig), l = Q(this.gridConfig);
+				this.gridConfig.snap && c !== 0 && (o = Math.ceil(o / c) * c), this.gridConfig.snap && l !== 0 && (s = Math.ceil(s / l) * l), n.rootElement.width + o < (n.rootElement.getMinWidth() || 0) && (o = (n.rootElement.getMinWidth() || 0) - n.rootElement.width), n.rootElement.height + s < (n.rootElement.getMinHeight() || 0) && (s = (n.rootElement.getMinHeight() || 0) - n.rootElement.height), (t || o > 0) && n.rootElement.node?.stretchSections(p.Right, o, n.rootElement.indexXInNode, n.rootElement.indexYInNode), (t || s > 0) && n.rootElement.node?.stretchSections(p.Bottom, s, n.rootElement.indexXInNode, n.rootElement.indexYInNode);
 			}
 		}
 	}
@@ -3482,20 +3623,20 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		return e.select(this.diagramRoot);
 	}
 	selectSVGElement() {
-		return e.select(this.diagramRoot).select("svg");
+		return this.selectRoot().select("svg");
 	}
 	selectCanvasView() {
 		return this.selectSVGElement().select(".daga-canvas-view");
 	}
 	selectCanvasElements() {
-		return this.selectSVGElement().select(".daga-canvas-elements");
+		return this.selectCanvasView().select(".daga-canvas-elements");
 	}
 	startConnection(e) {
 		if (e.allowsOutgoing || e.allowsIncoming) {
-			if (this.connectionType && (this.connectionType.canStartFromType(e.getNode()?.type?.id || "") && e.allowsOutgoing || this.connectionType.canFinishOnType(e.getNode()?.type?.id || "") && e.allowsIncoming)) this.unfinishedConnection = new I(this.model, this.connectionType, e, void 0, rn), this.unfinishedConnectionPort = e;
+			if (this.connectionType && (this.connectionType.canStartFromType(e.getNode()?.type?.id || "") && e.allowsOutgoing || this.connectionType.canFinishOnType(e.getNode()?.type?.id || "") && e.allowsIncoming)) this.unfinishedConnection = new I(this.model, this.connectionType, e, void 0, ln), this.unfinishedConnectionPort = e;
 			else if (this.inferConnectionType) {
 				let t = this.model.connections.types.all().find((t) => e.allowsOutgoing && t.canStartFromType(e.getNode()?.type?.id || ""));
-				t === void 0 && (t = this.model.connections.types.all().find((t) => e.allowsIncoming && t.canFinishOnType(e.getNode()?.type?.id || ""))), t !== void 0 && (this.unfinishedConnection = new I(this.model, t, e, void 0, rn), this.unfinishedConnectionPort = e);
+				t === void 0 && (t = this.model.connections.types.all().find((t) => e.allowsIncoming && t.canFinishOnType(e.getNode()?.type?.id || ""))), t !== void 0 && (this.unfinishedConnection = new I(this.model, t, e, void 0, ln), this.unfinishedConnectionPort = e);
 			}
 		}
 	}
@@ -3514,15 +3655,15 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 				return;
 			}
 			if (this.unfinishedConnection.type.canStartFromType(this.unfinishedConnection?.start?.getNode()?.type?.id || "") && this.unfinishedConnection?.start?.allowsOutgoing && this.unfinishedConnection.type.canFinishOnType(e.getNode()?.type?.id || "") && e.allowsIncoming) {
-				let t = new St(this, this.unfinishedConnection.type, this.unfinishedConnection.start?.id, e.id);
+				let t = new Et(this, this.unfinishedConnection.type, this.unfinishedConnection.start?.id, e.id);
 				this.dropConnection(), t.do(), this.actionStack.add(t);
 			} else if (this.unfinishedConnection.type.canFinishOnType(this.unfinishedConnection?.start?.getNode()?.type?.id || "") && this.unfinishedConnection?.start?.allowsIncoming && this.unfinishedConnection.type.canStartFromType(e.getNode()?.type?.id || "") && e.allowsOutgoing) {
-				let t = new St(this, this.unfinishedConnection.type, e.id, this.unfinishedConnection.start?.id);
+				let t = new Et(this, this.unfinishedConnection.type, e.id, this.unfinishedConnection.start?.id);
 				this.dropConnection(), t.do(), this.actionStack.add(t);
 			} else if (this.inferConnectionType) {
 				let t = this.model.connections.types.all().find((t) => t.canStartFromType(this.unfinishedConnection?.start?.getNode()?.type?.id || "") && this.unfinishedConnection?.start?.allowsOutgoing && t.canFinishOnType(e.getNode()?.type?.id || "") && e.allowsIncoming), n = !1;
 				if (t === void 0 && (t = this.model.connections.types.all().find((t) => t.canFinishOnType(this.unfinishedConnection?.start?.getNode()?.type?.id || "") && this.unfinishedConnection?.start?.allowsIncoming && t.canStartFromType(e.getNode()?.type?.id || "") && e.allowsOutgoing), n = !0), t !== void 0) {
-					let r = new St(this, t, n ? e.id : this.unfinishedConnection.start?.id, n ? this.unfinishedConnection.start?.id : e.id);
+					let r = new Et(this, t, n ? e.id : this.unfinishedConnection.start?.id, n ? this.unfinishedConnection.start?.id : e.id);
 					this.dropConnection(), r.do(), this.actionStack.add(r);
 				} else this.dropConnection();
 			} else this.dropConnection();
@@ -3539,8 +3680,8 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}
 	openTextInput(e) {
 		let t = this.model.fields.get(e);
-		t && this.createInputField(t.text, t.coords, t.width, t.height, t.fontSize, t.fontFamily || L.fontFamily, t.orientation, t.multiline, () => {}, (e) => {
-			t.text = e, this.currentAction instanceof Ct && (this.currentAction.to = e, this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0);
+		t && this.createInputField(t.text, t.coords, t.width, t.height, t.look.fontSize || L.look.fontSize, t.look.fontFamily || L.look.fontFamily, t.orientation, t.multiline, () => {}, (e) => {
+			t.text = e, this.currentAction instanceof Dt && (this.currentAction.to = e, this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0);
 		});
 	}
 	createInputField(e, t, n, r, i, a, o, s, c, l) {
@@ -3555,11 +3696,11 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			}
 		}).on(S.KeyUp, (e) => {
 			e.stopPropagation();
-		}).on(S.Input, (e) => {
-			let t = d.property("value");
-			d.attr("cols", ge(t) + 1), d.attr("rows", _e(t) + 1), d.style("width", ""), d.style("height", ""), f = d.property("scrollWidth") + 1, p = d.property("scrollHeight") + 1;
-			let i = Math.max(f, n), a = Math.max(p, r);
-			u?.attr("width", `${i}px`), d.style("width", `${i}px`), u?.attr("height", `${a}px`), d.style("height", `${a}px`), c && c(t);
+		}).on(S.Input, () => {
+			let e = d.property("value");
+			d.attr("cols", ge(e) + 1), d.attr("rows", _e(e) + 1), d.style("width", ""), d.style("height", ""), f = d.property("scrollWidth") + 1, p = d.property("scrollHeight") + 1;
+			let t = Math.max(f, n), i = Math.max(p, r);
+			u?.attr("width", `${t}px`), d.style("width", `${t}px`), u?.attr("height", `${i}px`), d.style("height", `${i}px`), c && c(e);
 		}).on(S.Click, (e) => {
 			e.stopPropagation();
 		}).on(S.FocusOut, () => {
@@ -3593,33 +3734,33 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	setFieldText(e, t, n) {
 		let r = n.split("\n");
 		t.html("");
-		for (let n = 0; n < r.length; ++n) t.append("tspan").attr("x", e.horizontalAlign === h.Center ? e.width / 2 : e.horizontalAlign === h.Right ? e.width : 0).attr("y", e.verticalAlign === g.Center ? (n + .5 - r.length / 2) * e.fontSize + e.height / 2 : e.verticalAlign === g.Bottom ? e.height - (r.length - n - 1) * e.fontSize : n * e.fontSize).text(r[n]);
+		for (let n = 0; n < r.length; ++n) t.append("tspan").attr("x", e.horizontalAlign === h.Center ? e.width / 2 : e.horizontalAlign === h.Right ? e.width : 0).attr("y", e.verticalAlign === g.Center ? (n + .5 - r.length / 2) * (e.look.fontSize || L.look.fontSize) + e.height / 2 : e.verticalAlign === g.Bottom ? e.height - (r.length - n - 1) * (e.look.fontSize || L.look.fontSize) : n * (e.look.fontSize || L.look.fontSize)).text(r[n]);
 	}
 	startMovingNode(e, t) {
-		if (this.canUserPerformAction(q.MoveNode) && !t.removed) if (Z(A.Grabbing), this.draggingFrom = [e.x, e.y], t.selected && this.userSelection.count((e) => e instanceof W) > 1) this.currentAction = new bt(this, this.userSelection.filter((e) => e instanceof W).map((e) => e.id), t.coords);
+		if (this.canUserPerformAction(K.MoveNode) && !t.removed) if (X(A.Grabbing), this.draggingFrom = [e.x, e.y], t.selected && this.userSelection.count((e) => e instanceof W) > 1) this.currentAction = new wt(this, this.userSelection.filter((e) => e instanceof W).map((e) => e.id), t.coords);
 		else {
 			let e = t.getLastAncestor();
-			this.currentAction = new J(this, q.MoveNode, t.id, t.getGeometry(), t.getGeometry(), e?.id, e?.getGeometry(t.id), e?.getGeometry(t.id));
+			this.currentAction = new q(this, K.MoveNode, t.id, t.getGeometry(), t.getGeometry(), e?.id, e?.getGeometry(t.id), e?.getGeometry(t.id));
 		}
-		else Z(A.NotAllowed);
+		else X(A.NotAllowed);
 	}
 	continueMovingNode(e, t) {
-		if (this.canUserPerformAction(q.MoveNode) && (this.currentAction instanceof bt || this.currentAction instanceof J) && !t.removed) {
+		if (this.canUserPerformAction(K.MoveNode) && (this.currentAction instanceof wt || this.currentAction instanceof q) && !t.removed) {
 			let n = [e.x - t.width / 2, e.y - t.height / 2];
-			t.selected ? this.userSelection.move([n[0] - t.coords[0], n[1] - t.coords[1]]) : t.move(n), this.userHighlight.clear(), this.dragging = !0, this.diagramEvent$.next(new Mt(t));
+			t.selected ? this.userSelection.move([n[0] - t.coords[0], n[1] - t.coords[1]]) : t.move(n), this.userHighlight.clear(), this.dragging = !0, this.diagramEvent$.next(new It(t));
 		}
 	}
 	finishMovingNode(e, t) {
-		if (this.canUserPerformAction(q.MoveNode) && !t.removed && (this.draggingFrom[0] !== e.x || this.draggingFrom[1] !== e.y)) {
+		if (this.canUserPerformAction(K.MoveNode) && !t.removed && (this.draggingFrom[0] !== e.x || this.draggingFrom[1] !== e.y)) {
 			let n = [e.x - t.width / 2, e.y - t.height / 2];
-			if (this.snapToGrid && (n = this.getClosestGridPoint([n[0] - t.type.snapToGridOffset[0], n[1] - t.type.snapToGridOffset[1]]), n[0] += t.type.snapToGridOffset[0], n[1] += t.type.snapToGridOffset[1]), this.currentAction instanceof bt) {
+			if (this.gridConfig?.snap && (n = this.getClosestGridPoint([n[0] - t.type.snapToGridOffset[0], n[1] - t.type.snapToGridOffset[1]]), n[0] += t.type.snapToGridOffset[0], n[1] += t.type.snapToGridOffset[1]), this.currentAction instanceof wt) {
 				let e = this.currentAction.delta;
 				this.currentAction.delta = [n[0] - e[0], n[1] - e[1]], t.selected ? this.userSelection.move([e[0] - t.coords[0], e[1] - t.coords[1]]) : t.move(e);
-			} else if (this.currentAction instanceof J) {
+			} else if (this.currentAction instanceof q) {
 				t.move(n);
 				let r = Ye(this.model.nodes.getAtCoordinates(e.x, e.y).filter((e) => e.id !== t.id && !e.isDescendantOf(t)).filter((e) => e.type.childrenTypes.includes(t.type.id))), i = r[r.length - 1];
 				if (i !== t.parent && (t.type.canBeParentless || i !== void 0)) {
-					let e = i?.getLastAncestor(), n = this.currentAction.from, r = new xt(this, t.id, t.parent?.id, i?.id, n, t.getGeometry(), e?.id, e?.getGeometry(t.id), e?.getGeometry(t.id));
+					let e = i?.getLastAncestor(), n = this.currentAction.from, r = new Tt(this, t.id, t.parent?.id, i?.id, n, t.getGeometry(), e?.id, e?.getGeometry(t.id), e?.getGeometry(t.id));
 					t.parent?.removeChild(t), i !== void 0 && i.addChild(t), r.toChildGeometry = t.getGeometry(t.id), r.toAncestorGeometry = e?.getGeometry(t.id), this.currentAction = r;
 				} else {
 					let e = t?.getLastAncestor();
@@ -3628,22 +3769,22 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			}
 			this.currentAction !== void 0 && (this.currentAction.do(), this.actionStack.add(this.currentAction), this.currentAction = void 0);
 		}
-		Z(), this.dragging = !1;
+		X(), this.dragging = !1;
 	}
 	startMultipleSelection(e) {
 		this.draggingFrom = this.getPointerLocationRelativeToCanvas(e), this.multipleSelectionContainer = this.selectSVGElement().append("rect").attr("stroke", "#0E74B6").attr("fill", "rgba(14, 116, 182, 0.06)");
 	}
 	continueMultipleSelection(e) {
 		let t = this.getPointerLocationRelativeToCanvas(e);
-		(this.draggingFrom[0] !== t[0] || this.draggingFrom[1] !== t[1]) && (Z(A.Crosshair), this.multipleSelectionContainer?.attr("x", Math.min(this.draggingFrom[0], t[0]) * this.zoomTransform.k + this.zoomTransform.x)?.attr("y", Math.min(this.draggingFrom[1], t[1]) * this.zoomTransform.k + this.zoomTransform.y)?.attr("width", Math.abs(this.draggingFrom[0] - t[0]) * this.zoomTransform.k)?.attr("height", Math.abs(this.draggingFrom[1] - t[1]) * this.zoomTransform.k), this.dragging = !0);
+		(this.draggingFrom[0] !== t[0] || this.draggingFrom[1] !== t[1]) && (X(A.Crosshair), this.multipleSelectionContainer?.attr("x", Math.min(this.draggingFrom[0], t[0]) * this.zoomTransform.k + this.zoomTransform.x)?.attr("y", Math.min(this.draggingFrom[1], t[1]) * this.zoomTransform.k + this.zoomTransform.y)?.attr("width", Math.abs(this.draggingFrom[0] - t[0]) * this.zoomTransform.k)?.attr("height", Math.abs(this.draggingFrom[1] - t[1]) * this.zoomTransform.k), this.dragging = !0);
 	}
 	finishMultipleSelection(e) {
 		let t = this.getPointerLocationRelativeToCanvas(e);
 		this.multipleSelectionContainer?.remove(), this.multipleSelectionContainer = void 0, this.userSelection.clear();
 		for (let e of this.model.nodes) ee([e.coords, [e.coords[0] + e.width, e.coords[1] + e.height]], [this.draggingFrom, t]) && this.userSelection.add(e);
-		this.multipleSelectionOn = !1, this.diagramEvent$.next(new Y(this.userSelection.all(), !0)), Z();
+		this.multipleSelectionOn = !1, this.diagramEvent$.next(new J(this.userSelection.all(), !0)), X();
 	}
-}, on = class {
+}, dn = class {
 	constructor() {
 		this.grid = [[void 0]], this.offsetX = 0, this.offsetY = 0;
 	}
@@ -3701,36 +3842,36 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			for (let e = t[1]; e !== i[1] + r; e += r) if (t[1] = e, this.get(t) === void 0) return t;
 		}
 	}
-}, sn = class {
+}, fn = class {
 	constructor(e) {
 		this.gapSize = e;
 	}
 	apply(e) {
 		if (e.nodes.length === 0) return e;
-		let t = new on(), n = e.nodes.filter((e) => !e.parent);
-		for (; n.length > 0;) cn(n[0], t, [0, 0], n);
-		let r = Math.max(...e.nodes.map((e) => e.width)), i = Math.max(...e.nodes.map((e) => e.height)), a = this.gapSize === void 0 ? (e.canvas?.gridSize || 0) * 2 : this.gapSize;
+		let t = new dn(), n = e.nodes.filter((e) => !e.parent);
+		for (; n.length > 0;) pn(n[0], t, [0, 0], n);
+		let r = Math.max(...e.nodes.map((e) => e.width)), i = Math.max(...e.nodes.map((e) => e.height)), a = this.gapSize === void 0 ? e.canvas?.gridConfig ? Z(e.canvas?.gridConfig) * 2 : 0 : this.gapSize, o = this.gapSize === void 0 ? e.canvas?.gridConfig ? Q(e.canvas?.gridConfig) * 2 : 0 : this.gapSize;
 		for (let e = t.minY(); e <= t.maxY(); ++e) for (let n = t.minX(); n <= t.maxX(); ++n) {
-			let o = t.get([n, e]);
-			o !== void 0 && o.move([n * (r + a), e * (i + a)]);
+			let s = t.get([n, e]);
+			s !== void 0 && s.move([n * (r + a), e * (i + o)]);
 		}
 		return e;
 	}
-}, cn = (e, t, n, r) => {
+}, pn = (e, t, n, r) => {
 	let i = t.getClosestEmptyCoordinate(n);
-	t.set(i, e), O(r, e);
-	for (let n of e.getAdjacentNodes()) r.includes(n) && cn(n, t, i, r);
-}, ln = class {
+	t.set(i, e), k(r, e);
+	for (let n of e.getAdjacentNodes()) r.includes(n) && pn(n, t, i, r);
+}, mn = class {
 	constructor(e) {
 		this.gapSize = e;
 	}
 	apply(e) {
 		if (e.nodes.length === 0) return e;
-		let t = new on(), n = e.nodes.filter((e) => !e.parent), r = {}, i = n[0], a = [i];
+		let t = new dn(), n = e.nodes.filter((e) => !e.parent), r = {}, i = n[0], a = [i];
 		for (r[i.id] = [0, 0]; n.length > 0;) {
 			let e = [];
 			for (let i of a) {
-				t.set(t.getClosestEmptyCoordinate(r[i.id]), i), O(n, i);
+				t.set(t.getClosestEmptyCoordinate(r[i.id]), i), k(n, i);
 				let a = i.getAdjacentNodes();
 				for (let t of a) n.includes(t) && (e.push(t), r[t.id] = r[i.id]);
 			}
@@ -3740,179 +3881,177 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 				a = [e], r[e.id] = t.getClosestEmptyCoordinate([0, 0]);
 			}
 		}
-		let o = Math.max(...e.nodes.map((e) => e.width)), s = Math.max(...e.nodes.map((e) => e.height)), c = this.gapSize === void 0 ? (e.canvas?.gridSize || 0) * 2 : this.gapSize;
+		let o = Math.max(...e.nodes.map((e) => e.width)), s = Math.max(...e.nodes.map((e) => e.height)), c = this.gapSize === void 0 ? e.canvas?.gridConfig ? Z(e.canvas?.gridConfig) * 2 : 0 : this.gapSize, l = this.gapSize === void 0 ? e.canvas?.gridConfig ? Q(e.canvas?.gridConfig) * 2 : 0 : this.gapSize;
 		for (let e = t.minY(); e <= t.maxY(); ++e) for (let n = t.minX(); n <= t.maxX(); ++n) {
 			let r = t.get([n, e]);
-			r !== void 0 && r.move([n * (o + c), e * (s + c)]);
+			r !== void 0 && r.move([n * (o + c), e * (s + l)]);
 		}
 		return e;
 	}
-}, un = class {
+}, hn = class {
 	constructor(e) {
 		this.gapSize = e;
 	}
 	apply(e) {
 		if (e.nodes.length === 0) return e;
-		let t = this.gapSize === void 0 ? (e.canvas?.gridSize || 0) * 2 : this.gapSize, n = e.nodes.filter((e) => !e.parent), r = n[0];
-		O(n, r);
-		let i = [[r]];
-		for (; n.length > 0;) {
-			let e = i[i.length - 1], t = [];
-			for (let r of e) {
-				let e = r.getAdjacentNodes();
-				for (let r of e) n.includes(r) && (O(n, r), t.push(r));
+		let t = this.gapSize === void 0 ? e.canvas?.gridConfig ? Z(e.canvas?.gridConfig) * 2 : 0 : this.gapSize, n = this.gapSize === void 0 ? e.canvas?.gridConfig ? Q(e.canvas?.gridConfig) * 2 : 0 : this.gapSize, r = e.nodes.filter((e) => !e.parent), i = r[0];
+		k(r, i);
+		let a = [[i]];
+		for (; r.length > 0;) {
+			let e = a[a.length - 1], t = [];
+			for (let n of e) {
+				let e = n.getAdjacentNodes();
+				for (let n of e) r.includes(n) && (k(r, n), t.push(n));
 			}
-			t.length > 0 ? i.push(t) : (i.push(n), n = []);
+			t.length > 0 ? a.push(t) : (a.push(r), r = []);
 		}
-		let a = 0;
-		for (let e of i) {
-			let n = 0;
-			for (let r of e) r.move([a, n]), n += t + r.height;
-			let r = Math.max(...e.map((e) => e.width));
-			a += t + r;
+		let o = 0;
+		for (let e of a) {
+			let r = 0;
+			for (let t of e) t.move([o, r]), r += n + t.height;
+			let i = Math.max(...e.map((e) => e.width));
+			o += t + i;
 		}
 		for (let t of e.connections) t.tighten();
 		return e;
 	}
-}, dn = class {
+}, gn = class {
 	constructor(e) {
 		this.gapSize = e;
 	}
 	apply(e) {
 		if (e.nodes.length === 0) return e;
-		new un(this.gapSize).apply(e);
-		let t = this.gapSize === void 0 ? (e.canvas?.gridSize || 0) * 2 : this.gapSize, n = .1, r = .5, i = .002, a = 100;
-		for (; a > 1;) {
-			a *= .99;
-			let o = [0, 0];
-			if (i > 0) {
-				for (let t of e.nodes) o[0] = o[0] + t.coords[0] + t.width / 2, o[1] = o[1] + t.coords[1] + t.width / 2;
-				o[0] /= e.nodes.length, o[1] /= e.nodes.length;
-			}
-			for (let s of e.nodes) {
-				let c = s.getAdjacentNodes();
+		new hn(this.gapSize).apply(e);
+		let t = this.gapSize === void 0 ? e.canvas?.gridConfig ? Z(e.canvas?.gridConfig) * 2 : 0 : this.gapSize, n = this.gapSize === void 0 ? e.canvas?.gridConfig ? Q(e.canvas?.gridConfig) * 2 : 0 : this.gapSize, r = Math.max(t, n), i = .1, a = .5, o = .002, s = 100;
+		for (; s > 1;) {
+			s *= .99;
+			let t = [0, 0];
+			for (let n of e.nodes) t[0] = t[0] + n.coords[0] + n.width / 2, t[1] = t[1] + n.coords[1] + n.width / 2;
+			t[0] /= e.nodes.length, t[1] /= e.nodes.length;
+			for (let n of e.nodes) {
+				let c = n.getAdjacentNodes();
 				for (let l of e.nodes) {
-					let e = [s.coords[0] + s.width / 2, s.coords[1] + s.height / 2], u = [l.coords[0] + l.width / 2, l.coords[1] + l.height / 2], d = x(s.coords, l.coords), f = [l.coords[0], l.coords[1]];
-					if (c.includes(l) && d > 0 && (d > t + (Math.max(s.width, s.height) + Math.max(l.width, l.height)) / 2 ? (f[0] -= (u[0] - e[0]) * n, f[1] -= (u[1] - e[1]) * n) : (f[0] += (u[0] - e[0]) * r, f[1] += (u[1] - e[1]) * r)), d > 0) {
+					let e = [n.coords[0] + n.width / 2, n.coords[1] + n.height / 2], u = [l.coords[0] + l.width / 2, l.coords[1] + l.height / 2], d = x(n.coords, l.coords), f = [l.coords[0], l.coords[1]];
+					if (c.includes(l) && d > 0 && (d > r + (Math.max(n.width, n.height) + Math.max(l.width, l.height)) / 2 ? (f[0] -= (u[0] - e[0]) * i, f[1] -= (u[1] - e[1]) * i) : (f[0] += (u[0] - e[0]) * a, f[1] += (u[1] - e[1]) * a)), d > 0) {
 						let t = 2e5 / (d * d);
 						f[0] += t * (u[0] - e[0]) / d, f[1] += t * (u[1] - e[1]) / d;
 					} else f[0] += 1 * (Math.random() * 2 - 1), f[1] += 1 * (Math.random() * 2 - 1);
-					i > 0 && (f[0] -= (u[0] - o[0]) * i, f[1] -= (u[1] - o[1]) * i), f[0] - l.coords[0] > a ? f[0] = l.coords[0] + a : f[0] - l.coords[0] < -a && (f[0] = l.coords[0] - a), f[1] - l.coords[1] > a ? f[1] = l.coords[1] + a : f[1] - l.coords[1] < -a && (f[1] = l.coords[1] - a), l.move(f);
+					f[0] -= (u[0] - t[0]) * o, f[1] -= (u[1] - t[1]) * o, f[0] - l.coords[0] > s ? f[0] = l.coords[0] + s : f[0] - l.coords[0] < -s && (f[0] = l.coords[0] - s), f[1] - l.coords[1] > s ? f[1] = l.coords[1] + s : f[1] - l.coords[1] < -s && (f[1] = l.coords[1] - s), l.move(f);
 				}
 			}
 		}
-		if (e.canvas && e.canvas.snapToGrid) for (let t of e.nodes) {
+		if (e.canvas && e.canvas.gridConfig.snap) for (let t of e.nodes) {
 			let n = e.canvas.getClosestGridPoint([t.coords[0] - t.type.snapToGridOffset[0], t.coords[1] - t.type.snapToGridOffset[1]]);
 			n[0] += t.type.snapToGridOffset[0], n[1] += t.type.snapToGridOffset[1], t.move(n);
 		}
 		for (let t of e.connections) t.tighten();
 		return e;
 	}
-}, fn = class {
+}, _n = class {
 	constructor(e) {
 		this.gapSize = e;
 	}
 	apply(e) {
 		if (e.nodes.length === 0) return e;
-		let t = this.gapSize === void 0 ? (e.canvas?.gridSize || 0) * 2 : this.gapSize, n = e.nodes.filter((e) => !e.parent);
+		let t = this.gapSize === void 0 ? e.canvas?.gridConfig ? Z(e.canvas?.gridConfig) * 2 : 0 : this.gapSize, n = e.nodes.filter((e) => !e.parent);
 		n.sort((e, t) => t.type.priority - e.type.priority);
 		let r = 0;
 		for (let e of n) e.move([r, 0]), r += e.width + t;
 		return e;
 	}
-}, pn = class {
+}, vn = class {
 	constructor(e) {
 		this.gapSize = e;
 	}
 	apply(e) {
 		if (e.nodes.length === 0) return e;
 		let t = Math.max(...e.nodes.map((e) => e.getPriority()));
-		if (t === Math.min(...e.nodes.map((e) => e.getPriority()))) return new un(this.gapSize).apply(e), e;
-		let n = this.gapSize === void 0 ? (e.canvas?.gridSize || 0) * 2 : this.gapSize, r = e.nodes.filter((e) => !e.parent), i = [], a = e.nodes.filter((e) => !e.parent).filter((e) => e.getPriority() >= t), o = [];
-		if (a.length > 1) {
-			let e = a[0];
-			a.splice(0, 1), o.push(e);
+		if (t === Math.min(...e.nodes.map((e) => e.getPriority()))) return new hn(this.gapSize).apply(e), e;
+		let n = this.gapSize === void 0 ? e.canvas?.gridConfig ? Z(e.canvas?.gridConfig) * 2 : 0 : this.gapSize, r = this.gapSize === void 0 ? e.canvas?.gridConfig ? Q(e.canvas?.gridConfig) * 2 : 0 : this.gapSize, i = e.nodes.filter((e) => !e.parent), a = [], o = e.nodes.filter((e) => !e.parent).filter((e) => e.getPriority() >= t), s = [];
+		if (o.length > 1) {
+			let e = o[0];
+			o.splice(0, 1), s.push(e);
 			let t = [e], n = [e];
 			for (; t.length > 0;) {
 				let e = t[0];
-				t.splice(0, 1), a.includes(e) && (o.push(e), O(a, e));
+				t.splice(0, 1), o.includes(e) && (s.push(e), k(o, e));
 				let r = e.getAdjacentNodes();
 				for (let e of r) n.includes(e) || (t.push(e), n.push(e));
 			}
-			for (let e of a) o.push(e);
-		} else o.push(a[0]);
-		for (let e of o) O(r, e), i.push([e]);
-		for (i.push([]), r.sort((e, t) => t.type.priority - e.type.priority); r.length > 0;) {
-			let e = r[0];
-			r.splice(0, 1);
-			let t = [e], n = [e], a = !1;
+			for (let e of o) s.push(e);
+		} else s.push(o[0]);
+		for (let e of s) k(i, e), a.push([e]);
+		for (a.push([]), i.sort((e, t) => t.type.priority - e.type.priority); i.length > 0;) {
+			let e = i[0];
+			i.splice(0, 1);
+			let t = [e], n = [e], r = !1;
 			for (; t.length > 0;) {
-				let r = t[0];
+				let i = t[0];
 				t.splice(0, 1);
-				let s = o.indexOf(r);
-				if (s >= 0) {
-					i[s].push(e), a = !0;
+				let o = s.indexOf(i);
+				if (o >= 0) {
+					a[o].push(e), r = !0;
 					break;
 				} else {
-					let e = r.getAdjacentNodes();
+					let e = i.getAdjacentNodes();
 					for (let r of e) n.includes(r) || (t.push(r), n.push(r));
 				}
 			}
-			a || i[i.length - 1].push(e);
+			r || a[a.length - 1].push(e);
 		}
-		let s = 0;
-		for (let e = 0; e < i.length; ++e) {
+		let c = 0;
+		for (let e = 0; e < a.length; ++e) {
 			let t = 0;
-			for (let r = 0; r < i[e].length; ++r) {
-				let a = i[e][r];
-				a.move([s, t]), t += n + a.height;
+			for (let n = 0; n < a[e].length; ++n) {
+				let i = a[e][n];
+				i.move([c, t]), t += r + i.height;
 			}
-			let r = Math.max(...i[e].map((e) => e.width));
-			s += n + r;
+			let i = Math.max(...a[e].map((e) => e.width));
+			c += n + i;
 		}
 		for (let t of e.connections) t.tighten();
 		return e;
 	}
-}, mn = class {
+}, yn = class {
 	constructor(e) {
 		this.gapSize = e;
 	}
 	apply(e) {
 		if (e.nodes.length === 0) return e;
-		if (Math.max(...e.nodes.map((e) => e.getPriority())) === Math.min(...e.nodes.map((e) => e.getPriority()))) return new un(this.gapSize).apply(e), e;
-		let t = this.gapSize === void 0 ? (e.canvas?.gridSize || 0) * 2 : this.gapSize, n = e.nodes.filter((e) => !e.parent).sort((e, t) => t.getPriority() - e.getPriority()), r = [];
-		for (; n.length > 0;) {
-			let e = n[0];
-			n.splice(0, 1);
-			let t = new _n(void 0, e);
-			hn(t, n), r.push(t);
+		if (Math.max(...e.nodes.map((e) => e.getPriority())) === Math.min(...e.nodes.map((e) => e.getPriority()))) return new hn(this.gapSize).apply(e), e;
+		let t = this.gapSize === void 0 ? e.canvas?.gridConfig ? Z(e.canvas?.gridConfig) * 2 : 0 : this.gapSize, n = this.gapSize === void 0 ? e.canvas?.gridConfig ? Q(e.canvas?.gridConfig) * 2 : 0 : this.gapSize, r = e.nodes.filter((e) => !e.parent).sort((e, t) => t.getPriority() - e.getPriority()), i = [];
+		for (; r.length > 0;) {
+			let e = r[0];
+			r.splice(0, 1);
+			let t = new Sn(void 0, e);
+			bn(t, r), i.push(t);
 		}
-		let i = [];
-		for (let e of r) i.push([e]), gn(e, i, i.length);
-		let a = Math.max(...e.nodes.map((e) => e.height)), o = 0;
-		for (let e = 0; e < i.length; ++e) {
-			let n = 0;
-			for (let r = 0; r < i[e].length; ++r) {
-				let s = i[e][r];
-				s.node.move([o, n]), n += (t + a) * s.countBranchHeight();
+		let a = [];
+		for (let e of i) a.push([e]), xn(e, a, a.length);
+		let o = Math.max(...e.nodes.map((e) => e.height)), s = 0;
+		for (let e = 0; e < a.length; ++e) {
+			let r = 0;
+			for (let t = 0; t < a[e].length; ++t) {
+				let i = a[e][t];
+				i.node.move([s, r]), r += (n + o) * i.countBranchHeight();
 			}
-			let r = Math.max(...i[e].map((e) => e.node.width));
-			o += t + r;
+			let i = Math.max(...a[e].map((e) => e.node.width));
+			s += t + i;
 		}
 		for (let t of e.connections) t.tighten();
 		return e;
 	}
-}, hn = (e, t) => {
+}, bn = (e, t) => {
 	for (let n of e.node.getAdjacentNodes().sort((e, t) => t.getPriority() - e.getPriority())) {
 		let r = t.indexOf(n);
-		r >= 0 && (t.splice(r, 1), hn(e.addBranch(n), t));
+		r >= 0 && (t.splice(r, 1), bn(e.addBranch(n), t));
 	}
-}, gn = (e, t, n) => {
+}, xn = (e, t, n) => {
 	if (e.branches.length > 0) {
 		for (; n >= t.length;) t.push([]);
-		for (let r of e.branches) t[n].push(r), gn(r, t, n + 1);
+		for (let r of e.branches) t[n].push(r), xn(r, t, n + 1);
 	}
-}, _n = class e {
+}, Sn = class e {
 	constructor(e, t) {
 		this.parent = e, this.branches = [], this.depth = 0, this.node = t;
 	}
@@ -3928,28 +4067,28 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			return e;
 		}
 	}
-}, vn = class {
+}, Cn = class {
 	constructor(e) {
 		this.gapSize = e;
 	}
 	apply(e) {
 		if (e.nodes.length === 0) return e;
-		let t = this.gapSize === void 0 ? (e.canvas?.gridSize || 0) * 2 : this.gapSize, n = e.nodes.filter((e) => !e.parent);
+		let t = this.gapSize === void 0 ? e.canvas?.gridConfig ? Q(e.canvas?.gridConfig) * 2 : 0 : this.gapSize, n = e.nodes.filter((e) => !e.parent);
 		n.sort((e, t) => t.type.priority - e.type.priority);
 		let r = 0;
 		for (let e of n) e.move([0, r]), r += e.height + t;
 		return e;
 	}
-}, yn = {
-	adjacency: new sn(),
-	breadth: new un(),
-	"breadth-adjacency": new ln(),
-	force: new dn(),
-	horizontal: new fn(),
-	priority: new pn(),
-	tree: new mn(),
-	vertical: new vn()
-}, bn = a({}), xn = a({}), Sn = class {
+}, wn = {
+	adjacency: new fn(),
+	breadth: new hn(),
+	"breadth-adjacency": new mn(),
+	force: new gn(),
+	horizontal: new _n(),
+	priority: new vn(),
+	tree: new yn(),
+	vertical: new Cn()
+}, Tn = a({}), En = a({}), Dn = class {
 	constructor(e, t) {
 		this.onTitleChange = e, this.onValueSetChange = t;
 	}
@@ -3966,35 +4105,38 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		this._valueSet = e, this.onValueSetChange(e);
 	}
 	highlightProperty(...e) {}
-}, Cn = ({ direction: t, collapsableSelector: n, collapsableAdditionalSelector: r, collapsed: i, disabled: a, rule: o, collapsedValue: s, visibleValue: c, onCollapse: u }) => {
-	let [f, m] = l(i);
-	return /* @__PURE__ */ d("daga-collapse-button", { children: /* @__PURE__ */ d("button", {
+}, On = ({ direction: t, collapsableSelector: n, collapsableAdditionalSelector: r, collapsed: i, disabled: a, rule: o, collapsedValue: c, visibleValue: u, onCollapse: f }) => {
+	let [m, h] = l(i), g = (t) => {
+		let i;
+		if (typeof n == "string") i = e.select(n), r && (i = i.select(r));
+		else {
+			let t = n;
+			if (!t) throw Error("collapsableSelector is not a valid ref");
+			i = e.select(t.current), r && (i = i.select(r));
+		}
+		i.style(o, t ? c : u);
+	};
+	return s(() => {
+		g(m);
+	}, [g, m]), /* @__PURE__ */ d("daga-collapse-button", { children: /* @__PURE__ */ d("button", {
 		className: `daga-collapse-button daga-${t}`,
 		onClick: () => {
 			if (!a) {
-				let t = !f;
-				m(t), u?.(t);
-				let i;
-				if (typeof n == "string") i = e.select(n), r && (i = i.select(r));
-				else {
-					let t = n;
-					if (!t) throw Error("collapsableSelector is not a valid ref");
-					i = e.select(t.current), r && (i = i.select(r));
-				}
-				i.style(o, t ? s : c);
+				let e = !m;
+				h(e), f?.(e), g(e);
 			}
 		},
 		children: /* @__PURE__ */ d("div", { className: (() => {
 			switch (t) {
-				case p.Right: return a ? "daga-horizontal-none" : f ? "daga-horizontal-right" : "daga-horizontal-left";
-				case p.Bottom: return a ? "daga-vertical-none" : f ? "daga-vertical-down" : "daga-vertical-up";
-				case p.Left: return a ? "daga-horizontal-none" : f ? "daga-horizontal-left" : "daga-horizontal-right";
-				case p.Top: return a ? "daga-vertical-none" : f ? "daga-vertical-up" : "daga-vertical-down";
+				case p.Right: return a ? "daga-horizontal-none" : m ? "daga-horizontal-right" : "daga-horizontal-left";
+				case p.Bottom: return a ? "daga-vertical-none" : m ? "daga-vertical-down" : "daga-vertical-up";
+				case p.Left: return a ? "daga-horizontal-none" : m ? "daga-horizontal-left" : "daga-horizontal-right";
+				case p.Top: return a ? "daga-vertical-none" : m ? "daga-vertical-up" : "daga-vertical-down";
 			}
 		})() })
 	}) });
-}, wn = () => {
-	let e = o(xn), t = c(null), [n, a] = l([]);
+}, kn = () => {
+	let e = o(En), t = c(null), [n, a] = l([]);
 	i(e.validatorChange$, e.diagramChange$).pipe(r(() => s())).subscribe();
 	let s = () => {
 		a([]);
@@ -4021,7 +4163,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 				className: "daga-errors-summary daga-with-errors daga-prevent-user-select",
 				children: [/* @__PURE__ */ f("span", { children: [n.length, " errors found"] }), /* @__PURE__ */ d("div", {
 					className: "daga-collapse-button-container",
-					children: /* @__PURE__ */ d(Cn, {
+					children: /* @__PURE__ */ d(On, {
 						collapsableSelector: t,
 						collapsableAdditionalSelector: ".daga-error-panel",
 						direction: p.Top,
@@ -4042,7 +4184,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			})
 		]
 	}) });
-}, Tn = 200, En = (e) => (e || "").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""), Dn = ({ disabled: e, options: t, value: n, onChange: r }) => {
+}, An = 200, jn = (e) => (e || "").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""), Mn = ({ disabled: e, options: t, value: n, onChange: r }) => {
 	let i = c(null), [a, o] = l(""), [u, p] = l(void 0), [m, h] = l([]), [g, _] = l([]), [v, y] = l([]), [b, x] = l([]), [ee, S] = l(!1);
 	s(() => {
 		o(t.find((e) => Ae(e.key, n))?.label || "");
@@ -4050,31 +4192,31 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	let w = (n) => {
 		if (!e) switch (n.key) {
 			case C.PageDown:
-				u === void 0 ? (D(0), ne(0)) : (D(u + 5), ne(u)), n.preventDefault();
+				u === void 0 ? (D(0), O(0)) : (D(u + 5), O(u)), n.preventDefault();
 				break;
 			case C.ArrowDown:
-				u === void 0 ? (D(0), ne(0)) : (D(u + 1), ne(u)), n.preventDefault();
+				u === void 0 ? (D(0), O(0)) : (D(u + 1), O(u)), n.preventDefault();
 				break;
 			case C.PageUp:
-				u === void 0 ? (D(t.length - 1), ne(t.length - 1)) : (D(u - 5), ne(u)), n.preventDefault();
+				u === void 0 ? (D(t.length - 1), O(t.length - 1)) : (D(u - 5), O(u)), n.preventDefault();
 				break;
 			case C.ArrowUp:
-				u === void 0 ? (D(t.length - 1), ne(t.length - 1)) : (D(u - 1), ne(u)), n.preventDefault();
+				u === void 0 ? (D(t.length - 1), O(t.length - 1)) : (D(u - 1), O(u)), n.preventDefault();
 				break;
 			case C.Escape:
 				E(), n.preventDefault();
 				break;
 			case C.Enter:
-				ie(t[u || 0]), n.preventDefault();
+				re(t[u || 0]), n.preventDefault();
 				break;
 			default: T();
 		}
 	}, T = () => {
 		if (!e) {
-			let e = En(a.trim());
+			let e = jn(a.trim());
 			h([]), _([]), y([]), x([]);
 			for (let n of t) {
-				let t = En(n.label).indexOf(e);
+				let t = jn(n.label).indexOf(e);
 				if (t >= 0) {
 					let r = n.label.substring(0, t), i = n.label.substring(t, t + e.length), a = n.label.substring(t + e.length);
 					h((e) => [...e, n]), _((e) => [...e, r]), y((e) => [...e, i]), x((e) => [...e, a]);
@@ -4096,13 +4238,13 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}, te = () => {
 		setTimeout(() => {
 			E();
-		}, Tn);
-	}, ne = (e) => {
+		}, An);
+	}, O = (e) => {
 		let t = i.current?.querySelectorAll("li")[e];
 		t && t.scrollIntoView({ block: "center" });
-	}, re = () => {
+	}, ne = () => {
 		e || (o(""), S(!1), p(void 0));
-	}, ie = (t) => {
+	}, re = (t) => {
 		e || (o(t.label), S(!1), p(void 0), r(t.key));
 	};
 	return /* @__PURE__ */ f("div", {
@@ -4119,7 +4261,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 				onChange: (e) => o(e.target.value)
 			}), a !== "" && /* @__PURE__ */ d("button", {
 				className: "daga-clear",
-				onClick: re
+				onClick: ne
 			})]
 		}), /* @__PURE__ */ d("div", {
 			className: "daga-autocomplete-options",
@@ -4131,7 +4273,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 				}), m.map((e, t) => /* @__PURE__ */ f("li", {
 					className: `daga-autocomplete-option ${t === u ? "daga-focused" : ""}`,
 					onMouseMove: () => D(t),
-					onClick: () => ie(e),
+					onClick: () => re(e),
 					children: [
 						/* @__PURE__ */ d("span", { children: g[t] }),
 						/* @__PURE__ */ d("span", {
@@ -4144,7 +4286,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			})
 		})]
 	});
-}, On = (e, t) => e.find((e) => e.key === t)?.label || `${t}`, kn = ({ disabled: e, allowRepeats: t, options: n, value: r, onChange: i }) => {
+}, Nn = (e, t) => e.find((e) => e.key === t)?.label || `${t}`, Pn = ({ disabled: e, allowRepeats: t, options: n, value: r, onChange: i }) => {
 	let [a, o] = l(), [c, u] = l([]), [p, m] = l([]), h = (e) => {
 		for (let t of r) if (t === e) return !0;
 		return !1;
@@ -4157,7 +4299,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	};
 	s(() => {
 		let e = r.length === 0;
-		u(r.map((e) => On(n, e))), e && i(r), g();
+		u(r.map((e) => Nn(n, e))), e && i(r), g();
 	}, [r, n]);
 	let _ = (e) => {
 		r.length > e && (r.splice(e, 1), u(c.filter((t, n) => n !== e)), i(r), g());
@@ -4180,7 +4322,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		className: "daga-value-item-input",
 		children: [/* @__PURE__ */ d("div", {
 			className: "daga-input daga-relatively-positioned",
-			children: /* @__PURE__ */ d(Dn, {
+			children: /* @__PURE__ */ d(Mn, {
 				disabled: e,
 				options: t ? n || [] : p || [],
 				value: a,
@@ -4192,7 +4334,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			children: /* @__PURE__ */ d("div", { className: "daga-icon daga-add-icon" })
 		})]
 	})] });
-}, An = ({ disabled: e, allowRepeats: t, value: n, onChange: r }) => {
+}, Fn = ({ disabled: e, allowRepeats: t, value: n, onChange: r }) => {
 	let [i, a] = l(""), o = (e) => {
 		for (let t of e || []) if (t === e) return !0;
 		return !1;
@@ -4240,7 +4382,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			children: /* @__PURE__ */ d("div", { className: "daga-icon daga-add-icon" })
 		})]
 	})] });
-}, jn = ({ disabled: e, value: t, onChange: n }) => {
+}, In = ({ disabled: e, value: t, onChange: n }) => {
 	let [r, i] = l(""), [a, o] = l(""), [s, c] = l({}), u = (e) => {
 		let r = {};
 		Object.keys(t).forEach((n) => {
@@ -4348,8 +4490,8 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			})
 		]
 	})] });
-}, Mn = ({ valueSet: e, onValueChange: t, depth: n }) => {
-	let r = o(xn).canUserPerformAction(q.UpdateValues) && e?.rootElement?.removed !== !0, i = (e) => "daga-property-name-" + e.replace(/\s/g, ""), a = (e) => {
+}, Ln = ({ valueSet: e, onValueChange: t, depth: n }) => {
+	let r = o(En).canUserPerformAction(K.UpdateValues) && e?.rootElement?.removed !== !0, i = (e) => "daga-property-name-" + e.replace(/\s/g, ""), a = (e) => {
 		if (typeof e == "string") return e;
 		if (e == null || isNaN(e.valueOf())) return "";
 		let t = new Date(e), n = t.getTimezoneOffset();
@@ -4436,34 +4578,34 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			}),
 			o.type === P.Option && /* @__PURE__ */ d("div", {
 				className: "daga-relatively-positioned",
-				children: /* @__PURE__ */ d(Dn, {
+				children: /* @__PURE__ */ d(Mn, {
 					disabled: o.editable === !1 || !r,
 					options: o.options || [],
 					value: e?.getValue(o.name),
 					onChange: (n) => t(e, o, n)
 				})
 			}),
-			(o.type === P.OptionList || o.type === P.OptionSet) && /* @__PURE__ */ d(kn, {
+			(o.type === P.OptionList || o.type === P.OptionSet) && /* @__PURE__ */ d(Pn, {
 				disabled: o.editable === !1 || !r,
 				allowRepeats: o.type === P.OptionList,
 				options: o.options || [],
 				value: e?.getValue(o.name),
 				onChange: (n) => t(e, o, n)
 			}),
-			(o.type === P.TextList || o.type === P.TextSet) && /* @__PURE__ */ d(An, {
+			(o.type === P.TextList || o.type === P.TextSet) && /* @__PURE__ */ d(Fn, {
 				disabled: o.editable === !1 || !r,
 				allowRepeats: o.type === P.TextList,
 				value: e?.getValue(o.name),
 				onChange: (n) => t(e, o, n)
 			}),
-			o.type === P.TextMap && /* @__PURE__ */ d(jn, {
+			o.type === P.TextMap && /* @__PURE__ */ d(In, {
 				disabled: o.editable === !1 || !r,
 				value: e?.getValue(o.name),
 				onChange: (n) => t(e, o, n)
 			}),
 			o.type === P.Object && /* @__PURE__ */ d("div", {
 				className: "daga-left-bar",
-				children: /* @__PURE__ */ d(Mn, {
+				children: /* @__PURE__ */ d(Ln, {
 					valueSet: e.getSubValueSet(o.name),
 					onValueChange: t,
 					depth: n + 1
@@ -4471,22 +4613,22 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			})
 		]
 	}, o.name)) });
-}, Nn = ({ valueSet: t, depth: n }) => {
-	let r = o(xn), i = c(null), a = (e) => "daga-property-name-" + e.replace(/\s/g, ""), s = () => {
+}, Rn = ({ valueSet: t, depth: n }) => {
+	let r = o(En), i = c(null), a = (e) => "daga-property-name-" + e.replace(/\s/g, ""), s = () => {
 		for (let o of t?.displayedProperties || []) {
 			let s = 0, c = 0, u = 0, d = e.select(i.current).select(`.daga-property.${a(o.name)}.daga-depth-${n}`);
 			d.select("button.daga-move-button").call(e.drag().on(w.Start, (e) => {
-				Z(A.Grabbing);
+				X(A.Grabbing);
 				let t = r.getPointerLocationRelativeToScreen(e);
 				if (t.length < 2 || isNaN(t[0]) || isNaN(t[1])) return;
 				let n = d.node()?.getBoundingClientRect();
 				s = n?.width || 0, c = n?.height || 0, d.style("position", "fixed").style("left", `${t[0] - s / 2}px`).style("top", `${t[1] - c / 2}px`).style("width", `${s}px`).style("height", `${c}px`).style("z-index", 1);
 			}).on(w.Drag, (t) => {
-				Z(A.Grabbing);
+				X(A.Grabbing);
 				let a = r.getPointerLocationRelativeToScreen(t);
 				a.length < 2 || isNaN(a[0]) || isNaN(a[1]) || (d.style("position", "fixed").style("left", `${a[0] - s / 2}px`).style("top", `${a[1] - c / 2}px`).style("width", `${s}px`).style("height", `${c}px`).style("z-index", 1), e.select(i.current).select(`.daga-dropbar.daga-index-${u}.daga-depth-${n}`).style("visibility", "hidden").style("height", 0), u = l(a), e.select(i.current).select(`.daga-dropbar.daga-index-${u}.daga-depth-${n}`).style("visibility", "visible").style("height", "0.25rem"));
 			}).on(w.End, (a) => {
-				Z(A.Auto), d.style("position", "relative").style("left", 0).style("top", 0).style("z-index", 0).style("width", "unset").style("height", "unset"), e.select(i.current).select(`.daga-dropbar.daga-index-${u}.daga-depth-${n}`).style("visibility", "hidden").style("height", 0);
+				X(A.Auto), d.style("position", "relative").style("left", 0).style("top", 0).style("z-index", 0).style("width", "unset").style("height", "unset"), e.select(i.current).select(`.daga-dropbar.daga-index-${u}.daga-depth-${n}`).style("visibility", "hidden").style("height", 0);
 				let s = r.getPointerLocationRelativeToScreen(a);
 				s.length < 2 || isNaN(s[0]) || isNaN(s[1]) || (u = l(s), t?.displayedProperties?.splice(t.displayedProperties.indexOf(o), 1), t?.displayedProperties?.splice(u, 0, o));
 			}));
@@ -4530,9 +4672,9 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 					}),
 					e.type !== P.Object && /* @__PURE__ */ d("div", {
 						className: "daga-property-value",
-						children: Pn(t?.getValue(e.name))
+						children: zn(t?.getValue(e.name))
 					}),
-					e.type === P.Object && /* @__PURE__ */ d(Nn, {
+					e.type === P.Object && /* @__PURE__ */ d(Rn, {
 						valueSet: t?.getSubValueSet(e.name),
 						depth: n + 1
 					})
@@ -4540,61 +4682,61 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			}), /* @__PURE__ */ d("div", { className: `daga-dropbar daga-index-${r + 1} daga-depth-${n}` })]
 		}, e.name))]
 	});
-}, Pn = (e) => Array.isArray(e) ? e.join(", ") : Me(e) ? Object.entries(e).map((e) => e.map((e) => JSON.stringify(e)).join(": ")).join(", ") : e instanceof Date ? e.toLocaleString() : e == null ? "" : "" + e, Fn = ({ location: t, direction: n, width: r, height: i, title: a, valueSet: o, onValueChange: u }) => {
-	let m = c(null), [h, g] = l(!1), [_, v] = l(!1), y = () => e.select(m.current);
+}, zn = (e) => Array.isArray(e) ? e.join(", ") : Me(e) ? Object.entries(e).map((e) => e.map((e) => JSON.stringify(e)).join(": ")).join(", ") : e instanceof Date ? e.toLocaleString() : e == null ? "" : "" + e, Bn = ({ collapsed: t, location: n, direction: r, width: i, length: a, title: o, valueSet: u, onValueChange: m }) => {
+	let h = c(null), [g, _] = l(t), [v, y] = l(!1), b = () => e.select(h.current);
 	return s(() => {
-		if (m.current) switch (n) {
+		if (h.current) switch (r) {
 			case p.Bottom:
 			case p.Top:
-				y().style("width", r), i && y().select(".daga-panel-content").style("height", i);
+				b().style("width", i).select(".daga-panel-content").style("height", a);
 				break;
 			case p.Left:
 			case p.Right:
-				y().style("height", r), i && y().select(".daga-panel-content").style("width", i);
+				b().style("height", i).select(".daga-panel-content").style("width", a);
 				break;
 		}
 	}, [
-		r,
 		i,
-		n
+		a,
+		r
 	]), /* @__PURE__ */ d("daga-property-editor", { children: /* @__PURE__ */ f("div", {
-		ref: m,
-		className: `daga-panel daga-bottom daga-${t} daga-${n}`,
-		children: [/* @__PURE__ */ d(Cn, {
-			disabled: !o || !o.propertySet || !o.propertySet.hasProperties(),
-			collapsed: h,
-			direction: n,
-			collapsableSelector: m,
+		ref: h,
+		className: `daga-panel daga-bottom daga-${n} daga-${r}`,
+		children: [/* @__PURE__ */ d(On, {
+			disabled: !u || !u.propertySet || !u.propertySet.hasProperties(),
+			collapsed: g,
+			direction: r,
+			collapsableSelector: h,
 			collapsableAdditionalSelector: ".daga-panel-content",
 			rule: "display",
 			collapsedValue: "none",
 			visibleValue: "block",
-			onCollapse: g
+			onCollapse: _
 		}), /* @__PURE__ */ d("div", {
 			className: "daga-panel-content",
-			children: o && o.propertySet && o.propertySet.hasProperties() && !h && /* @__PURE__ */ f("div", { children: [
-				a && /* @__PURE__ */ f("p", {
+			children: u && u.propertySet && u.propertySet.hasProperties() && !g && /* @__PURE__ */ f("div", { children: [
+				o && /* @__PURE__ */ f("p", {
 					className: "daga-title",
-					children: [a, /* @__PURE__ */ d("button", {
+					children: [o, /* @__PURE__ */ d("button", {
 						className: "daga-property-button",
-						onClick: () => v(!_),
-						children: /* @__PURE__ */ d("div", { className: `daga-icon daga-settings-icon ${_ ? "daga-unrotate" : "daga-rotate"}` })
+						onClick: () => y(!v),
+						children: /* @__PURE__ */ d("div", { className: `daga-icon daga-settings-icon ${v ? "daga-unrotate" : "daga-rotate"}` })
 					})]
 				}),
-				!_ && /* @__PURE__ */ d(Mn, {
-					valueSet: o,
-					onValueChange: u,
+				!v && /* @__PURE__ */ d(Ln, {
+					valueSet: u,
+					onValueChange: m,
 					depth: 0
 				}),
-				_ && /* @__PURE__ */ d(Nn, {
-					valueSet: o,
+				v && /* @__PURE__ */ d(Rn, {
+					valueSet: u,
 					depth: 0
 				})
 			] })
 		})]
 	}) });
-}, In = 6, Ln = (t) => {
-	let n = o(xn), [r, i] = l(t.currentPalette || t.palettes[0]), [a, u] = l(0), [m, h] = l(void 0), g = c(null), _ = c(!1), v = (e) => {
+}, Vn = 6, Hn = (t) => {
+	let n = o(En), [r, i] = l(t.currentPalette || t.palettes[0]), [a, u] = l(0), [m, h] = l(void 0), g = c(null), _ = c(!1), v = (e) => {
 		if (i(e), y().selectAll("*").remove(), u(n.getPriorityThreshold() || 0), e.categories && b(e.categories), e.templates) for (let t of e.templates) x(t);
 	}, y = () => e.select(g.current).select(".daga-palette-view"), b = (e) => {
 		let t = y().append("select").style("width", "100%").style("height", "2rem").style("padding", "0.5rem").style("border-radius", "0.25rem").style("background-color", "#f7f8fc").style("border", "1px solid #e6e6e6");
@@ -4618,21 +4760,21 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}, ee = (t, r, i) => {
 		if (a !== void 0 && t.priority < a) return;
 		let o = t.defaultLook.lookType === "shaped-look" ? t.defaultLook.borderThickness || 1 : 0, s = t.defaultHeight + o, c = t.defaultWidth + o, l = r.height || s, u = r.width || c, d = y().append("div").attr("class", `daga-template-container ${i === void 0 ? "" : i}`).style("width", `${u}px`).style("height", `${l}px`).call(e.drag().on(w.Drag, (e) => {
-			if (n.canUserPerformAction(q.AddNode)) {
+			if (n.canUserPerformAction(K.AddNode)) {
 				let t = n.getPointerLocationRelativeToScreen(e);
 				if (t.length < 2 || isNaN(t[0]) || isNaN(t[1])) return;
 				d.style("position", "fixed").style("left", `${t[0] - u / 2}px`).style("top", `${t[1] - l / 2}px`).style("z-index", 1);
 			}
 		}).on(w.Start, (e) => {
-			if (n.canUserPerformAction(q.AddNode)) {
-				Z(A.Grabbing);
+			if (n.canUserPerformAction(K.AddNode)) {
+				X(A.Grabbing);
 				let r = n.getPointerLocationRelativeToScreen(e);
 				if (r.length < 2 || isNaN(r[0]) || isNaN(r[1])) return;
-				d.style("position", "fixed").style("left", `${r[0] - u / 2}px`).style("top", `${r[1] - l / 2}px`).style("z-index", 1), t.isUnique && n.model.nodes.find((e) => !e.removed && e.type.id === t.id) !== void 0 && Z(A.NotAllowed);
+				d.style("position", "fixed").style("left", `${r[0] - u / 2}px`).style("top", `${r[1] - l / 2}px`).style("z-index", 1), t.isUnique && n.model.nodes.find((e) => !e.removed && e.type.id === t.id) !== void 0 && X(A.NotAllowed);
 			}
 		}).on(w.End, (e) => {
-			if (n.canUserPerformAction(q.AddNode)) {
-				if (Z(A.Auto), d.style("position", "relative").style("left", 0).style("top", 0).style("z-index", "auto"), t.isUnique && n.model.nodes.find((e) => !e.removed && e.type.id === t.id) !== void 0) return;
+			if (n.canUserPerformAction(K.AddNode)) {
+				if (X(A.Auto), d.style("position", "relative").style("left", 0).style("top", 0).style("z-index", "auto"), t.isUnique && n.model.nodes.find((e) => !e.removed && e.type.id === t.id) !== void 0) return;
 				let i = n.getPointerLocationRelativeToScreen(e);
 				if (i.length < 2 || isNaN(i[0]) || isNaN(i[1])) return;
 				let a = document.elementFromPoint(i[0], i[1]);
@@ -4640,16 +4782,16 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 				let o = n.getPointerLocationRelativeToCanvas(e);
 				if (o.length < 2 || isNaN(o[0]) || isNaN(o[1])) return;
 				let s = [o[0] - t.defaultWidth / 2, o[1] - t.defaultHeight / 2];
-				n.snapToGrid && (s = n.getClosestGridPoint([s[0] - t.snapToGridOffset[0], s[1] - t.snapToGridOffset[1]]), s[0] += t.snapToGridOffset[0], s[1] += t.snapToGridOffset[1]);
+				n.gridConfig.snap && (s = n.getClosestGridPoint([s[0] - t.snapToGridOffset[0], s[1] - t.snapToGridOffset[1]]), s[0] += t.snapToGridOffset[0], s[1] += t.snapToGridOffset[1]);
 				let c = Ye(n.model.nodes.getAtCoordinates(o[0], o[1]).filter((e) => e.type.childrenTypes.includes(t.id))), l = c[c.length - 1];
 				if (!t.canBeParentless && l === void 0) return;
-				let u = l?.getLastAncestor(), f = new yt(n, t, s, l?.id, u?.id, u?.getGeometry(), void 0, r.label, r.values);
-				f.do(), n?.actionStack.add(f), Z();
+				let u = l?.getLastAncestor(), f = new Ct(n, t, s, l?.id, u?.id, u?.getGeometry(), void 0, r.label, r.values);
+				f.do(), n?.actionStack.add(f), X();
 			}
 		})).append("svg").attr("class", `palette-node ${t.id}`).attr("viewBox", `0 0 ${c} ${s}`).attr("preserveAspectRatio", "none").style("position", "relative").style("left", 0).style("top", 0).style("width", `${u}px`).style("height", `${l}px`), f = r.look || t.defaultLook;
 		switch (f.lookType) {
 			case "shaped-look":
-				d.append("path").attr("d", ae(f.shape || k.Rectangle, (f.borderThickness || 1) / 2, (f.borderThickness || 1) / 2, t.defaultWidth, t.defaultHeight)).attr("fill", f.fillColor || "#FFFFFF").attr("stroke", f.borderColor || "#000000").attr("stroke-width", `${f.borderThickness}px`);
+				d.append("path").attr("d", ae(f.shape || ie.Rectangle, (f.borderThickness || 1) / 2, (f.borderThickness || 1) / 2, t.defaultWidth, t.defaultHeight)).attr("fill", f.fillColor || "#FFFFFF").attr("stroke", f.borderColor || "#000000").attr("stroke-width", `${f.borderThickness}px`);
 				break;
 			case "image-look":
 				d.append("image").attr("x", 0).attr("y", 0).attr("width", t.defaultWidth).attr("height", t.defaultHeight).attr("href", f.backgroundImage).attr("preserveAspectRatio", "none");
@@ -4657,21 +4799,24 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			case "stretchable-image-look": d.append("image").attr("x", 0).attr("y", 0).attr("width", f.leftMargin).attr("height", f.topMargin).attr("href", f.backgroundImageTopLeft).attr("preserveAspectRatio", "none"), d.append("image").attr("x", f.leftMargin).attr("y", 0).attr("width", t.defaultWidth - f.rightMargin - f.leftMargin).attr("height", f.topMargin).attr("href", f.backgroundImageTop).attr("preserveAspectRatio", "none"), d.append("image").attr("x", t.defaultWidth - f.rightMargin).attr("y", 0).attr("width", f.rightMargin).attr("height", f.topMargin).attr("href", f.backgroundImageTopRight).attr("preserveAspectRatio", "none"), d.append("image").attr("x", 0).attr("y", f.topMargin).attr("width", f.leftMargin).attr("height", t.defaultHeight - f.bottomMargin - f.topMargin).attr("href", f.backgroundImageLeft).attr("preserveAspectRatio", "none"), d.append("image").attr("x", f.leftMargin).attr("y", f.topMargin).attr("width", t.defaultWidth - f.rightMargin - f.leftMargin).attr("height", t.defaultHeight - f.bottomMargin - f.topMargin).attr("href", f.backgroundImageCenter).attr("preserveAspectRatio", "none"), d.append("image").attr("x", t.defaultWidth - f.rightMargin).attr("y", f.topMargin).attr("width", f.rightMargin).attr("height", t.defaultHeight - f.bottomMargin - f.topMargin).attr("href", f.backgroundImageRight).attr("preserveAspectRatio", "none"), d.append("image").attr("x", 0).attr("y", t.defaultHeight - f.bottomMargin).attr("width", f.leftMargin).attr("height", f.bottomMargin).attr("href", f.backgroundImageBottomLeft).attr("preserveAspectRatio", "none"), d.append("image").attr("x", f.leftMargin).attr("y", t.defaultHeight - f.bottomMargin).attr("width", t.defaultWidth - f.rightMargin - f.leftMargin).attr("height", f.bottomMargin).attr("href", f.backgroundImageBottom).attr("preserveAspectRatio", "none"), d.append("image").attr("x", t.defaultWidth - f.rightMargin).attr("y", t.defaultHeight - f.bottomMargin).attr("width", f.rightMargin).attr("height", f.bottomMargin).attr("href", f.backgroundImageBottomRight).attr("preserveAspectRatio", "none");
 		}
 		if (r.look === void 0) {
-			if (t.decorators) for (let e of t.decorators) d.append("foreignObject").attr("width", `${e.width}px`).attr("height", `${e.height}px`).attr("transform", `translate(${e.coords[0]},${e.coords[1]})`).html(e.html);
+			if (t.decorators) for (let e of t.decorators) d.append("foreignObject").attr("width", `${e.width}px`).attr("height", `${e.height}px`).attr("transform", `translate(${e.coords[0]},${e.coords[1]})`).html(e.svg);
 			if (r.label) {
 				let e = {
 					...L,
 					...t.label,
 					...r.labelLook
 				};
-				d.append("text").attr("transform", `translate(${(z(e) + t.defaultWidth) / 2},${(V(e) + t.defaultHeight) / 2})`).attr("x", 0).attr("y", 0).attr("font-size", `${e.fontSize}px`).attr("text-anchor", "middle").attr("font-family", e.fontFamily).attr("font-weight", 400).attr("fill", e.color).attr("stroke", "none").style("font-kerning", "none").style("user-select", "none").text(r.label);
+				e.look = {
+					...L.look,
+					...e.look
+				}, d.append("text").attr("transform", `translate(${(z(e) + t.defaultWidth) / 2},${(V(e) + t.defaultHeight) / 2})`).attr("x", 0).attr("y", 0).attr("font-size", `${e.look.fontSize}px`).attr("text-anchor", "middle").attr("font-family", e.look.fontFamily || L.look.fontFamily).attr("font-weight", e.look.fontWeight || L.look.fontWeight).attr("fill", e.look.fontColor || L.look.fontColor).attr("stroke", "none").style("font-kerning", "none").style("user-select", "none").text(r.label);
 			}
 		}
 	}, C = (e, t, r) => {
 		let i = y().append("div").attr("class", `daga-template-container ${r === void 0 ? "" : r}`).style("width", `${t.width}px`).style("height", `${t.height}px`).append("svg").attr("class", `palette-button ${e.id}`).style("position", "relative").style("left", 0).style("top", 0).style("width", "100%").style("height", "100%").on("click", () => {
 			n.connectionType = e;
 		});
-		i.append("path").attr("d", ae(k.Rectangle, 0, 0, t.width, t.height)).attr("fill", t.backgroundColor).attr("stroke", "black").attr("stroke-width", "1px"), t.icon !== "" && i.append("image").attr("x", 0).attr("y", 0).attr("width", t.width).attr("height", t.height).attr("href", t.icon), t.label !== "" && i.append("text").attr("transform", `translate(${t.width / 2},${t.height / 2 + In})`).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(t.label);
+		i.append("path").attr("d", ae(ie.Rectangle, 0, 0, t.width, t.height)).attr("fill", t.backgroundColor).attr("stroke", "black").attr("stroke-width", "1px"), t.icon !== "" && i.append("image").attr("x", 0).attr("y", 0).attr("width", t.width).attr("height", t.height).attr("href", t.icon), t.label !== "" && i.append("text").attr("transform", `translate(${t.width / 2},${t.height / 2 + Vn})`).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(t.label);
 	};
 	return s(() => {
 		t.palettes.length > 0 && !_.current && (_.current = !0, v(t.palettes[0]));
@@ -4679,28 +4824,28 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		if (g.current) switch (t.direction) {
 			case p.Bottom:
 			case p.Top:
-				g.current.style.width = t.width, t.height && (g.current.style.height = t.height);
+				g.current.style.width = t.width, g.current.style.height = t.length;
 				break;
 			case p.Left:
 			case p.Right:
-				g.current.style.height = t.width, t.height && (g.current.style.width = t.height);
+				g.current.style.height = t.width, g.current.style.width = t.length;
 				break;
 		}
 	}, [
 		t.direction,
 		t.width,
-		t.height
+		t.length
 	]), /* @__PURE__ */ d("daga-palette", { children: /* @__PURE__ */ f("div", {
 		ref: g,
 		className: `daga-panel daga-${t.location} daga-${t.direction}`,
-		children: [/* @__PURE__ */ d(Cn, {
+		children: [/* @__PURE__ */ d(On, {
 			direction: t.direction,
 			collapsableSelector: g,
 			collapsableAdditionalSelector: ".daga-panel-content",
 			rule: "display",
 			collapsedValue: "none",
 			visibleValue: "block",
-			collapsed: !1,
+			collapsed: t.collapsed,
 			disabled: !1
 		}), /* @__PURE__ */ f("div", {
 			className: "daga-panel-content",
@@ -4714,7 +4859,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			}), /* @__PURE__ */ d("div", { className: "daga-palette-view" })]
 		})]
 	}) });
-}, Rn = ({ location: t, direction: n, centerAnimationDuration: r, enableAction: i, enableFilter: a, enableLayout: l, enableSelection: u, enableZoom: m }) => {
+}, Un = ({ location: t, direction: n, centerAnimationDuration: r, enableAction: i, enableFilter: a, enableLayout: l, enableSelection: u, enableZoom: m }) => {
 	let h = !1, g = !0, _ = !1, v, y, b, x;
 	switch (n) {
 		case p.Bottom:
@@ -4745,11 +4890,11 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		} else g = !0, t.transition().duration(500).ease(e.easeLinear).style(v, "0rem").style("transform", `${y}(0)`), setTimeout(() => {
 			_ = !1;
 		}, 500);
-	}, T = o(xn);
+	}, T = o(En);
 	return /* @__PURE__ */ d("daga-diagram-buttons", { children: /* @__PURE__ */ f("div", {
 		className: `daga-diagram-buttons daga-${t} daga-${n}`,
 		children: [
-			m && T.canUserPerformAction(q.Zoom) && /* @__PURE__ */ d("button", {
+			m && T.canUserPerformAction(K.Zoom) && /* @__PURE__ */ d("button", {
 				className: "daga-zoom-in",
 				onClick: () => {
 					T.zoomBy(T.zoomFactor);
@@ -4759,7 +4904,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 					children: "Zoom in"
 				})
 			}),
-			m && T.canUserPerformAction(q.Zoom) && /* @__PURE__ */ d("button", {
+			m && T.canUserPerformAction(K.Zoom) && /* @__PURE__ */ d("button", {
 				className: "daga-zoom-out",
 				onClick: () => {
 					T.zoomBy(1 / T.zoomFactor);
@@ -4773,7 +4918,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 				className: "daga-collapsable-buttons daga-collapsed",
 				ref: ee,
 				children: [
-					m && T.canUserPerformAction(q.Zoom) && /* @__PURE__ */ d("button", {
+					m && T.canUserPerformAction(K.Zoom) && /* @__PURE__ */ d("button", {
 						className: "daga-center",
 						onClick: () => {
 							T.center(void 0, 1, r);
@@ -4828,7 +4973,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 						onClick: () => {
 							T.multipleSelectionOn = !0, e.select(S.current).classed("daga-on", !0).classed("daga-off", !1);
 							let t = T.diagramEvent$.subscribe((n) => {
-								n.type === Ot.Selection && (e.select(S.current).classed("daga-on", !1).classed("daga-off", !0), t.unsubscribe());
+								n.type === Mt.Selection && (e.select(S.current).classed("daga-on", !1).classed("daga-off", !0), t.unsubscribe());
 							});
 						},
 						ref: S,
@@ -4860,7 +5005,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 					l && T.layoutFormat && /* @__PURE__ */ d("button", {
 						className: "daga-layout",
 						onClick: () => {
-							T.layoutFormat && T.layoutFormat in yn && yn[T.layoutFormat].apply(T.model);
+							T.layoutFormat && T.layoutFormat in wn && wn[T.layoutFormat].apply(T.model);
 						},
 						children: /* @__PURE__ */ d("span", {
 							className: "daga-tooltip",
@@ -4895,8 +5040,8 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			})
 		]
 	}) });
-}, zn = ({ config: e, model: t, onCanvasCreated: n, onDiagramEvent: r, onModelChange: i }) => {
-	let a = new ot(), o = new en(), u = c(null), h = c(void 0), g = c(!1), _ = [], [v, y] = l(void 0), [b, x] = l(void 0), ee = {
+}, Wn = ({ config: e, model: t, onCanvasCreated: n, onDiagramEvent: r, onModelChange: i }) => {
+	let a = new ut(), o = new on(), u = c(null), h = c(void 0), g = c(!1), _ = [], [v, y] = l(void 0), [b, x] = l(void 0), ee = {
 		zoomIn: () => {},
 		zoomOut: () => {},
 		center: () => {},
@@ -4904,12 +5049,12 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		filter: () => {},
 		undo: () => {},
 		redo: () => {}
-	}, S = { refreshPalette: () => {} }, C = new Sn((e) => y(e), (e) => x(e)), w = {
+	}, S = { refreshPalette: () => {} }, C = new Dn((e) => y(e), (e) => x(e)), w = {
 		diagramButtons: ee,
 		palette: S,
 		propertyEditor: C
 	}, T = (t = !1) => {
-		if ((!h.current || t) && (_.forEach((e) => e.unsubscribe()), h.current = new an(w, e)), !h.current) throw Error("Canvas could not be created");
+		if ((!h.current || t) && (_.forEach((e) => e.unsubscribe()), h.current = new un(w, e)), !h.current) throw Error("Canvas could not be created");
 		return h.current;
 	}, E = T(), D = (e) => {
 		E.initView(e), _.push(E.diagramEvent$.subscribe((e) => {
@@ -4925,17 +5070,17 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		u.current && (T(!0), D(u.current), n?.(E));
 	}, [e]), s(() => {
 		t && a.import(E.model, t);
-	}, [t]), /* @__PURE__ */ d("daga-diagram", { children: /* @__PURE__ */ d(bn.Provider, {
+	}, [t]), /* @__PURE__ */ d("daga-diagram", { children: /* @__PURE__ */ d(Tn.Provider, {
 		value: e,
-		children: /* @__PURE__ */ d(xn.Provider, {
+		children: /* @__PURE__ */ d(En.Provider, {
 			value: E,
 			children: /* @__PURE__ */ f("daga-diagram-editor", { children: [/* @__PURE__ */ d("div", {
 				className: "daga-append-to",
 				ref: u
-			}), /* @__PURE__ */ f(xn.Provider, {
+			}), /* @__PURE__ */ f(En.Provider, {
 				value: E,
 				children: [
-					e.components?.buttons !== void 0 && e.components?.buttons?.enabled !== !1 && /* @__PURE__ */ d(Rn, {
+					e.components?.buttons !== void 0 && e.components?.buttons?.enabled !== !1 && /* @__PURE__ */ d(Un, {
 						location: e.components?.buttons?.location || m.BottomRight,
 						direction: e.components?.buttons?.direction || p.Top,
 						centerAnimationDuration: e.components?.buttons?.centerAnimationDuration,
@@ -4945,18 +5090,22 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 						enableSelection: e.components?.buttons?.enableSelection !== !1,
 						enableZoom: e.components?.buttons?.enableZoom !== !1
 					}),
-					e.components?.palette !== void 0 && e.components?.palette?.enabled !== !1 && e.components?.palette?.sections && (e.components?.palette?.sections?.length || 0) > 0 && /* @__PURE__ */ d(Ln, {
+					e.components?.palette !== void 0 && e.components?.palette?.enabled !== !1 && e.components?.palette?.sections && (e.components?.palette?.sections?.length || 0) > 0 && /* @__PURE__ */ d(Hn, {
+						collapsed: e.components?.palette?.open === !1,
 						location: e.components?.palette?.location || m.TopLeft,
 						direction: e.components?.palette?.direction || p.Bottom,
 						width: e.components?.palette?.width || "12rem",
-						height: e.components?.palette?.height,
+						length: e.components?.palette?.length || "min-content",
+						gap: e.components?.palette?.gap || "1rem",
+						justifyContent: e.components?.palette?.justifyContent || "center",
 						palettes: e.components?.palette?.sections || []
 					}),
-					e.components?.propertyEditor !== void 0 && e.components?.propertyEditor?.enabled !== !1 && /* @__PURE__ */ d(Fn, {
+					e.components?.propertyEditor !== void 0 && e.components?.propertyEditor?.enabled !== !1 && /* @__PURE__ */ d(Bn, {
+						collapsed: e.components?.propertyEditor?.open === !1,
 						location: e.components?.propertyEditor?.location || m.TopRight,
 						direction: e.components?.propertyEditor?.direction || p.Bottom,
 						width: e.components?.propertyEditor?.width || "24rem",
-						height: e.components?.propertyEditor?.height,
+						length: e.components?.propertyEditor?.length || "min-content",
 						title: v,
 						valueSet: b,
 						onValueChange: (e, t, n) => {
@@ -4967,11 +5116,11 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 							}
 						}
 					}),
-					e.components?.errors !== void 0 && e.components?.errors?.enabled !== !1 && /* @__PURE__ */ d(wn, {})
+					e.components?.errors !== void 0 && e.components?.errors?.enabled !== !1 && /* @__PURE__ */ d(kn, {})
 				]
 			})] })
 		})
 	}) });
 };
 //#endregion
-export { zn as DagaDiagram };
+export { Wn as DagaDiagram };