fix: zoom pan helper

src/additional-components/Background/Background.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { HTMLAttributes } from 'vue'
-import { BackgroundVariant, RevueFlowStore } from '~/types'
+import { BackgroundVariant } from '~/types'
+import { Store } from '~/context'
 
 export interface BackgroundProps extends HTMLAttributes {
   variant?: BackgroundVariant
@@ -20,14 +21,23 @@ const defaultColors: Record<BackgroundVariant, string> = {
   [BackgroundVariant.Lines]: '#eee',
 }
 
-const store = inject<RevueFlowStore>('store')!
+const store = inject(Store)!
 // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
 
 const bgClasses = ['revue-flow__background']
-const scaledGap = computed(() => props.gap && props.gap * store.transform[2])
-const xOffset = computed(() => scaledGap.value && store.transform[0] % scaledGap.value)
-const yOffset = computed(() => scaledGap.value && store.transform[1] % scaledGap.value)
-const size = computed(() => props.size || 0.4 * store.transform[2])
+const background = computed(() => {
+  const scaledGap = props.gap && props.gap * store.transform[2]
+  const xOffset = scaledGap && store.transform[0] % scaledGap
+  const yOffset = scaledGap && store.transform[1] % scaledGap
+  const size = props.size || 0.4 * store.transform[2]
+
+  return {
+    scaledGap,
+    xOffset,
+    yOffset,
+    size,
+  }
+})
 
 const isLines = props.variant === BackgroundVariant.Lines
 const bgColor = props.color ? props.color : defaultColors[props.variant || BackgroundVariant.Dots]
@@ -41,16 +51,23 @@ const patternId = `pattern-${Math.floor(Math.random() * 100000)}`
       height: '100%',
     }"
   >
-    <pattern :id="patternId" :x="xOffset" :y="yOffset" :width="scaledGap" :height="scaledGap" patternUnits="userSpaceOnUse">
+    <pattern
+      :id="patternId"
+      :x="background.xOffset"
+      :y="background.yOffset"
+      :width="background.scaledGap"
+      :height="background.scaledGap"
+      patternUnits="userSpaceOnUse"
+    >
       <template v-if="isLines">
         <path
           :stroke="bgColor"
           :stroke-width="props.size"
-          :d="`M${scaledGap / 2} 0 V${scaledGap} M0 ${scaledGap / 2} H${scaledGap}`"
+          :d="`M${background.scaledGap / 2} 0 V${background.scaledGap} M0 ${background.scaledGap / 2} H${background.scaledGap}`"
         />
       </template>
       <template v-else>
-        <circle :cx="size" :cy="size" :r="size" :fill="bgColor" />
+        <circle :cx="background.size" :cy="background.size" :r="background.size" :fill="bgColor" />
       </template>
     </pattern>
     <rect x="0" y="0" width="100%" height="100%" :fill="`url(#${patternId})`" />