brainy-tree
is a Polymer 1.x data tree web component.
WIP! I'm still working on this and API may change significantly! Use this at your own risk. Any help, especially with tests, is strongly appreciated!
This is a fork of nuxeo-tree with a lot of changes regarding common UX patterns like adding and deleting nodes.
<brainy-tree data="[[data]]">
<template>
<span>[[prefix]] [[item.id]]:</span>
<b>[[item.name]]</b>
<!-- do not show remove icon for root node -->
<paper-icon-button icon="clear" hidden$="[[isRoot]]" on-tap="_onDeleteTap"></paper-icon-button>
<paper-icon-button icon="add" on-tap="_onAddTap"></paper-icon-button>
<!-- only show input for leaf nodes -->
<paper-input value="{{item.name}}" hidden$="[[!isLeaf]]"></paper-input>
</template>
</brainy-tree>
Tree node template is bound to template model of the following structure:
{
item: {}, // data for given node
isRoot: false, // true if node is a tree root
isLeaf: false, // true if node does not have children
isFirst: false, // true if node is a first child
isLast: false, // true if node is a last child
siblingsCount: 0 // count of nodes at the same level
}
For example, the live demo above uses the following data
object:
{
"name": "root",
"children": [
{
"name": "a",
"children": [
{
"name": "c",
"children": [
{ "name": "foo" },
{ "name": "bar", "children": [{ "name": "baz" }] }
]
}
]
},
{
"name": "b",
"children": [{ "name": "bee" }]
}
]
}
- The template represents the DOM to create for the nodes
- The
data
property specifies the model of a tree node - Branches are re-rendered on external
data
mutations - Tree node ID system based on depth and children count
brainy-tree
maintains node ID system based on depth and children count. Current behavior is mutating data
and setting id
property on each node. Initially I tried to maintain duplicate inner data structure in sync,
but this was a bit tricky. But I'm going to refactor this behavior later on, as well as add tests for element.