@html-graph/html-graph 8.22.0 → 8.23.0

package/dist/html-graph.js

@@ -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",
@@ -2229,6 +2400,10 @@ var horizontalizeDirection = (direction) => {
 };
 //#endregion
 //#region src/edges/shapes/horizontal-edge-shape/horizontal-edge-shape.ts
+/**
+* @deprecated
+* use OrthogonalEdgeShape instead
+*/
 var HorizontalEdgeShape = class {
 	svg;
 	group;
@@ -2411,6 +2586,10 @@ var verticalizeDirection = (direction) => {
 };
 //#endregion
 //#region src/edges/shapes/vertical-edge-shape/vertical-edge-shape.ts
+/**
+* @deprecated
+* use OrthogonalEdgeShape instead
+*/
 var VerticalEdgeShape = class {
 	svg;
 	group;
@@ -2502,6 +2681,111 @@ 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 {
+	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;
@@ -4994,6 +5278,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 +5374,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 +7104,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 };