Merge pull request #4040 from xyflow/d3-zoom-ios

fixed double tapping on touch devices circumvents zoomOnDoubleClick

packages/system/src/xypanzoom/XYPanZoom.ts

@@ -69,6 +69,7 @@ export function XYPanZoom({
   );
 
   const d3ZoomHandler = d3Selection.on('wheel.zoom')!;
+  const d3DblClickZoomHandler = d3Selection.on('dblclick.zoom')!;
   d3ZoomInstance.wheelDelta(wheelDelta);
 
   function setTransform(transform: ZoomTransform, options?: PanZoomTransformOptions) {
@@ -165,6 +166,15 @@ export function XYPanZoom({
       lib,
     });
     d3ZoomInstance.filter(filter);
+
+    // We cannot add zoomOnDoubleClick to the filter above because
+    // double tapping on touch screens circumvents the filter and
+    // dblclick.zoom is fired on the selection directly
+    if (zoomOnDoubleClick) {
+      d3Selection.on('dblclick.zoom', d3DblClickZoomHandler);
+    } else {
+      d3Selection.on('dblclick.zoom', null);
+    }
   }
 
   function destroy() {

packages/system/src/xypanzoom/filter.ts

@@ -48,11 +48,6 @@ export function createFilter({
       return false;
     }
 
-    // if zoom on double click is disabled, we prevent the double click event
-    if (!zoomOnDoubleClick && event.type === 'dblclick') {
-      return false;
-    }
-
     // if the target element is inside an element with the nowheel class, we prevent zooming
     if (isWrappedWithClass(event, noWheelClassName) && event.type === 'wheel') {
       return false;