[Tree] Begin handling selection state

platform/commonUI/general/src/ui/ToggleView.js

@@ -30,11 +30,11 @@ define([
         this.callbacks = [];
         this.el = $(toggleTemplate);
         this.el.on('click', function () {
-            this.model(!this.expanded);
+            this.value(!this.expanded);
         }.bind(this));
     }
 
-    ToggleView.prototype.model = function (state) {
+    ToggleView.prototype.value = function (state) {
         this.expanded = state;
 
         if (state) {

platform/commonUI/general/src/ui/TreeNodeView.js

@@ -76,6 +76,36 @@ define([
         }
     };
 
+    TreeNodeView.prototype.value = function (domainObject) {
+        var activeIdPath = getIdPath(this.activeObject),
+            selectedIdPath = getIdPath(domainObject);
+
+        if (this.onSelectionPath) {
+            this.li.find('.tree-item').eq(0).removeClass('selected');
+            if (this.subtreeView) {
+                this.subtreeView.value(undefined);
+            }
+        }
+
+        this.onSelectionPath =
+            !!domainObject &&
+            !!this.activeObject &&
+            (activeIdPath.length <= selectedIdPath.length) &&
+                activeIdPath.every(function (id, index) {
+                    return selectedIdPath[index] === id;
+                });
+
+        if (this.onSelectionPath) {
+            if (activeIdPath.length === selectedIdPath.length) {
+                this.li.find('.tree-item').eq(0).addClass('selected');
+            } else {
+                // Expand to reveal the selection
+                this.toggleView.value(true);
+                this.subtreeView.value(domainObject);
+            }
+        }
+    };
+
     /**
      *
      * @returns {HTMLElement[]}
@@ -86,4 +116,4 @@ define([
 
 
     return TreeNodeView;
-});
+});

platform/commonUI/general/src/ui/TreeView.js

@@ -30,6 +30,7 @@ define([
     function TreeView() {
         this.ul = $('<ul class="tree"></ul>');
         this.nodeViews = [];
+        this.callbacks = [];
     }
 
     function newTreeView() {
@@ -62,6 +63,7 @@ define([
             if (domainObject === self.activeObject) {
                 self.setSize(domainObjects.length);
                 domainObjects.forEach(addNode);
+                self.updateNodeViewSelection();
             }
         }
 
@@ -87,6 +89,20 @@ define([
         }
     };
 
+    TreeView.prototype.updateNodeViewSelection = function () {
+        this.nodeViews.forEach(function (nodeView) {
+            nodeView.value(this.selectedObject);
+        });
+    };
+
+    TreeView.prototype.value = function (domainObject) {
+        this.selectedObject = domainObject;
+        this.updateNodeViewSelection();
+        this.callbacks.forEach(function (callback) {
+            callback(domainObject);
+        });
+    };
+
     /**
      *
      * @returns {HTMLElement[]}
@@ -97,4 +113,4 @@ define([
 
 
     return TreeView;
-});
+});