feat(svelte): add selectionMode prop

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

@@ -1,12 +1,12 @@
 <script lang="ts">
+  
   import { createEventDispatcher, onMount, setContext, SvelteComponentTyped } from 'svelte';
   import cc from 'classcat';
-  import { errorMessages } from '@reactflow/system';
+  import { errorMessages, type NodeProps } from '@reactflow/system';
 
   import drag from '$lib/actions/drag';
   import { useStore } from '$lib/store';
   import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
-  import type { NodeProps } from '$lib/types';
   import type { NodeWrapperProps } from './types';
 
   interface $$Props extends NodeWrapperProps {}
@@ -72,6 +72,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   use:drag={{ nodeId: id, nodes, transform, updateNodePositions }}
   bind:this={nodeRef}

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -46,12 +46,12 @@
     selectionRect,
     selectionRectMode,
     selectionKeyPressed,
-    resetSelectedElements
+    resetSelectedElements,
+    selectionMode
   } = useStore();
 
   // @todo take from props
   const elementsSelectable = true;
-  const selectionMode = SelectionMode.Partial;
 
   let container: HTMLDivElement;
   let containerBounds: DOMRect | null = null;
@@ -115,7 +115,7 @@
       $nodes,
       nextUserSelectRect,
       $transform,
-      selectionMode === SelectionMode.Partial,
+      $selectionMode === SelectionMode.Partial,
       true
     );
     const selectedEdgeIds = getConnectedEdges(selectedNodes, $edges).map((e) => e.id);

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -25,6 +25,7 @@
   export let nodeTypes: $$Props['nodeTypes'] = undefined;
   export let edgeTypes: $$Props['edgeTypes'] = undefined;
   export let selectionKey: $$Props['selectionKey'] = undefined;
+  export let selectionMode: $$Props['selectionMode'] = undefined;
   export let deleteKey: $$Props['deleteKey'] = undefined;
   export let connectionRadius: $$Props['connectionRadius'] = undefined;
   export let connectionLineType: $$Props['connectionLineType'] = undefined;
@@ -54,6 +55,7 @@
       id,
       connectionLineType,
       connectionRadius,
+      selectionMode,
       isValidConnection
     };
 

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -3,7 +3,8 @@ import type {
   ConnectionLineType,
   NodeOrigin,
   OnConnectStartParams,
-  Viewport
+  Viewport,
+  SelectionMode
 } from '@reactflow/system';
 
 import type {
@@ -27,6 +28,7 @@ export type SvelteFlowProps = {
   maxZoom?: number;
   initialViewport?: Viewport;
   connectionRadius?: number;
+  selectionMode?: SelectionMode;
 
   class?: string;
   style?: string;

packages/svelte/src/lib/index.ts

@@ -14,4 +14,8 @@ export * from '$lib/utils';
 
 export * from '$lib/hooks/useSvelteFlow';
 
+export * from '@reactflow/utils';
+export * from '@reactflow/system';
+export * from '@reactflow/edge-utils';
+
 export default SvelteFlow;

packages/svelte/src/lib/types/nodes.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import type { SvelteComponentTyped } from 'svelte';
-import type { BaseNode } from '@reactflow/system';
+import type { BaseNode, NodeProps } from '@reactflow/system';
 
 // @todo: currently the helper function only like Node from '@reactflow/core'
 // we need a base node type or helpes that accept Node like types
@@ -14,16 +14,6 @@ export type Node<
   style?: string;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type NodeProps<NodeData = any> = Pick<
-  Node<NodeData>,
-  'id' | 'data' | 'selected' | 'sourcePosition' | 'targetPosition'
-> & {
-  xPos: number;
-  yPos: number;
-  isConnectable?: boolean;
-};
-
 export type NodeTypes = Record<string, typeof SvelteComponentTyped<Partial<NodeProps>>>;
 
 export type DefaultNodeOptions = Partial<Omit<Node, 'id'>>;

packages/svelte/src/routes/overview/+page.svelte

@@ -8,7 +8,8 @@
     Panel,
     createNodes,
     createEdges,
-    type NodeTypes
+    type NodeTypes,
+    SelectionMode
   } from '../../lib/index';
   import { CustomNode } from '../../example-components/CustomNode';
 
@@ -113,6 +114,7 @@
     fitView
     minZoom={0.1}
     maxZoom={2.5}
+    selectionMode={SelectionMode.Full}
     initialViewport={{ x: 100, y: 100, zoom: 2 }}
     on:node:click={(event) => console.log('on node click', event)}
     on:node:mouseenter={(event) => console.log('on node enter', event)}