Get access to coordinates and this inside showContextMenu

GoJS
1

Hi Team,

I am trying to implement a custom context menu passing the x,y coordinates from GoJs to the consumer component.
How to get the x & y coordinates on the context menu open and call an outside method using this?

Below is the code snippet

@Output() rightClick: EventEmitter<{
x: number;
y: number;
isDiagramContext: boolean;
}> = new EventEmitter();

const $ = go.GraphObject.make;
const dia = $(go.Diagram, {
‘undoManager.isEnabled’: true,
initialAutoScale: go.Diagram.Uniform,
‘contextMenuTool.showContextMenu’: function (cm, obj) {
// const xPos = // How to get xPos ??
// const yPos = // How to get yPos ??
if (obj === null) {
// this.rightClick.emit({x: xPos, y: yPos, isDiagramContext: true });
} else {
// this.rightClick.emit({x: xPos, y: yPos, isDiagramContext: false });
// How to access this.rightClick ??
}
go.ContextMenuTool.prototype.showContextMenu.call(this, cm, obj);
}
This is the stackblitz app : Angular GoJs - StackBlitz

2 
const self = this;
const $ = go.GraphObject.make;
const dia = $(go.Diagram, {
  ‘undoManager.isEnabled’: true,
  initialAutoScale: go.Diagram.Uniform,
  // overriding a method requires a function -- cannot use => arrow
  ‘contextMenuTool.showContextMenu’: function (cm, obj) {
    const xPos = this.mouseDownPoint.x;
    const yPos = this.mouseDownPoint.y;
    if (obj === null) {
      self.rightClick.emit({x: xPos, y: yPos, isDiagramContext: true });
    } else {
      self.rightClick.emit({x: xPos, y: yPos, isDiagramContext: false });
    }
    go.ContextMenuTool.prototype.showContextMenu.call(this, cm, obj);
  });
3

Hi Walter,

I was able to get the instance of this by trying something like you mentioned. Thanks for the tip.
But, the coordinates from mouseDownPoint seems to be different, I even get negative values as coordinates. It’s also not relative to the gojs diagram container div.
I need the x & y offset coordinates from the window.

App updated here: Angular GoJs - StackBlitz

4

As the documentation states, ContextMenuTool.mouseDownPoint is in document coordinates: ContextMenuTool | GoJS API

You can call Diagram.transformDocToView Diagram | GoJS API to convert that to viewport coordinates – i.e. relative to the top-left corner of the Diagram’s HTMLDivElement.

5

Thanks walter. It works!