Mobil friendly projects plant explorer. Touch events & box layouts

[nkwsy]

Desktop version of the projects page works well with mouse events. But the pinch zooming on mobile is trash.

The toolbar also overlays blocking touch events from accessing the canvas, which could be another reason for the failure.

When using a mobile browser, Toolbar should orient itself to the bottom of the screen and touch zoom should work

Picture shows current layout.

[nkwsy]

This is the code for pinch zoom I have: ``` const handleWheel = (e) => { e.evt.preventDefault(); const scaleBy = 1.25; const stage = e.target.getStage();

const oldScale = stage.scaleX();
const pointer = stage.getPointerPosition();
const mousePointTo = {
  x: (pointer.x - stage.x()) / oldScale,
  y: (pointer.y - stage.y()) / oldScale,
};
const newScale = e.evt.deltaY > 0 ? oldScale / scaleBy : oldScale * scaleBy;
const newPos = {
  x: pointer.x - mousePointTo.x * newScale,
  y: pointer.y - mousePointTo.y * newScale,
};
stage.position(newPos);
stage.scale({ x: newScale, y: newScale });

// setScale(newScale);

};

// Pinch zoom for mobile function getDistance(p1, p2) { return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)); }

function getCenter(p1, p2) { return { x: (p1.x + p2.x) / 2, y: (p1.y + p2.y) / 2, }; } var lastCenter = null; var lastDist = 0; var dragStopped = false;

const handlePinch = (e) => { e.evt.preventDefault(); const stage = e.target.getStage();

var touch1 = e.evt.touches[0];
var touch2 = e.evt.touches[1];

// we need to restore dragging, if it was cancelled by multi-touch
if (touch1 && !touch2 && !stage.isDragging() && dragStopped) {
  stage.startDrag();
  dragStopped = false;
}

if (touch1 && touch2) {
  // if the stage was under Konva's drag&drop
  // we need to stop it, and implement our own pan logic with two pointers
  if (stage.isDragging()) {
    dragStopped = true;
    stage.stopDrag();
  }

  var p1 = {
    x: touch1.clientX,
    y: touch1.clientY,
  };
  var p2 = {
    x: touch2.clientX,
    y: touch2.clientY,
  };

  if (!lastCenter) {
    lastCenter = getCenter(p1, p2);
    return;
  }
  var newCenter = getCenter(p1, p2);

  var dist = getDistance(p1, p2);

  if (!lastDist) {
    lastDist = dist;
  }

  // local coordinates of center point
  var pointTo = {
    x: (newCenter.x - stage.x()) / stage.scaleX(),
    y: (newCenter.y - stage.y()) / stage.scaleX(),
  };

  var scale = stage.scaleX() * (dist / lastDist);

  stage.scaleX(scale);
  stage.scaleY(scale);

  // calculate new position of the stage
  var dx = newCenter.x - lastCenter.x;
  var dy = newCenter.y - lastCenter.y;

  var newPos = {
    x: newCenter.x - pointTo.x * scale + dx,
    y: newCenter.y - pointTo.y * scale + dy,
  };

  stage.position(newPos);

  lastDist = dist;
  lastCenter = newCenter;
}

};

const handleTouchEnd = (e) => { lastDist = 0; lastCenter = null; };