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>