refactor: NodeRenderer (#51)

* refactor: NodeRenderer

* fix getNodesInside partially param

* add `skipInvisible` prop

* refactor(noderenderer): rename skipInvisble to onlyRenderVisibleNodes

closes #40

src/container/GraphView/index.tsx

@@ -40,6 +40,7 @@ export interface GraphViewProps {
   backgroundType: GridType;
   snapToGrid: boolean;
   snapGrid: [number, number];
+  onlyRenderVisibleNodes: boolean
 }
 
 const GraphView = memo(
@@ -63,6 +64,7 @@ const GraphView = memo(
     onConnect,
     snapToGrid,
     snapGrid,
+    onlyRenderVisibleNodes
   }: GraphViewProps) => {
     const zoomPane = useRef<HTMLDivElement>(null);
     const rendererNode = useRef<HTMLDivElement>(null);
@@ -136,6 +138,7 @@ const GraphView = memo(
           nodeTypes={nodeTypes}
           onElementClick={onElementClick}
           onNodeDragStop={onNodeDragStop}
+          onlyRenderVisibleNodes={onlyRenderVisibleNodes}
         />
         <EdgeRenderer
           width={state.width}

src/container/NodeRenderer/index.tsx

@@ -1,45 +1,24 @@
 import React, { memo, ComponentType } from 'react';
 
 import { useStoreState } from '../../store/hooks';
-import { isNode } from '../../utils/graph';
-import {
-  Node,
-  Transform,
-  NodeTypesType,
-  NodeComponentProps,
-} from '../../types';
+import { getNodesInside } from '../../utils/graph';
+import { Node, Transform, NodeTypesType, NodeComponentProps, Elements } from '../../types';
 
 interface NodeRendererProps {
   nodeTypes: NodeTypesType;
   onElementClick: () => void;
   onNodeDragStop: () => void;
+  onlyRenderVisibleNodes?: boolean;
 }
 
-interface NodeRendererState {
-  nodes: Node[];
-  transform: Transform;
-  selectedElements: any;
-}
-
-function renderNode(
-  node: Node,
-  props: NodeRendererProps,
-  state: NodeRendererState
-) {
+function renderNode(node: Node, props: NodeRendererProps, transform: Transform, selectedElements: Elements) {
   const nodeType = node.type || 'default';
-
+  const NodeComponent = (props.nodeTypes[nodeType] || props.nodeTypes.default) as ComponentType<NodeComponentProps>;
   if (!props.nodeTypes[nodeType]) {
-    console.warn(
-      `No node type found for type "${nodeType}". Using fallback type "default".`
-    );
+    console.warn(`No node type found for type "${nodeType}". Using fallback type "default".`);
   }
 
-  const NodeComponent = (props.nodeTypes[nodeType] ||
-    props.nodeTypes.default) as ComponentType<NodeComponentProps>;
-  const selected = state.selectedElements
-    .filter(isNode)
-    .map((e: Node) => e.id)
-    .includes(node.id);
+  const isSelected = selectedElements.some(({ id }) => id === node.id);
 
   return (
     <NodeComponent
@@ -51,28 +30,26 @@ function renderNode(
       yPos={node.__rg.position.y}
       onClick={props.onElementClick}
       onNodeDragStop={props.onNodeDragStop}
-      transform={state.transform}
-      selected={selected}
+      transform={transform}
+      selected={isSelected}
       style={node.style}
     />
   );
 }
 
-const NodeRenderer = memo((props: NodeRendererProps) => {
-  const state: NodeRendererState = useStoreState(s => ({
-    nodes: s.nodes,
-    transform: s.transform,
-    selectedElements: s.selectedElements,
-  }));
+const NodeRenderer = memo(({ onlyRenderVisibleNodes = true, ...props }: NodeRendererProps) => {
+  const { nodes, transform, selectedElements, width, height } = useStoreState(s => s);
 
-  const { transform, nodes } = state;
+  const [tx, ty, tScale] = transform;
   const transformStyle = {
-    transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`,
+    transform: `translate(${tx}px,${ty}px) scale(${tScale})`,
   };
 
+  const renderNodes = onlyRenderVisibleNodes ? getNodesInside(nodes, { x: 0, y: 0, width, height }, transform, true) : nodes;
+
   return (
     <div className="react-flow__nodes" style={transformStyle}>
-      {nodes.map(node => renderNode(node, props, state))}
+      {renderNodes.map(node => renderNode(node, props, transform, selectedElements))}
     </div>
   );
 });

src/container/ReactFlow/index.tsx

@@ -48,7 +48,8 @@ export interface ReactFlowProps
   backgroundColor: string;
   backgroundType: GridType;
   snapToGrid: boolean;
-  snapGrid: [16, 16];
+  snapGrid: [number, number];
+  onlyRenderVisibleNodes: boolean
 }
 
 const ReactFlow = ({
@@ -73,6 +74,7 @@ const ReactFlow = ({
   backgroundColor,
   snapToGrid,
   snapGrid,
+  onlyRenderVisibleNodes
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -100,6 +102,7 @@ const ReactFlow = ({
           backgroundType={backgroundType}
           snapToGrid={snapToGrid}
           snapGrid={snapGrid}
+          onlyRenderVisibleNodes={onlyRenderVisibleNodes}
         />
         {children}
       </StoreProvider>
@@ -136,6 +139,7 @@ ReactFlow.defaultProps = {
   backgroundType: GridType.Dots,
   snapToGrid: false,
   snapGrid: [16, 16],
+  onlyRenderVisibleNodes: true
 };
 
 export default ReactFlow;

src/utils/graph.ts

@@ -157,10 +157,10 @@ export const getNodesInside = (
     const overlappingArea =
       (Math.max(rBox.x, nBox.x) - Math.min(rBox.x2, nBox.x2)) * (Math.max(rBox.y, nBox.y) - Math.min(rBox.y2, nBox.y2));
     if (partially) {
-      return overlappingArea > 0;
+      return overlappingArea >= 0;
     }
     const area = width * height;
-    return overlappingArea === area;
+    return overlappingArea >= area;
   });
 };