admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 02:21:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): Implement canvas zoom UX improvements (#7376)

Browse Source 
- Fix pinch-to-zoom
- Support command + scroll to zoom
- Improve accuracy of zooming (scroll more = zoom more)
- Zoom limits
- Zoom relative to mouse position
This commit is contained in:
Elias Meire
2023-10-10 11:07:58 +02:00
committed by GitHub
parent 0847623f85
commit 7e06b31a5f
10 changed files with 141 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
cypress/e2e/12-canvas.cy.ts
View File

@@ -14,8 +14,11 @@ const WorkflowPage = new WorkflowPageClass();
const DEFAULT_ZOOM_FACTOR = 1;
const ZOOM_IN_X1_FACTOR = 1.25; // Zoom in factor after one click
const ZOOM_IN_X2_FACTOR = 1.5625; // Zoom in factor after two clicks
const ZOOM_OUT_X1_FACTOR = 0.8;
const ZOOM_OUT_X2_FACTOR = 0.64;
const ZOOM_OUT_X1_FACTOR = 0.75;
const ZOOM_OUT_X2_FACTOR = 0.5625;
const PINCH_ZOOM_IN_FACTOR = 1.32;
const PINCH_ZOOM_OUT_FACTOR = 0.4752;
const RENAME_NODE_NAME = 'Something else';
describe('Canvas Node Manipulation and Navigation', () => {
@@ -203,6 +206,26 @@ describe('Canvas Node Manipulation and Navigation', () => {
);
});
it('should zoom using pinch to zoom', () => {
WorkflowPage.actions.pinchToZoom(2, 'zoomIn');
WorkflowPage.getters
.nodeView()
.should(
'have.css',
'transform',
`matrix(${PINCH_ZOOM_IN_FACTOR}, 0, 0, ${PINCH_ZOOM_IN_FACTOR}, 0, 0)`,
);
WorkflowPage.actions.pinchToZoom(4, 'zoomOut');
WorkflowPage.getters
.nodeView()
.should(
'have.css',
'transform',
`matrix(${PINCH_ZOOM_OUT_FACTOR}, 0, 0, ${PINCH_ZOOM_OUT_FACTOR}, 0, 0)`,
);
});
it('should reset zoom', () => {
// Reset zoom should not appear until zoom level changed
WorkflowPage.getters.resetZoomButton().should('not.exist');