Demo and API docs

<brainy-tree>

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>

Template model

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:

data.json

{
  "name": "root",
  "children": [
    {
      "name": "a",
      "children": [
        {
          "name": "c",
          "children": [
            { "name": "foo" },
            { "name": "bar", "children": [{ "name": "baz" }] }
          ]
        }
      ]
    },
    {
      "name": "b",
      "children": [{ "name": "bee" }]
    }
  ]
}

Features

• 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

Warning

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.