refactor(svelte): cleanup store usage

packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte

@@ -6,17 +6,17 @@
 
   type $$Props = ConnectionLineProps;
 
-  const { connectionPathStore, widthStore, heightStore, connectionStore } = useStore();
+  const { connectionPath, width, height, connection } = useStore();
 </script>
 
-{#if $connectionPathStore}
+{#if $connectionPath}
   <svg
-    width={$widthStore}
-    height={$heightStore}
+    width={$width}
+    height={$height}
     class="react-flow__connectionline"
   >
-    <g class={cc(['react-flow__connection', $connectionStore.status])}>
-      <path d={$connectionPathStore} fill="none" class="react-flow__connection-path" />
+    <g class={cc(['react-flow__connection', $connection.status])}>
+      <path d={$connectionPath} fill="none" class="react-flow__connection-path" />
     </g>
   </svg>
 {/if}

packages/svelte/src/lib/components/Handle/handler.ts

@@ -38,7 +38,7 @@ export function handlePointerDown({
 	connectionMode,
 	connectionRadius,
 	isTarget,
-	transformStore,
+	transform: transformStore,
 	panBy,
 	updateConnection,
 	cancelConnection,
@@ -56,7 +56,7 @@ export function handlePointerDown({
 	nodes: Node[];
 	connectionRadius: number;
 	isValidConnection: ValidConnectionFunc;
-	transformStore: Writable<Transform>;
+	transform: Writable<Transform>;
 	updateConnection: (connection: Partial<ConnectionData>) => void;
 	cancelConnection: () => void;
 	panBy: (delta: XYPosition) => void;

packages/svelte/src/lib/components/Handle/index.svelte

@@ -22,11 +22,11 @@
   const handleId = id || null;
 
   const {
-    connectionModeStore,
-    domNodeStore,
-    nodesStore,
-    connectionRadiusStore,
-    transformStore,
+    connectionMode,
+    domNode,
+    nodes,
+    connectionRadius,
+    transform,
     addEdge,
     panBy,
     cancelConnection,
@@ -49,11 +49,11 @@
           handleId,
           nodeId,
           isTarget,
-          connectionRadius: $connectionRadiusStore,
-          domNode: $domNodeStore,
-          nodes: $nodesStore,
-          connectionMode: $connectionModeStore,
-          transformStore,
+          connectionRadius: $connectionRadius,
+          domNode: $domNode,
+          nodes: $nodes,
+          connectionMode: $connectionMode,
+          transform,
           isValidConnection: isValidConnection!,
           onConnect: onConnectExtended,
           updateConnection,

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

@@ -5,7 +5,7 @@
   import type { KeyHandlerProps } from './KeyHandler'
 	import type { KeyDefinition, KeyDefinitionObject } from '$lib/types';
 
-  const { selectionKeyPressedStore, deleteKeyPressedStore } = useStore();
+  const { selectionKeyPressed, deleteKeyPressed } = useStore();
 
   type $$Props = KeyHandlerProps;
 
@@ -25,19 +25,19 @@
 
 <svelte:window
   use:shortcut={{ 
-    trigger: [{ key: selectionKeyString, modifier: selectionKeyModifier, callback: () => selectionKeyPressedStore.set(true) }],
+    trigger: [{ key: selectionKeyString, modifier: selectionKeyModifier, callback: () => selectionKeyPressed.set(true) }],
     type: 'keydown'
   }}
   use:shortcut={{ 
-    trigger: [{ key: selectionKeyString, modifier: selectionKeyModifier, callback: () => selectionKeyPressedStore.set(false) }],
+    trigger: [{ key: selectionKeyString, modifier: selectionKeyModifier, callback: () => selectionKeyPressed.set(false) }],
     type: 'keyup'
   }}
   use:shortcut={{ 
-    trigger: [{ key: deleteKeyString, modifier: deleteKeyModifier, callback: () => deleteKeyPressedStore.set(true) }],
+    trigger: [{ key: deleteKeyString, modifier: deleteKeyModifier, callback: () => deleteKeyPressed.set(true) }],
     type: 'keydown'
   }}
   use:shortcut={{ 
-    trigger: [{ key: deleteKeyString, modifier: deleteKeyModifier, callback: () => deleteKeyPressedStore.set(false) }],
+    trigger: [{ key: deleteKeyString, modifier: deleteKeyModifier, callback: () => deleteKeyPressed.set(false) }],
     type: 'keyup'
   }}
 />

packages/svelte/src/lib/components/NodeSelection/index.svelte

@@ -5,20 +5,20 @@
   import Selection from '$lib/components/Selection/index.svelte';
   import drag  from '$lib/actions/drag'
 
-  const { selectionRectModeStore, nodesStore, nodeOriginStore, transformStore, updateNodePositions } = useStore();
+  const { selectionRectMode, nodes, nodeOrigin, transform, updateNodePositions } = useStore();
 
-  $: selectedNodes = $nodesStore.filter(n => n.selected);
-  $: rect = getRectOfNodes(selectedNodes, $nodeOriginStore);
+  $: selectedNodes = $nodes.filter(n => n.selected);
+  $: rect = getRectOfNodes(selectedNodes, $nodeOrigin);
 </script> 
 
 {#if selectedNodes}
   <div
     class="selection-wrapper nopan"
     style={`width: ${rect.width}px; height: ${rect.height}px; transform: translate(${rect.x}px, ${rect.y}px)`}
-    use:drag={{ nodesStore, transformStore, updateNodePositions }}
+    use:drag={{ nodes, transform, updateNodePositions }}
   />
   <Selection
-    isVisible={$selectionRectModeStore === 'nodes'}
+    isVisible={$selectionRectMode === 'nodes'}
     width={rect.width}
     height={rect.height}
     x={rect.x}

packages/svelte/src/lib/components/UserSelection/index.svelte

@@ -2,13 +2,13 @@
   import { useStore } from '$lib/store';
   import Selection from '$lib/components/Selection/index.svelte';
 
-  const { selectionRectStore, selectionRectModeStore } = useStore();
+  const { selectionRect, selectionRectMode } = useStore();
 </script> 
 
 <Selection
-  isVisible={!!($selectionRectStore && $selectionRectModeStore === 'user')}
-  width={$selectionRectStore?.width}
-  height={$selectionRectStore?.height}
-  x={$selectionRectStore?.x}
-  y={$selectionRectStore?.y}
+  isVisible={!!($selectionRect && $selectionRectMode === 'user')}
+  width={$selectionRect?.width}
+  height={$selectionRect?.height}
+  x={$selectionRect?.x}
+  y={$selectionRect?.y}
 />

packages/svelte/src/lib/components/edges/EdgeWrapper.svelte

@@ -22,8 +22,8 @@
   export let selected: $$Props['selected'] = false;
   export let label: $$Props['label'] = undefined;
 
-  const { edgeTypesStore } = useStore();
-  const edgeComponent: typeof SvelteComponentTyped<EdgeProps> = $edgeTypesStore[type!] || BezierEdge;
+  const { edgeTypes } = useStore();
+  const edgeComponent: typeof SvelteComponentTyped<EdgeProps> = $edgeTypes[type!] || BezierEdge;
 </script>
 
 <g

packages/svelte/src/lib/components/nodes/NodeWrapper.svelte

@@ -28,8 +28,8 @@
 
   let nodeRef: HTMLDivElement;
 
-  const { nodesStore, transformStore, nodeTypesStore, updateNodePositions, addSelectedNodes } = useStore();
-  const nodeComponent: typeof SvelteComponentTyped<Partial<NodeProps>> = $nodeTypesStore[type] || DefaultNode;
+  const { nodes, transform, nodeTypes, updateNodePositions, addSelectedNodes } = useStore();
+  const nodeComponent: typeof SvelteComponentTyped<Partial<NodeProps>> = $nodeTypes[type] || DefaultNode;
   const isSelectable = true;
   const selectNodesOnDrag = false;
   const isDraggable = true;
@@ -58,7 +58,7 @@
 </script>
 
 <div
-  use:drag={{ nodeId: id, nodesStore, transformStore, updateNodePositions }}
+  use:drag={{ nodeId: id, nodes, transform, updateNodePositions }}
   class={cc(['react-flow__node', `react-flow__node-${type}`, className])}
   class:initializing={!width && !height}
   class:dragging={dragging}