Wait until requestUpdate it completed

GoJS
1

I have an issue where I am attempting to use the centerRect() call and the requestUpdate() call inside of the ‘InitialLayoutCompleted’ event listener. The issue seems to be that the centerRect() is using the old coordinates rather than the ones in the diagram after the requestUpdate() call resolves. Is there a way to wait until the updates resolves? I only want to call this centerRect() one time after the diagram is set up initially. Thanks!

2

Could you please describe the steps you are taking? Why are you calling requestUpdate?

3

Yes, I am resizing the div similar to this Resizing Diagrams -- Northwoods Software. Then I call requestUpdate() and after that, my centerRect().

4

So you are modifying the Div size during the “InitialLayoutCompleted” DiagramEvent handler? If so, I suggest you do the centering in a setTimeout.

5

A set timeout outside of the event handler? Do you have a suggestion for the amount of time to wait? Thanks.

6

That depends on how you are changing the size of the Div. I would first try 0 milliseconds.

7

I have experimented with some different times but it does not seem to change the behavior at all. It does work if I out it in a “LayoutCompleted” event handler but I do not want to do that because then it will call it whenever I use my zoom feature or a subgraphexpander button. Any other thoughts?

8

What are your DiagramEvent listeners doing?

9

The initialLayoutCompleted handler just handles the resizing of the div. The LayoutCompleted one is managing a collection of parts and their positions. The parts are serving as zoom buttons in the diagram.

10

Put your code to manage those zoom button parts in a named function – let’s call it manageZoom. Have it take a DiagramEvent as its only argument.

Have your code that changes the HTMLDivElement size first add your manageZoom function as a “ViewportBoundsChanged” DiagramEvent listener. And modify your manageZoom function to remove itself as a “ViewportBoundsChanged” DiagramEvent listener.

11

Is this what you mean.
const manageZoom = (eventListener) => {
zoom code …
diagram.removeDiagramListener(‘ViewportBoundsChanged’, manageZoom());
}

diagram.addDiagramListener(‘InitialLayoutCompleted’, () => {
diagram.addDiagramListener(‘ViewportBoundsChanged’, manageZoom());
other code…
}

I assume i’m doing something wrong here since this gives me some console errors. What is the right way to do this? Thanks.

12

You have to pass the function, not the result of calling the function!

$(go.Diagram, . . .,
  {
    "InitialLayoutCompleted": e => {
      myDiagram.addDiagramListener("ViewportBoundsChanged", manageZoom);
      . . .
    },
    . . .
  })

function manageZoom(e) {
  myDiagram.removeDiagramListener("ViewportBoundsChanged", manageZoom);
  . . .
}
13

Ah, rookie mistake. I changed that and with the centerRect call in the new manageZoom function it works perfectly. Thank you!