use BezierPath for arrows (#227)

Author: lihebi

ui/src/components/nodes/FloatingEdge.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { useStore, getStraightPath, EdgeProps } from "reactflow";
+import { useStore, EdgeProps, getBezierPath } from "reactflow";
 
 import { getEdgeParams } from "./utils";
 
@@ -22,11 +22,16 @@ function FloatingEdge({
     return null;
   }
 
-  const { sx, sy, tx, ty } = getEdgeParams(sourceNode, targetNode);
+  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
+    sourceNode,
+    targetNode
+  );
 
-  const [edgePath] = getStraightPath({
+  const [edgePath] = getBezierPath({
     sourceX: sx,
     sourceY: sy,
+    sourcePosition: sourcePos,
+    targetPosition: targetPos,
     targetX: tx,
     targetY: ty,
   });
@@ -36,6 +41,7 @@ function FloatingEdge({
       id={id}
       className="react-flow__edge-path"
       d={edgePath}
+      strokeWidth={5}
       markerEnd={markerEnd}
       style={selected ? { ...style, stroke: "red" } : style}
     />

ui/src/components/nodes/utils.tsx

@@ -1,4 +1,4 @@
-import { Node, Position, MarkerType, XYPosition } from "reactflow";
+import { Position, internalsSymbol } from "reactflow";
 
 export function ResizeIcon() {
   return (
@@ -23,73 +23,78 @@ export function ResizeIcon() {
   );
 }
 
-// this helper function returns the intersection point
-// of the line between the center of the intersectionNode and the target node
-function getNodeIntersection(intersectionNode: Node, targetNode: Node) {
-  // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
-  const {
-    width: intersectionNodeWidth,
-    height: intersectionNodeHeight,
-    positionAbsolute: intersectionNodePosition,
-  } = intersectionNode;
-  const targetPosition = targetNode.positionAbsolute!;
+// returns the position (top,right,bottom or right) passed node compared to
+function getParams(nodeA, nodeB) {
+  const centerA = getNodeCenter(nodeA);
+  const centerB = getNodeCenter(nodeB);
 
-  const w = intersectionNodeWidth! / 2;
-  const h = intersectionNodeHeight! / 2;
+  const horizontalDiff = Math.abs(centerA.x - centerB.x);
+  const verticalDiff = Math.abs(centerA.y - centerB.y);
 
-  const x2 = intersectionNodePosition!.x + w;
-  const y2 = intersectionNodePosition!.y + h;
-  const x1 = targetPosition.x + w;
-  const y1 = targetPosition.y + h;
+  let position;
 
-  const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
-  const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
-  const a = 1 / (Math.abs(xx1) + Math.abs(yy1));
-  const xx3 = a * xx1;
-  const yy3 = a * yy1;
-  const x = w * (xx3 + yy3) + x2;
-  const y = h * (-xx3 + yy3) + y2;
+  // when the horizontal difference between the nodes is bigger, we use Position.Left or Position.Right for the handle
+  if (horizontalDiff > verticalDiff) {
+    position = centerA.x > centerB.x ? Position.Left : Position.Right;
+  } else {
+    // here the vertical difference between the nodes is bigger, so we use Position.Top or Position.Bottom for the handle
+    position = centerA.y > centerB.y ? Position.Top : Position.Bottom;
+  }
 
-  return { x, y };
+  const [x, y] = getHandleCoordsByPosition(nodeA, position);
+  return [x, y, position];
 }
 
-// returns the position (top,right,bottom or right) passed node compared to the intersection point
-function getEdgePosition(node: Node, intersectionPoint: XYPosition) {
-  const n = { ...node.positionAbsolute, ...node };
-  const nx = Math.round(n.x!);
-  const ny = Math.round(n.y!);
-  const px = Math.round(intersectionPoint.x);
-  const py = Math.round(intersectionPoint.y);
+function getHandleCoordsByPosition(node, handlePosition) {
+  // all handles are from type source, that's why we use handleBounds.source here
+  const handle = node[internalsSymbol].handleBounds.source.find(
+    (h) => h.position === handlePosition
+  );
 
-  if (px <= nx + 1) {
-    return Position.Left;
-  }
-  if (px >= nx + n.width! - 1) {
-    return Position.Right;
-  }
-  if (py <= ny + 1) {
-    return Position.Top;
-  }
-  if (py >= n.y! + n.height! - 1) {
-    return Position.Bottom;
+  let offsetX = handle.width / 2;
+  let offsetY = handle.height / 2;
+
+  // this is a tiny detail to make the markerEnd of an edge visible.
+  // The handle position that gets calculated has the origin top-left, so depending which side we are using, we add a little offset
+  // when the handlePosition is Position.Right for example, we need to add an offset as big as the handle itself in order to get the correct position
+  switch (handlePosition) {
+    case Position.Left:
+      offsetX = 0;
+      break;
+    case Position.Right:
+      offsetX = handle.width;
+      break;
+    case Position.Top:
+      offsetY = 0;
+      break;
+    case Position.Bottom:
+      offsetY = handle.height;
+      break;
   }
 
-  return Position.Top;
+  const x = node.positionAbsolute.x + handle.x + offsetX;
+  const y = node.positionAbsolute.y + handle.y + offsetY;
+
+  return [x, y];
 }
 
-// returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
-export function getEdgeParams(source: Node, target: Node) {
-  const sourceIntersectionPoint = getNodeIntersection(source, target);
-  const targetIntersectionPoint = getNodeIntersection(target, source);
+function getNodeCenter(node) {
+  return {
+    x: node.positionAbsolute.x + node.width / 2,
+    y: node.positionAbsolute.y + node.height / 2,
+  };
+}
 
-  const sourcePos = getEdgePosition(source, sourceIntersectionPoint);
-  const targetPos = getEdgePosition(target, targetIntersectionPoint);
+// returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
+export function getEdgeParams(source, target) {
+  const [sx, sy, sourcePos] = getParams(source, target);
+  const [tx, ty, targetPos] = getParams(target, source);
 
   return {
-    sx: sourceIntersectionPoint.x,
-    sy: sourceIntersectionPoint.y,
-    tx: targetIntersectionPoint.x,
-    ty: targetIntersectionPoint.y,
+    sx,
+    sy,
+    tx,
+    ty,
     sourcePos,
     targetPos,
   };