feat(props): add connectOnClick

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 } =
+    const {
-      useStore(selector, shallow);
+      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}
       >

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;
 };

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}

src/store/initialState.ts

@@ -44,6 +44,7 @@ const initialState: ReactFlowStore = {
   fitViewOnInitDone: false,
 
   connectionStartHandle: null,
+  connectOnClick: true,
 };
 
 export default initialState;

src/types/general.ts

@@ -184,6 +184,8 @@ export type ReactFlowStore = {
   onConnectStart?: OnConnectStart;
   onConnectStop?: OnConnectStop;
   onConnectEnd?: OnConnectEnd;
+
+  connectOnClick: boolean;
 };
 
 export type ReactFlowActions = {