Merge pull request #1957 from openseadragon/ms-preventDefault

Added preventDefault option to MouseTracker handlers: ...
This commit is contained in:
Ian Gilman 2021-03-17 11:30:17 -07:00 committed by GitHub
commit 16ab337146
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 152 additions and 102 deletions

View File

@ -40,6 +40,7 @@ OPENSEADRAGON CHANGELOG
* Fixed preventDefaultAction functionality in viewer events (#1953 @msalsbery)
* Added setImageFormatsSupported function (#1954 @pandaxtc)
* Added dragToPan to the GestureSettings class, implemented in Viewer (#1956 @msalsbery)
* Added preventDefault option to MouseTracker handlers: scrollHandler, keyDownHandler, keyUpHandler, keyHandler (#1957 @msalsbery)
2.4.2:

View File

@ -360,9 +360,11 @@ $.Button = function( options ) {
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
_this.raiseEvent( "release", { originalEvent: event.originalEvent } );
return false;
event.preventDefault = true;
} else{
event.preventDefault = false;
}
return true;
}
});

View File

@ -707,6 +707,8 @@
* True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead. Touch devices no longer generate scroll event.</span>
* @param {Object} event.originalEvent
* The original event object.
* @param {Boolean} event.preventDefault
* Set to true to prevent the default user-agent's handling of the wheel event.
* @param {Object} event.userData
* Arbitrary user-defined object.
*/
@ -885,6 +887,8 @@
* True if the meta key was pressed during this event.
* @param {Object} event.originalEvent
* The original event object.
* @param {Boolean} event.preventDefault
* Set to true to prevent the default user-agent's handling of the keydown event.
* @param {Object} event.userData
* Arbitrary user-defined object.
*/
@ -909,6 +913,8 @@
* True if the meta key was pressed during this event.
* @param {Object} event.originalEvent
* The original event object.
* @param {Boolean} event.preventDefault
* Set to true to prevent the default user-agent's handling of the keyup event.
* @param {Object} event.userData
* Arbitrary user-defined object.
*/
@ -933,6 +939,8 @@
* True if the meta key was pressed during this event.
* @param {Object} event.originalEvent
* The original event object.
* @param {Boolean} event.preventDefault
* Set to true to prevent the default user-agent's handling of the keypress event.
* @param {Object} event.userData
* Arbitrary user-defined object.
*/
@ -1772,6 +1780,8 @@
*/
function onKeyDown( tracker, event ) {
//$.console.log( "keydown %s %s %s %s %s", event.keyCode, event.charCode, event.ctrlKey, event.shiftKey, event.altKey );
var eventArgs = null;
var eventInfo = {
originalEvent: event,
eventType: 'keydown',
@ -1781,8 +1791,7 @@
preProcessEvent( tracker, eventInfo );
if ( tracker.keyDownHandler && !eventInfo.preventGesture && !eventInfo.defaultPrevented ) {
tracker.keyDownHandler(
{
eventArgs = {
eventSource: tracker,
keyCode: event.keyCode ? event.keyCode : event.charCode,
ctrl: event.ctrlKey,
@ -1790,12 +1799,14 @@
alt: event.altKey,
meta: event.metaKey,
originalEvent: event,
preventDefault: eventInfo.preventDefault || eventInfo.defaultPrevented,
userData: tracker.userData
}
);
};
tracker.keyDownHandler( eventArgs );
}
if ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) {
if ( ( eventArgs && eventArgs.preventDefault ) || ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) ) {
$.cancelEvent( event );
}
if ( eventInfo.stopPropagation ) {
@ -1811,6 +1822,8 @@
function onKeyUp( tracker, event ) {
//$.console.log( "keyup %s %s %s %s %s", event.keyCode, event.charCode, event.ctrlKey, event.shiftKey, event.altKey );
var eventArgs = null;
var eventInfo = {
originalEvent: event,
eventType: 'keyup',
@ -1820,8 +1833,7 @@
preProcessEvent( tracker, eventInfo );
if ( tracker.keyUpHandler && !eventInfo.preventGesture && !eventInfo.defaultPrevented ) {
tracker.keyUpHandler(
{
eventArgs = {
eventSource: tracker,
keyCode: event.keyCode ? event.keyCode : event.charCode,
ctrl: event.ctrlKey,
@ -1829,12 +1841,14 @@
alt: event.altKey,
meta: event.metaKey,
originalEvent: event,
preventDefault: eventInfo.preventDefault || eventInfo.defaultPrevented,
userData: tracker.userData
}
);
};
tracker.keyUpHandler( eventArgs );
}
if ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) {
if ( ( eventArgs && eventArgs.preventDefault ) || ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) ) {
$.cancelEvent( event );
}
if ( eventInfo.stopPropagation ) {
@ -1850,6 +1864,8 @@
function onKeyPress( tracker, event ) {
//$.console.log( "keypress %s %s %s %s %s", event.keyCode, event.charCode, event.ctrlKey, event.shiftKey, event.altKey );
var eventArgs = null;
var eventInfo = {
originalEvent: event,
eventType: 'keypress',
@ -1859,8 +1875,7 @@
preProcessEvent( tracker, eventInfo );
if ( tracker.keyHandler && !eventInfo.preventGesture && !eventInfo.defaultPrevented ) {
tracker.keyHandler(
{
eventArgs = {
eventSource: tracker,
keyCode: event.keyCode ? event.keyCode : event.charCode,
ctrl: event.ctrlKey,
@ -1868,12 +1883,14 @@
alt: event.altKey,
meta: event.metaKey,
originalEvent: event,
preventDefault: eventInfo.preventDefault || eventInfo.defaultPrevented,
userData: tracker.userData
}
);
};
tracker.keyHandler( eventArgs );
}
if ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) {
if ( ( eventArgs && eventArgs.preventDefault ) || ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) ) {
$.cancelEvent( event );
}
if ( eventInfo.stopPropagation ) {
@ -2035,6 +2052,8 @@
var nDelta = 0,
eventInfo;
var eventArgs = null;
// The nDelta variable is gated to provide smooth z-index scrolling
// since the mouse wheel allows for substantial deltas meant for rapid
// y-index scrolling.
@ -2051,10 +2070,7 @@
preProcessEvent( tracker, eventInfo );
if ( tracker.scrollHandler && !eventInfo.preventGesture && !eventInfo.defaultPrevented ) {
eventInfo.preventDefault = true;
tracker.scrollHandler(
{
eventArgs = {
eventSource: tracker,
pointerType: 'mouse',
position: getMouseRelative( event, tracker.element ),
@ -2062,15 +2078,18 @@
shift: event.shiftKey,
isTouchEvent: false,
originalEvent: originalEvent,
preventDefault: eventInfo.preventDefault || eventInfo.defaultPrevented,
userData: tracker.userData
}
);
};
tracker.scrollHandler( eventArgs );
}
if ( eventInfo.stopPropagation ) {
$.stopEvent( originalEvent );
}
if ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) {
if ( ( eventArgs && eventArgs.preventDefault ) || ( eventInfo.preventDefault && !eventInfo.defaultPrevented ) ) {
$.cancelEvent( originalEvent );
}
}
@ -2811,9 +2830,12 @@
case 'pointerover':
case 'pointerout':
case 'contextmenu':
case 'keydown':
case 'keyup':
case 'keypress':
eventInfo.isStopable = true;
eventInfo.isCancelable = true;
eventInfo.preventDefault = false;
eventInfo.preventDefault = false; // onContextMenu(), onKeyDown(), onKeyUp(), onKeyPress() may set true
eventInfo.preventGesture = false;
eventInfo.stopPropagation = false;
break;
@ -2834,7 +2856,7 @@
case 'wheel':
eventInfo.isStopable = true;
eventInfo.isCancelable = true;
eventInfo.preventDefault = false; // handleWheelEvent() may set true (tracker.hasScrollHandler)
eventInfo.preventDefault = false; // handleWheelEvent() may set true
eventInfo.preventGesture = !tracker.hasScrollHandler;
eventInfo.stopPropagation = false;
break;
@ -2861,27 +2883,6 @@
eventInfo.preventGesture = false;
eventInfo.stopPropagation = false;
break;
case 'keydown':
eventInfo.isStopable = true;
eventInfo.isCancelable = true;
eventInfo.preventDefault = !!tracker.keyDownHandler;
eventInfo.preventGesture = false;
eventInfo.stopPropagation = false;
break;
case 'keyup':
eventInfo.isStopable = true;
eventInfo.isCancelable = true;
eventInfo.preventDefault = !!tracker.keyUpHandler;
eventInfo.preventGesture = false;
eventInfo.stopPropagation = false;
break;
case 'keypress':
eventInfo.isStopable = true;
eventInfo.isCancelable = true;
eventInfo.preventDefault = !!tracker.keyHandler;
eventInfo.preventGesture = false;
eventInfo.stopPropagation = false;
break;
case 'focus':
case 'blur':
case 'pointerenter':

View File

@ -593,6 +593,15 @@ function onCanvasRelease( event ) {
* @function
*/
function onCanvasScroll( event ) {
var eventArgs = {
tracker: event.eventSource,
position: event.position,
scroll: event.scroll,
shift: event.shift,
originalEvent: event.originalEvent,
preventDefault: event.preventDefault
};
/**
* Raised when a scroll event occurs on the {@link OpenSeadragon.Viewer#navigator} element (mouse wheel, touch pinch, etc.).
*
@ -605,15 +614,12 @@ function onCanvasScroll( event ) {
* @property {Number} scroll - The scroll delta for the event.
* @property {Boolean} shift - True if the shift key was pressed during this event.
* @property {Object} originalEvent - The original DOM event.
* @property {Boolean} preventDefault - Set to true to prevent the default user-agent's handling of the wheel event.
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
this.viewer.raiseEvent( 'navigator-scroll', {
tracker: event.eventSource,
position: event.position,
scroll: event.scroll,
shift: event.shift,
originalEvent: event.originalEvent
});
this.viewer.raiseEvent( 'navigator-scroll', eventArgs );
event.preventDefault = eventArgs.preventDefault;
}
/**

View File

@ -400,6 +400,8 @@ function onStripScroll( event ) {
}
}
}
event.preventDefault = true;
}
}
@ -528,22 +530,27 @@ function onKeyDown( event ) {
switch ( event.keyCode ) {
case 38: //up arrow
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
return false;
event.preventDefault = true;
break;
case 40: //down arrow
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } );
return false;
event.preventDefault = true;
break;
case 37: //left arrow
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } );
return false;
event.preventDefault = true;
break;
case 39: //right arrow
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
return false;
event.preventDefault = true;
break;
default:
//console.log( 'navigator keycode %s', event.keyCode );
return true;
event.preventDefault = false;
break;
}
} else {
return true;
event.preventDefault = false;
}
}
@ -560,31 +567,38 @@ function onKeyPress( event ) {
switch ( event.keyCode ) {
case 61: //=|+
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
return false;
event.preventDefault = true;
break;
case 45: //-|_
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } );
return false;
event.preventDefault = true;
break;
case 48: //0|)
case 119: //w
case 87: //W
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
return false;
event.preventDefault = true;
break;
case 115: //s
case 83: //S
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } );
return false;
event.preventDefault = true;
break;
case 97: //a
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: -1, shift: null } );
return false;
event.preventDefault = true;
break;
case 100: //d
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
return false;
event.preventDefault = true;
break;
default:
//console.log( 'navigator keycode %s', event.keyCode );
return true;
event.preventDefault = false;
break;
}
} else {
return true;
event.preventDefault = false;
}
}

View File

@ -2606,6 +2606,7 @@ function onCanvasKeyDown( event ) {
}
this.viewport.applyConstraints();
}
event.preventDefault = true;
break;
case 40://down arrow
if (!canvasKeyDownEventArgs.preventVerticalPan) {
@ -2616,23 +2617,29 @@ function onCanvasKeyDown( event ) {
}
this.viewport.applyConstraints();
}
event.preventDefault = true;
break;
case 37://left arrow
if (!canvasKeyDownEventArgs.preventHorizontalPan) {
this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(-this.pixelsPerArrowPress, 0)));
this.viewport.applyConstraints();
}
event.preventDefault = true;
break;
case 39://right arrow
if (!canvasKeyDownEventArgs.preventHorizontalPan) {
this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(this.pixelsPerArrowPress, 0)));
this.viewport.applyConstraints();
}
event.preventDefault = true;
break;
default:
//console.log( 'navigator keycode %s', event.keyCode );
event.preventDefault = false;
break;
}
} else {
event.preventDefault = false;
}
}
function onCanvasKeyPress( event ) {
@ -2652,14 +2659,17 @@ function onCanvasKeyPress( event ) {
case 61://=|+
this.viewport.zoomBy(1.1);
this.viewport.applyConstraints();
event.preventDefault = true;
break;
case 45://-|_
this.viewport.zoomBy(0.9);
this.viewport.applyConstraints();
event.preventDefault = true;
break;
case 48://0|)
this.viewport.goHome();
this.viewport.applyConstraints();
event.preventDefault = true;
break;
case 119://w
case 87://W
@ -2671,6 +2681,7 @@ function onCanvasKeyPress( event ) {
}
this.viewport.applyConstraints();
}
event.preventDefault = true;
break;
case 115://s
case 83://S
@ -2682,18 +2693,21 @@ function onCanvasKeyPress( event ) {
}
this.viewport.applyConstraints();
}
event.preventDefault = true;
break;
case 97://a
if (!canvasKeyPressEventArgs.preventHorizontalPan) {
this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(-40, 0)));
this.viewport.applyConstraints();
}
event.preventDefault = true;
break;
case 100://d
if (!canvasKeyPressEventArgs.preventHorizontalPan) {
this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(40, 0)));
this.viewport.applyConstraints();
}
event.preventDefault = true;
break;
case 114: //r - clockwise rotation
if(this.viewport.flipped){
@ -2702,6 +2716,7 @@ function onCanvasKeyPress( event ) {
this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360));
}
this.viewport.applyConstraints();
event.preventDefault = true;
break;
case 82: //R - counterclockwise rotation
if(this.viewport.flipped){
@ -2710,14 +2725,19 @@ function onCanvasKeyPress( event ) {
this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360));
}
this.viewport.applyConstraints();
event.preventDefault = true;
break;
case 102: //f
this.viewport.toggleFlip();
event.preventDefault = true;
break;
default:
// console.log( 'navigator keycode %s', event.keyCode );
event.preventDefault = false;
break;
}
} else {
event.preventDefault = false;
}
}
@ -3204,7 +3224,8 @@ function onCanvasScroll( event ) {
scroll: event.scroll,
shift: event.shift,
originalEvent: event.originalEvent,
preventDefaultAction: false
preventDefaultAction: false,
preventDefault: true
};
/**
@ -3220,6 +3241,7 @@ function onCanvasScroll( event ) {
* @property {Boolean} shift - True if the shift key was pressed during this event.
* @property {Object} originalEvent - The original DOM event.
* @property {Boolean} preventDefaultAction - Set to true to prevent default scroll to zoom behaviour. Default: false.
* @property {Boolean} preventDefault - Set to true to prevent the default user-agent's handling of the wheel event. Default: true.
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
this.raiseEvent('canvas-scroll', canvasScrollEventArgs );
@ -3239,6 +3261,10 @@ function onCanvasScroll( event ) {
this.viewport.applyConstraints();
}
}
event.preventDefault = canvasScrollEventArgs.preventDefault;
} else {
event.preventDefault = true;
}
}