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

@@ -0,0 +1,5 @@
+---
+"@vue-flow/background": patch
+---
+
+Start patterns at 0,0

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 =
+  const scaledOffset: [number, number] = [
-    variant === BackgroundVariant.Dots
+    offsetX * viewport.value.zoom || 1 + scaledGap[0] / 2,
-      ? [scaledSize / offset, scaledSize / offset]
+    offsetY * viewport.value.zoom || 1 + scaledGap[1] / 2,
-      : [scaledGap[0] / offset, scaledGap[1] / offset]
+  ]
 
   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">

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]
 }