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

feat(components): add pattern-container slot to Background

Browse Source 
# What's changed?

* `pattern-container` allows for complete overwrite of the pattern of Background
This commit is contained in:
bcakmakoglu
2022-06-25 00:36:48 +02:00
committed by Braks
parent 0d5f9a5f0a
commit 89daa827f3
1 changed files with 23 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/vue-flow/src/additional-components/Background/Background.vue
+23 -21
View File
@@ -60,27 +60,29 @@ export default {
width: `${width > 100 ? 100 : width}%`, width: `${width > 100 ? 100 : width}%`,
}" }"
> >
<pattern <slot :id="patternId" name="pattern-container">
:id="patternId" <pattern
:x="background.xOffset" :id="patternId"
:y="background.yOffset" :x="background.xOffset"
:width="background.scaledGap" :y="background.yOffset"
:height="background.scaledGap" :width="background.scaledGap"
patternUnits="userSpaceOnUse" :height="background.scaledGap"
> patternUnits="userSpaceOnUse"
<slot name="pattern"> >
<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" />
</slot> </svg>
</pattern> </slot>
</pattern>
</slot>
<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 :id="patternId" />
</svg> </svg>
</template> </template>