refactor(background): allow multiple types #10

src/container/BackgroundRenderer/Grid.js

@@ -0,0 +1,71 @@
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { useStoreState } from 'easy-peasy';
+import classnames from 'classnames';
+
+const baseStyles = {
+  position: 'absolute',
+  top: 0,
+  left: 0
+};
+
+const Grid = memo(({
+  gap, strokeColor, strokeWidth, style,
+  className
+}) => {
+  const {
+    width,
+    height,
+    transform: [x, y, scale],
+  } = useStoreState(s => s);
+
+  const gridClasses = classnames('react-flow__grid', className);
+  const scaledGap = gap * scale;
+
+  const xStart = x % scaledGap;
+  const yStart = y % scaledGap;
+
+  const lineCountX = Math.ceil(width / scaledGap) + 1;
+  const lineCountY = Math.ceil(height / scaledGap) + 1;
+
+  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
+      width={width}
+      height={height}
+      style={{ ...baseStyles, ...style }}
+      className={gridClasses}
+    >
+      <path
+        fill="none"
+        stroke={strokeColor}
+        strokeWidth={strokeWidth}
+        d={path}
+      />
+    </svg>
+  );
+});
+
+Grid.displayName = 'Grid';
+
+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;