fix(svelte): add nodesDraggable

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

@@ -5,6 +5,7 @@
 
   import { useStore } from '$lib/store';
   import type { HandleComponentProps } from '$lib/types';
+  import type { Writable } from 'svelte/store';
 
   type $$Props = HandleComponentProps;
 
@@ -12,16 +13,17 @@
   export let type: $$Props['type'] = 'source';
   export let position: $$Props['position'] = Position.Top;
   export let style: $$Props['style'] = undefined;
-  export let isConnectable: $$Props['isConnectable'] = true;
-  export let isConnectableStart: $$Props['isConnectableStart'] = true;
-  export let isConnectableEnd: $$Props['isConnectableEnd'] = true;
+  export let isConnectable: $$Props['isConnectable'] = undefined;
+  // export let isConnectableStart: $$Props['isConnectableStart'] = undefined;
+  // export let isConnectableEnd: $$Props['isConnectableEnd'] = undefined;
 
   let className: $$Props['class'] = undefined;
   export { className as class };
 
   const isTarget = type === 'target';
   const nodeId = getContext<string>('svelteflow__node_id');
-  // const connectable = getContext<string>('svelteflow__node_connectable');
+  const connectable = getContext<Writable<boolean>>('svelteflow__node_connectable');
+  $: handleConnectable = isConnectable !== undefined ? isConnectable : $connectable;
 
   const handleId = id || null;
   const dispatch = createEventDispatcher();
@@ -73,6 +75,8 @@
       });
     }
   }
+
+  // @todo implement connectablestart, connectableend
 </script>
 
 <div
@@ -90,10 +94,10 @@
   ])}
   class:source={!isTarget}
   class:target={isTarget}
-  class:connectablestart={isConnectableStart}
-  class:connectableend={isConnectableEnd}
-  class:connectable={isConnectable}
-  class:connectionindicator={isConnectable}
+  class:connectablestart={handleConnectable}
+  class:connectableend={handleConnectable}
+  class:connectable={handleConnectable}
+  class:connectionindicator={handleConnectable}
   on:mousedown={onPointerDown}
   on:touchstart={onPointerDown}
   {style}

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

@@ -13,6 +13,7 @@
   import { useStore } from '$lib/store';
   import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
   import type { NodeWrapperProps } from './types';
+  import { writable } from 'svelte/store';
 
   interface $$Props extends NodeWrapperProps {}
 
@@ -50,9 +51,14 @@
   const nodeComponent: ComponentType<SvelteComponent<NodeProps>> = $nodeTypes[type!] || DefaultNode;
   const selectNodesOnDrag = false;
   const dispatch = createEventDispatcher();
+  const connectableStore = writable(connectable);
+
+  $: {
+    connectableStore.set(!!connectable);
+  }
 
   setContext('svelteflow__node_id', id);
-  setContext('svelteflow__node_connectable', connectable);
+  setContext('svelteflow__node_connectable', connectableStore);
 
   onMount(() => {
     resizeObserver?.observe(nodeRef);
@@ -75,7 +81,6 @@
 
     dispatchEvent('nodeclick');
   }
-
   // @todo: add selectable state
 </script>