React Konva move screen with two fingers on touchpad

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.