From 2cb0ee881ebf8670de50f0b2c7557adb8ae017f3 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Thu, 15 May 2025 13:56:15 +0200
Subject: [PATCH] use $derived(useStore()) in plugin components

---
 .../svelte/src/lib/actions/portal/portal.svelte.ts  |  1 +
 .../svelte/src/lib/container/Panel/Panel.svelte     |  2 +-
 .../src/lib/plugins/Background/Background.svelte    |  8 ++++----
 .../svelte/src/lib/plugins/Controls/Controls.svelte | 13 ++++++-------
 .../svelte/src/lib/plugins/Minimap/Minimap.svelte   |  2 +-
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/svelte/src/lib/actions/portal/portal.svelte.ts b/packages/svelte/src/lib/actions/portal/portal.svelte.ts
index b20dec35..40dea420 100644
--- a/packages/svelte/src/lib/actions/portal/portal.svelte.ts
+++ b/packages/svelte/src/lib/actions/portal/portal.svelte.ts
@@ -15,6 +15,7 @@ function tryToMount(node: Element, domNode: Element | null, target: Portal | und
 }
 
 export function portal(node: Element, target: Portal | undefined) {
+  // TODO: does this work if called outside of SvelteFlow
   const store = useStore();
 
   let previousTarget: Portal | undefined = target;
diff --git a/packages/svelte/src/lib/container/Panel/Panel.svelte b/packages/svelte/src/lib/container/Panel/Panel.svelte
index 81a3796d..314da233 100644
--- a/packages/svelte/src/lib/container/Panel/Panel.svelte
+++ b/packages/svelte/src/lib/container/Panel/Panel.svelte
@@ -4,7 +4,7 @@
 
   let { position = 'top-right', style, class: className, children, ...rest }: PanelProps = $props();
 
-  const store = useStore();
+  let store = $derived(useStore());
 
   let positionClasses = $derived(`${position}`.split('-'));
 </script>
diff --git a/packages/svelte/src/lib/plugins/Background/Background.svelte b/packages/svelte/src/lib/plugins/Background/Background.svelte
index 72952c8f..971f6ac4 100644
--- a/packages/svelte/src/lib/plugins/Background/Background.svelte
+++ b/packages/svelte/src/lib/plugins/Background/Background.svelte
@@ -25,11 +25,11 @@
     class: className
   }: BackgroundProps = $props();
 
-  const store = useStore();
+  let store = $derived(useStore());
 
-  const isDots = $derived(variant === BackgroundVariant.Dots);
-  const isCross = $derived(variant === BackgroundVariant.Cross);
-  const gapXY: number[] = $derived(Array.isArray(gap) ? gap : [gap, gap]);
+  let isDots = $derived(variant === BackgroundVariant.Dots);
+  let isCross = $derived(variant === BackgroundVariant.Cross);
+  let gapXY: number[] = $derived(Array.isArray(gap) ? gap : [gap, gap]);
 
   let patternId = $derived(`background-pattern-${store.flowId}-${id ?? ''}`);
   let scaledGap = $derived([
diff --git a/packages/svelte/src/lib/plugins/Controls/Controls.svelte b/packages/svelte/src/lib/plugins/Controls/Controls.svelte
index 035fc93c..d91588f9 100644
--- a/packages/svelte/src/lib/plugins/Controls/Controls.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/Controls.svelte
@@ -31,7 +31,7 @@
     ...rest
   }: ControlsProps = $props();
 
-  const store = useStore();
+  let store = $derived(useStore());
 
   const buttonProps = {
     bgColor: buttonBgColor,
@@ -41,7 +41,7 @@
     borderColor: buttonBorderColor
   };
 
-  let isInteractive = $state(
+  let isInteractive = $derived(
     store.nodesDraggable || store.nodesConnectable || store.elementsSelectable
   );
   let minZoomReached = $derived(store.viewport.zoom <= store.minZoom);
@@ -61,11 +61,10 @@
   };
 
   const onToggleInteractivity = () => {
-    isInteractive = !isInteractive;
-
-    store.nodesDraggable = isInteractive;
-    store.nodesConnectable = isInteractive;
-    store.elementsSelectable = isInteractive;
+    let interactive = !isInteractive;
+    store.nodesDraggable = interactive;
+    store.nodesConnectable = interactive;
+    store.elementsSelectable = interactive;
   };
 </script>
 
diff --git a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
index cfc0e5e7..5dcb5b3f 100644
--- a/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
+++ b/packages/svelte/src/lib/plugins/Minimap/Minimap.svelte
@@ -41,7 +41,7 @@
     ...rest
   }: MiniMapProps = $props();
 
-  let store = useStore();
+  let store = $derived(useStore());
 
   const nodeColorFunc = nodeColor === undefined ? undefined : getAttrFunction(nodeColor);
   const nodeStrokeColorFunc = getAttrFunction(nodeStrokeColor);