canvu-react 0.3.22 → 0.3.24

package/dist/index.cjs

@@ -561,16 +561,23 @@ function distanceBetween(a, b) {
 function midpoint(a, b) {
   return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
 }
-function wheelDeltaYPixels(e) {
-  switch (e.deltaMode) {
+function wheelDeltaPixels(delta, deltaMode) {
+  switch (deltaMode) {
     case WheelEvent.DOM_DELTA_LINE:
-      return e.deltaY * 16;
+      return delta * 16;
     case WheelEvent.DOM_DELTA_PAGE:
-      return e.deltaY * 400;
+      return delta * 400;
     default:
-      return e.deltaY;
+      return delta;
   }
 }
+var TRACKPAD_MAX_DELTA = 20;
+var MOUSE_WHEEL_DAMPING = 0.4;
+function softenWheelDelta(d) {
+  const a = Math.abs(d);
+  if (a <= TRACKPAD_MAX_DELTA) return d;
+  return Math.sign(d) * (TRACKPAD_MAX_DELTA + (a - TRACKPAD_MAX_DELTA) * MOUSE_WHEEL_DAMPING);
+}
 function attachViewportInput(options) {
   const {
     element,
@@ -593,8 +600,8 @@ function attachViewportInput(options) {
   const onWheel = (e) => {
     if (e.ctrlKey || e.metaKey) {
       e.preventDefault();
-      const dy = wheelDeltaYPixels(e);
-      const normDy = Math.abs(dy) < 20 ? dy * 12 : dy;
+      const dy = wheelDeltaPixels(e.deltaY, e.deltaMode);
+      const normDy = Math.abs(dy) < TRACKPAD_MAX_DELTA ? dy * 12 : dy;
       const factor = Math.exp(-normDy * wheelZoomSensitivity);
       const rect = element.getBoundingClientRect();
       camera.setZoom(camera.zoom * factor, {
@@ -605,8 +612,10 @@ function attachViewportInput(options) {
       return;
     }
     e.preventDefault();
-    camera.x -= e.deltaX * wheelPanSensitivity / camera.zoom;
-    camera.y -= e.deltaY * wheelPanSensitivity / camera.zoom;
+    const panDx = softenWheelDelta(wheelDeltaPixels(e.deltaX, e.deltaMode));
+    const panDy = softenWheelDelta(wheelDeltaPixels(e.deltaY, e.deltaMode));
+    camera.x -= panDx * wheelPanSensitivity / camera.zoom;
+    camera.y -= panDy * wheelPanSensitivity / camera.zoom;
     onUpdate();
   };
   const onPointerDown = (e) => {