WIP: migrated store and useSvelteFlow hook to signals & solved state propagation for provider

packages/svelte/src/lib/plugins/Controls/Controls.svelte

@@ -32,17 +32,8 @@
     after
   }: ControlsProps = $props();
 
-  const {
-    viewport,
-    minZoom,
-    maxZoom,
-    nodesDraggable,
-    nodesConnectable,
-    elementsSelectable,
-    zoomIn,
-    zoomOut,
-    fitView
-  } = useStore();
+  const store = useStore();
+  const { viewport } = store;
 
   const buttonProps = {
     bgColor: buttonBgColor,
@@ -52,29 +43,31 @@
     borderColor: buttonBorderColor
   };
 
-  let isInteractive = $state($nodesDraggable || $nodesConnectable || $elementsSelectable);
-  let minZoomReached = $derived($viewport.zoom <= $minZoom);
-  let maxZoomReached = $derived($viewport.zoom >= $maxZoom);
+  let isInteractive = $state(
+    store.nodesDraggable || store.nodesConnectable || store.elementsSelectable
+  );
+  let minZoomReached = $derived($viewport.zoom <= store.minZoom);
+  let maxZoomReached = $derived($viewport.zoom >= store.maxZoom);
   let orientationClass = $derived(orientation === 'horizontal' ? 'horizontal' : 'vertical');
 
   const onZoomInHandler = () => {
-    zoomIn();
+    store.zoomIn();
   };
 
   const onZoomOutHandler = () => {
-    zoomOut();
+    store.zoomOut();
   };
 
   const onFitViewHandler = () => {
-    fitView(fitViewOptions);
+    store.fitView(fitViewOptions);
   };
 
   const onToggleInteractivity = () => {
     isInteractive = !isInteractive;
 
-    nodesDraggable.set(isInteractive);
-    nodesConnectable.set(isInteractive);
-    elementsSelectable.set(isInteractive);
+    store.nodesDraggable = isInteractive;
+    store.nodesConnectable = isInteractive;
+    store.elementsSelectable = isInteractive;
   };
 </script>