Merge pull request #1972 from openseadragon/ms-webkit-bug

Workaround for WebKit Pointer Event Implicit Capture Bug

changelog.txt

@@ -48,6 +48,9 @@ OPENSEADRAGON CHANGELOG
 * Accessibility: we now take the browser's zoom into account when choosing what detail level to draw (#1937 @ronnymikalsen)
 * Fixed a bug causing overlays to disappear in Sequence Mode (#1865 @gunmiosb)
 * Fixed a bug where the ajaxHeaders provided per-image were not being used for image requests (#1968 @maxshuty)
+* MouseTracker: Added workaround for WebKit Pointer Event Implicit Capture Bug (#1972 @msalsbery)
+* Removed test for move-leave (fly-over, no enter event)...not a valid, handleable event state, no longer supported (#1972 @msalsbery)
+* Added OpenSeadragon.setElementPointerEvents() for setting pointer-events to other values besides 'none' on DOM elements (#1972 @msalsbery)
 
 2.4.2:
 

src/mousetracker.js

@@ -281,6 +281,10 @@
                                 this.pinchHandler );
         this.hasScrollHandler = !!this.scrollHandler;
 
+        if ( $.MouseTracker.havePointerEvents ) {
+            $.setElementPointerEvents( this.element, 'auto' );
+        }
+
         if (this.exitHandler) {
             $.console.error("MouseTracker.exitHandler is deprecated. Use MouseTracker.leaveHandler instead.");
         }
@@ -1539,13 +1543,14 @@
 
         if ( $.MouseTracker.havePointerCapture ) {
             if ( $.MouseTracker.havePointerEvents ) {
-                // Can throw InvalidPointerId
+                // Can throw NotFoundError (InvalidPointerId Firefox < 82)
                 //   (should never happen so we'll log a warning)
                 try {
                     tracker.element.setPointerCapture( gPoint.id );
                     //$.console.log('element.setPointerCapture() called');
                 } catch ( e ) {
                     $.console.warn('setPointerCapture() called on invalid pointer ID');
+                    return;
                 }
             } else {
                 tracker.element.setCapture( true );
@@ -1601,7 +1606,7 @@
                 if ( !cachedGPoint || !cachedGPoint.captured ) {
                     return;
                 }
-                // Can throw InvalidPointerId
+                // Can throw NotFoundError (InvalidPointerId Firefox < 82)
                 //   (should never happen, but it does on Firefox 79 touch so we won't log a warning)
                 try {
                     tracker.element.releasePointerCapture( gPoint.id );
@@ -1731,7 +1736,7 @@
      * @inner
      */
     function onClick( tracker, event ) {
-        //$.console.log('onClick ' + (tracker.userData ? tracker.userData.toString() : ''));
+        //$.console.log('click ' + (tracker.userData ? tracker.userData.toString() : ''));
 
         var eventInfo = {
             originalEvent: event,
@@ -1755,7 +1760,7 @@
      * @inner
      */
     function onDblClick( tracker, event ) {
-        //$.console.log('onDblClick ' + (tracker.userData ? tracker.userData.toString() : ''));
+        //$.console.log('dblclick ' + (tracker.userData ? tracker.userData.toString() : ''));
 
         var eventInfo = {
             originalEvent: event,
@@ -1904,7 +1909,7 @@
      * @inner
      */
     function onFocus( tracker, event ) {
-        //console.log( "focus %s", event );
+        //$.console.log('focus  ' + (tracker.userData ? tracker.userData.toString() : ''));
 
         // focus doesn't bubble and is not cancelable, but we call
         //   preProcessEvent() so it's dispatched to preProcessEventHandler
@@ -1934,7 +1939,7 @@
      * @inner
      */
     function onBlur( tracker, event ) {
-        //console.log( "blur %s", event );
+        //$.console.log('blur  ' + (tracker.userData ? tracker.userData.toString() : ''));
 
         // blur doesn't bubble and is not cancelable, but we call
         //   preProcessEvent() so it's dispatched to preProcessEventHandler
@@ -2116,7 +2121,9 @@
         };
         preProcessEvent( tracker, eventInfo );
 
-        updatePointerCaptured( tracker, gPoint, false );
+        if ( event.target === tracker.element ) {
+            updatePointerCaptured( tracker, gPoint, false );
+        }
 
         if ( eventInfo.stopPropagation ) {
             $.stopEvent( event );
@@ -2137,7 +2144,7 @@
 
         time = $.now();
 
-        //$.console.log('touchstart ' + (tracker.userData ? tracker.userData.toString() : ''));
+        //$.console.log('touchstart ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
 
         if ( pointsList.getLength() > event.touches.length - touchCount ) {
             $.console.warn('Tracked touch contact count doesn\'t match event.touches.length');
@@ -2164,9 +2171,9 @@
             // simulate touchenter on our tracked element
             updatePointerEnter( tracker, eventInfo, gPoint );
 
-            updatePointerCaptured( tracker, gPoint, true );
-
             updatePointerDown( tracker, eventInfo, gPoint, 0 );
+
+            updatePointerCaptured( tracker, gPoint, true );
         }
 
         if ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) {
@@ -2190,7 +2197,7 @@
 
         time = $.now();
 
-        //$.console.log('touchend ' + (tracker.userData ? tracker.userData.toString() : ''));
+        //$.console.log('touchend ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
 
         var eventInfo = {
             originalEvent: event,
@@ -2530,22 +2537,6 @@
      * @inner
      */
     function onPointerDown( tracker, event ) {
-        //$.console.log('onPointerDown ' + (tracker.userData ? tracker.userData.toString() : ''));
-        // $.console.log('onPointerDown ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + event.target.tagName);
-
-        // Most browsers implicitly capture touch pointer events
-        // Note no IE versions have element.hasPointerCapture() so no implicit
-        //    pointer capture possible
-        var implicitlyCaptured = ($.MouseTracker.havePointerEvents &&
-                                 tracker.element.hasPointerCapture &&
-                                 $.Browser.vendor !== $.BROWSERS.IE) ?
-                        tracker.element.hasPointerCapture(event.pointerId) : false;
-        // if (implicitlyCaptured) {
-        //     $.console.log('pointerdown implicitlyCaptured ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
-        // } else {
-        //     $.console.log('pointerdown not implicitlyCaptured ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
-        // }
-
         var gPoint = {
             id: getPointerId( event ),
             type: getPointerType( event ),
@@ -2554,6 +2545,19 @@
             currentTime: $.now()
         };
 
+        // Most browsers implicitly capture touch pointer events
+        // Note no IE versions have element.hasPointerCapture() so no implicit
+        //    pointer capture possible
+        // var implicitlyCaptured = ($.MouseTracker.havePointerEvents &&
+        //                         event.target.hasPointerCapture &&
+        //                         $.Browser.vendor !== $.BROWSERS.IE) ?
+        //                         event.target.hasPointerCapture(event.pointerId) : false;
+        var implicitlyCaptured = $.MouseTracker.havePointerEvents &&
+                                gPoint.type === 'touch' &&
+                                $.Browser.vendor !== $.BROWSERS.IE;
+
+        //$.console.log('pointerdown ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
+
         var eventInfo = {
             originalEvent: event,
             eventType: 'pointerdown',
@@ -2570,12 +2574,12 @@
         if ( eventInfo.stopPropagation ) {
             $.stopEvent( event );
         }
-        if ( eventInfo.shouldCapture && !implicitlyCaptured ) {
+        if ( eventInfo.shouldCapture ) {
-           //$.console.log('pointerdown calling capturePointer() ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
+            if ( implicitlyCaptured ) {
-           capturePointer( tracker, gPoint );
+                updatePointerCaptured( tracker, gPoint, true );
-        } else if ( !eventInfo.shouldCapture && implicitlyCaptured ) {
+            } else {
-           //$.console.log('pointerdown calling releasePointer() ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
+                capturePointer( tracker, gPoint );
-           releasePointer( tracker, gPoint ); //TODO should we do this? Investigate when implementing bubble handling
+            }
         }
     }
 
@@ -2621,7 +2625,7 @@
     function handlePointerUp( tracker, event ) {
         var gPoint;
 
-        //$.console.log('onPointerUp ' + (tracker.userData ? tracker.userData.toString() : ''));
+        //$.console.log('pointerup ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
 
         gPoint = {
             id: getPointerId( event ),
@@ -2651,9 +2655,12 @@
         // Per spec, pointerup events are supposed to release capture. Not all browser
         //   versions have adhered to the spec, and there's no harm in releasing
         //   explicitly
-        if ( eventInfo.shouldReleaseCapture && event.target === tracker.element ) {
+        if ( eventInfo.shouldReleaseCapture ) {
-           //$.stopEvent( event );
+            if ( event.target === tracker.element ) {
-           releasePointer( tracker, gPoint );
+                releasePointer( tracker, gPoint );
+            } else {
+                updatePointerCaptured( tracker, gPoint, false );
+            }
         }
     }
 
@@ -2731,7 +2738,7 @@
      * @inner
      */
     function onPointerCancel( tracker, event ) {
-        //$.console.log('pointercancel ' + (tracker.userData ? tracker.userData.toString() : ''));
+        //$.console.log('pointercancel ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : ''));
 
         var gPoint = {
             id: event.pointerId,
@@ -2770,6 +2777,7 @@
      * @returns {Number} Number of gesture points in pointsList.
      */
     function startTrackingPointer( pointsList, gPoint ) {
+        //$.console.log('startTrackingPointer *** ' + pointsList.type + ' ' + gPoint.id.toString());
         gPoint.speed = 0;
         gPoint.direction = 0;
         gPoint.contactPos = gPoint.currentPos;
@@ -2794,13 +2802,22 @@
      * @returns {Number} Number of gesture points in pointsList.
      */
     function stopTrackingPointer( tracker, pointsList, gPoint ) {
+        //$.console.log('stopTrackingPointer *** ' + pointsList.type + ' ' + gPoint.id.toString());
         var listLength;
 
         var trackedGPoint = pointsList.getById( gPoint.id );
 
         if ( trackedGPoint ) {
             if ( trackedGPoint.captured ) {
+                $.console.warn('stopTrackingPointer() called on captured pointer');
                 releasePointer( tracker, trackedGPoint );
+            }
+
+            // If child element relinquishes capture to a parent we may get here
+            //   from a pointerleave event while a pointerup event will never be received.
+            //   In that case, we'll clean up the contact count
+            if ( (pointsList.type === 'mouse' || pointsList.type === 'pen') &&
+                                                        pointsList.contacts > 0 ) {
                 pointsList.removeContact();
             }
 
@@ -3264,21 +3281,23 @@
 
             gPoint = updateGPoint;
         } else {
-            // Initialize for tracking and add to the tracking list (no pointerover or pointermove event occurred before this)
+            // Initialize for tracking and add to the tracking list (no pointerenter event occurred before this)
+            $.console.warn('pointerdown event on untracked pointer');
             gPoint.captured = false; // Handled by updatePointerCaptured()
             gPoint.insideElementPressed = true;
             gPoint.insideElement = true;
             startTrackingPointer( pointsList, gPoint );
+            return;
         }
 
+        pointsList.addContact();
+        //$.console.log('contacts++ ', pointsList.contacts);
+
         if ( !eventInfo.preventGesture && !eventInfo.defaultPrevented ) {
             eventInfo.shouldCapture = true;
             eventInfo.shouldReleaseCapture = false;
             eventInfo.preventDefault = true;
 
-            pointsList.addContact();
-            //$.console.log('contacts++ ', pointsList.contacts);
-
             if ( tracker.dragHandler || tracker.dragEndHandler || tracker.pinchHandler ) {
                 $.MouseTracker.gesturePointVelocityTracker.addPoint( tracker, gPoint );
             }
@@ -3393,6 +3412,9 @@
         updateGPoint = pointsList.getById( gPoint.id );
 
         if ( updateGPoint ) {
+            pointsList.removeContact();
+            //$.console.log('contacts-- ', pointsList.contacts);
+
             // Update the pointer, stop tracking it if not still in this element
             if ( updateGPoint.captured ) {
                 //updateGPoint.captured = false; // Handled by updatePointerCaptured()
@@ -3426,9 +3448,6 @@
                 eventInfo.shouldReleaseCapture = true;
                 eventInfo.preventDefault = true;
 
-                pointsList.removeContact();
-                //$.console.log('contacts-- ', pointsList.contacts);
-
                 if ( tracker.dragHandler || tracker.dragEndHandler || tracker.pinchHandler ) {
                     $.MouseTracker.gesturePointVelocityTracker.removePoint( tracker, updateGPoint );
                 }
@@ -3588,11 +3607,8 @@
             updateGPoint.currentPos = gPoint.currentPos;
             updateGPoint.currentTime = gPoint.currentTime;
         } else {
-            // Initialize for tracking and add to the tracking list (no pointerover or pointerdown event occurred before this)
+            // Should never get here, but due to user agent bugs (e.g. legacy touch) it sometimes happens
-            gPoint.captured = false; // Handled by updatePointerCaptured()
+            return;
-            gPoint.insideElementPressed = false;
-            gPoint.insideElement = true;
-            startTrackingPointer( pointsList, gPoint );
         }
 
         eventInfo.shouldCapture = false;

src/openseadragon.js

@@ -1910,16 +1910,27 @@ function OpenSeadragon( options ){
         },
 
 
+        /**
+         * Sets the specified element's pointer-events style attribute to the passed value.
+         * @function
+         * @param {Element|String} element
+         * @param {String} value
+         */
+        setElementPointerEvents: function( element, value ) {
+            element = $.getElement( element );
+            if ( typeof element.style.pointerEvents !== 'undefined' ) {
+                element.style.pointerEvents = value;
+            }
+        },
+
+
         /**
          * Sets the specified element's pointer-events style attribute to 'none'.
          * @function
          * @param {Element|String} element
          */
         setElementPointerEventsNone: function( element ) {
-            element = $.getElement( element );
+            $.setElementPointerEvents( element, 'none' );
-            if ( typeof element.style.pointerEvents !== 'undefined' ) {
-                element.style.pointerEvents = 'none';
-            }
         },
 
 

test/modules/events.js

@@ -403,33 +403,6 @@
                 //quickClick:            false
             });
 
-            // move-leave (fly-over, no enter event)
-            resetForAssessment();
-            simulateMove(1, 1, 10);
-            simulateMove(-1, -1, 10);
-            simulateLeave(-1, -1);
-            assessGestureExpectations({
-                description:           'move-leave (fly-over, no enter event):  ',
-                enterCount:            0,
-                leaveCount:            1,
-                pressCount:            0,
-                releaseCount:          0,
-                rightPressCount:       0,
-                rightReleaseCount:     0,
-                middlePressCount:      0,
-                middleReleaseCount:    0,
-                moveCount:             20,
-                clickCount:            0,
-                dblClickCount:         0,
-                dragCount:             0,
-                dragEndCount:          0,
-                //insideElementPressed:  false,
-                //insideElementReleased: false,
-                contacts:              0,
-                trackedPointers:       0
-                //quickClick:            false
-            });
-
             // enter-press-release-press-release-leave (primary/left double click)
             resetForAssessment();
             simulateEnter(0, 0);