The Escape key event handler doesn't work after clicking diagram

GoJS
1

We have MVC application where we use DevExpress controls and GoJS library. We’d like to add full screen feature on some diagrams and it works. Please, take a look at the screen shots before and after collapsing DevExpress’ spliiters:

  1. Before:

ss3.png1901×1158 110 KB

  1. After:

ss4.png1900×1160 98 KB

When we set full screen mode without touching diagram by mouse and press Escape key everything returning back to normal mode with splitters. But, when we move diagram using mouse the Escape key event handler stopped working.

The JavaScript code looks as following:

function cancelFullScreenMode() {
    document.onkeydown = function (evt) {
        evt = evt || window.event;
        var isEscape = false;
        if ("key" in evt) {
            isEscape = (evt.key == "Escape" || evt.key == "Esc");
        } else {
            isEscape = (evt.keyCode == 27);
        }
        if (isEscape) {
            var pane1 = MainSplitter.GetPaneByName('Header');
            var pane2 = MainSplitter.GetPaneByName('Content');
            var pane3 = MainSplitter.GetPaneByName('Footer');
            var pane5 = ContentSplitter.GetPaneByName('ContentLeft');
            var pane6 = ContentSplitter.GetPaneByName('ContentCenter');
            pane1.Expand();
            pane3.Expand();
            pane5.Expand();
        }
    };
}

function fullScreenMode() {
    var name = DevExpressUtility.getSelectedItem();
    var pane1 = MainSplitter.GetPaneByName('Header');
    var pane2 = MainSplitter.GetPaneByName('Content');
    var pane3 = MainSplitter.GetPaneByName('Footer');
    var pane5 = ContentSplitter.GetPaneByName('ContentLeft');
    var pane6 = ContentSplitter.GetPaneByName('ContentCenter');
    pane1.Collapse(pane2);
    pane3.Collapse(pane2);
    pane5.Collapse(pane6);
}

How can we overcome this issue?

2

That’s because the CommandHandler is handling the event. The commands intro page has information about overriding the doKeyDown method.

3

Or else the PanningTool is handling keyboard events, or whatever is the current tool at that time. The ToolManager, if it is the Diagram.currentTool, passes keyboard events on to the CommandHandler.