From 75434d059bdf2d488571888464c4bad7a88158b3 Mon Sep 17 00:00:00 2001
From: Peter <p.korcsak@googlemail.com>
Date: Mon, 25 Sep 2023 15:58:12 +0200
Subject: [PATCH] feat(svelte) added connectionMode prop

---
 examples/react/src/examples/Overview/index.tsx              | 2 ++
 examples/svelte/src/routes/overview/+page.svelte            | 4 +++-
 .../svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte   | 6 ++++--
 packages/svelte/src/lib/container/SvelteFlow/types.ts       | 4 +++-
 packages/svelte/src/lib/container/SvelteFlow/utils.ts       | 1 +
 5 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/examples/react/src/examples/Overview/index.tsx b/examples/react/src/examples/Overview/index.tsx
index 233aa76c..7b25f131 100644
--- a/examples/react/src/examples/Overview/index.tsx
+++ b/examples/react/src/examples/Overview/index.tsx
@@ -14,6 +14,7 @@ import {
   Controls,
   Background,
   MiniMap,
+  ConnectionMode,
 } from '@xyflow/react';
 
 const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag start', node, nodes);
@@ -193,6 +194,7 @@ const OverviewFlow = () => {
     <ReactFlow
       nodes={nodes}
       edges={edges}
+      connectionMode={ConnectionMode.Loose}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onNodeClick={onNodeClick}
diff --git a/examples/svelte/src/routes/overview/+page.svelte b/examples/svelte/src/routes/overview/+page.svelte
index 05bc506b..3e24ce11 100644
--- a/examples/svelte/src/routes/overview/+page.svelte
+++ b/examples/svelte/src/routes/overview/+page.svelte
@@ -11,7 +11,8 @@
 		type NodeTypes,
 		type EdgeTypes,
 		type Node,
-		type Edge
+		type Edge,
+		ConnectionMode
 	} from '@xyflow/svelte';
 
 	import CustomNode from './CustomNode.svelte';
@@ -161,6 +162,7 @@
 	}}
 	autoPanOnConnect
 	autoPanOnNodeDrag
+	connectionMode={ConnectionMode.Loose}
 >
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index d6e55ee2..0b578b63 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { onMount, hasContext } from 'svelte';
   import cc from 'classcat';
-  import { PanOnScrollMode, type Viewport } from '@xyflow/system';
+  import { ConnectionMode, PanOnScrollMode, type Viewport } from '@xyflow/system';
 
   import { Zoom } from '$lib/container/Zoom';
   import { Pane } from '$lib/container/Pane';
@@ -38,6 +38,7 @@
   export let deleteKey: $$Props['deleteKey'] = undefined;
   export let connectionRadius: $$Props['connectionRadius'] = undefined;
   export let connectionLineType: $$Props['connectionLineType'] = undefined;
+  export let connectionMode: $$Props['connectionMode'] = ConnectionMode.Strict;
   export let onMoveStart: $$Props['onMoveStart'] = undefined;
   export let onMove: $$Props['onMove'] = undefined;
   export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
@@ -108,7 +109,8 @@
       isValidConnection,
       autoPanOnConnect,
       autoPanOnNodeDrag,
-      onError
+      onError,
+      connectionMode
     };
 
     updateStoreByKeys(store, updatableProps);
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 04838c3a..4c99e74e 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -14,7 +14,8 @@ import type {
   IsValidConnection,
   HandleType,
   NodeBase,
-  OnError
+  OnError,
+  ConnectionMode
 } from '@xyflow/system';
 
 import type { Edge, Node, NodeTypes, KeyDefinition, EdgeTypes } from '$lib/types';
@@ -35,6 +36,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   maxZoom?: number;
   initialViewport?: Viewport;
   connectionRadius?: number;
+  connectionMode?: ConnectionMode;
   selectionMode?: SelectionMode;
   snapGrid?: SnapGrid;
   defaultMarkerColor?: string;
diff --git a/packages/svelte/src/lib/container/SvelteFlow/utils.ts b/packages/svelte/src/lib/container/SvelteFlow/utils.ts
index 8ad5547b..93092bea 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/utils.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/utils.ts
@@ -61,6 +61,7 @@ export type UpdatableStoreProps = {
   isValidConnection?: UnwrapWritable<SvelteFlowStore['isValidConnection']>;
   autoPanOnConnect?: UnwrapWritable<SvelteFlowStore['autoPanOnConnect']>;
   autoPanOnNodeDrag?: UnwrapWritable<SvelteFlowStore['autoPanOnNodeDrag']>;
+  connectionMode?: UnwrapWritable<SvelteFlowStore['connectionMode']>;
   onError?: UnwrapWritable<SvelteFlowStore['onError']>;
 };