Is there a way to properly log and inspect data returned from an event?

GoJS
1

I am trying to inspect data returned from a ObjectSingleClicked event.

Specifically I’m trying to understand what I can use from the e.subject parameter to get the exact position of the clicked shape in the Layout.

What I’m getting is a set of data with mostly incomprehensible parameters using this code:

diagram.addDiagramListener('ObjectSingleClicked', e => {
  console.log(e)
})

Something like the following is logged to the console:

> Af {aa: E, Sb: "ObjectSingleClicked", Qw: Y, zw: null, br: false}
KB: (...)
Qw: Y {…}
Sb: "ObjectSingleClicked"
aa: E {…}
br: false
cancel: (...)
diagram: (...)
g: (...)
nB: (...)
name: (...)
parameter: (...)
subject: (...)
zw: null

Is there a way to see the original names of these parameters so I can get a better understanding of what is returned from an event?
There seems to be no description of the events parameters in the API docs.

Thanks

2

Did you try .toString()?

GoJS Events -- Northwoods Software tells you that in that event the DiagramEvent.subject is the clicked GraphObject.

As you can see there is not much that DiagramEvent | GoJS API has to offer you – it just tells you what object was clicked.

I think you want Diagram.lastInput. In particular, you want to use InputEvent | GoJS API.

Is there a reason you aren’t using the latest version?

3

Managed to get coordinates

I managed to get the clicked position using e.pageX and e.pageY using your suggested lastInput option.

      diagram.addDiagramListener('ObjectSingleClicked', e => {
        // Returns coordinates of clicked mouse point
        let { pageX, pageY } = e.diagram.lastInput.event
      })

I’m still not sure how to check what I clicked on though?

DiagramEvent.subject gives me another funky object.
e.subject.toString() gives me Shape(Circle)#2599

Is there a way to…

I would preferably like to have something similar to a named id that I can get from e.subject and then check if thats what I clicked on.
Something like:

if ( e.subject.id === 'my-circle' )
  // move htmldiv to circle position

Your questions

Did you try .toString()

Yes, this is the result of e.toString():
e.toString() *ObjectSingleClicked:Shape(Circle)#2599

Is there a reason you aren’t using the latest version?

Yes, we still have a task to migrate to latest. Not sure how migrating will affect the app so we still haven’t done it yet.

4

It seems unlikely to me that getting the Event.pageX is what you really want, since that is affected by scrolling and zooming of the page, along with whatever the page layout has done with laying out the DOM.

Is there a reason you did not take my advice and use the Diagram.lastInput’s InputEvent.documentPoint?

Are you trying to automate some testing of your app? What are you really trying to do? If it is testing, have you seen Simulating Input Events and Robot | GoJS API ? And you might find it useful to search the web and this forum.

Yes, e.subject returns the GraphObject that was clicked on.

You can see if that object has a GraphObject.name, but that is uncommon. Look at how the template is defined.

5

I’m not trying to automate testing, although I might in the future so thanks for the reference to robots :-)

I’m trying to position a tooltip that is a HTMLDOM element to a specific graphObject.

I have pretty much got it to work.

6

Ah, I see. OK. Maybe you want to use InputEvent.viewPoint instead. This sample uses that in positioning some descriptive HTML: Data Visualization GoJS Sample

And I hope you have read GoJS HTML Interaction -- Northwoods Software.

Don’t forget to test your functionality when the page has been scrolled and zoomed. And is being used on a touch device.