Fully featured tree structure without superfluous needs.
The "bb" in bb-tree-model is pronounced "B flat", like in music.
npm install bb-tree-modelimport { TreeNode } from 'bb-tree-model';or, the short way:
import { TN } from 'bb-tree-model';TN is an alias for TreeNode. If you decide to use TN instead of TreeNode, you should use is consistently.
API is available in docs format here
Complete walkthrough:
import { TN } from "bb-tree-model"Let's first create a tree, using the appendChildren method:
let root = new TN().appendChildren(
new TN().appendChildren(
new TN(),
new TN(),
),
new TN(),
)This method of initializing a tree has the advantage of easily showing the structure.
Now let's print it to the console:
root.print();
/**
tree-node
├tree-node
│ ├tree-node
│ └tree-node
└tree-node
*/Well that's already something! But we can do better. Let's add some more children.
const newChild1 = new TN(root);
const newChild2 = new TN(root);
root.print();
/**
tree-node
├tree-node
│ ├tree-node
│ └tree-node
├tree-node
├tree-node
└tree-node
*/But wait! There's no appendChildren here.
That's right, the parent was specified in the children's constructor, so there was no need for it.
Ok. Now let's see navigate through the tree. If you've ever used tree structures, you probably know some tree traversal algorithms like breadth-first or depth-first. Let's try them.
With bb, the breadth-first algorithm is implemented in the traverse method.
root.traverse((child) => {
console.log(child.toString);
});
/**
tree-node
tree-node
tree-node
tree-node
tree-node
tree-node
*/hmmm... Interesting. how could we make this better?
let's override the TreeNode class...
class MyRootNode extends TN {
public get toString(): string {
return 'I am the root component!'
}
}
class MyBranchNode extends TN {
public get toString(): string {
return 'beware of branches'
}
}... and use it in a tree
root = new MyRootNode().appendChildren(
new MyBranchNode().appendChildren(
new TN(),
new TN(),
),
new MyBranchNode(),
)
root.print();
/**
I am the root component!
├beware of branches
│ ├tree-node
│ └tree-node
└beware of branches
*/Well that looks better. We can try to breadth-first again now.
root.traverse((child) => {
console.log(child.toString)
})
/*
I am the root component!
beware of branches
beware of branches
tree-node
tree-node
*/Great! what about depth-first? It's called walk in bb.
root.walk((child) => {
console.log(child.toString)
})
/*
I am the root component!
beware of branches
tree-node
tree-node
beware of branches
*/Wonderful, isn't it?
Explore the docs
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent