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

packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte

@@ -12,6 +12,7 @@
   import type { KeyDefinition, KeyDefinitionObject } from '$lib/types';
 
   let {
+    store,
     selectionKey = 'Shift',
     multiSelectionKey = isMacOs() ? 'Meta' : 'Control',
     deleteKey = 'Backspace',
@@ -19,18 +20,7 @@
     zoomActivationKey = isMacOs() ? 'Meta' : 'Control'
   }: KeyHandlerProps = $props();
 
-  const {
-    selectionKeyPressed,
-    multiselectionKeyPressed,
-    deleteKeyPressed,
-    panActivationKeyPressed,
-    zoomActivationKeyPressed,
-    selectionRect,
-    onbeforedelete,
-    ondelete,
-    nodes: _nodes,
-    edges: _edges
-  } = useStore();
+  const { nodes: _nodes, edges: _edges } = store;
 
   function isKeyObject(key?: KeyDefinition | null): key is KeyDefinitionObject {
     return key !== null && typeof key === 'object';
@@ -67,12 +57,12 @@
   }
 
   function resetKeysAndSelection() {
-    selectionRect.set(null);
-    selectionKeyPressed.set(false);
-    multiselectionKeyPressed.set(false);
-    deleteKeyPressed.set(false);
-    panActivationKeyPressed.set(false);
-    zoomActivationKeyPressed.set(false);
+    store.selectionRect = null;
+    store.selectionKeyPressed = false;
+    store.multiselectionKeyPressed = false;
+    store.deleteKeyPressed = false;
+    store.panActivationKeyPressed = false;
+    store.zoomActivationKeyPressed = false;
   }
 
   async function handleDelete() {
@@ -86,14 +76,14 @@
       edgesToRemove: selectedEdges,
       nodes,
       edges,
-      onBeforeDelete: get(onbeforedelete)
+      onBeforeDelete: store.onbeforedelete
     });
 
     if (matchingNodes.length || matchingEdges.length) {
       _nodes.update((nds) => nds.filter((node) => !matchingNodes.some((mN) => mN.id === node.id)));
       _edges.update((eds) => eds.filter((edge) => !matchingEdges.some((mE) => mE.id === edge.id)));
 
-      get(ondelete)?.({
+      store.ondelete?.({
         nodes: matchingNodes,
         edges: matchingEdges
       });
@@ -105,19 +95,19 @@
   on:blur={resetKeysAndSelection}
   on:contextmenu={resetKeysAndSelection}
   use:shortcut={{
-    trigger: getShortcutTrigger(selectionKey, () => selectionKeyPressed.set(true)),
+    trigger: getShortcutTrigger(selectionKey, () => (store.selectionKeyPressed = true)),
     type: 'keydown'
   }}
   use:shortcut={{
-    trigger: getShortcutTrigger(selectionKey, () => selectionKeyPressed.set(false)),
+    trigger: getShortcutTrigger(selectionKey, () => (store.selectionKeyPressed = false)),
     type: 'keyup'
   }}
   use:shortcut={{
-    trigger: getShortcutTrigger(multiSelectionKey, () => multiselectionKeyPressed.set(true)),
+    trigger: getShortcutTrigger(multiSelectionKey, () => (store.multiselectionKeyPressed = true)),
     type: 'keydown'
   }}
   use:shortcut={{
-    trigger: getShortcutTrigger(multiSelectionKey, () => multiselectionKeyPressed.set(false)),
+    trigger: getShortcutTrigger(multiSelectionKey, () => (store.multiselectionKeyPressed = false)),
     type: 'keyup'
   }}
   use:shortcut={{
@@ -127,30 +117,30 @@
         detail.originalEvent.metaKey ||
         detail.originalEvent.shiftKey;
       if (!isModifierKey && !isInputDOMNode(detail.originalEvent)) {
-        deleteKeyPressed.set(true);
+        store.deleteKeyPressed = true;
         handleDelete();
       }
     }),
     type: 'keydown'
   }}
   use:shortcut={{
-    trigger: getShortcutTrigger(deleteKey, () => deleteKeyPressed.set(false)),
+    trigger: getShortcutTrigger(deleteKey, () => (store.deleteKeyPressed = false)),
     type: 'keyup'
   }}
   use:shortcut={{
-    trigger: getShortcutTrigger(panActivationKey, () => panActivationKeyPressed.set(true)),
+    trigger: getShortcutTrigger(panActivationKey, () => (store.panActivationKeyPressed = true)),
     type: 'keydown'
   }}
   use:shortcut={{
-    trigger: getShortcutTrigger(panActivationKey, () => panActivationKeyPressed.set(false)),
+    trigger: getShortcutTrigger(panActivationKey, () => (store.panActivationKeyPressed = false)),
     type: 'keyup'
   }}
   use:shortcut={{
-    trigger: getShortcutTrigger(zoomActivationKey, () => zoomActivationKeyPressed.set(true)),
+    trigger: getShortcutTrigger(zoomActivationKey, () => (store.zoomActivationKeyPressed = true)),
     type: 'keydown'
   }}
   use:shortcut={{
-    trigger: getShortcutTrigger(zoomActivationKey, () => zoomActivationKeyPressed.set(false)),
+    trigger: getShortcutTrigger(zoomActivationKey, () => (store.zoomActivationKeyPressed = false)),
     type: 'keyup'
   }}
 />