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

update: add slots to Background.vue, Controls.vue and MiniMap.vue

Browse Source
This commit is contained in:
Braks
2021-10-20 22:39:54 +02:00
parent 6b4e7ab3ce
commit 1853c21353
5 changed files with 65 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/additional-components/Background/Background.vue
+8 -8
View File
@@ -21,18 +21,17 @@ const defaultColors: Record<BackgroundVariant, string> = {
}
const store = inject<RevueFlowStore>('store')!
const transform = computed(() => store.transform)
// 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 bgClasses = ['revue-flow__background']
const scaledGap = computed(() => props.gap && props.gap * transform.value[2])
const xOffset = computed(() => scaledGap.value && transform.value[0] % scaledGap.value)
const yOffset = computed(() => scaledGap.value && transform.value[1] % scaledGap.value)
const scaledGap = computed(() => props.gap && props.gap * store.transform[2])
const xOffset = computed(() => scaledGap.value && store.transform[0] % scaledGap.value)
const yOffset = computed(() => scaledGap.value && store.transform[1] % scaledGap.value)
const size = computed(() => props.size || 0.4 * store.transform[2])
const isLines = computed(() => props.variant === BackgroundVariant.Lines)
const bgColor = computed(() => (props.color ? props.color : defaultColors[props.variant || BackgroundVariant.Dots]))
const size = computed(() => props.size || 0.4 * transform.value[2])
const isLines = props.variant === BackgroundVariant.Lines
const bgColor = props.color ? props.color : defaultColors[props.variant || BackgroundVariant.Dots]
const patternId = `pattern-${Math.floor(Math.random() * 100000)}`
</script>
<template>
<svg
@@ -55,5 +54,6 @@ const size = computed(() => props.size || 0.4 * transform.value[2])
</template>
</pattern>
<rect x="0" y="0" width="100%" height="100%" :fill="`url(#${patternId})`" />
<slot></slot>
</svg>
</template>
src/additional-components/Background/utils.tsx
-7
View File
@@ -1,7 +0,0 @@
export const createGridLinesPath = (size: number, strokeWidth: number, stroke: string) => {
return <path stroke={stroke} stroke-width={strokeWidth} d={`M${size / 2} 0 V${size} M0 ${size / 2} H${size}`} />
}
export const createGridDotsPath = (size: number, fill: string) => {
return <circle cx={size} cy={size} r={size} fill={fill} />
}