fix(nodes): drag nodes on touch screens

dist/ReactFlow.esm.js

@@ -9165,9 +9165,10 @@ var ResizeObserver_2 = ResizeObserver_1.ResizeObserver;
 var ResizeObserver_3 = ResizeObserver_1.install;
 
 var onStart = function (evt, onClick, id, type, data, setOffset, transform, position) {
+    var startEvt = evt instanceof TouchEvent ? evt.touches[0] : evt;
     var scaledClient = {
-        x: evt.clientX * (1 / transform[2]),
+        x: startEvt.clientX * (1 / transform[2]),
-        y: evt.clientY * (1 / transform[2]),
+        y: startEvt.clientY * (1 / transform[2]),
     };
     var offsetX = scaledClient.x - position.x - transform[0];
     var offsetY = scaledClient.y - position.y - transform[1];
@@ -9177,9 +9178,10 @@ var onStart = function (evt, onClick, id, type, data, setOffset, transform, posi
     onClick(node);
 };
 var onDrag = function (evt, setDragging, id, offset, transform) {
+    var dragEvt = evt instanceof TouchEvent ? evt.touches[0] : evt;
     var scaledClient = {
-        x: evt.clientX * (1 / transform[2]),
+        x: dragEvt.clientX * (1 / transform[2]),
-        y: evt.clientY * (1 / transform[2]),
+        y: dragEvt.clientY * (1 / transform[2]),
     };
     setDragging(true);
     store.dispatch.updateNodePos({

dist/ReactFlow.js

@@ -9172,9 +9172,10 @@ var ResizeObserver_2 = ResizeObserver_1.ResizeObserver;
 var ResizeObserver_3 = ResizeObserver_1.install;
 
 var onStart = function (evt, onClick, id, type, data, setOffset, transform, position) {
+    var startEvt = evt instanceof TouchEvent ? evt.touches[0] : evt;
     var scaledClient = {
-        x: evt.clientX * (1 / transform[2]),
+        x: startEvt.clientX * (1 / transform[2]),
-        y: evt.clientY * (1 / transform[2]),
+        y: startEvt.clientY * (1 / transform[2]),
     };
     var offsetX = scaledClient.x - position.x - transform[0];
     var offsetY = scaledClient.y - position.y - transform[1];
@@ -9184,9 +9185,10 @@ var onStart = function (evt, onClick, id, type, data, setOffset, transform, posi
     onClick(node);
 };
 var onDrag = function (evt, setDragging, id, offset, transform) {
+    var dragEvt = evt instanceof TouchEvent ? evt.touches[0] : evt;
     var scaledClient = {
-        x: evt.clientX * (1 / transform[2]),
+        x: dragEvt.clientX * (1 / transform[2]),
-        y: evt.clientY * (1 / transform[2]),
+        y: dragEvt.clientY * (1 / transform[2]),
     };
     setDragging(true);
     store.dispatch.updateNodePos({

src/components/Handle/BaseHandle.tsx

@@ -155,7 +155,7 @@ const BaseHandle = memo(
         data-nodeid={nodeIdWithHandleId}
         data-handlepos={position}
         className={handleClasses}
-        onMouseDown={evt =>
+        onMouseDown={(evt) =>
           onMouseDown(evt, nodeIdWithHandleId, setSourceId, setPosition, onConnect, isTarget, isValidConnection)
         }
         {...rest}

src/components/Nodes/wrapNode.tsx

@@ -8,7 +8,7 @@ import store from '../../store';
 import { Node, XYPosition, Transform, ElementId, NodeComponentProps, WrapNodeProps } from '../../types';
 
 const onStart = (
-  evt: MouseEvent,
+  evt: MouseEvent | TouchEvent,
   onClick: (node: Node) => void,
   id: ElementId,
   type: string,
@@ -17,9 +17,11 @@ const onStart = (
   transform: Transform,
   position: XYPosition
 ): false | void => {
+  const startEvt = evt instanceof TouchEvent ? evt.touches[0] : evt;
+
   const scaledClient: XYPosition = {
-    x: evt.clientX * (1 / transform[2]),
+    x: startEvt.clientX * (1 / transform[2]),
-    y: evt.clientY * (1 / transform[2]),
+    y: startEvt.clientY * (1 / transform[2]),
   };
   const offsetX = scaledClient.x - position.x - transform[0];
   const offsetY = scaledClient.y - position.y - transform[1];
@@ -31,15 +33,17 @@ const onStart = (
 };
 
 const onDrag = (
-  evt: MouseEvent,
+  evt: MouseEvent | TouchEvent,
   setDragging: (isDragging: boolean) => void,
   id: ElementId,
   offset: XYPosition,
   transform: Transform
 ): void => {
+  const dragEvt = evt instanceof TouchEvent ? evt.touches[0] : evt;
+
   const scaledClient = {
-    x: evt.clientX * (1 / transform[2]),
+    x: dragEvt.clientX * (1 / transform[2]),
-    y: evt.clientY * (1 / transform[2]),
+    y: dragEvt.clientY * (1 / transform[2]),
   };
 
   setDragging(true);
@@ -111,7 +115,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         if (nodeElement.current) {
           updateNode();
 
-          const resizeObserver = new ResizeObserver(entries => {
+          const resizeObserver = new ResizeObserver((entries) => {
             for (let _ of entries) {
               updateNode();
             }
@@ -131,8 +135,8 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
 
       return (
         <DraggableCore
-          onStart={evt => onStart(evt as MouseEvent, onClick, id, type, data, setOffset, transform, position)}
+          onStart={(evt) => onStart(evt as MouseEvent, onClick, id, type, data, setOffset, transform, position)}
-          onDrag={evt => onDrag(evt as MouseEvent, setDragging, id, offset, transform)}
+          onDrag={(evt) => onDrag(evt as MouseEvent, setDragging, id, offset, transform)}
           onStop={() => onStop(onNodeDragStop, isDragging, setDragging, id, type, position, data)}
           scale={transform[2]}
           disabled={!isInteractive}