alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(scroll): fast zoom issue on windows with ctrl

Browse Source
This commit is contained in:
moklick
2023-08-14 16:13:12 +02:00
parent e1b8dce981
commit 9654eee4fb
4 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/system/src/xypanzoom/eventhandler.ts
+17 -7
View File
@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/ban-ts-comment */
import type { D3ZoomEvent } from 'd3-zoom';
import { pointer } from 'd3-selection';
@@ -11,7 +12,8 @@ import {
type OnDraggingChange,
type OnTransformChange,
} from '../types';
import { isRightClickPan, isWrappedWithClass, transformToViewport, viewChanged } from './utils';
import { isRightClickPan, isWrappedWithClass, transformToViewport, viewChanged, wheelDelta } from './utils';
import { clamp, isMacOs } from '../utils';
export type ZoomPanValues = {
isZoomingOrPanning: boolean;
@@ -75,13 +77,15 @@ export function createPanOnScrollHandler({
event.stopImmediatePropagation();
const currentZoom = d3Selection.property('__zoom').k || 1;
const _isMacOs = isMacOs();
if (event.ctrlKey && zoomOnPinch) {
// macos sets ctrlKey=true for pinch gesture on a trackpad
if (event.ctrlKey && zoomOnPinch && _isMacOs) {
const point = pointer(event);
// taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js
const pinchDelta = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10;
const pinchDelta = wheelDelta(event);
const zoom = currentZoom * Math.pow(2, pinchDelta);
d3Zoom.scaleTo(d3Selection, zoom, point);
// @ts-ignore
d3Zoom.scaleTo(d3Selection, zoom, point, event);
return;
}
@@ -89,8 +93,14 @@ export function createPanOnScrollHandler({
// increase scroll speed in firefox
// firefox: deltaMode === 1; chrome: deltaMode === 0
const deltaNormalize = event.deltaMode === 1 ? 20 : 1;
const deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize;
const deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize;
let deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize;
let deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize;
// this enables vertical scrolling with shift + scroll on windows
if (!_isMacOs && event.shiftKey && panOnScrollMode !== PanOnScrollMode.Vertical) {
deltaX = event.deltaY * deltaNormalize;
deltaY = 0;
}
d3Zoom.translateBy(
d3Selection,