refactor(hooks): add useVisibleNodes and useVisibleEdges

src/container/EdgeRenderer/index.tsx

@@ -4,7 +4,7 @@ import shallow from 'zustand/shallow';
 import { useStore } from '../../store';
 import ConnectionLine from '../../components/ConnectionLine/index';
 import MarkerDefinitions from './MarkerDefinitions';
-import { getEdgePositions, getHandle, getSourceTargetNodes, isEdgeVisible } from './utils';
+import { getEdgePositions, getHandle, getSourceTargetNodes } from './utils';
 import {
   Position,
   Edge,
@@ -16,6 +16,7 @@ import {
   ReactFlowState,
   NodeHandleBounds,
 } from '../../types';
+import useVisibleEdges from '../../hooks/useVisibleEdges';
 
 interface EdgeRendererProps {
   edgeTypes: any;
@@ -234,38 +235,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
     nodes,
   } = useStore(selector, shallow);
 
-  const edges = useStore(
+  const edges = useVisibleEdges(props.onlyRenderVisibleElements);
-    useCallback(
-      (s: ReactFlowState) => {
-        if (!props.onlyRenderVisibleElements) {
-          return s.edges;
-        }
-
-        return s.edges.filter((e) => {
-          const { sourceNode, targetNode } = getSourceTargetNodes(e, s.nodes);
-
-          return (
-            sourceNode?.width &&
-            sourceNode?.height &&
-            targetNode?.width &&
-            targetNode?.height &&
-            isEdgeVisible({
-              sourcePos: sourceNode.position,
-              targetPos: targetNode.position,
-              sourceWidth: sourceNode.width,
-              sourceHeight: sourceNode.height,
-              targetWidth: targetNode.width,
-              targetHeight: targetNode.height,
-              width: s.width,
-              height: s.height,
-              transform: s.transform,
-            })
-          );
-        });
-      },
-      [props.onlyRenderVisibleElements]
-    )
-  );
 
   if (!width) {
     return null;

src/container/NodeRenderer/index.tsx

@@ -1,9 +1,10 @@
-import React, { memo, useMemo, ComponentType, MouseEvent, useCallback, Fragment } from 'react';
+import React, { memo, useMemo, ComponentType, MouseEvent, Fragment } from 'react';
 import shallow from 'zustand/shallow';
 
 import { useStore } from '../../store';
 import { Node, NodeTypesType, ReactFlowState, WrapNodeProps, SnapGrid } from '../../types';
-import { getNodesInside, getRectOfNodes } from '../../utils/graph';
+import { getRectOfNodes } from '../../utils/graph';
+import useVisibleNodes from '../../hooks/useVisibleNodes';
 interface NodeRendererProps {
   nodeTypes: NodeTypesType;
   selectNodesOnDrag: boolean;
@@ -156,17 +157,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
     snapGrid,
     snapToGrid,
   } = useStore(selector, shallow);
-
+  const nodes = useVisibleNodes(props.onlyRenderVisibleElements);
-  const nodes = useStore(
-    useCallback(
-      (s: ReactFlowState) => {
-        return props.onlyRenderVisibleElements
-          ? getNodesInside(s.nodes, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
-          : s.nodes;
-      },
-      [props.onlyRenderVisibleElements]
-    )
-  );
 
   const transformStyle = useMemo(
     () => ({

src/hooks/useVisibleEdges.ts

@@ -0,0 +1,44 @@
+import { useCallback } from 'react';
+
+import { useStore } from '../store';
+import { isEdgeVisible, getSourceTargetNodes } from '../container/EdgeRenderer/utils';
+import { ReactFlowState } from '../types';
+
+function useVisibleEdges(onlyRenderVisible: boolean) {
+  const edges = useStore(
+    useCallback(
+      (s: ReactFlowState) => {
+        if (!onlyRenderVisible) {
+          return s.edges;
+        }
+
+        return s.edges.filter((e) => {
+          const { sourceNode, targetNode } = getSourceTargetNodes(e, s.nodes);
+
+          return (
+            sourceNode?.width &&
+            sourceNode?.height &&
+            targetNode?.width &&
+            targetNode?.height &&
+            isEdgeVisible({
+              sourcePos: sourceNode.position,
+              targetPos: targetNode.position,
+              sourceWidth: sourceNode.width,
+              sourceHeight: sourceNode.height,
+              targetWidth: targetNode.width,
+              targetHeight: targetNode.height,
+              width: s.width,
+              height: s.height,
+              transform: s.transform,
+            })
+          );
+        });
+      },
+      [onlyRenderVisible]
+    )
+  );
+
+  return edges;
+}
+
+export default useVisibleEdges;

src/hooks/useVisibleNodes.ts

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+
+import { useStore } from '../store';
+import { getNodesInside } from '../utils/graph';
+import { ReactFlowState } from '../types';
+
+function useVisibleNodes(onlyRenderVisible: boolean) {
+  const nodes = useStore(
+    useCallback(
+      (s: ReactFlowState) => {
+        return onlyRenderVisible
+          ? getNodesInside(s.nodes, { x: 0, y: 0, width: s.width, height: s.height }, s.transform, true)
+          : s.nodes;
+      },
+      [onlyRenderVisible]
+    )
+  );
+
+  return nodes;
+}
+
+export default useVisibleNodes;