using programatic selection/styling (keyboard support)

Author: Aarondorn2

addon/components/x-tree-node.js

@@ -1,20 +1,29 @@
 import Component from '@ember/component';
+import { computed }  from '@ember/object';
 import layout from '../templates/components/x-tree-node';
 
 export default Component.extend({
   layout,
-  classNameBindings: ['model.isSelected:tree-highlight'],
+  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;
+  }),
 
   click() {
     this.attrs.select(this.get('model'));
   },
-
   mouseEnter() {
+    this.set('model.isSelected', true);
     let hover = this.get('hover');
     if (hover) {
       hover(this.get('model'));
     }
   },
+  mouseLeave() {
+    this.set('model.isSelected', false);
+  },
 
   actions: {
     toggleCheck() {

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

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

addon/templates/components/x-tree.hbs

@@ -3,7 +3,7 @@
     {{#if hasBlock}}
       {{yield child}}
     {{else}}
-      {{x-tree-children model=child select=select hover=hover}}
+      {{x-tree-children model=child select=select hover=hover chosenId=chosenId}}
     {{/if}}
   {{/if}}
 {{/each}}