support init with a wrapper class that isn't recursed; various minor fixes

Author: Aarondorn2

README.md

@@ -24,8 +24,21 @@ Basic example:
 
 Returns: `node`
 
-Fired when a node is hovered.
+Fired when a mouse enters the node.
 
+```handlebars
+{{x-tree model=tree hover=(action hover)}}
+```
+
+#### hoverOut
+
+Returns: `node`
+
+Fired when a mouse leaves the node.
+
+```handlebars
+{{x-tree model=tree hoverOut=(action hoverOut)}}
+```
 
 #### select
 
@@ -47,7 +60,35 @@ Accepts: `boolean`
 ```
 
 Displays a checkbox for each node.
-Use in conjunction with `isChecked`.
+Use in conjunction with `model.isChecked`.
+
+#### chosenId
+
+Default: `undefined`
+
+Accepts: `id`
+
+```handlebars
+{{x-tree model=tree chosenId=someId}}
+```
+
+Applies 'chosen' styling (`font-weight: bold;`) to the specified node.
+A tree will also auto-expand to a the chosen node if a valid `chosenId` is provided.
+`chosenId` should relate to a node's `model.id`.
+
+#### expandDepth
+
+Default: `0`
+
+Accepts: `number`
+
+```handlebars
+{{x-tree model=tree expandDepth=-1}}
+```
+
+Expands the tree to a given depth.  
+`0` will not expand the tree at all, a negative number will fully expand a tree, a positive number will expand a tree to the given depth.
+
 
 ### Blocks
 
@@ -105,7 +146,7 @@ The model requires specific properties to properly function:
  - `isVisible` - `boolean` used to display or hide a node
 
 ```js
-{
+[{
   id: 0,
   name: 'Root',
   isExpanded: true,
@@ -138,5 +179,7 @@ The model requires specific properties to properly function:
       ]
     }
   ]
-}
+}]
 ```
+
+A utility class is provided to convert a flat structure into a tree structure and vice-versa.

addon/components/x-tree-branch.js

@@ -0,0 +1,8 @@
+import Component from '@ember/component';
+import layout from '../templates/components/x-tree-branch';
+
+export default Component.extend({
+  layout,
+  tagName: 'ul',
+  classNames: ['tree-branch']
+});

addon/components/x-tree-node.js

@@ -7,12 +7,14 @@ export default Component.extend({
   classNameBindings: ['model.isSelected:tree-highlight', 'isChosen:tree-chosen'],
 
   isChosen: computed('model.id', 'chosenId', function() {
-    let chosenId = this.get('chosenId');
-    return chosenId ? this.get('model.id') === chosenId : false;
+    return this.get('model.id') === this.get('chosenId');
   }),
 
   click() {
-    this.attrs.select(this.get('model'));
+    let select = this.get('select');
+    if (select) {
+      select(this.get('model'));
+    }
   },
   mouseEnter() {
     this.set('model.isSelected', true);
@@ -23,6 +25,10 @@ export default Component.extend({
   },
   mouseLeave() {
     this.set('model.isSelected', false);
+    let hoverOut = this.get('hoverOut');
+    if (hoverOut) {
+      hoverOut(this.get('model'));
+    }
   },
 
   actions: {

addon/components/x-tree.js

@@ -1,10 +1,32 @@
 import Component from '@ember/component';
-import { computed }  from '@ember/object';
-import { isEmpty }  from '@ember/utils';
 import layout from '../templates/components/x-tree';
+import { getDescendents, getAncestors, getParent } from '../utils/tree';
+import { get, set }  from '@ember/object';
 
 export default Component.extend({
   layout,
-  tagName: 'ul',
-  classNames: ['tree-branch']
+
+  init() {
+    this._super(...arguments);
+    let tree = this.get('model');
+
+    // Make sure chosen item is highlighted and expanded-to in the tree
+    let chosenId = this.get('chosenId');
+    if (chosenId) {
+      let chosen = getDescendents(tree).findBy('id', chosenId);
+      if (chosen) {
+        getAncestors(tree, chosen).forEach(x => {
+          if (get(x, 'id') !== chosenId) {
+            set(x, 'isExpanded', true);
+          }
+        });
+      }
+    }
+
+    // Expand to given depth
+    let expandDepth = this.get('expandDepth');
+    if (expandDepth) {
+      getDescendents(tree, expandDepth).setEach('isExpanded', true);
+    }
+  }
 });

addon/styles/x-tree.css

@@ -30,3 +30,7 @@
   color: #333;
   cursor: pointer;
 }
+
+.tree-node .tree-chosen {
+  font-weight: bold;
+}

addon/templates/components/x-tree-branch.hbs

@@ -0,0 +1,15 @@
+{{#each model as |child|}}
+  {{#if child.isVisible}}
+    {{#if hasBlock}}
+      {{yield child}}
+    {{else}}
+      {{x-tree-children
+        model=child
+        select=select
+        hover=hover
+        hoverOut=hoverOut
+        checkable=checkable
+        chosenId=chosenId}}
+    {{/if}}
+  {{/if}}
+{{/each}}

addon/templates/components/x-tree-children.hbs

@@ -1,5 +1,17 @@
-{{x-tree-node model=model select=select hover=hover chosenId=chosenId}}
+{{x-tree-node
+  model=model
+  select=select
+  hover=hover
+  hoverOut=hoverOut
+  checkable=checkable
+  chosenId=chosenId}}
 
 {{#if model.isExpanded}}
-  {{x-tree model=model.children select=select hover=hover chosenId=chosenId}}
+  {{x-tree-branch
+    model=model.children
+    select=select
+    hover=hover
+    hoverOut=hoverOut
+    checkable=checkable
+    chosenId=chosenId}}
 {{/if}}

addon/templates/components/x-tree-node.hbs

@@ -1,7 +1,7 @@
 {{#if hasBlock}}
   {{yield}}
 {{else}}
-  {{#if model.checkable}}
+  {{#if checkable}}
     <input type="checkbox" checked={{model.isChecked}}
       onclick={{action 'toggleCheck' bubbles=false}}>
   {{/if}}

addon/templates/components/x-tree.hbs

@@ -1,9 +1,19 @@
-{{#each model as |child|}}
-  {{#if child.isVisible}}
-    {{#if hasBlock}}
-      {{yield child}}
-    {{else}}
-      {{x-tree-children model=child select=select hover=hover chosenId=chosenId}}
-    {{/if}}
-  {{/if}}
-{{/each}}
+{{#if hasBlock}}
+  {{#x-tree-branch
+    model=model
+    select=select
+    hover=hover
+    hoverOut=hoverOut
+    checkable=checkable
+    chosenId=chosenId}}
+    {{yield}}
+  {{/x-tree-branch}}
+{{else}}
+  {{x-tree-branch
+    model=model
+    select=select
+    hover=hover
+    hoverOut=hoverOut
+    checkable=checkable
+    chosenId=chosenId}}
+{{/if}}

addon/utils/tree.js

@@ -1,7 +1,6 @@
 import { A } from '@ember/array';
-import { get } from '@ember/object';
-import { isPresent, isEmpty } from '@ember/utils';
-import ObjectProxy from '@ember/object/proxy';
+import { get, set } from '@ember/object';
+import { isEmpty } from '@ember/utils';
 
 /* Build a tree (nested objects) from a plain array
  * using `id` and `parentId` as references for the
@@ -18,38 +17,24 @@ export function buildTree(model, options) {
     return roots;
   }
 
-  let element = model[0] || get(model, 'firstObject');
-  if (typeof element !== 'object') {
-    // Not a model of objects, hence it should be a flat list
-    return buildFlatList(model);
-  }
-
-  // Add all nodes to tree
+  // Set defaults and add all nodes to tree
   model.forEach(node => {
-    let child = {
-      content: node,
-      children: A(),
-      isSelected: false,
-      isVisible: true
-    };
-
     // Alternative name for `id`
     if (options.valueKey) {
-      child.id = get(node, options.valueKey);
+      set(node, 'id', get(node, options.valueKey));
     }
 
     // Alternative name for `name`
     if (options.labelKey) {
-      child.name = get(node, options.labelKey);
+      set(node, 'name', get(node, options.labelKey));
     }
 
-    // Decide if node is expanded
-    if (isPresent(options.isExpanded)) {
-      child.isExpanded = options.isExpanded;
-    }
+    // Defaults
+    set(node, 'children', A());
+    set(node, 'isVisible', get(node, 'isVisible') || true);
+    set(node, 'isExpanded', get(node, 'isExpanded') || false);
 
-    // Proxy options to keep model intact
-    tree[get(child, 'id')] = ObjectProxy.create(child);
+    tree[get(node, 'id')] = node;
   });
 
   // Connect all children to their parent
@@ -58,35 +43,59 @@ export function buildTree(model, options) {
     let parent = get(node, 'parentId');
 
     if (isEmpty(parent)) {
-      roots.push(child);
+      roots.pushObject(child);
     } else {
-      tree[parent].children.push(child);
+      get(tree[parent], 'children').pushObject(child);
     }
   });
 
   return roots;
 }
 
-// Builds a list of proxies from a model of values
-export function buildFlatList(model) {
-  let list = model.map(node => ObjectProxy.create({
-    content: node,
-    id: node,
-    name: node,
-    isSelected: false,
-    isVisible: true
-  }));
-
-  return A(list);
+// Gets all descendents of a tree (array)
+// Returns a flat list of all descenents, including the top level of the tree
+export function getDescendents(tree, depth = -1) {
+  let descendents = A();
+
+  if (depth < 0) { // Unlimited depth
+    tree.forEach(node => {
+      descendents.pushObject(node);
+      descendents.pushObjects(getDescendents(node.children));
+    });
+  } else if (depth > 0) {
+    tree.forEach(node => {
+      descendents.pushObject(node);
+      descendents.pushObjects(getDescendents(node.children, depth - 1));
+    });
+  }
+
+  return descendents;
 }
 
-export function getDescendents(tree) {
-  let descendents = A();
+// Gets all ancestors of a childNode given a tree (array)
+// Returns a flat list of ancestors, including the childNode
+export function getAncestors(tree, childNode) {
+  let ancestors = A();
+  let childId = childNode.get('id');
 
   tree.forEach(node => {
-    descendents.pushObject(node);
-    descendents.pushObjects(getDescendents(node.children));
+    if (!ancestors.isAny('id', childId)) {
+      if (node.id === childId) {
+        ancestors.pushObject(node);
+      } else if (node.children.length > 0) {
+        ancestors.pushObjects(getAncestors(node.children, childNode));
+        if (ancestors.length > 0) {
+          ancestors.pushObject(node);
+        }
+      }
+    }
   });
 
-  return descendents;
+  return ancestors;
 }
+
+// Gets the direct parent of a childNode given a flat list
+// Returns single object (parent) or undefined
+export function getParent(list, childNode) {
+  return list.find(x => x.children.find(y => y.id === childNode.get('id')));
+}