alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(background): cleanup

Browse Source 
Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
This commit is contained in:
braks
2023-03-23 15:58:30 +01:00
committed by Braks
parent 170f79ce60
commit ceb90c914e
2 changed files with 11 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/background/src/Background.vue
+3 -3
View File
@@ -2,7 +2,7 @@
import { useVueFlow } from '@vue-flow/core' import { useVueFlow } from '@vue-flow/core'
import { BackgroundVariant } from './types' import { BackgroundVariant } from './types'
import type { BackgroundProps } from './types' import type { BackgroundProps } from './types'
import { LinePattern } from './patterns' import { DotPattern, LinePattern } from './patterns'
const { const {
id, id,
@@ -29,7 +29,7 @@ const { id: vueFlowId, viewport } = useVueFlow()
const gapXY = computed(() => (Array.isArray(gap) ? gap : [gap, gap])) const gapXY = computed(() => (Array.isArray(gap) ? gap : [gap, gap]))
const background = $computed(() => { 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 const scaledSize = size * viewport.value.zoom
@@ -79,7 +79,7 @@ export default {
> >
<slot name="pattern"> <slot name="pattern">
<template v-if="variant === BackgroundVariant.Lines"> <template v-if="variant === BackgroundVariant.Lines">
<LinePattern :size="lineWidth" :color="patternColor" :dimensions="background.size" /> <LinePattern :size="lineWidth" :color="patternColor" :dimensions="background.scaledGap" />
</template> </template>
<template v-else-if="variant === BackgroundVariant.Dots"> <template v-else-if="variant === BackgroundVariant.Dots">
packages/background/src/patterns.ts
+8 -9
View File
@@ -7,13 +7,12 @@ interface LinePatternProps {
color: string color: string
} }
export const LinePattern: FunctionalComponent<LinePatternProps> = ({ dimensions, size, color }) => { export const LinePattern: FunctionalComponent<LinePatternProps> = function ({ dimensions, size, color }) {
return () => return h('path', {
h('path', { 'stroke': color,
'stroke': color, 'stroke-width': size,
'stroke-width': size, 'd': `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`,
'd': `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`, })
})
} }
interface DotPatternProps { interface DotPatternProps {
@@ -21,8 +20,8 @@ interface DotPatternProps {
color: string color: string
} }
export const DotPattern: FunctionalComponent<DotPatternProps> = ({ radius, color }) => { export const DotPattern: FunctionalComponent<DotPatternProps> = function ({ radius, color }) {
return () => h('circle', { cx: radius, cy: radius, r: radius, fill: color }) return h('circle', { cx: radius, cy: radius, r: radius, fill: color })
} }
export const Patterns = { export const Patterns = {