feat(core): support touch for connection creation

packages/core/src/components/Handle/Handle.vue

@@ -15,7 +15,7 @@ const handle = ref<HTMLDivElement>()
 
 const handleId = $computed(() => id ?? `${nodeId}__handle-${position}`)
 
-const { onMouseDown, onClick } = useHandle({
+const { onMouseDown, onTouchStart, onClick } = useHandle({
   nodeId,
   handleId,
   isValidConnection,
@@ -94,6 +94,7 @@ export default {
       },
     ]"
     @mousedown="onMouseDown"
+    @touchstart="onTouchStart"
     @click="onClick"
   >
     <slot :id="id" />

packages/core/src/composables/useHandle.ts

@@ -1,6 +1,6 @@
 import type { MaybeRef } from '@vueuse/core'
 import { isFunction } from '@vueuse/core'
-import type { Connection, Getters, GraphEdge, HandleType, ValidConnectionFunc } from '~/types'
+import type { Connection, Getters, GraphEdge, HandleType, ValidConnectionFunc, XYPosition } from '~/types'
 import { ConnectionMode } from '~/types'
 
 interface Result {
@@ -22,7 +22,7 @@ interface UseHandleProps {
 
 // checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
 export const checkElementBelowIsValid = (
-  event: MouseEvent,
+  event: MouseEvent | TouchEvent,
   connectionMode: ConnectionMode,
   isTarget: boolean,
   nodeId: string,
@@ -32,7 +32,10 @@ export const checkElementBelowIsValid = (
   edges: GraphEdge[],
   getNode: Getters['getNode'],
 ) => {
-  const elementBelow = doc.elementFromPoint(event.clientX, event.clientY)
+  const clientX = (event as TouchEvent).touches ? (event as TouchEvent).touches[0].clientX : (event as MouseEvent).clientX
+  const clientY = (event as TouchEvent).touches ? (event as TouchEvent).touches[0].clientY : (event as MouseEvent).clientY
+
+  const elementBelow = doc.elementFromPoint(clientX, clientY)
   const elementBelowIsTarget = elementBelow?.classList.contains('target') || false
   const elementBelowIsSource = elementBelow?.classList.contains('source') || false
 
@@ -220,6 +223,118 @@ export default function useHandle({
     doc.addEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject)
   }
 
+  const lastTouchPos = ref<XYPosition>({ x: 0, y: 0 })
+
+  const onTouchStart = (event: TouchEvent) => {
+    const clientX = event.touches[0].clientX
+    const clientY = event.touches[0].clientY
+
+    const doc = getHostForElement(event.target as HTMLElement)
+    if (!doc) return
+
+    let validConnectFunc = isValidConnection
+
+    const node = getNode(unref(nodeId))
+
+    if (node && (typeof node.connectable === 'undefined' ? nodesConnectable : node.connectable) === false) return
+
+    if (!isValidConnection) {
+      if (node) validConnectFunc = !isTarget ? node.isValidTargetPos : node.isValidSourcePos
+    }
+
+    const elementBelow = doc.elementFromPoint(clientX, clientY)
+    const elementBelowIsTarget = elementBelow?.classList.contains('target')
+    const elementBelowIsSource = elementBelow?.classList.contains('source')
+
+    if (!vueFlowRef || (!elementBelowIsTarget && !elementBelowIsSource && !elementEdgeUpdaterType)) return
+
+    const handleType = elementEdgeUpdaterType ?? (elementBelowIsTarget ? 'target' : 'source')
+
+    const containerBounds = vueFlowRef.getBoundingClientRect()
+
+    startConnection(
+      {
+        nodeId: unref(nodeId),
+        handleId: unref(handleId),
+        type: unref(handleType),
+      },
+      {
+        x: clientX - containerBounds.left,
+        y: clientY - containerBounds.top,
+      },
+      event,
+    )
+
+    function onTouchMove(event: TouchEvent) {
+      updateConnection({
+        x: event.touches[0].clientX - containerBounds.left,
+        y: event.touches[0].clientY - containerBounds.top,
+      })
+
+      lastTouchPos.value = {
+        x: event.touches[0].clientX,
+        y: event.touches[0].clientY,
+      }
+
+      const { connection, elementBelow, isValid, isHoveringHandle } = checkElementBelowIsValid(
+        event,
+        connectionMode,
+        unref(isTarget),
+        unref(nodeId),
+        unref(handleId),
+        validConnectFunc,
+        doc,
+        edges,
+        getNode,
+      )
+
+      if (!isHoveringHandle) return resetRecentHandle(recentHoveredHandle)
+
+      const isOwnHandle = connection.source === connection.target
+
+      if (!isOwnHandle && elementBelow) {
+        recentHoveredHandle = elementBelow
+        elementBelow.classList.add('vue-flow__handle-connecting')
+        elementBelow.classList.toggle('vue-flow__handle-valid', isValid)
+      }
+    }
+
+    function onTouchEnd(event: TouchEvent) {
+      const { connection, isValid } = checkElementBelowIsValid(
+        { clientX: lastTouchPos.value.x, clientY: lastTouchPos.value.y } as unknown as MouseEvent,
+        connectionMode,
+        unref(isTarget),
+        unref(nodeId),
+        unref(handleId),
+        validConnectFunc,
+        doc,
+        edges,
+        getNode,
+      )
+
+      const isOwnHandle = connection.source === connection.target
+
+      if (isValid && !isOwnHandle) {
+        if (!onEdgeUpdate) emits.connect(connection)
+        else onEdgeUpdate(connection)
+      }
+
+      if (elementEdgeUpdaterType) onEdgeUpdateEnd?.()
+
+      resetRecentHandle(recentHoveredHandle)
+
+      endConnection(event)
+
+      lastTouchPos.value = { x: 0, y: 0 }
+
+      doc.removeEventListener('touchmove', onTouchMove as EventListenerOrEventListenerObject)
+      doc.removeEventListener('touchend', onTouchEnd as EventListenerOrEventListenerObject)
+    }
+
+    doc.addEventListener('touchmove', onTouchMove as EventListenerOrEventListenerObject)
+    doc.addEventListener('touchend', onTouchEnd as EventListenerOrEventListenerObject)
+  }
+
   const onClick = (event: MouseEvent) => {
     if (!connectOnClick) return
 
@@ -260,6 +375,7 @@ export default function useHandle({
 
   return {
     onMouseDown,
+    onTouchStart,
     onClick,
   }
 }

packages/core/src/types/hooks.ts

@@ -54,9 +54,9 @@ export interface FlowEvents {
   miniMapNodeMouseLeave: NodeMouseEvent
   connect: Connection
   connectStart: {
-    event?: MouseEvent
+    event?: MouseEvent | TouchEvent
   } & OnConnectStartParams
-  connectEnd: MouseEvent | undefined
+  connectEnd: MouseEvent | TouchEvent | undefined
   paneReady: VueFlowStore
   move: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }
   moveStart: { event: D3ZoomEvent<HTMLDivElement, any>; flowTransform: ViewpaneTransform }

packages/core/src/types/store.ts

@@ -220,11 +220,11 @@ export interface Actions extends ViewportFunctions {
   /** force update node internal data, if handle bounds are incorrect, you might want to use this */
   updateNodeInternals: UpdateNodeInternals
   /** start a connection */
-  startConnection: (startHandle: StartHandle, position?: XYPosition, event?: MouseEvent, isClick?: boolean) => void
+  startConnection: (startHandle: StartHandle, position?: XYPosition, event?: MouseEvent | TouchEvent, isClick?: boolean) => void
   /** update connection position */
   updateConnection: (position: XYPosition) => void
   /** end (or cancel) a connection */
-  endConnection: (event?: MouseEvent, isClick?: boolean) => void
+  endConnection: (event?: MouseEvent | TouchEvent, isClick?: boolean) => void
 
   /** internal position updater, you probably don't want to use this */
   updateNodePositions: UpdateNodePosition