diff --git a/packages/system/src/xypanzoom/XYPanZoom.ts b/packages/system/src/xypanzoom/XYPanZoom.ts index 372e6134..88ec5b59 100644 --- a/packages/system/src/xypanzoom/XYPanZoom.ts +++ b/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 + // if double tapping on touch screens circumvents the filter and + // dblclick.zoom is triggered on the selection directly + if (zoomOnDoubleClick) { + d3Selection.on('dblclick.zoom', d3DblClickZoomHandler); + } else { + d3Selection.on('dblclick.zoom', null); + } } function destroy() { diff --git a/packages/system/src/xypanzoom/filter.ts b/packages/system/src/xypanzoom/filter.ts index 3e2cec14..4cde936b 100644 --- a/packages/system/src/xypanzoom/filter.ts +++ b/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;