refactor(core): move background component to core pkg

Signed-off-by: braks <[email protected]>

Author: bcakmakoglu

packages/background/src/types.ts

@@ -1,39 +1,32 @@
 <script lang="ts" setup>
-import { useVueFlow } from '@vue-flow/core'
-import { computed, toRef } from 'vue'
-import { BackgroundVariant } from './types'
+import { computed } from 'vue'
+import { useVueFlow } from '../../composables/useVueFlow'
 import type { BackgroundProps } from './types'
 import { DefaultBgColors, DotPattern, LinePattern } from './patterns'
 
-const {
-  id,
-  variant = BackgroundVariant.Dots,
+const props = withDefaults(defineProps<BackgroundProps>(), {
+  variant = 'dots',
   gap = 20,
   size = 1,
   lineWidth = 1,
-  height = 100,
-  width = 100,
   x = 0,
   y = 0,
-  bgColor,
-  patternColor: initialPatternColor,
-  color: _patternColor,
   offset = 2,
-} = defineProps<BackgroundProps>()
+})
 
 const { id: vueFlowId, viewport } = useVueFlow()
 
 const background = computed(() => {
-  const [gapX, gapY] = Array.isArray(gap) ? gap : [gap, gap]
+  const [gapX, gapY] = Array.isArray(props.gap) ? props.gap : [props.gap, props.gap]
 
   const scaledGap: [number, number] = [gapX * viewport.value.zoom || 1, gapY * viewport.value.zoom || 1]
 
-  const scaledSize = size * viewport.value.zoom
+  const scaledSize = props.size * viewport.value.zoom
 
   const patternOffset =
-    variant === BackgroundVariant.Dots
-      ? [scaledSize / offset, scaledSize / offset]
-      : [scaledGap[0] / offset, scaledGap[1] / offset]
+    props.variant === 'dots'
+      ? [scaledSize / props.offset, scaledSize / props.offset]
+      : [scaledGap[0] / props.offset, scaledGap[1] / props.offset]
 
   return {
     scaledGap,
@@ -43,9 +36,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 = toRef(() => `pattern-${vueFlowId}${id ? `-${id}` : ''}`)
+const patternId = computed(() => `pattern-${vueFlowId}${props.id ? `-${props.id}` : ''}`)
 
-const patternColor = toRef(() => _patternColor || initialPatternColor || DefaultBgColors[variant || BackgroundVariant.Dots])
+const patternColor = computed(() => props.color || DefaultBgColors[props.variant || 'dots'])
 </script>
 
 <script lang="ts">
@@ -56,13 +49,7 @@ export default {
 </script>
 
 <template>
-  <svg
-    class="vue-flow__background vue-flow__container"
-    :style="{
-      height: `${height > 100 ? 100 : height}%`,
-      width: `${width > 100 ? 100 : width}%`,
-    }"
-  >
+  <svg class="vue-flow__background vue-flow__container">
     <slot :id="patternId" name="pattern-container">
       <pattern
         :id="patternId"
@@ -74,17 +61,13 @@ export default {
         patternUnits="userSpaceOnUse"
       >
         <slot name="pattern">
-          <template v-if="variant === BackgroundVariant.Lines">
+          <template v-if="variant === 'lines'">
             <LinePattern :size="lineWidth" :color="patternColor" :dimensions="background.scaledGap" />
           </template>
 
-          <template v-else-if="variant === BackgroundVariant.Dots">
+          <template v-else-if="variant === 'dots'">
             <DotPattern :color="patternColor" :radius="background.size / offset" />
           </template>
-
-          <svg v-if="bgColor" height="100" width="100">
-            <rect width="100%" height="100%" :fill="bgColor" />
-          </svg>
         </slot>
       </pattern>
     </slot>

packages/background/src/Background.vue renamed to packages/core/src/addons/Background/Background.vue

@@ -0,0 +1,2 @@
+export { default as Background } from './Background.vue'
+export * from './types'

packages/core/src/addons/Background/index.ts

@@ -1,6 +1,6 @@
 import type { FunctionalComponent } from 'vue'
 import { h } from 'vue'
-import { BackgroundVariant } from './types'
+import type { BackgroundVariant } from './types'
 
 interface LinePatternProps {
   dimensions: [number, number]
@@ -26,11 +26,11 @@ export const DotPattern: FunctionalComponent<DotPatternProps> = function ({ radi
 }
 
 export const Patterns = {
-  [BackgroundVariant.Lines]: LinePattern,
-  [BackgroundVariant.Dots]: DotPattern,
+  lines: LinePattern,
+  dots: DotPattern,
 }
 
 export const DefaultBgColors: Record<BackgroundVariant, string> = {
-  [BackgroundVariant.Dots]: '#81818a',
-  [BackgroundVariant.Lines]: '#eee',
+  lines: '#81818a',
+  dots: '#eee',
 }

packages/background/src/patterns.ts renamed to packages/core/src/addons/Background/patterns.ts

@@ -0,0 +1,67 @@
+/**
+ * The Background can be either a dotted one or a lined one
+ *
+ * @default 'dots'
+ */
+export type BackgroundVariant = 'dots' | 'lines'
+
+export interface BackgroundProps {
+  /**
+   * `<Background>` component id
+   *
+   * This is necessary when you have multiple flows with backgrounds visible at the same time.
+   * If no id is explicitly assigned, an auto-generated one is used.
+   *
+   * @default `pattern-${vueFlowId}${id ? `-${id}` : ''}`
+   */
+  id?: string
+  /**
+   * The background pattern variant {@link BackgroundVariant}
+   *
+   * @default 'dots'
+   */
+  variant?: BackgroundVariant
+  /**
+   * The background pattern gap
+   *
+   * Can be either a number or [xGap: number, yGap: number], defining the gap on the X and Y axis respectively
+   *
+   * @default 20
+   */
+  gap?: number | number[]
+  /**
+   * Background pattern size
+   *
+   * @default 1
+   */
+  size?: number
+  /**
+   * @default 1
+   */
+  lineWidth?: number
+  /**
+   * The background pattern color
+   *
+   * This only changes the color of the *pattern*, not the background color itself.
+   *
+   * If you want to change the background color itself, you can apply a bg-color to the `<VueFlow>` element instead
+   */
+  color?: string
+  /**
+   * Background x-coordinate (offset x)
+   *
+   * @default 0
+   */
+  x?: number
+  /**
+   * Background y-coordinate (offset y)
+   * @default 0
+   */
+  y?: number
+  /**
+   * Background pattern offset
+   *
+   * @default 2
+   */
+  offset?: number
+}

packages/core/src/addons/Background/types.ts

@@ -18,6 +18,8 @@ export { default as BaseEdge } from './components/Edges/BaseEdge.vue'
 export { default as EdgeText } from './components/Edges/EdgeText.vue'
 export { default as EdgeLabelRenderer } from './components/Edges/EdgeLabelRenderer.vue'
 
+export * from './addons/Background'
+
 export {
   getBezierPath,
   getSimpleBezierPath,