prevent pinch zooming while making a new conection

packages/react/src/container/ZoomPane/index.tsx

@@ -25,6 +25,7 @@ type ZoomPaneProps = Omit<
 const selector = (s: ReactFlowState) => ({
   userSelectionActive: s.userSelectionActive,
   lib: s.lib,
+  connectionInProgress: s.connection.inProgress,
 });
 
 export function ZoomPane({
@@ -51,7 +52,7 @@ export function ZoomPane({
 }: ZoomPaneProps) {
   const store = useStoreApi();
   const zoomPane = useRef<HTMLDivElement>(null);
-  const { userSelectionActive, lib } = useStore(selector, shallow);
+  const { userSelectionActive, lib, connectionInProgress } = useStore(selector, shallow);
   const zoomActivationKeyPressed = useKeyPress(zoomActivationKeyCode);
   const panZoom = useRef<PanZoomInstance>();
 
@@ -126,6 +127,7 @@ export function ZoomPane({
       noWheelClassName,
       lib,
       onTransformChange,
+      connectionInProgress,
     });
   }, [
     onPaneContextMenu,
@@ -143,6 +145,7 @@ export function ZoomPane({
     noWheelClassName,
     lib,
     onTransformChange,
+    connectionInProgress,
   ]);
 
   return (

packages/svelte/src/lib/actions/zoom/index.ts

@@ -37,6 +37,7 @@ type ZoomParams = {
   paneClickDistance: number;
   onTransformChange: (transform: Transform) => void;
   onDraggingChange: (dragging: boolean) => void;
+  connectionInProgress: boolean;
 };
 
 export default function zoom(domNode: Element, params: ZoomParams) {

packages/svelte/src/lib/container/Zoom/Zoom.svelte

@@ -70,7 +70,8 @@
     paneClickDistance,
     onTransformChange: (transform: Transform) => {
       store.viewport = { x: transform[0], y: transform[1], zoom: transform[2] };
-    }
+    },
+    connectionInProgress: store.connection.inProgress
   }}
 >
   {@render children()}

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;