Merge pull request #19 from wbkd/feat/background-dots

feat: Background dots

examples/advanced/scripts/ExampleGraph.js

@@ -141,7 +141,7 @@ class App extends PureComponent {
         }}
         connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
         connectionLineType="bezier"
-        backgroundColor="#aaa"
+        backgroundColor="#888"
         backgroundGap={16}
       >
         <MiniMap

examples/basic/scripts/ExampleGraph.js

@@ -58,7 +58,7 @@ class App extends PureComponent {
         onConnect={params => this.onConnect(params)}
         onNodeDragStop={onNodeDragStop}
         style={{ width: '100%', height: '100%' }}
-        showBackground={false}
+        backgroundType="lines"
       />
     );
   }

src/container/BackgroundRenderer/Grid.js

@@ -1,18 +1,40 @@
-import React, { memo } from 'react';
+import React, {memo} from 'react';
 import PropTypes from 'prop-types';
-import { useStoreState } from 'easy-peasy';
+import {useStoreState} from 'easy-peasy';
 import classnames from 'classnames';
 
 const baseStyles = {
   position: 'absolute',
   top: 0,
-  left: 0
+  left: 0,
 };
 
-const Grid = memo(({
+const createGridLines = (width, height, xOffset, yOffset, gap) => {
-  gap, strokeColor, strokeWidth, style,
+  const lineCountX = Math.ceil(width / gap) + 1;
-  className
+  const lineCountY = Math.ceil(height / gap) + 1;
-}) => {
+
+  const xValues = Array.from({length: lineCountX}, (_, i) => `M${i * gap + xOffset} 0 V${height}`);
+  const yValues = Array.from({length: lineCountY}, (_, i) => `M0 ${i * gap + yOffset} H${width}`);
+
+  return [...xValues, ...yValues].join(' ');
+};
+
+const createGridDots = (width, height, xOffset, yOffset, gap, size) => {
+  const lineCountX = Math.ceil(width / gap) + 1;
+  const lineCountY = Math.ceil(height / gap) + 1;
+  
+  const values = Array.from({length: lineCountX}, (_, col) => {
+    const x = col * gap + xOffset;
+    return Array.from({length: lineCountY},(_,row)=>{
+      const y = row * gap + yOffset;
+      return `M${x} ${y-size} l${size} ${size} l${-size} ${size} l${-size} ${-size}z`
+    }).join(' ');
+  });
+
+  return values.join(' ');
+};
+
+const Grid = memo(({gap, color, size, style, className, gridStyle}) => {
   const {
     width,
     height,
@@ -22,30 +44,19 @@ const Grid = memo(({
   const gridClasses = classnames('react-flow__grid', className);
   const scaledGap = gap * scale;
 
-  const xStart = x % scaledGap;
+  const xOffset = x % scaledGap;
-  const yStart = y % scaledGap;
+  const yOffset = y % scaledGap;
+  const isLines = gridStyle === 'lines';
+  const path = isLines
+    ? createGridLines(width, height, xOffset, yOffset, scaledGap)
+    : createGridDots(width, height, xOffset, yOffset, scaledGap, size);
 
-  const lineCountX = Math.ceil(width / scaledGap) + 1;
+  const fill = isLines ? 'none' : color;
-  const lineCountY = Math.ceil(height / scaledGap) + 1;
+  const stroke = isLines ? color : 'none';
-
-  const xValues = Array.from({length: lineCountX}, (_, index) => `M${index * scaledGap + xStart} 0 V${height}`);
-  const yValues = Array.from({length: lineCountY}, (_, index) => `M0 ${index * scaledGap + yStart} H${width}`);
-
-  const path = [...xValues, ...yValues].join(' ');
 
   return (
-    <svg
+    <svg width={width} height={height} style={{...baseStyles, ...style}} className={gridClasses}>
-      width={width}
+      <path fill={fill} stroke={stroke} strokeWidth={size} d={path} />
-      height={height}
-      style={{ ...baseStyles, ...style }}
-      className={gridClasses}
-    >
-      <path
-        fill="none"
-        stroke={strokeColor}
-        strokeWidth={strokeWidth}
-        d={path}
-      />
     </svg>
   );
 });
@@ -54,18 +65,20 @@ Grid.displayName = 'Grid';
 
 Grid.propTypes = {
   gap: PropTypes.number,
-  strokeColor: PropTypes.string,
+  color: PropTypes.string,
-  strokeWidth: PropTypes.number,
+  size: PropTypes.number,
   style: PropTypes.object,
-  className: PropTypes.string
+  className: PropTypes.string,
+  gridStyle: PropTypes.oneOf(['lines', 'dots']),
 };
 
 Grid.defaultProps = {
   gap: 24,
-  strokeColor: '#999',
+  color: '#999',
-  strokeWidth:0.1,
+  size: .5,
   style: {},
-  className: null
+  className: null,
+  gridStyle: 'dots',
 };
 
 export default Grid;

src/container/BackgroundRenderer/index.js

@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
 import Grid from './Grid';
 
 const bgComponents = {
-  grid: Grid
+  lines: Grid,
+  dots: Grid
 };
 
 const BackgroundRenderer = memo(({
@@ -17,11 +18,11 @@ const BackgroundRenderer = memo(({
 BackgroundRenderer.displayName = 'BackgroundRenderer';
 
 BackgroundRenderer.propTypes = {
-  backgroundType: PropTypes.oneOf(['grid'])
+  backgroundType: PropTypes.oneOf(['lines', 'dots'])
 };
 
 BackgroundRenderer.defaultProps = {
-  backgroundType: 'grid'
+  backgroundType: 'dots'
 };
 
 export default BackgroundRenderer;

src/container/GraphView/index.js

@@ -72,7 +72,7 @@ const GraphView = memo(({
       {showBackground && (
         <BackgroundRenderer
           gap={backgroundGap}
-          strokeColor={backgroundColor}
+          color={backgroundColor}
           backgroundType={backgroundType}
         />
       )}

src/container/ReactFlow/index.js

@@ -76,7 +76,7 @@ ReactFlow.propTypes = {
   gridColor: PropTypes.string,
   gridGap: PropTypes.number,
   showBackground: PropTypes.bool,
-  backgroundType: PropTypes.oneOf(['grid'])
+  backgroundType: PropTypes.oneOf(['lines', 'dots'])
 };
 
 ReactFlow.defaultProps = {
@@ -103,7 +103,7 @@ ReactFlow.defaultProps = {
   backgroundColor: '#999',
   backgroundGap: 24,
   showBackground: true,
-  backgroundType: 'grid'
+  backgroundType: 'dots'
 };
 
 export default ReactFlow;