@html-graph/html-graph 8.22.0 → 8.24.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);
@@ -127,7 +127,7 @@
 		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);
 		}
@@ -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
@@ -1392,13 +1392,13 @@
 		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,
@@ -1475,6 +1475,198 @@
 		};
 	};
 	//#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;
@@ -1498,14 +1690,14 @@
 				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;
@@ -1599,89 +1791,6 @@
 		}
 	};
 	//#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;
@@ -1705,14 +1814,51 @@
 				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;
@@ -1928,6 +2074,31 @@
 		}
 	};
 	//#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",
@@ -1964,6 +2135,7 @@
 	//#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;
@@ -1976,8 +2148,9 @@
 			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) {
@@ -1991,7 +2164,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,
@@ -2149,6 +2322,7 @@
 	//#endregion
 	//#region src/edges/shapes/bezier-edge-shape/bezier-edge-shape.ts
 	var BezierEdgeShape = class {
+		element;
 		svg;
 		group;
 		line;
@@ -2215,7 +2389,8 @@
 				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;
@@ -2233,7 +2408,12 @@
 	};
 	//#endregion
 	//#region src/edges/shapes/horizontal-edge-shape/horizontal-edge-shape.ts
+	/**
+	* @deprecated
+	* use OrthogonalEdgeShape instead
+	*/
 	var HorizontalEdgeShape = class {
+		element;
 		svg;
 		group;
 		line;
@@ -2301,7 +2481,8 @@
 				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;
@@ -2326,6 +2507,7 @@
 	//#endregion
 	//#region src/edges/shapes/straight-edge-shape/straight-edge-shape.ts
 	var StraightEdgeShape = class {
+		element;
 		svg;
 		group;
 		line;
@@ -2396,7 +2578,8 @@
 				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;
@@ -2415,7 +2598,12 @@
 	};
 	//#endregion
 	//#region src/edges/shapes/vertical-edge-shape/vertical-edge-shape.ts
+	/**
+	* @deprecated
+	* use OrthogonalEdgeShape instead
+	*/
 	var VerticalEdgeShape = class {
+		element;
 		svg;
 		group;
 		line;
@@ -2483,7 +2671,8 @@
 				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;
@@ -2506,6 +2695,113 @@
 		}
 	};
 	//#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;
@@ -2529,6 +2825,7 @@
 	//#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;
@@ -2550,8 +2847,9 @@
 			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) {
@@ -2565,7 +2863,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,
@@ -2730,6 +3028,7 @@
 	//#region src/edges/shapes/interactive-edge-shape/interactive-edge-shape.ts
 	var InteractiveEdgeShape = class InteractiveEdgeShape {
 		baseEdge;
+		element;
 		svg;
 		group;
 		line;
@@ -2747,7 +3046,8 @@
 		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;
@@ -2785,17 +3085,19 @@
 		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)`;
@@ -4801,16 +5103,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) {
@@ -4998,6 +5300,18 @@
 				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,
@@ -5082,28 +5396,24 @@
 			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
 			};
 		};
 	};
@@ -6827,6 +7137,7 @@
 	exports.InteractiveEdgeError = InteractiveEdgeError;
 	exports.InteractiveEdgeShape = InteractiveEdgeShape;
 	exports.MidpointEdgeShape = MidpointEdgeShape;
+	exports.OrthogonalEdgeShape = OrthogonalEdgeShape;
 	exports.StraightEdgeShape = StraightEdgeShape;
 	exports.VerticalEdgeShape = VerticalEdgeShape;
 	exports.boxPortOffsetFn = boxPortOffsetFn;