refactor(elements): only render visible handling

src/container/EdgeRenderer/utils.ts

@@ -4,7 +4,17 @@ import { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '../../compon
 import wrapEdge from '../../components/Edges/wrapEdge';
 import { rectToBox } from '../../utils/graph';
 
-import { EdgeTypesType, EdgeProps, Position, Node, XYPosition, ElementId, HandleElement, Transform } from '../../types';
+import {
+  EdgeTypesType,
+  EdgeProps,
+  Position,
+  Node,
+  XYPosition,
+  ElementId,
+  HandleElement,
+  Transform,
+  Edge,
+} from '../../types';
 
 export function createEdgeTypes(edgeTypes: EdgeTypesType): EdgeTypesType {
   const standardTypes: EdgeTypesType = {
@@ -81,6 +91,37 @@ export function getHandle(bounds: HandleElement[], handleId: ElementId | null):
   return handle;
 }
 
+interface EdgePositions {
+  sourceX: number;
+  sourceY: number;
+  targetX: number;
+  targetY: number;
+}
+
+export const getEdgePositions = (
+  sourceNode: Node,
+  sourceHandle: HandleElement | unknown,
+  sourcePosition: Position,
+  targetNode: Node,
+  targetHandle: HandleElement | unknown,
+  targetPosition: Position
+): EdgePositions => {
+  const sourceHandlePos = getHandlePosition(sourcePosition, sourceNode, sourceHandle);
+  const sourceX = sourceNode.__rf.position.x + sourceHandlePos.x;
+  const sourceY = sourceNode.__rf.position.y + sourceHandlePos.y;
+
+  const targetHandlePos = getHandlePosition(targetPosition, targetNode, targetHandle);
+  const targetX = targetNode.__rf.position.x + targetHandlePos.x;
+  const targetY = targetNode.__rf.position.y + targetHandlePos.y;
+
+  return {
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+  };
+};
+
 interface IsEdgeVisibleParams {
   sourcePos: XYPosition;
   targetPos: XYPosition;
@@ -118,3 +159,22 @@ export function isEdgeVisible({ sourcePos, targetPos, width, height, transform }
 
   return overlappingArea > 0;
 }
+
+type SourceTargetNode = {
+  sourceNode: Node | null;
+  targetNode: Node | null;
+};
+
+export const getSourceTargetNode = (edge: Edge, nodes: Node[]): SourceTargetNode => {
+  return nodes.reduce(
+    (res, node) => {
+      if (node.id === edge.source) {
+        res.sourceNode = node;
+      } else if (node.id === edge.target) {
+        res.targetNode = node;
+      }
+      return res;
+    },
+    { sourceNode: null, targetNode: null } as SourceTargetNode
+  );
+};