From d4b7fcd1c09539676177925c8629020f8fd1d694 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Wed, 13 Nov 2024 16:13:24 +0100
Subject: [PATCH] migrate Background

---
 .../lib/plugins/Background/Background.svelte  | 46 ++++++++++---------
 .../lib/plugins/Background/DotPattern.svelte  |  4 +-
 .../lib/plugins/Background/LinePattern.svelte | 16 +++++--
 3 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/packages/svelte/src/lib/plugins/Background/Background.svelte b/packages/svelte/src/lib/plugins/Background/Background.svelte
index c6a67d48..a9f49b63 100644
--- a/packages/svelte/src/lib/plugins/Background/Background.svelte
+++ b/packages/svelte/src/lib/plugins/Background/Background.svelte
@@ -1,4 +1,4 @@
-<script labg="ts" context="module">
+<script lang="ts" module>
   const defaultSize = {
     [BackgroundVariant.Dots]: 1,
     [BackgroundVariant.Lines]: 1,
@@ -9,37 +9,39 @@
 <script lang="ts">
   import cc from 'classcat';
 
-  import DotPattern from './DotPattern.svelte';
-  import LinePattern from './LinePattern.svelte';
   import { useStore } from '$lib/store';
   import { BackgroundVariant, type BackgroundProps } from './types';
 
-  type $$Props = BackgroundProps;
+  import DotPattern from './DotPattern.svelte';
+  import LinePattern from './LinePattern.svelte';
 
-  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;
-  export let lineWidth: $$Props['lineWidth'] = 1;
-  export let bgColor: $$Props['bgColor'] = undefined;
-  export let patternColor: $$Props['patternColor'] = undefined;
-  export let patternClass: $$Props['patternClass'] = undefined;
-  let className: $$Props['class'] = '';
-  export { className as class };
+  let {
+    id,
+    variant = BackgroundVariant.Dots,
+    gap = 20,
+    size = 1,
+    lineWidth = 1,
+    bgColor,
+    patternColor,
+    patternClass,
+    class: className
+  }: BackgroundProps = $props();
 
   const { viewport, flowId } = useStore();
-  const patternSize = size || defaultSize[variant!];
+  const patternSize = size ?? defaultSize[variant!];
   const isDots = variant === BackgroundVariant.Dots;
   const isCross = variant === BackgroundVariant.Cross;
   const gapXY: number[] = Array.isArray(gap!) ? gap! : [gap!, gap!];
 
-  $: 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];
-  $: patternOffset = isDots
-    ? [scaledSize / 2, scaledSize / 2]
-    : [patternDimensions[0] / 2, patternDimensions[1] / 2];
+  let patternId = $derived(`background-pattern-${$flowId}-${id ?? ''}`);
+  let scaledGap = $derived([gapXY[0] * $viewport.zoom || 1, gapXY[1] * $viewport.zoom || 1]);
+  let scaledSize = $derived(patternSize * $viewport.zoom);
+  let patternDimensions = $derived(
+    (isCross ? [scaledSize, scaledSize] : scaledGap) as [number, number]
+  );
+  let patternOffset = $derived(
+    isDots ? [scaledSize / 2, scaledSize / 2] : [patternDimensions[0] / 2, patternDimensions[1] / 2]
+  );
 </script>
 
 <svg
diff --git a/packages/svelte/src/lib/plugins/Background/DotPattern.svelte b/packages/svelte/src/lib/plugins/Background/DotPattern.svelte
index 62c0077a..e8549f37 100644
--- a/packages/svelte/src/lib/plugins/Background/DotPattern.svelte
+++ b/packages/svelte/src/lib/plugins/Background/DotPattern.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
   import cc from 'classcat';
 
-  export let radius = 5;
-  let className: string = '';
-  export { className as class };
+  let { radius, class: className }: { radius: number; class?: string } = $props();
 </script>
 
 <circle
diff --git a/packages/svelte/src/lib/plugins/Background/LinePattern.svelte b/packages/svelte/src/lib/plugins/Background/LinePattern.svelte
index 6ef75599..22a8f2cf 100644
--- a/packages/svelte/src/lib/plugins/Background/LinePattern.svelte
+++ b/packages/svelte/src/lib/plugins/Background/LinePattern.svelte
@@ -2,11 +2,17 @@
   import cc from 'classcat';
   import type { BackgroundVariant } from './types';
 
-  export let lineWidth = 1;
-  export let dimensions: [number, number];
-  export let variant: BackgroundVariant | undefined = undefined;
-  let className: string = '';
-  export { className as class };
+  let {
+    lineWidth,
+    dimensions,
+    variant,
+    class: className
+  }: {
+    lineWidth: number;
+    dimensions: [number, number];
+    variant: BackgroundVariant;
+    class?: string;
+  } = $props();
 </script>
 
 <path