Zoom to fit after changing layout

GoJS
1

Hi Walter,
I managed to produce a graph with a behavior similar to the Fishbone example where buttons are used to dynamically change the layout (I’m switching between TreeLayout and ForceDirectedLayout).

However, I would like the zoom to be adjusted to fit both graphs when changing them, because at the moment the zoom remains fixed to the initial level I set with initialAutoScale: go.Diagram.Uniform in the Diagram. For the first view it’s fine, but it should changed to fit also the second view.

These are my simple switching functions connected to the button callbacks:

function setTreeLayout() {
    myDiagram.startTransaction("tree_layout");
    myDiagram.layout = $(go.TreeLayout,
    {
        nodeSpacing: 40,
        layerSpacing: 180
    });
    myDiagram.commitTransaction("tree_layout");
}

function setDynamicLayout() {
    myDiagram.startTransaction("dynamic_layout");
    myDiagram.layout = $(go.ForceDirectedLayout,
    {
        defaultSpringLength: 30,
        defaultElectricalCharge: 200
    });
    myDiagram.commitTransaction("dynamic_layout");
}

Do you know which is the fastest way to update the zoom level?

Thanks,
Guido

2

Well, if you set Diagram.autoScale to go.Diagram.Uniform, you’d get that scale-to-fit behavior after every layout. However, you’d also get that behavior if the user moved a node.

So if you only want that behavior after each layout, you could implement a “LayoutCompleted” DiagramEvent listener that called Diagram.zoomToFit.

3

Oh, in case you meant your question about “fastest way to update the zoom level” to be about execution time, I suppose you could disable the AnimationManager or decrease its AnimationManager.duration.

Another idea: did you know about the Shift-Z command?

4

Setting Diagram.autoScale to go.Diagram.Uniform was what I was looking for, perfect!
AnimationManager is doing fine, I’m satisfied with both speed and performance.
I also discovered SHIFT+Z, nice shortcut, thanks!