From f62f1d0ed6eb65e50aff0c14429ea3bdb685ecf2 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 1 Nov 2024 12:59:33 +0100
Subject: [PATCH 1/2] fix(background): start patterns at 0,0

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/background/src/Background.vue | 15 +++++++--------
 packages/background/src/types.ts       |  2 +-
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/background/src/Background.vue b/packages/background/src/Background.vue
index 7dd2375a8..dce1a78b4 100644
--- a/packages/background/src/Background.vue
+++ b/packages/background/src/Background.vue
@@ -25,19 +25,18 @@ const { id: vueFlowId, viewport } = useVueFlow()
 
 const background = computed(() => {
   const [gapX, gapY] = Array.isArray(gap) ? gap : [gap, gap]
-
   const scaledGap: [number, number] = [gapX * viewport.value.zoom || 1, gapY * viewport.value.zoom || 1]
-
   const scaledSize = size * viewport.value.zoom
+  const [offsetX, offsetY]: [number, number] = Array.isArray(offset) ? offset : [offset, offset]
 
-  const patternOffset =
-    variant === BackgroundVariant.Dots
-      ? [scaledSize / offset, scaledSize / offset]
-      : [scaledGap[0] / offset, scaledGap[1] / offset]
+  const scaledOffset: [number, number] = [
+    offsetX * viewport.value.zoom || 1 + scaledGap[0] / 2,
+    offsetY * viewport.value.zoom || 1 + scaledGap[1] / 2,
+  ]
 
   return {
     scaledGap,
-    offset: patternOffset,
+    offset: scaledOffset,
     size: scaledSize,
   }
 })
@@ -79,7 +78,7 @@ export default {
           </template>
 
           <template v-else-if="variant === BackgroundVariant.Dots">
-            <DotPattern :color="patternColor" :radius="background.size / offset" />
+            <DotPattern :color="patternColor" :radius="background.size / 2" />
           </template>
 
           <svg v-if="bgColor" height="100" width="100">
diff --git a/packages/background/src/types.ts b/packages/background/src/types.ts
index 01f93dcd2..637d396ab 100644
--- a/packages/background/src/types.ts
+++ b/packages/background/src/types.ts
@@ -38,5 +38,5 @@ export interface BackgroundProps {
   /** Background y-coordinate (offset y) */
   y?: number
   /** Background offset */
-  offset?: number
+  offset?: number | [number, number]
 }

From f79717ce400f4cadc433d545cf86b8f5199b386b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 1 Nov 2024 13:25:50 +0100
Subject: [PATCH 2/2] chore(changeset): add

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .changeset/real-radios-learn.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/real-radios-learn.md

diff --git a/.changeset/real-radios-learn.md b/.changeset/real-radios-learn.md
new file mode 100644
index 000000000..a73777dd3
--- /dev/null
+++ b/.changeset/real-radios-learn.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/background": patch
+---
+
+Start patterns at 0,0