prevent pinch zooming while making a new conection

packages/system/src/types/panzoom.ts

@@ -42,6 +42,7 @@ export type PanZoomUpdateOptions = {
   zoomActivationKeyPressed: boolean;
   lib: string;
   onTransformChange: OnTransformChange;
+  connectionInProgress: boolean;
 };
 
 export type PanZoomInstance = {

packages/system/src/xypanzoom/XYPanZoom.ts

@@ -108,6 +108,7 @@ export function XYPanZoom({
     zoomActivationKeyPressed,
     lib,
     onTransformChange,
+    connectionInProgress,
   }: PanZoomUpdateOptions) {
     if (userSelectionActive && !zoomPanValues.isZoomingOrPanning) {
       destroy();
@@ -178,6 +179,7 @@ export function XYPanZoom({
       noPanClassName,
       noWheelClassName,
       lib,
+      connectionInProgress,
     });
     d3ZoomInstance.filter(filter);
 

packages/system/src/xypanzoom/filter.ts

@@ -12,6 +12,7 @@ export type FilterParams = {
   noWheelClassName: string;
   noPanClassName: string;
   lib: string;
+  connectionInProgress: boolean;
 };
 
 export function createFilter({
@@ -25,6 +26,7 @@ export function createFilter({
   noWheelClassName,
   noPanClassName,
   lib,
+  connectionInProgress,
 }: FilterParams) {
   return (event: any): boolean => {
     const zoomScroll = zoomActivationKeyPressed || zoomOnScroll;
@@ -48,6 +50,11 @@ export function createFilter({
       return false;
     }
 
+    // we want to disable pinch-zooming while making a connection
+    if (connectionInProgress) {
+      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;