diff --git a/examples/nextjs/cypress/components/reactflow/event-handlers.cy.tsx b/examples/nextjs/cypress/components/reactflow/event-handlers.cy.tsx
index c75e8918..dfe9f57d 100644
--- a/examples/nextjs/cypress/components/reactflow/event-handlers.cy.tsx
+++ b/examples/nextjs/cypress/components/reactflow/event-handlers.cy.tsx
@@ -103,6 +103,7 @@ describe(': Event handlers', () => {
});
});
});
+
describe('Edge event handlers', () => {
it('handles onEdgeClick', () => {
const onEdgeClick = cy.spy().as('onEdgeClick');
@@ -165,4 +166,42 @@ describe(': 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().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().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);
+ });
+ });
+ });
+ });
});
diff --git a/examples/nextjs/cypress/support/commands.ts b/examples/nextjs/cypress/support/commands.ts
index eaca8e6f..14302409 100644
--- a/examples/nextjs/cypress/support/commands.ts
+++ b/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 })
)
diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx
index c08ff01f..657ce573 100644
--- a/packages/core/src/container/ZoomPane/index.tsx
+++ b/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);
});
}
}, [