@ngroznykh/papirus 0.6.5 → 0.7.0

package/dist/papirus.js

@@ -1047,19 +1047,21 @@ var DragManager = class extends EventEmitter {
 		const nodeBindings = /* @__PURE__ */ new Map();
 		for (const edge of this.renderer.edges.values()) {
 			if (!edge.hasEditableControlPoints()) continue;
-			const isFromDragged = draggedIds.has(edge.from.nodeId);
-			const isToDragged = draggedIds.has(edge.to.nodeId);
+			const fromId = edge.from.nodeId;
+			const toId = edge.to.nodeId;
+			const isFromDragged = !!fromId && draggedIds.has(fromId);
+			const isToDragged = !!toId && draggedIds.has(toId);
 			if (isFromDragged && isToDragged) {
 				this.editablePolylineFullyConnectedEdges.add(edge.id);
 				this.initialControlPointsForFullyConnected.set(edge.id, clonePoints(edge.controlPoints));
 				continue;
 			}
 			for (const node of this.draggedNodes) {
-				const isFrom = edge.from.nodeId === node.id;
-				const isTo = edge.to.nodeId === node.id;
+				const isFrom = fromId === node.id;
+				const isTo = toId === node.id;
 				if (!isFrom && !isTo) continue;
-				const oppositeNodeId = isFrom ? edge.to.nodeId : edge.from.nodeId;
-				if (draggedIds.has(oppositeNodeId)) continue;
+				const oppositeNodeId = isFrom ? toId : fromId;
+				if (!oppositeNodeId || draggedIds.has(oppositeNodeId)) continue;
 				const controlPointIndex = isFrom ? 0 : edge.controlPoints.length - 1;
 				const nearestPoint = edge.controlPoints[controlPointIndex];
 				const endpoint = isFrom ? edge.startPoint : edge.endPoint;
@@ -1734,6 +1736,8 @@ var ConnectionManager = class extends EventEmitter {
 		this.sourceOutlineParam = null;
 		this.previewTargetOutlineParam = null;
 		this.previewTargetNodeId = null;
+		this.previewTargetEdgeId = null;
+		this.previewTargetPathParam = null;
 		this.isReconnecting = false;
 		this.reconnectingEdge = null;
 		this.reconnectingEndpoint = null;
@@ -1912,8 +1916,8 @@ var ConnectionManager = class extends EventEmitter {
 	updateReconnectingEdge(point) {
 		if (!this.reconnectingEdge) return;
 		const edge = this.reconnectingEdge;
-		const fromNode = this.renderer.getNode(edge.from.nodeId);
-		const toNode = this.renderer.getNode(edge.to.nodeId);
+		const fromNode = edge.from.nodeId ? this.renderer.getNode(edge.from.nodeId) : void 0;
+		const toNode = edge.to.nodeId ? this.renderer.getNode(edge.to.nodeId) : void 0;
 		let snappedPoint = point;
 		let snappedDir;
 		let targetNode = this.getNodeAtPoint(point, true);
@@ -2056,6 +2060,8 @@ var ConnectionManager = class extends EventEmitter {
 		this.previewTargetAnchorId = null;
 		this.previewTargetOutlineParam = null;
 		this.previewTargetNodeId = null;
+		this.previewTargetEdgeId = null;
+		this.previewTargetPathParam = null;
 		let targetNode = this.getNodeAtPoint(cursorPoint, false);
 		if (this.attachToOutline) {
 			const tolerance = 40 / Math.max(this.renderer.zoom, 1e-4);
@@ -2099,6 +2105,24 @@ var ConnectionManager = class extends EventEmitter {
 				}
 			}
 		}
+		const edgeDrop = this.findEdgeDropTarget(cursorPoint);
+		if (edgeDrop) {
+			let nodeDistance = Infinity;
+			if (targetNode) {
+				const dx = cursorPoint.x - snappedPoint.x;
+				const dy = cursorPoint.y - snappedPoint.y;
+				nodeDistance = Math.sqrt(dx * dx + dy * dy);
+			}
+			if (!targetNode || edgeDrop.distance < nodeDistance) {
+				targetNode = null;
+				this.previewTargetNodeId = null;
+				this.previewTargetOutlineParam = null;
+				this.previewTargetAnchorId = null;
+				snappedPoint = edgeDrop.point;
+				this.previewTargetEdgeId = edgeDrop.edge.id;
+				this.previewTargetPathParam = edgeDrop.pathParam;
+			}
+		}
 		if (targetNode) {
 			const forbidden = this._connectionValidator && this.sourceNode && !this._connectionValidator(this.sourceNode.id, targetNode.id);
 			this.setCursor(forbidden ? "not-allowed" : "crosshair");
@@ -2199,9 +2223,29 @@ var ConnectionManager = class extends EventEmitter {
 			y: event.worldY
 		};
 		let createdEdge = null;
+		const edgeDrop = this.previewTargetEdgeId != null && this.previewTargetPathParam != null ? {
+			edgeId: this.previewTargetEdgeId,
+			pathParam: this.previewTargetPathParam,
+			point
+		} : this.findEdgeDropTarget(point);
 		let targetNode = this.getNodeAtPoint(point, false);
 		if (!targetNode && this.attachToOutline && this.previewTargetNodeId) targetNode = this.renderer.getNode(this.previewTargetNodeId) ?? null;
-		if (targetNode) {
+		if (edgeDrop && this.sourceNode && (!targetNode || this.previewTargetEdgeId != null)) {
+			const from = this.attachToOutline ? {
+				nodeId: this.sourceNode.id,
+				outlineParam: this.sourceOutlineParam ?? void 0
+			} : {
+				nodeId: this.sourceNode.id,
+				portId: this.sourceAnchorId ? `${ANCHOR_PORT_PREFIX}${this.sourceAnchorId}` : void 0
+			};
+			const to = {
+				edgeId: edgeDrop.edgeId,
+				pathParam: edgeDrop.pathParam
+			};
+			createdEdge = this.createEdge(from, to);
+			this.addEdge(createdEdge);
+			this.emit("connect", createdEdge);
+		} else if (targetNode) {
 			if (!this._connectionValidator || this._connectionValidator(this.sourceNode.id, targetNode.id)) {
 				let from;
 				let to;
@@ -2338,8 +2382,36 @@ var ConnectionManager = class extends EventEmitter {
 		this.sourceOutlineParam = null;
 		this.previewTargetOutlineParam = null;
 		this.previewTargetNodeId = null;
+		this.previewTargetEdgeId = null;
+		this.previewTargetPathParam = null;
 		this.setCursor("");
 	}
+	/**
+	* 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));
+		let best = null;
+		for (const edge of this.renderer.edges.values()) {
+			if (!edge.visible || edge.path.length < 2) continue;
+			const closest = edge.getClosestPointOnPath(point);
+			if (!closest || closest.distance > tolerance) continue;
+			if (!best || closest.distance < best.distance) best = {
+				edge,
+				pathParam: closest.pathParam,
+				point: closest.point,
+				distance: closest.distance
+			};
+		}
+		if (!best) return null;
+		return {
+			edge: best.edge,
+			edgeId: best.edge.id,
+			pathParam: best.pathParam,
+			point: best.point,
+			distance: best.distance
+		};
+	}
 	resetReconnection() {
 		this.isReconnecting = false;
 		if (this.reconnectingEdge) this.reconnectingEdge.autoUpdateEndpoints = true;
@@ -3588,6 +3660,109 @@ 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
@@ -4696,69 +4871,6 @@ function getEdgeLabelRotation(options) {
 	if (angle < -Math.PI / 2) angle += Math.PI;
 	return angle;
 }
-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)
-	};
-}
 //#endregion
 //#region src/elements/Edge.ts
 var DEFAULT_EDGE_STYLE = {
@@ -4825,6 +4937,7 @@ var Edge = class extends Element {
 	}
 	set from(value) {
 		this._from = value;
+		this._bindingListener?.();
 		this.markDirty();
 	}
 	/**
@@ -4835,9 +4948,17 @@ var Edge = class extends Element {
 	}
 	set to(value) {
 		this._to = value;
+		this._bindingListener?.();
 		this.markDirty();
 	}
 	/**
+	* Notified when from/to binding changes (ports / outline params / node ids).
+	* Used by DiagramRenderer to resync endpoints without doing so on every pan frame.
+	*/
+	setBindingListener(listener) {
+		this._bindingListener = listener;
+	}
+	/**
 	* Edge type
 	*/
 	get type() {
@@ -5102,6 +5223,10 @@ 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) {
+			this._pathOptions = options;
+			return;
+		}
 		this._fromPoint = fromPoint;
 		this._toPoint = toPoint;
 		this._fromDir = fromDir;
@@ -5398,6 +5523,19 @@ var Edge = class extends Element {
 		});
 	}
 	/**
+	* Point and tangent on the current path at a normalized length position (0..1).
+	*/
+	getPointAt(pathParam = .5) {
+		if (this._path.length < 2) return null;
+		return getPathPointAt(this._path, this._type, pathParam);
+	}
+	/**
+	* Nearest point on this edge's path to `point` (world coordinates).
+	*/
+	getClosestPointOnPath(point) {
+		return getClosestPointOnPath(this._path, this._type, point);
+	}
+	/**
 	* Get world position of label center along path.
 	*/
 	getLabelPosition() {
@@ -5592,22 +5730,27 @@ var ClipboardManager = class {
 				nodeIds.add(node.id);
 			}
 		}
-		for (const edge of this.renderer.edges.values()) if (nodeIds.has(edge.from.nodeId) && nodeIds.has(edge.to.nodeId)) edges.push({
-			id: edge.id,
-			from: edge.from,
-			to: edge.to,
-			type: edge.type,
-			controlPoints: edge.controlPoints,
-			arrowType: edge.arrowType,
-			style: edge.style,
-			styleClass: edge.styleClass,
-			label: edge.label?.text,
-			labelStyleClass: edge.label?.styleClass,
-			labelOffset: edge.labelOffset !== 0 ? edge.labelOffset : void 0,
-			labelBackground: edge.labelBackground,
-			labelLineGap: edge.labelLineGap ? true : void 0,
-			data: Object.keys(edge.data).length > 0 ? edge.data : void 0
-		});
+		for (const edge of this.renderer.edges.values()) {
+			const fromId = edge.from.nodeId;
+			const toId = edge.to.nodeId;
+			if (!fromId || !toId || !nodeIds.has(fromId) || !nodeIds.has(toId)) continue;
+			edges.push({
+				id: edge.id,
+				from: edge.from,
+				to: edge.to,
+				type: edge.type,
+				controlPoints: edge.controlPoints,
+				arrowType: edge.arrowType,
+				style: edge.style,
+				styleClass: edge.styleClass,
+				label: edge.label?.text,
+				labelStyleClass: edge.label?.styleClass,
+				labelOffset: edge.labelOffset !== 0 ? edge.labelOffset : void 0,
+				labelBackground: edge.labelBackground,
+				labelLineGap: edge.labelLineGap ? true : void 0,
+				data: Object.keys(edge.data).length > 0 ? edge.data : void 0
+			});
+		}
 		this.clipboard = {
 			nodes,
 			edges
@@ -5634,8 +5777,11 @@ var ClipboardManager = class {
 			newNodes.push(this.nodeFactory(copyData));
 		}
 		for (const edgeData of this.clipboard.edges) {
-			const fromNodeId = idMap.get(edgeData.from.nodeId);
-			const toNodeId = idMap.get(edgeData.to.nodeId);
+			const fromKey = edgeData.from.nodeId;
+			const toKey = edgeData.to.nodeId;
+			if (!fromKey || !toKey) continue;
+			const fromNodeId = idMap.get(fromKey);
+			const toNodeId = idMap.get(toKey);
 			if (!fromNodeId || !toNodeId) continue;
 			const newId = `${edgeData.id}_copy_${Date.now()}`;
 			const copyEdge = {
@@ -5837,7 +5983,9 @@ var InteractionManager = class {
 		const idSet = new Set(nodeIds);
 		for (const edge of this.renderer.edges.values()) {
 			if (!edge.hasEditableControlPoints()) continue;
-			if (!idSet.has(edge.from.nodeId) && !idSet.has(edge.to.nodeId)) continue;
+			const fromId = edge.from.nodeId;
+			const toId = edge.to.nodeId;
+			if ((!fromId || !idSet.has(fromId)) && (!toId || !idSet.has(toId))) continue;
 			if (this.dragStartEditablePolylinePoints.has(edge.id)) continue;
 			this.dragStartEditablePolylinePoints.set(edge.id, clonePoints(edge.controlPoints));
 		}
@@ -6385,10 +6533,14 @@ var InteractionManager = class {
 				nodeGroupIds.set(child.id, list);
 			}
 		}
-		for (const edge of this.renderer.edges.values()) if (nodeIds.has(edge.from.nodeId) || nodeIds.has(edge.to.nodeId)) {
-			if (!edgeIds.has(edge.id)) {
-				edgeIds.add(edge.id);
-				edges.push(edge);
+		for (const edge of this.renderer.edges.values()) {
+			const fromId = edge.from.nodeId;
+			const toId = edge.to.nodeId;
+			if (fromId && nodeIds.has(fromId) || toId && nodeIds.has(toId)) {
+				if (!edgeIds.has(edge.id)) {
+					edgeIds.add(edge.id);
+					edges.push(edge);
+				}
 			}
 		}
 		return new CompositeCommand([{
@@ -6411,8 +6563,15 @@ var InteractionManager = class {
 		}]);
 	}
 	endpointsEqual(a, b) {
-		if (a.nodeId !== b.nodeId) return false;
+		if ((a.edgeId ?? null) !== (b.edgeId ?? null)) return false;
+		if ((a.nodeId ?? null) !== (b.nodeId ?? null)) return false;
 		if ((a.portId ?? null) !== (b.portId ?? null)) return false;
+		const aPath = a.pathParam;
+		const bPath = b.pathParam;
+		if (aPath !== void 0 || bPath !== void 0) {
+			if (aPath === void 0 || bPath === void 0) return false;
+			if (Math.abs(aPath - bPath) >= 1e-9) return false;
+		}
 		const aParam = a.outlineParam;
 		const bParam = b.outlineParam;
 		if (aParam === void 0 && bParam === void 0) return true;
@@ -6812,7 +6971,16 @@ 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 {
 	constructor(host) {
 		this.host = host;
@@ -6826,26 +6994,73 @@ var EdgeEndpointUpdater = class {
 	update(includeRoutingObstacles) {
 		const obstacles = includeRoutingObstacles ? this.host.getNodeObstacles() : void 0;
 		const nodes = this.host.getNodes();
-		for (const edge of this.host.getEdges().values()) {
+		const edges = this.host.getEdges();
+		const nodeNode = [];
+		const edgeAttached = [];
+		for (const edge of edges.values()) {
 			if (!edge.autoUpdateEndpoints) continue;
-			const fromNode = nodes.get(edge.from.nodeId);
-			const toNode = nodes.get(edge.to.nodeId);
-			if (!fromNode || !toNode) continue;
-			if (includeRoutingObstacles) this.lockAnchors(edge, fromNode, toNode);
-			const from = this.resolveEndpoint(fromNode, edge.from.portId, edge.from.outlineParam);
-			const to = this.resolveEndpoint(toNode, edge.to.portId, edge.to.outlineParam);
-			edge.updateEndpoints(from.point, to.point, from.direction, to.direction, obstacles ? { obstacles } : void 0);
+			if (isEdgeEdgeEndpoint(edge.from) || isEdgeEdgeEndpoint(edge.to)) edgeAttached.push(edge);
+			else nodeNode.push(edge);
+		}
+		for (const edge of nodeNode) this.updateNodeNodeEdge(edge, nodes, includeRoutingObstacles, obstacles);
+		for (let pass = 0; pass < EDGE_ATTACH_MAX_PASSES; pass++) {
+			let changed = false;
+			for (const edge of edgeAttached) if (this.updateEdgeAttachedEdge(edge, nodes, edges, obstacles)) changed = true;
+			if (!changed) break;
+		}
+	}
+	updateNodeNodeEdge(edge, nodes, includeRoutingObstacles, obstacles) {
+		if (!isNodeEdgeEndpoint(edge.from) || !isNodeEdgeEndpoint(edge.to)) return;
+		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);
+		const from = this.resolveNodeEndpoint(fromNode, edge.from);
+		const to = this.resolveNodeEndpoint(toNode, edge.to);
+		edge.updateEndpoints(from.point, to.point, from.direction, to.direction, obstacles ? { obstacles } : void 0);
+	}
+	/**
+	* @returns true when the resolved geometry changed enough to warrant another pass
+	*/
+	updateEdgeAttachedEdge(edge, nodes, edges, obstacles) {
+		const from = this.resolveAnyEndpoint(edge.from, nodes, edges);
+		const to = this.resolveAnyEndpoint(edge.to, nodes, edges);
+		if (!from || !to) return false;
+		const before = edge.path;
+		const beforeKey = before.length >= 2 ? `${before[0].x},${before[0].y}:${before[before.length - 1].x},${before[before.length - 1].y}` : "";
+		edge.updateEndpoints(from.point, to.point, from.direction, to.direction, obstacles ? { obstacles } : void 0);
+		const after = edge.path;
+		return beforeKey !== (after.length >= 2 ? `${after[0].x},${after[0].y}:${after[after.length - 1].x},${after[after.length - 1].y}` : "");
+	}
+	resolveAnyEndpoint(endpoint, nodes, edges) {
+		if (isEdgeEdgeEndpoint(endpoint)) return this.resolveEdgeEndpoint(endpoint, edges);
+		if (isNodeEdgeEndpoint(endpoint)) {
+			const node = nodes.get(endpoint.nodeId);
+			if (!node) return null;
+			return this.resolveNodeEndpoint(node, endpoint);
 		}
+		return null;
+	}
+	resolveEdgeEndpoint(endpoint, edges) {
+		const host = edges.get(endpoint.edgeId);
+		if (!host) return null;
+		const pathParam = endpoint.pathParam ?? .5;
+		const at = host.getPointAt(pathParam);
+		if (!at) return null;
+		return {
+			point: at.point,
+			direction: directionFromAngle(at.angle)
+		};
 	}
 	lockAnchors(edge, fromNode, toNode) {
-		if (edge.lockAnchors && edge.from.outlineParam === void 0 && !edge.from.portId) {
+		if (isNodeEdgeEndpoint(edge.from) && edge.lockAnchors && edge.from.outlineParam === void 0 && !edge.from.portId) {
 			const anchor = fromNode.getNearestAnchor(toNode.getCenter());
 			if (anchor) edge.from = {
 				...edge.from,
 				portId: `${ANCHOR_PORT_PREFIX}${anchor.id}`
 			};
 		}
-		if (edge.lockAnchors && edge.to.outlineParam === void 0 && !edge.to.portId) {
+		if (isNodeEdgeEndpoint(edge.to) && edge.lockAnchors && edge.to.outlineParam === void 0 && !edge.to.portId) {
 			const anchor = toNode.getNearestAnchor(fromNode.getCenter());
 			if (anchor) edge.to = {
 				...edge.to,
@@ -6853,18 +7068,18 @@ var EdgeEndpointUpdater = class {
 			};
 		}
 	}
-	resolveEndpoint(node, portId, outlineParam) {
-		if (portId) {
-			const anchorId = portId.slice(ANCHOR_PORT_PREFIX.length);
+	resolveNodeEndpoint(node, endpoint) {
+		if (endpoint.portId) {
+			const anchorId = endpoint.portId.slice(ANCHOR_PORT_PREFIX.length);
 			const point = node.getAnchorPointById(anchorId);
 			return point ? {
 				point,
 				direction: anchorId.split(":")[0]
 			} : { point: node.getCenter() };
 		}
-		if (outlineParam !== void 0) return {
-			point: node.getConnectionPointAtOutlineParam(outlineParam),
-			direction: getDirectionFromOutlineParam(outlineParam)
+		if (endpoint.outlineParam !== void 0) return {
+			point: node.getConnectionPointAtOutlineParam(endpoint.outlineParam),
+			direction: getDirectionFromOutlineParam(endpoint.outlineParam)
 		};
 		return { point: node.getCenter() };
 	}
@@ -7232,6 +7447,7 @@ var DiagramRenderer = class extends EventEmitter {
 		this._offsetY = 0;
 		this._dirty = true;
 		this._styleDirty = true;
+		this._contentDirty = true;
 		this._destroyed = false;
 		this._canvasRect = null;
 		this._nodeObstaclesCache = null;
@@ -7536,12 +7752,11 @@ var DiagramRenderer = class extends EventEmitter {
 	* Add a node to the diagram
 	*/
 	addNode(node) {
-		node.setDirtyListener(() => this.markDirty());
+		node.setDirtyListener(() => this.markContentDirty());
 		node.setAttachToOutlineGetter(() => this._attachToOutline);
 		this._nodes.set(node.id, node);
-		this._nodeObstaclesCache = null;
 		this.animationManager.registerEnter(node.id);
-		this.markDirty();
+		this.markContentDirty();
 		this.emit("nodeAdd", node);
 	}
 	/**
@@ -7572,11 +7787,12 @@ var DiagramRenderer = class extends EventEmitter {
 	*/
 	addEdge(edge) {
 		edge.setDirtyListener(() => this.markDirty());
+		edge.setBindingListener(() => this.markContentDirty());
 		this._edges.set(edge.id, edge);
-		this._updateEdgeIndex(edge.id, edge.from.nodeId, true);
-		this._updateEdgeIndex(edge.id, edge.to.nodeId, true);
+		if (edge.from.nodeId) this._updateEdgeIndex(edge.id, edge.from.nodeId, true);
+		if (edge.to.nodeId) this._updateEdgeIndex(edge.id, edge.to.nodeId, true);
 		this.animationManager.registerEnter(edge.id);
-		this.markDirty();
+		this.markContentDirty();
 		this.emit("edgeAdd", edge);
 	}
 	/**
@@ -7615,21 +7831,27 @@ var DiagramRenderer = class extends EventEmitter {
 		if (edgesToRemove) for (const edgeId of Array.from(edgesToRemove)) this.removeEdgeImmediate(edgeId);
 		for (const group of this._groups.values()) group.removeChild(nodeId);
 		this._nodes.delete(nodeId);
-		this._nodeObstaclesCache = null;
 		node.setDirtyListener(void 0);
 		node.setAttachToOutlineGetter(void 0);
-		this.markDirty();
+		this.markContentDirty();
 		this.emit("nodeRemove", node);
 		return true;
 	}
 	removeEdgeImmediate(edgeId) {
 		const edge = this._edges.get(edgeId);
 		if (edge === void 0) return false;
-		this._updateEdgeIndex(edgeId, edge.from.nodeId, false);
-		this._updateEdgeIndex(edgeId, edge.to.nodeId, false);
+		const dependents = [];
+		for (const other of this._edges.values()) {
+			if (other.id === edgeId) continue;
+			if (other.from.edgeId === edgeId || other.to.edgeId === edgeId) dependents.push(other.id);
+		}
+		for (const dependentId of dependents) this.removeEdgeImmediate(dependentId);
+		if (edge.from.nodeId) this._updateEdgeIndex(edgeId, edge.from.nodeId, false);
+		if (edge.to.nodeId) this._updateEdgeIndex(edgeId, edge.to.nodeId, false);
 		this._edges.delete(edgeId);
 		edge.setDirtyListener(void 0);
-		this.markDirty();
+		edge.setBindingListener(void 0);
+		this.markContentDirty();
 		this.emit("edgeRemove", edge);
 		return true;
 	}
@@ -7709,12 +7931,22 @@ var DiagramRenderer = class extends EventEmitter {
 		for (const n of this._nodes.values()) n.setBadgeHover(n.id === hoveredNodeId ? hoveredIndex : -1);
 	}
 	/**
-	* Mark the diagram as needing re-render
+	* Mark the diagram as needing re-render (viewport / cosmetics).
+	* Does not resync edge endpoints — use {@link markContentDirty} after layout changes.
 	*/
 	markDirty() {
 		this._dirty = true;
 	}
 	/**
+	* Mark that node/edge layout changed and edge endpoints must be recalculated.
+	* Pan/zoom should call {@link markDirty} only so path routing is not redone every frame.
+	*/
+	markContentDirty() {
+		this._contentDirty = true;
+		this._nodeObstaclesCache = null;
+		this._dirty = true;
+	}
+	/**
 	* Force an immediate render
 	*/
 	render() {
@@ -7792,7 +8024,6 @@ var DiagramRenderer = class extends EventEmitter {
 	}
 	renderFrame(now) {
 		this.frameTime = now;
-		this._nodeObstaclesCache = null;
 		const ctx = this.ctx;
 		const { width, height, backgroundColor } = this.options;
 		ctx.setTransform(this.devicePixelRatio, 0, 0, this.devicePixelRatio, 0, 0);
@@ -7810,7 +8041,10 @@ var DiagramRenderer = class extends EventEmitter {
 			this.renderElementWithAnimation(ctx, group, () => group.render(ctx));
 			group.clearDirty();
 		}
-		this.edgeEndpointUpdater.updateAll();
+		if (this._contentDirty) {
+			this.edgeEndpointUpdater.updateAll();
+			this._contentDirty = false;
+		}
 		for (const node of this._nodes.values()) if (node.visible) {
 			this.renderElementWithAnimation(ctx, node, () => node.render(ctx));
 			node.clearDirty();
@@ -8054,8 +8288,10 @@ var SearchManager = class {
 		for (const edge of this.renderer.edges.values()) {
 			if (scope === "nodes") continue;
 			const matchesEdge = this.matchesEdge(edge, options);
-			const fromVisible = this.renderer.getNode(edge.from.nodeId)?.visible ?? true;
-			const toVisible = this.renderer.getNode(edge.to.nodeId)?.visible ?? true;
+			const fromId = edge.from.nodeId;
+			const toId = edge.to.nodeId;
+			const fromVisible = fromId ? this.renderer.getNode(fromId)?.visible ?? true : true;
+			const toVisible = toId ? this.renderer.getNode(toId)?.visible ?? true : true;
 			edge.visible = matchesEdge && fromVisible && toVisible;
 		}
 		this.renderer.markDirty();
@@ -8414,7 +8650,7 @@ var svgTextCache = new LRUCache(100);
 function fetchSvgText(url) {
 	let promise = svgTextCache.get(url);
 	if (!promise) {
-		promise = fetch(url).then((r) => r.ok ? r.text() : "");
+		promise = fetch(url).then((r) => r.ok ? r.text() : "").catch(() => "");
 		svgTextCache.set(url, promise);
 	}
 	return promise;
@@ -8432,6 +8668,32 @@ function readSvgFromUrlSync(url) {
 	} catch {}
 	return null;
 }
+/**
+* Resolve a source string to an href suitable for Image/SVG (async, with tint).
+*/
+async function resolveTintedSvgDataUrl(source, options = {}) {
+	const { strokeColor, fillColor } = options;
+	if (isSvgMarkup(source)) return svgToDataUrl(tintSvg(source, strokeColor, fillColor));
+	if (isSvgUrl(source) || source.toLowerCase().endsWith(".svg")) {
+		const svgText = await fetchSvgText(source);
+		if (!svgText) return null;
+		return svgToDataUrl(tintSvg(svgText, strokeColor, fillColor));
+	}
+	return null;
+}
+/**
+* Resolve a source to a tinted data URL synchronously (SvgExporter path).
+*/
+function resolveTintedSvgDataUrlSync(source, options = {}) {
+	const { strokeColor, fillColor } = options;
+	if (isSvgMarkup(source)) return svgToDataUrl(tintSvg(source, strokeColor, fillColor));
+	if (source.toLowerCase().endsWith(".svg")) {
+		const svgText = readSvgFromUrlSync(source);
+		if (!svgText) return null;
+		return svgToDataUrl(tintSvg(svgText, strokeColor, fillColor));
+	}
+	return null;
+}
 //#endregion
 //#region src/utils/iconLayout.ts
 /**
@@ -8616,22 +8878,20 @@ var NodeImage = class {
 		if (source instanceof HTMLImageElement) return;
 		const version = ++this._sourceVersion;
 		if (isSvgMarkup(source)) {
-			const tinted = tintSvg(source, this._options.strokeColor, this._options.fillColor);
+			const resolvedSource = resolveTintedSvgDataUrlSync(source, {
+				strokeColor: this._options.strokeColor,
+				fillColor: this._options.fillColor
+			});
 			if (version !== this._sourceVersion) return;
-			this._image.src = svgToDataUrl(tinted);
+			this._image.src = resolvedSource ?? source;
 			return;
 		}
-		if ((!!this._options.strokeColor || !!this._options.fillColor) && source.toLowerCase().endsWith(".svg")) {
-			const svgText = await fetchSvgText(source);
-			if (version !== this._sourceVersion) return;
-			if (svgText) {
-				const tinted = tintSvg(svgText, this._options.strokeColor, this._options.fillColor);
-				this._image.src = svgToDataUrl(tinted);
-				return;
-			}
-		}
+		const resolvedSource = await resolveTintedSvgDataUrl(source, {
+			strokeColor: this._options.strokeColor,
+			fillColor: this._options.fillColor
+		});
 		if (version !== this._sourceVersion) return;
-		this._image.src = source;
+		this._image.src = resolvedSource ?? source;
 	}
 	attachHandlers() {
 		if (this._image.complete && this._image.naturalWidth > 0) {
@@ -10703,16 +10963,8 @@ var CIcon = class extends CompositeComponentBase {
 		}
 	}
 	async loadSource(source) {
-		if (isSvgMarkup(source)) {
-			const tinted = this._fillColor ? tintSvg(source, void 0, this._fillColor) : source;
-			this._image.src = svgToDataUrl(tinted);
-		} else if (isSvgUrl(source) && this._fillColor) try {
-			const tinted = tintSvg(await fetchSvgText(source), void 0, this._fillColor);
-			this._image.src = svgToDataUrl(tinted);
-		} catch {
-			this._image.src = source;
-		}
-		else this._image.src = source;
+		const resolvedSource = await resolveTintedSvgDataUrl(source, { fillColor: this._fillColor });
+		this._image.src = resolvedSource ?? source;
 	}
 	measure(_ctx) {
 		return {
@@ -10761,7 +11013,8 @@ var CIcon = class extends CompositeComponentBase {
 		const drawHeight = Math.min(this._height, bounds.height);
 		const dx = bounds.x + (bounds.width - drawWidth) / 2;
 		const dy = bounds.y + (bounds.height - drawHeight) / 2;
-		svg += `<image href="${escapeXmlAttr(this._source)}" x="${dx}" y="${dy}" width="${drawWidth}" height="${drawHeight}" />`;
+		const source = resolveTintedSvgDataUrlSync(this._source, { fillColor: this._fillColor }) ?? this._source;
+		svg += `<image href="${escapeXmlAttr(source)}" x="${dx}" y="${dy}" width="${drawWidth}" height="${drawHeight}" />`;
 		return svg;
 	}
 };
@@ -12180,9 +12433,14 @@ var Serializer = class {
 		if (!Array.isArray(data.nodes)) throw new SerializerValidationError("Invalid or missing nodes array");
 		if (!Array.isArray(data.edges)) throw new SerializerValidationError("Invalid or missing edges array");
 		const nodeIds = new Set(data.nodes.map((n) => n.id));
+		const edgeIds = new Set(data.edges.map((e) => e.id));
 		for (const edge of data.edges) {
-			if (!nodeIds.has(edge.from.nodeId)) throw new SerializerValidationError(`Edge "${edge.id}" references non-existent source node "${edge.from.nodeId}"`);
-			if (!nodeIds.has(edge.to.nodeId)) throw new SerializerValidationError(`Edge "${edge.id}" references non-existent target node "${edge.to.nodeId}"`);
+			if (edge.from.edgeId) {
+				if (!edgeIds.has(edge.from.edgeId)) throw new SerializerValidationError(`Edge "${edge.id}" references non-existent host edge "${edge.from.edgeId}"`);
+			} else if (!edge.from.nodeId || !nodeIds.has(edge.from.nodeId)) throw new SerializerValidationError(`Edge "${edge.id}" references non-existent source node "${edge.from.nodeId}"`);
+			if (edge.to.edgeId) {
+				if (!edgeIds.has(edge.to.edgeId)) throw new SerializerValidationError(`Edge "${edge.id}" references non-existent host edge "${edge.to.edgeId}"`);
+			} else if (!edge.to.nodeId || !nodeIds.has(edge.to.nodeId)) throw new SerializerValidationError(`Edge "${edge.id}" references non-existent target node "${edge.to.nodeId}"`);
 		}
 	}
 	/**
@@ -12965,12 +13223,10 @@ var SvgExporter = class {
 		const source = opts.source;
 		if (source instanceof HTMLImageElement) return source.src;
 		if (!source) return "";
-		if (isSvgMarkup(source)) return svgToDataUrl(tintSvg(source, opts.strokeColor, opts.fillColor));
-		if (source.toLowerCase().endsWith(".svg")) {
-			const svgText = readSvgFromUrlSync(source);
-			if (svgText) return svgToDataUrl(tintSvg(svgText, opts.strokeColor, opts.fillColor));
-		}
-		return source;
+		return resolveTintedSvgDataUrlSync(source, {
+			strokeColor: opts.strokeColor,
+			fillColor: opts.fillColor
+		}) ?? source;
 	}
 	escapeAttribute(value) {
 		return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -13027,8 +13283,11 @@ var AutoRouting = class {
 		const type = options.type ?? "polyline";
 		for (const edge of renderer.edges.values()) {
 			edge.type = type;
-			const fromNode = renderer.getNode(edge.from.nodeId);
-			const toNode = renderer.getNode(edge.to.nodeId);
+			const fromId = edge.from.nodeId;
+			const toId = edge.to.nodeId;
+			if (!fromId || !toId) continue;
+			const fromNode = renderer.getNode(fromId);
+			const toNode = renderer.getNode(toId);
 			if (!fromNode || !toNode) continue;
 			const fromPoint = edge.from.portId !== void 0 ? fromNode.getPortPosition(edge.from.portId) ?? fromNode.getCenter() : fromNode.getCenter();
 			const toPoint = edge.to.portId !== void 0 ? toNode.getPortPosition(edge.to.portId) ?? toNode.getCenter() : toNode.getCenter();
@@ -13503,6 +13762,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, distance, distanceToSegment, distributeNodes, divider, drawRoundedRectPath, expandBounds, flexLayout, generateId, icon, isCornerPlacement, 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, rotatePoint, segmentRectIntersections, shape, snapPointToGrid, snapToGrid, text };
 
 //# sourceMappingURL=papirus.js.map