refactor(props): cleanup

src/container/EdgeRenderer/index.tsx

@@ -216,7 +216,7 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
   const width = useStoreState((state) => state.width);
   const height = useStoreState((state) => state.height);
 
-  const { connectionLineStyle, connectionLineType, arrowHeadColor, connectionLineComponent } = props;
+  const { connectionLineType, arrowHeadColor, connectionLineStyle, connectionLineComponent } = props;
 
   if (!width) {
     return null;

src/container/GraphView/index.tsx

@@ -60,8 +60,8 @@ export interface GraphViewProps {
   connectionLineStyle?: CSSProperties;
   connectionLineComponent?: ConnectionLineComponent;
   deleteKeyCode: number;
-  snapToGrid?: boolean;
-  snapGrid?: [number, number];
+  snapToGrid: boolean;
+  snapGrid: [number, number];
   onlyRenderVisibleNodes: boolean;
   nodesDraggable?: boolean;
   nodesConnectable?: boolean;
@@ -69,8 +69,8 @@ export interface GraphViewProps {
   selectNodesOnDrag?: boolean;
   minZoom?: number;
   maxZoom?: number;
-  defaultZoom?: number;
-  defaultPosition?: [number, number];
+  defaultZoom: number;
+  defaultPosition: [number, number];
   translateExtent?: TranslateExtent;
   arrowHeadColor: string;
   markerEndId?: string;

src/container/NodeRenderer/index.tsx

@@ -14,9 +14,9 @@ interface NodeRendererProps {
   onNodeContextMenu?: (event: MouseEvent, node: Node) => void;
   onNodeDragStart?: (event: MouseEvent, node: Node) => void;
   onNodeDragStop?: (event: MouseEvent, node: Node) => void;
-  onlyRenderVisibleNodes?: boolean;
-  snapToGrid?: boolean;
-  snapGrid?: [number, number];
+  onlyRenderVisibleNodes: boolean;
+  snapToGrid: boolean;
+  snapGrid: [number, number];
 }
 
 function renderNode(
@@ -75,7 +75,7 @@ function renderNode(
   );
 }
 
-const NodeRenderer = ({ onlyRenderVisibleNodes = true, ...props }: NodeRendererProps) => {
+const NodeRenderer = (props: NodeRendererProps) => {
   const nodes = useStoreState((s) => s.nodes);
   const transform = useStoreState((s) => s.transform);
   const selectedElements = useStoreState((s) => s.selectedElements);
@@ -88,7 +88,7 @@ const NodeRenderer = ({ onlyRenderVisibleNodes = true, ...props }: NodeRendererP
     transform: `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})`,
   };
 
-  const renderNodes = onlyRenderVisibleNodes ? getNodesInside(nodes, viewportBox, transform, true) : nodes;
+  const renderNodes = props.onlyRenderVisibleNodes ? getNodesInside(nodes, viewportBox, transform, true) : nodes;
 
   return (
     <div className="react-flow__nodes" style={transformStyle}>

src/container/ReactFlow/index.tsx

@@ -97,18 +97,16 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   translateExtent?: TranslateExtent;
   arrowHeadColor?: string;
   markerEndId?: string;
-  zoomOnScroll: boolean;
+  zoomOnScroll?: boolean;
   zoomOnDoubleClick?: boolean;
 }
 
 const ReactFlow = ({
-  style,
-  onElementClick,
   elements = [],
   className,
-  children,
   nodeTypes = defaultNodeTypes,
   edgeTypes = defaultEdgeTypes,
+  onElementClick,
   onLoad,
   onMove,
   onMoveStart,
@@ -134,13 +132,13 @@ const ReactFlow = ({
   connectionLineComponent,
   deleteKeyCode = 8,
   selectionKeyCode = 16,
-  snapToGrid,
-  snapGrid,
+  snapToGrid = false,
+  snapGrid = [15, 15],
   onlyRenderVisibleNodes = true,
+  selectNodesOnDrag = true,
   nodesDraggable,
   nodesConnectable,
   elementsSelectable,
-  selectNodesOnDrag = true,
   minZoom,
   maxZoom,
   defaultZoom = 1,
@@ -154,13 +152,15 @@ const ReactFlow = ({
   onPaneClick,
   onPaneScroll,
   onPaneContextMenu,
+  children,
+  ...rest
 }: ReactFlowProps) => {
-  const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), [nodeTypes]);
-  const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), [edgeTypes]);
+  const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
+  const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
   const reactFlowClasses = cc(['react-flow', className]);
 
   return (
-    <div style={style} className={reactFlowClasses}>
+    <div {...rest} className={reactFlowClasses}>
       <Wrapper>
         <GraphView
           onLoad={onLoad}

src/store/index.ts

@@ -426,7 +426,8 @@ export const storeModel: StoreModel = {
   }),
 
   setSnapGrid: action((state, snapGrid) => {
-    state.snapGrid = snapGrid;
+    state.snapGrid[0] = snapGrid[0];
+    state.snapGrid[1] = snapGrid[1];
   }),
 
   setInteractive: action((state, isInteractive) => {