Diagram opens up very small

GoJS
1

Occasionally, our tree diagram opens up very small and despite trying a few things we can’t find a perfect solution. The best we’ve come up with is to load the diagram initially with:

dblBowTieDiagram.autoScale = go.Diagram.Uniform

Then, after a second we set the autoScale to None and call zoomToFit:

        setTimeout(function () {
            $scope.$apply(function () {
                dblBowTieDiagram.autoScale = go.Diagram.None;
                dblBowTieDiagram.zoomToFit();
            });
        }, 1000);

This works most of the time but we sometimes still get a view like this:

chrome_l5hqlyKcQk
chrome_l5hqlyKcQk1884×379 16.9 KB

We added a button to zoom back in and it works reliably but we would prefer not to need it!

chrome_4wTTgDRImx
chrome_4wTTgDRImx1715×353 34.5 KB

Is this a known issue? Is there a workaround we haven’t found?

2

I assume the size of the HTMLDivElement that is the value of Diagram.div starts off tiny and changes size as the page layout is being performed, probably several times.

The “InitialLayoutCompleted” DiagramEvent happens when the Diagram has finished its loading of a model after your code has set Diagram.model. Could you define this listener (if you don’t have one already) and check in it the size of the Div element? Is that value different from what the user sees when you find that that Diagram.scale is really too small?

If you have set Diagram.autoScale, you shouldn’t need to reset it and then call zoomToFit at any time.

By the way, precisely which version of GoJS are you using? Is the behavior different in different browsers?

3

It’s part of a much larger application and the DIV it sits in is set as a % so yes I’d say there’s every chance it loads at one size and then all the other aspects of the site change the dimensions. I’m not sure it would ever be explicitly tiny but maybe that’s the way aggular treats things durting the load process. We on GoJS v2.1.55 and the problem exists in both Chrome and Edge.

I’ve managed to work around this using a combination of what you suggested and a similar approach to what was being used already. So, for other users this is what works (it may not be what’s best!):

        dblBowTieDiagram.addDiagramListener("InitialLayoutCompleted", function (e) {
            var interval = $interval($scope.zoomToFit, 500);
            setTimeout(function () {
                $interval.cancel(interval);
            }, 2000);
        });