From 3a0d0a9f8f0a38472fd7763b0c28022f9ef61557 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 13 Nov 2022 08:25:49 +0100
Subject: [PATCH] refactor(additional-components): use vue flow id for bg
 pattern id

---
 .../additional-components/src/background/Background.vue   | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/additional-components/src/background/Background.vue b/packages/additional-components/src/background/Background.vue
index 3f28b315..8a04ff20 100644
--- a/packages/additional-components/src/background/Background.vue
+++ b/packages/additional-components/src/background/Background.vue
@@ -20,7 +20,7 @@ const defaultColors: Record<BackgroundVariant, string> = {
   [BackgroundVariant.Lines]: '#eee',
 }
 
-const { viewport } = useVueFlow()
+const { id, viewport } = useVueFlow()
 
 const background = $computed(() => {
   const scaledGap = gap && gap * viewport.value.zoom
@@ -37,7 +37,7 @@ const background = $computed(() => {
 })
 
 // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
-const patternId = `pattern-${Math.floor(Math.random() * 100000)}`
+const patternId = `pattern-${id}`
 
 const patternColor = computed(() => initialPatternColor || defaultColors[variant || BackgroundVariant.Dots])
 
@@ -73,16 +73,20 @@ export default {
           <template v-if="variant === BackgroundVariant.Lines">
             <path :stroke="patternColor" :stroke-width="size" :d="d" />
           </template>
+
           <template v-else-if="variant === BackgroundVariant.Dots">
             <circle :cx="background.size" :cy="background.size" :r="background.size" :fill="patternColor" />
           </template>
+
           <svg v-if="bgColor" height="100" width="100">
             <rect width="100%" height="100%" :fill="bgColor" />
           </svg>
         </slot>
       </pattern>
     </slot>
+
     <rect :x="x" :y="y" width="100%" height="100%" :fill="`url(#${patternId})`" />
+
     <slot :id="patternId" />
   </svg>
 </template>