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

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