From dedf0046b559461223b94f733f9b1e68b99fc37d Mon Sep 17 00:00:00 2001
From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com>
Date: Tue, 21 Mar 2023 02:40:38 +0300
Subject: [PATCH 1/4] add id and offset to background props

---
 packages/background/src/Background.tsx | 16 +++++++++-------
 packages/background/src/types.ts       |  2 ++
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/background/src/Background.tsx b/packages/background/src/Background.tsx
index bf8a4336..e0efd77b 100644
--- a/packages/background/src/Background.tsx
+++ b/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]
-    : [patternDimensions[0] / 2, patternDimensions[1] / 2];
+    ? [scaledSize / offset, scaledSize / offset]
+    : [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>
   );
 }
diff --git a/packages/background/src/types.ts b/packages/background/src/types.ts
index 6f9a7155..f4cae1b5 100644
--- a/packages/background/src/types.ts
+++ b/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;

From a863e5b94d991850c7bcf0ecb919ca00fc3acdd8 Mon Sep 17 00:00:00 2001
From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com>
Date: Tue, 21 Mar 2023 02:40:47 +0300
Subject: [PATCH 2/4] add multiple backs sample

---
 examples/vite-app/src/examples/Backgrounds/index.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/examples/vite-app/src/examples/Backgrounds/index.tsx b/examples/vite-app/src/examples/Backgrounds/index.tsx
index c7783b00..8d6b7280 100644
--- a/examples/vite-app/src/examples/Backgrounds/index.tsx
+++ b/examples/vite-app/src/examples/Backgrounds/index.tsx
@@ -19,13 +19,13 @@ 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 +33,11 @@ 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-b" bgProps={{ variant: BackgroundVariant.Lines, gap: [50, 50] }} />
-    <Flow id="flow-c" bgProps={{ variant: BackgroundVariant.Cross, gap: [100, 50] }} />
+    <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] }]} />
+    <Flow id="flow-d" bgProps={[{ variant: BackgroundVariant.Lines, gap: 10 },
+                                { variant: BackgroundVariant.Lines, gap: 100, offset: 1, color: "#ccc" }]} />
   </div>
 );
 

From 25b25f7d5129b7856c956b84de9dc32b42e444ed Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 21 Mar 2023 11:44:39 +0100
Subject: [PATCH 3/4] chore(examples): format

---
 .../vite-app/src/examples/Backgrounds/index.tsx     | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/examples/vite-app/src/examples/Backgrounds/index.tsx b/examples/vite-app/src/examples/Backgrounds/index.tsx
index 8d6b7280..0cbabf0a 100644
--- a/examples/vite-app/src/examples/Backgrounds/index.tsx
+++ b/examples/vite-app/src/examples/Backgrounds/index.tsx
@@ -25,7 +25,9 @@ const Flow: FC<{ id: string; bgProps: BackgroundProps[] }> = ({ id, bgProps }) =
   return (
     <ReactFlowProvider>
       <ReactFlow nodes={nodes} onNodesChange={onNodesChange} id={id}>
-        {bgProps.map((props, idx) => <Background key={idx} id={idx.toString()} {...props} />)}
+        {bgProps.map((props, idx) => (
+          <Background key={idx} id={idx.toString()} {...props} />
+        ))}
       </ReactFlow>
     </ReactFlowProvider>
   );
@@ -36,8 +38,13 @@ const Backgrounds: FC = () => (
     <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] }]} />
-    <Flow id="flow-d" bgProps={[{ variant: BackgroundVariant.Lines, gap: 10 },
-                                { variant: BackgroundVariant.Lines, gap: 100, offset: 1, color: "#ccc" }]} />
+    <Flow
+      id="flow-d"
+      bgProps={[
+        { variant: BackgroundVariant.Lines, gap: 10 },
+        { variant: BackgroundVariant.Lines, gap: 100, offset: 2, color: '#ccc' },
+      ]}
+    />
   </div>
 );
 

From 771c7a5d133ce96e9f7471394c15189e0657ce01 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 21 Mar 2023 11:45:17 +0100
Subject: [PATCH 4/4] chore(changeset): add

---
 .changeset/two-walls-jam.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/two-walls-jam.md

diff --git a/.changeset/two-walls-jam.md b/.changeset/two-walls-jam.md
new file mode 100644
index 00000000..9c2eb07a
--- /dev/null
+++ b/.changeset/two-walls-jam.md
@@ -0,0 +1,5 @@
+---
+'@reactflow/background': patch
+---
+
+add id and offset prop