js: Use the Pointer Events API, but only to capture the pointer

Element.setPointerCapture() captures both pointer and mouse events, so
we can use our existing mouse handlers and just have a minimal
pointerdown handler that calls setPointerCapture().  This saves (or at
least postpones) all the tedious rewriting referred to in ecd868ac.

This means that now drags beyond the puzzle area work in WebKit-based
browsers, and we don't get deprecation warnings in current Gecko-based
ones.  Older Gecko-based browsers continue to use Element.setCapture()
and hence still work correctly.
This commit is contained in:
Ben Harris
2023-03-01 21:55:07 +00:00
parent 5a491c5ad3
commit 5a74693b32

View File

@ -285,7 +285,9 @@ function dialog_cleanup() {
} }
function set_capture(element, event) { function set_capture(element, event) {
if (element.setCapture !== undefined) { // This is only needed if we don't have Pointer Events available.
if (element.setCapture !== undefined &&
element.setPointerCapture === undefined) {
element.setCapture(true); element.setCapture(true);
return; return;
} }
@ -317,6 +319,13 @@ function initPuzzle() {
return toret; return toret;
}; };
onscreen_canvas.onpointerdown = function(event) {
// Arrange that all mouse (and pointer) events are sent to
// this element until all buttons are released. We can assume
// that if we managed to receive a pointerdown event,
// Element.setPointerCapture() is available.
onscreen_canvas.setPointerCapture(event.pointerId);
}
onscreen_canvas.onmousedown = function(event) { onscreen_canvas.onmousedown = function(event) {
if (event.button >= 3) if (event.button >= 3)
return; return;
@ -665,6 +674,9 @@ function initPuzzle() {
var restore_puzzle_size = Module.cwrap('restore_puzzle_size', var restore_puzzle_size = Module.cwrap('restore_puzzle_size',
'void', []); 'void', []);
resize_handle.oncontextmenu = function(event) { return false; } resize_handle.oncontextmenu = function(event) { return false; }
resize_handle.onpointerdown = function(event) {
resize_handle.setPointerCapture(event.pointerId);
}
resize_handle.onmousedown = function(event) { resize_handle.onmousedown = function(event) {
if (event.button == 0) { if (event.button == 0) {
var xy = element_coords(onscreen_canvas); var xy = element_coords(onscreen_canvas);