Added preventDefaultAction flag to MouseTracker

Added a boolean preventDefaultAction property (default false) to the
event object passed to MouseTracker handler methods. Implemented in the
following MouseTracker subscribers:

* Viewer.keyboardCommandArea.innerTracker.focusHandler:
preventDefaultAction == true prevents scrolling viewer into view
* Viewer.keyboardCommandArea.innerTracker.keyHandler:
preventDefaultAction == true prevents viewer keyboard navigation
* Viewer.innerTracker.clickHandler: preventDefaultAction == true
prevents viewer zoom on click
* Viewer.innerTracker.dragHandler: preventDefaultAction == true prevents
viewer panning with mouse/touch
* Viewer.innerTracker.scrollHandler: preventDefaultAction == true
prevents viewer zooming on mousewheel/pinch
This commit is contained in:
Mark Salsbery 2013-11-04 12:41:45 -08:00
parent dbb7cee76a
commit 8e325a3748
3 changed files with 162 additions and 116 deletions

View File

@ -37,6 +37,12 @@ OPENSEADRAGON CHANGELOG
* Fixed: IE 10 not reading DZI file correctly in certain circumstances (#218) * Fixed: IE 10 not reading DZI file correctly in certain circumstances (#218)
* Added support for the 'wheel' DOM mousewheel event (#261) * Added support for the 'wheel' DOM mousewheel event (#261)
* Fix for non-canvas tile rendering at large size (#264) * Fix for non-canvas tile rendering at large size (#264)
* Added a boolean preventDefaultAction property (default false) to the event object passed to MouseTracker handler methods. Implemented in the following MouseTracker subscribers:
* Viewer.keyboardCommandArea.innerTracker.focusHandler: preventDefaultAction == true prevents scrolling viewer into view
* Viewer.keyboardCommandArea.innerTracker.keyHandler: preventDefaultAction == true prevents viewer keyboard navigation
* Viewer.innerTracker.clickHandler: preventDefaultAction == true prevents viewer zoom on click
* Viewer.innerTracker.dragHandler: preventDefaultAction == true prevents viewer panning with mouse/touch
* Viewer.innerTracker.scrollHandler: preventDefaultAction == true prevents viewer zooming on mousewheel/pinch
0.9.131: 0.9.131:

View File

@ -243,6 +243,8 @@
* True if the original event is a touch event, otherwise false. * True if the original event is a touch event, otherwise false.
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} [event.preventDefaultAction=false]
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent).
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -266,6 +268,8 @@
* True if the original event is a touch event, otherwise false. * True if the original event is a touch event, otherwise false.
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} [event.preventDefaultAction=false]
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent).
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -284,6 +288,8 @@
* True if the original event is a touch event, otherwise false. * True if the original event is a touch event, otherwise false.
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} [event.preventDefaultAction=false]
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent).
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -307,6 +313,8 @@
* True if the original event is a touch event, otherwise false. * True if the original event is a touch event, otherwise false.
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} [event.preventDefaultAction=false]
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent).
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -325,6 +333,8 @@
* True if the original event is a touch event, otherwise false. * True if the original event is a touch event, otherwise false.
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} [event.preventDefaultAction=false]
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent).
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -347,6 +357,8 @@
* True if the original event is a touch event, otherwise false. * True if the original event is a touch event, otherwise false.
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} [event.preventDefaultAction=false]
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent).
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -369,6 +381,8 @@
* True if the original event is a touch event, otherwise false. * True if the original event is a touch event, otherwise false.
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} [event.preventDefaultAction=false]
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent).
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -391,6 +405,8 @@
* True if the original event is a touch event, otherwise false. * True if the original event is a touch event, otherwise false.
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} [event.preventDefaultAction=false]
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent).
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -409,6 +425,8 @@
* True if the original event is a touch event, otherwise false. * True if the original event is a touch event, otherwise false.
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} [event.preventDefaultAction=false]
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent).
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -427,6 +445,8 @@
* True if the shift key was pressed during this event. * True if the shift key was pressed during this event.
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} [event.preventDefaultAction=false]
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent).
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -441,6 +461,8 @@
* A reference to the tracker instance. * A reference to the tracker instance.
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} [event.preventDefaultAction=false]
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent).
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -455,6 +477,8 @@
* A reference to the tracker instance. * A reference to the tracker instance.
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} [event.preventDefaultAction=false]
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent).
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -673,9 +697,10 @@
if ( tracker.focusHandler ) { if ( tracker.focusHandler ) {
propagate = tracker.focusHandler( propagate = tracker.focusHandler(
{ {
eventSource: tracker, eventSource: tracker,
originalEvent: event, originalEvent: event,
userData: tracker.userData preventDefaultAction: false,
userData: tracker.userData
} }
); );
if ( propagate === false ) { if ( propagate === false ) {
@ -695,9 +720,10 @@
if ( tracker.blurHandler ) { if ( tracker.blurHandler ) {
propagate = tracker.blurHandler( propagate = tracker.blurHandler(
{ {
eventSource: tracker, eventSource: tracker,
originalEvent: event, originalEvent: event,
userData: tracker.userData preventDefaultAction: false,
userData: tracker.userData
} }
); );
if ( propagate === false ) { if ( propagate === false ) {
@ -717,12 +743,13 @@
if ( tracker.keyHandler ) { if ( tracker.keyHandler ) {
propagate = tracker.keyHandler( propagate = tracker.keyHandler(
{ {
eventSource: tracker, eventSource: tracker,
position: getMouseRelative( event, tracker.element ), position: getMouseRelative( event, tracker.element ),
keyCode: event.keyCode ? event.keyCode : event.charCode, keyCode: event.keyCode ? event.keyCode : event.charCode,
shift: event.shiftKey, shift: event.shiftKey,
originalEvent: event, originalEvent: event,
userData: tracker.userData preventDefaultAction: false,
userData: tracker.userData
} }
); );
if ( !propagate ) { if ( !propagate ) {
@ -772,13 +799,14 @@
if ( tracker.enterHandler ) { if ( tracker.enterHandler ) {
propagate = tracker.enterHandler( propagate = tracker.enterHandler(
{ {
eventSource: tracker, eventSource: tracker,
position: getMouseRelative( isTouch ? event.changedTouches[ 0 ] : event, tracker.element ), position: getMouseRelative( isTouch ? event.changedTouches[ 0 ] : event, tracker.element ),
insideElementPressed: delegate.insideElementPressed, insideElementPressed: delegate.insideElementPressed,
buttonDownAny: IS_BUTTON_DOWN, buttonDownAny: IS_BUTTON_DOWN,
isTouchEvent: isTouch, isTouchEvent: isTouch,
originalEvent: event, originalEvent: event,
userData: tracker.userData preventDefaultAction: false,
userData: tracker.userData
} }
); );
if ( propagate === false ) { if ( propagate === false ) {
@ -828,13 +856,14 @@
if ( tracker.exitHandler ) { if ( tracker.exitHandler ) {
propagate = tracker.exitHandler( propagate = tracker.exitHandler(
{ {
eventSource: tracker, eventSource: tracker,
position: getMouseRelative( isTouch ? event.changedTouches[ 0 ] : event, tracker.element ), position: getMouseRelative( isTouch ? event.changedTouches[ 0 ] : event, tracker.element ),
insideElementPressed: delegate.insideElementPressed, insideElementPressed: delegate.insideElementPressed,
buttonDownAny: IS_BUTTON_DOWN, buttonDownAny: IS_BUTTON_DOWN,
isTouchEvent: isTouch, isTouchEvent: isTouch,
originalEvent: event, originalEvent: event,
userData: tracker.userData preventDefaultAction: false,
userData: tracker.userData
} }
); );
@ -872,11 +901,12 @@
if ( tracker.pressHandler ) { if ( tracker.pressHandler ) {
propagate = tracker.pressHandler( propagate = tracker.pressHandler(
{ {
eventSource: tracker, eventSource: tracker,
position: getMouseRelative( eventOrTouchPoint, tracker.element ), position: getMouseRelative( eventOrTouchPoint, tracker.element ),
isTouchEvent: isTouch, isTouchEvent: isTouch,
originalEvent: event, originalEvent: event,
userData: tracker.userData preventDefaultAction: false,
userData: tracker.userData
} }
); );
if ( propagate === false ) { if ( propagate === false ) {
@ -967,13 +997,14 @@
if ( tracker.releaseHandler ) { if ( tracker.releaseHandler ) {
propagate = tracker.releaseHandler( propagate = tracker.releaseHandler(
{ {
eventSource: tracker, eventSource: tracker,
position: getMouseRelative( isTouch ? event.changedTouches[ 0 ] : event, tracker.element ), position: getMouseRelative( isTouch ? event.changedTouches[ 0 ] : event, tracker.element ),
insideElementPressed: insideElementPressed, insideElementPressed: insideElementPressed,
insideElementReleased: insideElementReleased, insideElementReleased: insideElementReleased,
isTouchEvent: isTouch, isTouchEvent: isTouch,
originalEvent: event, originalEvent: event,
userData: tracker.userData preventDefaultAction: false,
userData: tracker.userData
} }
); );
if ( propagate === false ) { if ( propagate === false ) {
@ -1085,11 +1116,12 @@
var propagate = tracker.moveHandler( var propagate = tracker.moveHandler(
{ {
eventSource: tracker, eventSource: tracker,
position: getMouseRelative( event, tracker.element ), position: getMouseRelative( event, tracker.element ),
isTouchEvent: false, isTouchEvent: false,
originalEvent: event, originalEvent: event,
userData: tracker.userData preventDefaultAction: false,
userData: tracker.userData
} }
); );
if ( propagate === false ) { if ( propagate === false ) {
@ -1111,11 +1143,12 @@
function onMouseStop( tracker, originalMoveEvent ) { function onMouseStop( tracker, originalMoveEvent ) {
if ( tracker.stopHandler ) { if ( tracker.stopHandler ) {
tracker.stopHandler( { tracker.stopHandler( {
eventSource: tracker, eventSource: tracker,
position: getMouseRelative( originalMoveEvent, tracker.element ), position: getMouseRelative( originalMoveEvent, tracker.element ),
isTouchEvent: false, isTouchEvent: false,
originalEvent: originalMoveEvent, originalEvent: originalMoveEvent,
userData: tracker.userData preventDefaultAction: false,
userData: tracker.userData
} ); } );
} }
} }
@ -1200,13 +1233,14 @@
if ( tracker.scrollHandler ) { if ( tracker.scrollHandler ) {
propagate = tracker.scrollHandler( propagate = tracker.scrollHandler(
{ {
eventSource: tracker, eventSource: tracker,
position: getMouseRelative( event, tracker.element ), position: getMouseRelative( event, tracker.element ),
scroll: nDelta, scroll: nDelta,
shift: event.shiftKey, shift: event.shiftKey,
isTouchEvent: isTouch, isTouchEvent: isTouch,
originalEvent: originalEvent, originalEvent: originalEvent,
userData: tracker.userData preventDefaultAction: false,
userData: tracker.userData
} }
); );
if ( propagate === false ) { if ( propagate === false ) {
@ -1243,13 +1277,14 @@
if ( tracker.clickHandler ) { if ( tracker.clickHandler ) {
propagate = tracker.clickHandler( propagate = tracker.clickHandler(
{ {
eventSource: tracker, eventSource: tracker,
position: getMouseRelative( eventOrTouchPoint, tracker.element ), position: getMouseRelative( eventOrTouchPoint, tracker.element ),
quick: quick, quick: quick,
shift: event.shiftKey, shift: event.shiftKey,
isTouchEvent: isTouch, isTouchEvent: isTouch,
originalEvent: event, originalEvent: event,
userData: tracker.userData preventDefaultAction: false,
userData: tracker.userData
} }
); );
if ( propagate === false ) { if ( propagate === false ) {
@ -1281,13 +1316,14 @@
if ( tracker.dragHandler ) { if ( tracker.dragHandler ) {
propagate = tracker.dragHandler( propagate = tracker.dragHandler(
{ {
eventSource: tracker, eventSource: tracker,
position: getMouseRelative( eventOrTouchPoint, tracker.element ), position: getMouseRelative( eventOrTouchPoint, tracker.element ),
delta: delta, delta: delta,
shift: event.shiftKey, shift: event.shiftKey,
isTouchEvent: isTouch, isTouchEvent: isTouch,
originalEvent: event, originalEvent: event,
userData: tracker.userData preventDefaultAction: false,
userData: tracker.userData
} }
); );
if ( propagate === false ) { if ( propagate === false ) {

View File

@ -276,58 +276,62 @@ $.Viewer = function( options ) {
this.keyboardCommandArea.innerTracker = new $.MouseTracker({ this.keyboardCommandArea.innerTracker = new $.MouseTracker({
_this : this, _this : this,
element: this.keyboardCommandArea, element: this.keyboardCommandArea,
focusHandler: function(){ focusHandler: function( event ){
var point = $.getElementPosition( this.element ); if ( !event.preventDefaultAction ) {
window.scrollTo( 0, point.y ); var point = $.getElementPosition( this.element );
window.scrollTo( 0, point.y );
}
}, },
keyHandler: function( event ){ keyHandler: function( event ){
switch( event.keyCode ){ if ( !event.preventDefaultAction ) {
case 61://=|+ switch( event.keyCode ){
_this.viewport.zoomBy(1.1); case 61://=|+
_this.viewport.applyConstraints();
return false;
case 45://-|_
_this.viewport.zoomBy(0.9);
_this.viewport.applyConstraints();
return false;
case 48://0|)
_this.viewport.goHome();
_this.viewport.applyConstraints();
return false;
case 119://w
case 87://W
case 38://up arrow
if ( event.shift ) {
_this.viewport.zoomBy(1.1); _this.viewport.zoomBy(1.1);
} else { _this.viewport.applyConstraints();
_this.viewport.panBy(new $.Point(0, -0.05)); return false;
} case 45://-|_
_this.viewport.applyConstraints();
return false;
case 115://s
case 83://S
case 40://down arrow
if ( event.shift ) {
_this.viewport.zoomBy(0.9); _this.viewport.zoomBy(0.9);
} else { _this.viewport.applyConstraints();
_this.viewport.panBy(new $.Point(0, 0.05)); return false;
} case 48://0|)
_this.viewport.applyConstraints(); _this.viewport.goHome();
return false; _this.viewport.applyConstraints();
case 97://a return false;
case 37://left arrow case 119://w
_this.viewport.panBy(new $.Point(-0.05, 0)); case 87://W
_this.viewport.applyConstraints(); case 38://up arrow
return false; if ( event.shift ) {
case 100://d _this.viewport.zoomBy(1.1);
case 39://right arrow } else {
_this.viewport.panBy(new $.Point(0.05, 0)); _this.viewport.panBy(new $.Point(0, -0.05));
_this.viewport.applyConstraints(); }
return false; _this.viewport.applyConstraints();
default: return false;
//console.log( 'navigator keycode %s', event.keyCode ); case 115://s
return true; case 83://S
case 40://down arrow
if ( event.shift ) {
_this.viewport.zoomBy(0.9);
} else {
_this.viewport.panBy(new $.Point(0, 0.05));
}
_this.viewport.applyConstraints();
return false;
case 97://a
case 37://left arrow
_this.viewport.panBy(new $.Point(-0.05, 0));
_this.viewport.applyConstraints();
return false;
case 100://d
case 39://right arrow
_this.viewport.panBy(new $.Point(0.05, 0));
_this.viewport.applyConstraints();
return false;
default:
//console.log( 'navigator keycode %s', event.keyCode );
return true;
}
} }
} }
}).setTracking( true ); // default state }).setTracking( true ); // default state
@ -1474,7 +1478,7 @@ function onBlur(){
function onCanvasClick( event ) { function onCanvasClick( event ) {
var zoomPerClick, var zoomPerClick,
factor; factor;
if ( this.viewport && event.quick ) { // ignore clicks where mouse moved if ( !event.preventDefaultAction && this.viewport && event.quick ) { // ignore clicks where mouse moved
zoomPerClick = this.zoomPerClick; zoomPerClick = this.zoomPerClick;
factor = event.shift ? 1.0 / zoomPerClick : zoomPerClick; factor = event.shift ? 1.0 / zoomPerClick : zoomPerClick;
this.viewport.zoomBy( this.viewport.zoomBy(
@ -1493,7 +1497,7 @@ function onCanvasClick( event ) {
} }
function onCanvasDrag( event ) { function onCanvasDrag( event ) {
if ( this.viewport ) { if ( !event.preventDefaultAction && this.viewport ) {
if( !this.panHorizontal ){ if( !this.panHorizontal ){
event.delta.x = 0; event.delta.x = 0;
} }
@ -1533,7 +1537,7 @@ function onCanvasRelease( event ) {
function onCanvasScroll( event ) { function onCanvasScroll( event ) {
var factor; var factor;
if ( this.viewport ) { if ( !event.preventDefaultAction && this.viewport ) {
factor = Math.pow( this.zoomPerScroll, event.scroll ); factor = Math.pow( this.zoomPerScroll, event.scroll );
this.viewport.zoomBy( this.viewport.zoomBy(
factor, factor,