Merge pull request #4342 from xyflow/fix-node-drag-zoom

abort drag when multiple touches are detected

packages/system/src/xydrag/XYDrag.ts

@@ -100,6 +100,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
   let containerBounds: DOMRect | null = null;
   let dragStarted = false;
   let d3Selection: Selection<Element, unknown, null, undefined> | null = null;
+  let abortDrag = false; // prevents unintentional dragging on multitouch
 
   // public functions
   function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId }: DragUpdateParams) {
@@ -264,6 +265,8 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
       .on('start', (event: UseDragEvent) => {
         const { domNode, nodeDragThreshold, transform, snapGrid, snapToGrid } = getStoreItems();
 
+        abortDrag = false;
+
         if (nodeDragThreshold === 0) {
           startDrag(event);
         }
@@ -277,6 +280,14 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
         const { autoPanOnNodeDrag, transform, snapGrid, snapToGrid, nodeDragThreshold } = getStoreItems();
         const pointerPos = getPointerPosition(event.sourceEvent, { transform, snapGrid, snapToGrid });
 
+        if (event.sourceEvent.type === 'touchmove' && event.sourceEvent.touches.length > 1) {
+          abortDrag = true;
+        }
+
+        if (abortDrag) {
+          return;
+        }
+
         if (!autoPanStarted && autoPanOnNodeDrag && dragStarted) {
           autoPanStarted = true;
           autoPan();
@@ -301,7 +312,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
         }
       })
       .on('end', (event: UseDragEvent) => {
-        if (!dragStarted) {
+        if (!dragStarted || abortDrag) {
           return;
         }