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): Zoom in/out on canvas the same amount on scroll/gesture (#7602)

Browse Source 
Github issue / Community forum post (link here to close automatically):

https://community.n8n.io/t/ctrl-mousewheel-zoom-jumps-out-possible-to-avoid/31952
This commit is contained in:
Elias Meire
2023-11-03 14:09:18 +01:00
committed by GitHub
parent 0bd4e742da
commit c92402a3ca
3 changed files with 25 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/editor-ui/src/utils/canvasUtils.ts
View File

@@ -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));
@@ -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);
@@ -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,
@@ -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);
};