Capturing diagram move and drag events

I am fairly new to gojs and I am trying to understand the object structure and events. I set mouse events on the diagram, the nodes, and group. For some reason, though, when a user drags the entire diagram around the canvas, i cannot seems to get mouse events.

Here is what I am trying to do:

I have 2 gojs objects in 2 different canvases. When the user drags one diagram, I would like the other diagram to mimic it on the y axis.

To start I just want to detect the movement of one of the diagrams. I have tried mouse events and SelectionMoved on the diagram. I can only seem to get mouseOver and mouseHover to output to the console. I can get mouse enter and leave on the nodes and groups. I cannot get any drop events and I have no idea how to know when a move happens.

So what is the best way to attach a listener to the gojs object as a whole and know when the canvas/diagram has been moved? Can anyone help me get started int he right direction?

It seems to me that if you want to keep the positions of two Diagrams in sync, you don’t want to get any mouse events, because the user or code might causing scrolling without the use of any mouse.

Instead you want to implement “ViewportBoundsChanged” DiagramEvent listeners. Each listener should change the other’s Diagram.position. I don’t know if you need to put in any guards to avoid any infinite loops.

Yes, that is what I need. It works great! I found that I am not getting infinite loops because setting the position is not firing a bounds change event.


Yes, changing Diagram.position will definitely result in a “ViewportBoundsChanged” DiagramEvent. But that event is in that diagram, not in the diagram being scrolled.

I was postulating that under certain circumstances if you had established “ViewportBoundsChanged” listeners on both diagrams that set the Diagram.position on each other, there might be infinite loops.