Normalize wheel events across browsers (#76)

examples/drawing-app/drawing-app.js → examples/drawing-app/index.js

@@ -86,26 +86,34 @@ class DrawingApp {
     view.removeAllListeners('drag');
     if (type === 'pan') {
       view.on('drag', actions.drag);
-      view.on('pinch', actions.pinch);
+      view.on('pinch', constrainedZoom);
       view.on('rotate', actions.rotate);
       view.off('drag', this.boundDraw);
     } else {
       view.off('drag', actions.drag);
-      view.off('pinch', actions.pinch);
+      view.off('pinch', constrainedZoom);
       view.off('rotate', actions.rotate);
       view.on('drag', this.boundDraw);
     }
   }
 
   handleConnect({ view }) {
     view.on('drag', actions.drag);
-    view.on('pinch', actions.pinch);
+    view.on('pinch', constrainedZoom);
     view.on('rotate', actions.rotate);
     this.setColor({ color: 'red', view });
     this.setWidth({ width: 'medium', view });
   }
 }
 
+function constrainedZoom(event) {
+  const targetScale = event.target.scale;
+  const deltaScale = event.scale;
+  if ((deltaScale > 1 && targetScale < 3) || (deltaScale < 1 && targetScale > 0.1)) {
+    actions.pinch(event);
+  }
+}
+
 // eslint-disable-next-line
 const drawingApp = new DrawingApp();
 drawingApp.initListeners();

examples/drawing-app/static/drawing-app.css

@@ -3,6 +3,10 @@
   --color-two: #97ccf6;
 }
 
+html {
+  background-color: antiquewhite;
+}
+
 ul {
   list-style: none;
   padding: 0;

package.json

@@ -22,6 +22,7 @@
     "canvas-sequencer": "^3.0.6",
     "core-js": "^3",
     "express": "^4.17.1",
+    "normalize-wheel": "^1.0.1",
     "socket.io": "^4.6.2",
     "socket.io-client": "^4.6.2",
     "westures": "^1.1.0"

src/client/ClientController.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const { io } = require('socket.io-client');
+const normalizeWheel = require('normalize-wheel');
 
 const { constants, Message, NOP } = require('../shared.js');
 
@@ -333,6 +334,9 @@ class ClientController {
    * Set up input event forwarding.
    */
   setUpInputForwarding() {
+    // Prevent default gestures from the browser
+    this.canvas.style.touchAction = 'none';
+
     // Forward pointer events
     ['pointerdown', 'pointermove', 'pointerup'].forEach((eventname) => {
       this.canvas.addEventListener(eventname, (event) => {
@@ -390,10 +394,12 @@ class ClientController {
       (event) => {
         if (event.ctrlKey) {
           event.preventDefault();
-          // Extract only the properties we care about
-          const { type, clientX, clientY, deltaY, deltaMode } = event;
-          const data = { type, clientX, clientY, deltaY, deltaMode };
-          this.socket.emit(Message.WHEEL, data);
+          const { clientX, clientY, deltaY } = event;
+          const { spinY } = normalizeWheel(event);
+          if (isFinite(spinY) && isFinite(deltaY)) {
+            const data = { clientX, clientY, deltaY, spinY };
+            this.socket.emit(Message.WHEEL, data);
+          }
         }
       },
       { passive: false }

src/server/ServerController.js

@@ -259,12 +259,13 @@ class ServerController {
    * @param {WheelEvent} event - The event to forward.
    */
   wheelEvent(event) {
-    const { clientX, clientY } = event;
+    const { clientX, clientY, deltaY, spinY } = event;
     const target = this.view.group;
     const view = this.view;
     const group = this.view.group;
     const device = this.device;
-    const scale = 1 - event.deltaY * 0.01;
+    let scaleChange = Math.abs(spinY) < Math.abs(deltaY) ? spinY : deltaY;
+    const scale = Math.max(Math.min(1 - scaleChange * 0.1, 1.1), 0.9);
     const { x, y } = this.view.transformPoint(clientX, clientY);
     this.application.messageHandler.scale({ x, y, target, view, group, device }, { scale });
   }