refactor(background): allow multiple types #10

examples/advanced/scripts/ExampleGraph.js

@@ -147,8 +147,8 @@ class App extends PureComponent {
         }}
         connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
         connectionLineType="bezier"
-        gridColor="#aaa"
-        gridGap={16}
+        backgroundColor="#aaa"
+        backgroundGap={16}
       >
         <MiniMap
           style={{ position: 'absolute', right: 10, bottom: 10 }}

examples/basic/scripts/ExampleGraph.js

@@ -64,7 +64,6 @@ class App extends PureComponent {
         onConnect={this.onConnect}
         onNodeDragStop={onNodeDragStop}
         style={{ width: '100%', height: '100%' }}
-        showGrid={false}
       />
     );
   }

src/container/BackgroundRenderer/Grid.js

@@ -1,4 +1,5 @@
 import React, { memo } from 'react';
+import PropTypes from 'prop-types';
 import { useStoreState } from 'easy-peasy';
 import classnames from 'classnames';
 
@@ -8,8 +9,8 @@ const baseStyles = {
   left: 0
 };
 
-const GridRenderer = memo(({
-  gap = 24, strokeColor = '#999', strokeWidth = 0.1, style,
+const Grid = memo(({
+  gap, strokeColor, strokeWidth, style,
   className
 }) => {
   const {
@@ -49,6 +50,22 @@ const GridRenderer = memo(({
   );
 });
 
-GridRenderer.displayName = 'GridRenderer';
+Grid.displayName = 'Grid';
 
-export default GridRenderer;
+Grid.propTypes = {
+  gap: PropTypes.number,
+  strokeColor: PropTypes.string,
+  strokeWidth: PropTypes.number,
+  style: PropTypes.object,
+  className: PropTypes.string
+};
+
+Grid.defaultProps = {
+  gap: 24,
+  strokeColor: '#999',
+  strokeWidth:0.1,
+  style: {},
+  className: null
+};
+
+export default Grid;

src/container/BackgroundRenderer/index.js

@@ -0,0 +1,27 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+
+import Grid from './Grid';
+
+const bgComponents = {
+  grid: Grid
+};
+
+const BackgroundRenderer = memo(({
+  backgroundType, ...rest
+}) => {
+  const BackgroundComponent = bgComponents[backgroundType];
+  return <BackgroundComponent {...rest} />
+});
+
+BackgroundRenderer.displayName = 'BackgroundRenderer';
+
+BackgroundRenderer.propTypes = {
+  backgroundType: PropTypes.oneOf(['grid'])
+};
+
+BackgroundRenderer.defaultProps = {
+  backgroundType: 'grid'
+};
+
+export default BackgroundRenderer;

src/container/GraphView/index.js

@@ -3,7 +3,7 @@ import { useStoreState, useStoreActions } from 'easy-peasy';
 
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
-import GridRenderer from '../GridRenderer';
+import BackgroundRenderer from '../BackgroundRenderer';
 import UserSelection from '../../components/UserSelection';
 import NodesSelection from '../../components/NodesSelection';
 import useKeyPress from '../../hooks/useKeyPress';
@@ -17,7 +17,8 @@ const GraphView = memo(({
   nodeTypes, edgeTypes, onMove, onLoad,
   onElementClick, onNodeDragStop, connectionLineType, connectionLineStyle,
   selectionKeyCode, onElementsRemove, deleteKeyCode, elements,
-  onConnect, gridColor, showGrid, gridGap
+  showBackground, backgroundGap, backgroundColor, backgroundType,
+  onConnect
 }) => {
   const zoomPane = useRef();
   const rendererNode = useRef();
@@ -68,7 +69,13 @@ const GraphView = memo(({
 
   return (
     <div className="react-flow__renderer" ref={rendererNode}>
-      {showGrid && <GridRenderer gap={gridGap} strokeColor={gridColor} />}
+      {showBackground && (
+        <BackgroundRenderer
+          gap={backgroundGap}
+          strokeColor={backgroundColor}
+          backgroundType={backgroundType}
+        />
+      )}
       <NodeRenderer
         nodeTypes={nodeTypes}
         onElementClick={onElementClick}

src/container/ReactFlow/index.js

@@ -26,8 +26,8 @@ const ReactFlow = ({
   style, onElementClick, elements, children,
   nodeTypes, edgeTypes, onLoad, onMove,
   onElementsRemove, onConnect, onNodeDragStop, connectionLineType,
-  connectionLineStyle, deleteKeyCode, selectionKeyCode, gridColor,
-  showGrid, gridGap
+  connectionLineStyle, deleteKeyCode, selectionKeyCode,
+  showBackground, backgroundGap, backgroundType, backgroundColor
 }) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
   const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), []);
@@ -49,9 +49,10 @@ const ReactFlow = ({
           deleteKeyCode={deleteKeyCode}
           elements={elements}
           onConnect={onConnect}
-          gridColor={gridColor}
-          gridGap={gridGap}
-          showGrid={showGrid}
+          backgroundColor={backgroundColor}
+          backgroundGap={backgroundGap}
+          showBackground={showBackground}
+          backgroundType={backgroundType}
         />
         {children}
       </StoreProvider>
@@ -76,7 +77,8 @@ ReactFlow.propTypes = {
   selectionKeyCode: PropTypes.number,
   gridColor: PropTypes.string,
   gridGap: PropTypes.number,
-  showGrid: PropTypes.bool
+  showBackground: PropTypes.bool,
+  backgroundType: PropTypes.oneOf(['grid'])
 };
 
 ReactFlow.defaultProps = {
@@ -100,9 +102,10 @@ ReactFlow.defaultProps = {
   connectionLineStyle: {},
   deleteKeyCode: 8,
   selectionKeyCode: 16,
-  gridColor: '#999',
-  gridGap: 24,
-  showGrid: true
+  backgroundColor: '#999',
+  backgroundGap: 24,
+  showBackground: true,
+  backgroundType: 'grid'
 };
 
 export default ReactFlow;