[Common UI] Encapsulate TreeNodeController

Reduce reliance on  from TreeNodeController,
clean up and better isolate node expansion behavior.
Part of transition of common UI elements, WTD-574.

bundles.json

@@ -3,6 +3,7 @@
     "platform/core",
     "platform/representation",
     "platform/commonUI/browse",
+    "platform/commonUI/edit",
     "platform/commonUI/dialog",
     "platform/commonUI/general",
 

platform/commonUI/general/res/templates/test.html

@@ -1,3 +0,0 @@
-<b>
-    <div style="width: 400px; border: 4px green solid; text-align:right;">{{model.name}}</div>
-</b>

platform/commonUI/general/res/templates/tree-item.html

@@ -1,7 +1,8 @@
 <span ng-controller="ToggleController as toggle">
-<span class="tree-item menus-to-left" ng-controller="TreeNodeController">
+    <span ng-controller="TreeNodeController as treeNode">
+        <span class="tree-item menus-to-left">
             <span class='ui-symbol view-control'
-          ng-click="toggle.toggle()"
+                  ng-click="toggle.toggle(); treeNode.setNodeObject(domainObject)"
                   ng-if="model.composition !== undefined">
                 {{toggle.isActive() ? "v" : ">"}}
             </span>
@@ -9,15 +10,19 @@
                                 mct-object="domainObject"
                                 parameters="parameters"
                                 ng-click="parameters.callback(domainObject)"
-                        ng-class="{selected: node.isSelected}">
+                                ng-class="{selected: treeNode.isNavigated()}">
             </mct-representation>
-</span>
+        </span>
-<span class="tree-item-subtree"
+        <span class="tree-item-subtree"
               ng-show="toggle.isActive()"
               ng-if="model.composition !== undefined">
+
+            ID: {{treeNode.getNodeObject().getId()}}?
             <mct-representation key="'tree'"
                                 parameters="parameters"
-                        mct-object="node.domainObject">
+                                mct-object="treeNode.getNodeObject()">
             </mct-representation>
-</span>
+
+        </span>
+    </span>
 </span>

platform/commonUI/general/src/TreeNodeController.js

@@ -13,7 +13,9 @@ define(
          * @constructor
          */
         function TreeNodeController($scope, navigationService) {
-            var navigatedObject = navigationService.getNavigation();
+            var navigatedObject = navigationService.getNavigation(),
+                isNavigated = false,
+                expandedObject;
 
             function idsEqual(objA, objB) {
                 return objA && objB && (objA.getId() === objB.getId());
@@ -58,14 +60,16 @@ define(
             function checkNavigation() {
                 var nodeObject = $scope.domainObject;
 
-                $scope.node.isSelected =
+                isNavigated =
                     idsEqual(nodeObject, navigatedObject) &&
                             idsEqual(parentOf(nodeObject), parentOf(navigatedObject));
+
                 // Expand if necessary
-                if (!$scope.node.expanded &&
+                if (isOnNavigationPath(nodeObject, navigatedObject) &&
-                        isOnNavigationPath(nodeObject, navigatedObject) &&
+                        $scope.toggle !== undefined &&
-                        $scope.toggle !== undefined) {
+                        $scope.toggle.isActive()) {
                     $scope.toggle.toggle();
+                    expandedObject = nodeObject;
                 }
             }
 
@@ -74,25 +78,23 @@ define(
                 checkNavigation();
             }
 
-            // When the node is expanded, set "node.domainObject" in
-            // the scope; this is used to populate the subtree, which
-            // should only happen when first expanded (lazy loading)
-            function doExpand(state) {
-                if (state) {
-                    $scope.node.domainObject = $scope.domainObject;
-                }
-            }
-
-            // Set up a little namespace for tree node properties
-            $scope.node = {};
-
             navigationService.addListener(setNavigation);
             $scope.$on("$destroy", function () {
                 navigationService.removeListener(setNavigation);
             });
             $scope.$watch("domainObject", checkNavigation);
-            $scope.$watch("toggle.isActive()", doExpand);
 
+            return {
+                setNodeObject: function (domainObject) {
+                    expandedObject = domainObject;
+                },
+                getNodeObject: function () {
+                    return expandedObject;
+                },
+                isNavigated: function () {
+                    return isNavigated;
+                }
+            };
         }
 
         return TreeNodeController;