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
walter
August 1, 2022, 6:20pm
#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)
I tried :
const onResetLayout = () => {
diagram.layoutDiagram(true);
};
It didn’t do anything.
walter
August 1, 2022, 8:15pm
#4
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?
walter
August 2, 2022, 10:43am
#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?
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:
Now user can move the nodes like :
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.
walter
August 8, 2022, 12:33pm
#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>
Latest example works for me. Thank you for your help.