admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 01:56:46 +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');

29
cypress/pages/workflow.ts
View File

@@ -143,11 +143,14 @@ export class WorkflowPage extends BasePage {
this.getters.nodeCreatorSearchBar().type('{enter}');
if (opts?.action) {
// Expand actions category if it's collapsed
nodeCreator.getters.getCategoryItem('Actions').parent().then(($el) => {
if ($el.attr('data-category-collapsed') === 'true') {
nodeCreator.getters.getCategoryItem('Actions').click();
}
});
nodeCreator.getters
.getCategoryItem('Actions')
.parent()
.then(($el) => {
if ($el.attr('data-category-collapsed') === 'true') {
nodeCreator.getters.getCategoryItem('Actions').click();
}
});
nodeCreator.getters.getCreatorItem(opts.action).click();
} else if (!opts?.keepNdvOpen) {
cy.get('body').type('{esc}');
@@ -249,6 +252,17 @@ export class WorkflowPage extends BasePage {
zoomToFit: () => {
cy.getByTestId('zoom-to-fit').click();
},
pinchToZoom: (steps: number, mode: 'zoomIn' | 'zoomOut' = 'zoomIn') => {
// Pinch-to-zoom simulates a 'wheel' event with ctrlKey: true (same as zooming by scrolling)
this.getters.nodeViewBackground().trigger('wheel', {
force: true,
bubbles: true,
ctrlKey: true,
pageX: cy.window().innerWidth / 2,
pageY: cy.window().innerHeight / 2,
deltaY: mode === 'zoomOut' ? 16 * steps : -16 * steps,
});
},
hitUndo: () => {
cy.get('body').type(META_KEY, { delay: 500, release: false }).type('z');
},
@@ -311,10 +325,7 @@ export class WorkflowPage extends BasePage {
this.getters.stickies().dblclick().find('textarea').clear().type(content).type('{esc}');
},
shouldHaveWorkflowName: (name: string) => {
this.getters
.workflowNameInputContainer()
.invoke('attr', 'title')
.should('include', name);
this.getters.workflowNameInputContainer().invoke('attr', 'title').should('include', name);
},
};
}