Skip to content

Tree API#

TL;DR

Wunderbaum offers an extensive, object oriented API.

Warning

This chapter is still under construction.

See also

See also the API Reference.

This chapter describes different ways to modify the tree model using the API.

Iteration#

There are two ways to traverse the tree depth-first, pre-order:

for (const node of tree) {
  node.log();
}

tree.visit((node) => {
  node.log();
});

Both are 'fast enough' for most use cases, but the latter is slightly faster.

visit() also allows to break or skip nodes by returning a special value:

tree.visit((node) => {
  if (node.isSelected()) {
    return "skip"; // skip selected nodes and their children
  }
  if (node.title === "foo") {
    return false; // stop iteration
  }
});

Iteration is also available for subnodes:

for(const node of parentNode) {
  ...
}
parentNode.visit((node) => {
  ...
});

Related Methods

Searching#

See Search and Filter Nodes.

Selection#

See Search and Filter Nodes.

Sorting#

See Search and Filter Nodes.

Mutation#

Adding Nodes#

Removing Nodes#

Moving Nodes#

Changing Node Properties#

Changing Node State#

Changing Node Data#

Changing Node Style#

Changing Node Class#

Changing Node Attributes#

Changing Node Icons#

Changing Node Badge#

Changing Node Badge Colors#

  • node.moveTo()
  • node.setExpanded()
  • node.setSelected()
  • tree.applyCommand()

Utility Methods#

The Module util provides a number of utility methods that are useful when working with trees.

Performance Tips#

Use tree.runWithDeferredUpdate() to avoid multiple updates while changing many nodes at once.

tree.runWithDeferredUpdate(() => {
  tree.visit((node) => {
    node.setSelected(true);
  });
});