How to disable the default keyboard keybinds?

[geoff-harper]

Hey I'm trying to figure out how to disable the default keybinds, specifically rotate and flip. This appears to be the function in question from line 10409

function onCanvasKeyDown( event ) {
    var canvasKeyDownEventArgs = {
      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
     * @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/shift uparrow
                if (!canvasKeyDownEventArgs.preventVerticalPan) {
                  if ( event.shift ) {
                    this.viewport.zoomBy(1.1);
                  } else {
                    this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(0, -this.pixelsPerArrowPress)));
                  }
                  this.viewport.applyConstraints();
                }
                event.preventDefault = true;
                break;
            case 40://down arrow/shift downarrow
                if (!canvasKeyDownEventArgs.preventVerticalPan) {
                  if ( event.shift ) {
                    this.viewport.zoomBy(0.9);
                  } else {
                    this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(0, this.pixelsPerArrowPress)));
                  }
                  this.viewport.applyConstraints();
                }
                event.preventDefault = true;
                break;
            case 37://left arrow
                if (!canvasKeyDownEventArgs.preventHorizontalPan) {
                  this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(-this.pixelsPerArrowPress, 0)));
                  this.viewport.applyConstraints();
                }
                event.preventDefault = true;
                break;
            case 39://right arrow
                if (!canvasKeyDownEventArgs.preventHorizontalPan) {
                  this.viewport.panBy(this.viewport.deltaPointsFromPixels(new $.Point(this.pixelsPerArrowPress, 0)));
                  this.viewport.applyConstraints();
                }
                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;
                break;
        }
    } else {
        event.preventDefault = false;
    }
}

It seems like they're hard coded to always trigger and I don't see an option in the constructor for it. Any help is appreciated, thanks

[pearcetm]

I don't think there's an option to disable (or otherwise modify) the default keybindings when you are constructing a viewer. However, you might be able to attach a MouseTracker that can check for key press events and prevent propagation or something like that. I haven't tried doing this, it's just an idea of a direction to look...

[msalsbery]

@geoff-harper

You can subscribe to the 'canvas-key' event on a OpenSeadragon.Viewer instance. In the event handler you can set the passed event args object's preventDefaultAction property to true for any key presses you want to ignore

[geoff-harper]

Will this also prevent my other canvas-key handlers from firing though? Say I have a handler for my own base keybinds, and then I layer more handlers on as other conditions are met, how do I only prevent the baked in ones? It seems like the only way to do it would be to have one giga-handler that prevents default and then checks every possible condition? Am I misinterpreting it?

[pearcetm]

Here's a code snippet from one of my projects that uses the approach @msalsbery mentioned (I'd forgotten where to look in my own code, having solved this quite a while ago now).

    // suppress default OSD keydown handling for a subset of keys
    viewer.addHandler('canvas-key',event=>{
        if(['q', 'w', 'e', 'r', 'a', 's', 'd', 'f'].includes(event.originalEvent.key)){
            event.preventDefaultAction = true;
        }
    });

I believe you should still receive the event with any other handlers that are bound. If you have trouble, I'd be happy to look into it further.

[pearcetm]

@msalsbery I think this might make a good topic for the FAQ, would you be willing to add some guidance and maybe a code snippet there?

[msalsbery]

@msalsbery I think this might make a good topic for the FAQ, would you be willing to add some guidance and maybe a code snippet there?

Definitely! It's been a work in progress for too long sadly. But yes I'll get on it and get it done!

[iangilman]

@msalsbery @pearcetm Thank you for the good suggestions!

I'd like to add that I think there's general interest in being able to control what keys do what. There's at least this issue: #2157

Also, @geoff-harper another possibility for disabling the rotation keys would be to use rotationIncrement: 0 in your viewer options. That won't stop the key from firing; it just won't do anything.

[geoff-harper]

The keybind list that pearce provided did the trick. I think granular control over all of the controls would be really good. Something like what three.js does with their controls (keys, mouseButtons, and touches on the same page) would be really good

[pearcetm]

Agree this is a good idea. Hopefully someone can take it on... my plate's a bit full with existing PRs at the moment!