From 5a74693b329eadb69153b150754eb099a0c87e9a Mon Sep 17 00:00:00 2001
From: Ben Harris <bjh21@bjh21.me.uk>
Date: Wed, 1 Mar 2023 21:55:07 +0000
Subject: [PATCH] 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.
---
 emccpre.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/emccpre.js b/emccpre.js
index a696ac2..355cdac 100644
--- a/emccpre.js
+++ b/emccpre.js
@@ -285,7 +285,9 @@ function dialog_cleanup() {
 }
 
 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);
         return;
     }
@@ -317,6 +319,13 @@ function initPuzzle() {
         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) {
         if (event.button >= 3)
             return;
@@ -665,6 +674,9 @@ function initPuzzle() {
         var restore_puzzle_size = Module.cwrap('restore_puzzle_size',
                                                'void', []);
         resize_handle.oncontextmenu = function(event) { return false; }
+        resize_handle.onpointerdown = function(event) {
+            resize_handle.setPointerCapture(event.pointerId);
+        }
         resize_handle.onmousedown = function(event) {
             if (event.button == 0) {
                 var xy = element_coords(onscreen_canvas);