@html-graph/html-graph 8.22.0 → 8.23.0

package/dist/html-graph.umd.cjs

@@ -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",
@@ -2233,6 +2404,10 @@
 	};
 	//#endregion
 	//#region src/edges/shapes/horizontal-edge-shape/horizontal-edge-shape.ts
+	/**
+	* @deprecated
+	* use OrthogonalEdgeShape instead
+	*/
 	var HorizontalEdgeShape = class {
 		svg;
 		group;
@@ -2415,6 +2590,10 @@
 	};
 	//#endregion
 	//#region src/edges/shapes/vertical-edge-shape/vertical-edge-shape.ts
+	/**
+	* @deprecated
+	* use OrthogonalEdgeShape instead
+	*/
 	var VerticalEdgeShape = class {
 		svg;
 		group;
@@ -2506,6 +2685,111 @@
 		}
 	};
 	//#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 {
+		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.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: 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;
@@ -4998,6 +5282,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 +5378,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 +7119,7 @@
 	exports.InteractiveEdgeError = InteractiveEdgeError;
 	exports.InteractiveEdgeShape = InteractiveEdgeShape;
 	exports.MidpointEdgeShape = MidpointEdgeShape;
+	exports.OrthogonalEdgeShape = OrthogonalEdgeShape;
 	exports.StraightEdgeShape = StraightEdgeShape;
 	exports.VerticalEdgeShape = VerticalEdgeShape;
 	exports.boxPortOffsetFn = boxPortOffsetFn;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@html-graph/html-graph",
   "author": "Dmitry Marov <d.marov94@gmail.com>",
   "private": false,
-  "version": "8.22.0",
+  "version": "8.23.0",
   "type": "module",
   "main": "dist/html-graph.js",
   "types": "dist/html-graph.d.ts",