diff --git a/src/viewer.js b/src/viewer.js index 51b22756..fbceaf4f 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2477,31 +2477,61 @@ function onBlur(){ } function onCanvasKeyDown( event ) { - if ( !event.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) { + var canvasKeyDownEventArgs = { + originalEvent: event.originalEvent, + preventDefaultAction: event.preventDefaultAction, + preventVerticalPan: event.preventVerticalPan, + preventHorizontalPan: event.preventHorizontalPan + }; + /** + * Raised when a keyboard key is pressed and the focus is on the {@link OpenSeadragon.Viewer#canvas} element. + * + * @event canvas-key + * @memberof OpenSeadragon.Viewer + * @type {object} + * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event. + * @property {Object} originalEvent - The original DOM event. + * @property {Boolean} preventDefaultAction - Set to true to prevent default keyboard behaviour. Default: false. + * @property {Boolean} preventVerticalPan - Set to true to prevent keyboard vertical panning. Default: false. + * @property {Boolean} preventHorizontalPan - Set to true to prevent keyboard horizontal panning. Default: false. + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + + this.raiseEvent('canvas-key', canvasKeyDownEventArgs); + + if ( !canvasKeyDownEventArgs.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) { switch( event.keyCode ){ case 38://up arrow - if ( event.shift ) { + if (!canvasKeyDownEventArgs.preventVerticalPan) { + if ( event.shift ) { this.viewport.zoomBy(1.1); - } else { + } else { this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(0, -this.pixelsPerArrowPress))); + } + this.viewport.applyConstraints(); } - this.viewport.applyConstraints(); return false; case 40://down arrow - if ( event.shift ) { + if (!canvasKeyDownEventArgs.preventVerticalPan) { + if ( event.shift ) { this.viewport.zoomBy(0.9); - } else { + } else { this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(0, this.pixelsPerArrowPress))); + } + this.viewport.applyConstraints(); } - this.viewport.applyConstraints(); return false; case 37://left arrow - this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(-this.pixelsPerArrowPress, 0))); - this.viewport.applyConstraints(); + if (!canvasKeyDownEventArgs.preventHorizontalPan) { + this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(-this.pixelsPerArrowPress, 0))); + this.viewport.applyConstraints(); + } return false; case 39://right arrow - this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(this.pixelsPerArrowPress, 0))); - this.viewport.applyConstraints(); + if (!canvasKeyDownEventArgs.preventHorizontalPan) { + this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(this.pixelsPerArrowPress, 0))); + this.viewport.applyConstraints(); + } return false; default: //console.log( 'navigator keycode %s', event.keyCode ); @@ -2511,9 +2541,30 @@ function onCanvasKeyDown( event ) { return true; } } - function onCanvasKeyPress( event ) { - if ( !event.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) { + var canvasKeyPressEventArgs = { + originalEvent: event.originalEvent, + preventDefaultAction: event.preventDefaultAction, + preventVerticalPan: event.preventVerticalPan, + preventHorizontalPan: event.preventHorizontalPan + }; + /** + * Raised when a keyboard key is pressed and the focus is on the {@link OpenSeadragon.Viewer#canvas} element. + * + * @event canvas-key + * @memberof OpenSeadragon.Viewer + * @type {object} + * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised this event. + * @property {Object} originalEvent - The original DOM event. + * @property {Boolean} preventDefaultAction - Set to true to prevent default keyboard behaviour. Default: false. + * @property {Boolean} preventVerticalPan - Set to true to prevent keyboard vertical panning. Default: false. + * @property {Boolean} preventHorizontalPan - Set to true to prevent keyboard horizontal panning. Default: false. + * @property {?Object} userData - Arbitrary subscriber-defined object. + */ + + this.raiseEvent('canvas-key', canvasKeyPressEventArgs); + + if ( !canvasKeyPressEventArgs.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) { switch( event.keyCode ){ case 43://=|+ case 61://=|+ @@ -2530,29 +2581,37 @@ function onCanvasKeyPress( event ) { return false; case 119://w case 87://W - if ( event.shift ) { - this.viewport.zoomBy(1.1); - } else { - this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(0, -40))); - } - this.viewport.applyConstraints(); - return false; + if (!canvasKeyPressEventArgs.preventVerticalPan) { + if ( event.shift ) { + this.viewport.zoomBy(1.1); + } else { + this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(0, -40))); + } + this.viewport.applyConstraints(); + } + return false; case 115://s case 83://S - if ( event.shift ) { + if (!canvasKeyPressEventArgs.preventVerticalPan) { + if ( event.shift ) { this.viewport.zoomBy(0.9); - } else { + } else { this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(0, 40))); + } + this.viewport.applyConstraints(); } - this.viewport.applyConstraints(); return false; case 97://a - this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(-40, 0))); - this.viewport.applyConstraints(); + if (!canvasKeyPressEventArgs.preventHorizontalPan) { + this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(-40, 0))); + this.viewport.applyConstraints(); + } return false; case 100://d - this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(40, 0))); - this.viewport.applyConstraints(); + if (!canvasKeyPressEventArgs.preventHorizontalPan) { + this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(40, 0))); + this.viewport.applyConstraints(); + } return false; default: //console.log( 'navigator keycode %s', event.keyCode );