I have a tree panel whose nodes are loaded dynamically from the server. When the user expands a node, it will load the children for that node from the server and add them to that node. This part is working.
When the user collapses a node, I'd like to remove all the children from that node and "reset" the node so that it can be exanded again.
So far, I have the following in the collapse event handler:
function(node){
node.removeAll(); // remove all child nodes
// this causes the expand arrow to disappear
node.expandable = true;
// ... now what?
}
How do I "reset" the node (the "... now what?") so that the view knows to add the expand arrow back again?
Essentially I'd like the process of collapsing and then re-expanding a node to reload all of the children under that node.
The solution is to set the loaded field to false. The "expanded" attribute does not need to be changed.
The final solution is:
function(node){
node.removeAll(); // remove all child nodes
node.set('loaded', false); // tell node it can be expanded again
}
Related
I have used the below to rename the node but is their a way to avoid changing the position?
void rename(Node node, String newName) throws RepositoryException
{
node.getSession().move(node.getPath(), node.getParent().getPath() + "/" + newName);
node.getSession().save();
}
Nodes can be ordered if the parent node supports child node ordering. When you rename a node, you will need to move it back. Basically, get the parent node, ask for the child nodes, iterate over them until you find the node you want to come after this one, then call node.orderBefore(renamedNode, nextSibling).
I am using vue-cytoscape to render a graph and navigate through a tree-like data structure.
My goal is to expand parent nodes and keep their position in the graph. I would like to simply add the new children nodes.
My approach is to lock current nodes, add the children and unlock the nodes.
this.cy.nodes().lock()
for(let d of data){
this.cy.add(d)
}
this.cy.elements().layout(this.config.layout).run()
setTimeout(() => {this.cy.nodes().unlock()}, 2000) // Give some time for the layout to render before unlocking nodes.
The problem is that the layouts do not consider the locked state of the nodes. Only the new nodes are moved around, which is fine. But the layout is not respected. I am under the impression that the layout calculates a new position for all nodes, but then moves only nodes that are unlocked.
According to this GitHub issue, some layout algorithm should handle locked nodes. I am using the following layouts and none seem to consider locked nodes.
Cola
Fcose
Dagre
avsdf
grid
concentric
Please try calling the layout function only on the added nodes:
var eles = cy.add(data); // refer to http://js.cytoscape.org/#cy.add for adding nodes
eles.layout(this.config.layout).run();
If you don't want nodes to move when calling the layout function, you can exclude them from the rendering. While calling cy.add(), the function returns an object with every added element inside (see var eles = ... in the code).
I'm using cytoscape.js and cytoscape.js-expand-collapse to create dynamic hierarchies in my graph structure. I would like to be able to dynamically create a collapsed(merged) node that could potentially be expanded out, removed or possibly re-merged with additional nodes. I am having trouble whenever I call nodes.move({parent:null}). They become detached from the graph and I cannot re-attach them to a new parentNode. If I call restore on them I will see errors saying they already exist in the graph.
merge and unmerge by itself works fine in a simple case of no existing collapsed nodes. However calling merge on something that already contains a compound collapsed node breaks things. I would get the resulting merged node without the children of the previously collapsed merge candidate
Update #1 I've realized my problem was returning the wrong moved nodes. Calling .move on a collection returns a new set of nodes. so the unmerge should return those instead.
Update #2 cytoscape-expand-collapse utility does some internal book-keeping during the parent node collapse/expand by tucking away node data in 'originalEnds' data prop on the meta edges. so, if I'm now altering the graph dynamically by moving nodes in/out of parents these originalEnds pointers get out of sync causing infinite loops. I am doing some additional node tracking of my own as a workaround.
function merge(nodes){
//if one of the nodes is a compound itself, first uncollapse, then merge
var collapsed = nodes.filter(function(c){return typeof c.data('collapsedChildren')!=='undefined';});
if (collapsed.length>0) {
// for now just assume collapsed is a length of 1
var unmerged = unmerge(collapsed); //unmerged should be now the former collapsed children
nodes = nodes.subtract(collapsed).union(unmerged.nodes());
}
var parentNode = cy.add({group:'nodes', data: {id: parentID}});
nodes.move({parent: parentID});
collapseApi.collapse(parentNode);
return parentNode;
}
function unmerge(parentNode){
collapseApi.expand(parentNode);
var children = parentNode.children();
var moved = children.move({parent:null});
//at this point children become "detached" from the graph
// .removed() returns true, however, calling restore() logs an error and they are still technically in the graph
parentNode.remove();
return moved;
}
ele.move() has a more convenient implementation in cytoscape>=3.4: The elements are modified in-place instead of creating replacement elements.
Old code that uses the returned collection from ele.move() will still work. New code can be simplified by not having to use the returned collections at all.
Problem:
In the screenshot below, I have a node 300-9885-00X along with its TreeNodeCollection (in the red square). A little bit lower, we find the 300-9885-00X again, I want to insert the TreeNodeCollection that we found earlier, into that node ...
Background Information
I have a recursive program that goes through AutoCAD / SolidEdge assemblies. It opens the documents and prints the assemblies, and their children, and so on (recursively) ...
Green color means it is printed
Orange means it has already been printed before, so we don't need to print it again...
Question:
How do we insert an existing TreeNodeCollection into a TreeNode?
Knowing:
The location of the TreeNodeCollection
The location of the node in which I want to insert the collection into
The following variable TreeNodes contains my collection. Must I loop through the collection in order to add its text?
You can't add a TreeNodeCollection to a Node. You must loop through the TreeNodeCollection and add the nodes individually like so:
For j As Integer = 0 To TreeNodes.Count - 1
n.Nodes.Add(TreeNodes(j).Clone())
Next
Notice I used .Clone(). This is due to the insertion of an already existing node. You can't do that, you must either delete the existing one or clone it. In my case, I had to clone it.
// Get the '_NodesCollection' from the '_parentNode' TreeNode.
TreeNodeCollection _Nodes = _parentNode.FirstNode.Nodes;
// Create an array of 'TreeNodes'.
TreeNode[] Nodes = new TreeNode[_Nodes.Count];
// Copy the tree nodes to the 'Nodes' array.
_Nodes.CopyTo(Nodes, 0);
// Remove the First Node & Children from the ParentNode.
_parentNode.Nodes.Remove(_parentNode.FirstNode);
// Remove all the tree nodes from the '_parentNode' TreeView.
_parentNode.Nodes.Clear();
// Add the 'Nodes' Array to the '_parentNode' ParentNode.
_parentNode.Nodes.AddRange(Nodes);
// Add the Child Nodes to the TreeView Control
TvMap.Nodes.Add(_parentNode);
I am trying to add children tree nodes to a non-Root node dynamically when it's selected.
This is how I implemented it:
First, I populate my tree with a TreeStore then to dynamically add children tree nodes, I handle it on the itemexpand event in tree Controller.
//pThis is a NodeInterface obj of the selected node
itemexpand: function (pThis, pEOpts) {
//type is an attribute that I added so that I know what type of node that got selected
if (pThis.raw.type === 'Staff' && !pThis.hasChildNodes()) {
var staffNodeAry = [{text:"Teachers", type:"ChildStaff", leaf: false},
{text:"Principals", type:"ChildStaff", leaf: false}];
pThis.appendChild(staffNodeAry);
}
}
This worked quite good because I am able to see both "Teachers" and "Principals" node under "Staff" type but there are 2 issues that I found so far:
1) There's this error on the console:
Uncaught TypeError: Cannot read property 'internalId' of undefined
I don't know why but if anyone could enlighten that would be great.
2) When I expand either "Teachers" and "Principals", the NodeInterface obj that's returned by itemexpand has an undefined raw object.
So I couldn't do this: pThis.raw.type
From my understanding, I don't need to create a new TreeStore to add any new children nodes, I thought that by creating an array of objects that adhere to NodeInterface should be enough but I might be wrong.
If anyone could point me to the right direction, that would be great.
Handi
More info:
What I did was actually following the ExtJs 4 documentation so I believe this is a bug on ExtJs 4 framework.
I also tested this with Extjs-4.1.0-rc3 and it also produced the same error.
I have resolved this issue changing the event itemexpand with the event afteritemexpand. I have no documentation to justify this. The debugger says to me that the view listen for the itemexpand event and do something that goes wrong if add a node manually...
For the question number 2: you have no raw object because it is created by the reader of the store after the load operation. So if you add a node by hand the raw object does not exists.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Model-property-raw
The documentation for .appendChild() functions says:
node : Ext.data.NodeInterface/Ext.data.NodeInterface[]
The node or Array of nodes to append
And you are trying to append an array of 2 objects, but they are not "NodeInterface" instances. So you should create them properly like so:
var nodeToAppend1 = pThis.createNode({text:"Teachers", type:"ChildStaff", leaf: false});
pThis.appendChild(nodeToAppend1);
I remember making the same mistake a year ago, so I hope this helps.
I think it happens because your Ext.TreePanel working asyncroniously. So add process is:
Append Child, add virtual child leaf to your tree, with red mark in corner
Call store's create api
Receive response, if it success=true, change with virtual
The goal of changing is set internakId property, so you can add new child only after this change happens. I think better is write some recursive function and bind it to store's added event
tree.getStore().on('update', addChild);
or
tree.getStore().load({
success: function() {
addChild()
});