mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-29 00:26:10 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1953 from openseadragon/ms-preventDefaultAction

Browse Source 
Fixed preventDefaultAction Functionality in Viewer Events
This commit is contained in:
Ian Gilman 2021-03-12 11:44:33 -08:00 committed by GitHub
commit 96ce058d13
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 149 additions and 230 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changelog.txt
View File

@ -37,6 +37,7 @@ OPENSEADRAGON CHANGELOG
* Fixed simulated drag events in navigator tests (#1949 @msalsbery) * Fixed simulated drag events in navigator tests (#1949 @msalsbery)
* Added preventDefault option to MouseTracker.contextMenuHandler and Viewer 'canvas-contextmenu' event args (#1951 @msalsbery) * Added preventDefault option to MouseTracker.contextMenuHandler and Viewer 'canvas-contextmenu' event args (#1951 @msalsbery)
* MouseTracker: Added preProcessEventHandler for keydown, keyup, keypress, focus, blur Events (#1951 @msalsbery) * MouseTracker: Added preProcessEventHandler for keydown, keyup, keypress, focus, blur Events (#1951 @msalsbery)
* Fixed preventDefaultAction functionality in viewer events (#1953 @msalsbery)
2.4.2: 2.4.2:

62
src/mousetracker.js
View File

@ -495,8 +495,6 @@
* True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span> * True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span>
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} event.preventDefaultAction
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -528,8 +526,6 @@
* True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span> * True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span>
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} event.preventDefaultAction
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -561,8 +557,6 @@
* True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span> * True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span>
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} event.preventDefaultAction
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -586,8 +580,6 @@
* True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span> * True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span>
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} event.preventDefaultAction
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -614,8 +606,6 @@
* True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span> * True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span>
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} event.preventDefaultAction
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -644,8 +634,6 @@
* True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span> * True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span>
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} event.preventDefaultAction
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -672,8 +660,6 @@
* True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span> * True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span>
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} event.preventDefaultAction
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -697,8 +683,6 @@
* True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span> * True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span>
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} event.preventDefaultAction
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -723,8 +707,6 @@
* 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> * 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 * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} event.preventDefaultAction
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -749,8 +731,6 @@
* True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span> * True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span>
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} event.preventDefaultAction
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -773,8 +753,6 @@
* True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span> * True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span>
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} event.preventDefaultAction
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -806,8 +784,6 @@
* True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span> * True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span>
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} event.preventDefaultAction
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -834,8 +810,6 @@
* True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span> * True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span>
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} event.preventDefaultAction
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -864,8 +838,6 @@
* 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
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -889,8 +861,6 @@
* True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span> * True if the original event is a touch event, otherwise false. <span style="color:red;">Deprecated. Use pointerType and/or originalEvent instead.</span>
* @param {Object} event.originalEvent * @param {Object} event.originalEvent
* The original event object. * The original event object.
* @param {Boolean} event.preventDefaultAction
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -915,8 +885,6 @@
* True if the meta key was pressed during this event. * True if the meta 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
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -941,8 +909,6 @@
* True if the meta key was pressed during this event. * True if the meta 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
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -967,8 +933,6 @@
* True if the meta key was pressed during this event. * True if the meta 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
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -983,8 +947,6 @@
* 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
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -999,8 +961,6 @@
* 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
* Set to true to prevent the tracker subscriber from performing its default action (subscriber implementation dependent). Default: false.
* @param {Object} event.userData * @param {Object} event.userData
* Arbitrary user-defined object. * Arbitrary user-defined object.
*/ */
@ -1830,7 +1790,6 @@
alt: event.altKey, alt: event.altKey,
meta: event.metaKey, meta: event.metaKey,
originalEvent: event, originalEvent: event,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -1870,7 +1829,6 @@
alt: event.altKey, alt: event.altKey,
meta: event.metaKey, meta: event.metaKey,
originalEvent: event, originalEvent: event,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -1910,7 +1868,6 @@
alt: event.altKey, alt: event.altKey,
meta: event.metaKey, meta: event.metaKey,
originalEvent: event, originalEvent: event,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -1948,7 +1905,6 @@
{ {
eventSource: tracker, eventSource: tracker,
originalEvent: event, originalEvent: event,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -1979,7 +1935,6 @@
{ {
eventSource: tracker, eventSource: tracker,
originalEvent: event, originalEvent: event,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -2107,7 +2062,6 @@
shift: event.shiftKey, shift: event.shiftKey,
isTouchEvent: false, isTouchEvent: false,
originalEvent: originalEvent, originalEvent: originalEvent,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -3170,7 +3124,6 @@
buttonDownAny: pointsList.buttons !== 0, buttonDownAny: pointsList.buttons !== 0,
isTouchEvent: gPoint.type === 'touch', isTouchEvent: gPoint.type === 'touch',
originalEvent: eventInfo.originalEvent, originalEvent: eventInfo.originalEvent,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -3216,7 +3169,6 @@
buttonDownAny: pointsList.buttons !== 0, buttonDownAny: pointsList.buttons !== 0,
isTouchEvent: gPoint.type === 'touch', isTouchEvent: gPoint.type === 'touch',
originalEvent: eventInfo.originalEvent, originalEvent: eventInfo.originalEvent,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} ); } );
} }
@ -3287,7 +3239,6 @@
buttons: pointsList.buttons, buttons: pointsList.buttons,
isTouchEvent: gPoint.type === 'touch', isTouchEvent: gPoint.type === 'touch',
originalEvent: eventInfo.originalEvent, originalEvent: eventInfo.originalEvent,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -3342,7 +3293,6 @@
buttons: pointsList.buttons, buttons: pointsList.buttons,
isTouchEvent: gPoint.type === 'touch', isTouchEvent: gPoint.type === 'touch',
originalEvent: eventInfo.originalEvent, originalEvent: eventInfo.originalEvent,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -3431,7 +3381,6 @@
buttons: pointsList.buttons, buttons: pointsList.buttons,
isTouchEvent: gPoint.type === 'touch', isTouchEvent: gPoint.type === 'touch',
originalEvent: eventInfo.originalEvent, originalEvent: eventInfo.originalEvent,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -3497,7 +3446,6 @@
insideElementReleased: updateGPoint.insideElement, insideElementReleased: updateGPoint.insideElement,
isTouchEvent: updateGPoint.type === 'touch', isTouchEvent: updateGPoint.type === 'touch',
originalEvent: eventInfo.originalEvent, originalEvent: eventInfo.originalEvent,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -3515,7 +3463,6 @@
shift: eventInfo.originalEvent.shiftKey, shift: eventInfo.originalEvent.shiftKey,
isTouchEvent: updateGPoint.type === 'touch', isTouchEvent: updateGPoint.type === 'touch',
originalEvent: eventInfo.originalEvent, originalEvent: eventInfo.originalEvent,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -3537,7 +3484,6 @@
shift: eventInfo.originalEvent.shiftKey, shift: eventInfo.originalEvent.shiftKey,
isTouchEvent: updateGPoint.type === 'touch', isTouchEvent: updateGPoint.type === 'touch',
originalEvent: eventInfo.originalEvent, originalEvent: eventInfo.originalEvent,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -3565,7 +3511,6 @@
shift: eventInfo.originalEvent.shiftKey, shift: eventInfo.originalEvent.shiftKey,
isTouchEvent: updateGPoint.type === 'touch', isTouchEvent: updateGPoint.type === 'touch',
originalEvent: eventInfo.originalEvent, originalEvent: eventInfo.originalEvent,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -3599,7 +3544,6 @@
insideElementReleased: updateGPoint.insideElement, insideElementReleased: updateGPoint.insideElement,
isTouchEvent: updateGPoint.type === 'touch', isTouchEvent: updateGPoint.type === 'touch',
originalEvent: eventInfo.originalEvent, originalEvent: eventInfo.originalEvent,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -3672,7 +3616,6 @@
buttons: pointsList.buttons, buttons: pointsList.buttons,
isTouchEvent: gPoint.type === 'touch', isTouchEvent: gPoint.type === 'touch',
originalEvent: eventInfo.originalEvent, originalEvent: eventInfo.originalEvent,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -3689,7 +3632,6 @@
buttons: pointsList.buttons, buttons: pointsList.buttons,
isTouchEvent: updateGPoint.type === 'touch', isTouchEvent: updateGPoint.type === 'touch',
originalEvent: eventInfo.originalEvent, originalEvent: eventInfo.originalEvent,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -3711,7 +3653,6 @@
shift: eventInfo.originalEvent.shiftKey, shift: eventInfo.originalEvent.shiftKey,
isTouchEvent: updateGPoint.type === 'touch', isTouchEvent: updateGPoint.type === 'touch',
originalEvent: eventInfo.originalEvent, originalEvent: eventInfo.originalEvent,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -3729,7 +3670,6 @@
buttons: pointsList.buttons, buttons: pointsList.buttons,
isTouchEvent: gPointArray[ 0 ].type === 'touch', isTouchEvent: gPointArray[ 0 ].type === 'touch',
originalEvent: eventInfo.originalEvent, originalEvent: eventInfo.originalEvent,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -3755,7 +3695,6 @@
distance: delegate.currentPinchDist, distance: delegate.currentPinchDist,
shift: eventInfo.originalEvent.shiftKey, shift: eventInfo.originalEvent.shiftKey,
originalEvent: eventInfo.originalEvent, originalEvent: eventInfo.originalEvent,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} }
); );
@ -3802,7 +3741,6 @@
buttons: tracker.getActivePointersListByType( pointerType ).buttons, buttons: tracker.getActivePointersListByType( pointerType ).buttons,
isTouchEvent: pointerType === 'touch', isTouchEvent: pointerType === 'touch',
originalEvent: originalMoveEvent, originalEvent: originalMoveEvent,
preventDefaultAction: false,
userData: tracker.userData userData: tracker.userData
} ); } );
} }

4
src/navigator.js
View File

@ -471,7 +471,7 @@ function onCanvasClick( event ) {
quick: event.quick, quick: event.quick,
shift: event.shift, shift: event.shift,
originalEvent: event.originalEvent, originalEvent: event.originalEvent,
preventDefaultAction: event.preventDefaultAction preventDefaultAction: false
}; };
/** /**
* Raised when a click event occurs on the {@link OpenSeadragon.Viewer#navigator} element. * Raised when a click event occurs on the {@link OpenSeadragon.Viewer#navigator} element.
@ -523,7 +523,7 @@ function onCanvasDrag( event ) {
direction: event.direction, direction: event.direction,
shift: event.shift, shift: event.shift,
originalEvent: event.originalEvent, originalEvent: event.originalEvent,
preventDefaultAction: event.preventDefaultAction preventDefaultAction: false
}; };
/** /**
* Raised when a drag event occurs on the {@link OpenSeadragon.Viewer#navigator} element. * Raised when a drag event occurs on the {@link OpenSeadragon.Viewer#navigator} element.

4
src/referencestrip.js
View File

@ -524,7 +524,7 @@ function onStripLeave( event ) {
function onKeyDown( event ) { function onKeyDown( event ) {
//console.log( event.keyCode ); //console.log( event.keyCode );
if ( !event.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) { if ( !event.ctrl && !event.alt && !event.meta ) {
switch ( event.keyCode ) { switch ( event.keyCode ) {
case 38: //up arrow case 38: //up arrow
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } ); onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );
@ -556,7 +556,7 @@ function onKeyDown( event ) {
function onKeyPress( event ) { function onKeyPress( event ) {
//console.log( event.keyCode ); //console.log( event.keyCode );
if ( !event.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) { if ( !event.ctrl && !event.alt && !event.meta ) {
switch ( event.keyCode ) { switch ( event.keyCode ) {
case 61: //=|+ case 61: //=|+
onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } ); onStripScroll.call( this, { eventSource: this.tracker, position: null, scroll: 1, shift: null } );

253
src/viewer.js
View File

@ -2574,7 +2574,7 @@ function onCanvasContextMenu( event ) {
function onCanvasKeyDown( event ) { function onCanvasKeyDown( event ) {
var canvasKeyDownEventArgs = { var canvasKeyDownEventArgs = {
originalEvent: event.originalEvent, originalEvent: event.originalEvent,
preventDefaultAction: event.preventDefaultAction, preventDefaultAction: false,
preventVerticalPan: event.preventVerticalPan, preventVerticalPan: event.preventVerticalPan,
preventHorizontalPan: event.preventHorizontalPan preventHorizontalPan: event.preventHorizontalPan
}; };
@ -2606,7 +2606,7 @@ function onCanvasKeyDown( event ) {
} }
this.viewport.applyConstraints(); this.viewport.applyConstraints();
} }
return false; break;
case 40://down arrow case 40://down arrow
if (!canvasKeyDownEventArgs.preventVerticalPan) { if (!canvasKeyDownEventArgs.preventVerticalPan) {
if ( event.shift ) { if ( event.shift ) {
@ -2616,31 +2616,29 @@ function onCanvasKeyDown( event ) {
} }
this.viewport.applyConstraints(); this.viewport.applyConstraints();
} }
return false; break;
case 37://left arrow case 37://left arrow
if (!canvasKeyDownEventArgs.preventHorizontalPan) { if (!canvasKeyDownEventArgs.preventHorizontalPan) {
this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(-this.pixelsPerArrowPress, 0))); this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(-this.pixelsPerArrowPress, 0)));
this.viewport.applyConstraints(); this.viewport.applyConstraints();
} }
return false; break;
case 39://right arrow case 39://right arrow
if (!canvasKeyDownEventArgs.preventHorizontalPan) { if (!canvasKeyDownEventArgs.preventHorizontalPan) {
this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(this.pixelsPerArrowPress, 0))); this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(this.pixelsPerArrowPress, 0)));
this.viewport.applyConstraints(); this.viewport.applyConstraints();
} }
return false; break;
default: default:
//console.log( 'navigator keycode %s', event.keyCode ); //console.log( 'navigator keycode %s', event.keyCode );
return true; break;
} }
} else {
return true;
} }
} }
function onCanvasKeyPress( event ) { function onCanvasKeyPress( event ) {
var canvasKeyPressEventArgs = { var canvasKeyPressEventArgs = {
originalEvent: event.originalEvent, originalEvent: event.originalEvent,
preventDefaultAction: event.preventDefaultAction, preventDefaultAction: false,
preventVerticalPan: event.preventVerticalPan, preventVerticalPan: event.preventVerticalPan,
preventHorizontalPan: event.preventHorizontalPan preventHorizontalPan: event.preventHorizontalPan
}; };
@ -2654,15 +2652,15 @@ function onCanvasKeyPress( event ) {
case 61://=|+ case 61://=|+
this.viewport.zoomBy(1.1); this.viewport.zoomBy(1.1);
this.viewport.applyConstraints(); this.viewport.applyConstraints();
return false; break;
case 45://-|_ case 45://-|_
this.viewport.zoomBy(0.9); this.viewport.zoomBy(0.9);
this.viewport.applyConstraints(); this.viewport.applyConstraints();
return false; break;
case 48://0|) case 48://0|)
this.viewport.goHome(); this.viewport.goHome();
this.viewport.applyConstraints(); this.viewport.applyConstraints();
return false; break;
case 119://w case 119://w
case 87://W case 87://W
if (!canvasKeyPressEventArgs.preventVerticalPan) { if (!canvasKeyPressEventArgs.preventVerticalPan) {
@ -2673,7 +2671,7 @@ function onCanvasKeyPress( event ) {
} }
this.viewport.applyConstraints(); this.viewport.applyConstraints();
} }
return false; break;
case 115://s case 115://s
case 83://S case 83://S
if (!canvasKeyPressEventArgs.preventVerticalPan) { if (!canvasKeyPressEventArgs.preventVerticalPan) {
@ -2684,19 +2682,19 @@ function onCanvasKeyPress( event ) {
} }
this.viewport.applyConstraints(); this.viewport.applyConstraints();
} }
return false; break;
case 97://a case 97://a
if (!canvasKeyPressEventArgs.preventHorizontalPan) { if (!canvasKeyPressEventArgs.preventHorizontalPan) {
this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(-40, 0))); this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(-40, 0)));
this.viewport.applyConstraints(); this.viewport.applyConstraints();
} }
return false; break;
case 100://d case 100://d
if (!canvasKeyPressEventArgs.preventHorizontalPan) { if (!canvasKeyPressEventArgs.preventHorizontalPan) {
this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(40, 0))); this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(40, 0)));
this.viewport.applyConstraints(); this.viewport.applyConstraints();
} }
return false; break;
case 114: //r - clockwise rotation case 114: //r - clockwise rotation
if(this.viewport.flipped){ if(this.viewport.flipped){
this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360)); this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360));
@ -2704,7 +2702,7 @@ function onCanvasKeyPress( event ) {
this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360)); this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360));
} }
this.viewport.applyConstraints(); this.viewport.applyConstraints();
return false; break;
case 82: //R - counterclockwise rotation case 82: //R - counterclockwise rotation
if(this.viewport.flipped){ if(this.viewport.flipped){
this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360)); this.viewport.setRotation($.positiveModulo(this.viewport.degrees + this.rotationIncrement, 360));
@ -2712,16 +2710,14 @@ function onCanvasKeyPress( event ) {
this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360)); this.viewport.setRotation($.positiveModulo(this.viewport.degrees - this.rotationIncrement, 360));
} }
this.viewport.applyConstraints(); this.viewport.applyConstraints();
return false; break;
case 102: //f case 102: //f
this.viewport.toggleFlip(); this.viewport.toggleFlip();
return false; break;
default: default:
// console.log( 'navigator keycode %s', event.keyCode ); // console.log( 'navigator keycode %s', event.keyCode );
return true; break;
} }
} else {
return true;
} }
} }
@ -2744,7 +2740,7 @@ function onCanvasClick( event ) {
quick: event.quick, quick: event.quick,
shift: event.shift, shift: event.shift,
originalEvent: event.originalEvent, originalEvent: event.originalEvent,
preventDefaultAction: event.preventDefaultAction preventDefaultAction: false
}; };
/** /**
@ -2784,7 +2780,7 @@ function onCanvasDblClick( event ) {
position: event.position, position: event.position,
shift: event.shift, shift: event.shift,
originalEvent: event.originalEvent, originalEvent: event.originalEvent,
preventDefaultAction: event.preventDefaultAction preventDefaultAction: false
}; };
/** /**
@ -2827,7 +2823,7 @@ function onCanvasDrag( event ) {
direction: event.direction, direction: event.direction,
shift: event.shift, shift: event.shift,
originalEvent: event.originalEvent, originalEvent: event.originalEvent,
preventDefaultAction: event.preventDefaultAction preventDefaultAction: false
}; };
/** /**
@ -2888,7 +2884,37 @@ function onCanvasDrag( event ) {
} }
function onCanvasDragEnd( event ) { function onCanvasDragEnd( event ) {
if (!event.preventDefaultAction && this.viewport) { var canvasDragEndEventArgs = {
tracker: event.eventSource,
pointerType: event.pointerType,
position: event.position,
speed: event.speed,
direction: event.direction,
shift: event.shift,
originalEvent: event.originalEvent,
preventDefaultAction: false
};
/**
* Raised when a mouse or touch drag operation ends on the {@link OpenSeadragon.Viewer#canvas} element.
*
* @event canvas-drag-end
* @memberof OpenSeadragon.Viewer
* @type {object}
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
* @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event.
* @property {String} pointerType - "mouse", "touch", "pen", etc.
* @property {OpenSeadragon.Point} position - The position of the event relative to the tracked element.
* @property {Number} speed - Speed at the end of a drag gesture, in pixels per second.
* @property {Number} direction - Direction at the end of a drag gesture, expressed as an angle counterclockwise relative to the positive X axis (-pi to pi, in radians). Only valid if speed > 0.
* @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 drag-end flick behaviour. Default: false.
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
this.raiseEvent('canvas-drag-end', canvasDragEndEventArgs);
if (!canvasDragEndEventArgs.preventDefaultAction && this.viewport) {
var gestureSettings = this.gestureSettingsByDeviceType(event.pointerType); var gestureSettings = this.gestureSettingsByDeviceType(event.pointerType);
if (gestureSettings.flickEnabled && if (gestureSettings.flickEnabled &&
event.speed >= gestureSettings.flickMinSpeed) { event.speed >= gestureSettings.flickMinSpeed) {
@ -2910,31 +2936,6 @@ function onCanvasDragEnd( event ) {
} }
this.viewport.applyConstraints(); this.viewport.applyConstraints();
} }
/**
* Raised when a mouse or touch drag operation ends on the {@link OpenSeadragon.Viewer#canvas} element.
*
* @event canvas-drag-end
* @memberof OpenSeadragon.Viewer
* @type {object}
* @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event.
* @property {OpenSeadragon.MouseTracker} tracker - A reference to the MouseTracker which originated this event.
* @property {String} pointerType - "mouse", "touch", "pen", etc.
* @property {OpenSeadragon.Point} position - The position of the event relative to the tracked element.
* @property {Number} speed - Speed at the end of a drag gesture, in pixels per second.
* @property {Number} direction - Direction at the end of a drag gesture, expressed as an angle counterclockwise relative to the positive X axis (-pi to pi, in radians). Only valid if speed > 0.
* @property {Boolean} shift - True if the shift key was pressed during this event.
* @property {Object} originalEvent - The original DOM event.
* @property {?Object} userData - Arbitrary subscriber-defined object.
*/
this.raiseEvent('canvas-drag-end', {
tracker: event.eventSource,
pointerType: event.pointerType,
position: event.position,
speed: event.speed,
direction: event.direction,
shift: event.shift,
originalEvent: event.originalEvent
});
} }
function onCanvasEnter( event ) { function onCanvasEnter( event ) {
@ -3111,33 +3112,21 @@ function onCanvasPinch( event ) {
lastCenterPt, lastCenterPt,
panByPt; panByPt;
if ( !event.preventDefaultAction && this.viewport ) { var canvasPinchEventArgs = {
gestureSettings = this.gestureSettingsByDeviceType( event.pointerType ); tracker: event.eventSource,
if ( gestureSettings.pinchToZoom ) { pointerType: event.pointerType,
centerPt = this.viewport.pointFromPixel( event.center, true ); gesturePoints: event.gesturePoints,
lastCenterPt = this.viewport.pointFromPixel( event.lastCenter, true ); lastCenter: event.lastCenter,
panByPt = lastCenterPt.minus( centerPt ); center: event.center,
if( !this.panHorizontal ) { lastDistance: event.lastDistance,
panByPt.x = 0; distance: event.distance,
} shift: event.shift,
if( !this.panVertical ) { originalEvent: event.originalEvent,
panByPt.y = 0; preventDefaultPanAction: false,
} preventDefaultZoomAction: false,
this.viewport.zoomBy( event.distance / event.lastDistance, centerPt, true ); preventDefaultRotateAction: false
if ( gestureSettings.zoomToRefPoint ) { };
this.viewport.panBy(panByPt, true);
}
this.viewport.applyConstraints();
}
if ( gestureSettings.pinchRotate ) {
// Pinch rotate
var angle1 = Math.atan2(event.gesturePoints[0].currentPos.y - event.gesturePoints[1].currentPos.y,
event.gesturePoints[0].currentPos.x - event.gesturePoints[1].currentPos.x);
var angle2 = Math.atan2(event.gesturePoints[0].lastPos.y - event.gesturePoints[1].lastPos.y,
event.gesturePoints[0].lastPos.x - event.gesturePoints[1].lastPos.x);
this.viewport.setRotation(this.viewport.getRotation() + ((angle1 - angle2) * (180 / Math.PI)));
}
}
/** /**
* Raised when a pinch event occurs on the {@link OpenSeadragon.Viewer#canvas} element. * Raised when a pinch event occurs on the {@link OpenSeadragon.Viewer#canvas} element.
* *
@ -3154,25 +3143,48 @@ function onCanvasPinch( event ) {
* @property {Number} distance - The distance between the two pinch contact points in CSS pixels. * @property {Number} distance - The distance between the two pinch contact points in CSS pixels.
* @property {Boolean} shift - True if the shift key was pressed during this event. * @property {Boolean} shift - True if the shift key was pressed during this event.
* @property {Object} originalEvent - The original DOM event. * @property {Object} originalEvent - The original DOM event.
* @property {Boolean} preventDefaultPanAction - Set to true to prevent default pinch to pan behaviour. Default: false.
* @property {Boolean} preventDefaultZoomAction - Set to true to prevent default pinch to zoom behaviour. Default: false.
* @property {Boolean} preventDefaultRotateAction - Set to true to prevent default pinch to rotate behaviour. Default: false.
* @property {?Object} userData - Arbitrary subscriber-defined object. * @property {?Object} userData - Arbitrary subscriber-defined object.
*/ */
this.raiseEvent('canvas-pinch', { this.raiseEvent('canvas-pinch', canvasPinchEventArgs);
tracker: event.eventSource,
pointerType: event.pointerType, if ( this.viewport ) {
gesturePoints: event.gesturePoints, gestureSettings = this.gestureSettingsByDeviceType( event.pointerType );
lastCenter: event.lastCenter, if ( gestureSettings.pinchToZoom &&
center: event.center, (!canvasPinchEventArgs.preventDefaultPanAction || !canvasPinchEventArgs.preventDefaultZoomAction) ) {
lastDistance: event.lastDistance, centerPt = this.viewport.pointFromPixel( event.center, true );
distance: event.distance, if ( !canvasPinchEventArgs.preventDefaultZoomAction ) {
shift: event.shift, this.viewport.zoomBy( event.distance / event.lastDistance, centerPt, true );
originalEvent: event.originalEvent }
}); if ( gestureSettings.zoomToRefPoint && !canvasPinchEventArgs.preventDefaultPanAction ) {
//cancels event lastCenterPt = this.viewport.pointFromPixel( event.lastCenter, true );
return false; panByPt = lastCenterPt.minus( centerPt );
if( !this.panHorizontal ) {
panByPt.x = 0;
}
if( !this.panVertical ) {
panByPt.y = 0;
}
this.viewport.panBy(panByPt, true);
}
this.viewport.applyConstraints();
}
if ( gestureSettings.pinchRotate && !canvasPinchEventArgs.preventDefaultRotateAction ) {
// Pinch rotate
var angle1 = Math.atan2(event.gesturePoints[0].currentPos.y - event.gesturePoints[1].currentPos.y,
event.gesturePoints[0].currentPos.x - event.gesturePoints[1].currentPos.x);
var angle2 = Math.atan2(event.gesturePoints[0].lastPos.y - event.gesturePoints[1].lastPos.y,
event.gesturePoints[0].lastPos.x - event.gesturePoints[1].lastPos.x);
this.viewport.setRotation(this.viewport.getRotation() + ((angle1 - angle2) * (180 / Math.PI)));
}
}
} }
function onCanvasScroll( event ) { function onCanvasScroll( event ) {
var gestureSettings, var canvasScrollEventArgs,
gestureSettings,
factor, factor,
thisScrollTime, thisScrollTime,
deltaScrollTime; deltaScrollTime;
@ -3185,21 +3197,15 @@ function onCanvasScroll( event ) {
if (deltaScrollTime > this.minScrollDeltaTime) { if (deltaScrollTime > this.minScrollDeltaTime) {
this._lastScrollTime = thisScrollTime; this._lastScrollTime = thisScrollTime;
if(this.viewport.flipped){ canvasScrollEventArgs = {
event.position.x = this.viewport.getContainerSize().x - event.position.x; tracker: event.eventSource,
} position: event.position,
scroll: event.scroll,
shift: event.shift,
originalEvent: event.originalEvent,
preventDefaultAction: false
};
if ( !event.preventDefaultAction && this.viewport ) {
gestureSettings = this.gestureSettingsByDeviceType( event.pointerType );
if ( gestureSettings.scrollToZoom ) {
factor = Math.pow( this.zoomPerScroll, event.scroll );
this.viewport.zoomBy(
factor,
gestureSettings.zoomToRefPoint ? this.viewport.pointFromPixel( event.position, true ) : null
);
this.viewport.applyConstraints();
}
}
/** /**
* Raised when a scroll event occurs on the {@link OpenSeadragon.Viewer#canvas} element (mouse wheel). * Raised when a scroll event occurs on the {@link OpenSeadragon.Viewer#canvas} element (mouse wheel).
* *
@ -3212,28 +3218,27 @@ function onCanvasScroll( event ) {
* @property {Number} scroll - The scroll delta for the event. * @property {Number} scroll - The scroll delta for the event.
* @property {Boolean} shift - True if the shift key was pressed during this event. * @property {Boolean} shift - True if the shift key was pressed during this event.
* @property {Object} originalEvent - The original DOM event. * @property {Object} originalEvent - The original DOM event.
* @property {Boolean} preventDefaultAction - Set to true to prevent default scroll to zoom behaviour. Default: false.
* @property {?Object} userData - Arbitrary subscriber-defined object. * @property {?Object} userData - Arbitrary subscriber-defined object.
*/ */
this.raiseEvent( 'canvas-scroll', { this.raiseEvent('canvas-scroll', canvasScrollEventArgs );
tracker: event.eventSource,
position: event.position, if ( !canvasScrollEventArgs.preventDefaultAction && this.viewport ) {
scroll: event.scroll, if(this.viewport.flipped){
shift: event.shift, event.position.x = this.viewport.getContainerSize().x - event.position.x;
originalEvent: event.originalEvent
});
if (gestureSettings && gestureSettings.scrollToZoom) {
//cancels event
return false;
}
}
else {
gestureSettings = this.gestureSettingsByDeviceType( event.pointerType );
if (gestureSettings && gestureSettings.scrollToZoom) {
return false; // We are swallowing this event
}
} }
return undefined; gestureSettings = this.gestureSettingsByDeviceType( event.pointerType );
if ( gestureSettings.scrollToZoom ) {
factor = Math.pow( this.zoomPerScroll, event.scroll );
this.viewport.zoomBy(
factor,
gestureSettings.zoomToRefPoint ? this.viewport.pointFromPixel( event.position, true ) : null
);
this.viewport.applyConstraints();
}
}
}
} }
function onContainerEnter( event ) { function onContainerEnter( event ) {

53
test/modules/events.js
View File

@ -679,8 +679,7 @@
if ('TouchEvent' in window) { if ('TouchEvent' in window) {
QUnit.test( 'MouseTracker: touch events', function (assert) { QUnit.test( 'MouseTracker: touch events', function (assert) {
var done = assert.async(); var done = assert.async();
var $canvas = $( viewer.element ).find( '.openseadragon-canvas' ).not( '.navigator .openseadragon-canvas' ), var tracker = viewer.innerTracker,
tracker = viewer.innerTracker,
touches; touches;
var reset = function () { var reset = function () {
@ -757,7 +756,6 @@
var done = assert.async(); var done = assert.async();
var $canvas = $(viewer.element).find('.openseadragon-canvas') var $canvas = $(viewer.element).find('.openseadragon-canvas')
.not('.navigator .openseadragon-canvas'); .not('.navigator .openseadragon-canvas');
var tracker = viewer.innerTracker;
var epsilon = 0.0000001; var epsilon = 0.0000001;
function simulateClickAndDrag() { function simulateClickAndDrag() {
@ -787,16 +785,14 @@
viewer.removeHandler('open', onOpen); viewer.removeHandler('open', onOpen);
// Hook viewer events to set preventDefaultAction // Hook viewer events to set preventDefaultAction
var origClickHandler = tracker.clickHandler; var onCanvasClick = function (event) {
tracker.clickHandler = function(event) {
event.preventDefaultAction = true; event.preventDefaultAction = true;
return origClickHandler(event);
}; };
var origDragHandler = tracker.dragHandler; var onCanvasDrag = function (event) {
tracker.dragHandler = function(event) {
event.preventDefaultAction = true; event.preventDefaultAction = true;
return origDragHandler(event);
}; };
viewer.addHandler("canvas-click", onCanvasClick);
viewer.addHandler("canvas-drag", onCanvasDrag);
var originalZoom = viewer.viewport.getZoom(); var originalZoom = viewer.viewport.getZoom();
var originalBounds = viewer.viewport.getBounds(); var originalBounds = viewer.viewport.getBounds();
@ -810,8 +806,8 @@
Util.assertRectangleEquals(assert, bounds, originalBounds, epsilon, Util.assertRectangleEquals(assert, bounds, originalBounds, epsilon,
'Pan should be prevented'); 'Pan should be prevented');
tracker.clickHandler = origClickHandler; viewer.removeHandler("canvas-click", onCanvasClick);
tracker.dragHandler = origDragHandler; viewer.removeHandler("canvas-drag", onCanvasDrag);
simulateClickAndDrag(); simulateClickAndDrag();
@ -855,12 +851,12 @@
var originalZoom = viewer.viewport.getZoom(); var originalZoom = viewer.viewport.getZoom();
var origDblClickHandler = tracker.dblClickHandler; var onCanvasDblClick = function (event) {
tracker.dblClickHandler = function(event) {
event.preventDefaultAction = true; event.preventDefaultAction = true;
return origDblClickHandler(event);
}; };
viewer.addHandler('canvas-double-click', onCanvasDblClick);
TouchUtil.initTracker(tracker); TouchUtil.initTracker(tracker);
simulateDblTap(); simulateDblTap();
@ -869,36 +865,16 @@
"Zoom on double tap should be prevented"); "Zoom on double tap should be prevented");
// Reset event handler to original // Reset event handler to original
tracker.dblClickHandler = origDblClickHandler; viewer.removeHandler("canvas-double-click", onCanvasDblClick);
simulateDblTap(); simulateDblTap();
originalZoom = originalZoom * viewer.zoomPerClick; originalZoom *= viewer.zoomPerClick;
zoom = viewer.viewport.getZoom(); zoom = viewer.viewport.getZoom();
Util.assessNumericValue(assert, originalZoom, zoom, epsilon, Util.assessNumericValue(assert, originalZoom, zoom, epsilon,
"Zoom on double tap should not be prevented"); "Zoom on double tap should not be prevented");
var dblClickHandler = function(event) {
event.preventDefaultAction = true;
};
viewer.addHandler('canvas-double-click', dblClickHandler);
zoom = viewer.viewport.getZoom();
Util.assessNumericValue(assert, originalZoom, zoom, epsilon,
"Zoom on double tap should be prevented");
// Remove custom event handler
viewer.removeHandler('canvas-double-click', dblClickHandler);
simulateDblTap();
originalZoom = originalZoom * viewer.zoomPerClick;
zoom = viewer.viewport.getZoom();
Util.assessNumericValue(assert, originalZoom, zoom, epsilon,
"Zoom on double tap should not be prevented");
TouchUtil.resetTracker(tracker); TouchUtil.resetTracker(tracker);
viewer.close(); viewer.close();
done(); done();
@ -926,10 +902,9 @@
eventsHandledViewer = 0, eventsHandledViewer = 0,
originalEventsPassedViewer = 0, originalEventsPassedViewer = 0,
dragEndsExpected = 1, dragEndsExpected = 1,
releasesExpected = 1, releasesExpected = 1;
clicksExpected = 1;
var onOpen = function ( event ) { var onOpen = function ( ) {
viewer.removeHandler( 'open', onOpen ); viewer.removeHandler( 'open', onOpen );
viewer.addHandler( 'canvas-drag', onEventSourceDrag ); viewer.addHandler( 'canvas-drag', onEventSourceDrag );