@metadev/daga-react 5.0.5 → 5.1.1

package/index.mjs

@@ -51,11 +51,11 @@ var p = /* @__PURE__ */ function(e) {
 		i ||= ne;
 		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) {
@@ -230,70 +230,69 @@ var p = /* @__PURE__ */ function(e) {
 	}
 }, ie = (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) => {
 	let n = e.indexOf(t);
 	return n >= 0 && e.splice(n, 1), e;
-}, k = /* @__PURE__ */ function(e) {
+}, ae = /* @__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) => {
+}({}), oe = (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);
-		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) {
-	return e.AllScroll = "all-scroll", e.Auto = "auto", e.Crosshair = "crosshair", e.EWResize = "ew-resize", e.Grab = "grab", e.Grabbing = "grabbing", e.Move = "move", e.NoDrop = "no-drop", e.NSResize = "ns-resize", e.NotAllowed = "not-allowed", e.ZoomIn = "zoom-in", e.ZoomOut = "zoom-out", e;
-}({}), ge = (e) => Math.max(...e.split("\n").map((e) => e.length)), _e = (e) => e.match(/\n/g)?.length || 0, j = [];
-for (let e = 0; e < 256; ++e) j.push((e + 256).toString(16).slice(1));
-function ve(e, t = 0) {
-	return (j[e[t + 0]] + j[e[t + 1]] + j[e[t + 2]] + j[e[t + 3]] + "-" + j[e[t + 4]] + j[e[t + 5]] + "-" + j[e[t + 6]] + j[e[t + 7]] + "-" + j[e[t + 8]] + j[e[t + 9]] + "-" + j[e[t + 10]] + j[e[t + 11]] + j[e[t + 12]] + j[e[t + 13]] + j[e[t + 14]] + j[e[t + 15]]).toLowerCase();
+		case "ellipse": return se(t, n, r, i);
+		case "empty": return ce();
+		case "folder": return le(t, n, r, i);
+		case "hexagon": return ue(t, n, r, i);
+		case "octagon": return de(t, n, r, i);
+		case "pill": return fe(t, n, r, i);
+		case "rectangle": return pe(t, n, r, i);
+		case "rhombus": return me(t, n, r, i);
+		case "rounded-rectangle": return he(t, n, r, i);
+		case "sticky-note": return ge(t, n, r, i);
+		default: return pe(t, n, r, i);
+	}
+}, se = (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`, ce = () => "Z", le = (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`, ue = (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`, de = (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`, fe = (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` : se(e, t, n, r), pe = (e, t, n, r) => `M ${e} ${t} L ${e + n} ${t} L ${e + n} ${t + r} L ${e} ${t + r} Z`, me = (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`, he = (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`, ge = (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`, k = /* @__PURE__ */ function(e) {
+	return e.AllScroll = "all-scroll", e.Auto = "auto", e.Crosshair = "crosshair", e.EWResize = "ew-resize", e.Grab = "grab", e.Grabbing = "grabbing", e.Move = "move", e.NoDrop = "no-drop", e.NESWResize = "nesw-resize", e.NSResize = "ns-resize", e.NWSEResize = "nwse-resize", e.NotAllowed = "not-allowed", e.ZoomIn = "zoom-in", e.ZoomOut = "zoom-out", e;
+}({}), _e = (e) => Math.max(...e.split("\n").map((e) => e.length)), ve = (e) => e.match(/\n/g)?.length || 0, A = [];
+for (let e = 0; e < 256; ++e) A.push((e + 256).toString(16).slice(1));
+function ye(e, t = 0) {
+	return (A[e[t + 0]] + A[e[t + 1]] + A[e[t + 2]] + A[e[t + 3]] + "-" + A[e[t + 4]] + A[e[t + 5]] + "-" + A[e[t + 6]] + A[e[t + 7]] + "-" + A[e[t + 8]] + A[e[t + 9]] + "-" + A[e[t + 10]] + A[e[t + 11]] + A[e[t + 12]] + A[e[t + 13]] + A[e[t + 14]] + A[e[t + 15]]).toLowerCase();
 }
 //#endregion
 //#region node_modules/uuid/dist/rng.js
-var ye = new Uint8Array(16);
-function be() {
-	return crypto.getRandomValues(ye);
+var be = new Uint8Array(16);
+function xe() {
+	return crypto.getRandomValues(be);
 }
 //#endregion
 //#region node_modules/uuid/dist/v4.js
-function xe(e, t, n) {
-	return !t && !e && crypto.randomUUID ? crypto.randomUUID() : Se(e, t, n);
-}
 function Se(e, t, n) {
+	return !t && !e && crypto.randomUUID ? crypto.randomUUID() : Ce(e, t, n);
+}
+function Ce(e, t, n) {
 	e ||= {};
-	let r = e.random ?? e.rng?.() ?? be();
+	let r = e.random ?? e.rng?.() ?? xe();
 	if (r.length < 16) throw Error("Random bytes length must be >= 16");
 	if (r[6] = r[6] & 15 | 64, r[8] = r[8] & 63 | 128, t) {
 		if (n ||= 0, n < 0 || n + 16 > t.length) throw RangeError(`UUID byte range ${n}:${n + 15} is out of buffer bounds`);
 		for (let e = 0; e < 16; ++e) t[n + e] = r[e];
 		return t;
 	}
-	return ve(r);
+	return ye(r);
 }
 //#endregion
 //#region libs/daga/src/lib/util/object-util.ts
-var Ce = (e) => {
+var we = (e) => {
 	if (typeof e != "object" || !e) return e;
-	if (Array.isArray(e)) return e.map(Ce);
+	if (Array.isArray(e)) return e.map(we);
 	let t = {};
-	for (let n of Object.entries(e)) t[n[0]] = Ce(n[1]);
+	for (let n of Object.entries(e)) t[n[0]] = we(n[1]);
 	return t;
-}, M = (e) => {
+}, j = (e) => {
 	let { selected: t, highlighted: n, selectedAndHighlighted: r, ...i } = e, a = i;
 	return {
 		defaultLook: a,
@@ -312,106 +311,13 @@ var Ce = (e) => {
 			...r
 		}
 	};
-}, we = class {
-	constructor() {
-		this.entities = [], this.entityMap = {};
-	}
-	get length() {
-		return this.size();
-	}
-	all() {
-		return [...this.entities];
-	}
-	add(e) {
-		this.entityMap[e.id] === void 0 && (this.entityMap[e.id] = e, this.entities.push(e));
-	}
-	clear() {
-		for (; this.entities.length > 0;) this.remove(this.entities[0].id);
-	}
-	contains(e) {
-		return this.entityMap[e] !== void 0;
-	}
-	count(e) {
-		return this.entities.filter(e).length;
-	}
-	filter(e) {
-		return this.entities.filter(e);
-	}
-	find(e) {
-		return this.entities.find(e);
-	}
-	get(e) {
-		return this.entityMap[e];
-	}
-	map(e) {
-		return this.entities.map(e);
-	}
-	remove(e) {
-		let t = this.get(e);
-		t !== void 0 && (delete this.entityMap[e], O(this.entities, t));
-	}
-	size() {
-		return this.entities.length;
-	}
-	*[Symbol.iterator]() {
-		for (let e of this.entities) yield e;
-	}
 }, Te = class {
-	get id() {
-		return this._id;
-	}
-	get highlighted() {
-		return this.model.canvas?.userHighlight?.contains(this.id) || !1;
-	}
-	get selected() {
-		return this.model.canvas?.userSelection?.contains(this.id) || !1;
-	}
-	constructor(e, t) {
-		this.selfRemoved = !1, this.selfRemovedTimestamp = null, this.model = e, this._id = t;
-	}
-	select() {
-		return this.model.canvas?.selectCanvasView()?.select(`[id='${E(this.id)}']`);
-	}
-}, N = class extends we {
-	all(e = !1) {
-		return e ? super.all() : super.filter((e) => !e.removed);
-	}
-	contains(e, t = !1) {
-		return t ? super.contains(e) : super.contains(e) && !this.entityMap[e].removed;
-	}
-	count(e, t = !1) {
-		return t ? super.count(e) : super.count((t, n, r) => e(t, n, r) && !t.removed);
-	}
-	filter(e, t = !1) {
-		return t ? super.filter(e) : super.filter((t, n, r) => e(t, n, r) && !t.removed);
-	}
-	find(e, t = !1) {
-		return t ? super.find(e) : super.find((t, n, r) => e(t, n, r) && !t.removed);
-	}
-	get(e, t = !1) {
-		return t || this.contains(e) ? super.get(e) : void 0;
-	}
-	map(e, t = !1) {
-		return t ? super.map(e) : super.filter((e) => !e.removed).map(e);
-	}
-	remove(e) {
-		let t = this.get(e, !0);
-		t !== void 0 && (delete this.entityMap[e], O(this.entities, t));
-	}
-	size(e = !1) {
-		return e ? super.size() : super.filter((e) => !e.removed).length;
-	}
-	*[Symbol.iterator](e = !1) {
-		if (e) for (let e of this.entities) yield e;
-		else for (let e of this.entities.filter((e) => !e.removed)) yield e;
-	}
-}, Ee = class {
 	constructor(e, t, n, r, i, a, o) {
 		this.name = e, this.label = t, this.type = n, this.defaultValue = r, this.basic = i, this.editable = a, this.rootAttribute = o, this.options = void 0, this.properties = void 0;
 	}
-}, P = /* @__PURE__ */ function(e) {
+}, M = /* @__PURE__ */ function(e) {
 	return e.Boolean = "boolean", e.Color = "color", e.Date = "date", e.Datetime = "datetime", e.Number = "number", e.Object = "object", e.Option = "option", e.OptionList = "option-list", e.OptionSet = "option-set", e.Text = "text", e.TextArea = "text-area", e.TextList = "text-list", e.TextSet = "text-set", e.TextMap = "text-map", e.Time = "time", e.Url = "url", e;
-}({}), De = class {
+}({}), Ee = class {
 	constructor(e = []) {
 		this.propertyList = e, this.propertyMap = {};
 		for (let e of this.propertyList) this.propertyMap[e.name] = e;
@@ -428,19 +334,19 @@ var Ce = (e) => {
 };
 //#endregion
 //#region libs/daga/src/lib/diagram/collab/primitives.ts
-function Oe(e, t) {
+function De(e, t) {
 	return !t || e[0] > t[0] ? !0 : e[0] === t[0] ? e[1] >= t[1] : !1;
 }
 //#endregion
 //#region libs/daga/src/lib/diagram/property/property-util.ts
-var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 || e instanceof Object && Object.keys(e).length === 0, Ae = (e, t) => e === t || JSON.stringify(e) === JSON.stringify(t), je = (e, t, n) => {
+var Oe = (e) => e == null || e === "" || e instanceof Array && e.length === 0 || e instanceof Object && Object.keys(e).length === 0, ke = (e, t) => e === t || JSON.stringify(e) === JSON.stringify(t), Ae = (e, t, n) => {
 	let r = {}, i = {};
-	for (let a in n.propertySet.propertyMap) if (n.propertySet.propertyMap[a].type === P.Object) {
-		let o = je(e[a], t[a], n.getSubValueSet(a));
+	for (let a in n.propertySet.propertyMap) if (n.propertySet.propertyMap[a].type === M.Object) {
+		let o = Ae(e[a], t[a], n.getSubValueSet(a));
 		Object.keys(o[0]).length > 0 && Object.keys(o[1]).length > 0 && (r[a] = o[0], i[a] = o[1]);
-	} else Ae(e[a], t[a]) || (r[a] = e[a], i[a] = t[a]);
+	} else ke(e[a], t[a]) || (r[a] = e[a], i[a] = t[a]);
 	return [r, i];
-}, Me = (e) => e != null && e.constructor === Object, Ne = class e {
+}, je = (e) => e != null && e.constructor === Object, Me = class e {
 	constructor(e, t) {
 		this.displayedProperties = [], this.hiddenProperties = [], this.values = {}, this.valueSets = {}, this.ownTimestamps = {}, this.propertySet = e, this.rootElement = t, this.resetValues();
 	}
@@ -474,21 +380,21 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}
 	getValue(e) {
 		let t = this.propertySet.getProperty(e)?.rootAttribute;
-		return t != null && (this.values[e] = this.getRootElementValue(t)), this.propertySet.getProperty(e).type === P.Object ? this.valueSets[e].getValues() : this.values[e];
+		return t != null && (this.values[e] = this.getRootElementValue(t)), this.propertySet.getProperty(e).type === M.Object ? this.valueSets[e].getValues() : this.values[e];
 	}
 	getValues() {
 		let e = {};
-		for (let t in this.propertySet.propertyMap) this.propertySet.getProperty(t).type === P.Object ? e[t] = this.valueSets[t].getValues() : e[t] = this.getValue(t);
+		for (let t in this.propertySet.propertyMap) this.propertySet.getProperty(t).type === M.Object ? e[t] = this.valueSets[t].getValues() : e[t] = this.getValue(t);
 		return e;
 	}
 	getValuesForKeys(e) {
 		let t = {};
-		for (let n in e) this.propertySet.getProperty(n).type === P.Object ? t[n] = this.valueSets[n].getValuesForKeys(e[n]) : t[n] = this.getValue(n);
+		for (let n in e) this.propertySet.getProperty(n).type === M.Object ? t[n] = this.valueSets[n].getValuesForKeys(e[n]) : t[n] = this.getValue(n);
 		return t;
 	}
 	getTimestamps() {
 		let e = {};
-		for (let t in this.propertySet.propertyMap) if (this.propertySet.getProperty(t).type === P.Object) e[t] = this.valueSets[t].getTimestamps();
+		for (let t in this.propertySet.propertyMap) if (this.propertySet.getProperty(t).type === M.Object) e[t] = this.valueSets[t].getTimestamps();
 		else {
 			let n = this.ownTimestamps[t];
 			n && (e[t] = n);
@@ -496,11 +402,11 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		return e;
 	}
 	hasValue(e) {
-		return !ke(this.getValue(e));
+		return !Oe(this.getValue(e));
 	}
 	hasSetValue(e) {
 		let t = this.getValue(e), n = this.propertySet.getProperty(e);
-		return n && n.type === P.Object ? this.getSubValueSet(e).hasAnySetValue() : !ke(t) && !Ae(t, n?.defaultValue);
+		return n && n.type === M.Object ? this.getSubValueSet(e).hasAnySetValue() : !Oe(t) && !ke(t, n?.defaultValue);
 	}
 	hasAnySetValue() {
 		for (let e of this.propertySet.propertyList) if (this.hasSetValue(e.name)) return !0;
@@ -509,35 +415,35 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	setValue(e, t) {
 		let n = this.propertySet.getProperty(e);
 		if (n) {
-			n.type === P.Object ? this.valueSets[e].setValues(t) : (this.values[e] = t, Ae(t, n.defaultValue) || this.displayProperty(n));
+			n.type === M.Object ? this.valueSets[e].setValues(t) : (this.values[e] = t, ke(t, n.defaultValue) || this.displayProperty(n));
 			let r = n.rootAttribute;
 			r != null && this.setRootElementValue(r, t);
 		}
 	}
 	setValues(e) {
 		this.resetValues();
-		for (let t in e) this.propertySet.getProperty(t).type === P.Object ? this.valueSets[t].setValues(e[t]) : this.setValue(t, e[t]);
+		for (let t in e) this.propertySet.getProperty(t).type === M.Object ? this.valueSets[t].setValues(e[t]) : this.setValue(t, e[t]);
 	}
 	setTimestamps(e) {
 		this.ownTimestamps = {};
-		for (let t in e) this.propertySet.getProperty(t).type === P.Object ? this.valueSets[t].setTimestamps(e[t]) : this.ownTimestamps[t] = e[t];
+		for (let t in e) this.propertySet.getProperty(t).type === M.Object ? this.valueSets[t].setTimestamps(e[t]) : this.ownTimestamps[t] = e[t];
 	}
 	overwriteValues(e) {
-		for (let t in e) this.propertySet.getProperty(t).type === P.Object ? this.valueSets[t].overwriteValues(e[t]) : this.setValue(t, e[t]);
+		for (let t in e) this.propertySet.getProperty(t).type === M.Object ? this.valueSets[t].overwriteValues(e[t]) : this.setValue(t, e[t]);
 	}
 	overwriteValuesLww(e, t) {
-		for (let n in e) this.propertySet.getProperty(n).type === P.Object ? this.valueSets[n].overwriteValuesLww(e[n], t) : Oe(t, this.ownTimestamps[n]) && (this.setValue(n, e[n]), this.ownTimestamps[n] = t);
+		for (let n in e) this.propertySet.getProperty(n).type === M.Object ? this.valueSets[n].overwriteValuesLww(e[n], t) : De(t, this.ownTimestamps[n]) && (this.setValue(n, e[n]), this.ownTimestamps[n] = t);
 	}
 	resetValues() {
 		this.displayedProperties = [], this.hiddenProperties = [], this.ownTimestamps = {};
 		for (let e in this.propertySet.propertyMap) {
 			let t = this.propertySet.getProperty(e), n = t.rootAttribute;
-			t.type === P.Object ? this.valueSets[e] = this.constructSubValueSet(e) : this.values[e] = Ce(t.defaultValue), n != null && t.defaultValue !== void 0 && !Ae(this.getRootElementValue(n), t.defaultValue) && this.setRootElementValue(n, this.values[e]), t.basic === !1 ? this.hiddenProperties.push(t) : this.displayedProperties.push(t);
+			t.type === M.Object ? this.valueSets[e] = this.constructSubValueSet(e) : this.values[e] = we(t.defaultValue), n != null && t.defaultValue !== void 0 && !ke(this.getRootElementValue(n), t.defaultValue) && this.setRootElementValue(n, this.values[e]), t.basic === !1 ? this.hiddenProperties.push(t) : this.displayedProperties.push(t);
 		}
 	}
 	constructSubValueSet(t) {
-		let n = this.propertySet.getProperty(t), r = new e(new De(n.properties), this.rootElement);
-		return r.overwriteValues(Ce(n.defaultValue)), r;
+		let n = this.propertySet.getProperty(t), r = new e(new Ee(n.properties), this.rootElement);
+		return r.overwriteValues(we(n.defaultValue)), r;
 	}
 	getSubValueSet(e) {
 		return this.valueSets[e];
@@ -548,11 +454,103 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	hideProperty(e) {
 		this.hiddenProperties.includes(e) || (this.hiddenProperties.push(e), O(this.displayedProperties, e));
 	}
-}, F = {
+}, Ne = class {
+	constructor() {
+		this.entities = [], this.entityMap = {};
+	}
+	get length() {
+		return this.size();
+	}
+	all() {
+		return [...this.entities];
+	}
+	add(e) {
+		this.entityMap[e.id] === void 0 && (this.entityMap[e.id] = e, this.entities.push(e));
+	}
+	clear() {
+		for (; this.entities.length > 0;) this.remove(this.entities[0].id);
+	}
+	contains(e) {
+		return this.entityMap[e] !== void 0;
+	}
+	count(e) {
+		return this.entities.filter(e).length;
+	}
+	filter(e) {
+		return this.entities.filter(e);
+	}
+	find(e) {
+		return this.entities.find(e);
+	}
+	get(e) {
+		return this.entityMap[e];
+	}
+	map(e) {
+		return this.entities.map(e);
+	}
+	remove(e) {
+		let t = this.get(e);
+		t !== void 0 && (delete this.entityMap[e], O(this.entities, t));
+	}
+	size() {
+		return this.entities.length;
+	}
+	*[Symbol.iterator]() {
+		for (let e of this.entities) yield e;
+	}
+}, Pe = class {
+	get id() {
+		return this._id;
+	}
+	get highlighted() {
+		return this.model.canvas?.userHighlight?.contains(this.id) || !1;
+	}
+	get selected() {
+		return this.model.canvas?.userSelection?.contains(this.id) || !1;
+	}
+	constructor(e, t) {
+		this.selfRemoved = !1, this.selfRemovedTimestamp = null, this.model = e, this._id = t;
+	}
+	select() {
+		return this.model.canvas?.selectCanvasView()?.select(`[id='${E(this.id)}']`);
+	}
+}, N = class extends Ne {
+	all(e = !1) {
+		return e ? super.all() : super.filter((e) => !e.removed);
+	}
+	contains(e, t = !1) {
+		return t ? super.contains(e) : super.contains(e) && !this.entityMap[e].removed;
+	}
+	count(e, t = !1) {
+		return t ? super.count(e) : super.count((t, n, r) => e(t, n, r) && !t.removed);
+	}
+	filter(e, t = !1) {
+		return t ? super.filter(e) : super.filter((t, n, r) => e(t, n, r) && !t.removed);
+	}
+	find(e, t = !1) {
+		return t ? super.find(e) : super.find((t, n, r) => e(t, n, r) && !t.removed);
+	}
+	get(e, t = !1) {
+		return t || this.contains(e) ? super.get(e) : void 0;
+	}
+	map(e, t = !1) {
+		return t ? super.map(e) : super.filter((e) => !e.removed).map(e);
+	}
+	remove(e) {
+		let t = this.get(e, !0);
+		t !== void 0 && (delete this.entityMap[e], O(this.entities, t));
+	}
+	size(e = !1) {
+		return e ? super.size() : super.filter((e) => !e.removed).length;
+	}
+	*[Symbol.iterator](e = !1) {
+		if (e) for (let e of this.entities) yield e;
+		else for (let e of this.entities.filter((e) => !e.removed)) yield e;
+	}
+}, P = {
 	name: "",
 	label: null,
 	look: {
-		lookType: "connection-look",
 		color: "#000000",
 		thickness: 1,
 		shape: D.Straight,
@@ -565,23 +563,23 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	startTypes: [],
 	endTypes: [],
 	properties: []
-}, Pe = class {
+}, Fe = class {
 	constructor(e) {
 		let t = {
-			...F,
+			...P,
 			...e
 		};
 		this.id = t.id, this.name = t.name, this.label = t.label;
-		let n = M(t.look);
+		let n = j(t.look);
 		if (this.defaultLook = n.defaultLook, this.selectedLook = n.selectedLook, this.highlightedLook = n.highlightedLook, this.selectedAndHighlightedLook = n.selectedAndHighlightedLook, t.startMarkerLook !== void 0) {
-			let e = M(t.startMarkerLook);
+			let e = j(t.startMarkerLook);
 			this.defaultStartMarkerLook = e.defaultLook, this.selectedStartMarkerLook = e.selectedLook, this.highlightedStartMarkerLook = e.highlightedLook, this.selectedAndHighlightedStartMarkerLook = e.selectedAndHighlightedLook;
 		} else this.defaultStartMarkerLook = null, this.selectedStartMarkerLook = null, this.highlightedStartMarkerLook = null, this.selectedAndHighlightedStartMarkerLook = null;
 		if (t.endMarkerLook !== void 0) {
-			let e = M(t.endMarkerLook);
+			let e = j(t.endMarkerLook);
 			this.defaultEndMarkerLook = e.defaultLook, this.selectedEndMarkerLook = e.selectedLook, this.highlightedEndMarkerLook = e.highlightedLook, this.selectedAndHighlightedEndMarkerLook = e.selectedAndHighlightedLook;
 		} else this.defaultEndMarkerLook = null, this.selectedEndMarkerLook = null, this.highlightedEndMarkerLook = null, this.selectedAndHighlightedEndMarkerLook = null;
-		this.startTypes = t.startTypes, this.endTypes = t.endTypes, this.propertySet = new De(t.properties);
+		this.startTypes = t.startTypes, this.endTypes = t.endTypes, this.propertySet = new Ee(t.properties);
 	}
 	canStartFromType(e) {
 		return this.startTypes.indexOf(e) >= 0;
@@ -589,12 +587,12 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	canFinishOnType(e) {
 		return this.endTypes.indexOf(e) >= 0;
 	}
-}, I = class extends Te {
+}, F = class extends Pe {
 	get type() {
 		return this._type;
 	}
 	set type(e) {
-		e !== this._type && (this._type = e, this.valueSet &&= new Ne(e.propertySet, this), this.model.canvas?.userSelection?.openInPropertyEditor(this, !1), this.updateInView());
+		e !== this._type && (this._type = e, this.valueSet &&= new Me(e.propertySet, this), this.model.canvas?.userSelection?.openInPropertyEditor(this, !1), this.updateInView());
 	}
 	get typeString() {
 		return this.type.id;
@@ -622,7 +620,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}
 	set lookConfig(e) {
 		if (this._lookConfig = e, e) {
-			let t = M(e);
+			let t = j(e);
 			this._defaultLook = {
 				...this._defaultLook,
 				...t.defaultLook
@@ -649,7 +647,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}
 	set startMarkerLookConfig(e) {
 		if (this._startMarkerLookConfig = e, e) {
-			let t = M(e);
+			let t = j(e);
 			this._defaultStartMarkerLook = {
 				...this._defaultStartMarkerLook,
 				...t.defaultLook
@@ -676,7 +674,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}
 	set endMarkerLookConfig(e) {
 		if (this._endMarkerLookConfig = e, e) {
-			let t = M(e);
+			let t = j(e);
 			this._defaultEndMarkerLook = {
 				...this._defaultEndMarkerLook,
 				...t.defaultLook
@@ -695,7 +693,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	constructor(e, t, n, r, i) {
 		if (e.connections.get(i) !== void 0) throw Error(`DiagramConnection with id "${i}" already exists`);
 		if (!i) throw Error("DiagramConnection cannot have an empty or null id");
-		super(e, i), this.startCoords = [0, 0], this.endCoords = [0, 0], this.startLabel = "", this.middleLabel = "", this.endLabel = "", this.points = [], this._type = t, this.valueSet = new Ne(t.propertySet, this), this.originalData = {}, this.setStart(n), this.setEnd(r);
+		super(e, i), this.startCoords = [0, 0], this.endCoords = [0, 0], this.startLabel = "", this.middleLabel = "", this.endLabel = "", this.points = [], this._type = t, this.valueSet = new Me(t.propertySet, this), this.originalData = {}, this.setStart(n), this.setEnd(r);
 	}
 	get removed() {
 		return this.selfRemoved || this.start !== void 0 && this.start.removed || this.end !== void 0 && this.end.removed;
@@ -744,52 +742,59 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	getPriority() {
 		return this.start ? this.end ? Math.min(this.start.getPriority(), this.end.getPriority()) : this.start.getPriority() : this.end ? this.end.getPriority() : 0;
 	}
-}, Fe = class extends N {
+}, Ie = class extends N {
 	constructor(e) {
-		super(), this.types = new we(), this.model = e;
+		super(), this.types = new Ne(), this.model = e;
 	}
 	new(e, t, n, r) {
 		let i;
-		if (e instanceof Pe) i = e;
+		if (e instanceof Fe) i = e;
 		else {
 			let t = this.types.get(e);
 			if (t === void 0) throw TypeError(`Connection type with id '${e}' could not be found.`);
 			i = t;
 		}
-		let a = new I(this.model, i, t, n, r);
+		let a = new F(this.model, i, t, n, r);
 		return super.add(a), a.updateInView(), a.valueSet.resetValues(), a.start?.raise(!1), a.end?.raise(!1), a;
 	}
 	remove(e) {
 		let t = this.get(e, !0);
 		t && (O(t.start?.outgoingConnections || [], t), O(t.end?.incomingConnections || [], t), super.remove(e), t.updateInView());
 	}
-}, L = {
+}, I = /* @__PURE__ */ function(e) {
+	return e[e.Always = 0] = "Always", e[e.OnlyWhenSelected = 1] = "OnlyWhenSelected", e[e.Never = 2] = "Never", 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: {
+		fillColor: "transparent",
+		fontColor: "#000000",
+		fontFamily: "'Wonder Unit Sans', sans-serif",
+		fontSize: 10,
+		fontWeight: 400
+	}
+}, Le = class extends Pe {
 	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 +809,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 = j(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,36 +827,56 @@ 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 === 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 === 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 === 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 === 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 === 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 === 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 === 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 === 1 || e.padding.length === 2 || e.padding.length, e.padding[0]), Ue = {
+	mode: I.Never,
+	thickness: 10,
+	outerMargin: 0,
+	look: {
+		fillColor: "transparent",
+		borderColor: "transparent",
+		borderThickness: 0
+	}
+}, H = class {
+	constructor(e) {
+		let t;
+		t = typeof e == "boolean" ? { mode: e ? I.Always : I.Never } : typeof e == "string" || typeof e == "number" ? { mode: e } : e, t = {
+			...Ue,
+			...t
+		}, this.mode = t.mode, this.thickness = t.thickness, this.outerMargin = t.outerMargin;
+		let n = j(t.look ?? Ue.look);
+		this.defaultLook = n.defaultLook, this.selectedLook = n.selectedLook, this.highlightedLook = n.highlightedLook, this.selectedAndHighlightedLook = n.selectedAndHighlightedLook;
+	}
+	getLook(e) {
+		return e ? e.selected ? e.highlighted ? this.selectedAndHighlightedLook : this.selectedLook : e.highlighted ? this.highlightedLook : this.defaultLook : this.defaultLook;
+	}
+}, We = new H(Ue), Ge = 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) {
 			let e = [];
 			this.sections.push(e);
-			for (let n of t) e.push(new We(n));
+			for (let n of t) e.push(new Ke(n));
 		}
 	}
-}, We = class {
+}, Ke = class {
 	constructor(e) {
-		this.label = e.label || null, this.ports = e.ports || [], this.priority = e.priority || 0, this.resizableX = e.resizableX, this.resizableY = e.resizableY;
-		let t = M(e.look || Ke);
+		this.label = e.label || null, this.ports = e.ports || [], this.priority = e.priority || 0, e.resizableX === void 0 ? this.resizerX = void 0 : this.resizerX = new H(e.resizableX), e.resizableY === void 0 ? this.resizerY = void 0 : this.resizerY = new H(e.resizableY), e.resizableXY === void 0 ? this.resizerXY = void 0 : this.resizerXY = new H(e.resizableXY);
+		let t = j(e.look || Je);
 		this.defaultLook = t.defaultLook, this.selectedLook = t.selectedLook, this.highlightedLook = t.highlightedLook, this.selectedAndHighlightedLook = t.selectedAndHighlightedLook;
 	}
-}, H = class extends Te {
+}, U = class extends Pe {
 	get name() {
 		return this.label?.text || "";
 	}
@@ -868,7 +894,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}
 	set lookConfig(e) {
 		if (this._lookConfig = e, e) {
-			let t = M(e);
+			let t = j(e);
 			this._defaultLook = {
 				...this._defaultLook,
 				...t.defaultLook
@@ -912,13 +938,44 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	getPriority() {
 		return this.node?.type?.sectionGrid?.sections?.[this.indexYInNode]?.[this.indexXInNode]?.priority || 0;
 	}
+	getResizerX() {
+		return this.type?.resizerX ?? this.node?.getResizerX() ?? We;
+	}
+	getResizerY() {
+		return this.type?.resizerY ?? this.node?.getResizerY() ?? We;
+	}
+	getResizerXY() {
+		return this.type?.resizerXY ?? this.node?.getResizerXY() ?? We;
+	}
 	getResizableX() {
 		let e = this.type;
-		return e?.resizableX === void 0 ? this.node?.getResizableX() || !1 : e.resizableX === He.OnlyWhenSelected ? this.selected : e.resizableX;
+		if (e?.resizerX !== void 0) switch (e.resizerX.mode) {
+			case I.OnlyWhenSelected: return this.selected;
+			case I.Always: return !0;
+			case I.Never:
+			default: return !1;
+		}
+		return this.node?.getResizableX() || !1;
 	}
 	getResizableY() {
 		let e = this.type;
-		return e?.resizableY === void 0 ? this.node?.getResizableY() || !1 : e.resizableY === He.OnlyWhenSelected ? this.selected : e.resizableY;
+		if (e?.resizerY !== void 0) switch (e.resizerY.mode) {
+			case I.OnlyWhenSelected: return this.selected;
+			case I.Always: return !0;
+			case I.Never:
+			default: return !1;
+		}
+		return this.node?.getResizableY() || !1;
+	}
+	getResizableXY() {
+		let e = this.type;
+		if (e?.resizerXY !== void 0) switch (e.resizerXY.mode) {
+			case I.OnlyWhenSelected: return this.selected;
+			case I.Always: return !0;
+			case I.Never:
+			default: return !1;
+		}
+		return this.node?.getResizableXY() || !1;
 	}
 	getClosestPortToPoint(e) {
 		if (this.ports.length !== 0) {
@@ -993,12 +1050,12 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		for (let e of this.decorators) e.move(b(e.coords, t, n, r, i, e.anchorPointX, e.anchorPointY));
 		this.model.canvas?.autoTightenConnections !== !1 && this.getConnections().forEach((e) => e.tighten()), this.updateInView();
 	}
-}, Ge = class extends N {
+}, qe = class extends N {
 	constructor(e) {
 		super(), this.model = e;
 	}
 	new(e, t, n, r, i, a, o) {
-		let s = new H(this.model, e, t, n, r, i, a, o);
+		let s = new U(this.model, e, t, n, r, i, a, o);
 		super.add(s), s.updateInView(), e.sections.push(s), e.updateInView();
 		let c = e.type.sectionGrid?.sections?.[n]?.[t]?.ports;
 		if (c && c.length > 0) for (let e = 0; e < c.length; ++e) {
@@ -1007,7 +1064,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 +1081,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 +1090,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;
 	}
@@ -1039,9 +1104,9 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			t.label && this.model.fields.remove(t.label.id), t.node && O(t.node.sections, t), super.remove(e), t.updateInView();
 		}
 	}
-}, Ke = {
+}, Je = {
 	lookType: "shaped-look",
-	shape: k.Rectangle,
+	shape: ae.Rectangle,
 	fillColor: "#FFFFFF",
 	borderColor: "#000000",
 	borderThickness: 1,
@@ -1050,7 +1115,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		borderColor: "#AA00AA"
 	},
 	highlighted: { borderThickness: 3 }
-}, U = {
+}, Ye = {
 	name: "",
 	defaultWidth: 1,
 	defaultHeight: 1,
@@ -1069,28 +1134,28 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	ports: [],
 	decorators: [],
 	sectionGrid: null,
-	look: Ke,
+	look: Je,
 	isUnique: !1,
 	canBeParentless: !0,
 	childrenTypes: [],
 	priority: 0,
 	properties: []
-}, qe = class {
+}, Xe = class {
 	constructor(e) {
 		let t = {
-			...U,
+			...Ye,
 			...e
 		};
-		this.id = t.id, this.name = t.name, this.defaultWidth = t.defaultWidth, this.defaultHeight = t.defaultHeight, this.minWidth = t.minWidth, this.minHeight = t.minHeight, this.resizableX = t.resizableX, this.resizableY = t.resizableY, this.snapToGridOffset = t.snapToGridOffset, this.bottomPadding = Xe(t), this.leftPadding = Ze(t), this.rightPadding = Qe(t), this.topPadding = $e(t), this.label = t.label, this.ports = t.ports, this.decorators = t.decorators, this.sectionGrid = t.sectionGrid ? new Ue(t.sectionGrid) : null;
-		let n = M(t.look);
-		this.defaultLook = n.defaultLook, this.selectedLook = n.selectedLook, this.highlightedLook = n.highlightedLook, this.selectedAndHighlightedLook = n.selectedAndHighlightedLook, this.isUnique = t.isUnique, this.canBeParentless = t.canBeParentless, this.childrenTypes = t.childrenTypes, this.priority = t.priority, this.propertySet = new De(e?.properties || []);
+		this.id = t.id, this.name = t.name, this.defaultWidth = t.defaultWidth, this.defaultHeight = t.defaultHeight, this.minWidth = t.minWidth, this.minHeight = t.minHeight, e.resizableX === void 0 ? this.resizerX = new H({ mode: I.Never }) : this.resizerX = new H(e.resizableX), e.resizableY === void 0 ? this.resizerY = new H({ mode: I.Never }) : this.resizerY = new H(e.resizableY), e.resizableXY === void 0 ? this.resizerXY = new H({ mode: I.Never }) : this.resizerXY = new H(e.resizableXY), this.snapToGridOffset = t.snapToGridOffset, this.bottomPadding = $e(t), this.leftPadding = et(t), this.rightPadding = tt(t), this.topPadding = nt(t), this.label = t.label, this.ports = t.ports, this.decorators = t.decorators, this.sectionGrid = t.sectionGrid ? new Ge(t.sectionGrid) : null;
+		let n = j(t.look);
+		this.defaultLook = n.defaultLook, this.selectedLook = n.selectedLook, this.highlightedLook = n.highlightedLook, this.selectedAndHighlightedLook = n.selectedAndHighlightedLook, this.isUnique = t.isUnique, this.canBeParentless = t.canBeParentless, this.childrenTypes = t.childrenTypes, this.priority = t.priority, this.propertySet = new Ee(e?.properties || []);
 	}
-}, W = class extends Te {
+}, W = class extends Pe {
 	get type() {
 		return this._type;
 	}
 	set type(e) {
-		e !== this._type && (this._type = e, this.valueSet &&= new Ne(e.propertySet, this), this.model.canvas?.userSelection?.openInPropertyEditor(this, !1), this.updateInView());
+		e !== this._type && (this._type = e, this.valueSet &&= new Me(e.propertySet, this), this.model.canvas?.userSelection?.openInPropertyEditor(this, !1), this.updateInView());
 	}
 	get typeString() {
 		return this.type.id;
@@ -1118,7 +1183,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}
 	set lookConfig(e) {
 		if (this._lookConfig = e, e) {
-			let t = M(e);
+			let t = j(e);
 			this._defaultLook = {
 				...this._defaultLook,
 				...t.defaultLook
@@ -1137,7 +1202,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	constructor(e, t, n = [0, 0], r) {
 		if (e.nodes.get(r) !== void 0) throw Error(`DiagramNode with id "${r}" already exists`);
 		if (!r) throw Error("DiagramNode cannot have an empty or null id");
-		super(e, r), this.children = [], this.sections = [], this.ports = [], this.decorators = [], this.geometryTimestamp = null, this._type = t, this.valueSet = new Ne(t.propertySet, this), this.originalData = {}, this.coords = n, this.width = t.defaultWidth, this.height = t.defaultHeight;
+		super(e, r), this.children = [], this.sections = [], this.ports = [], this.decorators = [], this.geometryTimestamp = null, this._type = t, this.valueSet = new Me(t.propertySet, this), this.originalData = {}, this.coords = n, this.width = t.defaultWidth, this.height = t.defaultHeight;
 	}
 	get removed() {
 		return this.selfRemoved;
@@ -1156,13 +1221,38 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	getPriority() {
 		return this.type.priority;
 	}
+	getResizerX() {
+		return this.type.resizerX;
+	}
+	getResizerY() {
+		return this.type.resizerY;
+	}
+	getResizerXY() {
+		return this.type.resizerXY;
+	}
 	getResizableX() {
-		let e = this.type.resizableX;
-		return e === He.OnlyWhenSelected ? this.selected : e;
+		switch (this.type.resizerX.mode) {
+			case I.OnlyWhenSelected: return this.selected;
+			case I.Always: return !0;
+			case I.Never:
+			default: return !1;
+		}
 	}
 	getResizableY() {
-		let e = this.type.resizableY;
-		return e === He.OnlyWhenSelected ? this.selected : e;
+		switch (this.type.resizerY.mode) {
+			case I.OnlyWhenSelected: return this.selected;
+			case I.Always: return !0;
+			case I.Never:
+			default: return !1;
+		}
+	}
+	getResizableXY() {
+		switch (this.type.resizerXY.mode) {
+			case I.OnlyWhenSelected: return this.selected;
+			case I.Always: return !0;
+			case I.Never:
+			default: return !1;
+		}
 	}
 	getClosestPortToPoint(e) {
 		if (this.ports.length !== 0) {
@@ -1381,13 +1471,13 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		for (let i of r) i.indexYInNode > e && (++i.indexYInNode, i.move([i.coords[0], i.coords[1] + n + t]));
 		this.stretch(p.Bottom, t + n);
 	}
-}, Je = class extends N {
+}, Ze = class extends N {
 	constructor(e) {
-		super(), this.types = new we(), this.model = e;
+		super(), this.types = new Ne(), this.model = e;
 	}
 	new(e, t, n) {
 		let r;
-		if (e instanceof qe) r = e;
+		if (e instanceof Xe) r = e;
 		else {
 			let t = this.types.get(e);
 			if (t === void 0) throw TypeError(`Node type with id '${e}' could not be found.`);
@@ -1408,7 +1498,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 +1515,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,11 +1523,14 @@ 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;
 	}
@@ -1451,35 +1549,101 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		for (let r of this) r.coords[0] < e && e < r.coords[0] + r.width && r.coords[1] < t && t < r.coords[1] + r.height && n.push(r);
 		return n;
 	}
-}, Ye = (e) => {
+}, Qe = (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 = {
+}, $e = (e) => e?.padding === null || e?.padding === void 0 ? Ye.padding : typeof e.padding == "number" ? e.padding : e.padding.length === 1 || e.padding.length === 2 ? e.padding[0] : (e.padding.length, e.padding[2]), et = (e) => e?.padding === null || e?.padding === void 0 ? Ye.padding : typeof e.padding == "number" ? e.padding : e.padding.length === 1 ? e.padding[0] : e.padding.length === 2 || e.padding.length === 3 ? e.padding[1] : e.padding[3], tt = (e) => e?.padding === null || e?.padding === void 0 ? Ye.padding : typeof e.padding == "number" ? e.padding : e.padding.length === 1 ? e.padding[0] : (e.padding.length === 2 || e.padding.length, e.padding[1]), nt = (e) => e?.padding === null || e?.padding === void 0 ? Ye.padding : typeof e.padding == "number" ? e.padding : (e.padding.length === 1 || e.padding.length === 2 || e.padding.length, e.padding[0]), rt = class extends Pe {
+	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;
+	}
+}, it = class extends N {
+	constructor(e) {
+		super(), this.model = e;
+	}
+	new(e, t, n, r, i, a, o, s = "floating", c = "floating") {
+		let l = new rt(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 U) && O(t.rootElement.decorators, t), super.remove(e), t.updateInView());
+	}
+}, at = class extends Pe {
+	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;
+	}
+}, ot = class extends N {
+	constructor(e) {
+		super(), this.model = e;
+	}
+	new(e, t, n, r, i, a) {
+		let o = new at(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());
+	}
+}, st = {
 	lookType: "shaped-look",
-	shape: k.Ellipse,
+	shape: ae.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 = {
+}, ct = j(st), lt = {
 	name: "",
 	label: null,
 	allowsOutgoing: !0,
 	allowsIncoming: !0,
 	width: 24,
-	look: et
-}, rt = class {
+	look: st
+}, ut = class {
 	constructor(e) {
 		let t = {
-			...nt,
+			...lt,
 			...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);
+		let n = j(t.look);
 		this.defaultLook = n.defaultLook, this.selectedLook = n.selectedLook, this.highlightedLook = n.highlightedLook, this.selectedAndHighlightedLook = n.selectedAndHighlightedLook;
 	}
-}, it = class extends Te {
+}, dt = class extends Pe {
 	get type() {
 		return this._type;
 	}
@@ -1509,7 +1673,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 || ct)?.selectedAndHighlightedLook : this._selectedAndHighlightedLook : this._selectedLook === void 0 ? (this.type || ct)?.selectedLook : this._selectedLook : this.highlighted ? this._highlightedLook === void 0 ? (this.type || ct)?.highlightedLook : this._highlightedLook : this._defaultLook === void 0 ? (this.type || ct)?.defaultLook : this._defaultLook;
 	}
 	set look(e) {
 		this.lookConfig = e;
@@ -1519,7 +1683,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}
 	set lookConfig(e) {
 		if (this._lookConfig = e, e) {
-			let t = M(e);
+			let t = j(e);
 			this._defaultLook = {
 				...this._defaultLook,
 				...t.defaultLook
@@ -1536,7 +1700,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 || lt.width;
 	}
 	get height() {
 		return this.width;
@@ -1566,7 +1730,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}
 	getNode() {
 		if (this.rootElement instanceof W) return this.rootElement;
-		if (this.rootElement instanceof H) return this.rootElement.node;
+		if (this.rootElement instanceof U) return this.rootElement.node;
 	}
 	getPriority() {
 		return this.rootElement?.getPriority() || 0;
@@ -1581,12 +1745,12 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	distanceTo(e) {
 		return x(this.coords, e);
 	}
-}, at = class extends N {
+}, ft = class extends N {
 	constructor(e) {
-		super(), this.types = new we(), this.model = e;
+		super(), this.types = new Ne(), 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 dt(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 +1758,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 U) && O(t.rootElement.ports, t), super.remove(e), t.updateInView();
 		}
 	}
-}, ot = class {
+}, pt = 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 at(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 || []) {
@@ -1624,94 +1793,117 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 				t !== void 0 && (r.children?.push(t), t.parent = r);
 			}
 			for (let i of t.sections || []) {
-				let t = new H(e, r, i.indexXInNode, i.indexYInNode, i.coords, i.width, i.height, i.id);
+				let t = new U(e, r, i.indexXInNode, i.indexYInNode, i.coords, i.width, i.height, i.id);
 				if (r.sections?.push(t), e.sections.add(t), n.sectionGrid?.sections?.[i.indexYInNode]?.[i.indexXInNode]?.label) {
 					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 dt(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 rt(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 dt(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 rt(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;
 		}
 	}
 	importConnection(e, t) {
 		let n = e.connections.types.get(t.type);
 		if (n) {
-			let r = new I(e, n, t.start ? e.ports.get(t.start) : void 0, t.end ? e.ports.get(t.end) : void 0, t.id);
+			let r = new F(e, n, t.start ? e.ports.get(t.start) : void 0, t.end ? e.ports.get(t.end) : void 0, t.id);
 			return e.connections.add(r), r.startLabel = t.startLabel, r.middleLabel = t.middleLabel, r.endLabel = t.endLabel, r.points = t.points, t.data && r.valueSet.setValues(t.data), t.collabMeta && (r.selfRemoved = t.collabMeta.selfRemoved, r.selfRemovedTimestamp = t.collabMeta.selfRemovedTimestamp, r.valueSet.setTimestamps(t.collabMeta.dataTimestamps)), r.updateInView(), r.raise(), r;
 		}
 	}
 	importLabelCollabMeta(e, t) {
 		e && t && (e.selfRemoved = t.selfRemoved, e.selfRemovedTimestamp = t.selfRemovedTimestamp, e.textTimestamp = t.textTimestamp);
 	}
-}, st = class e {
+}, mt = 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;
 	}
 	do() {
 		let e = this.canvas.model.nodes.new(this.typeId, this.coords, this.id);
-		this.parentId !== void 0 && this.canvas.model.nodes.get(this.parentId)?.addChild(e), e.label && (e.label.text = this.label || ""), this.values === void 0 ? e.valueSet.resetValues() : e.valueSet.setValues(Ce({
+		this.parentId !== void 0 && this.canvas.model.nodes.get(this.parentId)?.addChild(e), e.label && (e.label.text = this.label || ""), this.values === void 0 ? e.valueSet.resetValues() : e.valueSet.setValues(we({
 			...e.valueSet.getValues(),
 			...this.values
 		}));
@@ -1730,13 +1922,13 @@ 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 {
+}, ht = 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;
 	}
 	do() {
 		let e = this.canvas.model.nodes.get(this.nodeId);
-		e && Oe(this.timestamp, e.geometryTimestamp) && (this.copyColumnIndex !== void 0 && e.copySectionColumn(this.copyColumnIndex), this.copyRowIndex !== void 0 && e.copySectionRow(this.copyRowIndex), this.removeColumnIndex !== void 0 && e.removeSectionColumn(this.removeColumnIndex), this.removeRowIndex !== void 0 && e.removeSectionRow(this.removeRowIndex), e.geometryTimestamp = this.timestamp);
+		e && De(this.timestamp, e.geometryTimestamp) && (this.copyColumnIndex !== void 0 && e.copySectionColumn(this.copyColumnIndex), this.copyRowIndex !== void 0 && e.copySectionRow(this.copyRowIndex), this.removeColumnIndex !== void 0 && e.removeSectionColumn(this.removeColumnIndex), this.removeRowIndex !== void 0 && e.removeSectionRow(this.removeRowIndex), e.geometryTimestamp = this.timestamp);
 	}
 	serialize() {
 		return {
@@ -1752,14 +1944,14 @@ 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 {
+}, gt = class e {
 	constructor(e, t, n) {
 		this.canvas = e, this.to = t, this.timestamp = n;
 	}
 	do() {
 		for (let e in this.to) {
 			let t = this.canvas.model.nodes.get(e, !0);
-			if (t && Oe(this.timestamp, t.geometryTimestamp)) {
+			if (t && De(this.timestamp, t.geometryTimestamp)) {
 				let n = this.to[e];
 				t.move([n[0], n[1]]), t.geometryTimestamp = this.timestamp;
 			}
@@ -1775,14 +1967,14 @@ 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 {
+}, _t = class e {
 	constructor(e, t, n, r) {
 		this.canvas = e, this.nodeIds = t, this.delta = n, this.timestamp = r;
 	}
 	do() {
 		for (let e of this.nodeIds) {
 			let t = this.canvas.model.nodes.get(e, !0);
-			t && Oe(this.timestamp, t.geometryTimestamp) && (t.move([t.coords[0] + this.delta[0], t.coords[1] + this.delta[1]]), t.parent?.fitToChild(t), t.geometryTimestamp = this.timestamp);
+			t && De(this.timestamp, t.geometryTimestamp) && (t.move([t.coords[0] + this.delta[0], t.coords[1] + this.delta[1]]), t.parent?.fitToChild(t), t.geometryTimestamp = this.timestamp);
 		}
 	}
 	serialize() {
@@ -1802,7 +1994,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}
 	do() {
 		let e = this.canvas.model.nodes.get(this.nodeId, !0);
-		if (e && Oe(this.timestamp, e.geometryTimestamp)) {
+		if (e && De(this.timestamp, e.geometryTimestamp)) {
 			e.setGeometry(this.to), e.label?.fit && this.canvas.fitFieldRootInView(e.label.id, e.label.shrink);
 			for (let t of e.sections) t.label?.fit && this.canvas.fitFieldRootInView(t.label.id, t.label.shrink);
 			e.parent?.fitToChild(e), e.geometryTimestamp = this.timestamp;
@@ -1819,13 +2011,13 @@ 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 {
+}, vt = class e {
 	constructor(e, t, n, r, i) {
 		this.canvas = e, this.childId = t, this.parentId = n, this.childGeometry = r, this.timestamp = i;
 	}
 	do() {
 		let e = this.canvas.model.nodes.get(this.childId, !0), t = this.parentId === void 0 ? void 0 : this.canvas.model.nodes.get(this.parentId, !0);
-		e && (this.parentId === void 0 || t) && Oe(this.timestamp, e.geometryTimestamp) && (e.parent?.removeChild(e), e.setGeometry(this.childGeometry), t?.addChild(e));
+		e && (this.parentId === void 0 || t) && De(this.timestamp, e.geometryTimestamp) && (e.parent?.removeChild(e), e.setGeometry(this.childGeometry), t?.addChild(e));
 	}
 	serialize() {
 		return {
@@ -1839,7 +2031,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 {
+}, yt = class e {
 	constructor(e, t, n, r, i) {
 		this.canvas = e, this.id = t, this.typeId = n, this.startId = r, this.endId = i;
 	}
@@ -1859,13 +2051,13 @@ 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 {
+}, bt = class e {
 	constructor(e, t, n, r) {
 		this.canvas = e, this.fieldId = t, this.to = n, this.timestamp = r;
 	}
 	do() {
 		let e = this.canvas.model.fields.get(this.fieldId, !0);
-		e && Oe(this.timestamp, e.textTimestamp) && (e.text = this.to, e.textTimestamp = this.timestamp);
+		e && De(this.timestamp, e.textTimestamp) && (e.text = this.to, e.textTimestamp = this.timestamp);
 	}
 	serialize() {
 		return {
@@ -1878,7 +2070,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 {
+}, xt = class e {
 	constructor(e, t, n, r) {
 		this.canvas = e, this.id = t, this.to = n, this.timestamp = r;
 	}
@@ -1899,12 +2091,12 @@ 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 {
+}, St = 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;
 	}
 	doOne(e) {
-		e && Oe(this.timestamp, e.selfRemovedTimestamp) && (e.selfRemoved = this.selfRemoved, e.selfRemovedTimestamp = this.timestamp);
+		e && De(this.timestamp, e.selfRemovedTimestamp) && (e.selfRemoved = this.selfRemoved, e.selfRemovedTimestamp = this.timestamp);
 	}
 	do() {
 		for (let e of this.nodeIds) this.doOne(this.canvas.model.nodes.get(e, !0));
@@ -1929,12 +2121,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 {
+}, Ct = class e {
 	constructor(e, t, n) {
 		this.canvas = e, this.nodes = t, this.connections = n;
 	}
 	do() {
-		let e = new ot();
+		let e = new pt();
 		this.canvas.userSelection.clear();
 		for (let t of this.nodes) {
 			let n = e.importNode(this.canvas.model, t);
@@ -1955,15 +2147,15 @@ 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 {
+}, wt = class {
 	constructor(e) {
-		this.isInRoom = !1, this.canvas = e, this.replicaId = xe();
+		this.isInRoom = !1, this.canvas = e, this.replicaId = Se();
 	}
 	freshTimestamp() {
 		return this.canvas.model.logicalClock++, [this.canvas.model.logicalClock, this.replicaId];
 	}
 	freshId() {
-		return "id" + xe();
+		return "id" + Se();
 	}
 	doCollaboratively(e) {
 		if (e.do(), this.onSend) {
@@ -1974,49 +2166,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();
+				mt.deserialize(this.canvas, e).do();
 				break;
 			case "addSection":
-				ct.deserialize(this.canvas, e).do();
+				ht.deserialize(this.canvas, e).do();
 				break;
 			case "applyLayout":
-				lt.deserialize(this.canvas, e).do();
+				gt.deserialize(this.canvas, e).do();
 				break;
 			case "move":
-				ut.deserialize(this.canvas, e).do();
+				_t.deserialize(this.canvas, e).do();
 				break;
 			case "setGeometry":
 				G.deserialize(this.canvas, e).do();
 				break;
 			case "setParent":
-				dt.deserialize(this.canvas, e).do();
+				vt.deserialize(this.canvas, e).do();
 				break;
 			case "addConnection":
-				ft.deserialize(this.canvas, e).do();
+				yt.deserialize(this.canvas, e).do();
 				break;
 			case "editField":
-				pt.deserialize(this.canvas, e).do();
+				bt.deserialize(this.canvas, e).do();
 				break;
 			case "updateValues":
-				mt.deserialize(this.canvas, e).do();
+				xt.deserialize(this.canvas, e).do();
 				break;
 			case "setSelfRemoved":
-				K.deserialize(this.canvas, e).do();
+				St.deserialize(this.canvas, e).do();
 				break;
 			case "paste":
-				ht.deserialize(this.canvas, e).do();
+				Ct.deserialize(this.canvas, e).do();
 				break;
 			default: console.error("Unknown CollabAction type, skipping:", e);
 		}
 	}
-}, _t = class {
+}, Tt = 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 +2221,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 +2234,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 {
+}({}), Et = 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 mt(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 +2252,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 St(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 +2260,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 St(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 {
+}, Dt = 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 _t(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 _t(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 +2318,12 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		}
 		return e !== void 0;
 	}
-}, xt = class {
+}, Ot = 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 vt(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 +2331,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 vt(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 +2341,35 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	redo() {
 		return this.do();
 	}
-}, St = class {
+}, kt = 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 yt(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 St(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 St(this.canvas, [], [], [], [this.id], [], !1, this.canvas.collabEngine.freshTimestamp());
 		return this.canvas.collabEngine.doCollaboratively(t), e === void 0;
 	}
-}, Ct = class {
+}, At = 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 bt(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 bt(this.canvas, this.fieldId, this.from, this.canvas.collabEngine.freshTimestamp());
 			this.canvas.collabEngine.doCollaboratively(t);
 		}
 		return e !== void 0;
@@ -2188,47 +2378,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 bt(this.canvas, this.fieldId, this.to, this.canvas.collabEngine.freshTimestamp());
 			this.canvas.collabEngine.doCollaboratively(t);
 		}
 		return e !== void 0;
 	}
-}, wt = class {
+}, jt = 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 xt(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 xt(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 xt(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 {
+}, Mt = 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 St(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 St(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 {
+}, Nt = class {
 	constructor(e, t, n, r) {
 		this.canvas = e, this.nodes = t, this.connections = n, this.coords = r;
 	}
@@ -2254,233 +2444,208 @@ 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 Ct(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 St(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 St(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 {
+}, Pt = class {
 	constructor(e) {
 		this.type = e, this.defaultPrevented = !1;
 	}
 	preventDefault() {
 		this.defaultPrevented = !0;
 	}
-}, Ot = /* @__PURE__ */ function(e) {
+}, Ft = /* @__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 {
+}({}), It = class extends Pt {
 	constructor(e, t) {
-		super(Ot.Zoom), this.coords = e, this.zoom = t;
+		super(0), this.coords = e, this.zoom = t;
 	}
-}, At = class extends Dt {
+}, Lt = class extends Pt {
 	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 {
+}, Rt = class extends Pt {
 	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 Pt {
 	constructor(e, t) {
-		super(Ot.Selection), this.targets = e, this.selected = t;
-	}
-}, X = class extends Dt {
-	constructor(e) {
-		super(Ot.Highlight), this.target = e;
+		super(3), this.targets = e, this.selected = t;
 	}
-}, Mt = class extends Dt {
+}, Y = class extends Pt {
 	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();
+		super(4), this.target = e;
 	}
-	move(e) {
-		this.coords = e, this.updateInView();
-	}
-	getPriority() {
-		return this.priority;
-	}
-}, It = class extends N {
+}, zt = class extends Pt {
 	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 {
+}, Bt = 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 Ze(this), this.sections = new qe(this), this.ports = new ft(this), this.connections = new Ie(this), this.fields = new Re(this), this.objects = new ot(this), this.decorators = new it(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 Me(new Ee(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, [
+}, Vt = (e) => !!e.button, Ht = (e, t, n, r, i, a, o, s, c) => re(e, [
 	t,
 	...a,
 	n
-], r, i, Math.max(10, s || 0, c || 0) * o), Z = (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) => {
-	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);
+], r, i, Math.max(10, s ?? 0, c ?? 0) * o), X = (t) => {
+	t ? e.select("body").style("cursor", t) : e.select("body").style("cursor", k.Auto);
+}, Ut = (e) => e instanceof W ? e : e instanceof U ? e.node ?? e : e.rootElement instanceof W || e.rootElement instanceof U || e.rootElement instanceof dt ? Ut(e.rootElement) : e, Wt = (e) => {
+	if (e instanceof W) return e.type.resizerX.mode !== I.Never;
+	if (e instanceof U) {
+		if (e.type?.resizerX !== void 0) return e.type.resizerX.mode !== I.Never;
+		if (e.node !== void 0) return Wt(e.node);
 	}
 	return !1;
-}, Vt = (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);
+}, Gt = (e) => {
+	if (e instanceof W) return e.type.resizerY.mode !== I.Never;
+	if (e instanceof U) {
+		if (e.type?.resizerY !== void 0) return e.type.resizerY.mode !== I.Never;
+		if (e.node !== void 0) return Gt(e.node);
 	}
 	return !1;
-}, Ht = (e) => {
+}, Kt = (e) => {
+	if (e instanceof W) return e.type.resizerXY.mode !== I.Never;
+	if (e instanceof U) {
+		if (e.type?.resizerXY !== void 0) return e.type.resizerXY.mode !== I.Never;
+		if (e.node !== void 0) return Kt(e.node);
+	}
+	return !1;
+}, qt = (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 = {
+}, Jt = {
 	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 = {
+}, Yt = (e) => {
+	e.filter(".shaped-look").select("path").attr("d", (e) => oe(e.look.shape ?? ae.Rectangle, 0, 0, e.width, e.height)).attr("fill", (e) => e.look.fillColor ?? Jt.fillColor).attr("stroke", (e) => e.look.borderColor ?? Jt.borderColor).attr("stroke-width", (e) => `${e.look.borderThickness ?? Jt.borderThickness}px`).attr("stroke-dasharray", (e) => ie(e.look.borderStyle ?? Jt.borderStyle, e.type?.defaultLook?.borderThickness ?? e.look?.borderThickness ?? Jt.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);
+}, Xt = {
+	style: "solid",
+	color: "#FFFFFF"
+}, Zt = {
 	enabled: !0,
+	style: "none",
+	snap: !1,
+	spacing: 1
+}, Qt = {
+	...Zt,
 	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)"
+}, $t = (e, t) => {
+	switch (t?.style ?? "") {
+		case "image": return e.append("image").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("href", t.image).attr("preserveAspectRatio", "none");
+		default: return e.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%").attr("fill", t.color ?? "#FFFFFF").attr("stroke-width", "0");
+	}
+}, en = (e) => {
+	if (!e) return Qt;
+	switch (e.style) {
+		case "dots":
+		case "lines": return {
+			...Qt,
+			...e
+		};
+		default: return {
+			...Zt,
+			...e
+		};
+	}
+}, tn = (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;
+}, nn = 96, $ = 32, rn = 128, an = Math.PI / 4, on = 100, sn = { customButtons: [] }, cn = class {
 	constructor(e, t) {
-		this.canvas = e, this.config = t || Zt;
+		this.canvas = e, this.config = t || sn;
 	}
 	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] - rn}px`).attr("y", `${n[1] - rn}px`).attr("width", `${2 * rn}px`).attr("height", `${2 * rn}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 || sn.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) * an, 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(on).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) * nn - $ + rn}px`).style("top", `${-Math.cos(t) * nn - $ + rn}px`);
 			});
 		}
 	}
 	close() {
 		this.contextMenuContainer?.remove(), this.contextMenuContainer = void 0;
 	}
-}, $t = class extends N {
+}, ln = class extends N {
 	constructor(e, t = !0) {
 		super(), this.focus = void 0, this.canvas = e, this.highlightSections = t;
 	}
@@ -2488,7 +2653,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 rt) && e.rootElement ? this.focusOn(e.rootElement) : this.add(e);
 	}
 	add(e) {
 		if (super.add(e), e instanceof W) {
@@ -2499,12 +2664,12 @@ 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.updateNodesInView(e.id);
-		} else if (e instanceof H) if (!this.highlightSections && e.node) this.add(e.node);
+		} else if (e instanceof U) if (!this.highlightSections && e.node) this.add(e.node);
 		else {
 			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 dt ? (e.label && (super.add(e.label), this.canvas.updateFieldsInView(e.label.id)), this.canvas.updatePortsInView(e.id)) : e instanceof F && this.canvas.updateConnectionsInView(e.id);
 	}
 	clear() {
 		for (; this.entities.length > 0;) {
@@ -2513,7 +2678,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		}
 		this.focus = void 0;
 	}
-}, en = class {
+}, un = class {
 	export(e, t = !1) {
 		let n = {
 			name: e.name,
@@ -2523,6 +2688,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 +2698,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 +2732,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 +2779,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,14 +2842,14 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			textTimestamp: e.textTimestamp
 		} } : {};
 	}
-}, tn = "Diagram properties", nn = class extends N {
+}, dn = "Diagram properties", fn = 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 ? dn : 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();
+		if (!this.contains(e.id) && (this.length === 0 ? this.propertyEditorSelection === void 0 && (e instanceof W || e instanceof F) ? this.openInPropertyEditor(e) : this.propertyEditorSelection === void 0 && e instanceof U ? 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();
 	}
 	remove(e) {
 		let t = this.get(e);
@@ -2662,8 +2870,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 U ? t.push(a.id) : a instanceof dt ? n.push(a.id) : a instanceof F ? r.push(a.id) : a instanceof Le && i.push(a.id);
+			let a = new Mt(this.canvas, e, t, n, r, i);
 			a.do(), this.canvas.actionStack.add(a);
 		}
 	}
@@ -2672,8 +2880,8 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			type: "daga-user-selection",
 			nodes: [],
 			connections: []
-		}, t = new en();
-		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));
+		}, t = new un();
+		for (let n of this.all()) n instanceof W && e.nodes.push(t.exportNode(n, !1)), n instanceof F && e.connections.push(t.exportConnection(n, !1));
 		navigator.clipboard.writeText(JSON.stringify(e));
 	}
 	cutToClipboard() {
@@ -2684,7 +2892,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 Nt(this.canvas, n.nodes, n.connections, e);
 				this.canvas.actionStack.add(r), r.do();
 			} catch {
 				return;
@@ -2696,16 +2904,16 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		let n = this.canvas.parentComponent?.propertyEditor;
 		if (n === void 0) return;
 		let r = e?.valueSet;
-		r ? (this.propertyEditorSelection = e, t && (this.propertyEditorValues = Ce(r.getValues())), n && (e instanceof W || e instanceof I ? (e instanceof W ? e.name ? n.title = `${e.type.name}: ${e.name}` : n.title = e.type.name : e instanceof I && (n.title = e.type.name), n.valueSet = void 0, n.valueSet = r) : (n.title = this.diagramPropertiesText, n.valueSet = void 0, n.valueSet = r))) : (this.propertyEditorSelection = void 0, this.propertyEditorValues = void 0, n && (n.title = "", n.valueSet = void 0));
+		r ? (this.propertyEditorSelection = e, t && (this.propertyEditorValues = we(r.getValues())), n && (e instanceof W || e instanceof F ? (e instanceof W ? e.name ? n.title = `${e.type.name}: ${e.name}` : n.title = e.type.name : e instanceof F && (n.title = e.type.name), n.valueSet = void 0, n.valueSet = r) : (n.title = this.diagramPropertiesText, n.valueSet = void 0, n.valueSet = r))) : (this.propertyEditorSelection = void 0, this.propertyEditorValues = void 0, n && (n.title = "", n.valueSet = void 0));
 	}
 	makeUpdateValuesAction() {
 		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 e = this.propertyEditorSelection instanceof Bt ? void 0 : this.propertyEditorSelection.id;
+		if (ke(this.propertyEditorValues, this.propertyEditorSelection?.valueSet.getValues())) return;
+		let t = this.propertyEditorValues, n = we(this.propertyEditorSelection?.valueSet.getValues()), [r, i] = Ae(t, n, this.propertyEditorSelection?.valueSet), a = new jt(this.canvas, e, r, i);
 		a.do(), this.canvas.actionStack.add(a), this.propertyEditorValues = n;
 	}
-}, rn = "diagram-connection-unfinished", an = class n {
+}, pn = "diagram-connection-unfinished", mn = class n {
 	static {
 		this.canvasCount = 0;
 	}
@@ -2716,15 +2924,17 @@ 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) {
-			let t = new qe({
+		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 Bt(this, void 0, i.name || "unnamed", "", i.type || "", i.properties || []), this.userSelection = new fn(this, i.components?.propertyEditor?.title), this.userHighlight = new ln(this, i.canvas?.highlightSections !== !1), this.contextMenu = new cn(this, i.canvas?.contextMenu), this.backgroundConfig = i.canvas?.background ?? Xt, this.gridConfig = en(i.canvas?.grid), this.ancillaryGridsConfig = [];
+		for (let e = 0; e < (i.canvas?.ancillaryGrids?.length || 0); ++e) this.ancillaryGridsConfig.push(en(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 Tt(this, 25), this.collabEngine = new wt(this), i.nodeTypes) for (let e of i.nodeTypes) {
+			let t = new Xe({
 				...i.nodeTypeDefaults,
 				...e
 			});
 			this.model.nodes.types.add(t);
 		}
 		if (i.portTypes) for (let e of i.portTypes) {
-			let t = new rt({
+			let t = new ut({
 				...i.portTypeDefaults,
 				...e
 			});
@@ -2732,7 +2942,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		}
 		if (i.connectionTypes) {
 			for (let e of i.connectionTypes) {
-				let t = new Pe({
+				let t = new Fe({
 					...i.connectionTypeDefaults,
 					...e
 				});
@@ -2760,73 +2970,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 Rt(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 Lt(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(k.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(k.ZoomIn), e.sourceEvent.wheelDelta < 0 && X(k.ZoomOut)) : e.sourceEvent.type === S.MouseMove && X(k.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 It([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($t(r, this.backgroundConfig).attr("class", "daga-background"));
+		for (let e = 0; e < this.ancillaryGridsConfig.length; ++e) a.push(tn(this, r, i, this.ancillaryGridPatternIds[e], this.ancillaryGridsConfig[e]));
+		a.push(tn(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 || Vt(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;
@@ -2838,7 +3056,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		isNaN(e) || this.zoomBehavior.scaleTo(this.selectCanvasView(), e);
 	}
 	getViewCoordinates() {
-		let e = this.selectCanvasView()?.select("rect")?.node()?.getBBox();
+		let e = this.selectCanvasView()?.select(".daga-background")?.node()?.getBBox();
 		return [((e.width + e.x) / 2 - this.zoomTransform.x) / this.zoomTransform.k, ((e.height + e.y) / 2 - this.zoomTransform.y) / this.zoomTransform.k];
 	}
 	translateBy(e, t) {
@@ -2870,12 +3088,17 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}
 	center(e, t, n) {
 		if (this.model.nodes.length > 0) {
-			let r = this.selectCanvasView().select("rect").node()?.getBBox(), i = e?.map((e) => this.model.nodes.get(e)).filter((e) => !!e) || this.model.nodes.all(), a = Math.min(...i.map((e) => e.coords[0])), o = Math.max(...i.map((e) => e.coords[0] + e.width)), s = (a + o) / 2, c = o - a, l = r.width, u = Math.min(...i.map((e) => e.coords[1])), d = Math.max(...i.map((e) => e.coords[1] + e.height)), f = (u + d) / 2, p = d - u, m = r.height, h = Math.min(l / c, m / p, t === void 0 ? 1 : t);
+			let r = this.selectCanvasView().select(".daga-background").node()?.getBBox();
+			if (!r.width || !r.height) return;
+			let i = e?.map((e) => this.model.nodes.get(e)).filter((e) => !!e) || this.model.nodes.all(), a = Math.min(...i.map((e) => e.coords[0])), o = Math.max(...i.map((e) => e.coords[0] + e.width)), s = (a + o) / 2, c = o - a, l = r.width, u = Math.min(...i.map((e) => e.coords[1])), d = Math.max(...i.map((e) => e.coords[1] + e.height)), f = (u + d) / 2, p = d - u, m = r.height, h = Math.min(l / c, m / p, t === void 0 ? 1 : t);
 			this.zoomAndPanTo(s, f, h, n);
 		}
 	}
 	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,255 +3128,391 @@ 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${Wt(e) ? " resizable-x" : ""}${Gt(e) ? " resizable-y" : ""}${Kt(e) ? " resizable-xy" : ""} ${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 Rt(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 Lt(e, t);
 			this.diagramEvent$.next(n);
-		}).call(e.drag().filter((e) => (this.secondaryButton = Rt(e), !0)).on(w.Start, (e, t) => {
+		}).call(e.drag().filter((e) => (this.secondaryButton = Vt(e), !0)).on(w.Start, (e, t) => {
 			this.multipleSelectionOn || this.secondaryButton ? this.startMultipleSelection(e) : this.startMovingNode(e, t);
 		}).on(w.Drag, (e, t) => {
 			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);
+		})), qt(i), i.filter(".resizable-x").append("rect").attr("class", "left-resizer").on(S.MouseOver, (e, t) => {
+			this.canUserPerformAction(K.StretchNode) && t.getResizableX() && !t.removed && X(k.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(k.EWResize), this.currentAction = new q(this, K.StretchNode, t.id, t.getGeometry(), t.getGeometry())) : X(k.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();
-		})), 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);
+			X();
+		})), i.filter(".resizable-x").append("rect").attr("class", "right-resizer").on(S.MouseOver, (e, t) => {
+			this.canUserPerformAction(K.StretchNode) && t.getResizableX() && !t.removed && X(k.EWResize);
 		}).on(S.MouseOut, (e, t) => {
-			this.canUserPerformAction(q.StretchNode) && t.getResizableY() && !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.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.getResizableX() && !t.removed ? (X(k.EWResize), this.currentAction = new q(this, K.StretchNode, t.id, t.getGeometry(), t.getGeometry())) : X(k.NotAllowed);
 		}).on(w.Drag, (e, t) => {
-			if (this.canUserPerformAction(q.StretchNode) && t.getResizableY() && !t.removed) {
+			if (this.canUserPerformAction(K.StretchNode) && t.getResizableX() && !t.removed) {
 				let n = this.getPointerLocationRelativeToCanvas(e);
-				t.stretch(p.Top, t.coords[1] - n[1]);
+				t.stretch(p.Right, n[0] - (t.coords[0] + t.width));
 			}
 		}).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.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.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[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();
-		})), 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);
+			X();
+		})), i.filter(".resizable-y").append("rect").attr("class", "top-resizer").on(S.MouseOver, (e, t) => {
+			this.canUserPerformAction(K.StretchNode) && t.getResizableY() && !t.removed && X(k.NSResize);
 		}).on(S.MouseOut, (e, t) => {
-			this.canUserPerformAction(q.StretchNode) && t.getResizableX() && !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.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.getResizableY() && !t.removed ? (X(k.NSResize), this.currentAction = new q(this, K.StretchNode, t.id, t.getGeometry(), t.getGeometry())) : X(k.NotAllowed);
 		}).on(w.Drag, (e, t) => {
-			if (this.canUserPerformAction(q.StretchNode) && t.getResizableX() && !t.removed) {
+			if (this.canUserPerformAction(K.StretchNode) && t.getResizableY() && !t.removed) {
 				let n = this.getPointerLocationRelativeToCanvas(e);
-				t.stretch(p.Right, n[0] - (t.coords[0] + t.width));
+				t.stretch(p.Top, t.coords[1] - n[1]);
 			}
 		}).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.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[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[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();
-		})), 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);
+			X();
+		})), i.filter(".resizable-y").append("rect").attr("class", "bottom-resizer").on(S.MouseOver, (e, t) => {
+			this.canUserPerformAction(K.StretchNode) && t.getResizableY() && !t.removed && X(k.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(k.NSResize), this.currentAction = new q(this, K.StretchNode, t.id, t.getGeometry(), t.getGeometry())) : X(k.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.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;
+			}
+			X();
+		})), i.filter(".resizable-xy").append("rect").attr("class", "top-left-resizer").on(S.MouseOver, (e, t) => {
+			this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !t.removed && X(k.NWSEResize);
+		}).on(S.MouseOut, (e, t) => {
+			this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !t.removed && X();
+		}).call(e.drag().on(w.Start, (e, t) => {
+			this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !t.removed ? (X(k.NWSEResize), this.currentAction = new q(this, K.StretchNode, t.id, t.getGeometry(), t.getGeometry())) : X(k.NotAllowed);
+		}).on(w.Drag, (e, t) => {
+			if (this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !t.removed) {
+				let n = this.getPointerLocationRelativeToCanvas(e);
+				t.stretch(p.Left, t.coords[0] - n[0]), t.stretch(p.Top, t.coords[1] - n[1]);
+			}
+		}).on(w.End, (e, t) => {
+			if (this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !t.removed && this.currentAction instanceof q && this.currentAction.intent === K.StretchNode) {
+				let n = this.getPointerLocationRelativeToCanvas(e);
+				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]), 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;
+			}
+			X();
+		})), i.filter(".resizable-xy").append("rect").attr("class", "top-right-resizer").on(S.MouseOver, (e, t) => {
+			this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !t.removed && X(k.NESWResize);
+		}).on(S.MouseOut, (e, t) => {
+			this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !t.removed && X();
+		}).call(e.drag().on(w.Start, (e, t) => {
+			this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !t.removed ? (X(k.NESWResize), this.currentAction = new q(this, K.StretchNode, t.id, t.getGeometry(), t.getGeometry())) : X(k.NotAllowed);
+		}).on(w.Drag, (e, t) => {
+			if (this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !t.removed) {
+				let n = this.getPointerLocationRelativeToCanvas(e);
+				t.stretch(p.Right, n[0] - (t.coords[0] + t.width)), t.stretch(p.Top, t.coords[1] - n[1]);
+			}
+		}).on(w.End, (e, t) => {
+			if (this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !t.removed && this.currentAction instanceof q && this.currentAction.intent === K.StretchNode) {
+				let n = this.getPointerLocationRelativeToCanvas(e);
+				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.Right, n[0] - (t.coords[0] + t.width)), 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;
+			}
+			X();
+		})), i.filter(".resizable-xy").append("rect").attr("class", "bottom-left-resizer").on(S.MouseOver, (e, t) => {
+			this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !t.removed && X(k.NESWResize);
+		}).on(S.MouseOut, (e, t) => {
+			this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !t.removed && X();
+		}).call(e.drag().on(w.Start, (e, t) => {
+			this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !t.removed ? (X(k.NESWResize), this.currentAction = new q(this, K.StretchNode, t.id, t.getGeometry(), t.getGeometry())) : X(k.NotAllowed);
+		}).on(w.Drag, (e, t) => {
+			if (this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !t.removed) {
+				let n = this.getPointerLocationRelativeToCanvas(e);
+				t.stretch(p.Left, t.coords[0] - n[0]), t.stretch(p.Bottom, n[1] - (t.coords[1] + t.height));
+			}
+		}).on(w.End, (e, t) => {
+			if (this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !t.removed && this.currentAction instanceof q && this.currentAction.intent === K.StretchNode) {
+				let n = this.getPointerLocationRelativeToCanvas(e);
+				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]), 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;
+			}
+			X();
+		})), i.filter(".resizable-xy").append("rect").attr("class", "bottom-right-resizer").on(S.MouseOver, (e, t) => {
+			this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !t.removed && X(k.NWSEResize);
+		}).on(S.MouseOut, (e, t) => {
+			this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !t.removed && X();
+		}).call(e.drag().on(w.Start, (e, t) => {
+			this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !t.removed ? (X(k.NWSEResize), this.currentAction = new q(this, K.StretchNode, t.id, t.getGeometry(), t.getGeometry())) : X(k.NotAllowed);
+		}).on(w.Drag, (e, t) => {
+			if (this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !t.removed) {
+				let n = this.getPointerLocationRelativeToCanvas(e);
+				t.stretch(p.Right, n[0] - (t.coords[0] + t.width)), t.stretch(p.Bottom, n[1] - (t.coords[1] + t.height));
+			}
+		}).on(w.End, (e, t) => {
+			if (this.canUserPerformAction(K.StretchNode) && t.getResizableXY() && !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[0], n[1] - t.type.snapToGridOffset[1]]), n[0] += t.type.snapToGridOffset[0], n[1] += t.type.snapToGridOffset[1]), t.stretch(p.Right, n[0] - (t.coords[0] + t.width)), 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), Yt(a), a.filter(".resizable-x").select("rect.left-resizer").style("pointer-events", (e) => e.getResizableX() ? "initial" : "none").attr("x", (e) => -e.getResizerX().outerMargin).attr("y", (e) => e.getResizerXY().thickness - e.getResizerXY().outerMargin).attr("width", (e) => e.getResizerX().thickness).attr("height", (e) => e.height - e.getResizerXY().thickness * 2 + e.getResizerXY().outerMargin * 2).attr("fill", (e) => e.getResizerX().getLook(e).fillColor || "transparent").attr("stroke", (e) => e.getResizerX().getLook(e).borderColor || "transparent").attr("stroke-width", (e) => e.getResizerX().getLook(e).borderThickness || 0), a.filter(".resizable-x").select("rect.right-resizer").style("pointer-events", (e) => e.getResizableX() ? "initial" : "none").attr("x", (e) => e.width - e.getResizerX().thickness + e.getResizerX().outerMargin).attr("y", (e) => e.getResizerXY().thickness - e.getResizerXY().outerMargin).attr("width", (e) => e.getResizerX().thickness).attr("height", (e) => e.height - e.getResizerXY().thickness * 2 + e.getResizerXY().outerMargin * 2).attr("fill", (e) => e.getResizerX().getLook(e).fillColor || "transparent").attr("stroke", (e) => e.getResizerX().getLook(e).borderColor || "transparent").attr("stroke-width", (e) => e.getResizerX().getLook(e).borderThickness || 0), a.filter(".resizable-y").select("rect.top-resizer").style("pointer-events", (e) => e.getResizableY() ? "initial" : "none").attr("x", (e) => e.getResizerXY().thickness - e.getResizerXY().outerMargin).attr("y", (e) => -e.getResizerY().outerMargin).attr("width", (e) => e.width - e.getResizerXY().thickness * 2 + e.getResizerXY().outerMargin * 2).attr("height", (e) => e.getResizerY().thickness).attr("fill", (e) => e.getResizerY().getLook(e).fillColor || "transparent").attr("stroke", (e) => e.getResizerY().getLook(e).borderColor || "transparent").attr("stroke-width", (e) => e.getResizerY().getLook(e).borderThickness || 0), a.filter(".resizable-y").select("rect.bottom-resizer").style("pointer-events", (e) => e.getResizableY() ? "initial" : "none").attr("x", (e) => e.getResizerXY().thickness - e.getResizerXY().outerMargin).attr("y", (e) => e.height - e.getResizerY().thickness + e.getResizerY().outerMargin).attr("width", (e) => e.width - e.getResizerXY().thickness * 2 + e.getResizerXY().outerMargin * 2).attr("height", (e) => e.getResizerY().thickness).attr("fill", (e) => e.getResizerY().getLook(e).fillColor || "transparent").attr("stroke", (e) => e.getResizerY().getLook(e).borderColor || "transparent").attr("stroke-width", (e) => e.getResizerY().getLook(e).borderThickness || 0), a.filter(".resizable-xy").select("rect.top-left-resizer").style("pointer-events", (e) => e.getResizableXY() ? "initial" : "none").attr("x", (e) => -e.getResizerXY().outerMargin).attr("y", (e) => -e.getResizerXY().outerMargin).attr("width", (e) => e.getResizerXY().thickness).attr("height", (e) => e.getResizerXY().thickness).attr("fill", (e) => e.getResizerXY().getLook(e).fillColor || "transparent").attr("stroke", (e) => e.getResizerXY().getLook(e).borderColor || "transparent").attr("stroke-width", (e) => e.getResizerXY().getLook(e).borderThickness || 0), a.filter(".resizable-xy").select("rect.top-right-resizer").style("pointer-events", (e) => e.getResizableXY() ? "initial" : "none").attr("x", (e) => e.width - e.getResizerXY().thickness + e.getResizerXY().outerMargin).attr("y", (e) => -e.getResizerXY().outerMargin).attr("width", (e) => e.getResizerXY().thickness).attr("height", (e) => e.getResizerXY().thickness).attr("fill", (e) => e.getResizerXY().getLook(e).fillColor || "transparent").attr("stroke", (e) => e.getResizerXY().getLook(e).borderColor || "transparent").attr("stroke-width", (e) => e.getResizerXY().getLook(e).borderThickness || 0), a.filter(".resizable-xy").select("rect.bottom-left-resizer").style("pointer-events", (e) => e.getResizableXY() ? "initial" : "none").attr("x", (e) => -e.getResizerXY().outerMargin).attr("y", (e) => e.height - e.getResizerXY().thickness + e.getResizerXY().outerMargin).attr("width", (e) => e.getResizerXY().thickness).attr("height", (e) => e.getResizerXY().thickness).attr("fill", (e) => e.getResizerXY().getLook(e).fillColor || "transparent").attr("stroke", (e) => e.getResizerXY().getLook(e).borderColor || "transparent").attr("stroke-width", (e) => e.getResizerXY().getLook(e).borderThickness || 0), a.filter(".resizable-xy").select("rect.bottom-right-resizer").style("pointer-events", (e) => e.getResizableXY() ? "initial" : "none").attr("x", (e) => e.width - e.getResizerXY().thickness + e.getResizerXY().outerMargin).attr("y", (e) => e.height - e.getResizerXY().thickness + e.getResizerXY().outerMargin).attr("width", (e) => e.getResizerXY().thickness).attr("height", (e) => e.getResizerXY().thickness).attr("fill", (e) => e.getResizerXY().getLook(e).fillColor || "transparent").attr("stroke", (e) => e.getResizerXY().getLook(e).borderColor || "transparent").attr("stroke-width", (e) => e.getResizerXY().getLook(e).borderThickness || 0);
 	}
 	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${Wt(e) ? " resizable-x" : ""}${Gt(e) ? " resizable-y" : ""}${Kt(e) ? " resizable-xy" : ""} ${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 = Ut(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 Rt(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 = Ut(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 Lt(e, t);
 			this.diagramEvent$.next(n);
-		}).call(e.drag().filter((e) => (this.secondaryButton = Rt(e), !0)).on(w.Start, (e, t) => {
+		}).call(e.drag().filter((e) => (this.secondaryButton = Vt(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(k.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(k.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);
+		})), qt(i), i.filter(".resizable-x").append("rect").attr("class", "left-resizer").on(S.MouseOver, (e, t) => {
+			this.canUserPerformAction(K.StretchSection) && t.getResizableX() && !t.removed && X(k.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(k.EWResize), this.currentAction = new q(this, K.StretchSection, t.node.id, t.node.getGeometry(), t.node.getGeometry())) : X(k.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();
-		})), 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);
+			X();
+		})), i.filter(".resizable-x").append("rect").attr("class", "right-resizer").on(S.MouseOver, (e, t) => {
+			this.canUserPerformAction(K.StretchSection) && t.getResizableX() && !t.removed && X(k.EWResize);
 		}).on(S.MouseOut, (e, t) => {
-			this.canUserPerformAction(q.StretchSection) && t.getResizableY() && !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.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.getResizableX() && !t.removed && t.node ? (X(k.EWResize), this.currentAction = new q(this, K.StretchSection, t.node.id, t.node.getGeometry(), t.node.getGeometry())) : X(k.NotAllowed);
 		}).on(w.Drag, (e, t) => {
-			if (this.canUserPerformAction(q.StretchSection) && t.getResizableY() && !t.removed && t.node) {
+			if (this.canUserPerformAction(K.StretchSection) && t.getResizableX() && !t.removed && t.node) {
 				let n = this.getPointerLocationRelativeToCanvas(e);
-				t.node.stretchSections(p.Top, t.coords[1] - n[1], t.indexXInNode, t.indexYInNode);
+				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.getResizableY() && !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.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.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();
-		})), 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);
+			X();
+		})), i.filter(".resizable-y").append("rect").attr("class", "top-resizer").on(S.MouseOver, (e, t) => {
+			this.canUserPerformAction(K.StretchSection) && t.getResizableY() && !t.removed && X(k.NSResize);
 		}).on(S.MouseOut, (e, t) => {
-			this.canUserPerformAction(q.StretchSection) && t.getResizableX() && !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.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.getResizableY() && !t.removed && t.node ? (X(k.NSResize), this.currentAction = new q(this, K.StretchSection, t.node.id, t.node.getGeometry(), t.node.getGeometry())) : X(k.NotAllowed);
 		}).on(w.Drag, (e, t) => {
-			if (this.canUserPerformAction(q.StretchSection) && t.getResizableX() && !t.removed && t.node) {
+			if (this.canUserPerformAction(K.StretchSection) && t.getResizableY() && !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);
+				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.getResizableX() && !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.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.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();
-		})), 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);
+			X();
+		})), i.filter(".resizable-y").append("rect").attr("class", "bottom-resizer").on(S.MouseOver, (e, t) => {
+			this.canUserPerformAction(K.StretchSection) && t.getResizableY() && !t.removed && X(k.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(k.NSResize), this.currentAction = new q(this, K.StretchSection, t.node.id, t.node.getGeometry(), t.node.getGeometry())) : X(k.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.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;
+			}
+			X();
+		})), i.filter(".resizable-xy").append("rect").attr("class", "top-left-resizer").on(S.MouseOver, (e, t) => {
+			this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !t.removed && X(k.NWSEResize);
+		}).on(S.MouseOut, (e, t) => {
+			this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !t.removed && X();
+		}).call(e.drag().on(w.Start, (e, t) => {
+			this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !t.removed && t.node ? (X(k.NWSEResize), this.currentAction = new q(this, K.StretchSection, t.node.id, t.node.getGeometry(), t.node.getGeometry())) : X(k.NotAllowed);
+		}).on(w.Drag, (e, t) => {
+			if (this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !t.removed && t.node) {
+				let n = this.getPointerLocationRelativeToCanvas(e);
+				t.node.stretchSections(p.Left, t.coords[0] - n[0], t.indexXInNode, t.indexYInNode), t.node.stretchSections(p.Top, t.coords[1] - n[1], t.indexXInNode, t.indexYInNode);
+			}
+		}).on(w.End, (e, t) => {
+			if (this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !t.removed && this.currentAction instanceof q && this.currentAction.intent === K.StretchSection && t.node) {
+				let n = this.getPointerLocationRelativeToCanvas(e);
+				this.gridConfig.snap && (n = this.getClosestGridPoint(n)), t.node.stretchSections(p.Left, t.coords[0] - n[0], t.indexXInNode, t.indexYInNode), 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;
+			}
+			X();
+		})), i.filter(".resizable-xy").append("rect").attr("class", "top-right-resizer").on(S.MouseOver, (e, t) => {
+			this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !t.removed && X(k.NESWResize);
+		}).on(S.MouseOut, (e, t) => {
+			this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !t.removed && X();
+		}).call(e.drag().on(w.Start, (e, t) => {
+			this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !t.removed && t.node ? (X(k.NESWResize), this.currentAction = new q(this, K.StretchSection, t.node.id, t.node.getGeometry(), t.node.getGeometry())) : X(k.NotAllowed);
+		}).on(w.Drag, (e, t) => {
+			if (this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !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), t.node.stretchSections(p.Top, t.coords[1] - n[1], t.indexXInNode, t.indexYInNode);
+			}
+		}).on(w.End, (e, t) => {
+			if (this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !t.removed && this.currentAction instanceof q && this.currentAction.intent === K.StretchSection && t.node) {
+				let n = this.getPointerLocationRelativeToCanvas(e);
+				this.gridConfig.snap && (n = this.getClosestGridPoint(n)), t.node.stretchSections(p.Right, n[0] - (t.coords[0] + t.width), t.indexXInNode, t.indexYInNode), 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;
+			}
+			X();
+		})), i.filter(".resizable-xy").append("rect").attr("class", "bottom-left-resizer").on(S.MouseOver, (e, t) => {
+			this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !t.removed && X(k.NESWResize);
+		}).on(S.MouseOut, (e, t) => {
+			this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !t.removed && X();
+		}).call(e.drag().on(w.Start, (e, t) => {
+			this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !t.removed && t.node ? (X(k.NESWResize), this.currentAction = new q(this, K.StretchSection, t.node.id, t.node.getGeometry(), t.node.getGeometry())) : X(k.NotAllowed);
+		}).on(w.Drag, (e, t) => {
+			if (this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !t.removed && t.node) {
+				let n = this.getPointerLocationRelativeToCanvas(e);
+				t.node.stretchSections(p.Left, t.coords[0] - n[0], t.indexXInNode, t.indexYInNode), t.node.stretchSections(p.Bottom, n[1] - (t.coords[1] + t.height), t.indexXInNode, t.indexYInNode);
+			}
+		}).on(w.End, (e, t) => {
+			if (this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !t.removed && this.currentAction instanceof q && this.currentAction.intent === K.StretchSection && t.node) {
+				let n = this.getPointerLocationRelativeToCanvas(e);
+				this.gridConfig.snap && (n = this.getClosestGridPoint(n)), t.node.stretchSections(p.Left, t.coords[0] - n[0], t.indexXInNode, t.indexYInNode), 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;
+			}
+			X();
+		})), i.filter(".resizable-xy").append("rect").attr("class", "bottom-right-resizer").on(S.MouseOver, (e, t) => {
+			this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !t.removed && X(k.NWSEResize);
+		}).on(S.MouseOut, (e, t) => {
+			this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !t.removed && X();
+		}).call(e.drag().on(w.Start, (e, t) => {
+			this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !t.removed && t.node ? (X(k.NWSEResize), this.currentAction = new q(this, K.StretchSection, t.node.id, t.node.getGeometry(), t.node.getGeometry())) : X(k.NotAllowed);
+		}).on(w.Drag, (e, t) => {
+			if (this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !t.removed && 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;
+				t.node.stretchSections(p.Right, n[0] - (t.coords[0] + t.width), t.indexXInNode, t.indexYInNode), t.node.stretchSections(p.Bottom, n[1] - (t.coords[1] + t.height), t.indexXInNode, t.indexYInNode);
 			}
-			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);
+		}).on(w.End, (e, t) => {
+			if (this.canUserPerformAction(K.StretchSection) && t.getResizableXY() && !t.removed && this.currentAction instanceof q && this.currentAction.intent === K.StretchSection && t.node) {
+				let n = this.getPointerLocationRelativeToCanvas(e);
+				this.gridConfig.snap && (n = this.getClosestGridPoint(n)), t.node.stretchSections(p.Right, n[0] - (t.coords[0] + t.width), t.indexXInNode, t.indexYInNode), 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;
+			}
+			X();
+		})), a.attr("transform", (e) => `translate(${e.coords[0]},${e.coords[1]})`).attr("opacity", (e) => e.removed ? .5 : 1), Yt(a), a.filter(".resizable-x").select("rect.left-resizer").style("pointer-events", (e) => e.getResizableX() ? "initial" : "none").attr("x", (e) => -e.getResizerX().outerMargin).attr("y", (e) => e.getResizerXY().thickness - e.getResizerXY().outerMargin).attr("width", (e) => e.getResizerX().thickness).attr("height", (e) => e.height - e.getResizerXY().thickness * 2 + e.getResizerXY().outerMargin * 2).attr("fill", (e) => e.getResizerX().getLook(e).fillColor || "transparent").attr("stroke", (e) => e.getResizerX().getLook(e).borderColor || "transparent").attr("stroke-width", (e) => e.getResizerX().getLook(e).borderThickness || 0), a.filter(".resizable-x").select("rect.right-resizer").style("pointer-events", (e) => e.getResizableX() ? "initial" : "none").attr("x", (e) => e.width - e.getResizerX().thickness + e.getResizerX().outerMargin).attr("y", (e) => e.getResizerXY().thickness - e.getResizerXY().outerMargin).attr("width", (e) => e.getResizerX().thickness).attr("height", (e) => e.height - e.getResizerXY().thickness * 2 + e.getResizerXY().outerMargin * 2).attr("fill", (e) => e.getResizerX().getLook(e).fillColor || "transparent").attr("stroke", (e) => e.getResizerX().getLook(e).borderColor || "transparent").attr("stroke-width", (e) => e.getResizerX().getLook(e).borderThickness || 0), a.filter(".resizable-y").select("rect.top-resizer").style("pointer-events", (e) => e.getResizableY() ? "initial" : "none").attr("x", (e) => e.getResizerXY().thickness - e.getResizerXY().outerMargin).attr("y", (e) => -e.getResizerY().outerMargin).attr("width", (e) => e.width - e.getResizerXY().thickness * 2 + e.getResizerXY().outerMargin * 2).attr("height", (e) => e.getResizerY().thickness).attr("fill", (e) => e.getResizerY().getLook(e).fillColor || "transparent").attr("stroke", (e) => e.getResizerY().getLook(e).borderColor || "transparent").attr("stroke-width", (e) => e.getResizerY().getLook(e).borderThickness || 0), a.filter(".resizable-y").select("rect.bottom-resizer").style("pointer-events", (e) => e.getResizableY() ? "initial" : "none").attr("x", (e) => e.getResizerXY().thickness - e.getResizerXY().outerMargin).attr("y", (e) => e.height - e.getResizerY().thickness + e.getResizerY().outerMargin).attr("width", (e) => e.width - e.getResizerXY().thickness * 2 + e.getResizerXY().outerMargin * 2).attr("height", (e) => e.getResizerY().thickness).attr("fill", (e) => e.getResizerY().getLook(e).fillColor || "transparent").attr("stroke", (e) => e.getResizerY().getLook(e).borderColor || "transparent").attr("stroke-width", (e) => e.getResizerY().getLook(e).borderThickness || 0), a.filter(".resizable-xy").select("rect.top-left-resizer").style("pointer-events", (e) => e.getResizableXY() ? "initial" : "none").attr("x", (e) => -e.getResizerXY().outerMargin).attr("y", (e) => -e.getResizerXY().outerMargin).attr("width", (e) => e.getResizerXY().thickness).attr("height", (e) => e.getResizerXY().thickness).attr("fill", (e) => e.getResizerXY().getLook(e).fillColor || "transparent").attr("stroke", (e) => e.getResizerXY().getLook(e).borderColor || "transparent").attr("stroke-width", (e) => e.getResizerXY().getLook(e).borderThickness || 0), a.filter(".resizable-xy").select("rect.top-right-resizer").style("pointer-events", (e) => e.getResizableXY() ? "initial" : "none").attr("x", (e) => e.width - e.getResizerXY().thickness + e.getResizerXY().outerMargin).attr("y", (e) => -e.getResizerXY().outerMargin).attr("width", (e) => e.getResizerXY().thickness).attr("height", (e) => e.getResizerXY().thickness).attr("fill", (e) => e.getResizerXY().getLook(e).fillColor || "transparent").attr("stroke", (e) => e.getResizerXY().getLook(e).borderColor || "transparent").attr("stroke-width", (e) => e.getResizerXY().getLook(e).borderThickness || 0), a.filter(".resizable-xy").select("rect.bottom-left-resizer").style("pointer-events", (e) => e.getResizableXY() ? "initial" : "none").attr("x", (e) => -e.getResizerXY().outerMargin).attr("y", (e) => e.height - e.getResizerXY().thickness + e.getResizerXY().outerMargin).attr("width", (e) => e.getResizerXY().thickness).attr("height", (e) => e.getResizerXY().thickness).attr("fill", (e) => e.getResizerXY().getLook(e).fillColor || "transparent").attr("stroke", (e) => e.getResizerXY().getLook(e).borderColor || "transparent").attr("stroke-width", (e) => e.getResizerXY().getLook(e).borderThickness || 0), a.filter(".resizable-xy").select("rect.bottom-right-resizer").style("pointer-events", (e) => e.getResizableXY() ? "initial" : "none").attr("x", (e) => e.width - e.getResizerXY().thickness + e.getResizerXY().outerMargin).attr("y", (e) => e.height - e.getResizerXY().thickness + e.getResizerXY().outerMargin).attr("width", (e) => e.getResizerXY().thickness).attr("height", (e) => e.getResizerXY().thickness).attr("fill", (e) => e.getResizerXY().getLook(e).fillColor || "transparent").attr("stroke", (e) => e.getResizerXY().getLook(e).borderColor || "transparent").attr("stroke-width", (e) => e.getResizerXY().getLook(e).borderThickness || 0);
 	}
 	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(k.NoDrop));
 		}).on(S.MouseOut, () => {
-			this.unfinishedConnection && Z(A.Grabbing);
+			this.unfinishedConnection && X(k.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 = Ut(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 Rt(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 = Ut(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 Lt(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);
+		}).call(e.drag().filter((e) => (this.secondaryButton = Vt(e), !0)).on(w.Start, (e, t) => {
+			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(k.Grabbing), this.startConnection(t), this.unfinishedConnection && (this.unfinishedConnectionTracer = this.selectCanvasElements().append("path").attr("stroke", "none").attr("fill", "none"))) : X(k.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));
+				this.unfinishedConnectionTracer?.attr("d", Ht(this.unfinishedConnection.look.shape || P.look.shape, this.unfinishedConnection.startCoords, t, this.unfinishedConnection.startDirection, this.unfinishedConnection.endDirection, this.unfinishedConnection.points, this.unfinishedConnection.type.defaultLook.thickness || P.look.thickness, this.unfinishedConnection.type.defaultStartMarkerLook?.width, this.unfinishedConnection.type.defaultEndMarkerLook?.width));
 				let n = this.unfinishedConnectionTracer?.node();
 				if (n) {
 					let e = 2, t = n.getTotalLength();
@@ -3161,7 +3520,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(pn), 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,15 +3532,15 @@ 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 dt) this.finishConnection(t);
+					else if (t instanceof Le && t.rootElement instanceof dt) this.finishConnection(t.rootElement);
+					else if (t instanceof W || t instanceof U || 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;
+						if (t instanceof W || t instanceof U) n = t;
+						else if (t.rootElement instanceof W || t.rootElement instanceof U) n = t.rootElement;
 						else {
 							this.dropConnection();
 							return;
@@ -3190,10 +3549,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"), qt(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), Yt(a);
 	}
 	updateConnectionsInView(...t) {
 		let n = this.model.connections.filter((e) => this.priorityThreshold === void 0 ? !0 : e.getPriority() >= this.priorityThreshold);
@@ -3202,30 +3561,30 @@ 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 Rt(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 Lt(e, t);
 			this.diagramEvent$.next(n);
-		}).call(e.drag().filter((e) => (this.secondaryButton = Rt(e), !0)).on(w.Start, (e) => {
+		}).call(e.drag().filter((e) => (this.secondaryButton = Vt(e), !0)).on(w.Start, (e) => {
 			this.startMultipleSelection(e);
 		}).on(w.Drag, (e) => {
 			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) => Ht(e.look.shape || P.look.shape, e.startCoords, e.endCoords, e.startDirection, e.endDirection, e.points, e.type.defaultLook.thickness || P.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 || P.look.color).attr("stroke-width", (e) => e.look.thickness || P.look.thickness).attr("stroke-dasharray", (e) => ie(e.look.style || P.look.style, e.type.defaultLook.thickness || P.look.thickness)).attr("fill", "none"), o.select("path.diagram-connection-path-box").attr("d", (e) => Ht(e.look.shape || P.look.shape, e.startCoords, e.endCoords, e.startDirection, e.endDirection, e.points, e.type.defaultLook.thickness || P.look.thickness, e.type.defaultStartMarkerLook?.width, e.type.defaultEndMarkerLook?.width)).attr("stroke", "transparent").attr("pointer-events", "stroke").attr("stroke-width", (e) => (e.look.thickness || P.look.thickness) + 12).attr("stroke-dasharray", (e) => ie(e.look.style || P.look.style, e.type.defaultLook.thickness || P.look.thickness)).attr("fill", "none"), o.data().forEach((e) => {
 			this.updateConnectionLabelsInView(e), this.updateConnectionMarkersInView(e);
 		});
 	}
@@ -3234,64 +3593,64 @@ 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 = Ut(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 Rt(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 = Ut(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));
-		}).call(e.drag().filter((e) => (this.secondaryButton = Rt(e), !0)).on(w.Start, (e, t) => {
+			let n = new Lt(e, t);
+			this.diagramEvent$.next(n), !n.defaultPrevented && this.canUserPerformAction(K.EditField) && t.editable && !t.removed && (this.currentAction = new At(this, t.id, t.text, ""), this.openTextInput(t.id));
+		}).call(e.drag().filter((e) => (this.secondaryButton = Vt(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 U && (n = t.rootElement.node), n ? this.startMovingNode(e, n) : X(k.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 U && (n = t.rootElement.node), n ? this.continueMovingNode(e, n) : X(k.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 U && (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 Rt(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 Lt(e, t);
 			this.diagramEvent$.next(n);
-		}).call(e.drag().filter((e) => (this.secondaryButton = Rt(e), !0)).on(w.Start, (e) => {
+		}).call(e.drag().filter((e) => (this.secondaryButton = Vt(e), !0)).on(w.Start, (e) => {
 			(this.multipleSelectionOn || this.secondaryButton) && this.startMultipleSelection(e);
 		}).on(w.Drag, (e) => {
 			(this.multipleSelectionOn || this.secondaryButton) && this.continueMultipleSelection(e);
@@ -3301,48 +3660,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 = Ut(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 Rt(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 = Ut(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 Lt(e, t);
 			this.diagramEvent$.next(n);
-		}).call(e.drag().filter((e) => (this.secondaryButton = Rt(e), !0)).on(w.Start, (e, t) => {
+		}).call(e.drag().filter((e) => (this.secondaryButton = Vt(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 U && (n = t.rootElement.node), n ? this.startMovingNode(e, n) : X(k.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 U && (n = t.rootElement.node), n ? this.continueMovingNode(e, n) : X(k.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 U && (n = t.rootElement.node), n ? this.finishMovingNode(e, n) : X();
 			}
 			this.secondaryButton = !1;
 		}));
@@ -3352,9 +3711,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 +3750,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 +3769,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", fe(-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", fe(-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 +3796,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", fe(-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})`);
 			}
 		}
 	}
@@ -3445,7 +3807,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	fieldRootFitsInView(e) {
 		let t = this.model.fields.get(e);
 		if (!t) return !1;
-		if (t.rootElement instanceof W || t.rootElement instanceof H) {
+		if (t.rootElement instanceof W || t.rootElement instanceof U) {
 			let e = this.minimumSizeOfField(t), n = e[0] + z(t.rootElement.type?.label) + B(t.rootElement.type?.label) - t.rootElement.width, r = e[1] + V(t.rootElement.type?.label) + R(t.rootElement.type?.label) - t.rootElement.height;
 			return n <= 0 && r <= 0;
 		}
@@ -3455,15 +3817,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) {
+			if (n.rootElement instanceof U) {
 				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 +3844,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 F(this.model, this.connectionType, e, void 0, pn), 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 F(this.model, t, e, void 0, pn), this.unfinishedConnectionPort = e);
 			}
 		}
 	}
@@ -3514,15 +3876,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 kt(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 kt(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 kt(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 +3901,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 At && (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 +3917,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", _e(e) + 1), d.attr("rows", ve(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 +3955,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(k.Grabbing), this.draggingFrom = [e.x, e.y], t.selected && this.userSelection.count((e) => e instanceof W) > 1) this.currentAction = new Dt(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(k.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 Dt || 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 zt(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 Dt) {
 				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];
+				let r = Qe(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 Ot(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 +3990,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(k.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 {
+}, hn = class {
 	constructor() {
 		this.grid = [[void 0]], this.offsetX = 0, this.offsetY = 0;
 	}
@@ -3701,32 +4063,32 @@ 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 {
+}, gn = 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 hn(), n = e.nodes.filter((e) => !e.parent);
+		for (; n.length > 0;) _n(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) => {
+}, _n = (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 {
+	for (let n of e.getAdjacentNodes()) r.includes(n) && _n(n, t, i, r);
+}, vn = 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 hn(), 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) {
@@ -3740,179 +4102,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 {
+}, yn = 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];
+		O(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) && (O(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 {
+}, bn = 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 yn(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 {
+}, xn = 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 {
+}, Sn = 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 yn(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), O(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) O(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 {
+}, Cn = 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 yn(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 En(void 0, e);
+			wn(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]), Tn(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) => {
+}, wn = (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), wn(e.addBranch(n), t));
 	}
-}, gn = (e, t, n) => {
+}, Tn = (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), Tn(r, t, n + 1);
 	}
-}, _n = class e {
+}, En = class e {
 	constructor(e, t) {
 		this.parent = e, this.branches = [], this.depth = 0, this.node = t;
 	}
@@ -3928,28 +4288,28 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 			return e;
 		}
 	}
-}, vn = class {
+}, Dn = 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 {
+}, On = {
+	adjacency: new gn(),
+	breadth: new yn(),
+	"breadth-adjacency": new vn(),
+	force: new bn(),
+	horizontal: new xn(),
+	priority: new Sn(),
+	tree: new Cn(),
+	vertical: new Dn()
+}, kn = a({}), An = a({}), jn = class {
 	constructor(e, t) {
 		this.onTitleChange = e, this.onValueSetChange = t;
 	}
@@ -3966,35 +4326,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", {
+}, Mn = ({ 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([]);
+}, Nn = () => {
+	let e = o(An), t = c(null), [n, a] = l([]);
 	i(e.validatorChange$, e.diagramChange$).pipe(r(() => s())).subscribe();
 	let s = () => {
 		a([]);
@@ -4021,7 +4384,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(Mn, {
 						collapsableSelector: t,
 						collapsableAdditionalSelector: ".daga-error-panel",
 						direction: p.Top,
@@ -4042,10 +4405,10 @@ 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 }) => {
+}, Pn = 200, Fn = (e) => (e || "").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, ""), In = ({ 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 || "");
+		o(t.find((e) => ke(e.key, n))?.label || "");
 	}, [n, t]);
 	let w = (n) => {
 		if (!e) switch (n.key) {
@@ -4071,10 +4434,10 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 		}
 	}, T = () => {
 		if (!e) {
-			let e = En(a.trim());
+			let e = Fn(a.trim());
 			h([]), _([]), y([]), x([]);
 			for (let n of t) {
-				let t = En(n.label).indexOf(e);
+				let t = Fn(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,7 +4459,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}, te = () => {
 		setTimeout(() => {
 			E();
-		}, Tn);
+		}, Pn);
 	}, ne = (e) => {
 		let t = i.current?.querySelectorAll("li")[e];
 		t && t.scrollIntoView({ block: "center" });
@@ -4144,7 +4507,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 }) => {
+}, Ln = (e, t) => e.find((e) => e.key === t)?.label || `${t}`, Rn = ({ 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 +4520,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) => Ln(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 +4543,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(In, {
 				disabled: e,
 				options: t ? n || [] : p || [],
 				value: a,
@@ -4192,7 +4555,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 }) => {
+}, zn = ({ 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 +4603,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 }) => {
+}, Bn = ({ 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 +4711,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) => {
+}, Vn = ({ valueSet: e, onValueChange: t, depth: n }) => {
+	let r = o(An).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();
@@ -4362,55 +4725,55 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 				className: "daga-property-name",
 				children: o.label || o.name
 			}),
-			o.type === P.Text && /* @__PURE__ */ d("input", {
+			o.type === M.Text && /* @__PURE__ */ d("input", {
 				type: "daga-text",
 				disabled: o.editable === !1 || !r,
 				value: e?.getValue(o.name),
 				onChange: (n) => t(e, o, n.target.value)
 			}),
-			o.type === P.TextArea && /* @__PURE__ */ d("textarea", {
+			o.type === M.TextArea && /* @__PURE__ */ d("textarea", {
 				disabled: o.editable === !1 || !r,
 				value: e?.getValue(o.name),
 				onChange: (n) => t(e, o, n.target.value)
 			}),
-			o.type === P.Number && /* @__PURE__ */ d("input", {
+			o.type === M.Number && /* @__PURE__ */ d("input", {
 				type: "number",
 				disabled: o.editable === !1 || !r,
 				value: e?.getValue(o.name),
 				onChange: (n) => t(e, o, n.target.value)
 			}),
-			o.type === P.Color && /* @__PURE__ */ d("input", {
+			o.type === M.Color && /* @__PURE__ */ d("input", {
 				type: "text",
 				pattern: "#[0-9a-fA-F]{6}",
 				disabled: o.editable === !1 || !r,
 				value: e?.getValue(o.name),
 				onChange: (n) => t(e, o, n.target.value)
 			}),
-			o.type === P.Datetime && /* @__PURE__ */ d("input", {
+			o.type === M.Datetime && /* @__PURE__ */ d("input", {
 				type: "datetime-local",
 				disabled: o.editable === !1 || !r,
 				value: a(e?.getValue(o.name)),
 				onChange: (n) => t(e, o, s(n.target.value))
 			}),
-			o.type === P.Date && /* @__PURE__ */ d("input", {
+			o.type === M.Date && /* @__PURE__ */ d("input", {
 				type: "date",
 				disabled: o.editable === !1 || !r,
 				value: e?.getValue(o.name),
 				onChange: (n) => t(e, o, n.target.value)
 			}),
-			o.type === P.Time && /* @__PURE__ */ d("input", {
+			o.type === M.Time && /* @__PURE__ */ d("input", {
 				type: "time",
 				disabled: o.editable === !1 || !r,
 				value: e?.getValue(o.name),
 				onChange: (n) => t(e, o, n.target.value)
 			}),
-			o.type === P.Url && /* @__PURE__ */ d("input", {
+			o.type === M.Url && /* @__PURE__ */ d("input", {
 				type: "url",
 				disabled: o.editable === !1 || !r,
 				value: e?.getValue(o.name),
 				onChange: (n) => t(e, o, n.target.value)
 			}),
-			o.type === P.Boolean && /* @__PURE__ */ f("div", {
+			o.type === M.Boolean && /* @__PURE__ */ f("div", {
 				className: "daga-radio",
 				children: [/* @__PURE__ */ f("label", {
 					className: "daga-radio-item daga-radio-start" + (e?.getValue(o.name) === !1 ? " daga-checked" : ""),
@@ -4434,36 +4797,36 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 					}), "Yes"]
 				})]
 			}),
-			o.type === P.Option && /* @__PURE__ */ d("div", {
+			o.type === M.Option && /* @__PURE__ */ d("div", {
 				className: "daga-relatively-positioned",
-				children: /* @__PURE__ */ d(Dn, {
+				children: /* @__PURE__ */ d(In, {
 					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 === M.OptionList || o.type === M.OptionSet) && /* @__PURE__ */ d(Rn, {
 				disabled: o.editable === !1 || !r,
-				allowRepeats: o.type === P.OptionList,
+				allowRepeats: o.type === M.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 === M.TextList || o.type === M.TextSet) && /* @__PURE__ */ d(zn, {
 				disabled: o.editable === !1 || !r,
-				allowRepeats: o.type === P.TextList,
+				allowRepeats: o.type === M.TextList,
 				value: e?.getValue(o.name),
 				onChange: (n) => t(e, o, n)
 			}),
-			o.type === P.TextMap && /* @__PURE__ */ d(jn, {
+			o.type === M.TextMap && /* @__PURE__ */ d(Bn, {
 				disabled: o.editable === !1 || !r,
 				value: e?.getValue(o.name),
 				onChange: (n) => t(e, o, n)
 			}),
-			o.type === P.Object && /* @__PURE__ */ d("div", {
+			o.type === M.Object && /* @__PURE__ */ d("div", {
 				className: "daga-left-bar",
-				children: /* @__PURE__ */ d(Mn, {
+				children: /* @__PURE__ */ d(Vn, {
 					valueSet: e.getSubValueSet(o.name),
 					onValueChange: t,
 					depth: n + 1
@@ -4471,22 +4834,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 = () => {
+}, Hn = ({ valueSet: t, depth: n }) => {
+	let r = o(An), 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(k.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(k.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(k.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));
 			}));
@@ -4505,7 +4868,7 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 	}, u = (e) => {
 		if (t === void 0) return;
 		let n;
-		n = e instanceof Ee ? e : e instanceof Event ? t?.propertySet.getProperty(e.target?.value || "") : t?.propertySet.getProperty(e || ""), n && t?.hideProperty(n), s();
+		n = e instanceof Te ? e : e instanceof Event ? t?.propertySet.getProperty(e.target?.value || "") : t?.propertySet.getProperty(e || ""), n && t?.hideProperty(n), s();
 	};
 	return /* @__PURE__ */ f("daga-property-settings", {
 		ref: i,
@@ -4528,11 +4891,11 @@ var ke = (e) => e == null || e === "" || e instanceof Array && e.length === 0 ||
 							})]
 						})]
 					}),
-					e.type !== P.Object && /* @__PURE__ */ d("div", {
+					e.type !== M.Object && /* @__PURE__ */ d("div", {
 						className: "daga-property-value",
-						children: Pn(t?.getValue(e.name))
+						children: Un(t?.getValue(e.name))
 					}),
-					e.type === P.Object && /* @__PURE__ */ d(Nn, {
+					e.type === M.Object && /* @__PURE__ */ d(Hn, {
 						valueSet: t?.getSubValueSet(e.name),
 						depth: n + 1
 					})
@@ -4540,61 +4903,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);
+}, Un = (e) => Array.isArray(e) ? e.join(", ") : je(e) ? Object.entries(e).map((e) => e.map((e) => JSON.stringify(e)).join(": ")).join(", ") : e instanceof Date ? e.toLocaleString() : e == null ? "" : "" + e, Wn = ({ 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(Mn, {
+			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(Vn, {
+					valueSet: u,
+					onValueChange: m,
 					depth: 0
 				}),
-				_ && /* @__PURE__ */ d(Nn, {
-					valueSet: o,
+				v && /* @__PURE__ */ d(Hn, {
+					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) => {
+}, Gn = 6, Kn = (t) => {
+	let n = o(An), [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 +4981,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(k.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(k.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(k.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 +5003,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]);
-				let c = Ye(n.model.nodes.getAtCoordinates(o[0], o[1]).filter((e) => e.type.childrenTypes.includes(t.id))), l = c[c.length - 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 = Qe(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 Et(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", oe(f.shape || ae.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 +5020,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", oe(ae.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 + Gn})`).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 +5045,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(Mn, {
 			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 +5080,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 }) => {
+}, qn = ({ 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 +5111,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(An);
 	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 +5125,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 +5139,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 +5194,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 === Ft.Selection && (e.select(S.current).classed("daga-on", !1).classed("daga-off", !0), t.unsubscribe());
 							});
 						},
 						ref: S,
@@ -4860,7 +5226,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 On && On[T.layoutFormat].apply(T.model);
 						},
 						children: /* @__PURE__ */ d("span", {
 							className: "daga-tooltip",
@@ -4895,8 +5261,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 = {
+}, Jn = ({ config: e, model: t, onCanvasCreated: n, onDiagramEvent: r, onModelChange: i }) => {
+	let a = new pt(), o = new un(), 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 +5270,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 jn((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 mn(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 +5291,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(kn.Provider, {
 		value: e,
-		children: /* @__PURE__ */ d(xn.Provider, {
+		children: /* @__PURE__ */ d(An.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(An.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(qn, {
 						location: e.components?.buttons?.location || m.BottomRight,
 						direction: e.components?.buttons?.direction || p.Top,
 						centerAnimationDuration: e.components?.buttons?.centerAnimationDuration,
@@ -4945,33 +5311,37 @@ 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(Kn, {
+						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(Wn, {
+						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) => {
-							if (b !== void 0 && t.editable !== !1 && !Ae(e.getValue(t.name), n)) {
+							if (b !== void 0 && t.editable !== !1 && !ke(e.getValue(t.name), n)) {
 								e.setValue(t.name, n);
-								let r = new Ne(b.propertySet, void 0);
+								let r = new Me(b.propertySet, void 0);
 								r.setValues(b.getValues()), r.rootElement = b.rootElement, C.valueSet = r, b.rootElement.valueSet = r, E.propertyEditorChanges$?.next();
 							}
 						}
 					}),
-					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(Nn, {})
 				]
 			})] })
 		})
 	}) });
 };
 //#endregion
-export { zn as DagaDiagram };
+export { Jn as DagaDiagram };