contextMenu not working in Angular app

GoJS
1

Hello,

I am building an Angular app with GoJS using gojs-angular. I need to use contextMenu but it does not work. I’ve tried creating the menu via Adornment and HTMLInfo, no luck with both.

There’s a context menu in your gojs-angular-basic demo and it also does not work. So I assume it may be an issue in the gojs-angular package.

Versions in my app:

  • Angular 18
  • GoJS 3.0.3

Versions in the demo:

  • Angular 14
  • GoJS 2.3.17

I’m on the latest versions of Chrome and macOS.

2

I just copied the gojs-angular-basic demo into a new directory and did not make any changes to it.

I find that the context menu does work. However, if you look at how that particular context menu is implemented, you can see that the only “ContextMenuButton” is not-visible when there is only one Node that isSelected. Perhaps you are invoking the context menu when there is only one node selected?

1 Like
3

Thanks for the reply.

You are right, the menu works only when multiple nodes are selected. Didn’t notice this condition.

Will try further investigation why it does not work in my app. And will share results here if I succeed.

4

The cause of the issue was a custom mouse down handler.

5

Ah, that is unusual. I hope you figured out an alternative to do what you want, which may depend on the purpose of that listener.

6

Actually my initial intention was to pan the diagram with the right mouse button. And it worked with this custom handler:

diagram.toolManager.doMouseDown = () => {
  if (diagram.lastInput.button === 2) {
    diagram.currentTool = diagram.toolManager.panningTool;
    diagram.toolManager.panningTool.doActivate();
  } else {
    go.ToolManager.prototype.doMouseDown.call(diagram.toolManager);
  }
};

But now I am trying to keep this behavior and return the default ability to open context menu. Playing around with combination of mouseDown, mouseMove, mouseUp and isPanning flag. No luck yet.

Maybe I’m missing something and there’s an easy way to do it?

7

Yes, I think the basic need is for you to modify the behavior of the PanningTool – in particular the conditions when it can be started. Did you want the PanningTool not to be started with a regular (left mouse) button down? I’d recommend against that because then it won’t work on touch devices. On the other hand, then you can’t get the behavior that I think you are asking for.

Here’s the standard implementation of PanningTool.canStart, modified in an override to check the InputEvent.right property instead of the InputEvent.left property:

const myDiagram =
  new go.Diagram("myDiagramDiv", {
      "panningTool.canStart": function() {
        if (!this.isEnabled) return false;
        const diagram = this.diagram;
        if (!diagram.allowSelect) return false;
        const e = diagram.lastInput;
        // require left button & that it has moved far enough away from the mouse down point, so it isn't a click
        //if (!e.left) return false;
        if (!e.right) return false;
        // don't include the following checks when this tool is running modally
        if (diagram.currentTool !== this) {
          if (!this.isBeyondDragSize()) return false;
          // must wait for "delay" milliseconds before that tool can run
          if (e.timestamp - diagram.firstInput.timestamp < this.delay) return false;
          // don't start if we're over a selectable part
          if (diagram.findPartAt(e.documentPoint, true) !== null) return false;
        }
        return true;
      },
      . . .
1 Like
8

Thanks a lot, this does exactly what I need.

And I don’t want the panning with the left mouse button because I have drag selection on it that should start without any delay.