Save Zoom Position

GoJS
1

Hi,

When a user zoom in a Diagram, I would like to save and restore the view at the same position when a PostBack is made. And if it’s the first load of the page, I want a autoscale on it.

My initialisation is:

myDiagram =
goJs(go.Diagram, “myDiagram”,
{
“toolManager.mouseWheelBehavior”: go.ToolManager.WheelZoom,
allowDrop: false, // support drag-and-drop from the Palette
“linkingTool.direction”: go.LinkingTool.ForwardsOnly,
initialContentAlignment: go.Spot.Center,
layout: goJs(go.LayeredDigraphLayout, { isInitial: false, isOngoing: false, layerSpacing: 100, direction: 90 }),
maxSelectionCount: 1
});

When the page is loaded I call:

if ($("#hdnPositionZoom").val() == “”) {
myDiagram.initialAutoScale = go.Diagram.Uniform;
} else {
myDiagram.initialAutoScale = go.Diagram.None;
myDiagram.scrollToRect(new go.Rect($("#hdnPositionZoom").val()));
}

And in the ViewportBoundsChanged event:

myDiagram.addDiagramListener(“ViewportBoundsChanged”, function (e) {
if (myDiagram.initialAutoScale != go.Diagram.Uniform) {
var aPosition = myDiagram.viewportBounds;
$("#hdnPositionZoom").val(aPosition);
} else {
myDiagram.initialAutoScale = go.Diagram.None;
}
});

I think it exist a easy to do what I want but I don’t find it. Could you help me?

Thanks.

2

While loading the page, do you set the Diagram.initial… property and call the Diagram.scrollToRect method before or after setting Diagram.model?


You need to set any Diagram.initial… properties beforehand.


And you need to call Diagram.scrollToRect well afterwards, in an “InitialLayoutCompleted” DiagramEvent listener. This is because only after the layout is completed will the document bounds have been computed and the Diagram.position and .scale determined. Those need to have been determined before it makes sense to try to scroll the diagram.

Is “hdnPositionZoom” a hidden element whose state is maintained after a postback? I suggest that you instead have two such states, one holding the Diagram.position and another holding the Diagram.scale. Then you can set the Diagram.initialScale and .initialPosition before setting Diagram.model during the postback initialization, rather than setting initialAutoScale and calling scrollToRect at any time.

Remember to convert the string values into an actual Point object and a number. Evaluating new go.Rect(“1 2 3 4”), as you have been doing, should be resulting in an error. Please use go-debug.js and check the console log whenever you are doing development.

3

Thanks for yours advices. My code now work like I want. After modification, the result is:

goJs(go.Diagram, “myDiagram”,
{
// have mouse wheel events zoom in and out instead of scroll up and down
“toolManager.mouseWheelBehavior”: go.ToolManager.WheelZoom,
allowDrop: false, // support drag-and-drop from the Palette
“linkingTool.direction”: go.LinkingTool.ForwardsOnly,
initialContentAlignment: go.Spot.Center,
layout: goJs(go.LayeredDigraphLayout, { isInitial: false, isOngoing: false, layerSpacing: 100, direction: 90 }),
maxSelectionCount: 1,
initialPosition: new go.Point(parseFloat($("#hdnPositionXZoom").val()), parseFloat($("#hdnPositionYZoom").val())),
initialScale: parseFloat($("#hdnScaleZoom").val())
});

myDiagram.addDiagramListener("ViewportBoundsChanged", function (e) { $("#hdnPositionXZoom").val(myDiagram.position.x); $("#hdnPositionYZoom").val(myDiagram.position.y); $("#hdnScaleZoom").val(myDiagram.scale); });

Thanks again.

Bye