chore(svelte): add id prop

packages/react/src/additional-components/Background/Background.tsx

@@ -46,6 +46,8 @@ function Background({
     ? [scaledSize / offset, scaledSize / offset]
     : [patternDimensions[0] / offset, patternDimensions[1] / offset];
 
+  const _patternId = `${patternId}${id ? id : ''}`;
+
   return (
     <svg
       className={cc(['react-flow__background', className])}
@@ -61,7 +63,7 @@ function Background({
       data-testid="rf__background"
     >
       <pattern
-        id={patternId + id}
+        id={_patternId}
         x={transform[0] % scaledGap[0]}
         y={transform[1] % scaledGap[1]}
         width={scaledGap[0]}
@@ -80,7 +82,7 @@ function Background({
           />
         )}
       </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>
   );
 }

packages/svelte/src/lib/plugins/Background/Background.svelte

@@ -16,6 +16,7 @@
 
   type $$Props = BackgroundProps;
 
+  export let id: $$Props['id'] = undefined;
   export let variant: $$Props['variant'] = BackgroundVariant.Dots;
   export let gap: $$Props['gap'] = 20;
   export let size: $$Props['size'] = 1;
@@ -32,7 +33,7 @@
   const isCross = variant === BackgroundVariant.Cross;
   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];
   $: scaledSize = patternSize * $viewport.zoom;
   $: patternDimensions = (isCross ? [scaledSize, scaledSize] : scaledGap) as [number, number];

packages/svelte/src/lib/plugins/Background/types.ts

@@ -5,6 +5,7 @@ export enum BackgroundVariant {
 }
 
 export type BackgroundProps = {
+  id?: string;
   bgColor?: string;
   patternColor?: string;
   patternClass?: string;