rebuildParts does not work if no layout is provided

Hi Team,

In my diagram I am not using any layout as I like the default layout more than Grid, tree etc.
User can drag the node to different position.

Now I am trying to implement reset layout functionality on button click like:

const onResetLayout = () => {
diagram.rebuildParts();
};

But the above code does not bring back the node to original position.
If I add any layout like - layout: $(go.GridLayout), It works.

Please help.

Thanks,
Aishwarya

The default layout only moves a node if it doesn’t have a real location or position. If you had a Binding on the location or position, and then loaded the model/diagram, every node would already have a real location, so nothing would be moved.

Try calling myDiagram.layoutDiagram(true)

I tried :
const onResetLayout = () => {
diagram.layoutDiagram(true);
};

It didn’t do anything.

Try this:

const onResetLayout = () => {
  diagram.commit(diag => {
    diag.nodes.each(node => node.position = new go.Point(NaN, NaN);
    diag.layoutDiagram(true);
  });
};

This also didn’t worked.
When we don’t use the layout for our diagram, what is the default layout used in such case?

The default value for the Diagram.layout property is an instance of the Layout class, which has the behavior I described in my first reply, above.

Could you please share how you initialize your Diagram and screenshots showing the results at each step?

I have this sample code:

const diagram = $(go.Diagram, {
‘undoManager.isEnabled’: true,
model: $(go.GraphLinksModel, {
linkKeyProperty: ‘key’
})
});

my data looks like -
nodeDataArray={[
{ key: 0, text: ‘Alpha’, color: ‘lightblue’ },
{ key: 1, text: ‘Beta’, color: ‘orange’ },
{ key: 2, text: ‘Gamma’, color: ‘lightgreen’ },
{ key: 3, text: ‘Delta’, color: ‘pink’ }
]}

Initial diagram is displayed like:
image

Now user can move the nodes like :
image

I have a button called reset view, on click of which I want the Beta node to come to its initial position.

const onResetLayout = () => {
diagram.rebuildParts();
};

Note : I don’t have location for my nodes coming from the data.

I just tried the onResetLayout function that I gave you above, on a Diagram that did not have a Diagram.layout assigned, and it worked as I believe you are asking for.

Here’s the complete sample:

<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
  <button id="myTestButton">Test</button>

  <script src="https://unpkg.com/gojs"></script>
  <script id="code">
const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      "undoManager.isEnabled": true
    });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape,
      { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8 },
      new go.Binding("text"))
  );

myDiagram.model = new go.GraphLinksModel(
[
  { key: 1, text: "Alpha", color: "lightblue" },
  { key: 2, text: "Beta", color: "orange" },
  { key: 3, text: "Gamma", color: "lightgreen" },
  { key: 4, text: "Delta", color: "pink" }
],
[
  { from: 1, to: 2 },
  { from: 1, to: 3 },
  { from: 2, to: 2 },
  { from: 3, to: 4 },
  { from: 4, to: 1 }
]);

document.getElementById("myTestButton").addEventListener("click", e => {
    myDiagram.nodes.each(n => n.location = new go.Point(NaN, NaN));
    myDiagram.layoutDiagram(true);
  });
  </script>
</body>
</html>