React Konva move screen with two fingers on touchpad - react-konva

Question

I'm looking for the correct event to navigate on the canvas with two fingers on touch pad. I'm using React Konva.js and I found a good example on the site https://konvajs.org/docs/sandbox/Zooming_Relative_To_Pointer.html
The problem that I don't want to zoom in or out with the two fingers but navigate. Does anyone have a relevant example?

Answer 1

const stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
const layer = new Konva.Layer();
stage.add(layer);
const shape = new Konva.Circle({
x: stage.width() / 2,
y: stage.height() / 2,
radius: 50,
fill: 'green'
});
layer.add(shape);
stage.on('wheel', (e) => {
const dx = -e.evt.deltaX;
const dy = -e.evt.deltaY;
stage.x(stage.x() + dx);
stage.y(stage.y() + dy);
})
body {
padding: 0;
margin: 0;
}
<script src="https://unpkg.com/konva#^8/konva.min.js"></script>
<div id="container"></div>

Answer 2

To complete the great answer by #lavrton, you can add zoom trackpad support with:
window.addEventListener('wheel', (e) => {
e.preventDefault();
if (e.ctrlKey) { // special flag that's active while zooming
scale -= e.deltaY * 0.01;
} else {
posX -= e.deltaX * 2;
posY -= e.deltaY * 2;
}
render();
});
// gesture event with rotation is Safari only
window.addEventListener("gesturestart", function (e) {
e.preventDefault();
startX = e.pageX - posX;
startY = e.pageY - posY;
gestureStartRotation = rotation;
gestureStartScale = scale;
});
window.addEventListener("gesturechange", function (e) {
e.preventDefault();
rotation = gestureStartRotation + e.rotation;
scale = gestureStartScale * e.scale;
posX = e.pageX - startX;
posY = e.pageY - startY;
render();
})
window.addEventListener("gestureend", function (e) {
e.preventDefault();
});
https://stackblitz.com/edit/multi-touch-trackpad-gesture?file=index.js
From: https://kenneth.io/post/detecting-multi-touch-trackpad-gestures-in-javascript
Would be nice to have it on the offical konva.js example site.