@html-graph/html-graph 8.24.0 → 9.1.0

package/dist/html-graph.js

@@ -121,11 +121,11 @@ var CoreHtmlView = class {
 		node.element.style.zIndex = `${node.payload.priority}`;
 	}
 	updateEdgeShape(edgeId) {
-		const element = this.edgeIdToElementMap.get(edgeId);
-		this.container.removeChild(element);
-		const svg = this.graphStore.getEdge(edgeId).payload.shape.element;
-		this.edgeIdToElementMap.set(edgeId, svg);
-		this.container.appendChild(svg);
+		const previousElement = this.edgeIdToElementMap.get(edgeId);
+		this.container.removeChild(previousElement);
+		const { element } = this.graphStore.getEdge(edgeId).payload.shape;
+		this.edgeIdToElementMap.set(edgeId, element);
+		this.container.appendChild(element);
 	}
 	renderEdge(edgeId) {
 		const edge = this.graphStore.getEdge(edgeId);
@@ -1097,10 +1097,10 @@ var createAddNodeOverlayRequest = (payload) => {
 };
 //#endregion
 //#region src/configurators/shared/find-port-at-point/find-port-for-element/find-port-for-element.ts
-var findPortForElement = (graph, element) => {
+var findPortForElement = (graph, element, portIdResolver) => {
 	let elementBuf = element;
 	while (elementBuf !== null) {
-		const portId = graph.findPortIdsByElement(elementBuf)[0] ?? null;
+		const portId = portIdResolver(graph.findPortIdsByElement(elementBuf));
 		if (portId !== null) return {
 			status: "portFound",
 			portId
@@ -1124,10 +1124,10 @@ function* getElementsAtPoint(root, point) {
 }
 //#endregion
 //#region src/configurators/shared/find-port-at-point/find-port-at-point.ts
-var findPortAtPoint = (graph, point) => {
+var findPortAtPoint = (graph, point, portIdResolver) => {
 	const elements = getElementsAtPoint(document, point);
 	for (const element of elements) {
-		const result = findPortForElement(graph, element);
+		const result = findPortForElement(graph, element, portIdResolver);
 		if (result.status === "portFound") return result.portId;
 		if (result.status === "nodeEncountered") return null;
 	}
@@ -1663,43 +1663,6 @@ var createOrthogonalLine = (from, to) => {
 	return createVerticalSourceOrthogonalLine(from, to);
 };
 //#endregion
-//#region src/edges/paths/horizontal-edge-path/horizontal-edge-path.ts
-var HorizontalEdgePath = class {
-	path;
-	midpoint;
-	constructor(params) {
-		const { from, to, fromDir, toDir, arrowLength, arrowOffset, roundness, hasSourceArrow, hasTargetArrow } = params;
-		const beginArrow = hasSourceArrow ? createRotatedPoint({
-			x: from.x + arrowLength,
-			y: from.y
-		}, fromDir, from) : from;
-		const endArrow = hasTargetArrow ? createRotatedPoint({
-			x: to.x - arrowLength,
-			y: to.y
-		}, toDir, to) : to;
-		const gap = arrowLength + arrowOffset;
-		const beginLine = createRotatedPoint({
-			x: from.x + gap,
-			y: from.y
-		}, fromDir, from);
-		const endLine = createRotatedPoint({
-			x: to.x - gap,
-			y: to.y
-		}, toDir, to);
-		const line = createHorizontalLine({
-			arrowPoint: beginArrow,
-			linePoint: beginLine,
-			dir: fromDir
-		}, {
-			arrowPoint: endArrow,
-			linePoint: endLine,
-			dir: toDir
-		});
-		this.path = createRoundedPath(line.points, roundness);
-		this.midpoint = line.midpoint;
-	}
-};
-//#endregion
 //#region src/edges/paths/detour-straight-edge-path/detour-straight-edge-path.ts
 var DetourStraightEdgePath = class {
 	path;
@@ -1787,43 +1750,6 @@ var StraightEdgePath = class {
 	}
 };
 //#endregion
-//#region src/edges/paths/vertical-edge-path/vertical-edge-path.ts
-var VerticalEdgePath = class {
-	path;
-	midpoint;
-	constructor(params) {
-		const { from, to, hasSourceArrow, hasTargetArrow, arrowLength, arrowOffset, fromDir, toDir, roundness } = params;
-		const beginArrow = hasSourceArrow ? createRotatedPoint({
-			x: from.x + arrowLength,
-			y: from.y
-		}, fromDir, from) : from;
-		const endArrow = hasTargetArrow ? createRotatedPoint({
-			x: to.x - arrowLength,
-			y: to.y
-		}, toDir, to) : to;
-		const gap = arrowLength + arrowOffset;
-		const beginLine = createRotatedPoint({
-			x: from.x + gap,
-			y: from.y
-		}, fromDir, from);
-		const endLine = createRotatedPoint({
-			x: to.x - gap,
-			y: to.y
-		}, toDir, to);
-		const line = createVerticalLine({
-			arrowPoint: beginArrow,
-			linePoint: beginLine,
-			dir: fromDir
-		}, {
-			arrowPoint: endArrow,
-			linePoint: endLine,
-			dir: toDir
-		});
-		this.path = createRoundedPath(line.points, roundness);
-		this.midpoint = line.midpoint;
-	}
-};
-//#endregion
 //#region src/edges/paths/orthogonal-edge-path/orthogonal-edge-path.ts
 var OrthogonalEdgePath = class {
 	path;
@@ -2132,7 +2058,6 @@ var createDirectionVector = (dir) => {
 var PathEdgeShape = class {
 	params;
 	element;
-	svg;
 	group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	line;
 	sourceArrow = null;
@@ -2145,7 +2070,6 @@ var PathEdgeShape = class {
 		[this.afterRenderEmitter, this.onAfterRender] = createPair();
 		this.arrowRenderer = this.params.arrowRenderer;
 		this.element = createEdgeSvg(params.color);
-		this.svg = this.element;
 		this.element.appendChild(this.group);
 		this.line = createEdgePath(params.width);
 		this.group.appendChild(this.line);
@@ -2319,7 +2243,6 @@ var resolveArrowRenderer = (config) => {
 //#region src/edges/shapes/bezier-edge-shape/bezier-edge-shape.ts
 var BezierEdgeShape = class {
 	element;
-	svg;
 	group;
 	line;
 	sourceArrow;
@@ -2386,7 +2309,6 @@ var BezierEdgeShape = class {
 			padding: 50
 		});
 		this.element = this.pathShape.element;
-		this.svg = this.element;
 		this.group = this.pathShape.group;
 		this.line = this.pathShape.line;
 		this.sourceArrow = this.pathShape.sourceArrow;
@@ -2398,113 +2320,9 @@ var BezierEdgeShape = class {
 	}
 };
 //#endregion
-//#region src/edges/shapes/horizontal-edge-shape/horizontalize-directions/horizontalize-direction.ts
-var horizontalizeDirection = (direction) => {
-	return Math.cos(direction) > 0 ? 0 : Math.PI;
-};
-//#endregion
-//#region src/edges/shapes/horizontal-edge-shape/horizontal-edge-shape.ts
-/**
-* @deprecated
-* use OrthogonalEdgeShape instead
-*/
-var HorizontalEdgeShape = class {
-	element;
-	svg;
-	group;
-	line;
-	sourceArrow;
-	targetArrow;
-	onAfterRender;
-	arrowLength;
-	arrowOffset;
-	roundness;
-	cycleSquareSide;
-	detourDistance;
-	hasSourceArrow;
-	hasTargetArrow;
-	pathShape;
-	createCyclePath = (from, _to, fromDir) => new CycleSquareEdgePath({
-		origin: from,
-		dir: fromDir,
-		arrowLength: this.arrowLength,
-		side: this.cycleSquareSide,
-		arrowOffset: this.arrowOffset,
-		roundness: this.roundness,
-		hasArrow: this.hasSourceArrow || this.hasTargetArrow
-	});
-	createDetourPath = (from, to, fromDir, toDir) => new DetourHorizontalEdgePath({
-		from,
-		to,
-		fromDir,
-		toDir,
-		arrowLength: this.arrowLength,
-		arrowOffset: this.arrowOffset,
-		roundness: this.roundness,
-		detourDistance: this.detourDistance,
-		hasSourceArrow: this.hasSourceArrow,
-		hasTargetArrow: this.hasTargetArrow
-	});
-	createLinePath = (from, to, fromDir, toDir) => new HorizontalEdgePath({
-		from,
-		to,
-		fromDir,
-		toDir,
-		arrowLength: this.arrowLength,
-		arrowOffset: this.arrowOffset,
-		roundness: this.roundness,
-		hasSourceArrow: this.hasSourceArrow,
-		hasTargetArrow: this.hasTargetArrow
-	});
-	constructor(params) {
-		this.arrowLength = params?.arrowLength ?? edgeConstants.arrowLength;
-		this.arrowOffset = params?.arrowOffset ?? edgeConstants.arrowOffset;
-		this.cycleSquareSide = params?.cycleSquareSide ?? edgeConstants.cycleSquareSide;
-		const roundness = params?.roundness ?? edgeConstants.roundness;
-		this.roundness = Math.min(roundness, this.arrowOffset, this.cycleSquareSide / 2);
-		this.detourDistance = params?.detourDistance ?? edgeConstants.detourDistance;
-		this.hasSourceArrow = params?.hasSourceArrow ?? edgeConstants.hasSourceArrow;
-		this.hasTargetArrow = params?.hasTargetArrow ?? edgeConstants.hasTargetArrow;
-		this.pathShape = new PathEdgeShape({
-			color: params?.color ?? edgeConstants.color,
-			width: params?.width ?? edgeConstants.width,
-			arrowRenderer: resolveArrowRenderer(params?.arrowRenderer ?? {}),
-			arrowLength: this.arrowLength,
-			hasSourceArrow: this.hasSourceArrow,
-			hasTargetArrow: this.hasTargetArrow,
-			createCyclePath: this.createCyclePath,
-			createDetourPath: this.createDetourPath,
-			createLinePath: this.createLinePath,
-			padding: 50
-		});
-		this.element = this.pathShape.element;
-		this.svg = this.element;
-		this.group = this.pathShape.group;
-		this.line = this.pathShape.line;
-		this.sourceArrow = this.pathShape.sourceArrow;
-		this.targetArrow = this.pathShape.targetArrow;
-		this.onAfterRender = this.pathShape.onAfterRender;
-	}
-	render(params) {
-		const { from, to, category } = params;
-		this.pathShape.render({
-			category,
-			from: {
-				...from,
-				direction: horizontalizeDirection(from.direction)
-			},
-			to: {
-				...to,
-				direction: horizontalizeDirection(to.direction)
-			}
-		});
-	}
-};
-//#endregion
 //#region src/edges/shapes/straight-edge-shape/straight-edge-shape.ts
 var StraightEdgeShape = class {
 	element;
-	svg;
 	group;
 	line;
 	sourceArrow;
@@ -2575,7 +2393,6 @@ var StraightEdgeShape = class {
 			padding: 50
 		});
 		this.element = this.pathShape.element;
-		this.svg = this.element;
 		this.group = this.pathShape.group;
 		this.line = this.pathShape.line;
 		this.sourceArrow = this.pathShape.sourceArrow;
@@ -2587,110 +2404,6 @@ var StraightEdgeShape = class {
 	}
 };
 //#endregion
-//#region src/edges/shapes/vertical-edge-shape/verticalize-directions/verticalize-direction.ts
-var pi2 = Math.PI / 2;
-var verticalizeDirection = (direction) => {
-	return Math.sin(direction) > 0 ? pi2 : -pi2;
-};
-//#endregion
-//#region src/edges/shapes/vertical-edge-shape/vertical-edge-shape.ts
-/**
-* @deprecated
-* use OrthogonalEdgeShape instead
-*/
-var VerticalEdgeShape = class {
-	element;
-	svg;
-	group;
-	line;
-	sourceArrow;
-	targetArrow;
-	onAfterRender;
-	arrowLength;
-	arrowOffset;
-	roundness;
-	cycleSquareSide;
-	detourDistance;
-	hasSourceArrow;
-	hasTargetArrow;
-	pathShape;
-	createCyclePath = (from, _to, fromDir) => new CycleSquareEdgePath({
-		origin: from,
-		dir: fromDir,
-		arrowLength: this.arrowLength,
-		side: this.cycleSquareSide,
-		arrowOffset: this.arrowOffset,
-		roundness: this.roundness,
-		hasArrow: this.hasSourceArrow || this.hasTargetArrow
-	});
-	createDetourPath = (from, to, fromDir, toDir) => new DetourVerticalEdgePath({
-		from,
-		to,
-		fromDir,
-		toDir,
-		arrowLength: this.arrowLength,
-		arrowOffset: this.arrowOffset,
-		roundness: this.roundness,
-		detourDistance: this.detourDistance,
-		hasSourceArrow: this.hasSourceArrow,
-		hasTargetArrow: this.hasTargetArrow
-	});
-	createLinePath = (from, to, fromDir, toDir) => new VerticalEdgePath({
-		from,
-		to,
-		fromDir,
-		toDir,
-		arrowLength: this.arrowLength,
-		arrowOffset: this.arrowOffset,
-		roundness: this.roundness,
-		hasSourceArrow: this.hasSourceArrow,
-		hasTargetArrow: this.hasTargetArrow
-	});
-	constructor(params) {
-		this.arrowLength = params?.arrowLength ?? edgeConstants.arrowLength;
-		this.arrowOffset = params?.arrowOffset ?? edgeConstants.arrowOffset;
-		this.cycleSquareSide = params?.cycleSquareSide ?? edgeConstants.cycleSquareSide;
-		const roundness = params?.roundness ?? edgeConstants.roundness;
-		this.roundness = Math.min(roundness, this.arrowOffset, this.cycleSquareSide / 2);
-		this.detourDistance = params?.detourDistance ?? edgeConstants.detourDistance;
-		this.hasSourceArrow = params?.hasSourceArrow ?? edgeConstants.hasSourceArrow;
-		this.hasTargetArrow = params?.hasTargetArrow ?? edgeConstants.hasTargetArrow;
-		this.pathShape = new PathEdgeShape({
-			color: params?.color ?? edgeConstants.color,
-			width: params?.width ?? edgeConstants.width,
-			arrowRenderer: resolveArrowRenderer(params?.arrowRenderer ?? {}),
-			arrowLength: this.arrowLength,
-			hasSourceArrow: this.hasSourceArrow,
-			hasTargetArrow: this.hasTargetArrow,
-			createCyclePath: this.createCyclePath,
-			createDetourPath: this.createDetourPath,
-			createLinePath: this.createLinePath,
-			padding: 50
-		});
-		this.element = this.pathShape.element;
-		this.svg = this.element;
-		this.group = this.pathShape.group;
-		this.line = this.pathShape.line;
-		this.sourceArrow = this.pathShape.sourceArrow;
-		this.targetArrow = this.pathShape.targetArrow;
-		this.onAfterRender = this.pathShape.onAfterRender;
-	}
-	render(params) {
-		const { from, to, category } = params;
-		this.pathShape.render({
-			category,
-			from: {
-				...from,
-				direction: verticalizeDirection(from.direction)
-			},
-			to: {
-				...to,
-				direction: verticalizeDirection(to.direction)
-			}
-		});
-	}
-};
-//#endregion
 //#region src/edges/shapes/orthogonal-edge-shape/orthogonalize-direction/orthogonalize-direction.ts
 var orthogonalizeDirection = (direction) => {
 	const adjDir = direction + Math.PI / 4;
@@ -2707,7 +2420,6 @@ var orthogonalizeDirection = (direction) => {
 //#region src/edges/shapes/orthogonal-edge-shape/orthogonal-edge-shape.ts
 var OrthogonalEdgeShape = class {
 	element;
-	svg;
 	group;
 	line;
 	sourceArrow;
@@ -2775,7 +2487,6 @@ var OrthogonalEdgeShape = class {
 			padding: 50
 		});
 		this.element = this.pathShape.element;
-		this.svg = this.element;
 		this.group = this.pathShape.group;
 		this.line = this.pathShape.line;
 		this.sourceArrow = this.pathShape.sourceArrow;
@@ -2822,7 +2533,6 @@ var resolvePortOffsetFn = (offset) => {
 var defaultPortOffset = edgeConstants.portOffset;
 var DirectEdgeShape = class {
 	element;
-	svg;
 	group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	line;
 	sourceArrow = null;
@@ -2844,7 +2554,6 @@ var DirectEdgeShape = class {
 		this.sourceOffsetFn = resolvePortOffsetFn(params?.sourceOffset ?? defaultPortOffset);
 		this.targetOffsetFn = resolvePortOffsetFn(params?.targetOffset ?? defaultPortOffset);
 		this.element = createEdgeSvg(this.color);
-		this.svg = this.element;
 		this.element.appendChild(this.group);
 		this.line = createEdgePath(this.width);
 		this.group.appendChild(this.line);
@@ -3025,15 +2734,10 @@ var InteractiveEdgeError = class extends Error {
 var InteractiveEdgeShape = class InteractiveEdgeShape {
 	baseEdge;
 	element;
-	svg;
 	group;
 	line;
 	sourceArrow;
 	targetArrow;
-	/**
-	* @deprecated
-	* use shape.svg instead
-	*/
 	handle = createEdgeGroup();
 	onAfterRender;
 	interactiveLine;
@@ -3043,7 +2747,6 @@ var InteractiveEdgeShape = class InteractiveEdgeShape {
 		this.baseEdge = baseEdge;
 		if (baseEdge instanceof InteractiveEdgeShape) throw new InteractiveEdgeError("interactive edge can be configured only once");
 		this.element = this.baseEdge.element;
-		this.svg = this.element;
 		this.group = this.baseEdge.group;
 		this.line = this.baseEdge.line;
 		this.sourceArrow = this.baseEdge.sourceArrow;
@@ -3082,12 +2785,10 @@ var MidpointEdgeShape = class {
 	targetArrow;
 	onAfterRender;
 	element;
-	svg;
 	constructor(baseShape, midpointElement) {
 		this.baseShape = baseShape;
 		this.midpointElement = midpointElement;
 		this.element = this.baseShape.element;
-		this.svg = this.element;
 		this.group = this.baseShape.group;
 		this.line = this.baseShape.line;
 		this.sourceArrow = this.baseShape.sourceArrow;
@@ -3387,17 +3088,6 @@ var GraphController = class {
 	}
 };
 //#endregion
-//#region src/schedule-fn/macrotask-schedule-fn/macrotask-schedule-fn.ts
-/**
-* @deprecated
-* use macrotaskScheduleFn instead
-*/
-var macrotaskScheduleFn = (callback) => {
-	setTimeout(() => {
-		callback();
-	});
-};
-//#endregion
 //#region src/schedule-fn/microtask-schedule-fn/microtask-schedule-fn.ts
 var microtaskScheduleFn = (callback) => {
 	queueMicrotask(() => {
@@ -3449,7 +3139,7 @@ var createFocusParams = (config, controllerParams) => {
 	} : {
 		minContentScale: config.minContentScale ?? controllerParams.focus.minContentScale,
 		nodes: config.nodes ?? [],
-		contentPadding: config.contentPadding ?? config.contentOffset ?? controllerParams.focus.contentPadding,
+		contentPadding: config.contentPadding ?? controllerParams.focus.contentPadding,
 		animationDuration: config.animationDuration ?? controllerParams.focus.animationDuration
 	};
 };
@@ -3643,7 +3333,9 @@ var DraggablePortsConfigurator = class DraggablePortsConfigurator {
 		const mouseEvent = event;
 		if (!this.params.mouseDownEventVerifier(mouseEvent)) return;
 		const target = event.currentTarget;
-		const portId = this.canvas.graph.findPortIdsByElement(target)[0];
+		const portIds = this.canvas.graph.findPortIdsByElement(target);
+		const portId = this.params.grabbedPortIdResolver(portIds);
+		if (portId === null) return;
 		if (!this.params.onPointerDownVerifier(portId, {
 			x: mouseEvent.clientX,
 			y: mouseEvent.clientY
@@ -3944,6 +3636,12 @@ var ConstantDraggingPortDirectionResolver = class {
 	}
 };
 //#endregion
+//#region src/configurators/shared/port-id-resolver/default-port-id-resolver/default-port-id-resolver.ts
+var defaultPortIdResolver = (portIds) => {
+	if (portIds.length > 0) return portIds[0];
+	return null;
+};
+//#endregion
 //#region src/configurators/user-draggable-nodes-configurator/user-draggable-nodes-configurator.ts
 var UserDraggableNodesConfigurator = class UserDraggableNodesConfigurator {
 	canvas;
@@ -4001,12 +3699,7 @@ var UserDraggableNodesConfigurator = class UserDraggableNodesConfigurator {
 		const element = event.currentTarget;
 		const nodeId = this.canvas.graph.findNodeIdByElement(element);
 		const node = this.graph.getNode(nodeId);
-		if (!this.params.nodeDragVerifier({
-			nodeId,
-			element: node.element,
-			x: node.x,
-			y: node.y
-		})) return;
+		if (!this.params.nodeDragVerifier(nodeId)) return;
 		this.eventTagger.tag(event, dragEventHandledTag);
 		const cursorContent = this.calculateContentPoint({
 			x: touch.clientX,
@@ -4291,8 +3984,10 @@ var UserTransformableViewportConfigurator = class UserTransformableViewportConfi
 		const transform = this.params.transformPreprocessor({
 			prevTransform,
 			nextTransform,
-			canvasWidth: width,
-			canvasHeight: height
+			viewport: {
+				width,
+				height
+			}
 		});
 		this.performTransform(transform);
 	}
@@ -4303,8 +3998,10 @@ var UserTransformableViewportConfigurator = class UserTransformableViewportConfi
 		const transform = this.params.transformPreprocessor({
 			prevTransform,
 			nextTransform,
-			canvasWidth: width,
-			canvasHeight: height
+			viewport: {
+				width,
+				height
+			}
 		});
 		this.performTransform(transform);
 	}
@@ -4346,8 +4043,10 @@ var UserTransformableViewportConfigurator = class UserTransformableViewportConfi
 		const transform = this.params.transformPreprocessor({
 			prevTransform,
 			nextTransform: prevTransform,
-			canvasWidth: width,
-			canvasHeight: height
+			viewport: {
+				width,
+				height
+			}
 		});
 		this.params.onResizeTransformStarted();
 		this.canvas.patchViewportMatrix(transform);
@@ -4608,7 +4307,8 @@ var UserConnectablePortsConfigurator = class UserConnectablePortsConfigurator {
 				const params = this.edgeInProgress;
 				this.resetDragState();
 				this.params.onEdgeCreationInterrupted(params);
-			}
+			},
+			grabbedPortIdResolver: this.params.grabbedPortIdResolver
 		};
 		DraggablePortsConfigurator.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, draggablePortsParams);
 	}
@@ -4662,7 +4362,7 @@ var UserConnectablePortsConfigurator = class UserConnectablePortsConfigurator {
 		this.overlayCanvas.clear();
 	}
 	tryCreateConnection(cursor) {
-		const targetPortId = findPortAtPoint(this.canvas.graph, cursor);
+		const targetPortId = findPortAtPoint(this.canvas.graph, cursor, this.params.releasedPortIdResolver);
 		if (targetPortId === null) {
 			this.params.onEdgeCreationInterrupted(this.edgeInProgress);
 			return;
@@ -4743,7 +4443,8 @@ var UserDraggableEdgesConfigurator = class UserDraggableEdgesConfigurator {
 					shape: edge.shape,
 					priority: edge.priority
 				});
-			}
+			},
+			grabbedPortIdResolver: this.params.grabbedPortIdResolver
 		};
 		DraggablePortsConfigurator.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, draggablePortsParams);
 	}
@@ -4833,7 +4534,7 @@ var UserDraggableEdgesConfigurator = class UserDraggableEdgesConfigurator {
 		}).updatePort(OverlayId.DraggingNodeId, { direction });
 	}
 	tryCreateConnection(cursor) {
-		const draggingPortId = findPortAtPoint(this.canvas.graph, cursor);
+		const draggingPortId = findPortAtPoint(this.canvas.graph, cursor, this.params.releasedPortIdResolver);
 		this.overlayCanvas.removeEdge(OverlayId.EdgeId);
 		if (draggingPortId === null) {
 			const edge = this.draggingEdgePayload;
@@ -5020,19 +4721,17 @@ var AnimatedLayoutApplier = class {
 //#endregion
 //#region src/configurators/animated-layout-configurator/animated-layout-configurator.ts
 var AnimatedLayoutConfigurator = class AnimatedLayoutConfigurator {
-	win;
 	applier;
 	step = (dt) => {
 		this.applier.apply(dt);
 	};
 	constructor(canvas, params, win) {
-		this.win = win;
 		this.applier = new AnimatedLayoutApplier(canvas, params.algorithm, {
 			staticNodeResolver: params.staticNodeResolver,
 			onBeforeApplied: params.onBeforeApplied,
 			onAfterApplied: params.onAfterApplied
 		});
-		new AnimationSeries(this.win, this.step);
+		new AnimationSeries(win, this.step);
 	}
 	static configure(canvas, params, win) {
 		new AnimatedLayoutConfigurator(canvas, params, win);
@@ -5250,9 +4949,9 @@ var noopFn = () => {};
 //#endregion
 //#region src/canvas-builder/shared/resolve-dragging-port-direction-resolver/resolve-dragging-port-direction-resolver.ts
 var resolveDraggingPortDirectionResolver = (config, graph, connectionAllowedVerifier) => {
-	if (config === "closest-connectable-port") return new NearestConnectablePortDraggingPortDirectionResolver(graph, connectionAllowedVerifier);
 	if (config === "nearest-connectable-port") return new NearestConnectablePortDraggingPortDirectionResolver(graph, connectionAllowedVerifier);
-	return new ConstantDraggingPortDirectionResolver(config);
+	if (typeof config === "number") return new ConstantDraggingPortDirectionResolver(config);
+	return new ConstantDraggingPortDirectionResolver(void 0);
 };
 //#endregion
 //#region src/canvas-builder/shared/resolve-edge-shape-factory/resolve-edge-shape-factory.ts
@@ -5272,30 +4971,6 @@ var resolveEdgeShapeFactory = (config) => {
 			detourDistance: config.detourDistance,
 			detourDirection: config.detourDirection
 		});
-		case "horizontal": return () => new HorizontalEdgeShape({
-			color: config.color,
-			width: config.width,
-			arrowLength: config.arrowLength,
-			arrowOffset: config.arrowOffset,
-			arrowRenderer: config.arrowRenderer,
-			hasSourceArrow: config.hasSourceArrow,
-			hasTargetArrow: config.hasTargetArrow,
-			cycleSquareSide: config.cycleSquareSide,
-			roundness: config.roundness,
-			detourDistance: config.detourDistance
-		});
-		case "vertical": return () => new VerticalEdgeShape({
-			color: config.color,
-			width: config.width,
-			arrowLength: config.arrowLength,
-			arrowOffset: config.arrowOffset,
-			arrowRenderer: config.arrowRenderer,
-			hasSourceArrow: config.hasSourceArrow,
-			hasTargetArrow: config.hasTargetArrow,
-			cycleSquareSide: config.cycleSquareSide,
-			roundness: config.roundness,
-			detourDistance: config.detourDistance
-		});
 		case "orthogonal": return () => new OrthogonalEdgeShape({
 			color: config.color,
 			width: config.width,
@@ -5369,10 +5044,10 @@ var createShiftLimitTransformPreprocessor = (preprocessorParams) => {
 		let dx = params.nextTransform.x;
 		let dy = params.nextTransform.y;
 		if (dx < minX && dx < params.prevTransform.x) dx = Math.min(params.prevTransform.x, minX);
-		const maxScreenX = maxX - params.canvasWidth * params.prevTransform.scale;
+		const maxScreenX = maxX - params.viewport.width * params.prevTransform.scale;
 		if (dx > maxScreenX && dx > params.prevTransform.x) dx = Math.max(params.prevTransform.x, maxScreenX);
 		if (dy < minY && dy < params.prevTransform.y) dy = Math.min(params.prevTransform.y, minY);
-		const maxScreenY = maxY - params.canvasHeight * params.prevTransform.scale;
+		const maxScreenY = maxY - params.viewport.height * params.prevTransform.scale;
 		if (dy > maxScreenY && dy > params.prevTransform.y) dy = Math.max(params.prevTransform.y, maxScreenY);
 		return {
 			scale: params.nextTransform.scale,
@@ -5420,8 +5095,7 @@ var createCombinedTransformPreprocessor = (preprocessors) => {
 		return preprocessors.reduce((acc, cur) => cur({
 			prevTransform: params.prevTransform,
 			nextTransform: acc,
-			canvasWidth: params.canvasWidth,
-			canvasHeight: params.canvasHeight
+			viewport: params.viewport
 		}), params.nextTransform);
 	};
 };
@@ -5454,10 +5128,10 @@ var createTransformableViewportParams = (transformConfig) => {
 	else transformPreprocessor = (params) => {
 		return params.nextTransform;
 	};
-	const shiftCursor = transformConfig?.shift?.cursor !== void 0 ? transformConfig.shift.cursor : "grab";
-	const defaultMouseDownEventVerifier = transformConfig?.shift?.mouseDownEventVerifier;
+	const shiftCursor = transformConfig?.pan?.cursor !== void 0 ? transformConfig.pan.cursor : "grab";
+	const defaultMouseDownEventVerifier = transformConfig?.pan?.mouseDownEventVerifier;
 	const mouseDownEventVerifier = defaultMouseDownEventVerifier !== void 0 ? defaultMouseDownEventVerifier : (event) => event.button === 0;
-	const defaultMouseUpEventVerifier = transformConfig?.shift?.mouseUpEventVerifier;
+	const defaultMouseUpEventVerifier = transformConfig?.pan?.mouseUpEventVerifier;
 	const mouseUpEventVerifier = defaultMouseUpEventVerifier !== void 0 ? defaultMouseUpEventVerifier : (event) => event.button === 0;
 	const defaultMouseWheelEventVerifier = transformConfig?.scale?.mouseWheelEventVerifier;
 	const mouseWheelEventVerifier = defaultMouseWheelEventVerifier !== void 0 ? defaultMouseWheelEventVerifier : () => true;
@@ -5526,7 +5200,9 @@ var createConnectablePortsParams = (config, defaultEdgeShapeFactory, graph) => {
 		mouseUpEventVerifier: config.mouseUpEventVerifier ?? defaults$3.mouseEventVerifier,
 		onAfterEdgeCreated: config.events?.onAfterEdgeCreated ?? noopFn,
 		onEdgeCreationInterrupted: config.events?.onEdgeCreationInterrupted ?? noopFn,
-		onEdgeCreationPrevented: config.events?.onEdgeCreationPrevented ?? noopFn
+		onEdgeCreationPrevented: config.events?.onEdgeCreationPrevented ?? noopFn,
+		grabbedPortIdResolver: config.grabbedPortIdResolver ?? defaultPortIdResolver,
+		releasedPortIdResolver: config.releasedPortIdResolver ?? defaultPortIdResolver
 	};
 };
 //#endregion
@@ -5534,7 +5210,7 @@ var createConnectablePortsParams = (config, defaultEdgeShapeFactory, graph) => {
 var defaults$2 = Object.freeze({
 	connectionAllowedVerifier: () => true,
 	connectionPreprocessor: (request) => request,
-	mouseDownEventVerifier: (event) => event.button === 0 && event.ctrlKey,
+	mouseDownEventVerifier: (event) => event.button === 0,
 	mouseUpEventVerifier: (event) => event.button === 0
 });
 //#endregion
@@ -5556,7 +5232,9 @@ var createDraggableEdgeParams = (config, graph) => {
 		onAfterEdgeReattached: config.events?.onAfterEdgeReattached ?? noopFn,
 		onEdgeReattachInterrupted: config.events?.onEdgeReattachInterrupted ?? noopFn,
 		onEdgeReattachPrevented: config.events?.onEdgeReattachPrevented ?? noopFn,
-		draggingPortDirectionResolver: resolveDraggingPortDirectionResolver(config.dragPortDirection, graph, connectionAllowedVerifier)
+		draggingPortDirectionResolver: resolveDraggingPortDirectionResolver(config.dragPortDirection, graph, connectionAllowedVerifier),
+		grabbedPortIdResolver: config.grabbedPortIdResolver ?? defaultPortIdResolver,
+		releasedPortIdResolver: config.releasedPortIdResolver ?? defaultPortIdResolver
 	};
 };
 //#endregion
@@ -6221,7 +5899,7 @@ var ForceDirectedLayoutAlgorithm = class {
 		this.nodeMass = params.nodeMass;
 		this.edgeEquilibriumLength = params.edgeEquilibriumLength;
 		this.edgeStiffness = params.edgeStiffness;
-		this.convergenceVelocity = params.convergenceVelocity;
+		this.convergenceVelocity = params.stopVelocity;
 		this.distanceVectorGenerator = new DistanceVectorGenerator(params.rand);
 		this.nodeForcesApplicationStrategy = resolveNodeForcesApplicationStrategy({
 			distanceVectorGenerator: this.distanceVectorGenerator,
@@ -6477,7 +6155,7 @@ var ForceDirectedAnimatedLayoutAlgorithm = class {
 	edgeStiffness;
 	fillerLayoutAlgorithm;
 	constructor(params) {
-		this.convergenceVelocity = params.convergenceVelocity;
+		this.convergenceVelocity = params.stopVelocity;
 		this.maxTimeDeltaSec = params.maxTimeDeltaSec;
 		this.nodeMass = params.nodeMass;
 		this.edgeEquilibriumLength = params.edgeEquilibriumLength;
@@ -6576,7 +6254,7 @@ var resolveAnimatedLayoutAlgorithm = (config) => {
 				nodeMass: config?.nodeMass ?? forceDirectedDefaults.nodeMass,
 				edgeEquilibriumLength: config?.edgeEquilibriumLength ?? forceDirectedDefaults.edgeEquilibriumLength,
 				edgeStiffness: config?.edgeStiffness ?? forceDirectedDefaults.edgeStiffness,
-				convergenceVelocity: config?.convergenceVelocity ?? forceDirectedDefaults.convergenceVelocity,
+				stopVelocity: config?.stopVelocity ?? forceDirectedDefaults.convergenceVelocity,
 				maxForce: config?.maxForce ?? forceDirectedDefaults.maxForce,
 				nodeForceCoefficient: config?.nodeForceCoefficient ?? forceDirectedDefaults.nodeForceCoefficient,
 				barnesHutTheta: config?.barnesHut?.theta ?? forceDirectedDefaults.barnesHutTheta,
@@ -6605,14 +6283,6 @@ var resolveLayoutApplyOn = (applyOn) => {
 		type: "trigger",
 		trigger: applyOn
 	};
-	if (applyOn === "topologyChangeMicrotask") return {
-		type: "topologyChangeSchedule",
-		schedule: microtaskScheduleFn
-	};
-	if (applyOn?.type === "topologyChangeMacrotask") return {
-		type: "topologyChangeSchedule",
-		schedule: macrotaskScheduleFn
-	};
 	return {
 		type: "topologyChangeSchedule",
 		schedule: microtaskScheduleFn
@@ -6808,7 +6478,7 @@ var resolveLayoutAlgorithm = (config) => {
 				nodeMass: config?.nodeMass ?? forceDirectedDefaults.nodeMass,
 				edgeEquilibriumLength: config?.edgeEquilibriumLength ?? forceDirectedDefaults.edgeEquilibriumLength,
 				edgeStiffness: config?.edgeStiffness ?? forceDirectedDefaults.edgeStiffness,
-				convergenceVelocity: config?.convergenceVelocity ?? forceDirectedDefaults.convergenceVelocity,
+				stopVelocity: config?.stopVelocity ?? forceDirectedDefaults.convergenceVelocity,
 				maxForce: config?.maxForce ?? forceDirectedDefaults.maxForce,
 				nodeForceCoefficient: config?.nodeForceCoefficient ?? forceDirectedDefaults.nodeForceCoefficient,
 				barnesHutTheta: config?.barnesHut?.theta ?? forceDirectedDefaults.barnesHutTheta,
@@ -6923,7 +6593,7 @@ var createViewportControllerParams = (params) => {
 	const { canvasDefaults } = params;
 	const schedule = params.hasLayout ? resolveLayoutFocusSchedule(params.layoutParams) : immediateScheduleFn;
 	return { focus: {
-		contentPadding: canvasDefaults.focus?.contentPadding ?? canvasDefaults.focus?.contentOffset ?? 100,
+		contentPadding: canvasDefaults.focus?.contentPadding ?? 100,
 		minContentScale: canvasDefaults.focus?.minContentScale ?? 0,
 		schedule,
 		animationDuration: canvasDefaults.focus?.animationDuration ?? 0
@@ -7122,4 +6792,4 @@ var CanvasBuilder = class {
 	}
 };
 //#endregion
-export { BezierEdgeShape, CanvasBuilder, CanvasBuilderError, CanvasError, ConnectionCategory, DirectEdgeShape, EventSubject, HorizontalEdgeShape, InteractiveEdgeError, InteractiveEdgeShape, MidpointEdgeShape, OrthogonalEdgeShape, StraightEdgeShape, VerticalEdgeShape, boxPortOffsetFn };
+export { BezierEdgeShape, CanvasBuilder, CanvasBuilderError, CanvasError, ConnectionCategory, DirectEdgeShape, EventSubject, InteractiveEdgeError, InteractiveEdgeShape, MidpointEdgeShape, OrthogonalEdgeShape, StraightEdgeShape };