@ngroznykh/papirus 0.9.13 → 0.9.14

package/dist/papirus.js

@@ -1,10 +1,8 @@
 //#region src/events/EventEmitter.ts
-/**
-* Type-safe event emitter with support for typed event maps
-*/
 var EventEmitter = class {
 	constructor() {
 		this.listeners = /* @__PURE__ */ new Map();
+		this.onceWrappers = /* @__PURE__ */ new Map();
 	}
 	/**
 	* Subscribe to an event
@@ -25,8 +23,20 @@ var EventEmitter = class {
 	* @param listener - Callback function to remove
 	*/
 	off(event, listener) {
+		const eventListener = listener;
 		const listeners = this.listeners.get(event);
-		if (listeners !== void 0) listeners.delete(listener);
+		listeners?.delete(eventListener);
+		const wrappersByListener = this.onceWrappers.get(event);
+		const wrappers = wrappersByListener?.get(eventListener);
+		if (wrappers !== void 0) {
+			for (const wrapper of wrappers) listeners?.delete(wrapper);
+			wrappersByListener?.delete(eventListener);
+		} else if (wrappersByListener !== void 0) for (const [original, originalWrappers] of wrappersByListener) {
+			originalWrappers.delete(eventListener);
+			if (originalWrappers.size === 0) wrappersByListener.delete(original);
+		}
+		if (listeners?.size === 0) this.listeners.delete(event);
+		if (wrappersByListener?.size === 0) this.onceWrappers.delete(event);
 	}
 	/**
 	* Subscribe to an event for a single emission
@@ -39,6 +49,19 @@ var EventEmitter = class {
 			this.off(event, wrapper);
 			listener(...args);
 		};
+		const originalListener = listener;
+		const eventWrapper = wrapper;
+		let wrappersByListener = this.onceWrappers.get(event);
+		if (wrappersByListener === void 0) {
+			wrappersByListener = /* @__PURE__ */ new Map();
+			this.onceWrappers.set(event, wrappersByListener);
+		}
+		let wrappers = wrappersByListener.get(originalListener);
+		if (wrappers === void 0) {
+			wrappers = /* @__PURE__ */ new Set();
+			wrappersByListener.set(originalListener, wrappers);
+		}
+		wrappers.add(eventWrapper);
 		return this.on(event, wrapper);
 	}
 	/**
@@ -48,15 +71,20 @@ var EventEmitter = class {
 	*/
 	emit(event, ...args) {
 		const listeners = this.listeners.get(event);
-		if (listeners !== void 0) for (const listener of listeners) listener(...args);
+		if (listeners !== void 0) for (const listener of Array.from(listeners)) listener(...args);
 	}
 	/**
 	* Remove all listeners for an event or all events
 	* @param event - Optional event name. If not provided, removes all listeners
 	*/
 	removeAllListeners(event) {
-		if (event !== void 0) this.listeners.delete(event);
-		else this.listeners.clear();
+		if (event !== void 0) {
+			this.listeners.delete(event);
+			this.onceWrappers.delete(event);
+		} else {
+			this.listeners.clear();
+			this.onceWrappers.clear();
+		}
 	}
 	/**
 	* Get the number of listeners for an event
@@ -79,6 +107,9 @@ var InputHandler = class extends EventEmitter {
 		this.boundHandlers = /* @__PURE__ */ new Map();
 		this.lastTouchDistance = null;
 		this.lastTouchCenter = null;
+		this.windowPointerActive = false;
+		this.boundWindowMouseMove = (e) => this.handleWindowMouseMove(e);
+		this.boundWindowMouseUp = (e) => this.handleWindowMouseUp(e);
 		this.canvas = options.canvas;
 		this.screenToWorld = options.screenToWorld;
 		this.setupEventListeners();
@@ -93,6 +124,7 @@ var InputHandler = class extends EventEmitter {
 	* Clean up event listeners
 	*/
 	destroy() {
+		this.teardownWindowPointerListeners();
 		for (const [eventName, handler] of this.boundHandlers) if (eventName.startsWith("key")) window.removeEventListener(eventName, handler);
 		else this.canvas.removeEventListener(eventName, handler);
 		this.boundHandlers.clear();
@@ -102,8 +134,8 @@ var InputHandler = class extends EventEmitter {
 		this.addCanvasListener("click", this.handleClick.bind(this));
 		this.addCanvasListener("dblclick", this.handleDblClick.bind(this));
 		this.addCanvasListener("mousedown", this.handleMouseDown.bind(this));
-		this.addCanvasListener("mouseup", this.handleMouseUp.bind(this));
-		this.addCanvasListener("mousemove", this.handleMouseMove.bind(this));
+		this.addCanvasListener("mouseup", this.handleCanvasMouseUp.bind(this));
+		this.addCanvasListener("mousemove", this.handleCanvasMouseMove.bind(this));
 		this.addCanvasListener("wheel", this.handleWheel.bind(this), { passive: false });
 		this.addCanvasListener("touchstart", this.handleTouchStart.bind(this));
 		this.addCanvasListener("touchend", this.handleTouchEnd.bind(this));
@@ -120,6 +152,18 @@ var InputHandler = class extends EventEmitter {
 		window.addEventListener(eventName, handler);
 		this.boundHandlers.set(eventName, handler);
 	}
+	ensureWindowPointerListeners() {
+		if (this.windowPointerActive) return;
+		this.windowPointerActive = true;
+		window.addEventListener("mousemove", this.boundWindowMouseMove);
+		window.addEventListener("mouseup", this.boundWindowMouseUp);
+	}
+	teardownWindowPointerListeners() {
+		if (!this.windowPointerActive) return;
+		this.windowPointerActive = false;
+		window.removeEventListener("mousemove", this.boundWindowMouseMove);
+		window.removeEventListener("mouseup", this.boundWindowMouseUp);
+	}
 	handleClick(e) {
 		const event = this.normalizeMouseEvent(e);
 		this.emit("click", event);
@@ -130,16 +174,30 @@ var InputHandler = class extends EventEmitter {
 	}
 	handleMouseDown(e) {
 		const event = this.normalizeMouseEvent(e);
+		this.ensureWindowPointerListeners();
 		this.emit("mousedown", event);
 	}
-	handleMouseUp(e) {
+	handleCanvasMouseMove(e) {
 		const event = this.normalizeMouseEvent(e);
-		this.emit("mouseup", event);
+		this.emit("mousemove", event);
 	}
-	handleMouseMove(e) {
+	handleWindowMouseMove(e) {
+		if (e.target === this.canvas || this.canvas.contains(e.target)) return;
 		const event = this.normalizeMouseEvent(e);
 		this.emit("mousemove", event);
 	}
+	handleCanvasMouseUp(e) {
+		this.finishPointerUp(e);
+	}
+	handleWindowMouseUp(e) {
+		if (e.target === this.canvas || this.canvas.contains(e.target)) return;
+		this.finishPointerUp(e);
+	}
+	finishPointerUp(mouseEvent) {
+		const event = this.normalizeMouseEvent(mouseEvent);
+		this.teardownWindowPointerListeners();
+		this.emit("mouseup", event);
+	}
 	handleWheel(e) {
 		e.preventDefault();
 		const wheelEvent = e;
@@ -748,6 +806,7 @@ var SelectionManager = class extends EventEmitter {
 		const rect = this.selectionRect;
 		const selected = [];
 		for (const node of this.renderer.nodes.values()) if (rectsIntersect(rect, node.getBounds())) selected.push(node.id);
+		for (const edge of this.renderer.edges.values()) if (rectsIntersect(rect, edge.getBounds())) selected.push(edge.id);
 		for (const group of this.renderer.groups.values()) if (rectsIntersect(rect, group.getBounds())) selected.push(group.id);
 		if (selected.length > 0) this.selectMultiple(selected);
 		this.emit("selectionEnd", rect);
@@ -779,6 +838,7 @@ var SelectionManager = class extends EventEmitter {
 		ctx.setLineDash([]);
 	}
 	updateElementStates() {
+		this.pruneStaleSelection();
 		const updateState = (elements) => {
 			for (const element of elements) if (this._selectedIds.has(element.id)) element.state = "selected";
 			else if (element.state === "selected") element.state = "normal";
@@ -789,6 +849,9 @@ var SelectionManager = class extends EventEmitter {
 		this.renderer.markDirty();
 		this.renderer.markStyleDirty();
 	}
+	pruneStaleSelection() {
+		for (const id of Array.from(this._selectedIds)) if (this.renderer.getNode(id) === void 0 && this.renderer.getEdge(id) === void 0 && this.renderer.getGroup(id) === void 0) this._selectedIds.delete(id);
+	}
 	emitSelect() {
 		this.emit("select", Array.from(this._selectedIds));
 		this.renderer.emit("select", Array.from(this._selectedIds));
@@ -810,9 +873,9 @@ var DragManager = class extends EventEmitter {
 		this.editableBendFollow = /* @__PURE__ */ new Map();
 		this.editablePolylineFullyConnectedEdges = /* @__PURE__ */ new Set();
 		this.initialControlPointsForFullyConnected = /* @__PURE__ */ new Map();
+		this.initialControlPointsForBendFollow = /* @__PURE__ */ new Map();
 		this.alignmentGuides = [];
 		this._handledMouseDown = false;
-		this.draggedGroupSelection = false;
 		this.renderer = options.renderer;
 		this.selectionManager = options.selectionManager;
 		this.snapToGrid = options.snapToGrid ?? false;
@@ -890,7 +953,6 @@ var DragManager = class extends EventEmitter {
 			this._handledMouseDown = true;
 			this.dragStartPoint = point;
 			this.lastDragPoint = point;
-			this.draggedGroupSelection = false;
 			this.draggedNodes = [];
 			this.initialPositions.clear();
 			for (const id of this.selectionManager.selectedIds) {
@@ -907,7 +969,6 @@ var DragManager = class extends EventEmitter {
 		}
 		this.dragStartPoint = point;
 		this.lastDragPoint = point;
-		this.draggedGroupSelection = false;
 		this.draggedNodes = [];
 		for (const id of this.selectionManager.selectedIds) {
 			const selectedNode = this.renderer.getNode(id);
@@ -916,12 +977,9 @@ var DragManager = class extends EventEmitter {
 				continue;
 			}
 			const selectedGroup = this.renderer.getGroup(id);
-			if (selectedGroup !== void 0) {
-				this.draggedGroupSelection = true;
-				for (const child of selectedGroup.getAllChildren()) {
-					const childNode = this.renderer.getNode(child.id);
-					if (childNode) this.addDraggedNode(childNode);
-				}
+			if (selectedGroup !== void 0) for (const child of selectedGroup.getAllChildren()) {
+				const childNode = this.renderer.getNode(child.id);
+				if (childNode) this.addDraggedNode(childNode);
 			}
 		}
 		return true;
@@ -977,6 +1035,7 @@ var DragManager = class extends EventEmitter {
 		}
 		if (firstDelta !== null) this.followEditableBendForFullyConnectedEdges(firstDelta.x, firstDelta.y);
 		this.emit("drag", this.draggedNodes.map((n) => n.id), point, delta);
+		this.lastDragPoint = point;
 		this.renderer.markDirty();
 		return true;
 	}
@@ -993,7 +1052,6 @@ var DragManager = class extends EventEmitter {
 		if (this.isDragging) {
 			for (const node of this.draggedNodes) node.state = "selected";
 			this.emit("dragend", this.draggedNodes.map((n) => n.id), point);
-			if (this.draggedGroupSelection) this.selectionManager.clearSelection();
 		}
 		this.reset();
 		this.renderer.markDirty();
@@ -1016,6 +1074,10 @@ var DragManager = class extends EventEmitter {
 				const edge = this.renderer.getEdge(edgeId);
 				if (edge) edge.controlPoints = clonePoints(points);
 			}
+			for (const [edgeId, points] of this.initialControlPointsForBendFollow) {
+				const edge = this.renderer.getEdge(edgeId);
+				if (edge) edge.controlPoints = clonePoints(points);
+			}
 		}
 		this.reset();
 		this.renderer.markDirty();
@@ -1037,13 +1099,14 @@ var DragManager = class extends EventEmitter {
 		this.editableBendFollow.clear();
 		this.editablePolylineFullyConnectedEdges.clear();
 		this.initialControlPointsForFullyConnected.clear();
+		this.initialControlPointsForBendFollow.clear();
 		this.alignmentGuides = [];
-		this.draggedGroupSelection = false;
 	}
 	buildEditableBendFollowBindings() {
 		this.editableBendFollow.clear();
 		this.editablePolylineFullyConnectedEdges.clear();
 		this.initialControlPointsForFullyConnected.clear();
+		this.initialControlPointsForBendFollow.clear();
 		const draggedIds = new Set(this.draggedNodes.map((node) => node.id));
 		const nodeBindings = /* @__PURE__ */ new Map();
 		for (const edge of this.renderer.edges.values()) {
@@ -1080,6 +1143,7 @@ var DragManager = class extends EventEmitter {
 					axis
 				});
 				nodeBindings.set(node.id, bindings);
+				if (!this.initialControlPointsForBendFollow.has(edge.id)) this.initialControlPointsForBendFollow.set(edge.id, clonePoints(edge.controlPoints));
 			}
 		}
 		for (const [nodeId, bindings] of nodeBindings) if (bindings.length > 0) this.editableBendFollow.set(nodeId, bindings);
@@ -1512,9 +1576,23 @@ var NavigationManager = class extends EventEmitter {
 		this.isPanning = false;
 		this.panStart = null;
 		this.spacePressed = false;
+		this.boundBlur = () => this.handleWindowBlur();
+		this.boundVisibilityChange = () => {
+			if (document.visibilityState === "hidden") this.handleWindowBlur();
+		};
 		this.renderer = options.renderer;
 		this.zoomSensitivity = options.zoomSensitivity ?? .001;
 		this.panButton = options.panButton ?? 1;
+		window.addEventListener("blur", this.boundBlur);
+		document.addEventListener("visibilitychange", this.boundVisibilityChange);
+	}
+	destroy() {
+		window.removeEventListener("blur", this.boundBlur);
+		document.removeEventListener("visibilitychange", this.boundVisibilityChange);
+	}
+	handleWindowBlur() {
+		this.spacePressed = false;
+		if (this.isPanning) this.endPan();
 	}
 	/**
 	* Check if currently panning
@@ -1633,7 +1711,7 @@ var NavigationManager = class extends EventEmitter {
 		const actualNewZoom = this.renderer.zoom;
 		this.renderer.offsetX = oldOffsetX + worldPos.x * (oldZoom - actualNewZoom);
 		this.renderer.offsetY = oldOffsetY + worldPos.y * (oldZoom - actualNewZoom);
-		this.emit("zoomChange", this.renderer.zoom, centerPoint);
+		this.emit("zoomChange", this.renderer.zoom, worldPos);
 	}
 	/**
 	* Fit all content in view
@@ -1650,6 +1728,7 @@ var NavigationManager = class extends EventEmitter {
 	* Zoom to fit a specific rectangle
 	*/
 	zoomToRect(rect, padding = 50) {
+		if (rect.width <= 0 || rect.height <= 0) return;
 		const viewWidth = this.renderer.width - padding * 2;
 		const viewHeight = this.renderer.height - padding * 2;
 		const scaleX = viewWidth / rect.width;
@@ -2626,12 +2705,24 @@ var ConnectionManager = class extends EventEmitter {
 	* Cancel current connection
 	*/
 	cancelConnection() {
+		if (this.isReconnecting) {
+			this.restoreReconnectingEndpoint();
+			this.resetReconnection();
+			this.renderer.markDirty();
+			return;
+		}
 		if (!this.isConnecting) return;
 		this.emit("connectionEnd", null);
 		this.reset();
 		this.renderer.markDirty();
 	}
 	/**
+	* Cancel any in-flight connect or reconnect gesture and restore edge auto-updates.
+	*/
+	cancelAll() {
+		this.cancelConnection();
+	}
+	/**
 	* Render connection preview
 	*/
 	renderPreview(ctx) {
@@ -2767,6 +2858,11 @@ var ConnectionManager = class extends EventEmitter {
 		this.reconnectPoint = null;
 		this.setCursor("");
 	}
+	restoreReconnectingEndpoint() {
+		if (!this.reconnectingEdge || !this.originalEdgeEndpoint || !this.reconnectingEndpoint) return;
+		if (this.reconnectingEndpoint === "start") this.reconnectingEdge.from = this.originalEdgeEndpoint;
+		else this.reconnectingEdge.to = this.originalEdgeEndpoint;
+	}
 	/**
 	* Render anchors when hovering a node (not connecting)
 	*/
@@ -6058,12 +6154,18 @@ var BezierPathStrategy = class {
 	hitTest(point, path, tolerance) {
 		if (path.length < 4) return false;
 		const samples = 20;
-		const points = [];
-		for (let i = 0; i <= samples; i++) {
-			const t = i / samples;
-			points.push(bezierPoint(path[0], path[1], path[2], path[3], t));
+		for (let i = 1; i + 2 < path.length; i += 3) {
+			const start = path[i - 1];
+			const control1 = path[i];
+			const control2 = path[i + 1];
+			const end = path[i + 2];
+			let previous = start;
+			for (let sample = 1; sample <= samples; sample++) {
+				const current = bezierPoint(start, control1, control2, end, sample / samples);
+				if (distanceToSegment(point, previous, current) <= tolerance) return true;
+				previous = current;
+			}
 		}
-		for (let i = 1; i < points.length; i++) if (distanceToSegment(point, points[i - 1], points[i]) <= tolerance) return true;
 		return false;
 	}
 };
@@ -7730,6 +7832,13 @@ var InteractionManager = class {
 	}
 	destroy() {
 		this.labelEditor.finish(false);
+		this.propertyChangeBatcher.flush();
+		this.dragManager.cancelDrag();
+		this.resizeManager.cancelResize();
+		this.connectionManager.cancelAll();
+		this.selectionManager.cancelSelectionRect();
+		this.navigationManager.destroy();
+		this.resumeEditHover();
 		if (this.overlayDragSession) {
 			this.renderer.endOverlayDrag(this.overlayDragSession);
 			this.overlayDragSession = null;
@@ -8471,6 +8580,15 @@ var AnimationManager = class {
 	hasActive() {
 		return this.enter.size > 0 || this.exit.size > 0 || this.highlight.size > 0;
 	}
+	/**
+	* Drop all in-flight enter/exit/highlight timers without running exit callbacks.
+	* Used by {@link DiagramRenderer.clear} so removed ids do not keep the render loop dirty.
+	*/
+	clear() {
+		this.enter.clear();
+		this.exit.clear();
+		this.highlight.clear();
+	}
 	update(now = performance.now()) {
 		if (!this.options.enabled) return false;
 		let changed = false;
@@ -9398,6 +9516,7 @@ var DiagramRenderer = class extends EventEmitter {
 		this._contentDirty = true;
 		this._contentRevision = 0;
 		this._contentBoundsCache = null;
+		this._edgeIndexEndpoints = /* @__PURE__ */ new Map();
 		this._destroyed = false;
 		this._contextLost = false;
 		this._canvasRect = null;
@@ -9754,10 +9873,12 @@ var DiagramRenderer = class extends EventEmitter {
 	*/
 	addEdge(edge) {
 		edge.setDirtyListener(() => this.markDirty());
-		edge.setBindingListener(() => this.markContentDirty());
+		edge.setBindingListener(() => {
+			this.syncEdgeNodeIndex(edge);
+			this.markContentDirty();
+		});
 		this._edges.set(edge.id, edge);
-		if (edge.from.nodeId) this._updateEdgeIndex(edge.id, edge.from.nodeId, true);
-		if (edge.to.nodeId) this._updateEdgeIndex(edge.id, edge.to.nodeId, true);
+		this.syncEdgeNodeIndex(edge);
 		this.animationManager.registerEnter(edge.id);
 		this.markContentDirty();
 		this.emit("edgeAdd", edge);
@@ -9778,6 +9899,22 @@ var DiagramRenderer = class extends EventEmitter {
 		}
 	}
 	/**
+	* Keep `_nodeEdgeIndex` accurate when an edge is added or its from/to node ids change.
+	*/
+	syncEdgeNodeIndex(edge) {
+		const prev = this._edgeIndexEndpoints.get(edge.id);
+		const nextFrom = edge.from.nodeId;
+		const nextTo = edge.to.nodeId;
+		if (prev?.from !== void 0 && prev.from !== nextFrom) this._updateEdgeIndex(edge.id, prev.from, false);
+		if (prev?.to !== void 0 && prev.to !== nextTo) this._updateEdgeIndex(edge.id, prev.to, false);
+		if (nextFrom !== void 0 && nextFrom !== prev?.from) this._updateEdgeIndex(edge.id, nextFrom, true);
+		if (nextTo !== void 0 && nextTo !== prev?.to) this._updateEdgeIndex(edge.id, nextTo, true);
+		this._edgeIndexEndpoints.set(edge.id, {
+			from: nextFrom,
+			to: nextTo
+		});
+	}
+	/**
 	* Remove an edge from the diagram
 	*/
 	removeEdge(edgeId) {
@@ -9813,8 +9950,12 @@ var DiagramRenderer = class extends EventEmitter {
 			if (other.from.edgeId === edgeId || other.to.edgeId === edgeId) dependents.push(other.id);
 		}
 		for (const dependentId of dependents) this.removeEdgeImmediate(dependentId);
-		if (edge.from.nodeId) this._updateEdgeIndex(edgeId, edge.from.nodeId, false);
-		if (edge.to.nodeId) this._updateEdgeIndex(edgeId, edge.to.nodeId, false);
+		const indexed = this._edgeIndexEndpoints.get(edgeId);
+		if (indexed?.from !== void 0) this._updateEdgeIndex(edgeId, indexed.from, false);
+		else if (edge.from.nodeId) this._updateEdgeIndex(edgeId, edge.from.nodeId, false);
+		if (indexed?.to !== void 0) this._updateEdgeIndex(edgeId, indexed.to, false);
+		else if (edge.to.nodeId) this._updateEdgeIndex(edgeId, edge.to.nodeId, false);
+		this._edgeIndexEndpoints.delete(edgeId);
 		this._edges.delete(edgeId);
 		edge.setDirtyListener(void 0);
 		edge.setBindingListener(void 0);
@@ -9984,19 +10125,25 @@ var DiagramRenderer = class extends EventEmitter {
 		this._edges.clear();
 		this._groups.clear();
 		this._nodeEdgeIndex.clear();
+		this._edgeIndexEndpoints.clear();
 	}
 	/**
 	* Clear all elements from the diagram
 	*/
 	clear() {
 		for (const node of this._nodes.values()) node.setDirtyListener(void 0);
-		for (const edge of this._edges.values()) edge.setDirtyListener(void 0);
+		for (const edge of this._edges.values()) {
+			edge.setDirtyListener(void 0);
+			edge.setBindingListener(void 0);
+		}
 		for (const group of this._groups.values()) group.setDirtyListener(void 0);
 		this._nodes.clear();
 		this._edges.clear();
 		this._groups.clear();
 		this._nodeEdgeIndex.clear();
-		this.markDirty();
+		this._edgeIndexEndpoints.clear();
+		this.animationManager.clear();
+		this.markContentDirty();
 	}
 	nativePixelRatio() {
 		return this.options.retina ? window.devicePixelRatio || 1 : 1;
@@ -10227,6 +10374,7 @@ var SearchManager = class {
 		this.overlayCleanup = this.renderer.addOverlayRenderer((ctx) => this.renderHighlights(ctx));
 	}
 	destroy() {
+		if (this.filterActive) this.clearFilter();
 		this.overlayCleanup?.();
 		this.overlayCleanup = null;
 		this.highlightIds.clear();
@@ -12015,7 +12163,7 @@ var Group = class Group extends Element {
 	}
 	applyStyleManager(styleManager) {
 		const mergedStyle = {
-			...styleManager.getGroupStyle(false, this._styleClass),
+			...styleManager.getGroupStyle(this._state === "selected", this._styleClass),
 			...this._style
 		};
 		if (!shallowEqual(this._groupStyle, mergedStyle)) {
@@ -12123,7 +12271,6 @@ var Group = class Group extends Element {
 			ctx.fillText(this._label, x + 8, y + 4);
 		}
 		ctx.globalAlpha = 1;
-		for (const child of this._children) if (child.visible) child.render(ctx);
 	}
 	getBounds() {
 		return {
@@ -12260,11 +12407,12 @@ var CircleNode = class extends Node {
 		};
 	}
 	getLabelContainerBounds(bounds) {
-		const width = bounds.width / Math.SQRT2;
-		const height = bounds.height / Math.SQRT2;
+		const insetBounds = super.getLabelContainerBounds(bounds);
+		const width = insetBounds.width / Math.SQRT2;
+		const height = insetBounds.height / Math.SQRT2;
 		return {
-			x: bounds.x + (bounds.width - width) / 2,
-			y: bounds.y + (bounds.height - height) / 2,
+			x: insetBounds.x + (insetBounds.width - width) / 2,
+			y: insetBounds.y + (insetBounds.height - height) / 2,
 			width,
 			height
 		};
@@ -12421,11 +12569,12 @@ var DiamondNode = class extends Node {
 		};
 	}
 	getLabelContainerBounds(bounds) {
-		const width = bounds.width / 2;
-		const height = bounds.height / 2;
+		const insetBounds = super.getLabelContainerBounds(bounds);
+		const width = insetBounds.width / 2;
+		const height = insetBounds.height / 2;
 		return {
-			x: bounds.x + (bounds.width - width) / 2,
-			y: bounds.y + (bounds.height - height) / 2,
+			x: insetBounds.x + (insetBounds.width - width) / 2,
+			y: insetBounds.y + (insetBounds.height - height) / 2,
 			width,
 			height
 		};
@@ -13443,16 +13592,33 @@ function flexLayout(container, config, children) {
 			finalSizes[i] = finalSizes[i] + remaining * child.flexGrow / totalGrow;
 		}
 	} else if (remaining < 0) {
-		let totalShrink = 0;
-		for (let i = 0; i < children.length; i++) totalShrink += children[i].flexShrink * baseSizes[i];
-		if (totalShrink > 0) {
-			const deficit = -remaining;
-			for (let i = 0; i < children.length; i++) {
+		const active = /* @__PURE__ */ new Set();
+		for (let i = 0; i < children.length; i++) {
+			const child = children[i];
+			const minMain = isRow ? child.minSize.width : child.minSize.height;
+			if (child.flexShrink > 0 && finalSizes[i] > minMain) active.add(i);
+		}
+		let deficit = -remaining;
+		const epsilon = 1e-9;
+		while (deficit > epsilon && active.size > 0) {
+			let totalShrink = 0;
+			for (const i of active) totalShrink += children[i].flexShrink * baseSizes[i];
+			if (totalShrink <= 0) break;
+			let distributed = 0;
+			for (const i of active) {
 				const child = children[i];
 				const shrinkRatio = child.flexShrink * baseSizes[i] / totalShrink;
 				const minMain = isRow ? child.minSize.width : child.minSize.height;
-				finalSizes[i] = Math.max(minMain, finalSizes[i] - deficit * shrinkRatio);
+				const shrink = Math.min(deficit * shrinkRatio, finalSizes[i] - minMain);
+				finalSizes[i] = finalSizes[i] - shrink;
+				distributed += shrink;
+				if (finalSizes[i] - minMain <= epsilon) {
+					finalSizes[i] = minMain;
+					active.delete(i);
+				}
 			}
+			if (distributed <= epsilon) break;
+			deficit -= distributed;
 		}
 	}
 	let actualTotal = totalGaps + totalMargins;
@@ -14141,13 +14307,24 @@ var CompositeNode = class extends Node {
 		const fillOpacity = style.fillOpacity ?? 1;
 		const strokeOpacity = style.strokeOpacity ?? 1;
 		this.applyStyle(ctx);
-		ctx.beginPath();
-		this.buildShapePath(ctx, x, y, width, height);
-		ctx.closePath();
-		ctx.globalAlpha = baseOpacity * fillOpacity;
-		ctx.fill();
-		ctx.globalAlpha = baseOpacity * strokeOpacity;
-		ctx.stroke();
+		if (this._shapeType === "custom" && this._pathFactory) {
+			const path = this._pathFactory(width, height);
+			ctx.save();
+			ctx.translate(x, y);
+			ctx.globalAlpha = baseOpacity * fillOpacity;
+			ctx.fill(path);
+			ctx.globalAlpha = baseOpacity * strokeOpacity;
+			ctx.stroke(path);
+			ctx.restore();
+		} else {
+			ctx.beginPath();
+			this.buildShapePath(ctx, x, y, width, height);
+			ctx.closePath();
+			ctx.globalAlpha = baseOpacity * fillOpacity;
+			ctx.fill();
+			ctx.globalAlpha = baseOpacity * strokeOpacity;
+			ctx.stroke();
+		}
 		ctx.globalAlpha = 1;
 		this.renderContents(ctx);
 	}
@@ -14169,15 +14346,6 @@ var CompositeNode = class extends Node {
 				break;
 			}
 			case "custom":
-				if (this._pathFactory) {
-					const path = this._pathFactory(w, h);
-					ctx.save();
-					ctx.translate(x, y);
-					ctx.fill(path);
-					ctx.stroke(path);
-					ctx.restore();
-					return;
-				}
 				this.buildRectPath(ctx, x, y, w, h);
 				break;
 			default:
@@ -14215,35 +14383,40 @@ var CompositeNode = class extends Node {
 	}
 	applyAutoSize(ctx) {
 		const contentSize = this._content.measure(ctx);
-		const inset = this.contentInset;
+		const bounds = this.getBounds();
+		const inset = resolveContentInset(this.contentInset, this.contentInsetScale, {
+			width: bounds.width,
+			height: bounds.height
+		}, this.contentInsetBaseSize);
 		const neededWidth = Math.max(this._minWidth, contentSize.width + inset.left + inset.right);
 		const neededHeight = Math.max(this._minHeight, contentSize.height + inset.top + inset.bottom);
 		if (neededWidth > this._width) this._width = neededWidth;
 		if (neededHeight > this._height) this._height = neededHeight;
 	}
 	getLabelContainerBounds(bounds) {
+		const insetBounds = super.getLabelContainerBounds(bounds);
 		if (this._shapeType === "circle") {
 			const factor = 1 / Math.SQRT2;
-			const w = bounds.width * factor;
-			const h = bounds.height * factor;
+			const w = insetBounds.width * factor;
+			const h = insetBounds.height * factor;
 			return {
-				x: bounds.x + (bounds.width - w) / 2,
-				y: bounds.y + (bounds.height - h) / 2,
+				x: insetBounds.x + (insetBounds.width - w) / 2,
+				y: insetBounds.y + (insetBounds.height - h) / 2,
 				width: w,
 				height: h
 			};
 		}
 		if (this._shapeType === "diamond") {
-			const w = bounds.width / 2;
-			const h = bounds.height / 2;
+			const w = insetBounds.width / 2;
+			const h = insetBounds.height / 2;
 			return {
-				x: bounds.x + (bounds.width - w) / 2,
-				y: bounds.y + (bounds.height - h) / 2,
+				x: insetBounds.x + (insetBounds.width - w) / 2,
+				y: insetBounds.y + (insetBounds.height - h) / 2,
 				width: w,
 				height: h
 			};
 		}
-		return super.getLabelContainerBounds(bounds);
+		return insetBounds;
 	}
 	/**
 	* Get the minimum content size needed for the content tree.
@@ -14451,16 +14624,22 @@ var DARK_THEME = {
 		}
 	}
 };
+function cloneTheme(theme) {
+	return structuredClone(theme);
+}
 /**
 * Manages styles and themes
 */
 var StyleManager = class {
 	constructor(theme) {
 		this._classes = /* @__PURE__ */ new Map();
-		this._builtInThemes = new Map([["default", DEFAULT_THEME], ["dark", DARK_THEME]]);
-		if (theme === void 0) this._theme = DEFAULT_THEME;
-		else if (typeof theme === "string") this._theme = this._builtInThemes.get(theme) ?? DEFAULT_THEME;
-		else this._theme = theme;
+		this._builtInThemes = new Map([["default", cloneTheme(DEFAULT_THEME)], ["dark", cloneTheme(DARK_THEME)]]);
+		const initialTheme = theme ?? "default";
+		if (typeof initialTheme === "string") {
+			const registeredTheme = this._builtInThemes.get(initialTheme);
+			if (registeredTheme === void 0) throw new Error(`Unknown theme: ${initialTheme}`);
+			this._theme = cloneTheme(registeredTheme);
+		} else this._theme = cloneTheme(initialTheme);
 	}
 	/**
 	* Current theme
@@ -14474,14 +14653,15 @@ var StyleManager = class {
 	setTheme(theme) {
 		if (typeof theme === "string") {
 			const builtIn = this._builtInThemes.get(theme);
-			if (builtIn !== void 0) this._theme = builtIn;
-		} else this._theme = theme;
+			if (builtIn === void 0) throw new Error(`Unknown theme: ${theme}`);
+			this._theme = cloneTheme(builtIn);
+		} else this._theme = cloneTheme(theme);
 	}
 	/**
 	* Register a custom theme
 	*/
 	registerTheme(theme) {
-		this._builtInThemes.set(theme.name, theme);
+		this._builtInThemes.set(theme.name, cloneTheme(theme));
 	}
 	/**
 	* Get all available theme names
@@ -14596,10 +14776,17 @@ var StyleManager = class {
 		}
 	}
 	getBaseEdgeStyle(state) {
+		const defaultStyle = this._theme.edge.default;
 		switch (state) {
-			case "hover": return this._theme.edge.hover;
-			case "selected": return this._theme.edge.selected;
-			default: return this._theme.edge.default;
+			case "hover": return {
+				...defaultStyle,
+				...this._theme.edge.hover
+			};
+			case "selected": return {
+				...defaultStyle,
+				...this._theme.edge.selected
+			};
+			default: return defaultStyle;
 		}
 	}
 };
@@ -14771,36 +14958,7 @@ var Serializer = class {
 			position: port.position,
 			styleClass: port.styleClass
 		}));
-		let label;
-		if (node.label) {
-			const ins = node.label.inset;
-			const defaultInset = 8;
-			const serializedInset = ins.top === defaultInset && ins.right === defaultInset && ins.bottom === defaultInset && ins.left === defaultInset ? void 0 : ins.top === ins.right && ins.top === ins.bottom && ins.top === ins.left ? ins.top : {
-				top: ins.top,
-				right: ins.right,
-				bottom: ins.bottom,
-				left: ins.left
-			};
-			if (hasNonDefaultValues({
-				text: node.label.text,
-				style: node.label.style,
-				maxWidth: node.label.maxWidth,
-				inset: serializedInset ?? void 0,
-				styleClass: node.label.styleClass
-			}, {
-				inset: void 0,
-				style: {},
-				maxWidth: void 0,
-				styleClass: void 0
-			})) label = omitEmptyValues({
-				text: node.label.text,
-				style: Object.keys(node.label.style).length > 0 ? node.label.style : void 0,
-				maxWidth: node.label.maxWidth,
-				inset: serializedInset,
-				styleClass: node.label.styleClass
-			});
-			else label = node.label.text;
-		}
+		const label = node.label ? this.serializeTextLabel(node.label) : void 0;
 		let icon;
 		if (node.icon) {
 			const opts = node.icon.options;
@@ -14833,6 +14991,8 @@ var Serializer = class {
 		if (hasNonDefaultValues(anchorData, anchorDefaults)) anchorPoints = omitDefaultValues(anchorData, anchorDefaults);
 		const contentInset = node.contentInset;
 		const hasContentInset = contentInset.top !== 0 || contentInset.right !== 0 || contentInset.bottom !== 0 || contentInset.left !== 0;
+		const contentInsetScale = node.contentInsetScale;
+		const hasContentInsetScale = Object.keys(contentInsetScale).length > 0;
 		const base = omitEmptyValues({
 			id: node.id,
 			type: node.typeName,
@@ -14840,14 +15000,16 @@ var Serializer = class {
 			y: node.y,
 			width: node.width,
 			height: node.height,
-			style: node.style,
+			style: { ...node.styleOverrides },
 			styleClass: node.styleClass,
 			label,
-			labelStyleClass: typeof label === "string" ? node.label?.styleClass : void 0,
 			labelPlacement: node.labelPlacement !== "center" ? node.labelPlacement : void 0,
 			labelGap: node.labelGap !== 4 ? node.labelGap : void 0,
 			icon,
 			contentInset: hasContentInset ? contentInset : void 0,
+			contentInsetScale: hasContentInsetScale ? contentInsetScale : void 0,
+			contentInsetBaseSize: node.contentInsetBaseSize,
+			badges: node.badges.length > 0 ? node.badges.map((badge) => ({ ...badge })) : void 0,
 			anchorPoints,
 			ports: ports.length > 0 ? ports : void 0,
 			data: Object.keys(node.data).length > 0 ? node.data : void 0
@@ -14874,14 +15036,14 @@ var Serializer = class {
 			arrowType: edge.arrowType,
 			startMarker: edge.startMarker,
 			endMarker: edge.endMarker,
-			style: edge.style,
+			style: { ...edge.styleOverrides },
 			styleClass: edge.styleClass,
-			label: edge.label?.text,
-			labelStyleClass: edge.label?.styleClass,
+			label: edge.label ? this.serializeTextLabel(edge.label) : void 0,
 			labelOffset: edge.labelOffset !== 0 ? edge.labelOffset : void 0,
 			labelPosition: edge.labelPosition !== .5 ? edge.labelPosition : void 0,
 			labelFollowPath: edge.labelFollowPath ? true : void 0,
 			labelBackground: edge.labelBackground,
+			lockAnchors: edge.lockAnchors ? void 0 : false,
 			labelLineGap: edge.labelLineGap ? true : void 0,
 			data: Object.keys(edge.data).length > 0 ? edge.data : void 0
 		};
@@ -14890,12 +15052,31 @@ var Serializer = class {
 		return {
 			id: group.id,
 			childIds: group.children.map((c) => c.id),
-			style: group.style,
+			style: { ...group.styleOverrides },
 			styleClass: group.styleClass,
 			label: group.label,
+			padding: group.padding !== 20 ? group.padding : void 0,
 			data: Object.keys(group.data).length > 0 ? group.data : void 0
 		};
 	}
+	serializeTextLabel(label) {
+		const inset = label.inset;
+		const serializedInset = inset.top === 8 && inset.right === 8 && inset.bottom === 8 && inset.left === 8 ? void 0 : inset.top === inset.right && inset.top === inset.bottom && inset.top === inset.left ? inset.top : {
+			top: inset.top,
+			right: inset.right,
+			bottom: inset.bottom,
+			left: inset.left
+		};
+		const style = label.styleOverrides;
+		if (!(Object.keys(style).length > 0 || label.maxWidth !== void 0 || serializedInset !== void 0 || label.styleClass !== void 0)) return label.text;
+		return omitEmptyValues({
+			text: label.text,
+			style: Object.keys(style).length > 0 ? style : void 0,
+			maxWidth: label.maxWidth,
+			inset: serializedInset,
+			styleClass: label.styleClass
+		});
+	}
 };
 //#endregion
 //#region src/utils/download.ts
@@ -14977,7 +15158,11 @@ var ImageExporter = class {
 		const padding = options.padding ?? 20;
 		const format = options.format ?? "png";
 		const quality = options.quality ?? .92;
-		const bounds = getContentBounds({ nodes: this.renderer.nodes.values() });
+		const bounds = getContentBounds({
+			nodes: this.renderer.nodes.values(),
+			edges: this.renderer.edges.values(),
+			groups: this.renderer.groups.values()
+		});
 		if (bounds === null) return this.createBlankImage(100, 100, backgroundColor, format, quality);
 		const width = (bounds.width + padding * 2) * scale;
 		const height = (bounds.height + padding * 2) * scale;
@@ -15029,6 +15214,7 @@ var SvgExporter = class {
 		const padding = options.padding ?? 20;
 		const includeBackground = options.includeBackground ?? true;
 		const backgroundColor = options.backgroundColor ?? "#ffffff";
+		const escapedBackgroundColor = this.escapeAttribute(backgroundColor);
 		const edgeLabelOffset = options.edgeLabelOffset;
 		const bounds = getContentBounds({
 			nodes: this.renderer.nodes.values(),
@@ -15045,7 +15231,7 @@ var SvgExporter = class {
 		const renderedEdges = [];
 		parts.push(`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`);
 		for (const edge of this.renderer.edges.values()) if (edge.visible) renderedEdges.push(this.renderEdge(edge, edgeLabelOffset));
-		if (includeBackground) parts.push(`<rect width="100%" height="100%" fill="${backgroundColor}"/>`);
+		if (includeBackground) parts.push(`<rect width="100%" height="100%" fill="${escapedBackgroundColor}"/>`);
 		parts.push(`<g transform="translate(${offsetX}, ${offsetY})">`);
 		for (const group of this.renderer.groups.values()) if (group.visible) parts.push(this.renderGroup(group));
 		for (const node of this.renderer.nodes.values()) if (node.visible) parts.push(this.renderNode(node));
@@ -15064,8 +15250,8 @@ var SvgExporter = class {
 	renderGroup(group) {
 		const bounds = group.getBounds();
 		const style = group.style;
-		const fill = style.fillColor ?? "rgba(200, 200, 200, 0.2)";
-		const stroke = style.strokeColor ?? "#999999";
+		const fill = this.escapeAttribute(style.fillColor ?? "rgba(200, 200, 200, 0.2)");
+		const stroke = this.escapeAttribute(style.strokeColor ?? "#999999");
 		const strokeWidth = style.strokeWidth ?? 1;
 		const opacity = style.opacity ?? 1;
 		const label = group.label ? `<text x="${bounds.x + 8}" y="${bounds.y + 14}" fill="#666666" font-size="12">${this.escapeText(group.label)}</text>` : "";
@@ -15079,8 +15265,8 @@ var SvgExporter = class {
 	renderNode(node) {
 		const bounds = node.getBounds();
 		const style = node.style;
-		const fill = style.fillColor ?? "#ffffff";
-		const stroke = style.strokeColor ?? "#333333";
+		const fill = this.escapeAttribute(style.fillColor ?? "#ffffff");
+		const stroke = this.escapeAttribute(style.strokeColor ?? "#333333");
 		const strokeWidth = style.strokeWidth ?? 2;
 		const baseOpacity = style.opacity ?? 1;
 		const fillOpacity = (style.fillOpacity ?? 1) * baseOpacity;
@@ -15177,14 +15363,15 @@ var SvgExporter = class {
 		if (edge.path.length < 2) return "";
 		const style = edge.style;
 		const stroke = style.strokeColor ?? "#666666";
+		const escapedStroke = this.escapeAttribute(stroke);
 		const strokeWidth = style.strokeWidth ?? 2;
 		const strokeOpacity = (style.strokeOpacity ?? 1) * (style.opacity ?? 1);
-		const lineCap = style.lineCap ? ` stroke-linecap="${style.lineCap}"` : "";
-		const lineJoin = style.lineJoin ? ` stroke-linejoin="${style.lineJoin}"` : "";
+		const lineCap = style.lineCap ? ` stroke-linecap="${this.escapeAttribute(style.lineCap)}"` : "";
+		const lineJoin = style.lineJoin ? ` stroke-linejoin="${this.escapeAttribute(style.lineJoin)}"` : "";
 		const dashValues = style.flowDash ?? style.lineDash;
 		const dash = dashValues ? ` stroke-dasharray="${dashValues.join(" ")}"` : "";
 		const dashOffset = style.lineDashOffset !== void 0 ? ` stroke-dashoffset="${style.lineDashOffset}"` : "";
-		return `<path d="${this.buildEdgePath(edge, edgeLabelOffset)}" fill="none" stroke="${stroke}" stroke-width="${strokeWidth}" stroke-opacity="${strokeOpacity}" color="${stroke}"${lineCap}${lineJoin}${dash}${dashOffset}/>${this.renderEdgeMarkers(edge, stroke)}${this.renderEdgeLabel(edge, edgeLabelOffset)}`;
+		return `<path d="${this.buildEdgePath(edge, edgeLabelOffset)}" fill="none" stroke="${escapedStroke}" stroke-width="${strokeWidth}" stroke-opacity="${strokeOpacity}" color="${escapedStroke}"${lineCap}${lineJoin}${dash}${dashOffset}/>${this.renderEdgeMarkers(edge, stroke)}${this.renderEdgeLabel(edge, edgeLabelOffset)}`;
 	}
 	renderEdgeLabel(edge, edgeLabelOffset) {
 		if (!edge.label) return "";
@@ -15196,7 +15383,7 @@ var SvgExporter = class {
 	renderEdgeLabelBackground(edge, point, rotation = 0) {
 		if (!edge.label) return "";
 		const metrics = this.measureTextLabel(edge.label.text, edge.label.style, edge.label.inset);
-		const bgColor = edge.labelBackground?.color ?? "#ffffff";
+		const bgColor = this.escapeAttribute(edge.labelBackground?.color ?? "#ffffff");
 		const bgOpacity = edge.labelBackground?.opacity ?? 1;
 		const bgRadius = edge.labelBackground?.borderRadius ?? 2;
 		const x = point.x - metrics.width / 2;
@@ -15277,7 +15464,11 @@ var SvgExporter = class {
 		return calculateMarkerPoints(edge.path, position, edge.type);
 	}
 	renderMarkerShape(marker, from, to, edgeStroke) {
-		return generateSvgMarker(marker, from, to, edgeStroke);
+		return generateSvgMarker({
+			...marker,
+			strokeColor: marker.strokeColor !== void 0 ? this.escapeAttribute(marker.strokeColor) : void 0,
+			fillColor: marker.fillColor !== void 0 ? this.escapeAttribute(marker.fillColor) : void 0
+		}, from, to, this.escapeAttribute(edgeStroke));
 	}
 	buildPath(edge) {
 		const path = edge.path;
@@ -15347,11 +15538,11 @@ var SvgExporter = class {
 		};
 	}
 	renderTextLabel(text, point, style = {}, rotation = 0) {
-		const fill = style.color ?? "#000000";
+		const fill = this.escapeAttribute(style.color ?? "#000000");
 		const fontSize = style.fontSize ?? 14;
-		const fontFamily = style.fontFamily ?? "sans-serif";
-		const fontWeight = style.fontWeight ?? "normal";
-		const fontStyle = style.fontStyle ?? "normal";
+		const fontFamily = this.escapeAttribute(style.fontFamily ?? "sans-serif");
+		const fontWeight = this.escapeAttribute(style.fontWeight ?? "normal");
+		const fontStyle = this.escapeAttribute(style.fontStyle ?? "normal");
 		const fontStyleAttr = fontStyle !== "normal" ? ` font-style="${fontStyle}"` : "";
 		const opacity = style.opacity ?? 1;
 		const anchor = style.align === "left" ? "start" : style.align === "right" ? "end" : "middle";
@@ -15547,9 +15738,10 @@ var SvgExporter = class {
 		return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 	}
 	createEmptySvg(width, height, backgroundColor, includeBackground) {
+		const escapedBackgroundColor = this.escapeAttribute(backgroundColor);
 		return [
 			`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">`,
-			includeBackground ? `<rect width="100%" height="100%" fill="${backgroundColor}"/>` : "",
+			includeBackground ? `<rect width="100%" height="100%" fill="${escapedBackgroundColor}"/>` : "",
 			"</svg>"
 		].join("");
 	}