How to bring up HTML context menu immediately upon click

GoJS
1

As demonstrated in the example HTML Context Menu, the context menu is not shown immediately when there is already context menu being shown. The second context menu click simply hides the context menu. What does it take to show the context menu right away on right button click? Thanks.

2

Thanks for pointing this out. We’ve made the change for 1.6 so built-in GoJS context menus work as you expect. The sample will also have to change, it requires:

  cxElement.addEventListener("blur", function(e) {
    cxTool.stopTool();

    // !!! this is new code
    // maybe start another context menu
    if (cxTool.canStart()) {
      myDiagram.currentTool = cxTool;
      cxTool.doMouseUp();
    }
    // !!! end new code

  }, false);

That code should work even in 1.5.

There’s an unrelated bug with that sample I noticed while doing this, where selecting a node and then right-clicking on the diagram brings up inappropriate context menu buttons. You might also want to update this block of code:

// Show only the relevant buttons given the current state.
var cmd = diagram.commandHandler;
var objExists = obj !== null;
document.getElementById("cut").style.display = objExists && cmd.canCutSelection() ? "block" : "none";
document.getElementById("copy").style.display = objExists && cmd.canCopySelection() ? "block" : "none";
document.getElementById("paste").style.display = cmd.canPasteSelection() ? "block" : "none";
document.getElementById("delete").style.display = objExists && cmd.canDeleteSelection() ? "block" : "none";
document.getElementById("color").style.display = objExists ? "block" : "none";

The library and sample changes will be in 1.6. In the meantime, if you are using the custom context menu in this sample the changes for the sample ought to be sufficient.

Thanks for reporting this.

3

Hi Simon,

I tried the fix you provided on v1.5.22, but it didn’t work. Would you mind verify that this is the case?

Thanks.

-Chen

4

See here: [EDIT: now a standard sample] HTML Context Menu

Same code in a codepen: http://codepen.io/simonsarris/pen/pyvRQd

5

After spending some time doing a diff between your solution and the example code, I found out that more changes are needed to make it work. Specifically, we need the this.focus(), and the cxElement.tabIndex = ‘1’ statements from your code. Otherwise, the ‘blur’ event will never get fired.

6

Ah sorry, that explains it. I started by using the code in the beta branch of GoJS, so there might have been other improvements that were not in the 1.5 branch at all.