feat(background): add cross variant closes #2320

examples/nextjs/pages/Backgrounds/index.tsx

@@ -0,0 +1,53 @@
+import React, { FC } from 'react';
+
+import ReactFlow, {
+  Node,
+  ReactFlowProvider,
+  useNodesState,
+} from '@react-flow/core';
+
+import Background, {
+  BackgroundProps,
+  BackgroundVariant,
+} from '@react-flow/background';
+
+import styles from './style.module.css';
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    data: { label: 'Node 1' },
+    position: { x: 50, y: 50 },
+  },
+];
+
+const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({
+  id,
+  bgProps,
+}) => {
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+
+  return (
+    <ReactFlowProvider>
+      <ReactFlow nodes={nodes} onNodesChange={onNodesChange} id={id}>
+        <Background {...bgProps} />
+      </ReactFlow>
+    </ReactFlowProvider>
+  );
+};
+
+const Backgrounds: FC = () => (
+  <div className={styles.wrapper}>
+    <Flow id="flow-a" bgProps={{ variant: BackgroundVariant.Dots }} />
+    <Flow
+      id="flow-b"
+      bgProps={{ variant: BackgroundVariant.Lines, gap: [50, 50] }}
+    />
+    <Flow
+      id="flow-c"
+      bgProps={{ variant: BackgroundVariant.Cross, gap: [100, 50] }}
+    />
+  </div>
+);
+
+export default Backgrounds;

examples/nextjs/pages/Backgrounds/style.module.css

@@ -0,0 +1,13 @@
+.wrapper {
+  display: flex;
+  height: 100%;
+}
+
+.wrapper :global .react-flow {
+  width: 100%;
+  height: 100%;
+}
+
+.wrapper :global .react-flow {
+  border-right: 1px solid #ddd;
+}

examples/nextjs/pages/_app.tsx

@@ -4,6 +4,7 @@ import '../styles/globals.css';
 
 const routes = [
   '/',
+  '/Backgrounds',
   '/ControlledUncontrolled',
   '/CustomConnectionLine',
   '/CustomNode',
@@ -47,7 +48,7 @@ function MyApp({ Component, pageProps }) {
   return (
     <>
       <header>
-        <a className='logo' href='https://github.com/wbkd/react-flow'>
+        <a className="logo" href="https://github.com/wbkd/react-flow">
           React Flow Dev
         </a>
         <select defaultValue={router.pathname} onChange={onRouteChange}>

examples/nextjs/pages/index.tsx

@@ -86,7 +86,7 @@ const BasicFlow = () => {
       onNodeClick={onNodeClick}
       onNodeDragStop={onNodeDragStop}
       onNodeDrag={onNodeDrag}
-      className='react-flow-basic-example'
+      className="react-flow-basic-example"
       minZoom={0.2}
       maxZoom={4}
       fitView

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} />;
 };