diff --git a/changelog.txt b/changelog.txt index 7ec30e54..e3c57618 100644 --- a/changelog.txt +++ b/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: diff --git a/src/mousetracker.js b/src/mousetracker.js index f4214a27..75ec7be0 100644 --- a/src/mousetracker.js +++ b/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 ) { - //$.console.log('pointerdown calling capturePointer() ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : '')); - capturePointer( tracker, gPoint ); - } else if ( !eventInfo.shouldCapture && implicitlyCaptured ) { - //$.console.log('pointerdown calling releasePointer() ' + (tracker.userData ? tracker.userData.toString() : '') + ' ' + (event.target === tracker.element ? 'tracker.element' : '')); - releasePointer( tracker, gPoint ); //TODO should we do this? Investigate when implementing bubble handling + if ( eventInfo.shouldCapture ) { + if ( implicitlyCaptured ) { + updatePointerCaptured( tracker, gPoint, true ); + } else { + capturePointer( tracker, gPoint ); + } } } @@ -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 ) { - //$.stopEvent( event ); - releasePointer( tracker, gPoint ); + if ( eventInfo.shouldReleaseCapture ) { + if ( event.target === tracker.element ) { + 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) - gPoint.captured = false; // Handled by updatePointerCaptured() - gPoint.insideElementPressed = false; - gPoint.insideElement = true; - startTrackingPointer( pointsList, gPoint ); + // Should never get here, but due to user agent bugs (e.g. legacy touch) it sometimes happens + return; } eventInfo.shouldCapture = false; diff --git a/src/openseadragon.js b/src/openseadragon.js index f7467ee2..01cfc864 100644 --- a/src/openseadragon.js +++ b/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 ); - if ( typeof element.style.pointerEvents !== 'undefined' ) { - element.style.pointerEvents = 'none'; - } + $.setElementPointerEvents( element, 'none' ); }, diff --git a/test/modules/events.js b/test/modules/events.js index 94e11da1..7a2b00ca 100644 --- a/test/modules/events.js +++ b/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);