I have a large diagram containing roughly 1100 nodes in it.
I am trying to implement two features for the users, to expand all nodes and collapse all nodes.
the expand all nodes work as expected, the code is below:
function expandNodes(){
//load();
var nodes = myDiagram.nodes;
var model = myDiagram.model;
myDiagram.startTransaction(“expandNodes”);
while(nodes.next()){
var node = nodes.value;
var data = node.data;
if(node.data.key > 0){
node.expandTree(10000);
data.everExpanded = true;
model.setDataProperty(data, “everExpanded”, true);//set the expanded property of the model data to true
node.isTreeExpanded = true;
}
}
myDiagram.commitTransaction(“expandNodes”);
save();
myDiagram.alignDocument(go.Spot.TopCenter, go.Spot.TopCenter);
}
the collapse nodes works as well but not entirely as expected, code is below:
function collapseNodesCheckbox(){
//load();
var nodes = myDiagram.nodes;
var model = myDiagram.model;
myDiagram.startTransaction(“collapseNodes”);
while(nodes.next()){
var node = nodes.value;
var data = node.data;
if(node.data.key > 0){
node.collapseTree(10000);
data.everExpanded = false;
model.setDataProperty(data, “everExpanded”, false);//set the expanded property of the model data to true
node.isTreeExpanded = false;
}
}
myDiagram.commitTransaction(“collapseNodes”);
save();
myDiagram.alignDocument(go.Spot.TopCenter, go.Spot.TopCenter);
}
NOTE: in both functions, the data property “everExpanded” is a property w/in the json elements to show if the node is expanded or collapsed.
the problem that i am encountering is when a user either expands all OR expands a few nodes and then selects the “collapse all” and then begins to expand from the parent node, the nodes and children that were expanded prior are again expanded.
i.e. when “expand all” and then “collapse all” the user expands the root parent, all nodes expand
or when expanding a few nodes using the expand button, and then “collapse all” and begins to expand nodes, the nodes and children that were expanded prior are again expanded.
the code for the expand/collapse button and save() functions is below:
GO(“TreeExpanderButton”, {
alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top,
click: function(e,obj){
var node = obj.part;
if (node === null) return;
e.handled = true;
var data = node.data;
var model = myDiagram.model;
myDiagram.startTransaction(“updateEverExpanded”);
if(data.everExpanded == false){
model.setDataProperty(data, “everExpanded”, true);
var children = node.findTreeChildrenNodes();
if(children.count === 0){
obj.visible = false;
}
}else{
model.setDataProperty(data, “everExpanded”, false);
}
//node.isTreeExpanded = !node.isTreeExpanded;
myDiagram.commitTransaction(“updateEverExpanded”);
save();
}//end function
})//end expander button
function save() {
var str = myDiagram.model.toJson();
document.getElementById(“mySavedModel”).value = str;
myDiagram.isModified = false;
}