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

vikadata · Oct 14, 2021 · ceb9620 · ceb9620
1 parent ab2391f
commit ceb9620
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 56 deletions.
diff --git a/example/src/FloatingEdges/FloatingConnectionLine.tsx b/example/src/FloatingEdges/FloatingConnectionLine.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
-import { getBezierPath, ConnectionLineComponentProps } from 'react-flow-renderer';
+import { getBezierPath, ConnectionLineComponentProps, Node } from 'react-flow-renderer';
 
-import { getArrow } from './utils';
+import { getEdgeParams } from './utils';
 
 const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({
   targetX,
@@ -14,8 +14,12 @@ const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({
     return null;
   }
 
-  const targetNode = { __rf: { width: 1, height: 1, position: { x: targetX, y: targetY } } };
-  const { sx, sy } = getArrow(sourceNode, targetNode);
+  const targetNode = {
+    id: 'connection-target',
+    __rf: { width: 1, height: 1, position: { x: targetX, y: targetY } },
+  } as Node;
+
+  const { sx, sy } = getEdgeParams(sourceNode, targetNode);
   const d = getBezierPath({
     sourceX: sx,
     sourceY: sy,

diff --git a/example/src/FloatingEdges/FloatingEdge.tsx b/example/src/FloatingEdges/FloatingEdge.tsx
@@ -1,7 +1,7 @@
 import { FC, useMemo, CSSProperties } from 'react';
 import { EdgeProps, getMarkerEnd, useStoreState, getBezierPath } from 'react-flow-renderer';
 
-import { getArrow } from './utils';
+import { getEdgeParams } from './utils';
 
 const FloatingEdge: FC<EdgeProps> = ({ id, source, target, arrowHeadType, markerEndId, style }) => {
   const nodes = useStoreState((state) => state.nodes);
@@ -14,7 +14,7 @@ const FloatingEdge: FC<EdgeProps> = ({ id, source, target, arrowHeadType, marker
     return null;
   }
 
-  const { sx, sy, tx, ty, sourcePos, targetPos } = getArrow(sourceNode, targetNode);
+  const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
 
   const d = getBezierPath({
     sourceX: sx,

diff --git a/example/src/FloatingEdges/index.tsx b/example/src/FloatingEdges/index.tsx
@@ -3,8 +3,6 @@ import React, { useState } from 'react';
 import ReactFlow, {
   removeElements,
   addEdge,
-  MiniMap,
-  Controls,
   Background,
   OnLoadParams,
   EdgeTypesType,
@@ -14,6 +12,8 @@ import ReactFlow, {
   ArrowHeadType,
 } from 'react-flow-renderer';
 
+import './style.css';
+
 import FloatingEdge from './FloatingEdge';
 import FloatingConnectionLine from './FloatingConnectionLine';
 import { createElements } from './utils';
@@ -30,22 +30,23 @@ const NodeAsHandleFlow = () => {
   const [elements, setElements] = useState<Elements>(initialElements);
 
   const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
+
   const onConnect = (params: Connection | Edge) =>
     setElements((els) => addEdge({ ...params, type: 'floating', arrowHeadType: ArrowHeadType.Arrow }, els));
 
   return (
-    <ReactFlow
-      elements={elements}
-      onElementsRemove={onElementsRemove}
-      onConnect={onConnect}
-      onLoad={onLoad}
-      edgeTypes={edgeTypes}
-      connectionLineComponent={FloatingConnectionLine}
-    >
-      <MiniMap />
-      <Controls />
-      <Background />
-    </ReactFlow>
+    <div className="floatingedges">
+      <ReactFlow
+        elements={elements}
+        onElementsRemove={onElementsRemove}
+        onConnect={onConnect}
+        onLoad={onLoad}
+        edgeTypes={edgeTypes}
+        connectionLineComponent={FloatingConnectionLine}
+      >
+        <Background />
+      </ReactFlow>
+    </div>
   );
 };
 

diff --git a/example/src/FloatingEdges/style.css b/example/src/FloatingEdges/style.css
@@ -0,0 +1,9 @@
+.floatingedges {
+  flex-direction: column;
+  display: flex;
+  height: 100%;
+}
+
+.floatingedges .react-flow__handle {
+  opacity: 0;
+}
diff --git a/example/src/FloatingEdges/utils.ts b/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,25 +76,23 @@ 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);
     const radians = degrees * (Math.PI / 180);
     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 } });
-
-    if (i % 2 === 0) {
-      elements.push({
-        id: `source-${i}`,
-        source: 'source',
-        target: `${i}`,
-        type: 'floating',
-        arrowHeadType: ArrowHeadType.Arrow,
-      });
-    }
+    elements.push({ id: `${i}`, data: { label: 'Source' }, position: { x, y } });
+
+    elements.push({
+      id: `edge-${i}`,
+      target: 'target',
+      source: `${i}`,
+      type: 'floating',
+      arrowHeadType: ArrowHeadType.Arrow,
+    });
   }
 
   return elements;