@joshrp/react-flow-smart-edge 4.0.2

package/src/SmartEdge/index.tsx

@@ -0,0 +1,92 @@
+import { BezierEdge, BaseEdge } from "@xyflow/react";
+import type { ComponentType } from "react";
+import { getSmartEdge } from "../getSmartEdge";
+import { useSmartEdgeDebug } from "../internal/useSmartEdgeDebug";
+import type { GetSmartEdgeOptions } from "../getSmartEdge";
+import type { EdgeProps, Node, Edge } from "@xyflow/react";
+
+export type SmartEdgeOptions = GetSmartEdgeOptions & {
+  fallback?: ComponentType<EdgeProps<Edge>>;
+};
+
+export interface SmartEdgeProps<
+  EdgeType extends Edge = Edge,
+  NodeType extends Node = Node,
+> extends EdgeProps<EdgeType> {
+  nodes: NodeType[];
+  options: SmartEdgeOptions;
+}
+
+export function SmartEdge<
+  EdgeType extends Edge = Edge,
+  NodeType extends Node = Node,
+>({
+  nodes,
+  options,
+  ...edgeProps
+}: Readonly<SmartEdgeProps<EdgeType, NodeType>>) {
+  const { enabled: isDebugEnabled, setGraphBox } = useSmartEdgeDebug();
+  const {
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+    style,
+    label,
+    labelStyle,
+    labelShowBg,
+    labelBgStyle,
+    labelBgPadding,
+    labelBgBorderRadius,
+    markerEnd,
+    markerStart,
+    interactionWidth,
+  } = edgeProps;
+
+  const smartResponse = getSmartEdge({
+    sourcePosition,
+    targetPosition,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    options: {
+      ...options,
+      debug: { enabled: isDebugEnabled, setGraphBox },
+    } as GetSmartEdgeOptions,
+    nodes,
+  });
+
+  const FallbackEdge = options.fallback ?? BezierEdge;
+
+  if (smartResponse instanceof Error) {
+    if (isDebugEnabled) {
+      console.error(smartResponse);
+    }
+    return <FallbackEdge {...edgeProps} />;
+  }
+
+  const { edgeCenterX, edgeCenterY, svgPathString } = smartResponse;
+
+  return (
+    <BaseEdge
+      path={svgPathString}
+      labelX={edgeCenterX}
+      labelY={edgeCenterY}
+      label={label}
+      labelStyle={labelStyle}
+      labelShowBg={labelShowBg}
+      labelBgStyle={labelBgStyle}
+      labelBgPadding={labelBgPadding}
+      labelBgBorderRadius={labelBgBorderRadius}
+      style={style}
+      markerStart={markerStart}
+      markerEnd={markerEnd}
+      interactionWidth={interactionWidth}
+    />
+  );
+}
+
+export type SmartEdgeFunction = typeof SmartEdge;

package/src/SmartStepEdge/index.tsx

@@ -0,0 +1,29 @@
+import { useNodes, StepEdge } from "@xyflow/react";
+import { SmartEdge } from "../SmartEdge";
+import {
+  svgDrawStraightLinePath,
+  pathfindingAStarNoDiagonal,
+} from "../functions";
+import type { SmartEdgeOptions } from "../SmartEdge";
+import type { Edge, EdgeProps, Node } from "@xyflow/react";
+
+const StepConfiguration: SmartEdgeOptions = {
+  drawEdge: svgDrawStraightLinePath,
+  generatePath: pathfindingAStarNoDiagonal,
+  fallback: StepEdge,
+};
+
+export function SmartStepEdge<
+  EdgeType extends Edge = Edge,
+  NodeType extends Node = Node,
+>(props: EdgeProps<EdgeType>) {
+  const nodes = useNodes<NodeType>();
+
+  return (
+    <SmartEdge<EdgeType, NodeType>
+      {...props}
+      options={StepConfiguration}
+      nodes={nodes}
+    />
+  );
+}

package/src/SmartStraightEdge/index.tsx

@@ -0,0 +1,29 @@
+import { useNodes, StraightEdge } from "@xyflow/react";
+import { SmartEdge } from "../SmartEdge";
+import {
+  svgDrawStraightLinePath,
+  pathfindingAStarDiagonal,
+} from "../functions";
+import type { SmartEdgeOptions } from "../SmartEdge";
+import type { Edge, EdgeProps, Node } from "@xyflow/react";
+
+const StraightConfiguration: SmartEdgeOptions = {
+  drawEdge: svgDrawStraightLinePath,
+  generatePath: pathfindingAStarDiagonal,
+  fallback: StraightEdge,
+};
+
+export function SmartStraightEdge<
+  EdgeType extends Edge = Edge,
+  NodeType extends Node = Node,
+>(props: EdgeProps<EdgeType>) {
+  const nodes = useNodes<NodeType>();
+
+  return (
+    <SmartEdge<EdgeType, NodeType>
+      {...props}
+      options={StraightConfiguration}
+      nodes={nodes}
+    />
+  );
+}

package/src/functions/createGrid.ts

@@ -0,0 +1,81 @@
+import { createGrid as createLocalGrid } from "../pathfinding/grid";
+import type { Grid } from "../pathfinding/grid";
+import {
+  guaranteeWalkablePath,
+  getNextPointFromPosition,
+} from "./guaranteeWalkablePath";
+import { graphToGridPoint } from "./pointConversion";
+import { round, roundUp } from "./utils";
+import type { NodeBoundingBox, GraphBoundingBox } from "./getBoundingBoxes";
+import type { Position } from "@xyflow/react";
+
+export interface PointInfo {
+  x: number;
+  y: number;
+  position: Position;
+}
+
+export const createGrid = (
+  graph: GraphBoundingBox,
+  nodes: NodeBoundingBox[],
+  source: PointInfo,
+  target: PointInfo,
+  gridRatio = 2,
+) => {
+  const { xMin, yMin, width, height } = graph;
+
+  // Create a grid representation of the graph box, where each cell is
+  // equivalent to 10x10 pixels (or the grid ratio) on the graph. We'll use
+  // this simplified grid to do pathfinding.
+  const mapColumns = roundUp(width, gridRatio) / gridRatio + 1;
+  const mapRows = roundUp(height, gridRatio) / gridRatio + 1;
+  const grid: Grid = createLocalGrid(mapColumns, mapRows);
+
+  // Update the grid representation with the space the nodes take up
+  nodes.forEach((node) => {
+    const nodeStart = graphToGridPoint(node.topLeft, xMin, yMin, gridRatio);
+    const nodeEnd = graphToGridPoint(node.bottomRight, xMin, yMin, gridRatio);
+
+    for (let x = nodeStart.x; x < nodeEnd.x; x++) {
+      for (let y = nodeStart.y; y < nodeEnd.y; y++) {
+        grid.setWalkableAt(x, y, false);
+      }
+    }
+  });
+
+  // Convert the starting and ending graph points to grid points
+  const startGrid = graphToGridPoint(
+    {
+      x: round(source.x, gridRatio),
+      y: round(source.y, gridRatio),
+    },
+    xMin,
+    yMin,
+    gridRatio,
+  );
+
+  const endGrid = graphToGridPoint(
+    {
+      x: round(target.x, gridRatio),
+      y: round(target.y, gridRatio),
+    },
+    xMin,
+    yMin,
+    gridRatio,
+  );
+
+  // Guarantee a walkable path between the start and end points, even if the
+  // source or target where covered by another node or by padding
+  const startingNode = grid.getNodeAt(startGrid.x, startGrid.y);
+  guaranteeWalkablePath(grid, startingNode, source.position);
+
+  const endingNode = grid.getNodeAt(endGrid.x, endGrid.y);
+  guaranteeWalkablePath(grid, endingNode, target.position);
+
+  // Use the next closest points as the start and end points, so
+  // pathfinding does not start too close to the nodes
+  const start = getNextPointFromPosition(startingNode, source.position);
+  const end = getNextPointFromPosition(endingNode, target.position);
+
+  return { grid, start, end };
+};

package/src/functions/drawSvgPath.ts

@@ -0,0 +1,72 @@
+import type { XYPosition } from "@xyflow/react";
+
+/**
+ * Takes source and target {x, y} points, together with an array of number
+ * tuples [x, y] representing the points along the path, and returns a string
+ * to be used as the SVG path.
+ */
+export type SVGDrawFunction = (
+  source: XYPosition,
+  target: XYPosition,
+  path: number[][],
+) => string;
+
+/**
+ * Draws a SVG path from a list of points, using straight lines.
+ */
+export const svgDrawStraightLinePath: SVGDrawFunction = (
+  source,
+  target,
+  path,
+) => {
+  let svgPathString = `M ${String(source.x)}, ${String(source.y)} `;
+
+  path.forEach((point) => {
+    const [x, y] = point;
+    svgPathString += `L ${String(x)}, ${String(y)} `;
+  });
+
+  svgPathString += `L ${String(target.x)}, ${String(target.y)} `;
+
+  return svgPathString;
+};
+
+/**
+ * Draws a SVG path from a list of points, using rounded lines.
+ */
+export const svgDrawSmoothLinePath: SVGDrawFunction = (
+  source,
+  target,
+  path,
+) => {
+  const points = [[source.x, source.y], ...path, [target.x, target.y]];
+  return quadraticBezierCurve(points);
+};
+
+const quadraticBezierCurve = (points: number[][]) => {
+  const X = 0;
+  const Y = 1;
+  let point = points[0];
+
+  const first = points[0];
+  let svgPath = `M${String(first[X])},${String(first[Y])}M`;
+
+  for (const next of points) {
+    const midPoint = getMidPoint(point[X], point[Y], next[X], next[Y]);
+
+    svgPath += ` ${String(midPoint[X])},${String(midPoint[Y])}`;
+    svgPath += `Q${String(next[X])},${String(next[Y])}`;
+    point = next;
+  }
+
+  const last = points[points.length - 1];
+  svgPath += ` ${String(last[0])},${String(last[1])}`;
+
+  return svgPath;
+};
+
+const getMidPoint = (Ax: number, Ay: number, Bx: number, By: number) => {
+  const Zx = (Ax - Bx) / 2 + Bx;
+  const Zy = (Ay - By) / 2 + By;
+  return [Zx, Zy];
+};

package/src/functions/generatePath.ts

@@ -0,0 +1,60 @@
+import { createAStarFinder } from "../pathfinding/aStar";
+import type { Grid } from "../pathfinding/grid";
+import type { XYPosition } from "@xyflow/react";
+
+/**
+ * Takes source and target {x, y} points, together with an grid representation
+ * of the graph, and returns an array of number tuples [x, y], representing
+ * the full path from source to target.
+ */
+export type PathFindingFunction = (
+  grid: Grid,
+  start: XYPosition,
+  end: XYPosition,
+) => number[][];
+
+export const pathfindingAStarDiagonal: PathFindingFunction = (
+  grid,
+  start,
+  end,
+) => {
+  try {
+    const finder = createAStarFinder({
+      diagonalMovement: "Always",
+    });
+    const fullPath = finder.findPath(start.x, start.y, end.x, end.y, grid);
+
+    if (fullPath.length === 0) {
+      throw new Error("No path found");
+    }
+    return fullPath;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+    throw new Error(`Unknown error: ${String(error)}`);
+  }
+};
+
+export const pathfindingAStarNoDiagonal: PathFindingFunction = (
+  grid,
+  start,
+  end,
+) => {
+  try {
+    const finder = createAStarFinder({
+      diagonalMovement: "Never",
+    });
+    const fullPath = finder.findPath(start.x, start.y, end.x, end.y, grid);
+
+    if (fullPath.length === 0) {
+      throw new Error("No path found");
+    }
+    return fullPath;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw error;
+    }
+    throw new Error(`Unknown error: ${String(error)}`);
+  }
+};

package/src/functions/getBoundingBoxes.ts

@@ -0,0 +1,138 @@
+import { roundUp, roundDown } from "./utils";
+import type { Node, XYPosition } from "@xyflow/react";
+
+export interface NodeBoundingBox {
+  id: string;
+  width: number;
+  height: number;
+  topLeft: XYPosition;
+  bottomLeft: XYPosition;
+  topRight: XYPosition;
+  bottomRight: XYPosition;
+}
+
+export interface GraphBoundingBox {
+  width: number;
+  height: number;
+  topLeft: XYPosition;
+  bottomLeft: XYPosition;
+  topRight: XYPosition;
+  bottomRight: XYPosition;
+  xMax: number;
+  yMax: number;
+  xMin: number;
+  yMin: number;
+}
+
+/**
+ * Get the bounding box of all nodes and the graph itself, as X/Y coordinates
+ * of all corner points.
+ */
+export const getBoundingBoxes = (
+  nodes: Node[],
+  nodePadding = 2,
+  roundTo = 2,
+) => {
+  let xMax = Number.MIN_SAFE_INTEGER;
+  let yMax = Number.MIN_SAFE_INTEGER;
+  let xMin = Number.MAX_SAFE_INTEGER;
+  let yMin = Number.MAX_SAFE_INTEGER;
+
+  const nodeBoxes: NodeBoundingBox[] = nodes.map((node) => {
+    const width = Math.max(node.measured?.width ?? 0, 1);
+    const height = Math.max(node.measured?.height ?? 0, 1);
+
+    const position: XYPosition = {
+      x: node.position.x,
+      y: node.position.y,
+    };
+
+    const topLeft: XYPosition = {
+      x: position.x - nodePadding,
+      y: position.y - nodePadding,
+    };
+    const bottomLeft: XYPosition = {
+      x: position.x - nodePadding,
+      y: position.y + height + nodePadding,
+    };
+    const topRight: XYPosition = {
+      x: position.x + width + nodePadding,
+      y: position.y - nodePadding,
+    };
+    const bottomRight: XYPosition = {
+      x: position.x + width + nodePadding,
+      y: position.y + height + nodePadding,
+    };
+
+    if (roundTo > 0) {
+      topLeft.x = roundDown(topLeft.x, roundTo);
+      topLeft.y = roundDown(topLeft.y, roundTo);
+      bottomLeft.x = roundDown(bottomLeft.x, roundTo);
+      bottomLeft.y = roundUp(bottomLeft.y, roundTo);
+      topRight.x = roundUp(topRight.x, roundTo);
+      topRight.y = roundDown(topRight.y, roundTo);
+      bottomRight.x = roundUp(bottomRight.x, roundTo);
+      bottomRight.y = roundUp(bottomRight.y, roundTo);
+    }
+
+    if (topLeft.y < yMin) yMin = topLeft.y;
+    if (topLeft.x < xMin) xMin = topLeft.x;
+    if (bottomRight.y > yMax) yMax = bottomRight.y;
+    if (bottomRight.x > xMax) xMax = bottomRight.x;
+
+    return {
+      id: node.id,
+      width,
+      height,
+      topLeft,
+      bottomLeft,
+      topRight,
+      bottomRight,
+    };
+  });
+
+  const graphPadding = nodePadding * 2;
+
+  xMax = roundUp(xMax + graphPadding, roundTo);
+  yMax = roundUp(yMax + graphPadding, roundTo);
+  xMin = roundDown(xMin - graphPadding, roundTo);
+  yMin = roundDown(yMin - graphPadding, roundTo);
+
+  const topLeft: XYPosition = {
+    x: xMin,
+    y: yMin,
+  };
+
+  const bottomLeft: XYPosition = {
+    x: xMin,
+    y: yMax,
+  };
+
+  const topRight: XYPosition = {
+    x: xMax,
+    y: yMin,
+  };
+
+  const bottomRight: XYPosition = {
+    x: xMax,
+    y: yMax,
+  };
+
+  const width = Math.abs(topLeft.x - topRight.x);
+  const height = Math.abs(topLeft.y - bottomLeft.y);
+
+  const graphBox: GraphBoundingBox = {
+    topLeft,
+    bottomLeft,
+    topRight,
+    bottomRight,
+    width,
+    height,
+    xMax,
+    yMax,
+    xMin,
+    yMin,
+  };
+
+  return { nodeBoxes, graphBox };
+};

package/src/functions/guaranteeWalkablePath.ts

@@ -0,0 +1,38 @@
+import type { Grid } from "../pathfinding/grid";
+import type { Position, XYPosition } from "@xyflow/react";
+
+type Direction = "top" | "bottom" | "left" | "right";
+
+export const getNextPointFromPosition = (
+  point: XYPosition,
+  position: Direction,
+): XYPosition => {
+  switch (position) {
+    case "top":
+      return { x: point.x, y: point.y - 1 };
+    case "bottom":
+      return { x: point.x, y: point.y + 1 };
+    case "left":
+      return { x: point.x - 1, y: point.y };
+    case "right":
+      return { x: point.x + 1, y: point.y };
+  }
+};
+
+/**
+ * Guarantee that the path is walkable, even if the point is inside a non
+ * walkable area, by adding a walkable path in the direction of the point's
+ * Position.
+ */
+export const guaranteeWalkablePath = (
+  grid: Grid,
+  point: XYPosition,
+  position: Position,
+) => {
+  let node = grid.getNodeAt(point.x, point.y);
+  while (!node.walkable) {
+    grid.setWalkableAt(node.x, node.y, true);
+    const next = getNextPointFromPosition(node, position);
+    node = grid.getNodeAt(next.x, next.y);
+  }
+};

package/src/functions/index.ts

@@ -0,0 +1,7 @@
+export * from "./createGrid";
+export * from "./drawSvgPath";
+export * from "./generatePath";
+export * from "./getBoundingBoxes";
+export * from "./guaranteeWalkablePath";
+export * from "./pointConversion";
+export * from "./utils";

package/src/functions/pointConversion.ts

@@ -0,0 +1,49 @@
+import type { XYPosition } from "@xyflow/react";
+
+/**
+ * Each bounding box is a collection of X/Y points in a graph, and we
+ * need to convert them to "occupied" cells in a 2D grid representation.
+ *
+ * The top most position of the grid (grid[0][0]) needs to be equivalent
+ * to the top most point in the graph (the graph.topLeft point).
+ *
+ * Since the top most point can have X/Y values different than zero,
+ * and each cell in a grid represents a 10x10 pixel area in the grid (or a
+ * gridRatio area), there's need to be a conversion between a point in a graph
+ * to a point in the grid.
+ *
+ * We do this conversion by dividing a graph point X/Y values by the grid ratio,
+ * and "shifting" their values up or down, depending on the values of the top
+ * most point in the graph. The top most point in the graph will have the
+ * smallest values for X and Y.
+ *
+ * We avoid setting nodes in the border of the grid (x=0 or y=0), so there's
+ * always a "walkable" area around the grid.
+ */
+export const graphToGridPoint = (
+  graphPoint: XYPosition,
+  smallestX: number,
+  smallestY: number,
+  gridRatio: number,
+): XYPosition => {
+  // Affine transform: translate by top-left, scale by grid size, then offset border (1 cell)
+  const x = (graphPoint.x - smallestX) / gridRatio + 1;
+  const y = (graphPoint.y - smallestY) / gridRatio + 1;
+  return { x, y };
+};
+
+/**
+ * Converts a grid point back to a graph point, using the reverse logic of
+ * graphToGridPoint.
+ */
+export const gridToGraphPoint = (
+  gridPoint: XYPosition,
+  smallestX: number,
+  smallestY: number,
+  gridRatio: number,
+): XYPosition => {
+  // Inverse affine transform: remove border, scale by grid size, then translate by top-left
+  const x = (gridPoint.x - 1) * gridRatio + smallestX;
+  const y = (gridPoint.y - 1) * gridRatio + smallestY;
+  return { x, y };
+};

package/src/functions/utils.ts

@@ -0,0 +1,15 @@
+export const round = (x: number, multiple = 10) =>
+  Math.round(x / multiple) * multiple;
+
+export const roundDown = (x: number, multiple = 10) =>
+  Math.floor(x / multiple) * multiple;
+
+export const roundUp = (x: number, multiple = 10) =>
+  Math.ceil(x / multiple) * multiple;
+
+export const toInteger = (value: number, min = 0) => {
+  let result = Math.max(Math.round(value), min);
+  result = Number.isInteger(result) ? result : min;
+  result = result >= min ? result : min;
+  return result;
+};