alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(svelte): add id prop

Browse Source
This commit is contained in:
moklick
2023-10-16 11:22:05 +02:00
parent 3c30fa4087
commit 92a06d25db
3 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/src/additional-components/Background/Background.tsx
+4 -2
View File
@@ -46,6 +46,8 @@ function Background({
? [scaledSize / offset, scaledSize / offset] ? [scaledSize / offset, scaledSize / offset]
: [patternDimensions[0] / offset, patternDimensions[1] / offset]; : [patternDimensions[0] / offset, patternDimensions[1] / offset];
const _patternId = `${patternId}${id ? id : ''}`;
return ( return (
<svg <svg
className={cc(['react-flow__background', className])} className={cc(['react-flow__background', className])}
@@ -61,7 +63,7 @@ function Background({
data-testid="rf__background" data-testid="rf__background"
> >
<pattern <pattern
id={patternId + id} id={_patternId}
x={transform[0] % scaledGap[0]} x={transform[0] % scaledGap[0]}
y={transform[1] % scaledGap[1]} y={transform[1] % scaledGap[1]}
width={scaledGap[0]} width={scaledGap[0]}
@@ -80,7 +82,7 @@ function Background({
/> />
)} )}
</pattern> </pattern>
<rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId + id})`} /> <rect x="0" y="0" width="100%" height="100%" fill={`url(#${_patternId})`} />
</svg> </svg>
); );
} }
packages/svelte/src/lib/plugins/Background/Background.svelte
+2 -1
View File
@@ -16,6 +16,7 @@
type $$Props = BackgroundProps; type $$Props = BackgroundProps;
export let id: $$Props['id'] = undefined;
export let variant: $$Props['variant'] = BackgroundVariant.Dots; export let variant: $$Props['variant'] = BackgroundVariant.Dots;
export let gap: $$Props['gap'] = 20; export let gap: $$Props['gap'] = 20;
export let size: $$Props['size'] = 1; export let size: $$Props['size'] = 1;
@@ -32,7 +33,7 @@
const isCross = variant === BackgroundVariant.Cross; const isCross = variant === BackgroundVariant.Cross;
const gapXY: number[] = Array.isArray(gap!) ? gap! : [gap!, gap!]; const gapXY: number[] = Array.isArray(gap!) ? gap! : [gap!, gap!];
$: patternId = `background-pattern-${$flowId}`; $: patternId = `background-pattern-${$flowId}-${id ? id : ''}`;
$: scaledGap = [gapXY[0] * $viewport.zoom || 1, gapXY[1] * $viewport.zoom || 1]; $: scaledGap = [gapXY[0] * $viewport.zoom || 1, gapXY[1] * $viewport.zoom || 1];
$: scaledSize = patternSize * $viewport.zoom; $: scaledSize = patternSize * $viewport.zoom;
$: patternDimensions = (isCross ? [scaledSize, scaledSize] : scaledGap) as [number, number]; $: patternDimensions = (isCross ? [scaledSize, scaledSize] : scaledGap) as [number, number];
packages/svelte/src/lib/plugins/Background/types.ts
+1
View File
@@ -5,6 +5,7 @@ export enum BackgroundVariant {
} }
export type BackgroundProps = { export type BackgroundProps = {
id?: string;
bgColor?: string; bgColor?: string;
patternColor?: string; patternColor?: string;
patternClass?: string; patternClass?: string;