From d8b054c7d6e8bec10d1409fb44a8e4f1065c6216 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 17 Dec 2021 10:49:05 +0100
Subject: [PATCH] feat(props): add connectOnClick

---
 src/components/Handle/index.tsx       | 14 +++++++++++---
 src/components/StoreUpdater/index.tsx |  3 +++
 src/container/ReactFlow/index.tsx     |  3 +++
 src/store/initialState.ts             |  1 +
 src/types/general.ts                  |  2 ++
 5 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/Handle/index.tsx b/src/components/Handle/index.tsx
index fee87e81..2bb21e51 100644
--- a/src/components/Handle/index.tsx
+++ b/src/components/Handle/index.tsx
@@ -19,6 +19,7 @@ const selector = (s: ReactFlowState) => ({
   onConnectEnd: s.onConnectEnd,
   connectionMode: s.connectionMode,
   connectionStartHandle: s.connectionStartHandle,
+  connectOnClick: s.connectOnClick,
 });
 
 const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
@@ -38,8 +39,15 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
   ) => {
     const store = useStoreApi();
     const nodeId = useContext(NodeIdContext) as string;
-    const { onConnectAction, onConnectStart, onConnectStop, onConnectEnd, connectionMode, connectionStartHandle } =
-      useStore(selector, shallow);
+    const {
+      onConnectAction,
+      onConnectStart,
+      onConnectStop,
+      onConnectEnd,
+      connectionMode,
+      connectionStartHandle,
+      connectOnClick,
+    } = useStore(selector, shallow);
 
     const handleId = id || null;
     const isTarget = type === 'target';
@@ -147,7 +155,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
         data-handlepos={position}
         className={handleClasses}
         onMouseDown={onMouseDownHandler}
-        onClick={onClick}
+        onClick={connectOnClick ? onClick : undefined}
         ref={ref}
         {...rest}
       >
diff --git a/src/components/StoreUpdater/index.tsx b/src/components/StoreUpdater/index.tsx
index d2b5a37b..a1e8bc75 100644
--- a/src/components/StoreUpdater/index.tsx
+++ b/src/components/StoreUpdater/index.tsx
@@ -38,6 +38,7 @@ interface StoreUpdaterProps {
   snapGrid?: SnapGrid;
   translateExtent?: CoordinateExtent;
   fitViewOnInit: boolean;
+  connectOnClick: boolean;
 }
 
 const selector = (s: ReactFlowState) => ({
@@ -87,6 +88,7 @@ const StoreUpdater = ({
   snapToGrid,
   translateExtent,
   fitViewOnInit,
+  connectOnClick,
 }: StoreUpdaterProps) => {
   const { setNodes, setEdges, setMinZoom, setMaxZoom, setTranslateExtent, setNodeExtent, reset } = useStore(
     selector,
@@ -120,6 +122,7 @@ const StoreUpdater = ({
   useDirectStoreUpdater('snapGrid', snapGrid, store.setState);
   useDirectStoreUpdater('onNodesChange', onNodesChange, store.setState);
   useDirectStoreUpdater('onEdgesChange', onEdgesChange, store.setState);
+  useDirectStoreUpdater('connectOnClick', connectOnClick, store.setState);
 
   return null;
 };
diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx
index 0fa29f63..b6100292 100644
--- a/src/container/ReactFlow/index.tsx
+++ b/src/container/ReactFlow/index.tsx
@@ -134,6 +134,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   noWheelClassName?: string;
   noPanClassName?: string;
   fitViewOnInit?: boolean;
+  connectOnClick?: boolean;
 }
 
 export type ReactFlowRefType = HTMLDivElement;
@@ -221,6 +222,7 @@ const ReactFlow: FunctionComponent<ReactFlowProps> = forwardRef<ReactFlowRefType
       noWheelClassName = 'nowheel',
       noPanClassName = 'nopan',
       fitViewOnInit = false,
+      connectOnClick = true,
       ...rest
     },
     ref
@@ -309,6 +311,7 @@ const ReactFlow: FunctionComponent<ReactFlowProps> = forwardRef<ReactFlowRefType
             connectionMode={connectionMode}
             translateExtent={translateExtent}
             fitViewOnInit={fitViewOnInit}
+            connectOnClick={connectOnClick}
           />
           {onSelectionChange && <SelectionListener onSelectionChange={onSelectionChange} />}
           {children}
diff --git a/src/store/initialState.ts b/src/store/initialState.ts
index 41366ca3..7d7326c0 100644
--- a/src/store/initialState.ts
+++ b/src/store/initialState.ts
@@ -44,6 +44,7 @@ const initialState: ReactFlowStore = {
   fitViewOnInitDone: false,
 
   connectionStartHandle: null,
+  connectOnClick: true,
 };
 
 export default initialState;
diff --git a/src/types/general.ts b/src/types/general.ts
index 318f2472..bd6a3903 100644
--- a/src/types/general.ts
+++ b/src/types/general.ts
@@ -184,6 +184,8 @@ export type ReactFlowStore = {
   onConnectStart?: OnConnectStart;
   onConnectStop?: OnConnectStop;
   onConnectEnd?: OnConnectEnd;
+
+  connectOnClick: boolean;
 };
 
 export type ReactFlowActions = {