feat(background): Allow background height/width to be set

* allow for bgColor to be set
* allow for no pattern to be used

examples/Basic/Basic.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VueFlow, MiniMap, Controls, Background, isNode, useVueFlow, Elements } from '~/index'
+import { VueFlow, MiniMap, Controls, Background, BackgroundVariant, isNode, useVueFlow, Elements } from '~/index'
 
 const elements = ref<Elements>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
@@ -39,7 +39,15 @@ const toggleclass = () => elements.value.forEach((el) => (el.class = el.class ==
     :max-zoom="4"
     :zoom-on-scroll="false"
   >
-    <Background />
+    <Background :variant="BackgroundVariant.None" :height="33" bg-color="pink">
+      <text fill="#000000" font-size="22" font-family="ARIAL" x="120" y="110"> LEVEL 1 </text>
+    </Background>
+    <Background :height="33" bg-color="purple">
+      <text fill="white" font-size="22" font-family="ARIAL" x="120" y="110"> LEVEL 2 </text>
+    </Background>
+    <Background :height="33" bg-color="crimson">
+      <text fill="white" font-size="22" font-family="ARIAL" x="120" y="110"> LEVEL 3 </text>
+    </Background>
     <MiniMap />
     <Controls />
     <div style="position: absolute; right: 10px; top: 10px; z-index: 4">

src/additional-components/Background/Background.vue

@@ -7,11 +7,16 @@ const props = withDefaults(defineProps<BackgroundProps>(), {
   variant: 'dots' as BackgroundVariant,
   gap: 10,
   size: 0.4,
+  height: 100,
+  width: 100,
+  x: 0,
+  y: 0,
 })
 
 const defaultColors: Record<BackgroundVariant, string> = {
   [BackgroundVariant.Dots]: '#81818a',
   [BackgroundVariant.Lines]: '#eee',
+  [BackgroundVariant.None]: '#eee',
 }
 
 const { store } = useVueFlow()
@@ -32,7 +37,9 @@ 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 bgColor = computed(() => (props.color ? props.color : defaultColors[props.variant || BackgroundVariant.Dots]))
+const patternColor = computed(() =>
+  props.patternColor ? props.patternColor : defaultColors[props.variant || BackgroundVariant.Dots],
+)
 const d = computed(
   () =>
     `M${background.value.scaledGap / 2} 0 V${background.value.scaledGap} M0 ${background.value.scaledGap / 2} H${
@@ -46,8 +53,16 @@ export default {
 }
 </script>
 <template>
-  <svg class="vue-flow__background vue-flow__container">
+  <svg
+    class="vue-flow__background"
+    :style="{
+      height: `${props.height > 100 ? 100 : props.height}%`,
+      width: `${props.width > 100 ? 100 : props.width}%`,
+      backgroundColor: props.bgColor ?? '#fff',
+    }"
+  >
     <pattern
+      v-if="props.variant !== BackgroundVariant.None"
       :id="patternId"
       :x="background.xOffset"
       :y="background.yOffset"
@@ -56,13 +71,13 @@ export default {
       patternUnits="userSpaceOnUse"
     >
       <template v-if="props.variant === BackgroundVariant.Lines">
-        <path :stroke="bgColor" :stroke-width="props.size" :d="d" />
+        <path :stroke="patternColor" :stroke-width="props.size" :d="d" />
       </template>
-      <template v-else>
-        <circle :cx="background.size" :cy="background.size" :r="background.size" :fill="bgColor" />
+      <template v-else-if="props.variant === BackgroundVariant.Dots">
+        <circle :cx="background.size" :cy="background.size" :r="background.size" :fill="patternColor" />
       </template>
     </pattern>
-    <rect x="0" y="0" width="100%" height="100%" :fill="`url(#${patternId})`" />
+    <rect :x="props.x" :y="props.y" width="100%" height="100%" :fill="`url(#${patternId})`" />
     <slot></slot>
   </svg>
 </template>

src/types/components.ts

@@ -38,8 +38,13 @@ export interface HandleProps {
 export interface BackgroundProps {
   variant?: BackgroundVariant
   gap?: number
-  color?: string
+  patternColor?: string
+  bgColor?: string
   size?: number
+  height?: number
+  width?: number
+  x?: number
+  y?: number
 }
 
 export interface ControlProps {

src/types/flow.ts

@@ -57,6 +57,7 @@ export type SnapGrid = [number, number]
 export enum BackgroundVariant {
   Lines = 'lines',
   Dots = 'dots',
+  None = 'none',
 }
 
 export interface SelectionRect extends Rect {