diff --git a/changelog.txt b/changelog.txt
index 75d9ac79..f8afbb62 100644
--- a/changelog.txt
+++ b/changelog.txt
@@ -6,6 +6,7 @@ OPENSEADRAGON CHANGELOG
* The viewer no longer emits canvas-key events for both keydown and keypress events; canvas-key is now just for keydown, and the new canvas-key-press is for keypress (#2270 @hrghauri)
* You can now specify a priority when calling addHandler, to control when your event handler gets called relative to others (#2273 @Aiosa)
* Added tileRetryMax and tileRetryDelay options, so the viewer can retry loading failed tiles (#2238 @Ughuuu, @paaddyy)
+* All of the viewers keyboard handling is now in response to keydown events (it used to be split between keydown and keypress) (#2291 @MohitBansal321)
* Fixed: The tile-loaded event's completionCallback could be called more than once in some circumstances (#2282 @Aiosa, @pearcetm)
* Fixed: Navigator display rectangle was off if the page had box-sizing: border-box (#2276 @ambujsahu81)
* Fixed: Code that required identifying functions would fail for async functions (#2273 @Aiosa)
diff --git a/src/viewer.js b/src/viewer.js
index 9107a329..f6b1f536 100644
--- a/src/viewer.js
+++ b/src/viewer.js
@@ -2757,7 +2757,7 @@ function onCanvasKeyDown( event ) {
if ( !canvasKeyDownEventArgs.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) {
switch( event.keyCode ){
- case 38://up arrow
+ case 38://up arrow/shift uparrow
if (!canvasKeyDownEventArgs.preventVerticalPan) {
if ( event.shift ) {
this.viewport.zoomBy(1.1);
@@ -2768,7 +2768,7 @@ function onCanvasKeyDown( event ) {
}
event.preventDefault = true;
break;
- case 40://down arrow
+ case 40://down arrow/shift downarrow
if (!canvasKeyDownEventArgs.preventVerticalPan) {
if ( event.shift ) {
this.viewport.zoomBy(0.9);
@@ -2793,6 +2793,84 @@ function onCanvasKeyDown( event ) {
}
event.preventDefault = true;
break;
+ case 187://=|+
+ this.viewport.zoomBy(1.1);
+ this.viewport.applyConstraints();
+ event.preventDefault = true;
+ break;
+ case 189://-|_
+ 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 87://W/w
+ if (!canvasKeyDownEventArgs.preventVerticalPan) {
+ if ( event.shift ) {
+ this.viewport.zoomBy(1.1);
+ } else {
+ this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(0, -40)));
+ }
+ this.viewport.applyConstraints();
+ }
+ event.preventDefault = true;
+ break;
+ case 83://S/s
+ if (!canvasKeyDownEventArgs.preventVerticalPan) {
+ if ( event.shift ) {
+ this.viewport.zoomBy(0.9);
+ } else {
+ this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(0, 40)));
+ }
+ this.viewport.applyConstraints();
+ }
+ event.preventDefault = true;
+ break;
+ case 65://a/A
+ if (!canvasKeyDownEventArgs.preventHorizontalPan) {
+ this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(-40, 0)));
+ this.viewport.applyConstraints();
+ }
+ event.preventDefault = true;
+ break;
+ case 68://d/D
+ if (!canvasKeyDownEventArgs.preventHorizontalPan) {
+ this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(40, 0)));
+ this.viewport.applyConstraints();
+ }
+ event.preventDefault = true;
+ break;
+ case 82: //r - clockwise rotation/R - counterclockwise rotation
+ if(event.shift){
+ if(this.viewport.flipped){
+ this.viewport.setRotation(this.viewport.getRotation() + this.rotationIncrement);
+ } else{
+ this.viewport.setRotation(this.viewport.getRotation() - this.rotationIncrement);
+ }
+ }else{
+ if(this.viewport.flipped){
+ this.viewport.setRotation(this.viewport.getRotation() - this.rotationIncrement);
+ } else{
+ this.viewport.setRotation(this.viewport.getRotation() + this.rotationIncrement);
+ }
+ }
+ this.viewport.applyConstraints();
+ event.preventDefault = true;
+ break;
+ case 70: //f/F
+ this.viewport.toggleFlip();
+ event.preventDefault = true;
+ break;
+ case 74: //j - previous image source
+ this.goToPreviousPage();
+ break;
+ case 75: //k - next image source
+ this.goToNextPage();
+ break;
default:
//console.log( 'navigator keycode %s', event.keyCode );
event.preventDefault = false;
@@ -2802,12 +2880,10 @@ function onCanvasKeyDown( event ) {
event.preventDefault = false;
}
}
+
function onCanvasKeyPress( event ) {
var canvasKeyPressEventArgs = {
originalEvent: event.originalEvent,
- preventDefaultAction: false,
- preventVerticalPan: event.preventVerticalPan || !this.panVertical,
- preventHorizontalPan: event.preventHorizontalPan || !this.panHorizontal
};
/**
@@ -2818,109 +2894,12 @@ function onCanvasKeyPress( event ) {
* @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-press', canvasKeyPressEventArgs);
-
- if ( !canvasKeyPressEventArgs.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) {
- switch( event.keyCode ){
- case 43://=|+
- 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
- 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();
- }
- event.preventDefault = true;
- break;
- case 115://s
- case 83://S
- if (!canvasKeyPressEventArgs.preventVerticalPan) {
- if ( event.shift ) {
- this.viewport.zoomBy(0.9);
- } else {
- this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(0, 40)));
- }
- 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){
- this.viewport.setRotation(this.viewport.getRotation() - this.rotationIncrement);
- } else{
- this.viewport.setRotation(this.viewport.getRotation() + this.rotationIncrement);
- }
- this.viewport.applyConstraints();
- event.preventDefault = true;
- break;
- case 82: //R - counterclockwise rotation
- if(this.viewport.flipped){
- this.viewport.setRotation(this.viewport.getRotation() + this.rotationIncrement);
- } else{
- this.viewport.setRotation(this.viewport.getRotation() - this.rotationIncrement);
- }
- this.viewport.applyConstraints();
- event.preventDefault = true;
- break;
- case 102: //f
- this.viewport.toggleFlip();
- event.preventDefault = true;
- break;
- case 106: //j - previous image source
- this.goToPreviousPage();
- break;
- case 107: //k - next image source
- this.goToNextPage();
- break;
- default:
- // console.log( 'navigator keycode %s', event.keyCode );
- event.preventDefault = false;
- break;
- }
- } else {
- event.preventDefault = false;
- }
}
-
-
function onCanvasClick( event ) {
var gestureSettings;