add support for holding left click
This commit is contained in:
parent
1e869c4708
commit
c61bdf7435
1 changed files with 42 additions and 9 deletions
|
@ -6,6 +6,9 @@
|
||||||
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"> <title>Document</title>
|
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"> <title>Document</title>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
const HOLDING_THRESHOLD_MS = 175;
|
||||||
|
const SINGLE_CLICK_BUTTON_UP_MS = 5;
|
||||||
|
|
||||||
const loggerOfType = (components, type='log') => (...args) => {
|
const loggerOfType = (components, type='log') => (...args) => {
|
||||||
let str = '%c';
|
let str = '%c';
|
||||||
const style = 'color: #5e81ac; font-weight: bold;';
|
const style = 'color: #5e81ac; font-weight: bold;';
|
||||||
|
@ -100,6 +103,7 @@
|
||||||
this.lastMoveX = 0;
|
this.lastMoveX = 0;
|
||||||
this.lastMoveY = 0;
|
this.lastMoveY = 0;
|
||||||
this.shouldResetLastMove = false;
|
this.shouldResetLastMove = false;
|
||||||
|
this.isInHoldingMode = false;
|
||||||
this.ongoingTouches = {};
|
this.ongoingTouches = {};
|
||||||
|
|
||||||
this.log = Logger(["TouchpadController"], ["log"]).log;
|
this.log = Logger(["TouchpadController"], ["log"]).log;
|
||||||
|
@ -107,20 +111,31 @@
|
||||||
this.connection = connection;
|
this.connection = connection;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getButtonCode(button) {
|
||||||
|
let buttonCode = 0;
|
||||||
|
if (button === "right") buttonCode = 1;
|
||||||
|
return buttonCode;
|
||||||
|
}
|
||||||
|
|
||||||
_sendRelativeMouseMovement(dx, dy) {
|
_sendRelativeMouseMovement(dx, dy) {
|
||||||
if (dx === 0 && dy === 0)
|
if (dx === 0 && dy === 0)
|
||||||
return;
|
return;
|
||||||
this.connection.sendMessage("r", [dx, dy]);
|
this.connection.sendMessage("r", [dx, dy]);
|
||||||
}
|
}
|
||||||
|
|
||||||
_sendSingleClick(button="left") {
|
_sendMouseButtonDown(button="left") {
|
||||||
let buttonCode = 0;
|
this.connection.sendMessage("d", [this.getButtonCode(button)]);
|
||||||
if (button === "right") buttonCode = 1;
|
}
|
||||||
|
|
||||||
this.connection.sendMessage("d", [buttonCode]);
|
_sendMouseButtonUp(button="left") {
|
||||||
|
this.connection.sendMessage("u", [this.getButtonCode(button)]);
|
||||||
|
}
|
||||||
|
|
||||||
|
_sendSingleClick(button="left") {
|
||||||
|
this._sendMouseButtonDown(button);
|
||||||
setTimeout(
|
setTimeout(
|
||||||
() =>this.connection.sendMessage("u", [buttonCode]),
|
() => this._sendMouseButtonUp(button),
|
||||||
5
|
SINGLE_CLICK_BUTTON_UP_MS
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -154,9 +169,17 @@
|
||||||
|
|
||||||
onTouchEnd({ changedTouches }) {
|
onTouchEnd({ changedTouches }) {
|
||||||
this.shouldResetLastMove = true;
|
this.shouldResetLastMove = true;
|
||||||
// A single tap = left click
|
if (changedTouches.length === 1) {
|
||||||
if (changedTouches.length === 1 && !this.ongoingTouches[changedTouches[0].identifier].hasMoved)
|
// This is a single tap - left click
|
||||||
this._sendSingleClick("left");
|
if (!this.ongoingTouches[changedTouches[0].identifier].hasMoved) {
|
||||||
|
this._sendSingleClick("left");
|
||||||
|
// We were in "holding mode" and now that touch event has ended,
|
||||||
|
// thus we have to stop holding the left click button
|
||||||
|
} else if (this.isInHoldingMode) {
|
||||||
|
this._sendMouseButtonUp("left");
|
||||||
|
this.isInHoldingMode = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
for (let i = 0; i < changedTouches.length; i++) {
|
for (let i = 0; i < changedTouches.length; i++) {
|
||||||
const touch = changedTouches[i];
|
const touch = changedTouches[i];
|
||||||
this.ongoingTouches[touch.identifier] = null;
|
this.ongoingTouches[touch.identifier] = null;
|
||||||
|
@ -173,6 +196,16 @@
|
||||||
clientY: touch.clientY,
|
clientY: touch.clientY,
|
||||||
hasMoved: false
|
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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue