Custom context menu popup location

@Shawn wrote:

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.PNG1142×850 13.4 KB

Posts: 4

Participants: 2

Read full topic