From 900850d3ae0dd8957745a6e8b265dda7337f8487 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 1 Nov 2024 13:36:31 +0100
Subject: [PATCH] fix(background): start patterns at 0,0 (#1666)

* fix(background): start patterns at 0,0

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

* chore(changeset): add

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>

---------

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .changeset/real-radios-learn.md        |  5 +++++
 packages/background/src/Background.vue | 15 +++++++--------
 packages/background/src/types.ts       |  2 +-
 3 files changed, 13 insertions(+), 9 deletions(-)
 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 00000000..a73777dd
--- /dev/null
+++ b/.changeset/real-radios-learn.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/background": patch
+---
+
+Start patterns at 0,0
diff --git a/packages/background/src/Background.vue b/packages/background/src/Background.vue
index 7dd2375a..dce1a78b 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 01f93dcd..637d396a 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]
 }