feat(editor): add gridSize and showGrid params

xyflow · Oct 7, 2019 · e146a63 · e146a63
1 parent 2eda813
commit e146a63
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 9 deletions.
diff --git a/dist/ReactGraph.js b/dist/ReactGraph.js
@@ -9169,7 +9169,9 @@
         deleteKeyCode = _ref.deleteKeyCode,
         elements = _ref.elements,
         onConnect = _ref.onConnect,
-        gridColor = _ref.gridColor;
+        gridColor = _ref.gridColor,
+        showGrid = _ref.showGrid,
+        gridGap = _ref.gridGap;
     var zoomPane = React.useRef();
     var rendererNode = React.useRef();
     var state = useStoreState(function (s) {
@@ -9232,7 +9234,8 @@
     return React__default.createElement("div", {
       className: "react-flow__renderer",
       ref: rendererNode
-    }, React__default.createElement(GridRenderer, {
+    }, showGrid && React__default.createElement(GridRenderer, {
+      gap: gridGap,
       strokeColor: gridColor
     }), React__default.createElement(NodeRenderer, {
       nodeTypes: nodeTypes,
@@ -9929,7 +9932,9 @@
         connectionLineStyle = _ref.connectionLineStyle,
         deleteKeyCode = _ref.deleteKeyCode,
         selectionKeyCode = _ref.selectionKeyCode,
-        gridColor = _ref.gridColor;
+        gridColor = _ref.gridColor,
+        showGrid = _ref.showGrid,
+        gridGap = _ref.gridGap;
     var nodeTypesParsed = React.useMemo(function () {
       return createNodeTypes(nodeTypes);
     }, []);
@@ -9955,7 +9960,9 @@
       deleteKeyCode: deleteKeyCode,
       elements: elements,
       onConnect: onConnect,
-      gridColor: gridColor
+      gridColor: gridColor,
+      gridGap: gridGap,
+      showGrid: showGrid
     }), children));
   };
 
@@ -9981,7 +9988,9 @@
     connectionLineStyle: {},
     deleteKeyCode: 8,
     selectionKeyCode: 16,
-    gridColor: '#999'
+    gridColor: '#999',
+    gridGap: 24,
+    showGrid: true
   };
 
   var baseStyle = {

diff --git a/examples/advanced/scripts/ExampleGraph.js b/examples/advanced/scripts/ExampleGraph.js
@@ -146,6 +146,7 @@ class App extends PureComponent {
         connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
         connectionLineType="bezier"
         gridColor="#aaa"
+        gridGap={16}
       >
         <MiniMap
           style={{ position: 'absolute', right: 10, bottom: 10 }}

diff --git a/examples/basic/scripts/ExampleGraph.js b/examples/basic/scripts/ExampleGraph.js
@@ -61,6 +61,7 @@ class App extends PureComponent {
         onConnect={this.onConnect}
         onNodeDragStop={onNodeDragStop}
         style={{ width: '100%', height: '100%' }}
+        showGrid={false}
       />
     );
   }

diff --git a/src/container/GraphView/index.js b/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}

diff --git a/src/container/ReactFlow/index.js b/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;