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

feat: Add pattern slot to background

Browse Source 
# What's changed?

* Add a slot named pattern to background
* Allows for icons or similar things to be passed as bg pattern
This commit is contained in:
Braks
2022-05-11 22:10:40 +02:00
parent 5fb0280e5b
commit 152801edac
1 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package/src/additional-components/Background/Background.vue
+12 -10
View File
@@ -26,7 +26,7 @@ const background = $computed(() => {
const scaledGap = gap && gap * viewport.zoom const scaledGap = gap && gap * viewport.zoom
const xOffset = scaledGap && viewport.x % scaledGap const xOffset = scaledGap && viewport.x % scaledGap
const yOffset = scaledGap && viewport.y % scaledGap const yOffset = scaledGap && viewport.y % scaledGap
const bgSize = size || 0.4 * viewport.zoom const bgSize = size * viewport.zoom
return { return {
scaledGap, scaledGap,
@@ -66,15 +66,17 @@ export default {
:height="background.scaledGap" :height="background.scaledGap"
patternUnits="userSpaceOnUse" patternUnits="userSpaceOnUse"
> >
<template v-if="variant === BackgroundVariant.Lines"> <slot name="pattern">
<path :stroke="patternColor" :stroke-width="size" :d="d" /> <template v-if="variant === BackgroundVariant.Lines">
</template> <path :stroke="patternColor" :stroke-width="size" :d="d" />
<template v-else-if="variant === BackgroundVariant.Dots"> </template>
<circle :cx="background.size" :cy="background.size" :r="background.size" :fill="patternColor" /> <template v-else-if="variant === BackgroundVariant.Dots">
</template> <circle :cx="background.size" :cy="background.size" :r="background.size" :fill="patternColor" />
<svg v-if="bgColor" height="100" width="100"> </template>
<rect width="100%" height="100%" :fill="bgColor" /> <svg v-if="bgColor" height="100" width="100">
</svg> <rect width="100%" height="100%" :fill="bgColor" />
</svg>
</slot>
</pattern> </pattern>
<rect :x="x" :y="y" width="100%" height="100%" :fill="`url(#${patternId})`" /> <rect :x="x" :y="y" width="100%" height="100%" :fill="`url(#${patternId})`" />
<slot></slot> <slot></slot>