[Tree] Add additional api methods

Add methods to tree view via scope for more fine grained control.

Can supply a "allowSelection" function which should return true
if a given selection is allowed.  This is executed before a node
is selected and allows you to prevent selection.  Before this, if
you wanted to prevent the selection from changing, you had to wait
for it to change and then change it back to the original value.

Can also supply an "onSelection" function which is called when a
value is successfully selected.  This allows you to handle the
selection event without waiting for digest.  You can still $watch
"selectedObject" if you prefer.

Additionally, this changes the tree node to trigger a digest only
when the value is set via a MouseClick, instead of every time.

Tidies up directive scope bindings to clarify usage.

https://github.com/nasa/openmct/issues/1360

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

@@ -19,6 +19,9 @@
  this source code distribution or the Licensing information page available
  at runtime from the About dialog for additional information.
 -->
-<mct-tree mct-object="domainObject" mct-model="ngModel.selectedObject">
+<mct-tree root-object="domainObject"
+    selected-object="ngModel.selectedObject"
+    on-selection="ngModel.onSelection"
+    allow-selection="ngModel.allowSelection">
 </mct-tree>
 

platform/commonUI/general/src/directives/MCTTree.js

@@ -26,25 +26,54 @@ define([
 ], function (angular, TreeView) {
     function MCTTree(gestureService) {
         function link(scope, element) {
-            var treeView = new TreeView(gestureService),
-                unobserve = treeView.observe(function (domainObject) {
-                    if (scope.mctModel !== domainObject) {
-                        scope.mctModel = domainObject;
-                        scope.$apply();
-                    }
-                });
+            if (!scope.allowSelection) {
+                scope.allowSelection = function () {
+                    return true;
+                }
+            }
+            if (!scope.onSelection) {
+                scope.onSelection = function () {};
+            }
+            var currentSelection = scope.selectedObject;
+            var treeView = new TreeView(gestureService);
+
+            function setSelection(domainObject, event) {
+                if (currentSelection === domainObject) {
+                    return;
+                }
+                if (!scope.allowSelection(domainObject)) {
+                    treeView.value(currentSelection);
+                    return;
+                }
+                currentSelection = domainObject;
+                scope.onSelection(domainObject);
+                scope.selectedObject = domainObject;
+                if (event && event instanceof MouseEvent) {
+                    scope.$apply();
+                }
+            }
+
+            var unobserve = treeView.observe(setSelection);
 
             element.append(angular.element(treeView.elements()));
 
-            scope.$watch('mctModel', treeView.value.bind(treeView));
-            scope.$watch('mctObject', treeView.model.bind(treeView));
+            scope.$watch('selectedObject', function (object) {
+                currentSelection = object;
+                treeView.value(object);
+            });
+            scope.$watch('rootObject', treeView.model.bind(treeView));
             scope.$on('$destroy', unobserve);
         }
 
         return {
             restrict: "E",
             link: link,
-            scope: { mctObject: "=", mctModel: "=" }
+            scope: {
+                rootObject: "=",
+                selectedObject: "=",
+                onSelection: "=?",
+                allowSelection: "=?"
+            }
         };
     }
 

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

@@ -49,8 +49,8 @@ define([
 
         this.labelView = new TreeLabelView(gestureService);
 
-        $(this.labelView.elements()).on('click', function () {
-            selectFn(this.activeObject);
+        $(this.labelView.elements()).on('click', function (event) {
+            selectFn(this.activeObject, event);
         }.bind(this));
 
         this.li.append($(nodeTemplate));

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

@@ -109,11 +109,11 @@ define([
         }.bind(this));
     };
 
-    TreeView.prototype.value = function (domainObject) {
+    TreeView.prototype.value = function (domainObject, event) {
         this.selectedObject = domainObject;
         this.updateNodeViewSelection();
         this.callbacks.forEach(function (callback) {
-            callback(domainObject);
+            callback(domainObject, event);
         });
     };