From ad8aa1355613ecbdbc94ecca9a06b9c9fae40999 Mon Sep 17 00:00:00 2001
From: Jeffrey Gordon <jbgordon00@gmail.com>
Date: Mon, 22 Jul 2024 22:49:09 -0400
Subject: [PATCH 1/3] Control background pattern translation with offset

---
 .../additional-components/Background/Background.tsx  | 12 +++++-------
 .../src/additional-components/Background/types.ts    |  2 +-
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/additional-components/Background/Background.tsx b/packages/react/src/additional-components/Background/Background.tsx
index 738ed699..5a921077 100644
--- a/packages/react/src/additional-components/Background/Background.tsx
+++ b/packages/react/src/additional-components/Background/Background.tsx
@@ -24,7 +24,7 @@ function BackgroundComponent({
   // only used for lines and cross
   size,
   lineWidth = 1,
-  offset = 2,
+  offset = 0,
   color,
   bgColor,
   style,
@@ -39,13 +39,11 @@ function BackgroundComponent({
   const gapXY: [number, number] = Array.isArray(gap) ? gap : [gap, gap];
   const scaledGap: [number, number] = [gapXY[0] * transform[2] || 1, gapXY[1] * transform[2] || 1];
   const scaledSize = patternSize * transform[2];
+  const offsetXY: [number, number] = Array.isArray(offset) ? offset : [offset, offset];
+  const scaledOffset: [number, number] = [offsetXY[0] * transform[2] || 1, offsetXY[1] * transform[2] || 1]
 
   const patternDimensions: [number, number] = isCross ? [scaledSize, scaledSize] : scaledGap;
 
-  const patternOffset = isDots
-    ? [scaledSize / offset, scaledSize / offset]
-    : [patternDimensions[0] / offset, patternDimensions[1] / offset];
-
   const _patternId = `${patternId}${id ? id : ''}`;
 
   return (
@@ -69,10 +67,10 @@ function BackgroundComponent({
         width={scaledGap[0]}
         height={scaledGap[1]}
         patternUnits="userSpaceOnUse"
-        patternTransform={`translate(-${patternOffset[0]},-${patternOffset[1]})`}
+        patternTransform={`translate(-${scaledOffset[0]},-${scaledOffset[1]})`}
       >
         {isDots ? (
-          <DotPattern radius={scaledSize / offset} className={patternClassName} />
+          <DotPattern radius={scaledSize} className={patternClassName} />
         ) : (
           <LinePattern
             dimensions={patternDimensions}
diff --git a/packages/react/src/additional-components/Background/types.ts b/packages/react/src/additional-components/Background/types.ts
index 409bbe31..0a035aae 100644
--- a/packages/react/src/additional-components/Background/types.ts
+++ b/packages/react/src/additional-components/Background/types.ts
@@ -21,7 +21,7 @@ export type BackgroundProps = {
   /** Size of a single pattern element */
   size?: number;
   /** Offset of the pattern */
-  offset?: number;
+  offset?: number | [number, number];
   /** Line width of the Line pattern */
   lineWidth?: number;
   /** Variant of the pattern

From 78739a0674bb5b6f83944e4d51d847b944efc2e3 Mon Sep 17 00:00:00 2001
From: Jeffrey Gordon <51277885+jeffgord@users.noreply.github.com>
Date: Tue, 30 Jul 2024 12:37:31 -0400
Subject: [PATCH 2/3] Scale dots by 0.5 to match size using old offset

---
 .../react/src/additional-components/Background/Background.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/additional-components/Background/Background.tsx b/packages/react/src/additional-components/Background/Background.tsx
index 5a921077..fe6bee04 100644
--- a/packages/react/src/additional-components/Background/Background.tsx
+++ b/packages/react/src/additional-components/Background/Background.tsx
@@ -70,7 +70,7 @@ function BackgroundComponent({
         patternTransform={`translate(-${scaledOffset[0]},-${scaledOffset[1]})`}
       >
         {isDots ? (
-          <DotPattern radius={scaledSize} className={patternClassName} />
+          <DotPattern radius={scaledSize / 2} className={patternClassName} />
         ) : (
           <LinePattern
             dimensions={patternDimensions}

From ec64b57240f0c61912d4910b095210f57d8df8ce Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 31 Jul 2024 15:42:16 +0200
Subject: [PATCH 3/3] chore(changeset): add

---
 .changeset/cyan-houses-shout.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/cyan-houses-shout.md

diff --git a/.changeset/cyan-houses-shout.md b/.changeset/cyan-houses-shout.md
new file mode 100644
index 00000000..83cd87fe
--- /dev/null
+++ b/.changeset/cyan-houses-shout.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/react': patch
+---
+
+fix(background): use offset prop correctly for dots variant