@html-graph/html-graph 8.23.0 → 9.0.0

package/dist/html-graph.umd.cjs

@@ -85,7 +85,7 @@
 			this.attachedNodeIds.delete(nodeId);
 		}
 		attachEdge(edgeId) {
-			const svg = this.graphStore.getEdge(edgeId).payload.shape.svg;
+			const svg = this.graphStore.getEdge(edgeId).payload.shape.element;
 			this.edgeIdToElementMap.set(edgeId, svg);
 			this.container.appendChild(svg);
 			this.renderEdge(edgeId);
@@ -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.svg;
-			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);
@@ -152,7 +152,7 @@
 		}
 		updateEdgePriority(edgeId) {
 			const edge = this.graphStore.getEdge(edgeId);
-			edge.payload.shape.svg.style.zIndex = `${edge.payload.priority}`;
+			edge.payload.shape.element.style.zIndex = `${edge.payload.priority}`;
 		}
 		createEdgeRenderPort(port, rectPort, rectCanvas, scale) {
 			const contentPoint = this.viewportStore.createContentCoords({
@@ -761,7 +761,7 @@
 			if (this.hasEdge(request.id)) throw new CanvasError(canvasErrorText.addEdgeWithExistingId(request.id));
 			if (!this.hasPort(request.from)) throw new CanvasError(canvasErrorText.addEdgeFromNonexistentPort(request.id, request.from));
 			if (!this.hasPort(request.to)) throw new CanvasError(canvasErrorText.addEdgeToNonexistentPort(request.id, request.to));
-			const useEdgeId = this.findEdgeIdByElement(request.shape.svg);
+			const useEdgeId = this.findEdgeIdByElement(request.shape.element);
 			if (useEdgeId !== void 0) throw new CanvasError(canvasErrorText.addEdgeWithElementInUse(request.id, useEdgeId));
 			this.addEdgeInternal(request);
 			this.afterEdgeAddedEmitter.emit(request.id);
@@ -902,7 +902,7 @@
 					priority: request.priority
 				}
 			});
-			this.edgesElementsMap.set(request.shape.svg, request.id);
+			this.edgesElementsMap.set(request.shape.element, request.id);
 			if (request.from !== request.to) {
 				this.portOutgoingEdges.get(request.from).add(request.id);
 				this.portIncomingEdges.get(request.to).add(request.id);
@@ -917,7 +917,7 @@
 			this.portOutgoingEdges.get(from).delete(edgeId);
 			this.portOutgoingEdges.get(to).delete(edgeId);
 			this.edges.delete(edgeId);
-			this.edgesElementsMap.delete(payload.shape.svg);
+			this.edgesElementsMap.delete(payload.shape.element);
 		}
 	};
 	//#endregion
@@ -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;
@@ -2135,7 +2061,7 @@
 	//#region src/edges/shapes/path-edge-shape/path-edge-shape.ts
 	var PathEdgeShape = class {
 		params;
-		svg;
+		element;
 		group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 		line;
 		sourceArrow = null;
@@ -2147,8 +2073,8 @@
 			this.params = params;
 			[this.afterRenderEmitter, this.onAfterRender] = createPair();
 			this.arrowRenderer = this.params.arrowRenderer;
-			this.svg = createEdgeSvg(params.color);
-			this.svg.appendChild(this.group);
+			this.element = createEdgeSvg(params.color);
+			this.element.appendChild(this.group);
 			this.line = createEdgePath(params.width);
 			this.group.appendChild(this.line);
 			if (params.hasSourceArrow) {
@@ -2162,7 +2088,7 @@
 		}
 		render(params) {
 			const { x, y, width, height, from, to } = createEdgeRectangle(params.from, params.to, this.params.padding);
-			setSvgRectangle(this.svg, {
+			setSvgRectangle(this.element, {
 				x,
 				y,
 				width,
@@ -2320,7 +2246,7 @@
 	//#endregion
 	//#region src/edges/shapes/bezier-edge-shape/bezier-edge-shape.ts
 	var BezierEdgeShape = class {
-		svg;
+		element;
 		group;
 		line;
 		sourceArrow;
@@ -2386,7 +2312,7 @@
 				createLinePath: this.createLinePath,
 				padding: 50
 			});
-			this.svg = this.pathShape.svg;
+			this.element = this.pathShape.element;
 			this.group = this.pathShape.group;
 			this.line = this.pathShape.line;
 			this.sourceArrow = this.pathShape.sourceArrow;
@@ -2398,110 +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 {
-		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.svg = this.pathShape.svg;
-			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 {
-		svg;
+		element;
 		group;
 		line;
 		sourceArrow;
@@ -2571,7 +2396,7 @@
 				createLinePath: this.createLinePath,
 				padding: 50
 			});
-			this.svg = this.pathShape.svg;
+			this.element = this.pathShape.element;
 			this.group = this.pathShape.group;
 			this.line = this.pathShape.line;
 			this.sourceArrow = this.pathShape.sourceArrow;
@@ -2583,108 +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 {
-		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.svg = this.pathShape.svg;
-			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;
@@ -2700,7 +2423,7 @@
 	//#endregion
 	//#region src/edges/shapes/orthogonal-edge-shape/orthogonal-edge-shape.ts
 	var OrthogonalEdgeShape = class {
-		svg;
+		element;
 		group;
 		line;
 		sourceArrow;
@@ -2767,7 +2490,7 @@
 				createLinePath: this.createLinePath,
 				padding: 50
 			});
-			this.svg = this.pathShape.svg;
+			this.element = this.pathShape.element;
 			this.group = this.pathShape.group;
 			this.line = this.pathShape.line;
 			this.sourceArrow = this.pathShape.sourceArrow;
@@ -2813,7 +2536,7 @@
 	//#region src/edges/shapes/direct-edge-shape/direct-edge-shape.ts
 	var defaultPortOffset = edgeConstants.portOffset;
 	var DirectEdgeShape = class {
-		svg;
+		element;
 		group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 		line;
 		sourceArrow = null;
@@ -2834,8 +2557,8 @@
 			this.arrowRenderer = resolveArrowRenderer(params?.arrowRenderer ?? {});
 			this.sourceOffsetFn = resolvePortOffsetFn(params?.sourceOffset ?? defaultPortOffset);
 			this.targetOffsetFn = resolvePortOffsetFn(params?.targetOffset ?? defaultPortOffset);
-			this.svg = createEdgeSvg(this.color);
-			this.svg.appendChild(this.group);
+			this.element = createEdgeSvg(this.color);
+			this.element.appendChild(this.group);
 			this.line = createEdgePath(this.width);
 			this.group.appendChild(this.line);
 			if (params?.hasSourceArrow) {
@@ -2849,7 +2572,7 @@
 		}
 		render(params) {
 			const { x, y, width, height, from, to } = createEdgeRectangle(params.from, params.to, 50);
-			setSvgRectangle(this.svg, {
+			setSvgRectangle(this.element, {
 				x,
 				y,
 				width,
@@ -3014,15 +2737,11 @@
 	//#region src/edges/shapes/interactive-edge-shape/interactive-edge-shape.ts
 	var InteractiveEdgeShape = class InteractiveEdgeShape {
 		baseEdge;
-		svg;
+		element;
 		group;
 		line;
 		sourceArrow;
 		targetArrow;
-		/**
-		* @deprecated
-		* use shape.svg instead
-		*/
 		handle = createEdgeGroup();
 		onAfterRender;
 		interactiveLine;
@@ -3031,7 +2750,7 @@
 		constructor(baseEdge, params) {
 			this.baseEdge = baseEdge;
 			if (baseEdge instanceof InteractiveEdgeShape) throw new InteractiveEdgeError("interactive edge can be configured only once");
-			this.svg = this.baseEdge.svg;
+			this.element = this.baseEdge.element;
 			this.group = this.baseEdge.group;
 			this.line = this.baseEdge.line;
 			this.sourceArrow = this.baseEdge.sourceArrow;
@@ -3069,17 +2788,17 @@
 		sourceArrow;
 		targetArrow;
 		onAfterRender;
-		svg;
+		element;
 		constructor(baseShape, midpointElement) {
 			this.baseShape = baseShape;
 			this.midpointElement = midpointElement;
-			this.svg = this.baseShape.svg;
+			this.element = this.baseShape.element;
 			this.group = this.baseShape.group;
 			this.line = this.baseShape.line;
 			this.sourceArrow = this.baseShape.sourceArrow;
 			this.targetArrow = this.baseShape.targetArrow;
 			this.onAfterRender = this.baseShape.onAfterRender;
-			this.svg.append(this.midpointElement);
+			this.element.append(this.midpointElement);
 			this.baseShape.onAfterRender.subscribe((model) => {
 				const midpoint = model.edgePath.midpoint;
 				const transform = `translate(${midpoint.x}px, ${midpoint.y}px)`;
@@ -3373,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(() => {
@@ -3435,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
 		};
 	};
@@ -3987,12 +3695,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,
@@ -4277,8 +3980,10 @@
 			const transform = this.params.transformPreprocessor({
 				prevTransform,
 				nextTransform,
-				canvasWidth: width,
-				canvasHeight: height
+				viewport: {
+					width,
+					height
+				}
 			});
 			this.performTransform(transform);
 		}
@@ -4289,8 +3994,10 @@
 			const transform = this.params.transformPreprocessor({
 				prevTransform,
 				nextTransform,
-				canvasWidth: width,
-				canvasHeight: height
+				viewport: {
+					width,
+					height
+				}
 			});
 			this.performTransform(transform);
 		}
@@ -4332,8 +4039,10 @@
 			const transform = this.params.transformPreprocessor({
 				prevTransform,
 				nextTransform: prevTransform,
-				canvasWidth: width,
-				canvasHeight: height
+				viewport: {
+					width,
+					height
+				}
 			});
 			this.params.onResizeTransformStarted();
 			this.canvas.patchViewportMatrix(transform);
@@ -5085,16 +4794,16 @@
 		onEdgeSelected;
 		onAfterEdgeAdded = (edgeId) => {
 			const { shape } = this.canvas.graph.getEdge(edgeId);
-			this.configurator.enable(shape.svg);
+			this.configurator.enable(shape.element);
 		};
 		onBeforeEdgeRemoved = (edgeId) => {
 			const { shape } = this.canvas.graph.getEdge(edgeId);
-			this.configurator.disable(shape.svg);
+			this.configurator.disable(shape.element);
 		};
 		reset = () => {
 			this.canvas.graph.getAllEdgeIds().forEach((edgeId) => {
 				const { shape } = this.canvas.graph.getEdge(edgeId);
-				this.configurator.disable(shape.svg);
+				this.configurator.disable(shape.element);
 			});
 		};
 		constructor(canvas, window, pointInsideVerifier, eventTagger, params) {
@@ -5236,9 +4945,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
@@ -5258,30 +4967,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,
@@ -5355,10 +5040,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,
@@ -5406,8 +5091,7 @@
 			return preprocessors.reduce((acc, cur) => cur({
 				prevTransform: params.prevTransform,
 				nextTransform: acc,
-				canvasWidth: params.canvasWidth,
-				canvasHeight: params.canvasHeight
+				viewport: params.viewport
 			}), params.nextTransform);
 		};
 	};
@@ -5440,10 +5124,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;
@@ -5520,7 +5204,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
@@ -6207,7 +5891,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,
@@ -6463,7 +6147,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;
@@ -6562,7 +6246,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,
@@ -6591,14 +6275,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
@@ -6794,7 +6470,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,
@@ -6909,7 +6585,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
@@ -7115,12 +6791,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;
 });