Merge pull request #5267 from xyflow/fix/svelte-plugin-derived

Fix/svelte plugin derived

.changeset/green-nails-glow.md

@@ -0,0 +1,5 @@
+---
+'@xyflow/svelte': patch
+---
+
+Make Background, Panel, Minimap work outside of <SvelteFlow />

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;

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>

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([

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>
 

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);