From 24316e13869cf1dbacbc77098e50fcb538178b22 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 21 Oct 2021 13:57:20 +0200
Subject: [PATCH] update: background properties

---
 src/additional-components/Background/Background.vue | 11 ++++-------
 src/additional-components/MiniMap/MiniMapNode.vue   |  2 +-
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/additional-components/Background/Background.vue b/src/additional-components/Background/Background.vue
index 185bbfc6..8fc8bb80 100644
--- a/src/additional-components/Background/Background.vue
+++ b/src/additional-components/Background/Background.vue
@@ -22,9 +22,7 @@ const defaultColors: Record<BackgroundVariant, string> = {
 }
 
 const store = useStore()
-// when there are multiple flows on a page we need to make sure that every background gets its own pattern.
 
-const bgClasses = ['vue-flow__background']
 const background = computed(() => {
   const scaledGap = props.gap && props.gap * store.transform[2]
   const xOffset = scaledGap && store.transform[0] % scaledGap
@@ -39,13 +37,12 @@ const background = computed(() => {
   }
 })
 
-const isLines = props.variant === BackgroundVariant.Lines
-const bgColor = props.color ? props.color : defaultColors[props.variant || BackgroundVariant.Dots]
+// 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)}`
 </script>
 <template>
   <svg
-    :class="bgClasses"
+    class="vue-flow__background"
     :style="{
       width: '100%',
       height: '100%',
@@ -59,9 +56,9 @@ const patternId = `pattern-${Math.floor(Math.random() * 100000)}`
       :height="background.scaledGap"
       patternUnits="userSpaceOnUse"
     >
-      <template v-if="isLines">
+      <template v-if="props.variant === BackgroundVariant.Lines">
         <path
-          :stroke="bgColor"
+          :stroke="props.color ? props.color : defaultColors[props.variant || BackgroundVariant.Dots]"
           :stroke-width="props.size"
           :d="`M${background.scaledGap / 2} 0 V${background.scaledGap} M0 ${background.scaledGap / 2} H${background.scaledGap}`"
         />
diff --git a/src/additional-components/MiniMap/MiniMapNode.vue b/src/additional-components/MiniMap/MiniMapNode.vue
index 6a120d2f..954a1f65 100644
--- a/src/additional-components/MiniMap/MiniMapNode.vue
+++ b/src/additional-components/MiniMap/MiniMapNode.vue
@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<MiniMapNodeProps>(), {
 const attrs = useAttrs()
 
 const styles = (attrs.style ?? {}) as CSSProperties
-const fill = computed(() => (props.color || styles.background || styles.backgroundColor) as string)
+const fill = computed(() => props.color || styles.background || styles.backgroundColor)
 </script>
 <template>
   <rect