Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(editor): Zoom in/out on canvas the same amount on scroll/gesture #7602

Merged
merged 2 commits into from
Nov 3, 2023
Merged

fix(editor): Zoom in/out on canvas the same amount on scroll/gesture #7602

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6a7c50b
Zoom in/out on canvas the same amount on scroll/gesture
elsmr Nov 3, 2023
e176ba9
Make scroll zoom acceleration slower
elsmr Nov 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 11 additions & 7 deletions cypress/e2e/12-canvas.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,11 @@ const NDVDialog = new NDV();
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.75;
const ZOOM_OUT_X2_FACTOR = 0.5625;
const ZOOM_OUT_X1_FACTOR = 0.8;
const ZOOM_OUT_X2_FACTOR = 0.64;

const PINCH_ZOOM_IN_FACTOR = 1.32;
const PINCH_ZOOM_OUT_FACTOR = 0.4752;
const PINCH_ZOOM_IN_FACTOR = 1.05702;
const PINCH_ZOOM_OUT_FACTOR = 0.946058;
const RENAME_NODE_NAME = 'Something else';

describe('Canvas Node Manipulation and Navigation', () => {
Expand Down Expand Up @@ -222,8 +222,8 @@ describe('Canvas Node Manipulation and Navigation', () => {
);
});

it('should zoom using pinch to zoom', () => {
WorkflowPage.actions.pinchToZoom(2, 'zoomIn');
it('should zoom using scroll or pinch gesture', () => {
WorkflowPage.actions.pinchToZoom(1, 'zoomIn');
WorkflowPage.getters
.nodeView()
.should(
Expand All @@ -232,7 +232,11 @@ describe('Canvas Node Manipulation and Navigation', () => {
`matrix(${PINCH_ZOOM_IN_FACTOR}, 0, 0, ${PINCH_ZOOM_IN_FACTOR}, 0, 0)`,
);

WorkflowPage.actions.pinchToZoom(4, 'zoomOut');
WorkflowPage.actions.pinchToZoom(1, 'zoomOut');
// Zoom in 1x + Zoom out 1x should reset to default (=1)
WorkflowPage.getters.nodeView().should('have.css', 'transform', `matrix(1, 0, 0, 1, 0, 0)`);

WorkflowPage.actions.pinchToZoom(1, 'zoomOut');
WorkflowPage.getters
.nodeView()
.should(
Expand Down
3 changes: 2 additions & 1 deletion cypress/pages/workflow.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,8 @@ export class WorkflowPage extends BasePage {
ctrlKey: true,
pageX: cy.window().innerWidth / 2,
pageY: cy.window().innerHeight / 2,
deltaY: mode === 'zoomOut' ? 16 * steps : -16 * steps,
deltaMode: 1,
deltaY: mode === 'zoomOut' ? steps : -steps,
});
},
hitUndo: () => {
Expand Down
18 changes: 12 additions & 6 deletions packages/editor-ui/src/utils/canvasUtils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,11 @@ import type { Route } from 'vue-router';
'@/utils'.
*/

const SCALE_INCREASE_FACTOR = 1.25;
const SCALE_DECREASE_FACTOR = 0.75;
const SCALE_CHANGE_FACTOR = 1.25;
const MIN_SCALE = 0.2;
const MAX_SCALE = 5;
const SCROLL_ZOOM_SPEED = 0.01;
const MAX_WHEEL_DELTA = 32;

const clamp = (min: number, max: number) => (num: number) => {
return Math.max(min, Math.min(max, num));
Expand All @@ -43,9 +44,9 @@ export const applyScale =
};
};

export const scaleBigger = applyScale(SCALE_INCREASE_FACTOR);
export const scaleBigger = applyScale(SCALE_CHANGE_FACTOR);

export const scaleSmaller = applyScale(SCALE_DECREASE_FACTOR);
export const scaleSmaller = applyScale(1 / SCALE_CHANGE_FACTOR);

export const scaleReset = (config: IZoomConfig): IZoomConfig => {
return applyScale(1 / config.scale)(config);
Expand Down Expand Up @@ -108,6 +109,8 @@ export const getConnectionInfo = (
return null;
};

const clampWheelDelta = clamp(-MAX_WHEEL_DELTA, MAX_WHEEL_DELTA);

export const normalizeWheelEventDelta = (event: WheelEvent): { deltaX: number; deltaY: number } => {
const factorByMode: Record<number, number> = {
[WheelEvent.DOM_DELTA_PIXEL]: 1,
Expand All @@ -117,9 +120,12 @@ export const normalizeWheelEventDelta = (event: WheelEvent): { deltaX: number; d

const factor = factorByMode[event.deltaMode] ?? 1;

return { deltaX: event.deltaX * factor, deltaY: event.deltaY * factor };
return {
deltaX: clampWheelDelta(event.deltaX * factor),
deltaY: clampWheelDelta(event.deltaY * factor),
};
};

export const getScaleFromWheelEventDelta = (delta: number): number => {
return 1 - delta / 100;
return Math.pow(2, -delta * SCROLL_ZOOM_SPEED);
};
Loading