Save And Restore Scrolled or Zoom Diagram position

GoJS
1

Hi

I want to Save Scrolled or Zoom Diagram Position / location.
and Whenever same Diagram getting refreshed or reload, I want to get exact position of Diagram last time save.

Is there any way for these in gojs?

2

The Draggable Link sample demonstrates that for the Diagram.position property: Draggable Link
Look at the model save and load functions that also save and load diagram properties as model properties on the Model.modelData object.

Note how loading sets Diagram.initialPosition instead of Diagram.position. You can do the same with Diagram.initialScale and Diagram.scale.

3

Draggable Link is not matched Exactly with my requirement.

I want save Diagram position/Scale on basis of Diagram Scrolling.

whenever I close or refresh Diagram, I want to save Last time Diagram Scrolled position/Scale to use it as Initial viewport for new loaded/refreshed Diagram.

4

So you want to restore the Diagram.scale and Diagram.position properties after a new model has been loaded, even if the new diagram is completely different from the previous one?

OK, I think you can do that in an “InitialLayoutCompleted” DiagramEvent listener. However, the new diagram might not be able to scroll to the saved position if the Diagram.scrollMode is not go.Diagram.InfiniteScroll. That’s because without infinite scroll, scrolling is limited to the Diagram.documentBounds plus the Diagram.scrollMargin.

5

No, Actually for Same Diagram I want restore the Diagram.scale and Diagram.position after new mode has been loaded.

But it must be last time Scrolled Screen.
How can I Restore?

6

I added a “ViewportBoundsChanged” DiagramEvent listener and added setting Diagram.initialScale and initialPosition to the load function.

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Editor</title>
  <!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
</head>
<body>
  <div style="width: 100%; display: flex; justify-content: space-between">
    <div id="myDiagramDiv" style="flex-grow: 1; height: 400px; border: solid 1px black"></div>
  </div>
  <div>
    <button id="myLoadButton">Load</button>
    <button id="mySaveButton">Save</button>
  </div>
  <textarea id="mySavedModel" style="width:100%;height:200px">
{ "class": "go.GraphLinksModel",
  "nodeDataArray": [
{"key":1, "text":"hello", "color":"green", "location":"0 0"},
{"key":2, "text":"world", "color":"red", "location":"70 0"}
  ],
  "linkDataArray": [
{"from":1, "to":2}
  ]}
  </textarea>

  <script src="go.js"></script>
  <script id="code">
const $ = go.GraphObject.make;

// initialize main Diagram
const myDiagram =
  new go.Diagram("myDiagramDiv",
    {
      "ViewportBoundsChanged": e => {
        myDiagramPosition.set(e.diagram.position);
        myDiagramScale = e.diagram.scale;
      },
      "undoManager.isEnabled": true
    });

var myDiagramPosition = new go.Point(NaN, NaN);
var myDiagramScale = 1;

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
    $(go.Shape,
      { fill: "white", stroke: "gray", strokeWidth: 2 },
      new go.Binding("stroke", "color")),
    $(go.TextBlock,
      { margin: new go.Margin(5, 5, 3, 5), font: "10pt sans-serif", editable: true },
      new go.Binding("text").makeTwoWay())
  );

// save a model to and load a model from Json text, displayed below the Diagram
function save() {
  const str = myDiagram.model.toJson();
  document.getElementById("mySavedModel").value = str;
}
document.getElementById("mySaveButton").addEventListener("click", save);

function load() {
  myDiagram.initialScale = myDiagramScale;
  myDiagram.initialPosition = myDiagramPosition;
  const str = document.getElementById("mySavedModel").value;
  myDiagram.model = go.Model.fromJson(str);
}
document.getElementById("myLoadButton").addEventListener("click", load);

load();
  </script>
</body>
</html>