feat(nodes): connect on touch device

src/components/Handle/handler.ts

@@ -23,7 +23,7 @@ type Result = {
 };
 
 // checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
-function checkElementBelowIsValid(
+export function checkElementBelowIsValid(
   event: MouseEvent,
   connectionMode: ConnectionMode,
   isTarget: boolean,

src/components/Handle/index.tsx

@@ -5,7 +5,8 @@ import shallow from 'zustand/shallow';
 import { useStore, useStoreApi } from '../../store';
 import NodeIdContext from '../../contexts/NodeIdContext';
 import { HandleProps, Connection, ReactFlowState, Position } from '../../types';
-import { onMouseDown } from './handler';
+import { checkElementBelowIsValid, onMouseDown } from './handler';
+import { getHostForElement } from '../../utils';
 
 const alwaysValid = () => true;
 
@@ -17,6 +18,7 @@ const selector = (s: ReactFlowState) => ({
   onConnectStop: s.onConnectStop,
   onConnectEnd: s.onConnectEnd,
   connectionMode: s.connectionMode,
+  connectionStartHandle: s.connectionStartHandle,
 });
 
 const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
@@ -36,10 +38,8 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
   ) => {
     const store = useStoreApi();
     const nodeId = useContext(NodeIdContext) as string;
-    const { onConnectAction, onConnectStart, onConnectStop, onConnectEnd, connectionMode } = useStore(
-      selector,
-      shallow
-    );
+    const { onConnectAction, onConnectStart, onConnectStop, onConnectEnd, connectionMode, connectionStartHandle } =
+      useStore(selector, shallow);
 
     const handleId = id || null;
     const isTarget = type === 'target';
@@ -83,6 +83,47 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
       ]
     );
 
+    const onClick = useCallback(
+      (event: React.MouseEvent) => {
+        if (!connectionStartHandle) {
+          onConnectStart?.(event, { nodeId, handleId, handleType: type });
+          store.setState({ connectionStartHandle: { nodeId, type, handleId } });
+        } else {
+          const doc = getHostForElement(event.target as HTMLElement);
+          const { connection, isValid } = checkElementBelowIsValid(
+            event as unknown as MouseEvent,
+            connectionMode,
+            connectionStartHandle.type === 'target',
+            connectionStartHandle.nodeId,
+            connectionStartHandle.handleId || null,
+            isValidConnection,
+            doc
+          );
+
+          onConnectStop?.(event as unknown as MouseEvent);
+
+          if (isValid) {
+            onConnectExtended(connection);
+          }
+
+          onConnectEnd?.(event as unknown as MouseEvent);
+
+          store.setState({ connectionStartHandle: null });
+        }
+      },
+      [
+        connectionStartHandle,
+        onConnectStart,
+        onConnectExtended,
+        onConnectStop,
+        onConnectEnd,
+        isTarget,
+        nodeId,
+        handleId,
+        type,
+      ]
+    );
+
     const handleClasses = cc([
       'react-flow__handle',
       `react-flow__handle-${position}`,
@@ -92,6 +133,10 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
         source: !isTarget,
         target: isTarget,
         connectable: isConnectable,
+        connecting:
+          connectionStartHandle?.nodeId === nodeId &&
+          connectionStartHandle?.handleId === handleId &&
+          connectionStartHandle?.type === type,
       },
     ]);
 
@@ -102,6 +147,7 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
         data-handlepos={position}
         className={handleClasses}
         onMouseDown={onMouseDownHandler}
+        onClick={onClick}
         ref={ref}
         {...rest}
       >