@html-graph/html-graph 8.24.0 → 9.1.0

package/dist/html-graph.umd.cjs

@@ -125,11 +125,11 @@
 			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);
@@ -1101,10 +1101,10 @@
 	};
 	//#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
@@ -1128,10 +1128,10 @@
 	}
 	//#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;
 		}
@@ -1667,43 +1667,6 @@
 		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;
@@ -1791,43 +1754,6 @@
 		}
 	};
 	//#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;
@@ -2136,7 +2062,6 @@
 	var PathEdgeShape = class {
 		params;
 		element;
-		svg;
 		group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 		line;
 		sourceArrow = null;
@@ -2149,7 +2074,6 @@
 			[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);
@@ -2323,7 +2247,6 @@
 	//#region src/edges/shapes/bezier-edge-shape/bezier-edge-shape.ts
 	var BezierEdgeShape = class {
 		element;
-		svg;
 		group;
 		line;
 		sourceArrow;
@@ -2390,7 +2313,6 @@
 				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;
@@ -2402,113 +2324,9 @@
 		}
 	};
 	//#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;
@@ -2579,7 +2397,6 @@
 				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;
@@ -2591,110 +2408,6 @@
 		}
 	};
 	//#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;
@@ -2711,7 +2424,6 @@
 	//#region src/edges/shapes/orthogonal-edge-shape/orthogonal-edge-shape.ts
 	var OrthogonalEdgeShape = class {
 		element;
-		svg;
 		group;
 		line;
 		sourceArrow;
@@ -2779,7 +2491,6 @@
 				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;
@@ -2826,7 +2537,6 @@
 	var defaultPortOffset = edgeConstants.portOffset;
 	var DirectEdgeShape = class {
 		element;
-		svg;
 		group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 		line;
 		sourceArrow = null;
@@ -2848,7 +2558,6 @@
 			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);
@@ -3029,15 +2738,10 @@
 	var InteractiveEdgeShape = class InteractiveEdgeShape {
 		baseEdge;
 		element;
-		svg;
 		group;
 		line;
 		sourceArrow;
 		targetArrow;
-		/**
-		* @deprecated
-		* use shape.svg instead
-		*/
 		handle = createEdgeGroup();
 		onAfterRender;
 		interactiveLine;
@@ -3047,7 +2751,6 @@
 			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;
@@ -3086,12 +2789,10 @@
 		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;
@@ -3391,17 +3092,6 @@
 		}
 	};
 	//#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(() => {
@@ -3453,7 +3143,7 @@
 		} : {
 			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
 		};
 	};
@@ -3647,7 +3337,9 @@
 			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
@@ -3948,6 +3640,12 @@
 		}
 	};
 	//#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;
@@ -4005,12 +3703,7 @@
 			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,
@@ -4295,8 +3988,10 @@
 			const transform = this.params.transformPreprocessor({
 				prevTransform,
 				nextTransform,
-				canvasWidth: width,
-				canvasHeight: height
+				viewport: {
+					width,
+					height
+				}
 			});
 			this.performTransform(transform);
 		}
@@ -4307,8 +4002,10 @@
 			const transform = this.params.transformPreprocessor({
 				prevTransform,
 				nextTransform,
-				canvasWidth: width,
-				canvasHeight: height
+				viewport: {
+					width,
+					height
+				}
 			});
 			this.performTransform(transform);
 		}
@@ -4350,8 +4047,10 @@
 			const transform = this.params.transformPreprocessor({
 				prevTransform,
 				nextTransform: prevTransform,
-				canvasWidth: width,
-				canvasHeight: height
+				viewport: {
+					width,
+					height
+				}
 			});
 			this.params.onResizeTransformStarted();
 			this.canvas.patchViewportMatrix(transform);
@@ -4612,7 +4311,8 @@
 					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);
 		}
@@ -4666,7 +4366,7 @@
 			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;
@@ -4747,7 +4447,8 @@
 						shape: edge.shape,
 						priority: edge.priority
 					});
-				}
+				},
+				grabbedPortIdResolver: this.params.grabbedPortIdResolver
 			};
 			DraggablePortsConfigurator.configure(this.canvas, this.window, this.pointInsideVerifier, this.eventTagger, draggablePortsParams);
 		}
@@ -4837,7 +4538,7 @@
 			}).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;
@@ -5024,19 +4725,17 @@
 	//#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);
@@ -5254,9 +4953,9 @@
 	//#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
@@ -5276,30 +4975,6 @@
 				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,
@@ -5373,10 +5048,10 @@
 			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,
@@ -5424,8 +5099,7 @@
 			return preprocessors.reduce((acc, cur) => cur({
 				prevTransform: params.prevTransform,
 				nextTransform: acc,
-				canvasWidth: params.canvasWidth,
-				canvasHeight: params.canvasHeight
+				viewport: params.viewport
 			}), params.nextTransform);
 		};
 	};
@@ -5458,10 +5132,10 @@
 		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;
@@ -5530,7 +5204,9 @@
 			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
@@ -5538,7 +5214,7 @@
 	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
@@ -5560,7 +5236,9 @@
 			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
@@ -6225,7 +5903,7 @@
 			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,
@@ -6481,7 +6159,7 @@
 		edgeStiffness;
 		fillerLayoutAlgorithm;
 		constructor(params) {
-			this.convergenceVelocity = params.convergenceVelocity;
+			this.convergenceVelocity = params.stopVelocity;
 			this.maxTimeDeltaSec = params.maxTimeDeltaSec;
 			this.nodeMass = params.nodeMass;
 			this.edgeEquilibriumLength = params.edgeEquilibriumLength;
@@ -6580,7 +6258,7 @@
 					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,
@@ -6609,14 +6287,6 @@
 			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
@@ -6812,7 +6482,7 @@
 					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,
@@ -6927,7 +6597,7 @@
 		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
@@ -7133,12 +6803,9 @@
 	exports.ConnectionCategory = ConnectionCategory;
 	exports.DirectEdgeShape = DirectEdgeShape;
 	exports.EventSubject = EventSubject;
-	exports.HorizontalEdgeShape = HorizontalEdgeShape;
 	exports.InteractiveEdgeError = InteractiveEdgeError;
 	exports.InteractiveEdgeShape = InteractiveEdgeShape;
 	exports.MidpointEdgeShape = MidpointEdgeShape;
 	exports.OrthogonalEdgeShape = OrthogonalEdgeShape;
 	exports.StraightEdgeShape = StraightEdgeShape;
-	exports.VerticalEdgeShape = VerticalEdgeShape;
-	exports.boxPortOffsetFn = boxPortOffsetFn;
 });