add experimental scrolling

capybara

@@ -51,6 +51,11 @@ class InputController():
             "x": "int",
             "y": "int"
         })
+        # Mouse relative scroll
+        self.parser.add_handler("s", {
+            "x": "int",
+            "y": "int"
+        })
         # Mouse button down
         self.parser.add_handler("d", {
             "button": "int"
@@ -82,6 +87,9 @@ class InputController():
         elif code == "u":
             print("u", args["button"])
             self.mouse_controller.release(self.button_code_to_object(args["button"]))
+        elif code == "s":
+            print("s", args["x"], args["y"])
+            self.mouse_controller.scroll(args["x"], args["y"])
         else:
             print("got invalid code from parser (is this a bug with the MessageParser?)")
             return False

public/index.html

@@ -6,8 +6,10 @@
     <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">    <title>Document</title>
 
     <script>
-        const HOLDING_THRESHOLD_MS = 175;
+        const HOLDING_THRESHOLD_MS = 300;
         const SINGLE_CLICK_BUTTON_UP_MS = 5;
+        const SCROLL_X_THRESHOLD = 50;
+        const SCROLL_Y_THRESHOLD = 5;
 
         const loggerOfType = (components, type='log') => (...args) => {
             let str = '%c';
@@ -102,9 +104,12 @@
                 this.currentMoveY = 0;
                 this.lastMoveX = 0;
                 this.lastMoveY = 0;
+                this.scrollXSum = 0;
+                this.scrollYSum = 0;
                 this.shouldResetLastMove = false;
                 this.isInHoldingMode = false;
                 this.ongoingTouches = {};
+                this.holdModeTimeout = null;
 
                 this.log = Logger(["TouchpadController"], ["log"]).log;
 
@@ -123,6 +128,12 @@
                 this.connection.sendMessage("r", [dx, dy]);
             }
 
+            _sendRelativeMouseScroll(dx, dy) {
+                if (dx === 0 && dy === 0)
+                    return;
+                this.connection.sendMessage("s", [dx, dy]);
+            }
+
             _sendMouseButtonDown(button="left") {
                 this.connection.sendMessage("d", [this.getButtonCode(button)]);
             }
@@ -146,8 +157,10 @@
             }
 
             onTouchMove({ touches }) {
+                for (let i = 0; i < touches.length; i++) {
+                    this.ongoingTouches[touches[i].identifier].hasMoved = true;
+                }
                 const targetTouch = touches[0];
-                this.ongoingTouches[targetTouch.identifier].hasMoved = true;
 
                 this.currentMoveX = targetTouch.clientX;
                 this.currentMoveY = targetTouch.clientY;
@@ -164,7 +177,21 @@
                 const deltaY = this.currentMoveY - this.lastMoveY;
                 this.lastMoveX = this.currentMoveX;
                 this.lastMoveY = this.currentMoveY;
-                this._sendRelativeMouseMovement(deltaX, deltaY);
+                // if two touches moved at the same time, assume scrolling intent
+                if (touches.length === 2) {
+                    this.scrollXSum += 1;
+                    this.scrollYSum += 1;
+                    if (this.scrollXSum > SCROLL_X_THRESHOLD) {
+                        this._sendRelativeMouseScroll(deltaX, 0);
+                        this.scrollXSum = 0;
+                    }
+                    if (this.scrollYSum > SCROLL_Y_THRESHOLD) {
+                        this._sendRelativeMouseScroll(0, deltaY);
+                        this.scrollYSum = 0;
+                    }
+                } else {
+                    this._sendRelativeMouseMovement(deltaX, deltaY);
+                }
             }
 
             onTouchEnd({ changedTouches }) {
@@ -188,6 +215,23 @@
             }
 
             onTouchStart({ changedTouches }) {
+                // Clear the hold mode time out if another touch begins
+                if (this.holdModeTimeout)
+                    clearTimeout(this.holdModeTimeout);
+
+                // If the touch is still unmoved and held for a certain amount of time,
+                // we will enter "holding mode" which keeps the mouse button held while dragging
+                // allowing you to, for example, select text or drag a scrollbar
+                if (changedTouches.length === 1) {
+                    const targetTouch = changedTouches[0];
+                    this.holdModeTimeout = setTimeout(() => {
+                        if (this.ongoingTouches[targetTouch.identifier] && !this.ongoingTouches[targetTouch.identifier].hasMoved) {
+                            this.isInHoldingMode = true;
+                            this._sendMouseButtonDown("left");
+                        }
+                    }, HOLDING_THRESHOLD_MS);
+                }
+
                 for (let i = 0; i < changedTouches.length; i++) {
                     const touch = changedTouches[i];
                     this.ongoingTouches[touch.identifier] = {
@@ -196,16 +240,6 @@
                         clientY: touch.clientY,
                         hasMoved: false
                     };
-
-                    // If the touch is still unmoved and held for a certain amount of time,
-                    // we will enter "holding mode" which keeps the mouse button held while dragging
-                    // allowing you to, for example, select text or drag a scrollbar
-                    setTimeout(() => {
-                        if (this.ongoingTouches[touch.identifier] && !this.ongoingTouches[touch.identifier].hasMoved) {
-                            this.isInHoldingMode = true;
-                            this._sendMouseButtonDown("left");
-                        }
-                    }, HOLDING_THRESHOLD_MS);
                 }
             }
         }