Context menu on link release location


I want’t show context menu on the diagram when I release the link. My scenario is as following:

  • I have a node in the diagram
  • Click on the node to start the line drawing
  • Move the line anywhere on the diagram, still holding the mouse
  • If I release the mouse over the diagram AND NOT over another node, I do:
    • detect mouse location
    • show context menu on that location

So far I was unable to find the right API for this. The closest I come is use of doMouseUp tool

diagram.toolManager.linkingTool.doMouseUp = function () {
                console.log("mouse up");

But that overrides default behavior of line drawing and connecting to other nodes so everything stops working.

Here is an example of what I think you want:

That sample’s single context menu button when clicked creates a node and draws a link to it from the original node. But of course your context menu buttons can do whatever you want.

Thank you @walter, your example really helped. I was able to create a new context menu and add menu items dynamically.

One more thing I noticed in the example. Regular context menu will hide itself when you click outside if it or press escape key. But this new CM from example will hide only if you leave it’s area or if you click on the menu item. You can see this part of the code

var cm =
        //background: "transparent",
        //padding: 10,
        mouseLeave: function (e, obj) { tool.hideContextMenu(); }

I want it to behave as usual, but if I remove the mouseLeave line then it always stays opened. How do I make it behave as usual?

Try implementing a to hide the context menu.

That works when I click on diagram. But if I click on any other node or object it will not respond to click event. Also escape key is also not hiding CM. Do I really need to subscribe to every event to make it work?

Edit* fixed typo!

OK, I guess having the complete behavior of ContextMenuTool is a reasonable expectation. So I have reimplemented (and simplified) Please force a reload and look at the new code.

Excellent, now everything works as expected. Thank you!