text(event-handler): add tests for pane handlers

examples/nextjs/cypress/components/reactflow/event-handlers.cy.tsx

@@ -103,6 +103,7 @@ describe('<ReactFlow />: Event handlers', () => {
         });
     });
   });
+
   describe('Edge event handlers', () => {
     it('handles onEdgeClick', () => {
       const onEdgeClick = cy.spy().as('onEdgeClick');
@@ -165,4 +166,42 @@ describe('<ReactFlow />: Event handlers', () => {
         });
     });
   });
+
+  describe('Pane event handlers', () => {
+    it('handles onMove handlers', () => {
+      const onMoveStart = cy.spy().as('onMoveStart');
+      const onMove = cy.spy().as('onMove');
+      const onMoveEnd = cy.spy().as('onMoveEnd');
+
+      cy.mount(<ControlledFlow onMoveStart={onMoveStart} onMove={onMove} onMoveEnd={onMoveEnd} />).then(() => {
+        expect(onMoveStart.callCount).to.be.eq(0);
+        expect(onMove.callCount).to.be.eq(0);
+        expect(onMoveEnd.callCount).to.be.eq(0);
+
+        cy.dragPane({ from: { x: 10, y: 200 }, to: { x: 100, y: 200 } }).then(() => {
+          expect(onMoveStart.callCount).to.be.eq(1);
+          expect(onMove.callCount).to.be.gt(0);
+          expect(onMoveEnd.callCount).to.be.eq(1);
+        });
+      });
+    });
+
+    it('handles click handlers', () => {
+      const onPaneClick = cy.spy().as('onPaneClick');
+      const onPaneContextMenu = cy.spy().as('onPaneContextMenu');
+
+      cy.mount(<ControlledFlow onPaneClick={onPaneClick} onPaneContextMenu={onPaneContextMenu} />).then(() => {
+        expect(onPaneClick.callCount).to.be.eq(0);
+        expect(onPaneContextMenu.callCount).to.be.eq(0);
+
+        cy.get('.react-flow__pane')
+          .rightclick()
+          .click()
+          .then(() => {
+            expect(onPaneClick.callCount).to.be.eq(1);
+            expect(onPaneContextMenu.callCount).to.be.eq(1);
+          });
+      });
+    });
+  });
 });

examples/nextjs/cypress/support/commands.ts

@@ -23,7 +23,7 @@ Cypress.Commands.add('dragPane', ({ from, to }) =>
     .then((window) =>
       cy
         .get('.react-flow__pane')
-        .trigger('mousedown', from.x, from.y, { which: 1, view: window })
+        .trigger('mousedown', from.x, from.y, { view: window })
         .trigger('mousemove', to.x, to.y)
         .trigger('mouseup', { force: true, view: window })
     )

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

@@ -257,7 +257,7 @@ const ZoomPane = ({
         }
 
         // default filter for d3-zoom
-        return (!event.ctrlKey || event.type === 'wheel') && event.button <= 1;
+        return (!event.ctrlKey || event.type === 'wheel') && (!event.button || event.button <= 1);
       });
     }
   }, [