shithub: puzzles

Info  •  Files  •  Log  •  Branches

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.

--- a/emccpre.js

+++ b/emccpre.js

@@ -285,11 +285,6 @@

 }

 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 @@

         return toret;

     };

-    var canvas_mousedown_handler = function(event) {

+    onscreen_canvas.onmousedown = function(event) {

         if (event.button >= 3)

             return;

@@ -339,10 +334,9 @@

         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 @@

     };

     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 @@

         }

     };

-    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 @@

         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 @@

             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 @@

                     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 @@

                 }, 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', []);