From b2c0d0218bf144866cefd1573e8a9d33d5e3b13f Mon Sep 17 00:00:00 2001
From: hippoz <paperplanelive@gmail.com>
Date: Thu, 28 Oct 2021 17:03:04 +0300
Subject: [PATCH] add basic click support

---
 capybara          |   4 +-
 public/index.html | 122 +++++++++++++++++++++++++++++++++-------------
 2 files changed, 92 insertions(+), 34 deletions(-)
diff --git a/capybara b/capybara
index 9000eda..eb90ea6 100755
--- a/capybara
+++ b/capybara
@@ -75,10 +75,12 @@ class InputController():
             return False
         elif code == "r":
             self.mouse_controller.move(args["x"], args["y"])
-            print(args["x"], args["y"])
+            print("r", args["x"], args["y"])
         elif code == "d":
+            print("d", args["button"])
             self.mouse_controller.press(self.button_code_to_object(args["button"]))
         elif code == "u":
+            print("u", args["button"])
             self.mouse_controller.release(self.button_code_to_object(args["button"]))
         else:
             print("got invalid code from parser (is this a bug with the MessageParser?)")
diff --git a/public/index.html b/public/index.html
index cf9cf63..a39da72 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,8 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">    <title>Document</title>
 
     <script>
         const loggerOfType = (components, type='log') => (...args) => {
@@ -94,35 +93,95 @@
             }
         }
 
-        let connection = new Connection(`ws://${location.host}/gateway`, true);
-        
+        class TouchpadController {
+            constructor(connection) {
+                this.currentMoveX = 0;
+                this.currentMoveY = 0;
+                this.lastMoveX = 0;
+                this.lastMoveY = 0;
+                this.shouldResetLastMove = false;
+                this.ongoingTouches = {};
+
+                this.log = Logger(["TouchpadController"], ["log"]).log;
+
+                this.connection = connection;
+            }
+
+            _sendRelativeMouseMovement(dx, dy) {
+                if (dx === 0 && dy === 0)
+                    return;
+                this.connection.sendMessage("r", [dx, dy]);
+            }
+
+            _sendSingleClick(button="left") {
+                let buttonCode = 0;
+                if (button === "right") buttonCode = 1;
+
+                this.connection.sendMessage("d", [buttonCode]);
+                setTimeout(
+                    () =>this.connection.sendMessage("u", [buttonCode]),
+                    5
+                );
+            }
+
+            bindTo(element) {
+                element.addEventListener("touchmove", this.onTouchMove.bind(this));
+                element.addEventListener("touchend", this.onTouchEnd.bind(this));
+                element.addEventListener("touchstart", this.onTouchStart.bind(this));
+            }
+
+            onTouchMove({ touches }) {
+                const targetTouch = touches[0];
+                this.ongoingTouches[targetTouch.identifier].hasMoved = true;
+
+                this.currentMoveX = targetTouch.clientX;
+                this.currentMoveY = targetTouch.clientY;
+                // When ending a touch and starting a new one in another part of the touchpad,
+                // the cursor "rubber bands" to that position.
+                // To solve this, the "last move" parameters are reset when a touch is ended
+                // (see onTouchEnd())
+                if (this.shouldResetLastMove) {
+                    this.shouldResetLastMove = false;
+                    this.lastMoveX = this.currentMoveX;
+                    this.lastMoveY = this.currentMoveY;
+                }
+                const deltaX = this.currentMoveX - this.lastMoveX;
+                const deltaY = this.currentMoveY - this.lastMoveY;
+                this.lastMoveX = this.currentMoveX;
+                this.lastMoveY = this.currentMoveY;
+                this._sendRelativeMouseMovement(deltaX, deltaY);
+            }
+
+            onTouchEnd({ changedTouches }) {
+                this.shouldResetLastMove = true;
+                // A single tap = left click
+                if (changedTouches.length === 1 && !this.ongoingTouches[changedTouches[0].identifier].hasMoved)
+                    this._sendSingleClick("left");
+                for (let i = 0; i < changedTouches.length; i++) {
+                    const touch = changedTouches[i];
+                    this.ongoingTouches[touch.identifier] = null;
+                    delete this.ongoingTouches[touch.identifier];
+                }
+            }
+
+            onTouchStart({ changedTouches }) {
+                for (let i = 0; i < changedTouches.length; i++) {
+                    const touch = changedTouches[i];
+                    this.ongoingTouches[touch.identifier] = {
+                        identifier: touch.identifier,
+                        clientX: touch.clientX,
+                        clientY: touch.clientY,
+                        hasMoved: false
+                    };
+                }
+            }
+        }
+
+        const connection = new Connection(`ws://${location.host}/gateway`, true);
+        const controller = new TouchpadController(connection);
         function main() {
             connection.connect();
-            const touchpad = document.querySelector(".touchpad");
-            const movementState = {
-                currentX: 0,
-                currentY: 0,
-                lastCheckedX: 0,
-                lastCheckedY: 0,
-                shouldResetTouch: false,
-            }
-            touchpad.addEventListener("touchmove", (event) => {
-                movementState.currentX = event.touches[0].clientX;
-                movementState.currentY = event.touches[0].clientY;
-                if (movementState.shouldResetTouch) {
-                    movementState.shouldResetTouch = false;
-                    movementState.lastCheckedX = movementState.currentX;
-                    movementState.lastCheckedY = movementState.currentY;
-                }
-                const deltaX = movementState.currentX - movementState.lastCheckedX;
-                const deltaY = movementState.currentY - movementState.lastCheckedY;
-                movementState.lastCheckedX = movementState.currentX;
-                movementState.lastCheckedY = movementState.currentY;
-                connection.sendMessage("r", [deltaX, deltaY]);
-            });
-            touchpad.addEventListener("touchend", () => {
-                movementState.shouldResetTouch = true;
-            });
+            controller.bindTo(document.querySelector(".touchpad"));
         }
     </script>
 
@@ -135,9 +194,6 @@
     </style>
 </head>
 <body onload="main();">
-    <div class="touchpad">
-        
-    </div>
-    <button onClick="connection.sendMessage('r', [20, 20])">Move mouse test</button>
+    <div class="touchpad"></div>
 </body>
 </html>
\ No newline at end of file
