rebuildParts does not work if no layout is provided

GoJS
#1

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

#2

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)

#3

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

It didn’t do anything.

#4

Try this:

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

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

#6

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?

#7

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.

#8

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>
#9

Latest example works for me. Thank you for your help.