Merge pull request #2943 from wbkd/feat/multiple-backgrounds

Feat/multiple backgrounds

.changeset/two-walls-jam.md

@@ -0,0 +1,5 @@
+---
+'@reactflow/background': patch
+---
+
+add id and offset prop

examples/vite-app/src/examples/Backgrounds/index.tsx

@@ -19,13 +19,15 @@ const initialNodes: Node[] = [
   },
 ];
 
-const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({ id, bgProps }) => {
+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} />
+        {bgProps.map((props, idx) => (
+          <Background key={idx} id={idx.toString()} {...props} />
+        ))}
       </ReactFlow>
     </ReactFlowProvider>
   );
@@ -33,9 +35,16 @@ const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({ id, bgProps }) =>
 
 const Backgrounds: FC = () => (
   <div className={styles.wrapper}>
-    <Flow id="flow-a" bgProps={{ variant: BackgroundVariant.Dots }} />
+    <Flow id="flow-a" bgProps={[{ variant: BackgroundVariant.Dots }]} />
-    <Flow id="flow-b" bgProps={{ variant: BackgroundVariant.Lines, gap: [50, 50] }} />
+    <Flow id="flow-b" bgProps={[{ variant: BackgroundVariant.Lines, gap: [50, 50] }]} />
-    <Flow id="flow-c" bgProps={{ variant: BackgroundVariant.Cross, gap: [100, 50] }} />
+    <Flow id="flow-c" bgProps={[{ variant: BackgroundVariant.Cross, gap: [100, 50] }]} />
+    <Flow
+      id="flow-d"
+      bgProps={[
+        { variant: BackgroundVariant.Lines, gap: 10 },
+        { variant: BackgroundVariant.Lines, gap: 100, offset: 2, color: '#ccc' },
+      ]}
+    />
   </div>
 );
 

packages/background/src/Background.tsx

@@ -21,12 +21,14 @@ const defaultSize = {
 const selector = (s: ReactFlowState) => ({ transform: s.transform, patternId: `pattern-${s.rfId}` });
 
 function Background({
+  id,
   variant = BackgroundVariant.Dots,
-  gap = 20,
   // only used for dots and cross
-  size,
+  gap = 20,
   // only used for lines and cross
+  size,
   lineWidth = 1,
+  offset = 2,
   color,
   style,
   className,
@@ -44,8 +46,8 @@ function Background({
   const patternDimensions: [number, number] = isCross ? [scaledSize, scaledSize] : scaledGap;
 
   const patternOffset = isDots
-    ? [scaledSize / 2, scaledSize / 2]
+    ? [scaledSize / offset, scaledSize / offset]
-    : [patternDimensions[0] / 2, patternDimensions[1] / 2];
+    : [patternDimensions[0] / offset, patternDimensions[1] / offset];
 
   return (
     <svg
@@ -62,7 +64,7 @@ function Background({
       data-testid="rf__background"
     >
       <pattern
-        id={patternId}
+        id={patternId+id}
         x={transform[0] % scaledGap[0]}
         y={transform[1] % scaledGap[1]}
         width={scaledGap[0]}
@@ -71,12 +73,12 @@ function Background({
         patternTransform={`translate(-${patternOffset[0]},-${patternOffset[1]})`}
       >
         {isDots ? (
-          <DotPattern color={patternColor} radius={scaledSize / 2} />
+          <DotPattern color={patternColor} radius={scaledSize / offset} />
         ) : (
           <LinePattern dimensions={patternDimensions} color={patternColor} lineWidth={lineWidth} />
         )}
       </pattern>
-      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
+      <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId+id})`} />
     </svg>
   );
 }

packages/background/src/types.ts

@@ -7,10 +7,12 @@ export enum BackgroundVariant {
 }
 
 export type BackgroundProps = {
+  id?: string
   color?: string;
   className?: string;
   gap?: number | [number, number];
   size?: number;
+  offset?: number;
   lineWidth?: number;
   variant?: BackgroundVariant;
   style?: CSSProperties;