@ngroznykh/papirus 0.7.2 → 0.8.0

package/dist/papirus.js

@@ -1976,15 +1976,37 @@ var ConnectionManager = class extends EventEmitter {
 			if (toNode) {
 				const target = this.getTargetPointForReconnect(edge, toNode, "to", snappedPoint);
 				const toDir = this.getTargetDirForReconnect(edge, "to");
-				edge.updateEndpoints(snappedPoint, target, snappedDir, toDir);
+				const sourceId = targetNode?.id ?? edge.from.nodeId;
+				edge.updateEndpoints(snappedPoint, target, snappedDir, toDir, this.buildReconnectRoutingOptions(sourceId, toNode.id));
 			}
 		} else if (fromNode) {
 			const start = this.getTargetPointForReconnect(edge, fromNode, "from", snappedPoint);
 			const fromDir = this.getTargetDirForReconnect(edge, "from");
-			edge.updateEndpoints(start, snappedPoint, fromDir, snappedDir);
+			edge.updateEndpoints(start, snappedPoint, fromDir, snappedDir, this.buildReconnectRoutingOptions(fromNode.id, targetNode?.id));
 		}
 		this.renderer.markDirty();
 	}
+	/**
+	* Match DiagramRenderer.getNodeObstacles padding and EdgeEndpointUpdater roles
+	* so reconnect preview uses the same polyline routing as updateAll.
+	*/
+	buildReconnectRoutingOptions(sourceNodeId, targetNodeId) {
+		const obstacles = [];
+		for (const node of this.renderer.nodes.values()) {
+			let role = "other";
+			if (node.id === sourceNodeId) role = "source";
+			else if (node.id === targetNodeId) role = "target";
+			obstacles.push({
+				id: node.id,
+				x: node.x - 8,
+				y: node.y - 8,
+				width: node.width + 16,
+				height: node.height + 16,
+				role
+			});
+		}
+		return { obstacles };
+	}
 	getTargetPointForReconnect(edge, node, endpoint, fallbackPoint) {
 		const ep = endpoint === "from" ? edge.from : edge.to;
 		if (this.attachToOutline && ep.outlineParam !== void 0) return node.getConnectionPointAtOutlineParam(ep.outlineParam);
@@ -3777,7 +3799,517 @@ var StraightPathStrategy = class {
 	}
 };
 //#endregion
+//#region src/elements/paths/routeOrthogonalAround.ts
+var DEFAULT_MARGIN = 12;
+var DEFAULT_EXIT = 20;
+var BEND_PENALTY = .001;
+function expandRect(r, m) {
+	return {
+		...r,
+		x: r.x - m,
+		y: r.y - m,
+		width: r.width + 2 * m,
+		height: r.height + 2 * m
+	};
+}
+function moveByDir$1(p, dir, d) {
+	switch (dir) {
+		case "top": return {
+			x: p.x,
+			y: p.y - d
+		};
+		case "bottom": return {
+			x: p.x,
+			y: p.y + d
+		};
+		case "left": return {
+			x: p.x - d,
+			y: p.y
+		};
+		case "right": return {
+			x: p.x + d,
+			y: p.y
+		};
+	}
+}
+function pointInOpenInterior(p, r) {
+	return p.x > r.x && p.x < r.x + r.width && p.y > r.y && p.y < r.y + r.height;
+}
+/** Axis-aligned segment vs open interior of a rect (boundary grazing allowed). */
+function segmentIntersectsOpenInterior(a, b, r) {
+	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);
+		return x > r.x && x < r.x + r.width && y2 > r.y && y1 < r.y + r.height;
+	}
+	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);
+		return y > r.y && y < r.y + r.height && x2 > r.x && x1 < r.x + r.width;
+	}
+	return true;
+}
+function segmentHitsObstacles(a, b, obstacles) {
+	return obstacles.some((o) => segmentIntersectsOpenInterior(a, b, o));
+}
+function manhattan$1(a, b) {
+	return Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
+}
+/** 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);
+	if (!parent) return p;
+	const expanded = expandRect(parent, margin);
+	let guard = 0;
+	while (pointInOpenInterior(p, expanded) && guard++ < 64) p = moveByDir$1(p, fromDir, exitDistance);
+	if (pointInOpenInterior(p, expanded)) {
+		const e = expanded;
+		switch (fromDir) {
+			case "left":
+				p = {
+					x: e.x - 1,
+					y: from.y
+				};
+				break;
+			case "right":
+				p = {
+					x: e.x + e.width + 1,
+					y: from.y
+				};
+				break;
+			case "top":
+				p = {
+					x: from.x,
+					y: e.y - 1
+				};
+				break;
+			case "bottom":
+				p = {
+					x: from.x,
+					y: e.y + e.height + 1
+				};
+				break;
+		}
+	}
+	return p;
+}
+function computeEndEntry(to, toDir, exitDistance) {
+	return moveByDir$1(to, toDir, exitDistance);
+}
+/**
+* When nodes face each other closer than 2×exitDistance, fixed stubs cross
+* (startExit past endEntry). That draws a U-turn "tail" at the first bend.
+* Meet both stubs on the mid-gap instead.
+*/
+function clampFacingExitEntry(from, to, fromDir, toDir, startExit, endEntry) {
+	if (fromDir === "bottom" && toDir === "top" && to.y > from.y && startExit.y > endEntry.y) {
+		const midY = (from.y + to.y) / 2;
+		return {
+			startExit: {
+				x: startExit.x,
+				y: midY
+			},
+			endEntry: {
+				x: endEntry.x,
+				y: midY
+			}
+		};
+	}
+	if (fromDir === "top" && toDir === "bottom" && to.y < from.y && startExit.y < endEntry.y) {
+		const midY = (from.y + to.y) / 2;
+		return {
+			startExit: {
+				x: startExit.x,
+				y: midY
+			},
+			endEntry: {
+				x: endEntry.x,
+				y: midY
+			}
+		};
+	}
+	if (fromDir === "right" && toDir === "left" && to.x > from.x && startExit.x > endEntry.x) {
+		const midX = (from.x + to.x) / 2;
+		return {
+			startExit: {
+				x: midX,
+				y: startExit.y
+			},
+			endEntry: {
+				x: midX,
+				y: endEntry.y
+			}
+		};
+	}
+	if (fromDir === "left" && toDir === "right" && to.x < from.x && startExit.x < endEntry.x) {
+		const midX = (from.x + to.x) / 2;
+		return {
+			startExit: {
+				x: midX,
+				y: startExit.y
+			},
+			endEntry: {
+				x: midX,
+				y: endEntry.y
+			}
+		};
+	}
+	return {
+		startExit,
+		endEntry
+	};
+}
+function simplifyPath$1(path) {
+	const out = [];
+	for (const p of path) {
+		const prev = out[out.length - 1];
+		if (!prev || Math.abs(prev.x - p.x) > .001 || Math.abs(prev.y - p.y) > .001) out.push(p);
+	}
+	let i = 0;
+	while (i + 2 < out.length) {
+		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);
+		else i++;
+	}
+	return out;
+}
+function unionBBox(obstacles) {
+	let x1 = Infinity;
+	let y1 = Infinity;
+	let x2 = -Infinity;
+	let y2 = -Infinity;
+	for (const o of obstacles) {
+		x1 = Math.min(x1, o.x);
+		y1 = Math.min(y1, o.y);
+		x2 = Math.max(x2, o.x + o.width);
+		y2 = Math.max(y2, o.y + o.height);
+	}
+	return {
+		x: x1,
+		y: y1,
+		width: x2 - x1,
+		height: y2 - y1
+	};
+}
+function collectLatticeCoords(startExit, endEntry, obstacles, parent, target, margin) {
+	const xSet = new Set([startExit.x, endEntry.x]);
+	const ySet = new Set([startExit.y, endEntry.y]);
+	for (const o of obstacles) {
+		xSet.add(o.x);
+		xSet.add(o.x + o.width);
+		ySet.add(o.y);
+		ySet.add(o.y + o.height);
+		xSet.add(o.x - 1);
+		xSet.add(o.x + o.width + 1);
+		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);
+		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);
+			xSet.add(left);
+			xSet.add(right);
+			xSet.add(startExit.x);
+			xSet.add(endEntry.x);
+		};
+		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);
+			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);
+	}
+	return {
+		xs: [...xSet].sort((a, b) => a - b),
+		ys: [...ySet].sort((a, b) => a - b)
+	};
+}
+function buildCornerGraph(startExit, endEntry, obstacles, parent, target, margin) {
+	const { xs, ys } = collectLatticeCoords(startExit, endEntry, obstacles, parent, target, margin);
+	const nodes = [];
+	const nodeIndex = /* @__PURE__ */ new Map();
+	const nodeKey = (x, y) => `${x}|${y}`;
+	const addNode = (x, y) => {
+		const key = nodeKey(x, y);
+		if (nodeIndex.has(key)) return;
+		const point = {
+			x,
+			y
+		};
+		if (obstacles.some((o) => pointInOpenInterior(point, o))) return;
+		nodeIndex.set(key, nodes.length);
+		nodes.push(point);
+	};
+	for (const x of xs) for (const y of ys) addNode(x, y);
+	addNode(startExit.x, startExit.y);
+	addNode(endEntry.x, endEntry.y);
+	const startIdx = nodeIndex.get(nodeKey(startExit.x, startExit.y));
+	const goalIdx = nodeIndex.get(nodeKey(endEntry.x, endEntry.y));
+	if (startIdx == null || goalIdx == null) return null;
+	const edges = /* @__PURE__ */ new Map();
+	const pushEdge = (a, b, dir, length) => {
+		const list = edges.get(a) ?? [];
+		list.push({
+			to: b,
+			dir,
+			length
+		});
+		edges.set(a, list);
+	};
+	const byX = /* @__PURE__ */ new Map();
+	const byY = /* @__PURE__ */ new Map();
+	for (let i = 0; i < nodes.length; i++) {
+		const node = nodes[i];
+		const xsList = byX.get(node.x) ?? [];
+		xsList.push(i);
+		byX.set(node.x, xsList);
+		const ysList = byY.get(node.y) ?? [];
+		ysList.push(i);
+		byY.set(node.y, ysList);
+	}
+	for (const list of byX.values()) {
+		list.sort((a, b) => nodes[a].y - nodes[b].y);
+		for (let i = 1; i < list.length; i++) {
+			const a = nodes[list[i - 1]];
+			const b = nodes[list[i]];
+			if (!segmentHitsObstacles(a, b, obstacles)) {
+				const length = manhattan$1(a, b);
+				pushEdge(list[i - 1], list[i], "v", length);
+				pushEdge(list[i], list[i - 1], "v", length);
+			}
+		}
+	}
+	for (const list of byY.values()) {
+		list.sort((a, b) => nodes[a].x - nodes[b].x);
+		for (let i = 1; i < list.length; i++) {
+			const a = nodes[list[i - 1]];
+			const b = nodes[list[i]];
+			if (!segmentHitsObstacles(a, b, obstacles)) {
+				const length = manhattan$1(a, b);
+				pushEdge(list[i - 1], list[i], "h", length);
+				pushEdge(list[i], list[i - 1], "h", length);
+			}
+		}
+	}
+	return {
+		nodes,
+		edges,
+		startIdx,
+		goalIdx
+	};
+}
+function searchMidPath(nodes, edges, startIdx, goalIdx) {
+	const makeStateKey = (node, dir) => `${node}:${dir}`;
+	const open = [];
+	const best = /* @__PURE__ */ new Map();
+	const prev = /* @__PURE__ */ new Map();
+	const startKey = makeStateKey(startIdx, "s");
+	best.set(startKey, 0);
+	open.push({
+		node: startIdx,
+		dir: "s",
+		g: 0,
+		f: manhattan$1(nodes[startIdx], nodes[goalIdx]),
+		key: startKey
+	});
+	let goalKey = null;
+	while (open.length > 0) {
+		let bestIdx = 0;
+		for (let i = 1; i < open.length; i++) if (open[i].f < open[bestIdx].f) bestIdx = i;
+		const current = open.splice(bestIdx, 1)[0];
+		if (current.node === goalIdx) {
+			goalKey = current.key;
+			break;
+		}
+		for (const edge of edges.get(current.node) ?? []) {
+			const nextDir = edge.dir;
+			let stepCost = edge.length;
+			if (current.dir !== "s" && current.dir !== nextDir) stepCost += BEND_PENALTY;
+			const nextG = current.g + stepCost;
+			const nextKey = makeStateKey(edge.to, nextDir);
+			if (nextG >= (best.get(nextKey) ?? Infinity)) continue;
+			best.set(nextKey, nextG);
+			prev.set(nextKey, current.key);
+			open.push({
+				node: edge.to,
+				dir: nextDir,
+				g: nextG,
+				f: nextG + manhattan$1(nodes[edge.to], nodes[goalIdx]),
+				key: nextKey
+			});
+		}
+	}
+	if (!goalKey) return null;
+	const path = [];
+	let key = goalKey;
+	while (key) {
+		const nodeIdx = Number(key.split(":")[0]);
+		path.unshift(nodes[nodeIdx]);
+		key = prev.get(key);
+	}
+	return path;
+}
+function pathIsValid(path, obstacles) {
+	for (let i = 1; i < path.length; i++) if (segmentHitsObstacles(path[i - 1], path[i], obstacles)) return false;
+	return true;
+}
+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
+		];
+	}
+	const u = unionBBox(obstacles);
+	const pad = 1;
+	const top = u.y - pad;
+	const bottom = u.y + u.height + pad;
+	const left = u.x - pad;
+	const right = u.x + u.width + pad;
+	const candidates = [
+		[
+			startExit,
+			{
+				x: startExit.x,
+				y: top
+			},
+			{
+				x: endEntry.x,
+				y: top
+			},
+			endEntry
+		],
+		[
+			startExit,
+			{
+				x: startExit.x,
+				y: bottom
+			},
+			{
+				x: endEntry.x,
+				y: bottom
+			},
+			endEntry
+		],
+		[
+			startExit,
+			{
+				x: left,
+				y: startExit.y
+			},
+			{
+				x: left,
+				y: endEntry.y
+			},
+			endEntry
+		],
+		[
+			startExit,
+			{
+				x: right,
+				y: startExit.y
+			},
+			{
+				x: right,
+				y: endEntry.y
+			},
+			endEntry
+		]
+	];
+	let best = null;
+	let bestLen = Infinity;
+	for (const candidate of candidates) {
+		const simplified = simplifyPath$1(candidate);
+		if (!pathIsValid(simplified, obstacles)) continue;
+		const len = simplified.reduce((sum, p, i) => {
+			if (i === 0) return 0;
+			return sum + manhattan$1(simplified[i - 1], p);
+		}, 0);
+		if (len < bestLen) {
+			bestLen = len;
+			best = simplified;
+		}
+	}
+	return best ?? [
+		startExit,
+		{
+			x: startExit.x,
+			y: endEntry.y
+		},
+		endEntry
+	];
+}
+function routeMidPath(startExit, endEntry, obstacles, parent, target, margin) {
+	if (Math.abs(startExit.x - endEntry.x) < .001 || Math.abs(startExit.y - endEntry.y) < .001) {
+		const direct = [startExit, endEntry];
+		if (pathIsValid(direct, obstacles)) return direct;
+	}
+	const graph = buildCornerGraph(startExit, endEntry, obstacles, parent, target, margin);
+	if (graph) {
+		const mid = searchMidPath(graph.nodes, graph.edges, graph.startIdx, graph.goalIdx);
+		if (mid && pathIsValid(mid, obstacles)) return mid;
+	}
+	return fallbackOuterRoute(startExit, endEntry, obstacles);
+}
+function routeOrthogonalAround(input) {
+	const margin = input.margin ?? DEFAULT_MARGIN;
+	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 { startExit, endEntry } = clampFacingExitEntry(input.from, input.to, input.fromDir, input.toDir, rawStartExit, rawEndEntry);
+	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([
+		input.from,
+		startExit,
+		...mid,
+		endEntry,
+		input.to
+	]);
+}
+//#endregion
 //#region src/elements/paths/PolylinePathStrategy.ts
+function isSide(v) {
+	return v === "top" || v === "right" || v === "bottom" || v === "left";
+}
+function resolveRoutingRoles(from, to, obstacles) {
+	const target = obstacles.find((o) => o.role === "target") ?? obstacles.find((o) => {
+		const onVertical = (Math.abs(to.x - o.x) < 1 || Math.abs(to.x - (o.x + o.width)) < 1) && to.y >= o.y - 1 && to.y <= o.y + o.height + 1;
+		const onHorizontal = (Math.abs(to.y - o.y) < 1 || Math.abs(to.y - (o.y + o.height)) < 1) && to.x >= o.x - 1 && to.x <= o.x + o.width + 1;
+		return onVertical || onHorizontal;
+	});
+	const source = obstacles.find((o) => o.role === "source" && o !== target);
+	return {
+		parent: obstacles.find((o) => o !== target && o !== source && o.role !== "source" && from.x >= o.x && from.x <= o.x + o.width && from.y >= o.y && from.y <= o.y + o.height),
+		source,
+		target
+	};
+}
 var MIN_SEGMENT_LENGTH = 20;
 var SELF_LOOP_MIN_DISTANCE$1 = 1;
 var SELF_LOOP_OFFSET$1 = 42;
@@ -3855,27 +4387,66 @@ function moveByDir(point, dir, distance) {
 		default: return point;
 	}
 }
-function inferDir(from, to) {
+/** Push `point` along `dir` until it clears every obstacle (plus margin). */
+function moveOutsideObstacles(point, dir, obstacles, minDistance) {
+	if (!dir || obstacles.length === 0) return moveByDir(point, dir, minDistance);
+	const expanded = expandObstacles(obstacles, OBSTACLE_MARGIN);
+	let dist = minDistance;
+	let candidate = moveByDir(point, dir, dist);
+	const step = 16;
+	const maxDist = 4e3;
+	while (dist < maxDist && expanded.some((obstacle) => pointInsideObstacle(candidate, obstacle))) {
+		dist += step;
+		candidate = moveByDir(point, dir, dist);
+	}
+	return candidate;
+}
+function inferExitDir(from, to) {
 	const dx = to.x - from.x;
 	const dy = to.y - from.y;
 	if (Math.abs(dx) >= Math.abs(dy)) return dx >= 0 ? "right" : "left";
 	return dy >= 0 ? "bottom" : "top";
 }
-function oppositeDir(dir) {
-	switch (dir) {
-		case "left": return "right";
-		case "right": return "left";
-		case "top": return "bottom";
-		case "bottom": return "top";
-		default: return dir;
+/** Outward side at `to` we should approach from (not opposite of fromDir). */
+function inferApproachDir(from, to) {
+	const dx = from.x - to.x;
+	const dy = from.y - to.y;
+	if (Math.abs(dy) > 1) return dy >= 0 ? "bottom" : "top";
+	if (Math.abs(dx) > 1) return dx >= 0 ? "right" : "left";
+	return dy >= 0 ? "bottom" : "top";
+}
+/** Which side of `target` the attachment point `to` lies on (border hit). */
+function sideOfPointOnRect(to, target) {
+	const onLeft = Math.abs(to.x - target.x) <= 1;
+	const onRight = Math.abs(to.x - (target.x + target.width)) <= 1;
+	const onTop = Math.abs(to.y - target.y) <= 1;
+	const onBottom = Math.abs(to.y - (target.y + target.height)) <= 1;
+	if (onTop && !onLeft && !onRight) return "top";
+	if (onBottom && !onLeft && !onRight) return "bottom";
+	if (onLeft && !onTop && !onBottom) return "left";
+	if (onRight && !onTop && !onBottom) return "right";
+}
+/**
+* Resolve approach side at `to`.
+* Prefer the side of the target rect where `to` actually sits — never override a
+* left/right attachment with top/bottom from source geometry (that puts endEntry
+* inside the target and draws the last bend through the node).
+*/
+function resolveApproachDir(from, to, toDir, target) {
+	if (target) {
+		const side = sideOfPointOnRect(to, target);
+		if (side) return side;
 	}
+	if (toDir && isSide(toDir)) return toDir;
+	return inferApproachDir(from, to);
 }
 function buildRoutedPolyline(from, to, fromDir, toDir, obstacles) {
 	if (obstacles.length === 0) return null;
-	const effectiveFromDir = fromDir ?? inferDir(from, to);
-	const effectiveToDir = toDir ?? oppositeDir(effectiveFromDir);
-	const startExit = moveByDir(from, effectiveFromDir, ROUTE_EXIT_DISTANCE);
-	const endEntry = moveByDir(to, effectiveToDir, ROUTE_EXIT_DISTANCE);
+	const effectiveFromDir = fromDir ?? inferExitDir(from, to);
+	const { target: routedTarget } = resolveRoutingRoles(from, to, obstacles);
+	const effectiveToDir = resolveApproachDir(from, to, toDir, routedTarget);
+	const startExit = moveOutsideObstacles(from, effectiveFromDir, obstacles, ROUTE_EXIT_DISTANCE);
+	const endEntry = moveOutsideObstacles(to, effectiveToDir, obstacles, ROUTE_EXIT_DISTANCE);
 	const expanded = expandObstacles(obstacles, OBSTACLE_MARGIN);
 	const xs = new Set([startExit.x, endEntry.x]);
 	const ys = new Set([startExit.y, endEntry.y]);
@@ -4037,10 +4608,6 @@ var PolylinePathStrategy = class {
 		const dist = distance(from, to);
 		const selfLoop = _options?.selfLoop ?? false;
 		const obstacles = _options?.obstacles ?? [];
-		if (!selfLoop && dist < OBSTACLE_ROUTING_DISTANCE) {
-			const routed = buildRoutedPolyline(from, to, fromDir, toDir, obstacles);
-			if (routed) return routed;
-		}
 		if (selfLoop && dist < SELF_LOOP_MIN_DISTANCE$1 && (fromDir || toDir)) switch (fromDir ?? toDir) {
 			case "bottom": return [
 				from,
@@ -4168,6 +4735,25 @@ var PolylinePathStrategy = class {
 				to
 			];
 		}
+		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({
+				from,
+				to,
+				fromDir,
+				toDir: approachDir,
+				parent,
+				source,
+				target,
+				margin: 4,
+				exitDistance: 20
+			});
+		}
+		if (!selfLoop && dist < OBSTACLE_ROUTING_DISTANCE) {
+			const routed = buildRoutedPolyline(from, to, fromDir, toDir, obstacles);
+			if (routed) return routed;
+		}
 		if (fromDir || toDir) return 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 [
@@ -4248,15 +4834,39 @@ var PolylinePathStrategy = class {
 					y: to.y
 				});
 			}
-		} else if (fromVertical && toHorizontal) points.push({
-			x: from.x,
-			y: to.y
-		});
-		else if (fromHorizontal && toVertical) points.push({
-			x: to.x,
-			y: from.y
-		});
-		else {
+		} else if (fromVertical && toHorizontal) {
+			const exitY = fromDir === "top" ? from.y - MIN_SEGMENT_LENGTH : from.y + MIN_SEGMENT_LENGTH;
+			const entryX = toDir === "left" ? to.x - MIN_SEGMENT_LENGTH : to.x + MIN_SEGMENT_LENGTH;
+			const jogX = (from.x + to.x) / 2;
+			const approachX = Math.abs(jogX - to.x) >= MIN_SEGMENT_LENGTH ? jogX : entryX;
+			points.push({
+				x: from.x,
+				y: exitY
+			});
+			points.push({
+				x: approachX,
+				y: exitY
+			});
+			points.push({
+				x: approachX,
+				y: to.y
+			});
+		} else if (fromHorizontal && toVertical) {
+			const exitX = fromDir === "left" ? from.x - MIN_SEGMENT_LENGTH : from.x + MIN_SEGMENT_LENGTH;
+			const jogY = (from.y + to.y) / 2;
+			points.push({
+				x: exitX,
+				y: from.y
+			});
+			points.push({
+				x: exitX,
+				y: jogY
+			});
+			points.push({
+				x: to.x,
+				y: jogY
+			});
+		} else {
 			const midX = (from.x + to.x) / 2;
 			points.push({
 				x: midX,
@@ -4878,6 +5488,20 @@ var DEFAULT_EDGE_STYLE = {
 	strokeWidth: 2,
 	opacity: 1
 };
+/** Compare path options that affect polyline routing (not control-point identity). */
+function routingOptionsEqual(a, b) {
+	const aObs = a?.obstacles;
+	const bObs = b?.obstacles;
+	if (aObs === bObs) return true;
+	if (!aObs || !bObs) return !aObs && !bObs;
+	if (aObs.length !== bObs.length) return false;
+	for (let i = 0; i < aObs.length; i++) {
+		const left = aObs[i];
+		const right = bObs[i];
+		if (left.id !== right.id || left.role !== right.role || left.x !== right.x || left.y !== right.y || left.width !== right.width || left.height !== right.height) return false;
+	}
+	return true;
+}
 /**
 * Connection edge between nodes
 */
@@ -5223,7 +5847,9 @@ var Edge = class extends Element {
 	* @param toDir Direction at end point (top, right, bottom, left)
 	*/
 	updateEndpoints(fromPoint, toPoint, fromDir, toDir, options) {
-		if (this._path.length > 0 && this._fromPoint.x === fromPoint.x && this._fromPoint.y === fromPoint.y && this._toPoint.x === toPoint.x && this._toPoint.y === toPoint.y && this._fromDir === fromDir && this._toDir === toDir) {
+		const geometryUnchanged = this._path.length > 0 && this._fromPoint.x === fromPoint.x && this._fromPoint.y === fromPoint.y && this._toPoint.x === toPoint.x && this._toPoint.y === toPoint.y && this._fromDir === fromDir && this._toDir === toDir;
+		const routingOptionsChanged = !routingOptionsEqual(this._pathOptions, options);
+		if (geometryUnchanged && !routingOptionsChanged) {
 			this._pathOptions = options;
 			return;
 		}
@@ -7017,7 +7643,20 @@ var EdgeEndpointUpdater = class {
 		if (includeRoutingObstacles) 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);
-		edge.updateEndpoints(from.point, to.point, from.direction, to.direction, obstacles ? { obstacles } : void 0);
+		const fromId = edge.from.nodeId;
+		const toId = edge.to.nodeId;
+		const routingObstacles = obstacles?.map((obstacle) => {
+			if (obstacle.id === fromId) return {
+				...obstacle,
+				role: "source"
+			};
+			if (obstacle.id === toId) return {
+				...obstacle,
+				role: "target"
+			};
+			return obstacle;
+		});
+		edge.updateEndpoints(from.point, to.point, from.direction, to.direction, routingObstacles ? { obstacles: routingObstacles } : void 0);
 	}
 	/**
 	* @returns true when the resolved geometry changed enough to warrant another pass
@@ -8106,6 +8745,7 @@ var DiagramRenderer = class extends EventEmitter {
 	getNodeObstacles() {
 		if (this._nodeObstaclesCache !== null) return this._nodeObstaclesCache;
 		this._nodeObstaclesCache = Array.from(this._nodes.values()).map((node) => ({
+			id: node.id,
 			x: node.x - 8,
 			y: node.y - 8,
 			width: node.width + 16,
@@ -8926,6 +9566,29 @@ var NodeImage = class {
 	}
 };
 //#endregion
+//#region src/utils/resolveContentInset.ts
+function axisFactor(node, base) {
+	if (base === void 0 || !(base > 0) || !Number.isFinite(base)) return 1;
+	if (!Number.isFinite(node)) return 1;
+	return node / base;
+}
+/**
+* Resolve stored (reference) content inset to absolute px for the current node size.
+* Vertical sides (top/bottom) scale with height; horizontal (left/right) with width.
+*/
+function resolveContentInset(inset, scale, nodeSize, baseSize) {
+	const sx = axisFactor(nodeSize.width, baseSize?.width);
+	const sy = axisFactor(nodeSize.height, baseSize?.height);
+	const s = scale ?? {};
+	const clamp = (v) => Number.isFinite(v) ? Math.max(0, v) : 0;
+	return {
+		top: clamp(s.top ? inset.top * sy : inset.top),
+		bottom: clamp(s.bottom ? inset.bottom * sy : inset.bottom),
+		left: clamp(s.left ? inset.left * sx : inset.left),
+		right: clamp(s.right ? inset.right * sx : inset.right)
+	};
+}
+//#endregion
 //#region src/elements/Node.ts
 var BADGE_SIZE = 15;
 var BADGE_OFFSET = 4;
@@ -8973,6 +9636,8 @@ var Node = class extends Element {
 		this._anchorPoints = this.normalizeAnchorPoints(options.anchorPoints);
 		this._resizeHandlesEnabled = options.resizeHandlesEnabled ?? true;
 		this._contentInset = this.normalizeContentInset(options.contentInset);
+		this._contentInsetScale = this.normalizeContentInsetScale(options.contentInsetScale);
+		this._contentInsetBaseSize = this.normalizeContentInsetBaseSize(options.contentInsetBaseSize);
 		if (options.label !== void 0) if (typeof options.label === "string") this._label = new TextLabel({
 			text: options.label,
 			onChange: () => this.markDirty()
@@ -9209,6 +9874,26 @@ var Node = class extends Element {
 		this.markDirty();
 	}
 	/**
+	* Per-side proportional flags for contentInset (reference px vs contentInsetBaseSize).
+	*/
+	get contentInsetScale() {
+		return { ...this._contentInsetScale };
+	}
+	set contentInsetScale(value) {
+		this._contentInsetScale = this.normalizeContentInsetScale(value);
+		this.markDirty();
+	}
+	/**
+	* Base size used when resolving proportional contentInset sides.
+	*/
+	get contentInsetBaseSize() {
+		return this._contentInsetBaseSize ? { ...this._contentInsetBaseSize } : void 0;
+	}
+	set contentInsetBaseSize(value) {
+		this._contentInsetBaseSize = this.normalizeContentInsetBaseSize(value);
+		this.markDirty();
+	}
+	/**
 	* Set getter for attachToOutline (called by DiagramRenderer when node is added)
 	*/
 	setAttachToOutlineGetter(getter) {
@@ -9632,7 +10317,10 @@ var Node = class extends Element {
 		};
 	}
 	getLabelContainerBounds(bounds) {
-		const { top, right, bottom, left } = this._contentInset;
+		const { top, right, bottom, left } = resolveContentInset(this._contentInset, this._contentInsetScale, {
+			width: bounds.width,
+			height: bounds.height
+		}, this._contentInsetBaseSize);
 		return {
 			x: bounds.x + left,
 			y: bounds.y + top,
@@ -9664,6 +10352,25 @@ var Node = class extends Element {
 			left: n(value.left)
 		};
 	}
+	normalizeContentInsetScale(value) {
+		if (!value) return {};
+		const out = {};
+		if (value.top === true) out.top = true;
+		if (value.right === true) out.right = true;
+		if (value.bottom === true) out.bottom = true;
+		if (value.left === true) out.left = true;
+		return out;
+	}
+	normalizeContentInsetBaseSize(value) {
+		if (!value) return void 0;
+		const width = Number.isFinite(value.width) ? value.width : 0;
+		const height = Number.isFinite(value.height) ? value.height : 0;
+		if (!(width > 0) && !(height > 0)) return void 0;
+		return {
+			width,
+			height
+		};
+	}
 	getIconBoxSize() {
 		if (!this._icon) return;
 		const { width, height } = this._icon.getSize();
@@ -11946,13 +12653,7 @@ var CompositeNode = class extends Node {
 				height: h
 			};
 		}
-		const ci = this.contentInset;
-		return {
-			x: bounds.x + ci.left,
-			y: bounds.y + ci.top,
-			width: Math.max(0, bounds.width - ci.left - ci.right),
-			height: Math.max(0, bounds.height - ci.top - ci.bottom)
-		};
+		return super.getLabelContainerBounds(bounds);
 	}
 	/**
 	* Get the minimum content size needed for the content tree.
@@ -13777,6 +14478,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, 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, 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_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, 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 };
 
 //# sourceMappingURL=papirus.js.map