From f36d44dc6781a92339382181968db2b275125b25 Mon Sep 17 00:00:00 2001 From: Mohit Bansal Date: Tue, 7 Feb 2023 03:31:57 +0530 Subject: [PATCH 01/10] Consolidate viewer keyboard handling into keydown handler --- src/viewer.js | 115 +++++++++++++++++--------------------------------- 1 file changed, 39 insertions(+), 76 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index 9107a329..849358aa 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -295,7 +295,6 @@ $.Viewer = function( options ) { dblClickDistThreshold: this.dblClickDistThreshold, contextMenuHandler: $.delegate( this, onCanvasContextMenu ), keyDownHandler: $.delegate( this, onCanvasKeyDown ), - keyHandler: $.delegate( this, onCanvasKeyPress ), clickHandler: $.delegate( this, onCanvasClick ), dblClickHandler: $.delegate( this, onCanvasDblClick ), dragHandler: $.delegate( this, onCanvasDrag ), @@ -2793,40 +2792,6 @@ function onCanvasKeyDown( event ) { } event.preventDefault = true; break; - default: - //console.log( 'navigator keycode %s', event.keyCode ); - event.preventDefault = false; - break; - } - } else { - event.preventDefault = false; - } -} -function onCanvasKeyPress( event ) { - var canvasKeyPressEventArgs = { - originalEvent: event.originalEvent, - preventDefaultAction: false, - preventVerticalPan: event.preventVerticalPan || !this.panVertical, - preventHorizontalPan: event.preventHorizontalPan || !this.panHorizontal - }; - - /** - * Raised when a keyboard key is pressed and the focus is on the {@link OpenSeadragon.Viewer#canvas} element. - * - * @event canvas-key-press - * @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-press', canvasKeyPressEventArgs); - - if ( !canvasKeyPressEventArgs.preventDefaultAction && !event.ctrl && !event.alt && !event.meta ) { - switch( event.keyCode ){ case 43://=|+ case 61://=|+ this.viewport.zoomBy(1.1); @@ -2851,22 +2816,22 @@ function onCanvasKeyPress( event ) { } else { this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(0, -40))); } - this.viewport.applyConstraints(); - } - event.preventDefault = true; - break; + 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; + 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))); @@ -2876,41 +2841,41 @@ function onCanvasKeyPress( event ) { break; case 100://d if (!canvasKeyPressEventArgs.preventHorizontalPan) { - this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(40, 0))); - this.viewport.applyConstraints(); + 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; + 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; + 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; + this.viewport.toggleFlip(); + event.preventDefault = true; + break; case 106: //j - previous image source - this.goToPreviousPage(); - break; + this.goToPreviousPage(); + break; case 107: //k - next image source - this.goToNextPage(); - break; + this.goToNextPage(); + break; default: - // console.log( 'navigator keycode %s', event.keyCode ); + //console.log( 'navigator keycode %s', event.keyCode ); event.preventDefault = false; break; } @@ -2919,8 +2884,6 @@ function onCanvasKeyPress( event ) { } } - - function onCanvasClick( event ) { var gestureSettings; From cfa88b701fec9a9ccafdd6afe390593b349885eb Mon Sep 17 00:00:00 2001 From: Mohit Bansal Date: Wed, 8 Feb 2023 19:22:27 +0530 Subject: [PATCH 02/10] replace canvasKeyPressEventArgs to canvasKeyDownEventArgs --- src/viewer.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index 849358aa..1b2d4834 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2810,7 +2810,7 @@ function onCanvasKeyDown( event ) { break; case 119://w case 87://W - if (!canvasKeyPressEventArgs.preventVerticalPan) { + if (!canvasKeyDownEventArgs.preventVerticalPan) { if ( event.shift ) { this.viewport.zoomBy(1.1); } else { @@ -2822,7 +2822,7 @@ function onCanvasKeyDown( event ) { break; case 115://s case 83://S - if (!canvasKeyPressEventArgs.preventVerticalPan) { + if (!canvasKeyDownEventArgs.preventVerticalPan) { if ( event.shift ) { this.viewport.zoomBy(0.9); } else { @@ -2833,14 +2833,14 @@ function onCanvasKeyDown( event ) { event.preventDefault = true; break; case 97://a - if (!canvasKeyPressEventArgs.preventHorizontalPan) { + if (!canvasKeyDownEventArgs.preventHorizontalPan) { this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(-40, 0))); this.viewport.applyConstraints(); } event.preventDefault = true; break; case 100://d - if (!canvasKeyPressEventArgs.preventHorizontalPan) { + if (!canvasKeyDownEventArgs.preventHorizontalPan) { this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(40, 0))); this.viewport.applyConstraints(); } From 4bc9ea4573e47e22460f301d29e0e47cabc3a2e3 Mon Sep 17 00:00:00 2001 From: Mohit Bansal Date: Thu, 9 Feb 2023 12:55:44 +0530 Subject: [PATCH 03/10] add keypress handler's event --- src/viewer.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/src/viewer.js b/src/viewer.js index 1b2d4834..faa3dd80 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -295,6 +295,7 @@ $.Viewer = function( options ) { dblClickDistThreshold: this.dblClickDistThreshold, contextMenuHandler: $.delegate( this, onCanvasContextMenu ), keyDownHandler: $.delegate( this, onCanvasKeyDown ), + keyHandler: $.delegate( this, onCanvasKeyPress ), clickHandler: $.delegate( this, onCanvasClick ), dblClickHandler: $.delegate( this, onCanvasDblClick ), dragHandler: $.delegate( this, onCanvasDrag ), @@ -2884,6 +2885,29 @@ function onCanvasKeyDown( event ) { } } +function onCanvasKeyPress( event ) { + var canvasKeyPressEventArgs = { + originalEvent: event.originalEvent, + preventDefaultAction: false, + preventVerticalPan: event.preventVerticalPan || !this.panVertical, + preventHorizontalPan: event.preventHorizontalPan || !this.panHorizontal + }; + + /** + * Raised when a keyboard key is pressed and the focus is on the {@link OpenSeadragon.Viewer#canvas} element. + * + * @event canvas-key-press + * @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-press', canvasKeyPressEventArgs); +} function onCanvasClick( event ) { var gestureSettings; From dac697c74e202778ba2e7f32f244c009b1d441dc Mon Sep 17 00:00:00 2001 From: Mohit Bansal Date: Fri, 10 Feb 2023 16:44:55 +0530 Subject: [PATCH 04/10] formatting --- src/viewer.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index faa3dd80..93171d0f 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2817,10 +2817,10 @@ function onCanvasKeyDown( event ) { } else { this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(0, -40))); } - this.viewport.applyConstraints(); - } - event.preventDefault = true; - break; + this.viewport.applyConstraints(); + } + event.preventDefault = true; + break; case 115://s case 83://S if (!canvasKeyDownEventArgs.preventVerticalPan) { @@ -2829,10 +2829,10 @@ function onCanvasKeyDown( event ) { } else { this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(0, 40))); } - this.viewport.applyConstraints(); - } - event.preventDefault = true; - break; + this.viewport.applyConstraints(); + } + event.preventDefault = true; + break; case 97://a if (!canvasKeyDownEventArgs.preventHorizontalPan) { this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(-40, 0))); From 3a8738fd4397ddce725b12c25eb27397ccce45f3 Mon Sep 17 00:00:00 2001 From: Mohit Bansal Date: Sun, 12 Feb 2023 12:43:41 +0530 Subject: [PATCH 05/10] spacing && documentation --- src/viewer.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index 93171d0f..9537115a 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2902,10 +2902,11 @@ function onCanvasKeyPress( event ) { * @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 {Boolean} preventVerticalPan - Set to true to prevent keyboard vertical panning. Default: false. It has no longer any effect. + * @property {Boolean} preventHorizontalPan - Set to true to prevent keyboard horizontal panning. Default: false. It has no longer any effect. * @property {?Object} userData - Arbitrary subscriber-defined object. */ + this.raiseEvent('canvas-key-press', canvasKeyPressEventArgs); } function onCanvasClick( event ) { From 49093200897fc998a11e0167f6f1281485a4058c Mon Sep 17 00:00:00 2001 From: Mohit Bansal Date: Sun, 12 Feb 2023 13:30:41 +0530 Subject: [PATCH 06/10] correction of keyCode --- src/viewer.js | 52 ++++++++++++++++++++++++--------------------------- 1 file changed, 24 insertions(+), 28 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index 9537115a..a809b759 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,13 +2793,12 @@ function onCanvasKeyDown( event ) { } event.preventDefault = true; break; - case 43://=|+ - case 61://=|+ + case 187://=|+ this.viewport.zoomBy(1.1); this.viewport.applyConstraints(); event.preventDefault = true; break; - case 45://-|_ + case 189://-|_ this.viewport.zoomBy(0.9); this.viewport.applyConstraints(); event.preventDefault = true; @@ -2809,8 +2808,7 @@ function onCanvasKeyDown( event ) { this.viewport.applyConstraints(); event.preventDefault = true; break; - case 119://w - case 87://W + case 87://W/w if (!canvasKeyDownEventArgs.preventVerticalPan) { if ( event.shift ) { this.viewport.zoomBy(1.1); @@ -2821,8 +2819,7 @@ function onCanvasKeyDown( event ) { } event.preventDefault = true; break; - case 115://s - case 83://S + case 83://S/s if (!canvasKeyDownEventArgs.preventVerticalPan) { if ( event.shift ) { this.viewport.zoomBy(0.9); @@ -2833,46 +2830,45 @@ function onCanvasKeyDown( event ) { } event.preventDefault = true; break; - case 97://a + 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 100://d + 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 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); + 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 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 + case 70: //f/F this.viewport.toggleFlip(); event.preventDefault = true; break; - case 106: //j - previous image source + case 74: //j - previous image source this.goToPreviousPage(); break; - case 107: //k - next image source + case 75: //k - next image source this.goToNextPage(); break; default: From 78928e351058636138e1a73956b203e680972a5f Mon Sep 17 00:00:00 2001 From: Mohit Bansal Date: Mon, 13 Feb 2023 23:01:19 +0530 Subject: [PATCH 07/10] add comment --- src/viewer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index a809b759..ee84efdf 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2898,8 +2898,8 @@ function onCanvasKeyPress( event ) { * @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. It has no longer any effect. - * @property {Boolean} preventHorizontalPan - Set to true to prevent keyboard horizontal panning. Default: false. It has no longer any effect. + * @property {Boolean} preventVerticalPan - No longer used, use the 'canvas-key' event instead. + * @property {Boolean} preventHorizontalPan - No longer used, use the 'canvas-key' event instead. * @property {?Object} userData - Arbitrary subscriber-defined object. */ From 6be459e4516dce4d6f9a826913bca6a4d9c9270f Mon Sep 17 00:00:00 2001 From: Mohit Bansal Date: Mon, 13 Feb 2023 23:13:08 +0530 Subject: [PATCH 08/10] formatting --- src/viewer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/viewer.js b/src/viewer.js index ee84efdf..f5d979a7 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2905,6 +2905,7 @@ function onCanvasKeyPress( event ) { this.raiseEvent('canvas-key-press', canvasKeyPressEventArgs); } + function onCanvasClick( event ) { var gestureSettings; From 0ab81df9b8cbcf872e9b66d56fb2675960831b82 Mon Sep 17 00:00:00 2001 From: Mohit Bansal Date: Wed, 15 Feb 2023 09:37:03 +0530 Subject: [PATCH 09/10] remove unwanted property --- src/viewer.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/viewer.js b/src/viewer.js index f5d979a7..f6b1f536 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -2884,9 +2884,6 @@ function onCanvasKeyDown( event ) { function onCanvasKeyPress( event ) { var canvasKeyPressEventArgs = { originalEvent: event.originalEvent, - preventDefaultAction: false, - preventVerticalPan: event.preventVerticalPan || !this.panVertical, - preventHorizontalPan: event.preventHorizontalPan || !this.panHorizontal }; /** @@ -2897,9 +2894,6 @@ 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 - No longer used, use the 'canvas-key' event instead. - * @property {Boolean} preventHorizontalPan - No longer used, use the 'canvas-key' event instead. * @property {?Object} userData - Arbitrary subscriber-defined object. */ From 5a5420972cce16300eab81a6d2bf2699c3d61f65 Mon Sep 17 00:00:00 2001 From: Ian Gilman Date: Thu, 16 Feb 2023 14:16:56 -0800 Subject: [PATCH 10/10] Changelog for #2291 --- changelog.txt | 1 + 1 file changed, 1 insertion(+) 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)