KASM-1871 Add smooth scrolling by sending scroll delta directly

core/rfb.js

@@ -44,8 +44,7 @@ var _enableWebP = false;
 const MOUSE_MOVE_DELAY = 17;
 
 // Wheel thresholds
-const WHEEL_STEP = 50; // Pixels needed for one step
+let WHEEL_LINE_HEIGHT = 19; // Pixels for one line step (on Windows)
-const WHEEL_LINE_HEIGHT = 19; // Assumed pixels for one line step
 
 // Gesture thresholds
 const GESTURE_ZOOMSENS = 75;
@@ -1317,6 +1316,13 @@ export default class RFB extends EventTargetMixin {
                                   this._display.absY(y), mask);
     }
 
+    _sendScroll(x, y, dX, dY) {
+        if (this._rfbConnectionState !== 'connected') { return; }
+        if (this._viewOnly) { return; } // View only, skip mouse events
+
+        RFB.messages.pointerEvent(this._sock, this._display.absX(x), this._display.absY(y), 0, dX, dY);
+    }
+
     _handleWheel(ev) {
         if (this._rfbConnectionState !== 'connected') { return; }
         if (this._viewOnly) { return; } // View only, skip mouse events
@@ -1324,28 +1330,6 @@ export default class RFB extends EventTargetMixin {
         ev.stopPropagation();
         ev.preventDefault();
 
-        let pos = clientToElement(ev.clientX, ev.clientY,
-                                  this._canvas);
-
-        let dX = ev.deltaX;
-        let dY = ev.deltaY;
-
-        // Pixel units unless it's non-zero.
-        // Note that if deltamode is line or page won't matter since we aren't
-        // sending the mouse wheel delta to the server anyway.
-        // The difference between pixel and line can be important however since
-        // we have a threshold that can be smaller than the line height.
-        if (ev.deltaMode !== 0) {
-            dX *= WHEEL_LINE_HEIGHT;
-            dY *= WHEEL_LINE_HEIGHT;
-        }
-
-        // Mouse wheel events are sent in steps over VNC. This means that the VNC
-        // protocol can't handle a wheel event with specific distance or speed.
-        // Therefor, if we get a lot of small mouse wheel events we combine them.
-        this._accumulatedWheelDeltaX += dX;
-        this._accumulatedWheelDeltaY += dY;
-
         // On MacOs we need to translate zooming CMD+wheel to CTRL+wheel
         if (isMac() && this._keyboard._keyDownList["MetaLeft"]) {
             this._keyboard._sendKeyEvent(this._keyboard._keyDownList["MetaLeft"], "MetaLeft", false);
@@ -1374,30 +1358,21 @@ export default class RFB extends EventTargetMixin {
             this._mouseLastPinchAndZoomTime = +new Date();
         }
 
-        // Generate a mouse wheel step event when the accumulated delta
+        // Pixel units unless it's non-zero.
-        // for one of the axes is large enough.
+        // Note that if deltamode is line or page won't matter since we aren't
-        if (Math.abs(this._accumulatedWheelDeltaX) >= WHEEL_STEP) {
+        // sending the mouse wheel delta to the server anyway.
-            if (this._accumulatedWheelDeltaX < 0) {
+        // The difference between pixel and line can be important however since
-                this._handleMouseButton(pos.x, pos.y, true, 1 << 5);
+        // we have a threshold that can be smaller than the line height.
-                this._handleMouseButton(pos.x, pos.y, false, 1 << 5);
+        let dX = ev.deltaX;
-            } else if (this._accumulatedWheelDeltaX > 0) {
+        let dY = ev.deltaY;
-                this._handleMouseButton(pos.x, pos.y, true, 1 << 6);
-                this._handleMouseButton(pos.x, pos.y, false, 1 << 6);
-            }
 
-            this._accumulatedWheelDeltaX = 0;
+        if (ev.deltaMode !== 0) {
+            dX *= WHEEL_LINE_HEIGHT;
+            dY *= WHEEL_LINE_HEIGHT;
         }
-        if (Math.abs(this._accumulatedWheelDeltaY) >= WHEEL_STEP) {
-            if (this._accumulatedWheelDeltaY < 0) {
-                this._handleMouseButton(pos.x, pos.y, true, 1 << 3);
-                this._handleMouseButton(pos.x, pos.y, false, 1 << 3);
-            } else if (this._accumulatedWheelDeltaY > 0) {
-                this._handleMouseButton(pos.x, pos.y, true, 1 << 4);
-                this._handleMouseButton(pos.x, pos.y, false, 1 << 4);
-            }
 
-            this._accumulatedWheelDeltaY = 0;
+        const pointer = clientToElement(ev.clientX, ev.clientY, this._canvas);
-        }
+        this._sendScroll(pointer.x, pointer.y, dX, dY);
     }
 
     _fakeMouseMove(ev, elementX, elementY) {
@@ -3032,7 +3007,7 @@ RFB.messages = {
         sock.flush();
     },
 
-    pointerEvent(sock, x, y, mask) {
+    pointerEvent(sock, x, y, mask, dX = 0, dY = 0) {
         const buff = sock._sQ;
         const offset = sock._sQlen;
 
@@ -3046,7 +3021,13 @@ RFB.messages = {
         buff[offset + 4] = y >> 8;
         buff[offset + 5] = y;
 
-        sock._sQlen += 6;
+        buff[offset + 6] = dX >> 8;
+        buff[offset + 7] = dX;
+
+        buff[offset + 8] = dY >> 8;
+        buff[offset + 9] = dY;
+
+        sock._sQlen += 10;
         sock.flush();
     },