From 129d543c4ed13396edec387ebeaa62a0217a932b Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 13 Nov 2024 15:49:22 +0100
Subject: [PATCH] fix(background): set default offset to `0` (#1692)

* fix(background): correct offset

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/kind-eels-develop.md        |  5 +++++
 examples/vite/index.css                |  1 -
 packages/background/src/Background.vue | 12 +++++-------
 3 files changed, 10 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/kind-eels-develop.md

diff --git a/.changeset/kind-eels-develop.md b/.changeset/kind-eels-develop.md
new file mode 100644
index 00000000..08072ce1
--- /dev/null
+++ b/.changeset/kind-eels-develop.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/background": patch
+---
+
+Set default offset value to `0`
diff --git a/examples/vite/index.css b/examples/vite/index.css
index 69e2a619..1c22f076 100644
--- a/examples/vite/index.css
+++ b/examples/vite/index.css
@@ -9,7 +9,6 @@
 
 body {
   color: #111;
-  padding: 5px;
 }
 
 #root {
diff --git a/packages/background/src/Background.vue b/packages/background/src/Background.vue
index dce1a78b..ab7d0ca0 100644
--- a/packages/background/src/Background.vue
+++ b/packages/background/src/Background.vue
@@ -18,21 +18,19 @@ const {
   bgColor,
   patternColor: initialPatternColor,
   color: _patternColor,
-  offset = 2,
+  offset = 0,
 } = defineProps<BackgroundProps>()
 
 const { id: vueFlowId, viewport } = useVueFlow()
 
 const background = computed(() => {
+  const zoom = viewport.value.zoom
   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 scaledGap: [number, number] = [gapX * zoom || 1, gapY * zoom || 1]
+  const scaledSize = size * zoom
   const [offsetX, offsetY]: [number, number] = Array.isArray(offset) ? offset : [offset, offset]
 
-  const scaledOffset: [number, number] = [
-    offsetX * viewport.value.zoom || 1 + scaledGap[0] / 2,
-    offsetY * viewport.value.zoom || 1 + scaledGap[1] / 2,
-  ]
+  const scaledOffset: [number, number] = [offsetX * zoom || 1 + scaledGap[0] / 2, offsetY * zoom || 1 + scaledGap[1] / 2]
 
   return {
     scaledGap,