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

refactor(zomm): simplify

Browse Source
This commit is contained in:
moklick
2022-08-24 14:35:38 +02:00
parent 24fff4fee6
commit 55c81362bb
1 changed files with 33 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/container/ZoomPane/index.tsx
+33 -36
View File
@@ -92,49 +92,46 @@ const ZoomPane = ({
useEffect(() => { useEffect(() => {
if (d3Selection && d3Zoom) { if (d3Selection && d3Zoom) {
if (panOnScroll && !zoomActivationKeyPressed) { if (panOnScroll && !zoomActivationKeyPressed) {
d3Selection d3Selection.on('wheel.zoom', (event: any) => {
.on('wheel', (event: any) => { if (isWrappedWithClass(event, noWheelClassName)) {
if (isWrappedWithClass(event, noWheelClassName)) { return false;
return false; }
} event.preventDefault();
event.preventDefault(); event.stopImmediatePropagation();
event.stopImmediatePropagation();
const currentZoom = d3Selection.property('__zoom').k || 1; const currentZoom = d3Selection.property('__zoom').k || 1;
if (event.ctrlKey && zoomOnPinch) { if (event.ctrlKey && zoomOnPinch) {
const point = pointer(event); const point = pointer(event);
// taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js // 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 = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10;
const zoom = currentZoom * Math.pow(2, pinchDelta); const zoom = currentZoom * Math.pow(2, pinchDelta);
d3Zoom.scaleTo(d3Selection, zoom, point); d3Zoom.scaleTo(d3Selection, zoom, point);
return; return;
} }
// increase scroll speed in firefox // increase scroll speed in firefox
// firefox: deltaMode === 1; chrome: deltaMode === 0 // firefox: deltaMode === 1; chrome: deltaMode === 0
const deltaNormalize = event.deltaMode === 1 ? 20 : 1; const deltaNormalize = event.deltaMode === 1 ? 20 : 1;
const deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize; const deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize;
const deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize; const deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize;
d3Zoom.translateBy( d3Zoom.translateBy(
d3Selection, d3Selection,
-(deltaX / currentZoom) * panOnScrollSpeed, -(deltaX / currentZoom) * panOnScrollSpeed,
-(deltaY / currentZoom) * panOnScrollSpeed -(deltaY / currentZoom) * panOnScrollSpeed
); );
}) });
.on('wheel.zoom', null);
} else if (typeof d3ZoomHandler !== 'undefined') { } else if (typeof d3ZoomHandler !== 'undefined') {
d3Selection d3Selection.on('wheel.zoom', function (event: any, d: any) {
.on('wheel', (event: any) => { if (!preventScrolling || isWrappedWithClass(event, noWheelClassName)) {
if (!preventScrolling || isWrappedWithClass(event, noWheelClassName)) { return null;
return null; }
}
event.preventDefault(); event.preventDefault();
}) d3ZoomHandler.call(this, event, d);
.on('wheel.zoom', d3ZoomHandler); });
} }
} }
}, [ }, [