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

bugfix: background not scaling

Browse Source 
update: change app background to black
This commit is contained in:
Braks
2021-07-09 18:28:47 +02:00
parent 3a8dde7cbd
commit cf20f784d4
2 changed files with 21 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template> <template>
<div id="app"> <div id="app">
<h1>Revue Flow</h1> <h1>Revue Flow</h1>
<Basic style="height: 75vh" /> <Basic style="height: 75vh; background: #0f0f0f" />
</div> </div>
</template> </template>
src/additional-components/Background/index.tsx
+20 -11
View File
@@ -41,20 +41,22 @@ const Background = defineComponent({
}, },
setup(props) { setup(props) {
const pinia = store(); const pinia = store();
const [x, y, scale] = pinia.transform; const transform = computed(() => pinia.transform);
// when there are multiple flows on a page we need to make sure that every background gets its own pattern. // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
const patternId = computed(() => `pattern-${Math.floor(Math.random() * 100000)}`); const patternId = `pattern-${Math.floor(Math.random() * 100000)}`;
const bgClasses = ['react-flow__background']; const bgClasses = ['react-flow__background'];
const scaledGap = props.gap || 15 * scale; const scaledGap = computed(() => props.gap && props.gap * transform.value[2]);
const xOffset = x % scaledGap; const xOffset = computed(() => scaledGap.value && transform.value[0] % scaledGap.value);
const yOffset = y % scaledGap; const yOffset = computed(() => scaledGap.value && transform.value[1] % scaledGap.value);
const isLines = props.variant === BackgroundVariant.Lines; const isLines = props.variant === BackgroundVariant.Lines;
const bgColor = props.color ? props.color : defaultColors[props.variant || BackgroundVariant.Dots]; const bgColor = props.color ? props.color : defaultColors[props.variant || BackgroundVariant.Dots];
const path = isLines const path = computed(() =>
? createGridLinesPath(scaledGap, props.size || 0.4, bgColor) isLines
: createGridDotsPath(props.size || 0.4 * scale, bgColor); ? scaledGap.value && props.size && createGridLinesPath(scaledGap.value, props.size, bgColor)
: createGridDotsPath(props.size || 0.4 * transform.value[2], bgColor)
);
return () => ( return () => (
<svg <svg
@@ -64,10 +66,17 @@ const Background = defineComponent({
height: '100%' height: '100%'
}} }}
> >
<pattern id={patternId.value} x={xOffset} y={yOffset} width={scaledGap} height={scaledGap} patternUnits="userSpaceOnUse"> <pattern
{path} id={patternId}
x={xOffset.value}
y={yOffset.value}
width={scaledGap.value}
height={scaledGap.value}
patternUnits="userSpaceOnUse"
>
{path.value}
</pattern> </pattern>
<rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId.value})`} /> <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
</svg> </svg>
); );
} }