Diagram is not centered

GoJS
1

I’ using the Angular wrapper of go-js.

When I browse from one page of my application to the page that contains my diagram, the diagram is not centered.
However if I’m already on the page that contains the diagram and I hit F5, the diagram is centered just fine.

This gif illustrate the issue :

screenshot2

I’ve tried to add the following code in my digram init function but it does not change anything :

    dia.initialContentAlignment = go.Spot.Center;

Am I missing something ?

2

The HTMLDivElement that is hosting the Diagram must be changing size and the GoJS code is not being notified of the change.

Please read Resizing Diagrams -- Northwoods Software

Which browser are you using? Which version of GoJS?

3

Browser : Chrome
GoJS version 2.1.30
GoJS-Angular version : 1.0.13

I understand what you are saying but I don’t see any reason why it ould resize on a page navigation and not on a page refresh as demonstrated in the GIF above.
The documentation you have linked mentions Internet Explore and older browsers, which is not my case though

4

But when are you initializing your Diagram?

If you are doing so before the Div has its final size, you could still run into this problem. Try adding an “InitialLayoutCompleted” DiagramEvent listener that logs the size of the Div – is that actually the size that you see in the page?

5

I use the Angular wrapper so I’m doing exactly the same thing as in the sample :

  <gojs-diagram #myDiagram [initDiagram]='initDiagram' [nodeDataArray]='diagramNodeData'
                [linkDataArray]='diagramLinkData' [divClassName]='diagramDivClassName' [modelData]='diagramModelData'
                [skipsDiagramUpdate]='skipsDiagramUpdate' (modelChange)='diagramModelChange($event)'>
            </gojs-diagram>
6

What about the size of the div at the time the diagram initialization is done?

7

The div has not fixed size :
height: 100% !important;

besides I don’t see how to use this event. Inside the initDiagram function, I added :

dia.addDiagramListener('InitialLayoutCompleted', (e: go.DiagramEvent) => {
  e.subject.each(p => {
    console.log(e);
  });
});

and subject is null.

8

ok, I guess this way it works :

   dia.addDiagramListener('InitialLayoutCompleted', (e: go.DiagramEvent) => {
      console.log('height  ' + dia.div.clientHeight);
    });

It displays 817px, which is the size of the div after the page is loaded when I inspect it (see upper right in screenshot)

image
image1632×553 67.8 KB

so, why is it not centered ?

9

What happens if you set contentAlignment, instead of initialContentAlignment?

I suspect the issue is that the Diagram DIV is getting setup at a zero size (display hidden) or 1x1 size and then expanded, so any “initial” centering is insufficient, because it is centering to a small or nonexistent size instead of the expected expanded size.

This actually happens with our jQuery Tabs sample, and we ameliorate it by calling Diagram.delayInitialization after the tab has been clicked (after the Diagram DIV is the size it is going to be), like this:

$("#tabs").tabs({
  activate: function(event, ui) {
    // Needed the first time you tab to a tab with a Diagram in it,
    // because the diagram in the tab had zero size while initializing:
    if (ui.newTab[0].innerText === "GoJS Tab") { // The first tab with a Diagram in it
      if (firstTime) {
        myDiagram.delayInitialization(function() { myDiagram.requestUpdate(); });
        firstTime = false;
      }
      myDiagram.requestUpdate();
    } else if (ui.newTab[0].innerText === "GoJS 2") { // The second tab with a Diagram
      if (firstTime2) {
        myDiagram2.delayInitialization(function() { myDiagram.requestUpdate(); });
        firstTime2 = false;
      }
      myDiagram2.requestUpdate();
    }
  }
});

Should you not wish to do that, you could also ask the Diagram to re-center when you click the button in your app that displays it, by calling,

myDiagram.alignDocument(go.Spot.Center, go.Spot.Center);
10

I cannot do it on the button click because this button is on another page. It routes to the page that contains my diagram.

Again, the fact that it is centered when hitting F5 but not when coming from a different page of the app is strange.
I thought maybe it has to do with the Angular page init sequence. I’ve added the following code inside ngAfterViewInit :

   this.observedDiagram.contentAlignment = go.Spot.Center;
    this.observedDiagram.requestUpdate();

but it makes no difference. I’ve tried to do it in the InitialLayoutCompleted event but no luck either. This is frustrating to say the least.

11

That’s very odd. Is there some way I could take a look at this page live somewhere? You can send email, gojs at our domain, nwoods.com

12

Yes, I have just emailed the details.