feat(editor): add gridSize and showGrid params

src/container/GraphView/index.js

@@ -17,7 +17,7 @@ const GraphView = memo(({
   nodeTypes, edgeTypes, onMove, onLoad,
   onElementClick, onNodeDragStop, connectionLineType, connectionLineStyle,
   selectionKeyCode, onElementsRemove, deleteKeyCode, elements,
-  onConnect, gridColor
+  onConnect, gridColor, showGrid, gridGap
 }) => {
   const zoomPane = useRef();
   const rendererNode = useRef();
@@ -68,7 +68,7 @@ const GraphView = memo(({
 
   return (
     <div className="react-flow__renderer" ref={rendererNode}>
-      <GridRenderer strokeColor={gridColor} />
+      {showGrid && <GridRenderer gap={gridGap} strokeColor={gridColor} />}
       <NodeRenderer
         nodeTypes={nodeTypes}
         onElementClick={onElementClick}

src/container/ReactFlow/index.js

@@ -25,7 +25,8 @@ const ReactFlow = ({
   style, onElementClick, elements, children,
   nodeTypes, edgeTypes, onLoad, onMove,
   onElementsRemove, onConnect, onNodeDragStop, connectionLineType,
-  connectionLineStyle, deleteKeyCode, selectionKeyCode, gridColor
+  connectionLineStyle, deleteKeyCode, selectionKeyCode, gridColor,
+  showGrid, gridGap
 }) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -48,6 +49,8 @@ const ReactFlow = ({
           elements={elements}
           onConnect={onConnect}
           gridColor={gridColor}
+          gridGap={gridGap}
+          showGrid={showGrid}
         />
         {children}
       </StoreProvider>
@@ -78,7 +81,9 @@ ReactFlow.defaultProps = {
   connectionLineStyle: {},
   deleteKeyCode: 8,
   selectionKeyCode: 16,
-  gridColor: '#999'
+  gridColor: '#999',
+  gridGap: 24,
+  showGrid: true
 };
 
 export default ReactFlow;