@html-graph/html-graph 8.23.0 → 9.0.0

package/dist/html-graph.js

@@ -81,7 +81,7 @@ var CoreHtmlView = class {
 		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);
@@ -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.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);
@@ -148,7 +148,7 @@ var CoreHtmlView = class {
 	}
 	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({
@@ -757,7 +757,7 @@ var GraphStore = class {
 		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);
@@ -898,7 +898,7 @@ var GraphStore = class {
 				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);
@@ -913,7 +913,7 @@ var GraphStore = class {
 		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
@@ -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;
@@ -2131,7 +2057,7 @@ var createDirectionVector = (dir) => {
 //#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;
@@ -2143,8 +2069,8 @@ var PathEdgeShape = class {
 		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) {
@@ -2158,7 +2084,7 @@ var PathEdgeShape = class {
 	}
 	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,
@@ -2316,7 +2242,7 @@ var resolveArrowRenderer = (config) => {
 //#endregion
 //#region src/edges/shapes/bezier-edge-shape/bezier-edge-shape.ts
 var BezierEdgeShape = class {
-	svg;
+	element;
 	group;
 	line;
 	sourceArrow;
@@ -2382,7 +2308,7 @@ var BezierEdgeShape = class {
 			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;
@@ -2394,110 +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 {
-	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;
@@ -2567,7 +2392,7 @@ var StraightEdgeShape = class {
 			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;
@@ -2579,108 +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 {
-	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;
@@ -2696,7 +2419,7 @@ var orthogonalizeDirection = (direction) => {
 //#endregion
 //#region src/edges/shapes/orthogonal-edge-shape/orthogonal-edge-shape.ts
 var OrthogonalEdgeShape = class {
-	svg;
+	element;
 	group;
 	line;
 	sourceArrow;
@@ -2763,7 +2486,7 @@ var OrthogonalEdgeShape = class {
 			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;
@@ -2809,7 +2532,7 @@ var resolvePortOffsetFn = (offset) => {
 //#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;
@@ -2830,8 +2553,8 @@ var DirectEdgeShape = class {
 		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) {
@@ -2845,7 +2568,7 @@ var DirectEdgeShape = class {
 	}
 	render(params) {
 		const { x, y, width, height, from, to } = createEdgeRectangle(params.from, params.to, 50);
-		setSvgRectangle(this.svg, {
+		setSvgRectangle(this.element, {
 			x,
 			y,
 			width,
@@ -3010,15 +2733,11 @@ var InteractiveEdgeError = class extends Error {
 //#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;
@@ -3027,7 +2746,7 @@ var InteractiveEdgeShape = class InteractiveEdgeShape {
 	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;
@@ -3065,17 +2784,17 @@ var MidpointEdgeShape = class {
 	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)`;
@@ -3369,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(() => {
@@ -3431,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
 	};
 };
@@ -3983,12 +3691,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,
@@ -4273,8 +3976,10 @@ var UserTransformableViewportConfigurator = class UserTransformableViewportConfi
 		const transform = this.params.transformPreprocessor({
 			prevTransform,
 			nextTransform,
-			canvasWidth: width,
-			canvasHeight: height
+			viewport: {
+				width,
+				height
+			}
 		});
 		this.performTransform(transform);
 	}
@@ -4285,8 +3990,10 @@ var UserTransformableViewportConfigurator = class UserTransformableViewportConfi
 		const transform = this.params.transformPreprocessor({
 			prevTransform,
 			nextTransform,
-			canvasWidth: width,
-			canvasHeight: height
+			viewport: {
+				width,
+				height
+			}
 		});
 		this.performTransform(transform);
 	}
@@ -4328,8 +4035,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);
@@ -5081,16 +4790,16 @@ var UserSelectableEdgesConfigurator = class UserSelectableEdgesConfigurator {
 	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) {
@@ -5232,9 +4941,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
@@ -5254,30 +4963,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,
@@ -5351,10 +5036,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,
@@ -5402,8 +5087,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);
 	};
 };
@@ -5436,10 +5120,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;
@@ -5516,7 +5200,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
@@ -6203,7 +5887,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,
@@ -6459,7 +6143,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;
@@ -6558,7 +6242,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,
@@ -6587,14 +6271,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
@@ -6790,7 +6466,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,
@@ -6905,7 +6581,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
@@ -7104,4 +6780,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 };