refactor(elements): only render visible handling

src/container/EdgeRenderer/index.tsx

@@ -4,17 +4,8 @@ import { useStoreState } from '../../store/hooks';
 import ConnectionLine from '../../components/ConnectionLine/index';
 import { isEdge } from '../../utils/graph';
 import MarkerDefinitions from './MarkerDefinitions';
-import { getHandlePosition, getHandle, isEdgeVisible } from './utils';
-import {
-  Position,
-  Edge,
-  Node,
-  HandleElement,
-  Elements,
-  ConnectionLineType,
-  ConnectionLineComponent,
-  Transform,
-} from '../../types';
+import { getEdgePositions, getHandle, isEdgeVisible, getSourceTargetNode } from './utils';
+import { Position, Edge, Node, Elements, ConnectionLineType, ConnectionLineComponent, Transform } from '../../types';
 
 interface EdgeRendererProps {
   edgeTypes: any;
@@ -24,46 +15,9 @@ interface EdgeRendererProps {
   arrowHeadColor: string;
   markerEndId?: string;
   connectionLineComponent?: ConnectionLineComponent;
+  onlyRenderVisibleElements: boolean;
 }
 
-interface EdgePositions {
-  sourceX: number;
-  sourceY: number;
-  targetX: number;
-  targetY: number;
-}
-
-function 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,
-  };
-}
-
-type SourceTargetNode = {
-  sourceNode: Node | null;
-  targetNode: Node | null;
-};
-
-const initialSourceTarget: SourceTargetNode = { sourceNode: null, targetNode: null };
-
 function renderEdge(
   edge: Edge,
   props: EdgeRendererProps,
@@ -72,18 +26,12 @@ function renderEdge(
   elementsSelectable: boolean,
   transform: Transform,
   width: number,
-  height: number
+  height: number,
+  onlyRenderVisibleElements: boolean
 ) {
   const sourceHandleId = edge.sourceHandle || null;
   const targetHandleId = edge.targetHandle || null;
-  const { sourceNode, targetNode } = nodes.reduce((res, node) => {
-    if (node.id === edge.source) {
-      res.sourceNode = node;
-    } else if (node.id === edge.target) {
-      res.targetNode = node;
-    }
-    return res;
-  }, initialSourceTarget);
+  const { sourceNode, targetNode } = getSourceTargetNode(edge, nodes);
 
   if (!sourceNode) {
     console.warn(`couldn't create edge for source id: ${edge.source}`);
@@ -99,15 +47,17 @@ function renderEdge(
     return null;
   }
 
-  const renderEdge = isEdgeVisible({
-    sourcePos: sourceNode.__rf.position,
-    targetPos: targetNode.__rf.position,
-    width,
-    height,
-    transform,
-  });
+  const isVisible = onlyRenderVisibleElements
+    ? isEdgeVisible({
+        sourcePos: sourceNode.__rf.position,
+        targetPos: targetNode.__rf.position,
+        width,
+        height,
+        transform,
+      })
+    : true;
 
-  if (!renderEdge) {
+  if (!isVisible) {
     return null;
   }
 
@@ -192,7 +142,13 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
     return null;
   }
 
-  const { connectionLineType, arrowHeadColor, connectionLineStyle, connectionLineComponent } = props;
+  const {
+    connectionLineType,
+    arrowHeadColor,
+    connectionLineStyle,
+    connectionLineComponent,
+    onlyRenderVisibleElements,
+  } = props;
   const transformStyle = `translate(${transform[0]},${transform[1]}) scale(${transform[2]})`;
   const renderConnectionLine = connectionNodeId && connectionHandleType;
 
@@ -201,7 +157,17 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
       <MarkerDefinitions color={arrowHeadColor} />
       <g transform={transformStyle}>
         {edges.map((edge: Edge) =>
-          renderEdge(edge, props, nodes, selectedElements, elementsSelectable, transform, width, height)
+          renderEdge(
+            edge,
+            props,
+            nodes,
+            selectedElements,
+            elementsSelectable,
+            transform,
+            width,
+            height,
+            onlyRenderVisibleElements
+          )
         )}
         {renderConnectionLine && (
           <ConnectionLine

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
+  );
+};