Merge branch 'main' into refactor/promised-panzoom

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) {
@@ -172,6 +173,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() {
@@ -211,6 +221,7 @@ export function XYPanZoom({
         currentTransform.x !== viewport.x ||
         currentTransform.y !== viewport.y
       ) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         d3ZoomInstance?.transform(d3Selection, nextTransform, null, { sync: true });
       }

packages/system/src/xypanzoom/eventhandler.ts

@@ -78,10 +78,9 @@ export function createPanOnScrollHandler({
     event.stopImmediatePropagation();
 
     const currentZoom = d3Selection.property('__zoom').k || 1;
-    const _isMacOs = isMacOs();
 
     // macos sets ctrlKey=true for pinch gesture on a trackpad
-    if (event.ctrlKey && zoomOnPinch && _isMacOs) {
+    if (event.ctrlKey && zoomOnPinch) {
       const point = pointer(event);
       const pinchDelta = wheelDelta(event);
       const zoom = currentZoom * Math.pow(2, pinchDelta);
@@ -98,7 +97,7 @@ export function createPanOnScrollHandler({
     let deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize;
 
     // this enables vertical scrolling with shift + scroll on windows
-    if (!_isMacOs && event.shiftKey && panOnScrollMode !== PanOnScrollMode.Vertical) {
+    if (!isMacOs() && event.shiftKey && panOnScrollMode !== PanOnScrollMode.Vertical) {
       deltaX = event.deltaY * deltaNormalize;
       deltaY = 0;
     }
@@ -138,7 +137,10 @@ export function createPanOnScrollHandler({
 
 export function createZoomOnScrollHandler({ noWheelClassName, preventScrolling, d3ZoomHandler }: ZoomOnScrollParams) {
   return function (this: Element, event: any, d: unknown) {
-    if (!preventScrolling || isWrappedWithClass(event, noWheelClassName)) {
+    // we still want to enable pinch zooming even if preventScrolling is set to false
+    const preventZoom = !preventScrolling && event.type === 'wheel' && !event.ctrlKey;
+
+    if (preventZoom || isWrappedWithClass(event, noWheelClassName)) {
       return null;
     }
 
@@ -205,6 +207,7 @@ export function createPanZoomEndHandler({
     if (event.sourceEvent?.internal) {
       return;
     }
+
     zoomPanValues.isZoomingOrPanning = false;
 
     if (

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;
@@ -61,7 +56,7 @@ export function createFilter({
     // if the target element is inside an element with the nopan class, we prevent panning
     if (
       isWrappedWithClass(event, noPanClassName) &&
-      ((!panOnScroll && event.type !== 'wheel') || (panOnScroll && event.type === 'wheel'))
+      (event.type !== 'wheel' || (panOnScroll && event.type === 'wheel' && !zoomActivationKeyPressed))
     ) {
       return false;
     }
@@ -70,6 +65,11 @@ export function createFilter({
       return false;
     }
 
+    if (!zoomOnPinch && event.type === 'touchstart' && event.touches?.length > 1) {
+      event.preventDefault(); // if you manage to start with 2 touches, we prevent native zoom
+      return false;
+    }
+
     // when there is no scroll handling enabled, we prevent all wheel events
     if (!zoomScroll && !panOnScroll && !pinchZoom && event.type === 'wheel') {
       return false;
@@ -81,11 +81,7 @@ export function createFilter({
     }
 
     // if the pane is only movable using allowed clicks
-    if (
-      Array.isArray(panOnDrag) &&
-      !panOnDrag.includes(event.button) &&
-      (event.type === 'mousedown' || event.type === 'touchstart')
-    ) {
+    if (Array.isArray(panOnDrag) && !panOnDrag.includes(event.button) && event.type === 'mousedown') {
       return false;
     }
 

packages/system/src/xypanzoom/utils.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { type ZoomTransform, zoomIdentity } from 'd3-zoom';
 
 import { type D3SelectionInstance, type Viewport } from '../types';