refactor(store): connection data

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

@@ -36,6 +36,11 @@
   import { useStore } from '$lib/store';
   import { getConnectedEdges } from '$lib/utils';
   import type { Node, Edge } from '$lib/types';
+  import type { PaneProps } from './types';
+
+  type $$Props = PaneProps;
+
+  export let panOnDrag: $$Props['panOnDrag'] = undefined;
 
   const dispatch = createEventDispatcher();
   const {
@@ -133,9 +138,9 @@
 
     // We only want to trigger click functions when in selection mode if
     // the user did not move the mouse.
-    // if (!userSelectionActive && userSelectionRect && event.target === container.current) {
-    //   onClick?.(event);
-    // }
+    if (!isSelecting && $selectionRectMode === 'user' && event.target === container) {
+      onClick?.(event);
+    }
     selectionRect.set(null);
 
     if (selectedNodes.length > 0) {
@@ -155,10 +160,10 @@
   };
 
   const onContextMenu = (event: MouseEvent) => {
-    // if (Array.isArray(panOnDrag) && panOnDrag?.includes(2)) {
-    //   event.preventDefault();
-    //   return;
-    // }
+    if (Array.isArray(panOnDrag) && panOnDrag?.includes(2)) {
+      event.preventDefault();
+      return;
+    }
 
     dispatch('pane:contextmenu', event);
   };

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

@@ -0,0 +1,3 @@
+export type PaneProps = {
+  panOnDrag?: boolean | number[];
+};

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

@@ -167,7 +167,7 @@
     {panOnScroll}
     {panOnDrag}
   >
-    <Pane on:pane:click>
+    <Pane on:pane:click {panOnDrag}>
       <ViewportComponent>
         <EdgeRenderer on:edge:click />
         <ConnectionLine />

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

@@ -11,17 +11,11 @@ import type {
   OnMove,
   OnMoveEnd,
   CoordinateExtent,
-  PanOnScrollMode
+  PanOnScrollMode,
+  IsValidConnection
 } from '@reactflow/system';
 
-import type {
-  Edge,
-  Node,
-  NodeTypes,
-  KeyDefinition,
-  EdgeTypes,
-  IsValidConnection
-} from '$lib/types';
+import type { Edge, Node, NodeTypes, KeyDefinition, EdgeTypes } from '$lib/types';
 
 export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   id?: string;