feat(background): add cross variant closes #2320

packages/background/src/Background.tsx

@@ -6,16 +6,26 @@ import { BackgroundProps, BackgroundVariant } from './types';
 import { createGridLinesPath, createGridDotsPath } from './utils';
 
 const defaultColors = {
-  [BackgroundVariant.Dots]: '#81818a',
+  [BackgroundVariant.Dots]: '#91919a',
   [BackgroundVariant.Lines]: '#eee',
+  [BackgroundVariant.Cross]: '#e2e2e2',
+};
+
+const defaultSize = {
+  [BackgroundVariant.Dots]: 1,
+  [BackgroundVariant.Lines]: 1,
+  [BackgroundVariant.Cross]: 6,
 };
 
 const transformSelector = (s: ReactFlowState) => s.transform;
 
 const Background: FC<BackgroundProps> = ({
   variant = BackgroundVariant.Dots,
-  gap = 15,
-  size = 0.4,
+  gap = 25,
+  // only used for dots and cross
+  size,
+  // only used for lines and cross
+  lineWidth = 1,
   color,
   style,
   className,
@@ -31,15 +41,28 @@ const Background: FC<BackgroundProps> = ({
     setPatternId(`pattern-${index}`);
   }, []);
 
-  const scaledGap = gap * tScale || 1;
-  const xOffset = tX % scaledGap;
-  const yOffset = tY % scaledGap;
+  const patternColor = color ? color : defaultColors[variant];
+  const patternSize = size ? size : defaultSize[variant];
+  const isDots = variant === BackgroundVariant.Dots;
+  const isCross = variant === BackgroundVariant.Cross;
+  const gapXY: [number, number] = Array.isArray(gap) ? gap : [gap, gap];
+  const scaledGap: [number, number] = [
+    gapXY[0] * tScale || 1,
+    gapXY[1] * tScale || 1,
+  ];
+  const scaledSize = patternSize * tScale;
 
-  const isLines = variant === BackgroundVariant.Lines;
-  const bgColor = color ? color : defaultColors[variant];
-  const path = isLines
-    ? createGridLinesPath(scaledGap, size, bgColor)
-    : createGridDotsPath(size * tScale, bgColor);
+  const patternDimensions: [number, number] = isCross
+    ? [scaledSize, scaledSize]
+    : scaledGap;
+
+  const path = isDots
+    ? createGridDotsPath(scaledSize / 2, patternColor)
+    : createGridLinesPath(patternDimensions, lineWidth, patternColor);
+
+  const patternOffset = isDots
+    ? [scaledSize / 2, scaledSize / 2]
+    : [patternDimensions[0] / 2, patternDimensions[1] / 2];
 
   return (
     <svg
@@ -59,19 +82,20 @@ const Background: FC<BackgroundProps> = ({
         <>
           <pattern
             id={patternId}
-            x={xOffset}
-            y={yOffset}
-            width={scaledGap}
-            height={scaledGap}
-            patternUnits='userSpaceOnUse'
+            x={tX % scaledGap[0]}
+            y={tY % scaledGap[1]}
+            width={scaledGap[0]}
+            height={scaledGap[1]}
+            patternUnits="userSpaceOnUse"
+            patternTransform={`translate(-${patternOffset[0]},-${patternOffset[1]})`}
           >
             {path}
           </pattern>
           <rect
-            x='0'
-            y='0'
-            width='100%'
-            height='100%'
+            x="0"
+            y="0"
+            width="100%"
+            height="100%"
             fill={`url(#${patternId})`}
           />
         </>

packages/background/src/types.ts

@@ -1,13 +1,17 @@
-import { HTMLAttributes } from 'react';
+import { CSSProperties } from 'react';
 
 export enum BackgroundVariant {
   Lines = 'lines',
   Dots = 'dots',
+  Cross = 'cross',
 }
 
-export interface BackgroundProps extends HTMLAttributes<SVGElement> {
-  variant?: BackgroundVariant;
-  gap?: number;
+export interface BackgroundProps {
   color?: string;
+  className?: string;
+  gap?: number | [number, number];
   size?: number;
+  lineWidth?: number;
+  variant?: BackgroundVariant;
+  style?: CSSProperties;
 }

packages/background/src/utils.tsx

@@ -1,9 +1,24 @@
 import React from 'react';
 
-export const createGridLinesPath = (size: number, strokeWidth: number, stroke: string): React.ReactElement => {
-  return <path stroke={stroke} strokeWidth={strokeWidth} d={`M${size / 2} 0 V${size} M0 ${size / 2} H${size}`} />;
+export const createGridLinesPath = (
+  dimensions: [number, number],
+  strokeWidth: number,
+  stroke: string
+): React.ReactElement => {
+  return (
+    <path
+      stroke={stroke}
+      strokeWidth={strokeWidth}
+      d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${
+        dimensions[0]
+      }`}
+    />
+  );
 };
 
-export const createGridDotsPath = (size: number, fill: string): React.ReactElement => {
+export const createGridDotsPath = (
+  size: number,
+  fill: string
+): React.ReactElement => {
   return <circle cx={size} cy={size} r={size} fill={fill} />;
 };