chore(background): cleanup

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

Author: bcakmakoglu

packages/background/src/Background.vue

@@ -2,7 +2,7 @@
 import { useVueFlow } from '@vue-flow/core'
 import { BackgroundVariant } from './types'
 import type { BackgroundProps } from './types'
-import { LinePattern } from './patterns'
+import { DotPattern, LinePattern } from './patterns'
 
 const {
   id,
@@ -29,7 +29,7 @@ const { id: vueFlowId, viewport } = useVueFlow()
 const gapXY = computed(() => (Array.isArray(gap) ? gap : [gap, gap]))
 
 const background = $computed(() => {
-  const scaledGap = [gapXY.value[0] * viewport.value.zoom || 1, gapXY.value[1] * viewport.value.zoom || 1]
+  const scaledGap: [number, number] = [gapXY.value[0] * viewport.value.zoom || 1, gapXY.value[1] * viewport.value.zoom || 1]
 
   const scaledSize = size * viewport.value.zoom
 
@@ -79,7 +79,7 @@ export default {
       >
         <slot name="pattern">
           <template v-if="variant === BackgroundVariant.Lines">
-            <LinePattern :size="lineWidth" :color="patternColor" :dimensions="background.size" />
+            <LinePattern :size="lineWidth" :color="patternColor" :dimensions="background.scaledGap" />
           </template>
 
           <template v-else-if="variant === BackgroundVariant.Dots">

packages/background/src/patterns.ts

@@ -7,22 +7,21 @@ interface LinePatternProps {
   color: string
 }
 
-export const LinePattern: FunctionalComponent<LinePatternProps> = ({ dimensions, size, color }) => {
-  return () =>
-    h('path', {
-      'stroke': color,
-      'stroke-width': size,
-      'd': `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`,
-    })
+export const LinePattern: FunctionalComponent<LinePatternProps> = function ({ dimensions, size, color }) {
+  return h('path', {
+    'stroke': color,
+    'stroke-width': size,
+    'd': `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`,
+  })
 }
 
 interface DotPatternProps {
   radius: number
   color: string
 }
 
-export const DotPattern: FunctionalComponent<DotPatternProps> = ({ radius, color }) => {
-  return () => h('circle', { cx: radius, cy: radius, r: radius, fill: color })
+export const DotPattern: FunctionalComponent<DotPatternProps> = function ({ radius, color }) {
+  return h('circle', { cx: radius, cy: radius, r: radius, fill: color })
 }
 
 export const Patterns = {