Revert "JS puzzles: use the PointerEvent API if available."

This reverts commit 9d7c2b8c83506c1f239c840e372058fac603b255.

I thought that switching from the JS 'mousedown', 'mousemove' and
'mouseup' events to the corresponding 'pointer*' events would make
essentially no difference except that the pointer events would come
with more information. But in fact it turns out that there's a
fundamental change of semantics.

If you press one mouse button down and then, without releasing it,
press a second one, then the mouse API will send you this information
in the form of two 'mousedown' events, one for each button. But the
pointer API will only send you a 'pointerdown' for the first event,
when the state of the pointer changes from 'no buttons down' to 'at
least one button down'. The second button press will be delivered as a
'pointermove', in which the 'buttons' field is different from its
previous value.

I'm backing out the migration to PointerEvent for the moment, because
that's too complicated for a trivial fix. In simple cases we could
easily detect the changed buttons field in the pointermove handler and
generate a call to the C side of this front end's mousedown()
function, effectively converting the changed JS representation to the
one the C was already expecting. But this also has to interact with
our one-button support (converting Ctrl and Shift clicks into a
different logical button) _and_ with the ad-hoc mechanism we use to
avoid delivering buttonless mouse movements to the C side. So getting
it right in all cases at once isn't trivial, and I'd rather revert the
attempt now and think about it later than commit to getting it all
perfect on short notice.
This commit is contained in:
Simon Tatham
2023-02-23 08:46:56 +00:00
parent 90e2c7539b
commit ecd868ac6e

View File

@ -285,11 +285,6 @@ function dialog_cleanup() {
}
function set_capture(element, event) {
if (element.setPointerCapture !== undefined &&
event.pointerId !== undefined) {
element.setPointerCapture(event.pointerId);
return;
}
if (element.setCapture !== undefined) {
element.setCapture(true);
return;
@ -322,7 +317,7 @@ function initPuzzle() {
return toret;
};
var canvas_mousedown_handler = function(event) {
onscreen_canvas.onmousedown = function(event) {
if (event.button >= 3)
return;
@ -339,10 +334,9 @@ function initPuzzle() {
set_capture(onscreen_canvas, event);
};
var mousemove = Module.cwrap('mousemove', 'boolean',
['number', 'number', 'number']);
var canvas_mousemove_handler = function(event) {
onscreen_canvas.onmousemove = function(event) {
var down = buttons_down();
if (down) {
var xy = canvas_mouse_coords(event, onscreen_canvas);
@ -352,7 +346,7 @@ function initPuzzle() {
};
var mouseup = Module.cwrap('mouseup', 'boolean',
['number', 'number', 'number']);
var canvas_mouseup_handler = function(event) {
onscreen_canvas.onmouseup = function(event) {
if (event.button >= 3)
return;
@ -364,16 +358,6 @@ function initPuzzle() {
}
};
if (PointerEvent !== undefined) {
onscreen_canvas.onpointerdown = canvas_mousedown_handler;
onscreen_canvas.onpointermove = canvas_mousemove_handler;
onscreen_canvas.onpointerup = canvas_mouseup_handler;
} else {
onscreen_canvas.onmousedown = canvas_mousedown_handler;
onscreen_canvas.onmousemove = canvas_mousemove_handler;
onscreen_canvas.onmouseup = canvas_mouseup_handler;
}
// Set up keyboard handlers. We call event.preventDefault()
// in the keydown handler if it looks like we might have
// done something with the key. This means that users
@ -681,7 +665,7 @@ function initPuzzle() {
var restore_puzzle_size = Module.cwrap('restore_puzzle_size',
'void', []);
resize_handle.oncontextmenu = function(event) { return false; }
var resize_mousedown_handler = function(event) {
resize_handle.onmousedown = function(event) {
if (event.button == 0) {
var xy = element_coords(onscreen_canvas);
resize_xbase = xy.x + onscreen_canvas.offsetWidth / 2;
@ -696,7 +680,7 @@ function initPuzzle() {
set_capture(resize_handle, event);
event.preventDefault();
};
var resize_mousemove_handler = function(event) {
window.addEventListener("mousemove", function(event) {
if (resize_xbase !== null && resize_ybase !== null) {
var dpr = window.devicePixelRatio || 1;
resize_puzzle(
@ -709,8 +693,8 @@ function initPuzzle() {
window.getSelection().removeAllRanges();
else
document.selection.empty(); }
};
var resize_mouseup_handler = function(event) {
});
window.addEventListener("mouseup", function(event) {
if (resize_xbase !== null && resize_ybase !== null) {
resize_xbase = null;
resize_ybase = null;
@ -730,17 +714,7 @@ function initPuzzle() {
}, 20);
event.preventDefault();
}
};
if (PointerEvent !== undefined) {
resize_handle.onpointerdown = resize_mousedown_handler;
window.addEventListener("pointermove", resize_mousemove_handler);
window.addEventListener("pointerup", resize_mouseup_handler);
} else {
resize_handle.onmousedown = resize_mousedown_handler;
window.addEventListener("mousemove", resize_mousemove_handler);
window.addEventListener("mouseup", resize_mouseup_handler);
}
});
}
var rescale_puzzle = Module.cwrap('rescale_puzzle', 'void', []);