Custom context menu popup location

GoJS
1

Trying to implement context menu for nodes and edges. In the angular application this is how the canvas and menu are defined and the TS code supporting it. However as you can see in the attached image the context menu is displayed far to the left of the node. Any idea what may be causing this behavior?

<div #diagramDiv class="spectrum-gojs-diagram"></div>
<div #overviewDiv class="spectrum-gojs-overview" [style.top]="getOverviewTop(diagramDiv)"
     [hidden]="!overviewVisible || diagramDiv.clientHeight < 180 || diagramDiv.clientWidth < 240">
</div>
<div id="nodeContextMenu" class="contextMenu">
  <ul>
    <li id="cut" onclick="cxcommand(event)"><a href="#" target="_self">Cut</a></li>
    <li id="copy" onclick="cxcommand(event)"><a href="#" target="_self">Copy</a></li>
    <li id="delete" onclick="cxcommand(event)"><a href="#" target="_self">Delete</a></li>
  </ul>
</div>


	// Node template
	$(go.Node, 'Vertical', {
	  background: 'transparent',
	  contextMenu: this.contextMenuService.nodeContextMenu
	},

	..
  public initialize(contextMenuElement: HTMLElement) {
    this._contextMenuElement = contextMenuElement;
    this.nodeContextMenu = $(go.HTMLInfo, {
      show: (e, o) => this.showNodeContextMenu(e, o),
      mainElement: contextMenuElement
    });
  }

  private showNodeContextMenu(e, o) {
    this._contextMenuElement.style.display = 'block';
    const mousePt = this.diagram.lastInput.viewPoint;
    this._contextMenuElement.style.left = mousePt.x + 'px';
    this._contextMenuElement.style.top = mousePt.y + 'px';
  }

Capture
Capture.PNG1142×850 13.4 KB

2

I hope you have looked at the HTML in the sample that implements HTML context menus: HTML Context Menu

Look carefully at how the HTML DIV and UL elements are declared in the HTML next to the DIV used to host the Diagram. Note how the containing DIV has position: relative style. Is that the case in your app?

3

Thanks Walter. I missed that part of example. Currently I can not change the div style in our application as the page contains other panels which will conflicts with styles required for html context menu. My other alternative is to use the built-in context menu. However when I try to set the diagram context menu I get his error in the console. GraphObject.make requires a class function or GoJS class name or name of an object builder, not: ContextMenu

Any idea what I am missing?

Here is the code for setting context menu:

this.diagram.contextMenu =
$('ContextMenu',
  $('ContextMenuButton',
    $(go.TextBlock, 'Undo'),
    { click: (e, obj) => { e.diagram.commandHandler.undo(); } },
    new go.Binding('visible', '', (o) => {
                                      return o.diagram.commandHandler.canUndo();
                                    }).ofObject()),
  $('ContextMenuButton',
    $(go.TextBlock, 'Redo'),
    { click: (e, obj) => { e.diagram.commandHandler.redo(); } },
    new go.Binding('visible', '', (o) => {
                                      return o.diagram.commandHandler.canRedo();
                                    }).ofObject())
);
4

What version are you running? Evaluate go.version. I think we added “ContextMenu” in 1.8.

5

1.7.11. That explains it. Need to use Adornment. It’s working now. Thanks.