How to use mouseDrop to load context menu

GoJS
1

I am trying to build a context menu when a user move one node inside another.
This context menu will let the user choose if he want to move the node (this node will have a new parent) or create a copy of that node (this node will remain untouched and a new node will be created on that place).
So far, so good I’ve been trying this way:

mouseDrop: function (e, o) {

    $context.show(this, { x: e.event.clientX, y: e.event.clientY, key: o.data.key }, {
        comands: [
            { type: 'header', name: 'Objeto de negócio' },
            { name: 'Mover', callback: null, icon: 'fa fa-circle' },
            { name: 'Copiar', callback: null, icon: 'fa fa-circle' }
        ]
    });

}

The problem is that this menu show and hide, it didn’t remain on the screen to be clicked.
I have tried to use:

    e.bubbles = true;

and

    e.handled = true;

To prevent the default behavior to happen but this doesn’t work too.
Do you have any tips on how to do this?

2

I don’t know what “$context” evaluates to in your code. Does it work if you invoke your code from an HTML button that is outside of the Diagram? In other words, is the problem caused by your trying to do something from within the operation of the DraggingTool?

3

Context works inside the diagram too.
We use the same “component” to create a context menu when the user right click on a node and work quite well:

myDiagram = $(go.Diagram, "myDiagram", {
    [...]
    nodeTemplate:
        $(go.Node, go.Panel.Vertical,
        {
            [...]
            contextClick: ObjectContextClicked,
            [...]
function ObjectContextClicked(e, model) {
    [...]
    var cmds = [...];
    [...]

    /* context menu customizado */
    $context.show(this, { x: e.event.x, y: e.event.y, key: model.data.key }, { comands: cmds }, model.data);
}

Beside this, the context menu that I expect is shown, but fades away in the same instant. Because of this I have tried to stop the event to proceed.

4

Well, I’m trying to push the approach that I had taken. But I have no problem in change this approach if you said to me that is possible to do in other way the same functionality explained in the first post.
That is: give the power to the user decide if he want to move or copy the node when he drag the object into other node.

5

I still don’t know what $context is and what show(…) is supposed to do. If it’s something outside of GoJS, you’ll need to investigate that on your own. (It reminds me of Angular, but…)

If you had a GraphObject.contextMenu set on your Node, you could call myDiagram.commandHandler.showContextMenu on the node.

6

Ok, you’re right,

$context is our menu “component”. It’s not from GoJS.
But I’m asking if inside the event I can “preventDefault” and avoid the normal flow of the event. I think if I can do this the menu will work quite well.
I’ll take a look on the GraphObject.contextMen, maybe this can solve my situation.

7

I saw on this link that I can create custom functions to show the menu.
So far so good, I think this is the solution that best suit my problem.
I added this code:

myDiagram = $(go.Diagram, "myDiagram", {
    [...],
    nodeTemplate:
        $(go.Node, go.Panel.Vertical,
        {
            [...],
            mouseDrop: function (e, o) {

                myDiagram.commandHandler.showContextMenu(e.targetObject);

            }
        },
    [...],
    contextMenu:
        $(go.Adornment, "Horizontal")
});

cxMenu = myDiagram.toolManager.contextMenuTool;
var cxElement = document.getElementById("contextMenu");
// We don't want the div acting as a context menu to have a (browser) context menu!
cxElement.addEventListener("contextmenu", function (e) { e.preventDefault(); return false; }, false);
cxElement.addEventListener("blur", function (e) { cxMenu.stopTool(); }, false);

cxShow = function (contextmenu, obj) {
    [...]
};

cxHide = function () {
    [...]
};

cxMenu.showContextMenu = cxShow;
cxMenu.hideContextMenu = cxHide;

But the {cxShow} and {cxHide} are never called.
On your sample this code are always called when this two “events” are called.
Are there some way to check if this functions was really applied?
Is this a recommended approach?

8

You might want to check that any invoked command and the blur event on your context menu really does call myDiagram.toolManager.contextMenuTool.stopTool().

9

For a while there are no commands being invoked (I only want to show the
menu options) and there are no blur event because the menu is never
displayed.
I think this is because {cxShow} is never called. I put an
{alert} just for debug reasons and a {console.log} too but the messages
aren’t displayed.
Then I have no place to execute
{myDiagram.toolManager.contextMenuTool.stopTool()} yet. But I’ve added
to the blur function a listener. It’s possible to see it on the code
that I put on a previous post.

10

To finish this topic, my problem was that I have defined the contextMenu in the wrong place. This definition must be inside nodeTemplate and note inside go.Diagram, as showed in the wrong code below:

WRONG CODE:

myDiagram = $(go.Diagram, "myDiagram", {
    [...],
    nodeTemplate:
        $(go.Node, go.Panel.Vertical,
        {
            [...],
            mouseDrop: function (e, o) {

                myDiagram.commandHandler.showContextMenu(e.targetObject);

            }
        },
    [...],
    contextMenu:
        $(go.Adornment, "Horizontal")
});

CORRECT CODE:

myDiagram = $(go.Diagram, "myDiagram", {
    [...],
    nodeTemplate:
        $(go.Node, go.Panel.Vertical,
        {
            [...],
            mouseDrop: function (e, o) {

                myDiagram.commandHandler.showContextMenu(e.targetObject);

            },
            contextMenu:
                        $(go.Adornment, "Horizontal")
        },
    [...]
});