Hello Walter, based on the previous example, how can I print the path of a node in the console when I double-click on the node? That is, if I take item 11 as an example, by double-clicking on it, it would print something like [item 0].[item 1].[item 3].[item 7].[item 11].
I suggest that you call Node.findTreeParentChain. Node | GoJS API
For example, something like:
node.findTreeParentChain().toArray()
.filter(part => part instanceof go.Node) // ignore Links
.reverse() // from root to node
.map(node => node.data.text) // just show some text for each node
.join(" -- ") // separate the text
might produce: “0 – 2 – 4 – 11” (I can’t tell what the keys for that partially collapsed tree would actually be to node 11, which I don’t even see in that thumbnail.)
Perhaps you’ll find this sample useful: Highlight Chains
Hi Walter, I try the next code:
` diagram.nodeTemplate = new go.Node({
// no Adornment: instead change panel background color by binding to Node.isSelected
selectionAdorned: false,
// a custom function to allow expanding/collapsing on double-click
// this uses similar logic to a TreeExpanderButton
doubleClick: (e, node) => {
var cmd = diagram.commandHandler;
if (node.isTreeExpanded) {
if (!cmd.canCollapseTree(node)) return;
} else {
if (!cmd.canExpandTree(node)) return;
}
e.handled = true;
if (node.isTreeExpanded) {
cmd.collapseTree(node);
} else {
cmd.expandTree(node);
}
const nodePath = "[" + node.findTreeParentChain()
.toArray()
.filter(part => part instanceof go.Node) // Ignore links
.reverse() // from root to node
.map(parentNode => parentNode.data.text || parentNode.data.key)
.join("].[") + "]";
console.log(`Path of node: ${nodePath}`);`
The code works when I double-click on the parent nodes, and it writes to the console, but when I double-click on the child nodes, it doesn’t work.
I tried using findTreeChildrenNodes and findTreeParentNode, but I was unsuccessful. As you can see in the console log: tree-view.vue:100 Uncaught TypeError: node.findTreeChildrenNodes(…).toArray is not a function
at doubleClick (.
here the complete code:
diagram.nodeTemplate = new go.Node({
// no Adornment: instead change panel background color by binding to Node.isSelected
selectionAdorned: false,
// a custom function to allow expanding/collapsing on double-click
// this uses similar logic to a TreeExpanderButton
doubleClick: (e, node) => {
var cmd = diagram.commandHandler;
if (node.isTreeExpanded) {
if (!cmd.canCollapseTree(node)) return;
} else {
if (!cmd.canExpandTree(node)) return;
}
e.handled = true;
if (node.isTreeExpanded) {
cmd.collapseTree(node);
} else {
cmd.expandTree(node);
}
const nodePath = "[" + node.findTreeParentChain()
.toArray()
.filter(part => part instanceof go.Node) // Ignore links
.reverse() // from root to node
.map(parentNode => parentNode.data.text || parentNode.data.key)
.join("].[") + "]";
console.log(`Path of node: ${nodePath}`);
// Extra: muestra los hijos del nodo si existen
const children = node.findTreeChildrenNodes().toArray();
if (children.length > 0) {
console.log('children', children)
const childrenPaths = children.map(child => child.data.text || child.data.key).join(", ");
console.log(`Hijos de este nodo: ${childrenPaths}`);
}
const parentNode = node.findTreeParentNode();
if (parentNode) {
console.log(`El nodo padre es: ${parentNode.data.text}`);
} else {
console.log('Este nodo es la raíz, no tiene padre.');
}
}
})
I appreciate your help. The idea is to print the path either on double-click or right-click, possibly the latter so it doesn’t interfere with the double-click that collapses the tree, for both parent and child nodes.
The code that you added won’t get called on leaf nodes because they cannot be expanded or collapsed.
Node.findTreeParentChain returns a go.Set, which has a Set.toArray method. Iterators do not have that method.
const children = new go.List(node.findTreeChildrenNodes()).toArray();
if (children.length > 0) {
console.log('children', children)
const childrenPaths = children.map(child => child.data.text || child.data.key).join(", ");
console.log(`Hijos de este nodo: ${childrenPaths}`);
}
How can I make it work for both child and parent nodes on double-click or right-click, regardless of whether the nodes can be expanded or collapsed?
You had added that code after the code checking to see if it could expand or collapse the node.
doubleClick: (e, node) => {
var cmd = diagram.commandHandler;
if (node.isTreeExpanded) {
if (!cmd.canCollapseTree(node)) return;
} else {
if (!cmd.canExpandTree(node)) return;
}
e.handled = true;
if (node.isTreeExpanded) {
cmd.collapseTree(node);
} else {
cmd.expandTree(node);
}
const nodePath =
"[" +
node
.findTreeParentChain()
.toArray()
.filter((part) => part instanceof go.Node) // Ignore links
.reverse() // from root to node
.map((parentNode) => parentNode.data.text || parentNode.data.key)
.join("].[") +
"]";
console.log(`Path of node: ${nodePath}`);
// Extra: muestra los hijos del nodo si existen
const children = new go.List(node.findTreeChildrenNodes()).toArray();
if (children.length > 0) {
const childrenPaths = children
.map((child) => child.data.text || child.data.key)
.join(", ");
console.log(`Hijos de este nodo: ${childrenPaths}`);
}
},
The problem is that I actually need the complete paths of both child and parent nodes on double click or right click. Can you help me achieve that, please?
I don’t understand – for any parent node there could be many paths to children, and even more to other possible descendants such as grandchildren and great-grandchildren etc.
for example if I click on item 14 the path would be [0].[1].[7].[9].[14]
Doesn’t the code that I provided, and that you adapted, do that already?
Yes, thank you, Walter. The thing is, I didn’t notice it because of the command handler for expanding or collapsing the nodes on double-click. Once I removed that functionality, I noticed that it logged to the console on double-click for both parent and child nodes.