add experimental scrolling
This commit is contained in:
parent
c61bdf7435
commit
248216891b
2 changed files with 55 additions and 13 deletions
8
capybara
8
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
|
||||
|
|
|
@ -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,8 +177,22 @@
|
|||
const deltaY = this.currentMoveY - this.lastMoveY;
|
||||
this.lastMoveX = this.currentMoveX;
|
||||
this.lastMoveY = this.currentMoveY;
|
||||
// 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 }) {
|
||||
this.shouldResetLastMove = true;
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue