Convert hierarchical tree structure to flat structure. With a flat structure, it allows you to scroll a large tree easily with virtualization.
Check out infinite-tree to see how it integrated with FlatTree.
npm install --save flattreeGiven a hierarchical tree structure like this, you can build a tree in any form. For example:
File: examples/test1.js
<root>: path=".0", parent="", children=2, total=11, depth=0, prefix="0", open=1, lastChild=1
Alpha: path=".0.0", parent=".0", children=0, total=0, depth=1, prefix="00", open=0, lastChild=0
Bravo: path=".0.1", parent=".0", children=3, total=9, depth=1, prefix="00", open=1, lastChild=1
Charlie: path=".0.1.0", parent=".0.1", children=2, total=4, depth=2, prefix="000", open=1, lastChild=0
Delta: path=".0.1.0.0", parent=".0.1.0", children=2, total=2, depth=3, prefix="0001", open=1, lastChild=0
Echo: path=".0.1.0.0.0", parent=".0.1.0.0", children=0, total=0, depth=4, prefix="00011", open=0, lastChild=0
Foxtrot: path=".0.1.0.0.1", parent=".0.1.0.0", children=0, total=0, depth=4, prefix="00011", open=0, lastChild=1
Golf: path=".0.1.0.1", parent=".0.1.0", children=0, total=0, depth=3, prefix="0001", open=0, lastChild=1
Hotel: path=".0.1.1", parent=".0.1", children=1, total=2, depth=2, prefix="000", open=1, lastChild=0
India: path=".0.1.1.0", parent=".0.1.1", children=1, total=1, depth=3, prefix="0001", open=1, lastChild=1
Juliet: path=".0.1.1.0.0", parent=".0.1.1.0", children=0, total=0, depth=4, prefix="00010", open=0, lastChild=1
Kilo: path=".0.1.2", parent=".0.1", children=0, total=0, depth=2, prefix="000", open=0, lastChild=1
File: examples/test2.js
<root> (.0)
├── Alpha (.0.0)
└─┬ Bravo (.0.1)
├─┬ Charlie (.0.1.0)
| ├─┬ Delta (.0.1.0.0)
| | ├── Echo (.0.1.0.0.0)
| | └── Foxtrot (.0.1.0.0.1)
| └── Golf (.0.1.0.1)
├─┬ Hotel (.0.1.1)
| └─┬ India (.0.1.1.0)
| └── Juliet (.0.1.1.0.0)
└── Kilo (.0.1.2)
File: examples/test3.js
- <root> (.0)
Alpha (.0.0)
- Bravo (.0.1)
- Charlie (.0.1.0)
+ Delta (.0.1.0.0)
Golf (.0.1.0.1)
- Hotel (.0.1.1)
- India (.0.1.1.0)
Juliet (.0.1.1.0.0)
Kilo (.0.1.2)
File: examples/test4.js
Alpha (.0)
- Bravo (.1)
- Charlie (.1.0)
+ Delta (.1.0.0)
Golf (.1.0.1)
- Hotel (.1.1)
- India (.1.1.0)
Juliet (.1.1.0.0)
Kilo (.1.2)
var flatten = require('flattree').flatten;
var tree = { // tree can either be object or array
id: 'fruit',
label: 'Fruit',
children: [
{ id: 'apple', label: 'Apple' },
{ id: 'banana', label: 'Banana', children: [{ id: 'cherry', label: 'Cherry' }] }
]
};
flatten(tree, {
openNodes: ['fruit', 'banana'],
openAllNodes: false, // Defaults to false
throwOnEerror: false // Defaults to false
});
// → [Node { id: 'fruit', ...}, Node { id: 'apple', ...}, Node { id: 'banana', ...}, Node { id: 'cherry', ...}]This demostrates how to open a node and rebuild the tree:
var _ = require('lodash');
var flatten = require('flattree').flatten;
// Create the list
var nodes = flatten(require('./test/fixtures/tree.json'));
// → [Node { id: 'fruit', ...}]
// Find the first node with an id attribute that equals to 'fruit'
var index = _.findIndex(nodes, { 'id': 'fruit' });
var node = nodes[index];
var siblingNodes = flatten(node.children, { openNodes: ['fruit'] });
// Insert an array inside another array
nodes.splice.apply(nodes, [index + 1, 0].concat(siblingNodes));
console.log(nodes);
// → [Node { id: 'fruit', ...}, Node { id: 'apple', ...}, Node { id: 'banana', ...}]This demostrates how to close a node and rebuild the tree:
var _ = require('lodash');
var flatten = require('flattree').flatten;
// Create the list
var nodes = flatten(require('./test/fixtures/tree.json'), { openAllNodes: true });
// → [Node { id: 'fruit', ...}, Node { id: 'apple', ...}, Node { id: 'banana', ...}, Node { id: 'cherry', ...}]
// Find the first node with an id attribute that equals to 'banana'
var index = _.findIndex(nodes, { 'id': 'banana' });
var node = nodes[index];
var deleteCount = node.state.total;
// Traversing up through ancestors to subtract node.state.total
var p = node;
while (p) {
p.state.total = (p.state.total - deleteCount);
p = p.parent;
}
// Remove elements from an array
nodes.splice(index + 1, deleteCount);
console.log(nodes);
// → [Node { id: 'fruit', ...}, Node { id: 'apple', ...}, Node { id: 'banana', ...}]https://github.com/cheton/flattree/wiki/API
Copyright (c) 2016 Cheton Wu
Licensed under the MIT License.
