Support CTRL + wheel to zoom on desktop

src/client/ClientController.js

@@ -144,6 +144,7 @@ class ClientController {
       [Message.POINTER]: NOP,
       [Message.BLUR]: NOP,
       [Message.KEYBOARD]: NOP,
+      [Message.WHEEL]: NOP,
 
       // TODO: This could be more... elegant...
       [Message.FULL]: () => {
@@ -330,6 +331,21 @@ class ClientController {
         this.socket.emit(Message.KEYBOARD, data);
       });
     });
+
+    // Forward wheel events
+    window.addEventListener(
+      'wheel',
+      (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);
+        }
+      },
+      { capture: true }
+    );
   }
 
   /**

src/server/ServerController.js

@@ -118,6 +118,7 @@ class ServerController {
       [Message.POINTER]: this.pointerEvent.bind(this),
       [Message.BLUR]: () => this.view.group.clearInputsFromView(this.view.id),
       [Message.KEYBOARD]: this.keyboardEvent.bind(this),
+      [Message.WHEEL]: this.wheelEvent.bind(this),
 
       // For user-defined behavior
       [Message.DISPATCH]: (data) => {
@@ -242,12 +243,27 @@ class ServerController {
    */
   keyboardEvent(event) {
     event.target = this.view.group;
-    event.view = this.view.group;
+    event.view = this.view;
     event.group = this.view.group;
     event.device = this.device;
     this.view.group.gestureController.handleKeyboardEvent(event);
   }
 
+  /**
+   * Forwards a wheel event to the message handler as a pinch event.
+   *
+   * @param {WheelEvent} event - The event to forward.
+   */
+  wheelEvent(event) {
+    const { clientX, clientY } = 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;
+    this.application.messageHandler.scale({ x: clientX, y: clientY, target, view, group, device }, { scale });
+  }
+
   /**
    * Updates the model and informs all other views when a user resizes their
    * window.

src/shared/Message.js

@@ -40,6 +40,7 @@ const Message = {
   /** @const */ POINTER: 'pointer',
   /** @const */ BLUR: 'blur',
   /** @const */ KEYBOARD: 'keyboard',
+  /** @const */ WHEEL: 'wheel',
 
   // Page event related
   /** @const */ IMG_LOAD: 'image-loaded',