feat(svelte): selection box

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

@@ -4,18 +4,23 @@
   import type { Node, Edge } from '@reactflow/system';
 
 	import { key, createStore } from '$lib/store';
+  import Zoom from '$lib/container/Zoom/index.svelte';
+  import Pane from '$lib/container/Pane/index.svelte';
   import Viewport from '$lib/container/Viewport.svelte';
   import NodeRenderer from '$lib/container/NodeRenderer.svelte';
   import EdgeRenderer from '$lib/container/EdgeRenderer/index.svelte';
+  import UserSelection from '$lib/components/UserSelection/index.svelte';
+  import NodeSelection from '$lib/components/NodeSelection/index.svelte';
+  import KeyHandler from '$lib/components/KeyHandler/index.svelte';
 
-  export let nodes: Node[];
-  export let edges: Edge[];
-  export let fitView: boolean;
-
-  export let className: string | null = null;
   export let id: string = '1';
+  export let nodes: Node[] = [];
+  export let edges: Edge[] = [];
+  export let fitView: boolean = false;
+
+  let className: string = '';
+  export { className as class };
 
-  let props = { ...$$restProps };
   let domNode: Element;
 
   const store = createStore({
@@ -35,19 +40,24 @@
   })
 </script>
 
-
 <div
-  {...props}
+  {...$$restProps}
   class={cc(['react-flow', className])}
   data-testid="rf__wrapper"
   id={id}
   bind:this={domNode}
 >
-  <Viewport>
-    <NodeRenderer />
-    <EdgeRenderer />
-  </Viewport>
-
+  <KeyHandler />
+  <Zoom>
+    <Pane>
+      <Viewport>
+        <NodeSelection />
+        <NodeRenderer />
+        <EdgeRenderer />
+      </Viewport>
+      <UserSelection />
+    </Pane>
+  </Zoom>
   <slot />
 </div>
 
@@ -59,5 +69,4 @@
     position: relative;
     z-index: 0;
   }
-
 </style>