@ngroznykh/papirus 0.9.3 → 0.9.5

package/dist/papirus.js

@@ -1255,6 +1255,9 @@ var DragManager = class extends EventEmitter {
 };
 //#endregion
 //#region src/core/ResizeManager.ts
+function cursorForResizeHandle(handle) {
+	return handle === "nw" || handle === "se" ? "nwse-resize" : "nesw-resize";
+}
 /**
 * Manages node resizing via corner handles
 */
@@ -1320,6 +1323,16 @@ var ResizeManager = class extends EventEmitter {
 		return true;
 	}
 	/**
+	* Set canvas cursor when the pointer is over a selected node's resize handle.
+	* Call after badge/connection hover so the resize cursor wins on corners.
+	*/
+	updateHoverCursor(event) {
+		if (this.renderer.blocksDiagramPointerAtScreen(event.screenX, event.screenY)) return;
+		const handle = this.isResizing ? this.handle : this.hitTestSelectedHandle(event);
+		if (!handle) return;
+		this.setCursor(cursorForResizeHandle(handle));
+	}
+	/**
 	* Handle mouse move - update resize
 	*/
 	handleMouseMove(event) {
@@ -1436,6 +1449,20 @@ var ResizeManager = class extends EventEmitter {
 			height
 		};
 	}
+	hitTestSelectedHandle(event) {
+		const selectedIds = Array.from(this.selectionManager.selectedIds);
+		if (selectedIds.length !== 1) return null;
+		const node = this.renderer.getNode(selectedIds[0]);
+		if (!node) return null;
+		return node.hitTestResizeHandle({
+			x: event.worldX,
+			y: event.worldY
+		});
+	}
+	setCursor(cursor) {
+		const canvas = this.renderer.getCanvas();
+		if (canvas.style.cursor !== cursor) canvas.style.cursor = cursor;
+	}
 	reset() {
 		this.isResizing = false;
 		this.resizedNodeId = null;
@@ -1456,7 +1483,7 @@ function getContentBounds({ nodes, edges, groups, includeInvisible = false }) {
 	let hasContent = false;
 	const consider = (source) => {
 		if (!includeInvisible && !source.visible) return;
-		const bounds = source.getBounds();
+		const bounds = source.getVisualBounds?.() ?? source.getBounds();
 		minX = Math.min(minX, bounds.x);
 		minY = Math.min(minY, bounds.y);
 		maxX = Math.max(maxX, bounds.x + bounds.width);
@@ -1671,6 +1698,133 @@ var NavigationManager = class extends EventEmitter {
 	}
 };
 //#endregion
+//#region src/utils/edgePath.ts
+/**
+* Point and tangent angle at a normalized position along an edge path (0..1 by length).
+*/
+function getPathPointAt(path, type, position) {
+	if (type !== "bezier" || path.length < 4) return getPointAlongPolyline(path, position);
+	const samples = [];
+	const steps = 20;
+	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];
+		for (let sample = 0; sample <= steps; sample++) {
+			const t = sample / steps;
+			if (samples.length > 0 && t === 0) continue;
+			samples.push(bezierPoint(start, control1, control2, end, t));
+		}
+	}
+	return getPointAlongPolyline(samples, position);
+}
+function getPointAlongPolyline(path, position) {
+	if (path.length === 0) return {
+		point: {
+			x: 0,
+			y: 0
+		},
+		angle: 0
+	};
+	if (path.length === 1) return {
+		point: path[0],
+		angle: 0
+	};
+	let totalLength = 0;
+	const segments = [];
+	for (let i = 1; i < path.length; i++) {
+		const start = path[i - 1];
+		const end = path[i];
+		const length = Math.hypot(end.x - start.x, end.y - start.y);
+		segments.push({
+			start,
+			end,
+			length
+		});
+		totalLength += length;
+	}
+	const targetLength = totalLength * Math.max(0, Math.min(1, position));
+	let accumulated = 0;
+	for (const segment of segments) {
+		if (accumulated + segment.length >= targetLength) {
+			const segmentPosition = segment.length > 0 ? (targetLength - accumulated) / segment.length : 0;
+			return {
+				point: {
+					x: segment.start.x + segmentPosition * (segment.end.x - segment.start.x),
+					y: segment.start.y + segmentPosition * (segment.end.y - segment.start.y)
+				},
+				angle: Math.atan2(segment.end.y - segment.start.y, segment.end.x - segment.start.x)
+			};
+		}
+		accumulated += segment.length;
+	}
+	const lastSegment = segments[segments.length - 1];
+	return {
+		point: lastSegment.end,
+		angle: Math.atan2(lastSegment.end.y - lastSegment.start.y, lastSegment.end.x - lastSegment.start.x)
+	};
+}
+/** Map tangent angle to a cardinal direction used by polyline routing. */
+function directionFromAngle(angle) {
+	const twoPi = Math.PI * 2;
+	const a = (angle % twoPi + twoPi) % twoPi;
+	if (a >= Math.PI * .25 && a < Math.PI * .75) return "bottom";
+	if (a >= Math.PI * .75 && a < Math.PI * 1.25) return "left";
+	if (a >= Math.PI * 1.25 && a < Math.PI * 1.75) return "top";
+	return "right";
+}
+function closestPointOnPolyline(polyline, point) {
+	if (polyline.length < 2) return null;
+	let totalLength = 0;
+	for (let i = 1; i < polyline.length; i++) {
+		const start = polyline[i - 1];
+		const end = polyline[i];
+		totalLength += Math.hypot(end.x - start.x, end.y - start.y);
+	}
+	let bestPoint = polyline[0];
+	let bestParam = 0;
+	let bestDist = Infinity;
+	let accumulated = 0;
+	for (let i = 1; i < polyline.length; i++) {
+		const start = polyline[i - 1];
+		const end = polyline[i];
+		const dx = end.x - start.x;
+		const dy = end.y - start.y;
+		const lengthSq = dx * dx + dy * dy;
+		const segLen = Math.sqrt(lengthSq);
+		const t = lengthSq === 0 ? 0 : Math.max(0, Math.min(1, ((point.x - start.x) * dx + (point.y - start.y) * dy) / lengthSq));
+		const proj = {
+			x: start.x + t * dx,
+			y: start.y + t * dy
+		};
+		const dist = Math.hypot(point.x - proj.x, point.y - proj.y);
+		if (dist < bestDist) {
+			bestDist = dist;
+			bestPoint = proj;
+			bestParam = totalLength > 0 ? (accumulated + t * segLen) / totalLength : 0;
+		}
+		accumulated += segLen;
+	}
+	return {
+		point: bestPoint,
+		pathParam: bestParam,
+		distance: bestDist
+	};
+}
+/**
+* Nearest point on an edge path to `point`.
+* Polylines project onto real segments so a click on a long orthogonal stroke
+* is not lost between length samples. Bezier paths are densified, then projected.
+*/
+function getClosestPointOnPath(path, type, point, samples = 48) {
+	if (path.length < 2) return null;
+	if (type !== "bezier" || path.length < 4) return closestPointOnPolyline(path, point);
+	const densified = [];
+	for (let i = 0; i <= samples; i++) densified.push(getPathPointAt(path, type, i / samples).point);
+	return closestPointOnPolyline(densified, point);
+}
+//#endregion
 //#region src/utils/direction.ts
 /**
 * Map outline param [0,1) to cardinal direction.
@@ -2048,7 +2202,18 @@ var ConnectionManager = class extends EventEmitter {
 		let snappedPoint = point;
 		let snappedDir;
 		let targetNode = this.getNodeAtPoint(point, true);
-		if (this.attachToOutline) {
+		const edgeDrop = this.originalEdgeEndpoint?.edgeId ? this.findEdgeDropTarget(point, {
+			maxScreenPx: 40,
+			skipEdgeIds: new Set([edge.id])
+		}) : null;
+		if (edgeDrop) {
+			const at = edgeDrop.edge.getPointAt(edgeDrop.pathParam);
+			snappedPoint = edgeDrop.point;
+			snappedDir = at ? directionFromAngle(at.angle) : void 0;
+			targetNode = null;
+			this.reconnectingOutlineParam = null;
+			this.reconnectingTargetNodeId = null;
+		} else if (this.attachToOutline) {
 			const tolerance = 40 / Math.max(this.renderer.zoom, 1e-4);
 			const toleranceSq = tolerance * tolerance;
 			let bestDistSq = Infinity;
@@ -2215,6 +2380,9 @@ var ConnectionManager = class extends EventEmitter {
 		this.previewTargetNodeId = null;
 		this.previewTargetEdgeId = null;
 		this.previewTargetPathParam = null;
+		const rawNode = this.getRawNodeAtPoint(cursorPoint);
+		const forbiddenFill = !!this._connectionValidator && !!this.sourceNode && !!rawNode && !this._connectionValidator(this.sourceNode.id, rawNode.id);
+		const searchGroupFill = !!rawNode && (forbiddenFill || this.nodeContainsSource(rawNode) || this.nodeLooksLikeContainer(rawNode));
 		let targetNode = this.getNodeAtPoint(cursorPoint, false);
 		if (this.attachToOutline) {
 			const tolerance = 40 / Math.max(this.renderer.zoom, 1e-4);
@@ -2258,7 +2426,7 @@ var ConnectionManager = class extends EventEmitter {
 				}
 			}
 		}
-		const edgeDrop = this.findEdgeDropTarget(cursorPoint);
+		const edgeDrop = this.findEdgeDropTarget(cursorPoint, searchGroupFill ? { maxScreenPx: 40 } : void 0);
 		if (edgeDrop) {
 			let nodeDistance = Infinity;
 			if (targetNode) {
@@ -2266,7 +2434,7 @@ var ConnectionManager = class extends EventEmitter {
 				const dy = cursorPoint.y - snappedPoint.y;
 				nodeDistance = Math.sqrt(dx * dx + dy * dy);
 			}
-			if (!targetNode || edgeDrop.distance < nodeDistance) {
+			if (searchGroupFill || !targetNode || edgeDrop.distance <= nodeDistance) {
 				targetNode = null;
 				this.previewTargetNodeId = null;
 				this.previewTargetOutlineParam = null;
@@ -2275,6 +2443,12 @@ var ConnectionManager = class extends EventEmitter {
 				this.previewTargetEdgeId = edgeDrop.edge.id;
 				this.previewTargetPathParam = edgeDrop.pathParam;
 			}
+		} else if (searchGroupFill) {
+			targetNode = null;
+			this.previewTargetNodeId = null;
+			this.previewTargetOutlineParam = null;
+			this.previewTargetAnchorId = null;
+			snappedPoint = cursorPoint;
 		}
 		if (targetNode) {
 			const forbidden = this._connectionValidator && this.sourceNode && !this._connectionValidator(this.sourceNode.id, targetNode.id);
@@ -2336,9 +2510,23 @@ var ConnectionManager = class extends EventEmitter {
 				y: event.worldY
 			};
 			let reconnected = false;
+			const edgeDrop = this.originalEdgeEndpoint?.edgeId ? this.findEdgeDropTarget(point, {
+				maxScreenPx: 40,
+				skipEdgeIds: new Set([this.reconnectingEdge.id])
+			}) : null;
+			if (edgeDrop) {
+				const endpoint = {
+					edgeId: edgeDrop.edgeId,
+					pathParam: edgeDrop.pathParam
+				};
+				if (this.reconnectingEndpoint === "start") this.reconnectingEdge.from = endpoint;
+				else this.reconnectingEdge.to = endpoint;
+				reconnected = true;
+				this.emit("edgeReconnect", this.reconnectingEdge, this.reconnectingEndpoint);
+			}
 			let node = this.getNodeAtPoint(point, true);
 			if (!node && this.attachToOutline && this.reconnectingTargetNodeId) node = this.renderer.getNode(this.reconnectingTargetNodeId) ?? null;
-			if (node) {
+			if (!reconnected && node) {
 				if (this.attachToOutline && this.reconnectingOutlineParam !== null) {
 					const endpoint = {
 						nodeId: node.id,
@@ -2543,11 +2731,12 @@ var ConnectionManager = class extends EventEmitter {
 	/**
 	* Find the nearest edge under the cursor for junction / note→relation drops.
 	*/
-	findEdgeDropTarget(point) {
-		const tolerance = Math.max(14, 20 / Math.max(this.renderer.zoom, 1e-4));
+	findEdgeDropTarget(point, options) {
+		const tolerance = options?.maxScreenPx === void 0 ? Math.max(14, 20 / Math.max(this.renderer.zoom, 1e-4)) : options.maxScreenPx / Math.max(this.renderer.zoom, 1e-4);
 		let best = null;
 		for (const edge of this.renderer.edges.values()) {
 			if (!edge.visible || edge.path.length < 2) continue;
+			if (options?.skipEdgeIds?.has(edge.id)) continue;
 			const closest = edge.getClosestPointOnPath(point);
 			if (!closest || closest.distance > tolerance) continue;
 			if (!best || closest.distance < best.distance) best = {
@@ -2806,6 +2995,26 @@ var ConnectionManager = class extends EventEmitter {
 		}
 		return null;
 	}
+	getRawNodeAtPoint(point) {
+		const nodes = Array.from(this.renderer.nodes.values());
+		for (let i = nodes.length - 1; i >= 0; i--) {
+			const node = nodes[i];
+			if (node.visible && node.hitTest(point)) return node;
+		}
+		return null;
+	}
+	nodeLooksLikeContainer(node, source = this.sourceNode) {
+		if (!source || source.id === node.id) return false;
+		return node.width * node.height >= Math.max(source.width * source.height, 1) * 4;
+	}
+	nodeContainsSource(node, source = this.sourceNode) {
+		if (!source || source.id === node.id) return false;
+		const sourceBounds = source.getBounds();
+		const nodeBounds = node.getBounds();
+		const cx = sourceBounds.x + sourceBounds.width / 2;
+		const cy = sourceBounds.y + sourceBounds.height / 2;
+		return cx >= nodeBounds.x && cx <= nodeBounds.x + nodeBounds.width && cy >= nodeBounds.y && cy <= nodeBounds.y + nodeBounds.height;
+	}
 	startOutlineConnection(node, attach) {
 		const { point: outlinePoint, param } = node.getClosestPointOnOutline(attach);
 		this.sourceNode = node;
@@ -2940,6 +3149,9 @@ function getHistoryShortcut(event, keys = DEFAULT_HISTORY_SHORTCUT_KEYS) {
 }
 //#endregion
 //#region src/utils/style.ts
+function canvasFontFromTextStyle(style) {
+	return `${style.fontStyle ?? "normal"} ${style.fontWeight ?? "normal"} ${style.fontSize ?? 14}px ${style.fontFamily ?? "sans-serif"}`;
+}
 /**
 * Shallow compare two objects
 */
@@ -3039,6 +3251,7 @@ var DEFAULT_STYLE = {
 	fontSize: 14,
 	fontFamily: "sans-serif",
 	fontWeight: "normal",
+	fontStyle: "normal",
 	color: "#000000",
 	opacity: 1,
 	align: "center",
@@ -3283,9 +3496,7 @@ var TextLabel = class {
 		this.render(ctx, bounds);
 	}
 	applyStyle(ctx) {
-		const fontSize = this._style.fontSize ?? 14;
-		const fontFamily = this._style.fontFamily ?? "sans-serif";
-		ctx.font = `${this._style.fontWeight ?? "normal"} ${fontSize}px ${fontFamily}`;
+		ctx.font = canvasFontFromTextStyle(this._style);
 		ctx.textAlign = this._style.align ?? "center";
 		ctx.textBaseline = this._style.baseline ?? "middle";
 	}
@@ -3919,109 +4130,6 @@ var Element = class {
 	}
 };
 //#endregion
-//#region src/utils/edgePath.ts
-/**
-* Point and tangent angle at a normalized position along an edge path (0..1 by length).
-*/
-function getPathPointAt(path, type, position) {
-	if (type !== "bezier" || path.length < 4) return getPointAlongPolyline(path, position);
-	const samples = [];
-	const steps = 20;
-	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];
-		for (let sample = 0; sample <= steps; sample++) {
-			const t = sample / steps;
-			if (samples.length > 0 && t === 0) continue;
-			samples.push(bezierPoint(start, control1, control2, end, t));
-		}
-	}
-	return getPointAlongPolyline(samples, position);
-}
-function getPointAlongPolyline(path, position) {
-	if (path.length === 0) return {
-		point: {
-			x: 0,
-			y: 0
-		},
-		angle: 0
-	};
-	if (path.length === 1) return {
-		point: path[0],
-		angle: 0
-	};
-	let totalLength = 0;
-	const segments = [];
-	for (let i = 1; i < path.length; i++) {
-		const start = path[i - 1];
-		const end = path[i];
-		const length = Math.hypot(end.x - start.x, end.y - start.y);
-		segments.push({
-			start,
-			end,
-			length
-		});
-		totalLength += length;
-	}
-	const targetLength = totalLength * Math.max(0, Math.min(1, position));
-	let accumulated = 0;
-	for (const segment of segments) {
-		if (accumulated + segment.length >= targetLength) {
-			const segmentPosition = segment.length > 0 ? (targetLength - accumulated) / segment.length : 0;
-			return {
-				point: {
-					x: segment.start.x + segmentPosition * (segment.end.x - segment.start.x),
-					y: segment.start.y + segmentPosition * (segment.end.y - segment.start.y)
-				},
-				angle: Math.atan2(segment.end.y - segment.start.y, segment.end.x - segment.start.x)
-			};
-		}
-		accumulated += segment.length;
-	}
-	const lastSegment = segments[segments.length - 1];
-	return {
-		point: lastSegment.end,
-		angle: Math.atan2(lastSegment.end.y - lastSegment.start.y, lastSegment.end.x - lastSegment.start.x)
-	};
-}
-/** Map tangent angle to a cardinal direction used by polyline routing. */
-function directionFromAngle(angle) {
-	const twoPi = Math.PI * 2;
-	const a = (angle % twoPi + twoPi) % twoPi;
-	if (a >= Math.PI * .25 && a < Math.PI * .75) return "bottom";
-	if (a >= Math.PI * .75 && a < Math.PI * 1.25) return "left";
-	if (a >= Math.PI * 1.25 && a < Math.PI * 1.75) return "top";
-	return "right";
-}
-/**
-* Nearest point on an edge path to `point`, by sampling along normalized length.
-*/
-function getClosestPointOnPath(path, type, point, samples = 48) {
-	if (path.length < 2) return null;
-	let bestPoint = getPathPointAt(path, type, 0).point;
-	let bestParam = 0;
-	let bestDistSq = Infinity;
-	for (let i = 0; i <= samples; i++) {
-		const pathParam = i / samples;
-		const at = getPathPointAt(path, type, pathParam).point;
-		const dx = at.x - point.x;
-		const dy = at.y - point.y;
-		const distSq = dx * dx + dy * dy;
-		if (distSq < bestDistSq) {
-			bestDistSq = distSq;
-			bestPoint = at;
-			bestParam = pathParam;
-		}
-	}
-	return {
-		point: bestPoint,
-		pathParam: bestParam,
-		distance: Math.sqrt(bestDistSq)
-	};
-}
-//#endregion
 //#region src/elements/paths/StraightPathStrategy.ts
 /**
 * Straight line path strategy
@@ -7083,7 +7191,12 @@ var Edge = class extends Element {
 	* Nearest point on this edge's path to `point` (world coordinates).
 	*/
 	getClosestPointOnPath(point) {
-		return getClosestPointOnPath(this._path, this._type, point);
+		const onPath = getClosestPointOnPath(this._path, this._type, point);
+		if (onPath) return onPath;
+		const start = this._fromPoint;
+		const end = this._toPoint;
+		if (start.x === end.x && start.y === end.y) return null;
+		return getClosestPointOnPath([start, end], "straight", point);
 	}
 	/**
 	* Get world position of label center along path.
@@ -7839,9 +7952,13 @@ var InteractionManager = class {
 		if (overOverlayPointerSink && !this.connectionManager.connecting && !this.connectionManager.isEditingEdgeControlPoint) this.connectionManager.clearPointerHover();
 		if (overScrollbar || blockDiagramRoutesUnderOverlay) return;
 		if (!this.navigationOnly) {
-			if (this.resizeManager.handleMouseMove(event)) return;
+			if (this.resizeManager.handleMouseMove(event)) {
+				this.resizeManager.updateHoverCursor(event);
+				return;
+			}
 			if (this.connectionManager.handleMouseMove(event)) return;
 			if (this.dragManager.handleMouseMove(event)) return;
+			this.resizeManager.updateHoverCursor(event);
 		}
 		if (this.selectionManager.selectionRectangle !== null) {
 			this.selectionManager.updateSelectionRect({
@@ -7940,7 +8057,13 @@ var InteractionManager = class {
 		}
 		if ("typeName" in hitElement) {
 			if (hitElement.typeName === "composite") {
-				this.startCompositeNameEdit(hitElement);
+				const composite = hitElement;
+				if (composite.usesExternalLabel()) {
+					const editText = composite.label?.editableText ?? composite.label?.text ?? "";
+					this.startLabelEdit("node", composite.id, editText, composite.getLabelPosition());
+					return;
+				}
+				this.startCompositeNameEdit(composite);
 				return;
 			}
 			const editText = hitElement.label?.editableText ?? hitElement.label?.text ?? "";
@@ -9607,19 +9730,27 @@ var DiagramRenderer = class extends EventEmitter {
 		return this._groups.get(groupId);
 	}
 	/**
-	* Find element at a point (nodes, then edges, then groups)
+	* Find element at a point. Edges are painted above nodes, so a stroke over a
+	* nested pool/lane fill is hit before the covering container.
 	*/
 	getElementAtPoint(worldPoint) {
+		let bestEdge;
+		let bestDist = Infinity;
+		for (const edge of this._edges.values()) {
+			if (!edge.visible) continue;
+			const tolerance = Math.max((edge.style.strokeWidth ?? 2) * 2, 8) / Math.max(this._zoom, 1e-4);
+			const closest = edge.getClosestPointOnPath(worldPoint);
+			if (closest && closest.distance <= tolerance && closest.distance < bestDist) {
+				bestDist = closest.distance;
+				bestEdge = edge;
+			}
+		}
+		if (bestEdge) return bestEdge;
 		const nodesArray = Array.from(this._nodes.values());
 		for (let i = nodesArray.length - 1; i >= 0; i--) {
 			const node = nodesArray[i];
 			if (node.visible && node.hitTest(worldPoint)) return node;
 		}
-		for (const edge of this._edges.values()) {
-			if (!edge.visible) continue;
-			const tolerance = Math.max((edge.style.strokeWidth ?? 2) * 2, 8) / Math.max(this._zoom, 1e-4);
-			if (edge.hitTestWithTolerance(worldPoint, tolerance)) return edge;
-		}
 		for (const group of this._groups.values()) if (group.visible && group.hitTest(worldPoint)) return group;
 	}
 	/**
@@ -10635,6 +10766,52 @@ var NodeImage = class {
 	}
 };
 //#endregion
+//#region src/utils/labelPlacement.ts
+var DEFAULT_LABEL_GAP = 4;
+function isExternalLabelPlacement(placement) {
+	return placement === "top" || placement === "bottom" || placement === "left" || placement === "right";
+}
+function externalLabelWrapWidth(shapeWidth) {
+	return Math.max(shapeWidth, 80);
+}
+function resolveExternalLabelBounds(shape, placement, gap, measured) {
+	const width = Math.max(0, measured.width);
+	const height = Math.max(0, measured.height);
+	const safeGap = Number.isFinite(gap) ? gap : 4;
+	switch (placement) {
+		case "top": return {
+			x: shape.x + (shape.width - width) / 2,
+			y: shape.y - safeGap - height,
+			width,
+			height
+		};
+		case "bottom": return {
+			x: shape.x + (shape.width - width) / 2,
+			y: shape.y + shape.height + safeGap,
+			width,
+			height
+		};
+		case "left": return {
+			x: shape.x - safeGap - width,
+			y: shape.y + (shape.height - height) / 2,
+			width,
+			height
+		};
+		case "right": return {
+			x: shape.x + shape.width + safeGap,
+			y: shape.y + (shape.height - height) / 2,
+			width,
+			height
+		};
+	}
+}
+function unionBounds(a, b) {
+	return rectUnion(a, b);
+}
+function pointInBounds(point, bounds) {
+	return pointInRect(point, bounds);
+}
+//#endregion
 //#region src/utils/resolveContentInset.ts
 function axisFactor(node, base) {
 	if (base === void 0 || !(base > 0) || !Number.isFinite(base)) return 1;
@@ -10707,6 +10884,8 @@ var Node = class extends Element {
 		this._contentInset = this.normalizeContentInset(options.contentInset);
 		this._contentInsetScale = this.normalizeContentInsetScale(options.contentInsetScale);
 		this._contentInsetBaseSize = this.normalizeContentInsetBaseSize(options.contentInsetBaseSize);
+		this._labelPlacement = options.labelPlacement ?? "center";
+		this._labelGap = options.labelGap !== void 0 && Number.isFinite(options.labelGap) ? Math.max(0, options.labelGap) : 4;
 		if (options.label !== void 0) if (typeof options.label === "string") this._label = new TextLabel({
 			text: options.label,
 			onChange: () => this.markDirty()
@@ -10757,6 +10936,33 @@ var Node = class extends Element {
 	get ports() {
 		return this._ports;
 	}
+	get labelPlacement() {
+		return this._labelPlacement;
+	}
+	set labelPlacement(value) {
+		if (this._labelPlacement !== value) {
+			this._labelPlacement = value;
+			this.markDirty();
+		}
+	}
+	get labelGap() {
+		return this._labelGap;
+	}
+	set labelGap(value) {
+		const next = Number.isFinite(value) ? Math.max(0, value) : 4;
+		if (this._labelGap !== next) {
+			this._labelGap = next;
+			this.markDirty();
+		}
+	}
+	usesExternalLabel() {
+		return isExternalLabelPlacement(this._labelPlacement) && this._label !== void 0;
+	}
+	getVisualBounds() {
+		const shape = this.getBounds();
+		if (!this.usesExternalLabel()) return shape;
+		return unionBounds(shape, this.getResolvedLabelBounds());
+	}
 	/**
 	* Text label
 	*/
@@ -10980,13 +11186,15 @@ var Node = class extends Element {
 	* Calculate layout for icon and label.
 	* Label always gets full content area; icon is placed within the same content area.
 	*/
-	calculateContentLayout(bounds, iconBoxSize, _labelSize) {
+	calculateContentLayout(bounds, iconBoxSize, labelSize) {
+		const iconContainer = this.getIconContainerBounds(bounds);
 		const contentBounds = this.getLabelContainerBounds(bounds);
-		let iconBounds = contentBounds;
-		if (this._icon && iconBoxSize) iconBounds = this.getIconBounds(contentBounds, iconBoxSize, this._icon.placement);
+		let iconBounds = iconContainer;
+		if (this._icon && iconBoxSize) iconBounds = this.getIconBounds(iconContainer, iconBoxSize, this._icon.placement);
+		const labelBounds = isExternalLabelPlacement(this._labelPlacement) && this._label && labelSize ? resolveExternalLabelBounds(bounds, this._labelPlacement, this._labelGap, labelSize) : contentBounds;
 		return {
 			iconBounds,
-			labelBounds: contentBounds
+			labelBounds
 		};
 	}
 	/**
@@ -10996,14 +11204,14 @@ var Node = class extends Element {
 	getLabelBoundsForExport(ctx) {
 		if (!this._label) return null;
 		const bounds = this.getBounds();
-		const contentBounds = this.getLabelContainerBounds(bounds);
+		const wrapWidth = this.getLabelWrapWidth(bounds);
 		const iconBoxSize = this._icon ? this.getIconBoxSize() : void 0;
-		this._label.setAutoMaxWidth(contentBounds.width);
+		this._label.setAutoMaxWidth(wrapWidth);
 		const labelSize = this._label.measure(ctx);
 		const { labelBounds } = this.calculateContentLayout(bounds, iconBoxSize, labelSize);
 		return {
 			bounds: labelBounds,
-			lines: this._label.getWrappedLines(ctx, Math.max(0, contentBounds.width))
+			lines: this._label.getWrappedLines(ctx, Math.max(0, wrapWidth))
 		};
 	}
 	/**
@@ -11016,10 +11224,10 @@ var Node = class extends Element {
 		ctx.globalAlpha = 1;
 	}
 	/**
-	* Get world position of label center (center of content area).
+	* Get world position of label center (content area or external label box).
 	*/
 	getLabelPosition() {
-		const bounds = this.getLabelContainerBounds(this.getBounds());
+		const bounds = this.getResolvedLabelBounds();
 		return {
 			x: bounds.x + bounds.width / 2,
 			y: bounds.y + bounds.height / 2
@@ -11034,13 +11242,14 @@ var Node = class extends Element {
 		let bounds = this.getBounds();
 		this.renderBadges(ctx, bounds);
 		const iconBoxSize = this._icon ? this.getIconBoxSize() : void 0;
-		if (this._label) this._label.setAutoMaxWidth(this.getLabelContainerBounds(bounds).width);
+		const externalLabel = this.usesExternalLabel();
+		if (this._label) this._label.setAutoMaxWidth(this.getLabelWrapWidth(bounds));
 		const labelSize = this._label ? this._label.measure(ctx) : void 0;
-		if (labelSize || iconBoxSize) {
+		if ((labelSize || iconBoxSize) && !externalLabel) {
 			this.ensureContentsFit(labelSize, iconBoxSize);
 			if (this._label && iconBoxSize) {
 				bounds = this.getBounds();
-				this._label.setAutoMaxWidth(this.getLabelContainerBounds(bounds).width);
+				this._label.setAutoMaxWidth(this.getLabelWrapWidth(bounds));
 			}
 		}
 		const { iconBounds, labelBounds } = this.calculateContentLayout(this.getBounds(), iconBoxSize, labelSize);
@@ -11117,10 +11326,10 @@ var Node = class extends Element {
 		return this.calculateContentMinSize(labelSize, iconBoxSize, bounds);
 	}
 	/**
-	* Render resize handles when selected
+	* Render the selection frame when selected, and resize handles when they are enabled.
 	*/
 	renderResizeHandles(ctx) {
-		if (this._state !== "selected" || !this._resizeHandlesEnabled) return;
+		if (this._state !== "selected") return;
 		const bounds = this.getBounds();
 		const offset = 6;
 		const size = 8;
@@ -11130,6 +11339,10 @@ var Node = class extends Element {
 		ctx.lineWidth = 1;
 		ctx.setLineDash([4, 4]);
 		ctx.strokeRect(bounds.x - offset, bounds.y - offset, bounds.width + offset * 2, bounds.height + offset * 2);
+		if (!this._resizeHandlesEnabled) {
+			ctx.restore();
+			return;
+		}
 		ctx.fillStyle = "#ffffff";
 		ctx.strokeStyle = DEFAULT_SELECTION_COLOR;
 		ctx.lineWidth = 1.5;
@@ -11146,7 +11359,7 @@ var Node = class extends Element {
 	* Hit test a resize handle
 	*/
 	hitTestResizeHandle(point) {
-		if (this._state !== "selected") return null;
+		if (this._state !== "selected" || !this._resizeHandlesEnabled) return null;
 		const half = 8 / 2;
 		for (const handle of this.getResizeHandlePositions()) if (point.x >= handle.x - half && point.x <= handle.x + half && point.y >= handle.y - half && point.y <= handle.y + half) return handle.type;
 		return null;
@@ -11157,7 +11370,25 @@ var Node = class extends Element {
 	hitTest(point) {
 		const bounds = this.getBounds();
 		const padding = 10;
-		return point.x >= bounds.x - padding && point.x <= bounds.x + bounds.width + padding && point.y >= bounds.y - padding && point.y <= bounds.y + bounds.height + padding;
+		return point.x >= bounds.x - padding && point.x <= bounds.x + bounds.width + padding && point.y >= bounds.y - padding && point.y <= bounds.y + bounds.height + padding || this.hitTestExternalLabel(point);
+	}
+	hitTestExternalLabel(point) {
+		if (!this.usesExternalLabel()) return false;
+		return pointInBounds(point, this.getResolvedLabelBounds());
+	}
+	getLabelWrapWidth(bounds = this.getBounds()) {
+		if (this.usesExternalLabel()) return externalLabelWrapWidth(bounds.width);
+		return this.getLabelContainerBounds(bounds).width;
+	}
+	getResolvedLabelBounds(measured) {
+		const shape = this.getBounds();
+		if (!this.usesExternalLabel() || !this._label) return this.getLabelContainerBounds(shape);
+		const size = measured ?? {
+			width: this._label.measuredWidth || this.getLabelWrapWidth(shape),
+			height: this._label.measuredHeight || (this._label.style.fontSize ?? 14) * 1.2
+		};
+		if (!isExternalLabelPlacement(this._labelPlacement)) return this.getLabelContainerBounds(shape);
+		return resolveExternalLabelBounds(shape, this._labelPlacement, this._labelGap, size);
 	}
 	/**
 	* Get a connection point on the node boundary toward a target point,
@@ -11391,16 +11622,28 @@ var Node = class extends Element {
 	}
 	calculateContentMinSize(labelSize, iconBoxSize, bounds) {
 		const labelContainer = this.getLabelContainerBounds(bounds);
-		const widthFactor = labelContainer.width > 0 ? bounds.width / labelContainer.width : 1;
-		const heightFactor = labelContainer.height > 0 ? bounds.height / labelContainer.height : 1;
-		const minContentWidth = Math.max(labelSize?.width ?? 0, iconBoxSize?.width ?? 0);
-		const minContentHeight = Math.max(labelSize?.height ?? 0, iconBoxSize?.height ?? 0);
+		const iconContainer = this.getIconContainerBounds(bounds);
+		const labelWidthFactor = labelContainer.width > 0 ? bounds.width / labelContainer.width : 1;
+		const labelHeightFactor = labelContainer.height > 0 ? bounds.height / labelContainer.height : 1;
+		const iconWidthFactor = iconContainer.width > 0 ? bounds.width / iconContainer.width : 1;
+		const iconHeightFactor = iconContainer.height > 0 ? bounds.height / iconContainer.height : 1;
 		return {
-			width: minContentWidth * widthFactor,
-			height: minContentHeight * heightFactor
+			width: Math.max((labelSize?.width ?? 0) * labelWidthFactor, (iconBoxSize?.width ?? 0) * iconWidthFactor),
+			height: Math.max((labelSize?.height ?? 0) * labelHeightFactor, (iconBoxSize?.height ?? 0) * iconHeightFactor)
 		};
 	}
+	/**
+	* Content box for the node icon: AABB minus contentInset.
+	* Unlike {@link getLabelContainerBounds}, this is not shrunk to the
+	* inscribed rectangle of a circle/diamond, so a centered icon can fill the shape.
+	*/
+	getIconContainerBounds(bounds) {
+		return this.applyContentInset(bounds);
+	}
 	getLabelContainerBounds(bounds) {
+		return this.applyContentInset(bounds);
+	}
+	applyContentInset(bounds) {
 		const { top, right, bottom, left } = resolveContentInset(this._contentInset, this._contentInsetScale, {
 			width: bounds.width,
 			height: bounds.height
@@ -11797,7 +12040,7 @@ var CircleNode = class extends Node {
 		const ry = this._height / 2 + padding;
 		const dx = point.x - center.x;
 		const dy = point.y - center.y;
-		return dx * dx / (rx * rx) + dy * dy / (ry * ry) <= 1;
+		return dx * dx / (rx * rx) + dy * dy / (ry * ry) <= 1 || this.hitTestExternalLabel(point);
 	}
 	getOutlineDirection(param) {
 		return this.outlineDirectionFromCenter(param);
@@ -11886,7 +12129,7 @@ var DiamondNode = class extends Node {
 		const hh = this._height / 2 + padding;
 		const dx = Math.abs(point.x - center.x);
 		const dy = Math.abs(point.y - center.y);
-		return dx / hw + dy / hh <= 1;
+		return dx / hw + dy / hh <= 1 || this.hitTestExternalLabel(point);
 	}
 	getOutlineDirection(param) {
 		return this.outlineDirectionFromCenter(param);
@@ -12287,7 +12530,7 @@ var CustomShapeNode = class extends Node {
 		const path = this.getPath();
 		if (ctx.isPointInPath(path, localX, localY)) return true;
 		ctx.lineWidth = 20;
-		return ctx.isPointInStroke(path, localX, localY);
+		return ctx.isPointInStroke(path, localX, localY) || this.hitTestExternalLabel(point);
 	}
 	render(ctx) {
 		const style = this.style;
@@ -13117,6 +13360,9 @@ function isCContainer(component) {
 function isCShape(component) {
 	return component.type === "shape";
 }
+function isCText(component) {
+	return component.type === "text";
+}
 /**
 * Flex container component for CompositeNode.
 * Lays out children using a flexbox-like algorithm.
@@ -13127,6 +13373,8 @@ var CContainer = class extends CompositeComponentBase {
 		this.type = "container";
 		this._cachedBounds = null;
 		this._cachedContainerBounds = null;
+		this._layoutChildren = null;
+		this._suppressBoundName = false;
 		this.id = options.id;
 		this._direction = options.direction ?? "column";
 		this._justifyContent = options.justifyContent ?? "start";
@@ -13155,6 +13403,27 @@ var CContainer = class extends CompositeComponentBase {
 	get children() {
 		return this._children;
 	}
+	/**
+	* When true, CText bound to `__name__` is omitted from measure/render/hit/SVG.
+	* Used when CompositeNode draws the name as an external Node.label.
+	*/
+	setSuppressBoundName(value) {
+		if (this._suppressBoundName === value) return;
+		this._suppressBoundName = value;
+		this._cachedBounds = null;
+		this._layoutChildren = null;
+		for (const child of this._children) {
+			if (isCContainer(child)) child.setSuppressBoundName(value);
+			if (isCShape(child) && child.content) child.content.setSuppressBoundName(value);
+		}
+	}
+	isLayoutSkipped(child) {
+		if (child.style.visible === false) return true;
+		return this._suppressBoundName && isCText(child) && child.bindToProperty === "__name__";
+	}
+	getLayoutChildren() {
+		return this._children.filter((child) => !this.isLayoutSkipped(child));
+	}
 	addChild(child) {
 		child.setOnChange(() => this.handleChildChange());
 		this._children.push(child);
@@ -13186,8 +13455,8 @@ var CContainer = class extends CompositeComponentBase {
 			padding: this._padding
 		};
 	}
-	buildFlexChildren(ctx) {
-		return this._children.map((child) => {
+	buildFlexChildren(ctx, children = this.getLayoutChildren()) {
+		return children.map((child) => {
 			const s = child.style;
 			return {
 				measure: child.measure(ctx),
@@ -13220,11 +13489,13 @@ var CContainer = class extends CompositeComponentBase {
 	}
 	render(ctx, bounds) {
 		if (this.style.visible === false) return;
-		const flexChildren = this.buildFlexChildren(ctx);
+		const layoutChildren = this.getLayoutChildren();
+		const flexChildren = this.buildFlexChildren(ctx, layoutChildren);
 		const result = flexLayout({
 			width: bounds.width,
 			height: bounds.height
 		}, this.getFlexConfig(), flexChildren);
+		this._layoutChildren = layoutChildren;
 		this._cachedBounds = result.childBounds;
 		this._cachedContainerBounds = bounds;
 		const opacity = this.style.opacity ?? 1;
@@ -13232,9 +13503,8 @@ var CContainer = class extends CompositeComponentBase {
 			ctx.save();
 			ctx.globalAlpha *= opacity;
 		}
-		for (let i = 0; i < this._children.length; i++) {
-			const child = this._children[i];
-			if (child.style.visible === false) continue;
+		for (let i = 0; i < layoutChildren.length; i++) {
+			const child = layoutChildren[i];
 			const cb = result.childBounds[i];
 			child.render(ctx, {
 				x: bounds.x + cb.x,
@@ -13247,10 +13517,9 @@ var CContainer = class extends CompositeComponentBase {
 	}
 	hitTest(point, bounds) {
 		if (this.style.visible === false) return null;
-		if (!this._cachedBounds) return null;
-		for (let i = this._children.length - 1; i >= 0; i--) {
-			const child = this._children[i];
-			if (child.style.visible === false) continue;
+		if (!this._cachedBounds || !this._layoutChildren) return null;
+		for (let i = this._layoutChildren.length - 1; i >= 0; i--) {
+			const child = this._layoutChildren[i];
 			const cb = this._cachedBounds[i];
 			const absBounds = {
 				x: bounds.x + cb.x,
@@ -13264,6 +13533,22 @@ var CContainer = class extends CompositeComponentBase {
 		return null;
 	}
 	/**
+	* First CText bound to `__name__`, including suppressed name text.
+	*/
+	findBoundNameText() {
+		for (const child of this._children) {
+			if (isCText(child) && child.bindToProperty === "__name__") return child;
+			if (isCContainer(child)) {
+				const found = child.findBoundNameText();
+				if (found) return found;
+			}
+			if (isCShape(child) && child.content) {
+				const found = child.content.findBoundNameText();
+				if (found) return found;
+			}
+		}
+	}
+	/**
 	* Find a component by id recursively.
 	*/
 	findById(id) {
@@ -13300,8 +13585,8 @@ var CContainer = class extends CompositeComponentBase {
 		if (this.style.visible === false) return "";
 		const cachedBounds = this._cachedBounds;
 		const cachedContainer = this._cachedContainerBounds;
-		return `<g>${this._children.map((child, i) => {
-			if (child.style.visible === false) return "";
+		const layoutChildren = this._layoutChildren ?? this.getLayoutChildren();
+		return `<g>${layoutChildren.map((child, i) => {
 			if (cachedBounds && cachedContainer) {
 				const cb = cachedBounds[i];
 				const dx = bounds.x - cachedContainer.x;
@@ -13313,7 +13598,7 @@ var CContainer = class extends CompositeComponentBase {
 					height: cb.height
 				});
 			}
-			const h = bounds.height / Math.max(1, this._children.length);
+			const h = bounds.height / Math.max(1, layoutChildren.length);
 			return child.toSVG({
 				x: bounds.x,
 				y: bounds.y + i * h,
@@ -13620,8 +13905,8 @@ var CompositeNode = class extends Node {
 		return this.getLabelContainerBounds(this.getBounds());
 	}
 	hitTest(point) {
-		if (this._shapeType === "circle") return this.hitTestEllipse(point);
-		if (this._shapeType === "diamond") return this.hitTestDiamond(point);
+		if (this._shapeType === "circle") return this.hitTestEllipse(point) || this.hitTestExternalLabel(point);
+		if (this._shapeType === "diamond") return this.hitTestDiamond(point) || this.hitTestExternalLabel(point);
 		return super.hitTest(point);
 	}
 	hitTestEllipse(point) {
@@ -13642,7 +13927,27 @@ var CompositeNode = class extends Node {
 		const dy = Math.abs(point.y - center.y);
 		return dx / hw + dy / hh <= 1;
 	}
+	/**
+	* Copy color/font from the suppressed `__name__` CText onto the external Node.label.
+	*/
+	syncExternalBoundNameLabelStyle() {
+		if (!this.usesExternalLabel() || !this._label) return;
+		const nameText = this._content.findBoundNameText();
+		if (!nameText) return;
+		const current = this._label.styleOverrides;
+		if (current.color === nameText.color && current.fontFamily === nameText.fontFamily && current.fontWeight === nameText.fontWeight && current.fontStyle === nameText.fontStyle && current.fontSize === nameText.fontSize) return;
+		this._label.style = {
+			...current,
+			color: nameText.color,
+			fontFamily: nameText.fontFamily,
+			fontWeight: nameText.fontWeight,
+			fontStyle: nameText.fontStyle,
+			fontSize: nameText.fontSize
+		};
+	}
 	render(ctx) {
+		this._content.setSuppressBoundName(this.usesExternalLabel());
+		this.syncExternalBoundNameLabelStyle();
 		if (this._autoSize) this.applyAutoSize(ctx);
 		const { x, y, width, height } = this.getBounds();
 		const style = this.style;
@@ -13715,6 +14020,11 @@ var CompositeNode = class extends Node {
 		this.renderBadges(ctx, bounds);
 		const contentBounds = this.getContentBounds();
 		this._content.render(ctx, contentBounds);
+		if (this.usesExternalLabel() && this._label) {
+			this._label.setAutoMaxWidth(this.getLabelWrapWidth(bounds));
+			const labelSize = this._label.measure(ctx);
+			this.renderLabel(ctx, this.getResolvedLabelBounds(labelSize));
+		}
 		this.renderPorts(ctx);
 	}
 	applyAutoSize(ctx) {
@@ -14348,6 +14658,8 @@ var Serializer = class {
 			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,
 			anchorPoints,
@@ -14654,9 +14966,16 @@ var SvgExporter = class {
 						break;
 					}
 				}
+				cn.content.setSuppressBoundName(cn.usesExternalLabel());
+				cn.syncExternalBoundNameLabelStyle();
 				const contentBounds = cn.getLabelContainerBounds(bounds);
 				const contentSvg = cn.content.toSVG(contentBounds);
-				return [`${shape} fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="${strokeWidth}" stroke-opacity="${strokeOpacity}"${dash}${dashOffset}/>`, contentSvg].join("");
+				const labelSvg = cn.usesExternalLabel() ? this.renderNodeLabel(cn, bounds) : "";
+				return [
+					`${shape} fill="${fill}" fill-opacity="${fillOpacity}" stroke="${stroke}" stroke-width="${strokeWidth}" stroke-opacity="${strokeOpacity}"${dash}${dashOffset}/>`,
+					contentSvg,
+					labelSvg
+				].join("");
 			}
 			default: shape = `<rect x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}"`;
 		}
@@ -14729,15 +15048,13 @@ var SvgExporter = class {
 	}
 	measureTextLabel(text, style = {}, inset = 8) {
 		const fontSize = style.fontSize ?? 14;
-		const fontFamily = style.fontFamily ?? "sans-serif";
-		const fontWeight = style.fontWeight ?? "normal";
 		const lineHeight = fontSize * 1.2;
 		const lines = text.split("\n");
 		let maxWidth = 0;
 		if (typeof document !== "undefined") {
 			const ctx = document.createElement("canvas").getContext("2d");
 			if (ctx) {
-				ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+				ctx.font = canvasFontFromTextStyle(style);
 				for (const line of lines) maxWidth = Math.max(maxWidth, ctx.measureText(line).width);
 			}
 		}
@@ -14848,16 +15165,18 @@ var SvgExporter = class {
 		const fontSize = style.fontSize ?? 14;
 		const fontFamily = style.fontFamily ?? "sans-serif";
 		const fontWeight = style.fontWeight ?? "normal";
+		const fontStyle = 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";
 		const baseline = style.baseline === "top" ? "text-before-edge" : style.baseline === "bottom" ? "text-after-edge" : "middle";
 		const transform = rotation !== 0 ? ` transform="rotate(${rotation * 180 / Math.PI} ${point.x} ${point.y})"` : "";
 		const lines = text.split("\n");
-		if (lines.length <= 1) return `<text x="${point.x}" y="${point.y}" fill="${fill}" fill-opacity="${opacity}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" text-anchor="${anchor}" dominant-baseline="${baseline}"${transform}>${this.escapeText(text)}</text>`;
+		if (lines.length <= 1) return `<text x="${point.x}" y="${point.y}" fill="${fill}" fill-opacity="${opacity}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}"${fontStyleAttr} text-anchor="${anchor}" dominant-baseline="${baseline}"${transform}>${this.escapeText(text)}</text>`;
 		const lineHeight = fontSize * 1.2;
 		const startY = point.y - (lines.length - 1) * lineHeight / 2;
 		const tspans = lines.map((line, index) => `<tspan x="${point.x}" y="${startY + index * lineHeight}">${this.escapeText(line)}</tspan>`).join("");
-		return `<text x="${point.x}" y="${point.y}" fill="${fill}" fill-opacity="${opacity}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}" text-anchor="${anchor}" dominant-baseline="${baseline}"${transform}>${tspans}</text>`;
+		return `<text x="${point.x}" y="${point.y}" fill="${fill}" fill-opacity="${opacity}" font-size="${fontSize}" font-family="${fontFamily}" font-weight="${fontWeight}"${fontStyleAttr} text-anchor="${anchor}" dominant-baseline="${baseline}"${transform}>${tspans}</text>`;
 	}
 	buildEdgePath(edge, edgeLabelOffset) {
 		if (!edge.label || !edge.labelLineGap) return this.buildPath(edge);
@@ -15572,6 +15891,6 @@ function applyEdgeStyle(ctx, style) {
 	return baseOpacity * strokeOpacity;
 }
 //#endregion
-export { AddNodeCommand, AnimationManager, AutoLayout, AutoRouting, BezierPathStrategy, CContainer, CDivider, CIcon, CShape, CText, ChangeEdgePropertiesCommand, ChangeEditablePolylineControlPointsCommand, ChangeGroupPropertiesCommand, ChangeNodePropertiesCommand, CircleNode, ClipboardManager, CompositeCommand, CompositeNode, ConnectionManager, ContextMenuManager, CustomShapeNode, DARK_THEME, DEFAULT_THEME, DiagramRenderer, DiamondNode, DragManager, Edge, Element, EventEmitter, GridOverlay, Group, GuidesOverlay, HistoryManager, ImageExporter, InputHandler, InteractionManager, MiniMap, MoveNodesCommand, NavigationManager, Node, NodeImage, PolylinePathStrategy, Port, PropertyChangeBatcher, RectangleNode, RemoveNodeCommand, ResizeManager, ResizeNodesCommand, RulersOverlay, SearchManager, SelectionManager, Serializer, ShapeFactories, StraightPathStrategy, StyleManager, SvgExporter, TextLabel, alignNodes, angle, applyEdgeStyle, applyNodeStyle, bezierPoint, boundsCenter, calculateBezierControlPoints, clamp, clonePoints, container, deserializeCComponent, directionFromAngle, distance, distanceToSegment, distributeNodes, divider, drawRoundedRectPath, expandBounds, flexLayout, generateId, getClosestPointOnPath, getPathPointAt, icon, isCornerPlacement, isEdgeEdgeEndpoint, isNodeEdgeEndpoint, lerp, mergeBounds, normalizeSides, pointInEllipse, pointInRect, rectIntersection, rectUnion, rectsIntersect, renderFillAndStroke, resetIdCounter, resetPortIdCounter, resolveContentInset, rotatePoint, segmentRectIntersections, shape, snapPointToGrid, snapToGrid, text };
+export { AddNodeCommand, AnimationManager, AutoLayout, AutoRouting, BezierPathStrategy, CContainer, CDivider, CIcon, CShape, CText, ChangeEdgePropertiesCommand, ChangeEditablePolylineControlPointsCommand, ChangeGroupPropertiesCommand, ChangeNodePropertiesCommand, CircleNode, ClipboardManager, CompositeCommand, CompositeNode, ConnectionManager, ContextMenuManager, CustomShapeNode, DARK_THEME, DEFAULT_LABEL_GAP, DEFAULT_THEME, DiagramRenderer, DiamondNode, DragManager, Edge, Element, EventEmitter, GridOverlay, Group, GuidesOverlay, HistoryManager, ImageExporter, InputHandler, InteractionManager, MiniMap, MoveNodesCommand, NavigationManager, Node, NodeImage, PolylinePathStrategy, Port, PropertyChangeBatcher, RectangleNode, RemoveNodeCommand, ResizeManager, ResizeNodesCommand, RulersOverlay, SearchManager, SelectionManager, Serializer, ShapeFactories, StraightPathStrategy, StyleManager, SvgExporter, TextLabel, alignNodes, angle, applyEdgeStyle, applyNodeStyle, bezierPoint, boundsCenter, calculateBezierControlPoints, clamp, clonePoints, container, deserializeCComponent, directionFromAngle, distance, distanceToSegment, distributeNodes, divider, drawRoundedRectPath, expandBounds, flexLayout, generateId, getClosestPointOnPath, getPathPointAt, icon, isCornerPlacement, isEdgeEdgeEndpoint, isExternalLabelPlacement, isNodeEdgeEndpoint, lerp, mergeBounds, normalizeSides, pointInEllipse, pointInRect, rectIntersection, rectUnion, rectsIntersect, renderFillAndStroke, resetIdCounter, resetPortIdCounter, resolveContentInset, rotatePoint, segmentRectIntersections, shape, snapPointToGrid, snapToGrid, text };
 
 //# sourceMappingURL=papirus.js.map