refactor: NodeRenderer (#51)

* refactor: NodeRenderer

* fix getNodesInside partially param

* add `skipInvisible` prop

* refactor(noderenderer): rename skipInvisble to onlyRenderVisibleNodes

closes #40

dist/container/GraphView/index.d.ts

@@ -20,6 +20,7 @@ export interface GraphViewProps {
     backgroundType: GridType;
     snapToGrid: boolean;
     snapGrid: [number, number];
+    onlyRenderVisibleNodes: boolean;
 }
-declare const GraphView: React.MemoExoticComponent<({ nodeTypes, edgeTypes, onMove, onLoad, onElementClick, onNodeDragStop, connectionLineType, connectionLineStyle, selectionKeyCode, onElementsRemove, deleteKeyCode, elements, showBackground, backgroundGap, backgroundColor, backgroundType, onConnect, snapToGrid, snapGrid, }: GraphViewProps) => JSX.Element>;
+declare const GraphView: React.MemoExoticComponent<({ nodeTypes, edgeTypes, onMove, onLoad, onElementClick, onNodeDragStop, connectionLineType, connectionLineStyle, selectionKeyCode, onElementsRemove, deleteKeyCode, elements, showBackground, backgroundGap, backgroundColor, backgroundType, onConnect, snapToGrid, snapGrid, onlyRenderVisibleNodes }: GraphViewProps) => JSX.Element>;
 export default GraphView;

dist/container/NodeRenderer/index.d.ts

@@ -4,6 +4,7 @@ interface NodeRendererProps {
     nodeTypes: NodeTypesType;
     onElementClick: () => void;
     onNodeDragStop: () => void;
+    onlyRenderVisibleNodes?: boolean;
 }
-declare const NodeRenderer: React.MemoExoticComponent<(props: NodeRendererProps) => JSX.Element>;
+declare const NodeRenderer: React.MemoExoticComponent<({ onlyRenderVisibleNodes, ...props }: NodeRendererProps) => JSX.Element>;
 export default NodeRenderer;

dist/container/ReactFlow/index.d.ts

@@ -20,10 +20,11 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
     backgroundColor: string;
     backgroundType: GridType;
     snapToGrid: boolean;
-    snapGrid: [16, 16];
+    snapGrid: [number, number];
+    onlyRenderVisibleNodes: boolean;
 }
 declare const ReactFlow: {
-    ({ style, onElementClick, elements, children, nodeTypes, edgeTypes, onLoad, onMove, onElementsRemove, onConnect, onNodeDragStop, connectionLineType, connectionLineStyle, deleteKeyCode, selectionKeyCode, showBackground, backgroundGap, backgroundType, backgroundColor, snapToGrid, snapGrid, }: ReactFlowProps): JSX.Element;
+    ({ style, onElementClick, elements, children, nodeTypes, edgeTypes, onLoad, onMove, onElementsRemove, onConnect, onNodeDragStop, connectionLineType, connectionLineStyle, deleteKeyCode, selectionKeyCode, showBackground, backgroundGap, backgroundType, backgroundColor, snapToGrid, snapGrid, onlyRenderVisibleNodes }: ReactFlowProps): JSX.Element;
     displayName: string;
     defaultProps: {
         onElementClick: () => void;
@@ -52,6 +53,7 @@ declare const ReactFlow: {
         backgroundType: GridType;
         snapToGrid: boolean;
         snapGrid: number[];
+        onlyRenderVisibleNodes: boolean;
     };
 };
 export default ReactFlow;

dist/types/index.d.ts

@@ -2,7 +2,12 @@ import { CSSProperties, SVGAttributes } from 'react';
 export declare type ElementId = string;
 export declare type Elements = Array<Node | Edge>;
 export declare type Transform = [number, number, number];
-export declare type Position = 'left' | 'top' | 'right' | 'bottom';
+export declare enum Position {
+    Left = "left",
+    Top = "top",
+    Right = "right",
+    Bottom = "bottom"
+}
 export declare type XYPosition = {
     x: number;
     y: number;

dist/utils/graph.d.ts

@@ -7,7 +7,7 @@ export declare const addEdge: (edgeParams: Edge, elements: (Node | Edge)[]) => (
 export declare const parseElement: (element: Node | Edge, transform: [number, number, number], snapToGrid: boolean, snapGrid: [number, number]) => Node | Edge;
 export declare const getBoundsofRects: (rect1: Rect, rect2: Rect) => Rect;
 export declare const getRectOfNodes: (nodes: Node[]) => Rect;
-export declare const graphPosToZoomedPos: (pos: XYPosition, transform: [number, number, number]) => XYPosition;
+export declare const graphPosToZoomedPos: ({ x, y }: XYPosition, [tx, ty, tScale]: [number, number, number]) => XYPosition;
 export declare const getNodesInside: (nodes: Node[], rect: Rect, [tx, ty, tScale]?: [number, number, number], partially?: boolean) => Node[];
 export declare const getConnectedEdges: (nodes: Node[], edges: Edge[]) => Edge[];
 export declare const fitView: ({ padding }?: FitViewParams) => void;