Keyboard Shortcuts

The following table lists the keyboard shortcuts supported in DsImageViewer that will help in performing a variety of supported operations more efficiently and make the DsImageViewer components more accessible:

Customize Keyboard Shortcuts

DsImageViewer also supports redefining, disabling, overriding, and removing the default keyboard shortcuts, as well as binding the default keyboard shortcuts to other keys and creating custom keyboard shortcuts via API using shortcuts option of ViewerOptions class.

Bind Keyboard Shortcuts

DsImageViewer supports binding any tool to any keyboard shortcut key. The following are the available built-in tools accessible through keyboard shortcut keys:

Refer to the following example code to bind the open action to “P” key:

// Bind the "P" shortcut to the open action.
viewer.options.shortcuts["P"] = [{ tool: "open" }];

Disable Keyboard Shortcuts

Refer to the following example code to disable undo and redo keyboard shortcuts:

// Initialize DsImageViewer and set the function(event) for both keys to null.
var viewer = new DsImageViewer(selector, {
    shortcuts: {
        "Z": {
            ctrl: true,
            tool: function (event) { }
        },
        "Y": {
            ctrl: true,
            tool: function (event) { }
        }
    }
});

Remove Default Keyboard Shortcuts

Refer to the following example code to remove all default keyboard shortcuts:

// Initialize DsImageViewer and set the shortcuts to null.
var viewer = new DsImageViewer(selector);
viewer.options.shortcuts = {};

Override Keyboard Shortcuts

Refer to the following example code to override Ctrl + “Numpad +“ keyboard shortcut:

// Initialize DsImageViewer and override Ctrl + "Numpad +" keyboard shortcut.
var viewer = new DsImageViewer(selector, {
    shortcuts: {
        107: {
            ctrl: true,
            tool: function (event) {
                viewer.zoom = { mode: 0, factor: viewer.actualZoomFactor + 0.1 };
            }
        }
    }
});

Create Custom Keyboard Shortcuts

Refer to the following example code to create a custom keyboard shortcut:

// Create a custom keyboard shortcut to alert the user that Ctrl+Alt+E is pressed.
viewer.options.shortcuts["E"] = {
    ctrl: true,
    alt: true,
    tool: function (e) { alert("Ctrl+Alt+E pressed."); }
};