From 89daa827f38ef6a516c8c9cbe1fb18c633739121 Mon Sep 17 00:00:00 2001
From: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 24 Jun 2022 21:39:47 +0200
Subject: [PATCH] feat(components): add `pattern-container` slot to Background

# What's changed?

* `pattern-container` allows for complete overwrite of the pattern of Background
---
 .../Background/Background.vue                 | 44 ++++++++++---------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/packages/vue-flow/src/additional-components/Background/Background.vue b/packages/vue-flow/src/additional-components/Background/Background.vue
index 439ef479..bc2f81d1 100644
--- a/packages/vue-flow/src/additional-components/Background/Background.vue
+++ b/packages/vue-flow/src/additional-components/Background/Background.vue
@@ -60,27 +60,29 @@ export default {
       width: `${width > 100 ? 100 : width}%`,
     }"
   >
-    <pattern
-      :id="patternId"
-      :x="background.xOffset"
-      :y="background.yOffset"
-      :width="background.scaledGap"
-      :height="background.scaledGap"
-      patternUnits="userSpaceOnUse"
-    >
-      <slot name="pattern">
-        <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 :id="patternId" name="pattern-container">
+      <pattern
+        :id="patternId"
+        :x="background.xOffset"
+        :y="background.yOffset"
+        :width="background.scaledGap"
+        :height="background.scaledGap"
+        patternUnits="userSpaceOnUse"
+      >
+        <slot name="pattern">
+          <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></slot>
+    <slot :id="patternId" />
   </svg>
 </template>