How do I make the HTML context menu appear with a left click?

[s-tanoue]

I want to make the HTML context menu appear when a node is left-clicked, and disappear when it is clicked anywhere other than the context menu.

I figured I could satisfy the above specification by calling a method to display the context menu when a node is left-clicked.

So, referring to a question in this forum, I added the code to call the method to display the context menu to the code of the custom context menu sample.

How to open a context menu on left click?

Hi, I want to show a menu when the user left-clicks on a node. I used the ContextMenuTool because it is very much like what I want, except using the left click instead of the right. How can I do that? Thanks in advance, Jany Belluz Before asking, I tried it that way: // Node template $(go.Node, { click: (event, obj) => { const node = obj.part; const menu = $(go.Adornment, ...); node.diagram.toolManager.contextMenuTool.showContextMenu(menu, node); } }); But my problem is th…

$(go.Node,
  { . . .
    click: (e, node) => e.diagram.commandHandler.showContextMenu(node);
  },
  . . .);

However, it could not be displayed.

So I tried the code below.

$(go.Node,
  { . . .
    click: (e, node) => showContextMenu(node, myDiagram);
  },
  . . .);

In this case, I can’t hide the context menu by clicking anywhere else.

How do I make the HTML context menu appear with a left click?

Thank you in advance.

[walter]

If you have set the Node.contextMenu property, this is correct:

$(go.Node,
  { . . .
    contextMenu: ...,
    click: (e, node) => e.diagram.commandHandler.showContextMenu(node);
  },
  . . .);

[s-tanoue]

Thank you for your answer.

I tried the code in your answer, but it didn’t work.
I tried to use setTimeout as follows, and it worked.

$(go.Node,
  { . . .
    contextMenu: ...,
    click: (e, node) => {
       setTimeout(()=>{
           e.diagram.commandHandler.showContextMenu(node)
       }, 0)
    }
  },
  . . .);

This is my sample of JSFiddle. (Sorry, this sample is very slow.)

Edit fiddle - JSFiddle - Code Playground

I don’t know why it worked.
Do you know any reason why it worked ?

[walter]

Wow, jsFiddle is really bad for running samples. I could not get anything from it.

I just tried this code in a minimal sample, and it worked well:

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        {
          click: (e, node) => e.diagram.commandHandler.showContextMenu(node),
          contextMenu:
            $("ContextMenu",
              $("ContextMenuButton",
                $(go.TextBlock, "BUTTON"),
                { click: (e, button) => alert(button.part.data.key) }
              )
            )
        },
        . . .

But there’s no harm in calling CommandHandler.showContextMenu in a setTimeout function.

[s-tanoue]

I apologize for the speed of the sample.
This sample is fast. Edit fiddle - JSFiddle - Code Playground

Certainly, your sample works if you are using the GoJS default context menu.
However, if you are using a HTML custom context menu, it will not work.

I was relieved to get an answer that there is no problem using a setTimeout function.