refactor(floating-edges-example): comments and cleanup

example/src/FloatingEdges/utils.ts

@@ -1,17 +1,23 @@
-import { Position, ArrowHeadType, Node } from 'react-flow-renderer';
+import { Position, ArrowHeadType, Node, XYPosition } from 'react-flow-renderer';
 
-function getNodeIntersection(source: Node, target: Node) {
+// 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): XYPosition {
   // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
-  const { width: sourceWidth, height: sourceHeight, position: sourcePosition } = source.__rf;
-  const targetPosition = target.__rf.position;
+  const {
+    width: intersectionNodeWidth,
+    height: intersectionNodeHeight,
+    position: intersectionNodePosition,
+  } = intersectionNode.__rf;
+  const targetPosition = targetNode.__rf.position;
 
-  const w = sourceWidth / 2;
-  const h = sourceHeight / 2;
+  const w = intersectionNodeWidth / 2;
+  const h = intersectionNodeHeight / 2;
 
-  const x2 = sourcePosition.x + w;
-  const y2 = sourcePosition.y + h;
-  const x1 = targetPosition.x;
-  const y1 = targetPosition.y;
+  const x2 = intersectionNodePosition.x + w;
+  const y2 = intersectionNodePosition.y + h;
+  const x1 = targetPosition.x + w;
+  const y1 = targetPosition.y + h;
 
   const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
   const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
@@ -21,15 +27,16 @@ function getNodeIntersection(source: Node, target: Node) {
   const x = w * (xx3 + yy3) + x2;
   const y = h * (-xx3 + yy3) + y2;
 
-  return [x, y];
+  return { x, y };
 }
 
-function getEdgePosition(node: Node, x: number, y: number) {
+// returns the position (top,right,bottom or right) passed node compared to the intersection point
+function getEdgePosition(node: Node, intersectionPoint: XYPosition) {
   const n = { ...node.__rf.position, ...node.__rf };
   const nx = Math.round(n.x);
   const ny = Math.round(n.y);
-  const px = Math.round(x);
-  const py = Math.round(y);
+  const px = Math.round(intersectionPoint.x);
+  const py = Math.round(intersectionPoint.y);
 
   if (px <= nx + 1) {
     return Position.Left;
@@ -47,19 +54,19 @@ function getEdgePosition(node: Node, x: number, y: number) {
   return Position.Top;
 }
 
-export function getArrow(source: any, target: any) {
-  const [sx, sy] = getNodeIntersection(source, target);
-  const [tx, ty] = getNodeIntersection(target, source);
+// 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);
 
-  const sourcePos = getEdgePosition(source, sx, sy);
-  const targetPos = getEdgePosition(target, tx, ty);
+  const sourcePos = getEdgePosition(source, sourceIntersectionPoint);
+  const targetPos = getEdgePosition(target, targetIntersectionPoint);
 
   return {
-    sx,
-    sy,
-    tx,
-    ty,
-    label: null,
+    sx: sourceIntersectionPoint.x,
+    sy: sourceIntersectionPoint.y,
+    tx: targetIntersectionPoint.x,
+    ty: targetIntersectionPoint.y,
     sourcePos,
     targetPos,
   };
@@ -69,7 +76,7 @@ export function createElements() {
   const elements = [];
   const center = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
 
-  elements.push({ id: 'source', data: { label: 'Source', isTarget: false }, position: center });
+  elements.push({ id: 'target', data: { label: 'Target' }, position: center });
 
   for (let i = 0; i < 8; i++) {
     const degrees = i * (360 / 8);
@@ -77,17 +84,15 @@ export function createElements() {
     const x = 250 * Math.cos(radians) + center.x;
     const y = 250 * Math.sin(radians) + center.y;
 
-    elements.push({ id: `${i}`, data: { label: 'Target', isTarget: true }, position: { x, y } });
+    elements.push({ id: `${i}`, data: { label: 'Source' }, position: { x, y } });
 
-    if (i % 2 === 0) {
-      elements.push({
-        id: `source-${i}`,
-        source: 'source',
-        target: `${i}`,
-        type: 'floating',
-        arrowHeadType: ArrowHeadType.Arrow,
-      });
-    }
+    elements.push({
+      id: `edge-${i}`,
+      target: 'target',
+      source: `${i}`,
+      type: 'floating',
+      arrowHeadType: ArrowHeadType.Arrow,
+    });
   }
 
   return elements;