@html-graph/html-graph 8.22.0 → 8.24.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);
@@ -123,7 +123,7 @@ var CoreHtmlView = class {
 	updateEdgeShape(edgeId) {
 		const element = this.edgeIdToElementMap.get(edgeId);
 		this.container.removeChild(element);
-		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);
 	}
@@ -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
@@ -1388,13 +1388,13 @@ var createRoundedPath = (path, roundness) => {
 	return parts.join(" ");
 };
 //#endregion
-//#region src/edges/paths/horizontal-edge-path/create-line/create-line.ts
-var createLine$1 = (from, to) => {
+//#region src/edges/paths/shared/create-horizontal-line/create-horizontal-line.ts
+var createHorizontalLine = (from, to) => {
 	const fromLine = from.linePoint;
 	const toLine = to.linePoint;
 	const horizontalLineDir = toLine.x - fromLine.x >= 0;
-	const fromPortDir = from.dirX >= 0;
-	if (fromPortDir === to.dirX >= 0) {
+	const fromPortDir = from.dir.x >= 0;
+	if (fromPortDir === to.dir.x >= 0) {
 		const isSameDirLine = fromPortDir === horizontalLineDir;
 		const midpoint = {
 			x: (fromLine.x + toLine.x) / 2,
@@ -1471,6 +1471,198 @@ var createLine$1 = (from, to) => {
 	};
 };
 //#endregion
+//#region src/edges/paths/shared/shared/transpose-point/transpose-point.ts
+var transposePoint = (point) => {
+	return {
+		x: point.y,
+		y: point.x
+	};
+};
+//#endregion
+//#region src/edges/paths/shared/create-vertical-line/create-vertical-line.ts
+var createVerticalLine = (from, to) => {
+	const transposedLine = createHorizontalLine({
+		arrowPoint: transposePoint(from.arrowPoint),
+		linePoint: transposePoint(from.linePoint),
+		dir: transposePoint(from.dir)
+	}, {
+		arrowPoint: transposePoint(to.arrowPoint),
+		linePoint: transposePoint(to.linePoint),
+		dir: transposePoint(to.dir)
+	});
+	return {
+		points: transposedLine.points.map((p) => transposePoint(p)),
+		midpoint: transposePoint(transposedLine.midpoint)
+	};
+};
+//#endregion
+//#region src/edges/paths/shared/create-horizontal-source-orthogonal-line/calculate-midpoint/calculate-midpoint.ts
+var calculateMidpoint = (points) => {
+	const parts = [];
+	for (let i = 1; i < points.length; i++) {
+		const start = points[i - 1];
+		const end = points[i];
+		const dx = end.x - start.x;
+		const dy = end.y - start.y;
+		const distance = Math.sqrt(dx * dx + dy * dy);
+		parts.push({
+			start,
+			end,
+			distance
+		});
+	}
+	const halfLength = parts.reduce((acc, cur) => acc + cur.distance, 0) / 2;
+	let accLength = 0;
+	for (const part of parts) {
+		const nextAccLength = accLength + part.distance;
+		if (nextAccLength >= halfLength) {
+			const residue = halfLength - accLength;
+			const { start, end, distance } = part;
+			if (distance === 0) continue;
+			const ratio = residue / distance;
+			const dx = end.x - start.x;
+			const dy = end.y - start.y;
+			return {
+				x: start.x + dx * ratio,
+				y: start.y + dy * ratio
+			};
+		}
+		accLength = nextAccLength;
+	}
+	if (accLength === 0 && points.length > 0) return points[0];
+	throw new Error("Failed to calculate midpoint");
+};
+//#endregion
+//#region src/edges/paths/shared/create-horizontal-source-orthogonal-line/create-horizontal-source-orthogonal-line.ts
+var createHorizontalSourceOrthogonalLine = (from, to) => {
+	const fromLine = from.linePoint;
+	const fromArrow = from.arrowPoint;
+	const toLine = to.linePoint;
+	const toArrow = to.arrowPoint;
+	const targetPortDir = to.dir.y >= 0;
+	const sourcePortDir = from.dir.x >= 0;
+	const verticalLineDir = toLine.y - fromLine.y >= 0;
+	const isSameSourceHorizontal = sourcePortDir === toLine.x - fromLine.x >= 0;
+	const isSameTargetVertical = targetPortDir === verticalLineDir;
+	if (isSameSourceHorizontal) {
+		if (isSameTargetVertical) {
+			const joint = {
+				x: toArrow.x,
+				y: fromArrow.y
+			};
+			return {
+				points: [
+					fromArrow,
+					joint,
+					toArrow
+				],
+				midpoint: calculateMidpoint([
+					fromLine,
+					joint,
+					toLine
+				])
+			};
+		}
+		const middleX = (fromLine.x + toLine.x) / 2;
+		const jointStart = {
+			x: middleX,
+			y: fromLine.y
+		};
+		const jointEnd = {
+			x: middleX,
+			y: toLine.y
+		};
+		return {
+			points: [
+				fromArrow,
+				jointStart,
+				jointEnd,
+				toLine,
+				toArrow
+			],
+			midpoint: calculateMidpoint([
+				fromLine,
+				jointStart,
+				jointEnd,
+				toLine
+			])
+		};
+	}
+	if (isSameTargetVertical) {
+		const middleY = (fromLine.y + toLine.y) / 2;
+		const jointStart = {
+			x: fromLine.x,
+			y: middleY
+		};
+		const jointEnd = {
+			x: toLine.x,
+			y: middleY
+		};
+		return {
+			points: [
+				fromArrow,
+				fromLine,
+				jointStart,
+				jointEnd,
+				toArrow
+			],
+			midpoint: calculateMidpoint([
+				fromLine,
+				jointStart,
+				jointEnd,
+				toLine
+			])
+		};
+	}
+	const joint = {
+		x: fromLine.x,
+		y: toLine.y
+	};
+	return {
+		points: [
+			fromArrow,
+			fromLine,
+			joint,
+			toLine,
+			toArrow
+		],
+		midpoint: calculateMidpoint([
+			fromLine,
+			joint,
+			toLine
+		])
+	};
+};
+//#endregion
+//#region src/edges/paths/shared/create-vertical-source-orthogonal-line/create-vertical-source-orthogonal-line.ts
+var createVerticalSourceOrthogonalLine = (from, to) => {
+	const transposedLine = createHorizontalSourceOrthogonalLine({
+		arrowPoint: transposePoint(from.arrowPoint),
+		linePoint: transposePoint(from.linePoint),
+		dir: transposePoint(from.dir)
+	}, {
+		arrowPoint: transposePoint(to.arrowPoint),
+		linePoint: transposePoint(to.linePoint),
+		dir: transposePoint(to.dir)
+	});
+	return {
+		points: transposedLine.points.map((p) => transposePoint(p)),
+		midpoint: transposePoint(transposedLine.midpoint)
+	};
+};
+//#endregion
+//#region src/edges/paths/shared/create-orthogonal-line/create-orthogonal-line.ts
+var createOrthogonalLine = (from, to) => {
+	const isSourceHor = Math.abs(from.dir.y) < 1e-10;
+	const isTargetHor = Math.abs(to.dir.y) < 1e-10;
+	if (isSourceHor) {
+		if (isTargetHor) return createHorizontalLine(from, to);
+		return createHorizontalSourceOrthogonalLine(from, to);
+	}
+	if (!isTargetHor) return createVerticalLine(from, to);
+	return createVerticalSourceOrthogonalLine(from, to);
+};
+//#endregion
 //#region src/edges/paths/horizontal-edge-path/horizontal-edge-path.ts
 var HorizontalEdgePath = class {
 	path;
@@ -1494,14 +1686,14 @@ var HorizontalEdgePath = class {
 			x: to.x - gap,
 			y: to.y
 		}, toDir, to);
-		const line = createLine$1({
+		const line = createHorizontalLine({
 			arrowPoint: beginArrow,
 			linePoint: beginLine,
-			dirX: fromDir.x
+			dir: fromDir
 		}, {
 			arrowPoint: endArrow,
 			linePoint: endLine,
-			dirX: toDir.x
+			dir: toDir
 		});
 		this.path = createRoundedPath(line.points, roundness);
 		this.midpoint = line.midpoint;
@@ -1595,89 +1787,6 @@ var StraightEdgePath = class {
 	}
 };
 //#endregion
-//#region src/edges/paths/vertical-edge-path/create-line/create-line.ts
-var createLine = (from, to) => {
-	const fromLine = from.linePoint;
-	const toLine = to.linePoint;
-	const verticalLineDir = toLine.y - fromLine.y >= 0;
-	const fromPortDir = from.dirY >= 0;
-	if (fromPortDir === to.dirY >= 0) {
-		const isSameDirLine = fromPortDir === verticalLineDir;
-		const midpoint = {
-			x: (fromLine.x + toLine.x) / 2,
-			y: (fromLine.y + toLine.y) / 2
-		};
-		if (isSameDirLine) return {
-			points: [
-				from.arrowPoint,
-				{
-					x: fromLine.x,
-					y: midpoint.y
-				},
-				{
-					x: toLine.x,
-					y: midpoint.y
-				},
-				to.arrowPoint
-			],
-			midpoint
-		};
-		return {
-			points: [
-				from.arrowPoint,
-				fromLine,
-				{
-					x: midpoint.x,
-					y: fromLine.y
-				},
-				{
-					x: midpoint.x,
-					y: toLine.y
-				},
-				toLine,
-				to.arrowPoint
-			],
-			midpoint
-		};
-	}
-	const isSameSourceDir = fromPortDir === verticalLineDir;
-	const centerX = (fromLine.x + toLine.x) / 2;
-	if (isSameSourceDir) {
-		const joint = {
-			x: fromLine.x,
-			y: toLine.y
-		};
-		return {
-			points: [
-				from.arrowPoint,
-				joint,
-				toLine,
-				to.arrowPoint
-			],
-			midpoint: {
-				x: centerX,
-				y: joint.y
-			}
-		};
-	}
-	const joint = {
-		x: toLine.x,
-		y: fromLine.y
-	};
-	return {
-		points: [
-			from.arrowPoint,
-			fromLine,
-			joint,
-			to.arrowPoint
-		],
-		midpoint: {
-			x: centerX,
-			y: joint.y
-		}
-	};
-};
-//#endregion
 //#region src/edges/paths/vertical-edge-path/vertical-edge-path.ts
 var VerticalEdgePath = class {
 	path;
@@ -1701,14 +1810,51 @@ var VerticalEdgePath = class {
 			x: to.x - gap,
 			y: to.y
 		}, toDir, to);
-		const line = createLine({
+		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;
+	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 = createOrthogonalLine({
 			arrowPoint: beginArrow,
 			linePoint: beginLine,
-			dirY: fromDir.y
+			dir: fromDir
 		}, {
 			arrowPoint: endArrow,
 			linePoint: endLine,
-			dirY: toDir.y
+			dir: toDir
 		});
 		this.path = createRoundedPath(line.points, roundness);
 		this.midpoint = line.midpoint;
@@ -1924,6 +2070,31 @@ var DetourVerticalEdgePath = class {
 	}
 };
 //#endregion
+//#region src/edges/paths/detour-orthogonal-edge-path/detour-orthogonal-edge-shape.ts
+var DetourOrthogonalEdgePath = class {
+	path;
+	midpoint;
+	constructor(params) {
+		const isSourceHor = Math.abs(params.fromDir.y) < 1e-10;
+		const isTargetHor = Math.abs(params.toDir.y) < 1e-10;
+		if (isSourceHor && isTargetHor) {
+			const path = new DetourHorizontalEdgePath(params);
+			this.path = path.path;
+			this.midpoint = path.midpoint;
+			return;
+		}
+		if (!isSourceHor && !isTargetHor) {
+			const path = new DetourVerticalEdgePath(params);
+			this.path = path.path;
+			this.midpoint = path.midpoint;
+			return;
+		}
+		const path = new OrthogonalEdgePath(params);
+		this.path = path.path;
+		this.midpoint = path.midpoint;
+	}
+};
+//#endregion
 //#region src/edges/edge-constants.ts
 var edgeConstants = Object.freeze({
 	color: "#777777",
@@ -1960,6 +2131,7 @@ var createDirectionVector = (dir) => {
 //#region src/edges/shapes/path-edge-shape/path-edge-shape.ts
 var PathEdgeShape = class {
 	params;
+	element;
 	svg;
 	group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	line;
@@ -1972,8 +2144,9 @@ 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.svg = this.element;
+		this.element.appendChild(this.group);
 		this.line = createEdgePath(params.width);
 		this.group.appendChild(this.line);
 		if (params.hasSourceArrow) {
@@ -1987,7 +2160,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,
@@ -2145,6 +2318,7 @@ var resolveArrowRenderer = (config) => {
 //#endregion
 //#region src/edges/shapes/bezier-edge-shape/bezier-edge-shape.ts
 var BezierEdgeShape = class {
+	element;
 	svg;
 	group;
 	line;
@@ -2211,7 +2385,8 @@ var BezierEdgeShape = class {
 			createLinePath: this.createLinePath,
 			padding: 50
 		});
-		this.svg = this.pathShape.svg;
+		this.element = this.pathShape.element;
+		this.svg = this.element;
 		this.group = this.pathShape.group;
 		this.line = this.pathShape.line;
 		this.sourceArrow = this.pathShape.sourceArrow;
@@ -2229,7 +2404,12 @@ var horizontalizeDirection = (direction) => {
 };
 //#endregion
 //#region src/edges/shapes/horizontal-edge-shape/horizontal-edge-shape.ts
+/**
+* @deprecated
+* use OrthogonalEdgeShape instead
+*/
 var HorizontalEdgeShape = class {
+	element;
 	svg;
 	group;
 	line;
@@ -2297,7 +2477,8 @@ var HorizontalEdgeShape = class {
 			createLinePath: this.createLinePath,
 			padding: 50
 		});
-		this.svg = this.pathShape.svg;
+		this.element = this.pathShape.element;
+		this.svg = this.element;
 		this.group = this.pathShape.group;
 		this.line = this.pathShape.line;
 		this.sourceArrow = this.pathShape.sourceArrow;
@@ -2322,6 +2503,7 @@ var HorizontalEdgeShape = class {
 //#endregion
 //#region src/edges/shapes/straight-edge-shape/straight-edge-shape.ts
 var StraightEdgeShape = class {
+	element;
 	svg;
 	group;
 	line;
@@ -2392,7 +2574,8 @@ var StraightEdgeShape = class {
 			createLinePath: this.createLinePath,
 			padding: 50
 		});
-		this.svg = this.pathShape.svg;
+		this.element = this.pathShape.element;
+		this.svg = this.element;
 		this.group = this.pathShape.group;
 		this.line = this.pathShape.line;
 		this.sourceArrow = this.pathShape.sourceArrow;
@@ -2411,7 +2594,12 @@ var verticalizeDirection = (direction) => {
 };
 //#endregion
 //#region src/edges/shapes/vertical-edge-shape/vertical-edge-shape.ts
+/**
+* @deprecated
+* use OrthogonalEdgeShape instead
+*/
 var VerticalEdgeShape = class {
+	element;
 	svg;
 	group;
 	line;
@@ -2479,7 +2667,8 @@ var VerticalEdgeShape = class {
 			createLinePath: this.createLinePath,
 			padding: 50
 		});
-		this.svg = this.pathShape.svg;
+		this.element = this.pathShape.element;
+		this.svg = this.element;
 		this.group = this.pathShape.group;
 		this.line = this.pathShape.line;
 		this.sourceArrow = this.pathShape.sourceArrow;
@@ -2502,6 +2691,113 @@ var VerticalEdgeShape = class {
 	}
 };
 //#endregion
+//#region src/edges/shapes/orthogonal-edge-shape/orthogonalize-direction/orthogonalize-direction.ts
+var orthogonalizeDirection = (direction) => {
+	const adjDir = direction + Math.PI / 4;
+	const adjCos = Math.cos(adjDir);
+	const adjSin = Math.sin(adjDir);
+	if (adjCos > 0) {
+		if (adjSin > 0) return 0;
+		return -Math.PI / 2;
+	}
+	if (adjSin > 0) return Math.PI / 2;
+	return Math.PI;
+};
+//#endregion
+//#region src/edges/shapes/orthogonal-edge-shape/orthogonal-edge-shape.ts
+var OrthogonalEdgeShape = 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 DetourOrthogonalEdgePath({
+		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 OrthogonalEdgePath({
+		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: orthogonalizeDirection(from.direction)
+			},
+			to: {
+				...to,
+				direction: orthogonalizeDirection(to.direction)
+			}
+		});
+	}
+};
+//#endregion
 //#region src/edges/shapes/direct-edge-shape/resolve-port-offset-fn/box-port-offset-fn/box-port-offset-fn.ts
 var boxPortOffsetFn = (params) => {
 	const { direction, radius } = params;
@@ -2525,6 +2821,7 @@ var resolvePortOffsetFn = (offset) => {
 //#region src/edges/shapes/direct-edge-shape/direct-edge-shape.ts
 var defaultPortOffset = edgeConstants.portOffset;
 var DirectEdgeShape = class {
+	element;
 	svg;
 	group = document.createElementNS("http://www.w3.org/2000/svg", "g");
 	line;
@@ -2546,8 +2843,9 @@ 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.svg = this.element;
+		this.element.appendChild(this.group);
 		this.line = createEdgePath(this.width);
 		this.group.appendChild(this.line);
 		if (params?.hasSourceArrow) {
@@ -2561,7 +2859,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,
@@ -2726,6 +3024,7 @@ var InteractiveEdgeError = class extends Error {
 //#region src/edges/shapes/interactive-edge-shape/interactive-edge-shape.ts
 var InteractiveEdgeShape = class InteractiveEdgeShape {
 	baseEdge;
+	element;
 	svg;
 	group;
 	line;
@@ -2743,7 +3042,8 @@ 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.svg = this.element;
 		this.group = this.baseEdge.group;
 		this.line = this.baseEdge.line;
 		this.sourceArrow = this.baseEdge.sourceArrow;
@@ -2781,17 +3081,19 @@ var MidpointEdgeShape = class {
 	sourceArrow;
 	targetArrow;
 	onAfterRender;
+	element;
 	svg;
 	constructor(baseShape, midpointElement) {
 		this.baseShape = baseShape;
 		this.midpointElement = midpointElement;
-		this.svg = this.baseShape.svg;
+		this.element = this.baseShape.element;
+		this.svg = this.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)`;
@@ -4797,16 +5099,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) {
@@ -4994,6 +5296,18 @@ var resolveEdgeShapeFactory = (config) => {
 			roundness: config.roundness,
 			detourDistance: config.detourDistance
 		});
+		case "orthogonal": return () => new OrthogonalEdgeShape({
+			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 "direct": return () => new DirectEdgeShape({
 			color: config.color,
 			width: config.width,
@@ -5078,28 +5392,24 @@ var createScaleLimitTransformPreprocessor = (preprocessorParams) => {
 		const prev = params.prevTransform;
 		const next = params.nextTransform;
 		let nextScale = next.scale;
-		let nextDx = next.x;
-		let nextDy = next.y;
+		let nextX = next.x;
+		let nextY = next.y;
 		if (next.scale > maxViewScale && next.scale > prev.scale) {
 			nextScale = Math.max(prev.scale, maxViewScale);
-			nextDx = prev.x;
-			nextDy = prev.y;
 			const ratio = (nextScale - prev.scale) / (next.scale - prev.scale);
-			nextDx = prev.x + (next.x - prev.x) * ratio;
-			nextDy = prev.y + (next.y - prev.y) * ratio;
+			nextX = prev.x + (next.x - prev.x) * ratio;
+			nextY = prev.y + (next.y - prev.y) * ratio;
 		}
 		if (next.scale < minViewScale && next.scale < prev.scale) {
 			nextScale = Math.min(prev.scale, minViewScale);
-			nextDx = prev.x;
-			nextDy = prev.y;
 			const ratio = (nextScale - prev.scale) / (next.scale - prev.scale);
-			nextDx = prev.x + (next.x - prev.x) * ratio;
-			nextDy = prev.y + (next.y - prev.y) * ratio;
+			nextX = prev.x + (next.x - prev.x) * ratio;
+			nextY = prev.y + (next.y - prev.y) * ratio;
 		}
 		return {
 			scale: nextScale,
-			x: nextDx,
-			y: nextDy
+			x: nextX,
+			y: nextY
 		};
 	};
 };
@@ -6812,4 +7122,4 @@ var CanvasBuilder = class {
 	}
 };
 //#endregion
-export { BezierEdgeShape, CanvasBuilder, CanvasBuilderError, CanvasError, ConnectionCategory, DirectEdgeShape, EventSubject, HorizontalEdgeShape, InteractiveEdgeError, InteractiveEdgeShape, MidpointEdgeShape, StraightEdgeShape, VerticalEdgeShape, boxPortOffsetFn };
+export { BezierEdgeShape, CanvasBuilder, CanvasBuilderError, CanvasError, ConnectionCategory, DirectEdgeShape, EventSubject, HorizontalEdgeShape, InteractiveEdgeError, InteractiveEdgeShape, MidpointEdgeShape, OrthogonalEdgeShape, StraightEdgeShape, VerticalEdgeShape, boxPortOffsetFn };