@ngroznykh/papirus 0.8.0 → 0.8.1

package/dist/papirus.js

@@ -1672,10 +1672,26 @@ var NavigationManager = class extends EventEmitter {
 //#endregion
 //#region src/utils/direction.ts
 /**
-* Map outline param [0,1) to cardinal direction (top → right → bottom → left).
+* Map outline param [0,1) to cardinal direction.
+*
+* When `bounds` are provided, uses the same perimeter walk as
+* `Node.getConnectionPointAtOutlineParam` (top → right → bottom → left).
+* Equal-quarter mapping is only a fallback for square-ish shapes / legacy callers —
+* on wide/short nodes it wrongly labels the left half of the bottom edge as `left`.
 */
-function getDirectionFromOutlineParam(param) {
+function getDirectionFromOutlineParam(param, bounds) {
 	const p = (param % 1 + 1) % 1;
+	const w = bounds?.width ?? 0;
+	const h = bounds?.height ?? 0;
+	if (w > 0 && h > 0) {
+		let s = p * (2 * (w + h));
+		if (s < w) return "top";
+		s -= w;
+		if (s < h) return "right";
+		s -= h;
+		if (s < w) return "bottom";
+		return "left";
+	}
 	if (p < .25) return "top";
 	if (p < .5) return "right";
 	if (p < .75) return "bottom";
@@ -1946,14 +1962,14 @@ var ConnectionManager = class extends EventEmitter {
 				snappedPoint = bestResult.point;
 				this.reconnectingOutlineParam = bestResult.param;
 				this.reconnectingTargetNodeId = bestResult.node.id;
-				snappedDir = getDirectionFromOutlineParam(bestResult.param);
+				snappedDir = getDirectionFromOutlineParam(bestResult.param, bestResult.node.getBounds());
 				if (this.reconnectingEndpoint === "start" ? toNode : fromNode) {
 					const alignRef = edge.isEditablePolyline() ? this.getNearestBendPointForAxisAlignment(edge, this.reconnectingEndpoint) : this.reconnectingEndpoint === "start" ? this.getTargetPointForReconnect(edge, toNode, "to", snappedPoint) : this.getTargetPointForReconnect(edge, fromNode, "from", snappedPoint);
 					snappedPoint = this.applyAxisAlignmentToPoint(snappedPoint, alignRef);
 					const reprojected = targetNode.getClosestPointOnOutline(snappedPoint);
 					snappedPoint = reprojected.point;
 					this.reconnectingOutlineParam = reprojected.param;
-					snappedDir = getDirectionFromOutlineParam(reprojected.param);
+					snappedDir = getDirectionFromOutlineParam(reprojected.param, targetNode.getBounds());
 				}
 			} else {
 				this.reconnectingOutlineParam = null;
@@ -1996,12 +2012,13 @@ var ConnectionManager = class extends EventEmitter {
 			let role = "other";
 			if (node.id === sourceNodeId) role = "source";
 			else if (node.id === targetNodeId) role = "target";
+			const pad = 4;
 			obstacles.push({
 				id: node.id,
-				x: node.x - 8,
-				y: node.y - 8,
-				width: node.width + 16,
-				height: node.height + 16,
+				x: node.x - pad,
+				y: node.y - pad,
+				width: node.width + pad * 2,
+				height: node.height + pad * 2,
 				role
 			});
 		}
@@ -2016,7 +2033,10 @@ var ConnectionManager = class extends EventEmitter {
 	}
 	getTargetDirForReconnect(edge, endpoint) {
 		const ep = endpoint === "from" ? edge.from : edge.to;
-		if (this.attachToOutline && ep.outlineParam !== void 0) return getDirectionFromOutlineParam(ep.outlineParam);
+		if (this.attachToOutline && ep.outlineParam !== void 0) {
+			const node = ep.nodeId ? this.renderer.getNode(ep.nodeId) : void 0;
+			return getDirectionFromOutlineParam(ep.outlineParam, node?.getBounds());
+		}
 		return (ep.portId?.replace(ANCHOR_PORT_PREFIX, ""))?.split(":")[0];
 	}
 	/**
@@ -2331,8 +2351,9 @@ var ConnectionManager = class extends EventEmitter {
 			ctx.lineTo(end.x, end.y);
 			ctx.stroke();
 		} else {
-			const fromDir = this.sourceOutlineParam !== null ? getDirectionFromOutlineParam(this.sourceOutlineParam) : this.sourceAnchorId?.split(":")[0];
-			const toDir = this.previewTargetOutlineParam !== null ? getDirectionFromOutlineParam(this.previewTargetOutlineParam) : this.previewTargetAnchorId?.split(":")[0];
+			const previewTarget = this.previewTargetNodeId != null ? this.renderer.getNode(this.previewTargetNodeId) : void 0;
+			const fromDir = this.sourceOutlineParam !== null ? getDirectionFromOutlineParam(this.sourceOutlineParam, this.sourceNode?.getBounds()) : this.sourceAnchorId?.split(":")[0];
+			const toDir = this.previewTargetOutlineParam !== null ? getDirectionFromOutlineParam(this.previewTargetOutlineParam, previewTarget?.getBounds()) : this.previewTargetAnchorId?.split(":")[0];
 			this.drawBezierPreview(ctx, start, end, fromDir, toDir);
 		}
 		ctx.setLineDash([]);
@@ -3803,6 +3824,9 @@ var StraightPathStrategy = class {
 var DEFAULT_MARGIN = 12;
 var DEFAULT_EXIT = 20;
 var BEND_PENALTY = .001;
+/** Prefer mid-gap over hugging obstacle borders (same Manhattan, fewer bends). */
+var CONTOUR_BAND = 18;
+var CONTOUR_PENALTY = 140;
 function expandRect(r, m) {
 	return {
 		...r,
@@ -3812,6 +3836,133 @@ function expandRect(r, m) {
 		height: r.height + 2 * m
 	};
 }
+/**
+* Diagram padding + router margin can seal a real visual gap between stacked nodes
+* (e.g. ArchiMate BP header above a Product ~12px apart, 8px pad each side).
+* Shrink facing sides of the expanded rects so a mid-gap corridor stays open.
+*/
+function preserveFacingGap(expandedA, expandedB, rawA, rawB, minCorridor = 2) {
+	let a = { ...expandedA };
+	let b = { ...expandedB };
+	if (rawB.y - (rawA.y + rawA.height) >= minCorridor) {
+		const mid = (rawA.y + rawA.height + rawB.y) / 2;
+		const half = minCorridor / 2;
+		const aBottom = mid - half;
+		const bTop = mid + half;
+		if (a.y + a.height > aBottom) a = {
+			...a,
+			height: Math.max(0, aBottom - a.y)
+		};
+		if (b.y < bTop) b = {
+			...b,
+			height: Math.max(0, b.y + b.height - bTop),
+			y: bTop
+		};
+		return [a, b];
+	}
+	if (rawA.y - (rawB.y + rawB.height) >= minCorridor) {
+		const mid = (rawB.y + rawB.height + rawA.y) / 2;
+		const half = minCorridor / 2;
+		const bBottom = mid - half;
+		const aTop = mid + half;
+		if (b.y + b.height > bBottom) b = {
+			...b,
+			height: Math.max(0, bBottom - b.y)
+		};
+		if (a.y < aTop) a = {
+			...a,
+			height: Math.max(0, a.y + a.height - aTop),
+			y: aTop
+		};
+		return [a, b];
+	}
+	if (rawB.x - (rawA.x + rawA.width) >= minCorridor) {
+		const mid = (rawA.x + rawA.width + rawB.x) / 2;
+		const half = minCorridor / 2;
+		const aRight = mid - half;
+		const bLeft = mid + half;
+		if (a.x + a.width > aRight) a = {
+			...a,
+			width: Math.max(0, aRight - a.x)
+		};
+		if (b.x < bLeft) b = {
+			...b,
+			width: Math.max(0, b.x + b.width - bLeft),
+			x: bLeft
+		};
+		return [a, b];
+	}
+	if (rawA.x - (rawB.x + rawB.width) >= minCorridor) {
+		const mid = (rawB.x + rawB.width + rawA.x) / 2;
+		const half = minCorridor / 2;
+		const bRight = mid - half;
+		const aLeft = mid + half;
+		if (b.x + b.width > bRight) b = {
+			...b,
+			width: Math.max(0, bRight - b.x)
+		};
+		if (a.x < aLeft) a = {
+			...a,
+			width: Math.max(0, a.x + a.width - aLeft),
+			x: aLeft
+		};
+		return [a, b];
+	}
+	return [a, b];
+}
+function insetRect(r, m) {
+	if (m <= 0) return r;
+	const width = r.width - 2 * m;
+	const height = r.height - 2 * m;
+	if (width <= 1 || height <= 1) return null;
+	return {
+		...r,
+		x: r.x + m,
+		y: r.y + m,
+		width,
+		height
+	};
+}
+/** Midline of a positive gap between two raw rects, if any. */
+function facingGapMid(rawA, rawB) {
+	if (rawA.y + rawA.height < rawB.y) return {
+		x: (rawA.x + rawA.width / 2 + rawB.x + rawB.width / 2) / 2,
+		y: (rawA.y + rawA.height + rawB.y) / 2
+	};
+	if (rawB.y + rawB.height < rawA.y) return {
+		x: (rawA.x + rawA.width / 2 + rawB.x + rawB.width / 2) / 2,
+		y: (rawB.y + rawB.height + rawA.y) / 2
+	};
+	if (rawA.x + rawA.width < rawB.x) return {
+		x: (rawA.x + rawA.width + rawB.x) / 2,
+		y: (rawA.y + rawA.height / 2 + rawB.y + rawB.height / 2) / 2
+	};
+	if (rawB.x + rawB.width < rawA.x) return {
+		x: (rawB.x + rawB.width + rawA.x) / 2,
+		y: (rawA.y + rawA.height / 2 + rawB.y + rawB.height / 2) / 2
+	};
+	return null;
+}
+/**
+* Obstacles arrive pre-padded (diagram pad 4–8). Peel common pad amounts so a
+* real visual gap between stacked nodes is visible to corridor / endEntry logic.
+*/
+function peelForFacingGap(a, b) {
+	for (const peel of [
+		0,
+		4,
+		8
+	]) {
+		const aa = insetRect(a, peel);
+		const bb = insetRect(b, peel);
+		if (!aa || !bb) continue;
+		if (facingGapMid(aa, bb)) return {
+			a: aa,
+			b: bb
+		};
+	}
+	return null;
+}
 function moveByDir$1(p, dir, d) {
 	switch (dir) {
 		case "top": return {
@@ -3857,6 +4008,36 @@ function segmentHitsObstacles(a, b, obstacles) {
 function manhattan$1(a, b) {
 	return Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
 }
+/**
+* Extra cost when a segment runs parallel to an obstacle edge inside CONTOUR_BAND.
+* Scaled by segment length so a long “lick” along a wide BP costs far more than a short stub.
+*/
+function contourProximityPenalty(a, b, obstacles) {
+	if (obstacles.length === 0) return 0;
+	const segLen = manhattan$1(a, b);
+	if (segLen < 1) return 0;
+	let minDist = Infinity;
+	if (Math.abs(a.y - b.y) < .001) {
+		const y = a.y;
+		const x1 = Math.min(a.x, b.x);
+		const x2 = Math.max(a.x, b.x);
+		for (const o of obstacles) {
+			if (x2 < o.x - 1 || x1 > o.x + o.width + 1) continue;
+			minDist = Math.min(minDist, Math.abs(y - o.y), Math.abs(y - (o.y + o.height)));
+		}
+	} else if (Math.abs(a.x - b.x) < .001) {
+		const x = a.x;
+		const y1 = Math.min(a.y, b.y);
+		const y2 = Math.max(a.y, b.y);
+		for (const o of obstacles) {
+			if (y2 < o.y - 1 || y1 > o.y + o.height + 1) continue;
+			minDist = Math.min(minDist, Math.abs(x - o.x), Math.abs(x - (o.x + o.width)));
+		}
+	} else return 0;
+	if (!Number.isFinite(minDist) || minDist >= CONTOUR_BAND) return 0;
+	const proximity = 1 - minDist / CONTOUR_BAND;
+	return segLen * (CONTOUR_PENALTY / 10) * proximity;
+}
 /** Push along dir until outside expanded parent (and at least exitDistance). */
 function computeStartExit(from, fromDir, parent, margin, exitDistance) {
 	let p = moveByDir$1(from, fromDir, exitDistance);
@@ -3895,8 +4076,38 @@ function computeStartExit(from, fromDir, parent, margin, exitDistance) {
 	}
 	return p;
 }
-function computeEndEntry(to, toDir, exitDistance) {
-	return moveByDir$1(to, toDir, exitDistance);
+function computeEndEntry(to, toDir, exitDistance, rawTarget, rawNeighbor) {
+	const stub = moveByDir$1(to, toDir, exitDistance);
+	if (!rawTarget || !rawNeighbor) return stub;
+	const mid = facingGapMid(rawTarget, rawNeighbor);
+	if (!mid) return stub;
+	switch (toDir) {
+		case "bottom":
+			if (mid.y > to.y && rawNeighbor.y >= rawTarget.y + rawTarget.height) return {
+				x: to.x,
+				y: mid.y
+			};
+			break;
+		case "top":
+			if (mid.y < to.y && rawNeighbor.y + rawNeighbor.height <= rawTarget.y) return {
+				x: to.x,
+				y: mid.y
+			};
+			break;
+		case "right":
+			if (mid.x > to.x && rawNeighbor.x >= rawTarget.x + rawTarget.width) return {
+				x: mid.x,
+				y: to.y
+			};
+			break;
+		case "left":
+			if (mid.x < to.x && rawNeighbor.x + rawNeighbor.width <= rawTarget.x) return {
+				x: mid.x,
+				y: to.y
+			};
+			break;
+	}
+	return stub;
 }
 /**
 * When nodes face each other closer than 2×exitDistance, fixed stubs cross
@@ -3972,8 +4183,12 @@ function simplifyPath$1(path) {
 		const a = out[i];
 		const b = out[i + 1];
 		const c = out[i + 2];
-		const colinear = Math.abs(a.x - b.x) < .001 && Math.abs(b.x - c.x) < .001 || Math.abs(a.y - b.y) < .001 && Math.abs(b.y - c.y) < .001;
-		if (Math.abs(a.x - b.x) < .001 && Math.abs(b.x - c.x) < .001 && (a.y < c.y && c.y < b.y || b.y < c.y && c.y < a.y) || Math.abs(a.y - b.y) < .001 && Math.abs(b.y - c.y) < .001 && (a.x < c.x && c.x < b.x || b.x < c.x && c.x < a.x) || colinear && i > 0 && i + 2 < out.length - 1) out.splice(i + 1, 1);
+		const colinearV = Math.abs(a.x - b.x) < .001 && Math.abs(b.x - c.x) < .001;
+		const colinearH = Math.abs(a.y - b.y) < .001 && Math.abs(b.y - c.y) < .001;
+		const colinear = colinearV || colinearH;
+		const uturn = colinearV && (a.y < c.y && c.y < b.y || b.y < c.y && c.y < a.y) || colinearH && (a.x < c.x && c.x < b.x || b.x < c.x && c.x < a.x);
+		const spur = colinearV && (b.y < a.y && a.y < c.y || c.y < a.y && a.y < b.y) || colinearH && (b.x < a.x && a.x < c.x || c.x < a.x && a.x < b.x);
+		if (uturn || spur || colinear && i > 0 && i + 2 < out.length - 1) out.splice(i + 1, 1);
 		else i++;
 	}
 	return out;
@@ -4009,13 +4224,11 @@ function collectLatticeCoords(startExit, endEntry, obstacles, parent, target, ma
 		ySet.add(o.y - 1);
 		ySet.add(o.y + o.height + 1);
 	}
-	if (parent && target && margin != null) {
-		const ep = expandRect(parent, margin);
-		const et = expandRect(target, margin);
+	if (parent && target) {
 		const addGapY = (gapY) => {
 			ySet.add(gapY);
-			const left = Math.min(ep.x, et.x, startExit.x, endEntry.x);
-			const right = Math.max(ep.x + ep.width, et.x + et.width, startExit.x, endEntry.x);
+			const left = Math.min(parent.x, target.x, startExit.x, endEntry.x);
+			const right = Math.max(parent.x + parent.width, target.x + target.width, startExit.x, endEntry.x);
 			xSet.add(left);
 			xSet.add(right);
 			xSet.add(startExit.x);
@@ -4023,17 +4236,24 @@ function collectLatticeCoords(startExit, endEntry, obstacles, parent, target, ma
 		};
 		const addGapX = (gapX) => {
 			xSet.add(gapX);
-			const top = Math.min(ep.y, et.y, startExit.y, endEntry.y);
-			const bottom = Math.max(ep.y + ep.height, et.y + et.height, startExit.y, endEntry.y);
+			const top = Math.min(parent.y, target.y, startExit.y, endEntry.y);
+			const bottom = Math.max(parent.y + parent.height, target.y + target.height, startExit.y, endEntry.y);
 			ySet.add(top);
 			ySet.add(bottom);
 			ySet.add(startExit.y);
 			ySet.add(endEntry.y);
 		};
-		if (et.y + et.height < ep.y) addGapY((et.y + et.height + ep.y) / 2);
-		if (ep.y + ep.height < et.y) addGapY((ep.y + ep.height + et.y) / 2);
-		if (et.x + et.width < ep.x) addGapX((et.x + et.width + ep.x) / 2);
-		if (ep.x + ep.width < et.x) addGapX((ep.x + ep.width + et.x) / 2);
+		const mid = facingGapMid(parent, target);
+		if (mid) if (parent.y + parent.height < target.y || target.y + target.height < parent.y) addGapY(mid.y);
+		else addGapX(mid.x);
+		else if (margin != null) {
+			const ep = expandRect(parent, margin);
+			const et = expandRect(target, margin);
+			if (et.y + et.height < ep.y) addGapY((et.y + et.height + ep.y) / 2);
+			if (ep.y + ep.height < et.y) addGapY((ep.y + ep.height + et.y) / 2);
+			if (et.x + et.width < ep.x) addGapX((et.x + et.width + ep.x) / 2);
+			if (ep.x + ep.width < et.x) addGapX((ep.x + ep.width + et.x) / 2);
+		}
 	}
 	return {
 		xs: [...xSet].sort((a, b) => a - b),
@@ -4089,7 +4309,7 @@ function buildCornerGraph(startExit, endEntry, obstacles, parent, target, margin
 			const a = nodes[list[i - 1]];
 			const b = nodes[list[i]];
 			if (!segmentHitsObstacles(a, b, obstacles)) {
-				const length = manhattan$1(a, b);
+				const length = manhattan$1(a, b) + contourProximityPenalty(a, b, obstacles);
 				pushEdge(list[i - 1], list[i], "v", length);
 				pushEdge(list[i], list[i - 1], "v", length);
 			}
@@ -4101,7 +4321,7 @@ function buildCornerGraph(startExit, endEntry, obstacles, parent, target, margin
 			const a = nodes[list[i - 1]];
 			const b = nodes[list[i]];
 			if (!segmentHitsObstacles(a, b, obstacles)) {
-				const length = manhattan$1(a, b);
+				const length = manhattan$1(a, b) + contourProximityPenalty(a, b, obstacles);
 				pushEdge(list[i - 1], list[i], "h", length);
 				pushEdge(list[i], list[i - 1], "h", length);
 			}
@@ -4169,18 +4389,20 @@ function pathIsValid(path, obstacles) {
 	for (let i = 1; i < path.length; i++) if (segmentHitsObstacles(path[i - 1], path[i], obstacles)) return false;
 	return true;
 }
+/** Always orthogonal: never emit a diagonal between startExit and endEntry. */
+function orthogonalElbow(startExit, endEntry) {
+	if (Math.abs(startExit.x - endEntry.x) < .001 || Math.abs(startExit.y - endEntry.y) < .001) return [startExit, endEntry];
+	return [
+		startExit,
+		{
+			x: startExit.x,
+			y: endEntry.y
+		},
+		endEntry
+	];
+}
 function fallbackOuterRoute(startExit, endEntry, obstacles) {
-	if (obstacles.length === 0) {
-		if (Math.abs(startExit.x - endEntry.x) < .001 || Math.abs(startExit.y - endEntry.y) < .001) return [startExit, endEntry];
-		return [
-			startExit,
-			{
-				x: startExit.x,
-				y: endEntry.y
-			},
-			endEntry
-		];
-	}
+	if (obstacles.length === 0) return orthogonalElbow(startExit, endEntry);
 	const u = unionBBox(obstacles);
 	const pad = 1;
 	const top = u.y - pad;
@@ -4235,6 +4457,22 @@ function fallbackOuterRoute(startExit, endEntry, obstacles) {
 				y: endEntry.y
 			},
 			endEntry
+		],
+		[
+			startExit,
+			{
+				x: startExit.x,
+				y: endEntry.y
+			},
+			endEntry
+		],
+		[
+			startExit,
+			{
+				x: endEntry.x,
+				y: startExit.y
+			},
+			endEntry
 		]
 	];
 	let best = null;
@@ -4251,14 +4489,7 @@ function fallbackOuterRoute(startExit, endEntry, obstacles) {
 			best = simplified;
 		}
 	}
-	return best ?? [
-		startExit,
-		{
-			x: startExit.x,
-			y: endEntry.y
-		},
-		endEntry
-	];
+	return best ?? orthogonalElbow(startExit, endEntry);
 }
 function routeMidPath(startExit, endEntry, obstacles, parent, target, margin) {
 	if (Math.abs(startExit.x - endEntry.x) < .001 || Math.abs(startExit.y - endEntry.y) < .001) {
@@ -4277,20 +4508,74 @@ function routeOrthogonalAround(input) {
 	const exitDistance = input.exitDistance ?? DEFAULT_EXIT;
 	const exitBlocker = input.parent ?? input.source;
 	const rawStartExit = computeStartExit(input.from, input.fromDir, exitBlocker, margin, exitDistance);
-	const rawEndEntry = computeEndEntry(input.to, input.toDir, exitDistance);
+	const gapNeighbor = input.parent ?? input.source;
+	const peeledTargetNeighbor = input.target && gapNeighbor ? peelForFacingGap(input.target, gapNeighbor) : null;
+	const rawEndEntry = computeEndEntry(input.to, input.toDir, exitDistance, peeledTargetNeighbor?.a, peeledTargetNeighbor?.b);
 	const { startExit, endEntry } = clampFacingExitEntry(input.from, input.to, input.fromDir, input.toDir, rawStartExit, rawEndEntry);
+	let sourceObs = input.source ? expandRect(input.source, margin) : void 0;
+	let parentObs = input.parent ? expandRect(input.parent, margin) : void 0;
+	let targetObs = input.target ? expandRect(input.target, margin) : void 0;
+	const openCorridor = (expA, expB, inputA, inputB) => {
+		const peeled = peelForFacingGap(inputA, inputB);
+		if (peeled) return preserveFacingGap(expA, expB, peeled.a, peeled.b);
+		return preserveFacingGap(expA, expB, inputA, inputB);
+	};
+	if (parentObs && targetObs && input.parent && input.target) [parentObs, targetObs] = openCorridor(parentObs, targetObs, input.parent, input.target);
+	else if (sourceObs && targetObs && input.source && input.target) [sourceObs, targetObs] = openCorridor(sourceObs, targetObs, input.source, input.target);
+	if (sourceObs && parentObs && input.source && input.parent) [sourceObs, parentObs] = openCorridor(sourceObs, parentObs, input.source, input.parent);
 	const obstacles = [];
-	if (input.source) obstacles.push(expandRect(input.source, margin));
-	if (input.parent) obstacles.push(expandRect(input.parent, margin));
-	if (input.target) obstacles.push(expandRect(input.target, margin));
-	const mid = routeMidPath(startExit, endEntry, obstacles, input.parent ?? input.source, input.target, margin).slice(1, -1);
-	return simplifyPath$1([
+	if (sourceObs) obstacles.push(sourceObs);
+	if (parentObs) obstacles.push(parentObs);
+	if (targetObs) obstacles.push(targetObs);
+	const peeledLattice = input.parent && input.target ? peelForFacingGap(input.parent, input.target) : input.source && input.target ? peelForFacingGap(input.source, input.target) : null;
+	const mid = routeMidPath(startExit, endEntry, obstacles, peeledLattice?.a ?? input.parent ?? input.source, peeledLattice?.b ?? input.target, margin).slice(1, -1);
+	const lastMid = mid[mid.length - 1];
+	const alreadyApproaching = !!lastMid && isOnApproachOutside(lastMid, input.to, input.toDir, 1);
+	return simplifyPath$1(ensureOrthogonalPath([
 		input.from,
 		startExit,
 		...mid,
-		endEntry,
+		...alreadyApproaching ? [] : [endEntry],
 		input.to
-	]);
+	]));
+}
+/** Insert elbows so no consecutive points form a diagonal (safety net). */
+function ensureOrthogonalPath(path) {
+	if (path.length < 2) return path;
+	const out = [path[0]];
+	for (let i = 1; i < path.length; i++) {
+		const prev = out[out.length - 1];
+		const next = path[i];
+		if (!(Math.abs(prev.x - next.x) < .001 || Math.abs(prev.y - next.y) < .001)) out.push({
+			x: prev.x,
+			y: next.y
+		});
+		out.push(next);
+	}
+	return out;
+}
+function isOnApproachOutside(p, to, toDir, minClearance) {
+	switch (toDir) {
+		case "top": return Math.abs(p.x - to.x) < .001 && p.y <= to.y - minClearance;
+		case "bottom": return Math.abs(p.x - to.x) < .001 && p.y >= to.y + minClearance;
+		case "left": return Math.abs(p.y - to.y) < .001 && p.x <= to.x - minClearance;
+		case "right": return Math.abs(p.y - to.y) < .001 && p.x >= to.x + minClearance;
+	}
+}
+//#endregion
+//#region src/utils/routeDebug.ts
+function isRouteDebugEnabled() {
+	if (typeof globalThis === "undefined") return false;
+	const g = globalThis;
+	if (g.__PAPIRUS_ROUTE_DEBUG__ === true || g.__PAPIRUS_ROUTE_DEBUG__ === 1) return true;
+	try {
+		if (typeof localStorage !== "undefined" && localStorage.getItem("papirusRouteDebug") === "1") return true;
+	} catch {}
+	return false;
+}
+function routeDebug(tag, payload) {
+	if (!isRouteDebugEnabled()) return;
+	console.log(`[papirus:route] ${tag}`, payload);
 }
 //#endregion
 //#region src/elements/paths/PolylinePathStrategy.ts
@@ -4591,12 +4876,11 @@ var PolylinePathStrategy = class {
 	calculatePath(from, to, fromDir, toDir, _options) {
 		const controlPoints = _options?.controlPoints;
 		if (_options?.editablePolyline) {
-			if (controlPoints && controlPoints.length > 0) return [
+			const path = controlPoints && controlPoints.length > 0 ? [
 				from,
 				...controlPoints,
 				to
-			];
-			return [
+			] : [
 				from,
 				{
 					x: (from.x + to.x) / 2,
@@ -4604,10 +4888,32 @@ var PolylinePathStrategy = class {
 				},
 				to
 			];
+			routeDebug("polyline.via", {
+				via: "editable",
+				path
+			});
+			return path;
 		}
 		const dist = distance(from, to);
 		const selfLoop = _options?.selfLoop ?? false;
 		const obstacles = _options?.obstacles ?? [];
+		const finish = (via, path) => {
+			const roles = resolveRoutingRoles(from, to, obstacles);
+			routeDebug("polyline.via", {
+				via,
+				fromDir,
+				toDir,
+				approachDir: roles.target ? resolveApproachDir(from, to, toDir, roles.target) : toDir,
+				roles: {
+					parent: roles.parent?.id,
+					source: roles.source?.id,
+					target: roles.target?.id
+				},
+				obstacleRoles: obstacles.map((o) => `${o.id}:${o.role ?? "?"}`),
+				path: path.map((p) => `${Math.round(p.x)},${Math.round(p.y)}`).join(" → ")
+			});
+			return path;
+		};
 		if (selfLoop && dist < SELF_LOOP_MIN_DISTANCE$1 && (fromDir || toDir)) switch (fromDir ?? toDir) {
 			case "bottom": return [
 				from,
@@ -4738,7 +5044,7 @@ var PolylinePathStrategy = class {
 		if (!selfLoop && isSide(fromDir) && isSide(toDir)) {
 			const { parent, source, target } = resolveRoutingRoles(from, to, obstacles);
 			const approachDir = resolveApproachDir(from, to, toDir, target);
-			if ((parent || source || target) && isSide(approachDir)) return routeOrthogonalAround({
+			if ((parent || source || target) && isSide(approachDir)) return finish("routeOrthogonalAround", routeOrthogonalAround({
 				from,
 				to,
 				fromDir,
@@ -4748,15 +5054,27 @@ var PolylinePathStrategy = class {
 				target,
 				margin: 4,
 				exitDistance: 20
+			}));
+			routeDebug("polyline.via", {
+				via: "roles-missed-around",
+				fromDir,
+				toDir,
+				approachDir,
+				roles: {
+					parent: parent?.id,
+					source: source?.id,
+					target: target?.id
+				},
+				obstacleRoles: obstacles.map((o) => `${o.id}:${o.role ?? "?"}`)
 			});
 		}
 		if (!selfLoop && dist < OBSTACLE_ROUTING_DISTANCE) {
 			const routed = buildRoutedPolyline(from, to, fromDir, toDir, obstacles);
-			if (routed) return routed;
+			if (routed) return finish("buildRoutedPolyline", routed);
 		}
-		if (fromDir || toDir) return this.calculateDirectedPath(from, to, fromDir, toDir);
+		if (fromDir || toDir) return finish("calculateDirectedPath", this.calculateDirectedPath(from, to, fromDir, toDir));
 		const midX = (from.x + to.x) / 2;
-		if (Math.abs(to.x - from.x) > Math.abs(to.y - from.y)) return [
+		if (Math.abs(to.x - from.x) > Math.abs(to.y - from.y)) return finish("manhattan-h", [
 			from,
 			{
 				x: midX,
@@ -4767,9 +5085,9 @@ var PolylinePathStrategy = class {
 				y: to.y
 			},
 			to
-		];
+		]);
 		const midY = (from.y + to.y) / 2;
-		return [
+		return finish("manhattan-v", [
 			from,
 			{
 				x: from.x,
@@ -4780,7 +5098,7 @@ var PolylinePathStrategy = class {
 				y: midY
 			},
 			to
-		];
+		]);
 	}
 	calculateDirectedPath(from, to, fromDir, toDir) {
 		const points = [from];
@@ -5482,6 +5800,14 @@ function getEdgeLabelRotation(options) {
 	return angle;
 }
 //#endregion
+//#region src/types.ts
+function isNodeEdgeEndpoint(endpoint) {
+	return typeof endpoint.nodeId === "string" && endpoint.nodeId.length > 0;
+}
+function isEdgeEdgeEndpoint(endpoint) {
+	return typeof endpoint.edgeId === "string" && endpoint.edgeId.length > 0;
+}
+//#endregion
 //#region src/elements/Edge.ts
 var DEFAULT_EDGE_STYLE = {
 	strokeColor: "#666666",
@@ -5851,6 +6177,11 @@ var Edge = class extends Element {
 		const routingOptionsChanged = !routingOptionsEqual(this._pathOptions, options);
 		if (geometryUnchanged && !routingOptionsChanged) {
 			this._pathOptions = options;
+			routeDebug("edge.updateEndpoints:skip", {
+				id: this.id,
+				type: this._type,
+				reason: "geometry+routing unchanged"
+			});
 			return;
 		}
 		this._fromPoint = fromPoint;
@@ -5870,6 +6201,51 @@ var Edge = class extends Element {
 			editablePolyline: this.isEditablePolyline(),
 			selfLoop: this._from.nodeId === this._to.nodeId
 		});
+		if (this._type === "polyline" || this._type === "editable-polyline" || this._type === "bezier") {
+			const obstacles = this._pathOptions?.obstacles ?? [];
+			const segs = [];
+			for (let i = 1; i < this._path.length; i++) {
+				const a = this._path[i - 1];
+				const b = this._path[i];
+				const dx = b.x - a.x;
+				const dy = b.y - a.y;
+				const axis = Math.abs(dy) < .01 ? "H" : Math.abs(dx) < .01 ? "V" : `DIAG(${dx.toFixed(0)},${dy.toFixed(0)})`;
+				segs.push({
+					axis,
+					len: Math.round(Math.abs(dx) + Math.abs(dy)),
+					a: `${Math.round(a.x)},${Math.round(a.y)}`,
+					b: `${Math.round(b.x)},${Math.round(b.y)}`
+				});
+			}
+			routeDebug("edge.recalculatePath", {
+				id: this.id,
+				type: this._type,
+				from: {
+					nodeId: this._from.nodeId,
+					portId: isNodeEdgeEndpoint(this._from) ? this._from.portId : void 0,
+					outlineParam: isNodeEdgeEndpoint(this._from) ? this._from.outlineParam : void 0,
+					point: `${Math.round(this._fromPoint.x)},${Math.round(this._fromPoint.y)}`,
+					dir: this._fromDir
+				},
+				to: {
+					nodeId: this._to.nodeId,
+					portId: isNodeEdgeEndpoint(this._to) ? this._to.portId : void 0,
+					outlineParam: isNodeEdgeEndpoint(this._to) ? this._to.outlineParam : void 0,
+					point: `${Math.round(this._toPoint.x)},${Math.round(this._toPoint.y)}`,
+					dir: this._toDir
+				},
+				lockAnchors: this.lockAnchors,
+				obstacleCount: obstacles.length,
+				obstacles: obstacles.map((o) => ({
+					id: o.id,
+					role: o.role,
+					box: `${Math.round(o.x)},${Math.round(o.y)} ${Math.round(o.width)}x${Math.round(o.height)}`
+				})),
+				path: this._path.map((p) => `${Math.round(p.x)},${Math.round(p.y)}`).join(" → "),
+				segments: segs,
+				controlPoints: this._controlPoints?.length ?? 0
+			});
+		}
 		this.updateBounds();
 		this.markDirty();
 	}
@@ -7597,14 +7973,6 @@ var ContextMenuManager = class extends EventEmitter {
 	}
 };
 //#endregion
-//#region src/types.ts
-function isNodeEdgeEndpoint(endpoint) {
-	return typeof endpoint.nodeId === "string" && endpoint.nodeId.length > 0;
-}
-function isEdgeEdgeEndpoint(endpoint) {
-	return typeof endpoint.edgeId === "string" && endpoint.edgeId.length > 0;
-}
-//#endregion
 //#region src/core/EdgeEndpointUpdater.ts
 var EDGE_ATTACH_MAX_PASSES = 3;
 var EdgeEndpointUpdater = class {
@@ -7612,7 +7980,7 @@ var EdgeEndpointUpdater = class {
 		this.host = host;
 	}
 	updateForDrag() {
-		this.update(false);
+		this.update(true);
 	}
 	updateAll() {
 		this.update(true);
@@ -7640,7 +8008,10 @@ var EdgeEndpointUpdater = class {
 		const fromNode = nodes.get(edge.from.nodeId);
 		const toNode = nodes.get(edge.to.nodeId);
 		if (!fromNode || !toNode) return;
-		if (includeRoutingObstacles) this.lockAnchors(edge, fromNode, toNode);
+		if (includeRoutingObstacles) {
+			this.preferFacingSidePorts(edge, fromNode, toNode);
+			this.lockAnchors(edge, fromNode, toNode);
+		}
 		const from = this.resolveNodeEndpoint(fromNode, edge.from, toNode.getCenter(), edge.lockAnchors);
 		const to = this.resolveNodeEndpoint(toNode, edge.to, fromNode.getCenter(), edge.lockAnchors);
 		const fromId = edge.from.nodeId;
@@ -7656,6 +8027,27 @@ var EdgeEndpointUpdater = class {
 			};
 			return obstacle;
 		});
+		routeDebug("updater.nodeNode", {
+			edgeId: edge.id,
+			type: edge.type,
+			includeRoutingObstacles,
+			lockAnchors: edge.lockAnchors,
+			from: {
+				nodeId: fromId,
+				portId: edge.from.portId,
+				outlineParam: edge.from.outlineParam,
+				point: `${Math.round(from.point.x)},${Math.round(from.point.y)}`,
+				dir: from.direction
+			},
+			to: {
+				nodeId: toId,
+				portId: edge.to.portId,
+				outlineParam: edge.to.outlineParam,
+				point: `${Math.round(to.point.x)},${Math.round(to.point.y)}`,
+				dir: to.direction
+			},
+			obstacleCount: routingObstacles?.length ?? 0
+		});
 		edge.updateEndpoints(from.point, to.point, from.direction, to.direction, routingObstacles ? { obstacles: routingObstacles } : void 0);
 	}
 	/**
@@ -7706,6 +8098,79 @@ var EdgeEndpointUpdater = class {
 		}
 	}
 	/**
+	* When nodes are clearly stacked, retarget side ports that would force the
+	* polyline to approach along the long edge (contour crawl).
+	*
+	* Uses bounding-box gaps (not center dx/dy): a large horizontal offset must not
+	* flip bottom→left while the source is still below the target — that reintroduces
+	* the left-edge contour jog when the user drags the node leftward.
+	*
+	* - Always set facing ports when unset (so lockAnchors does not pick left/right).
+	* - Rewrite target left/right → top/bottom when there is a clear vertical gap.
+	* - Do not rewrite an intentional source side exit (e.g. left exit from a nested
+	*   component around its parent).
+	*/
+	preferFacingSidePorts(edge, fromNode, toNode) {
+		if (!edge.lockAnchors) return;
+		if (!isNodeEdgeEndpoint(edge.from) || !isNodeEdgeEndpoint(edge.to)) return;
+		if (edge.from.outlineParam !== void 0 || edge.to.outlineParam !== void 0) return;
+		const fromB = fromNode.getBounds();
+		const toB = toNode.getBounds();
+		const fromBelow = fromB.y - (toB.y + toB.height);
+		const fromAbove = toB.y - (fromB.y + fromB.height);
+		const fromRight = fromB.x - (toB.x + toB.width);
+		const fromLeft = toB.x - (fromB.x + fromB.width);
+		const fc = fromNode.getCenter();
+		const tc = toNode.getCenter();
+		if (fromBelow > 0 || fromAbove > 0) {
+			const fromSide = fromBelow > 0 ? "top" : "bottom";
+			const toSide = fromBelow > 0 ? "bottom" : "top";
+			const curFrom = this.portSide(edge.from.portId);
+			const curTo = this.portSide(edge.to.portId);
+			if (!curFrom) this.setEndpointSidePort(edge, "from", fromNode, fromSide, tc);
+			if (!curTo || curTo === "left" || curTo === "right" || curTo === toSide) this.setEndpointSidePort(edge, "to", toNode, toSide, fc);
+			return;
+		}
+		if (fromLeft > 0 || fromRight > 0) {
+			const fromSide = fromRight > 0 ? "left" : "right";
+			const toSide = fromRight > 0 ? "right" : "left";
+			const curFrom = this.portSide(edge.from.portId);
+			const curTo = this.portSide(edge.to.portId);
+			if (!curFrom) this.setEndpointSidePort(edge, "from", fromNode, fromSide, tc);
+			if (!curTo || curTo === "top" || curTo === "bottom") this.setEndpointSidePort(edge, "to", toNode, toSide, fc);
+		}
+	}
+	portSide(portId) {
+		if (!portId?.startsWith("anchor:")) return void 0;
+		const side = portId.slice(ANCHOR_PORT_PREFIX.length).split(":")[0];
+		if (side === "top" || side === "right" || side === "bottom" || side === "left") return side;
+	}
+	nearestAnchorOnSide(node, side, toward) {
+		const anchors = node.getAnchors().filter((a) => a.id.startsWith(`${side}:`));
+		if (anchors.length === 0) return null;
+		let best = anchors[0];
+		let minDist = Infinity;
+		for (const anchor of anchors) {
+			const dist = (anchor.point.x - toward.x) ** 2 + (anchor.point.y - toward.y) ** 2;
+			if (dist < minDist) {
+				minDist = dist;
+				best = anchor;
+			}
+		}
+		return best;
+	}
+	setEndpointSidePort(edge, end, node, side, toward) {
+		const anchor = this.nearestAnchorOnSide(node, side, toward);
+		if (!anchor) return;
+		const next = {
+			...end === "from" ? edge.from : edge.to,
+			portId: `${ANCHOR_PORT_PREFIX}${anchor.id}`,
+			outlineParam: void 0
+		};
+		if (end === "from") edge.from = next;
+		else edge.to = next;
+	}
+	/**
 	* Resolve a node endpoint:
 	* - lockAnchors + portId → fixed side port (wins over leftover outlineParam)
 	* - outlineParam → fixed point on outline (attach-to-outline)
@@ -7720,10 +8185,13 @@ var EdgeEndpointUpdater = class {
 				direction: anchorId.split(":")[0]
 			};
 		}
-		if (isNodeEdgeEndpoint(endpoint) && endpoint.outlineParam !== void 0) return {
-			point: node.getConnectionPointAtOutlineParam(endpoint.outlineParam),
-			direction: getDirectionFromOutlineParam(endpoint.outlineParam)
-		};
+		if (isNodeEdgeEndpoint(endpoint) && endpoint.outlineParam !== void 0) {
+			const bounds = node.getBounds();
+			return {
+				point: node.getConnectionPointAtOutlineParam(endpoint.outlineParam),
+				direction: getDirectionFromOutlineParam(endpoint.outlineParam, bounds)
+			};
+		}
 		if (toward) return this.resolveFloatingEndpoint(node, toward);
 		return { point: node.getCenter() };
 	}
@@ -8744,12 +9212,13 @@ var DiagramRenderer = class extends EventEmitter {
 	}
 	getNodeObstacles() {
 		if (this._nodeObstaclesCache !== null) return this._nodeObstaclesCache;
+		const pad = 4;
 		this._nodeObstaclesCache = Array.from(this._nodes.values()).map((node) => ({
 			id: node.id,
-			x: node.x - 8,
-			y: node.y - 8,
-			width: node.width + 16,
-			height: node.height + 16,
+			x: node.x - pad,
+			y: node.y - pad,
+			width: node.width + pad * 2,
+			height: node.height + pad * 2,
 			role: "other"
 		}));
 		return this._nodeObstaclesCache;