Implements selection and reorder in stacked plots (#2371)

* working selection in stacked plots

* reorder in stacked plots works

* tabs code cleanup

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

@@ -54,6 +54,7 @@ define(
                     if (isDestroyed) {
                         return;
                     }
+
                     var removeSelectable = openmct.selection.selectable(
                         element[0],
                         scope.$eval(attrs.mctSelectable),

src/plugins/plot/res/templates/stacked-plot.html

@@ -43,12 +43,16 @@
     <div class="l-view-section">
         <div class="c-loading--overlay loading"
              ng-show="!!currentRequest.pending"></div>
-        <div class="gl-plot child-frame"
+        <div class="gl-plot child-frame u-inspectable"
             ng-repeat="telemetryObject in telemetryObjects"
             ng-class="{
                 's-status-timeconductor-unsynced': telemetryObject
                     .getCapability('status')
                     .get('timeconductor-unsynced')
+            }"
+            mct-selectable="{
+                item: telemetryObject.useCapability('adapter'),
+                oldItem: telemetryObject
             }">
             <mct-overlay-plot domain-object="telemetryObject"></mct-overlay-plot>
         </div>

src/plugins/plot/src/telemetry/StackedPlotController.js

@@ -79,6 +79,15 @@ define([
                     $scope.$broadcast('plot:tickWidth', _.max(tickWidthMap));
                 }
             }
+
+            function compositionReorder(reorderPlan) {
+                let oldComposition = telemetryObjects.slice();
+
+                reorderPlan.forEach((reorder) => {
+                    telemetryObjects[reorder.newIndex] = oldComposition[reorder.oldIndex];
+                });
+            }
+
             thisRequest.pending += 1;
             openmct.objects.get(domainObject.getId())
                 .then(function (obj) {
@@ -89,10 +98,12 @@ define([
                     composition = openmct.composition.get(obj);
                     composition.on('add', addChild);
                     composition.on('remove', removeChild);
+                    composition.on('reorder', compositionReorder);
                     composition.load();
                     unlisten = function () {
                         composition.off('add', addChild);
                         composition.off('remove', removeChild);
+                        composition.off('reorder', compositionReorder);
                     };
                 });
         }

src/plugins/tabs/components/tabs.vue

@@ -7,7 +7,8 @@
             }">
             <div class="c-drop-hint"
                  @drop="onDrop"
-                 ref="dropHint">
+                 @dragenter="dragenter"
+                 @dragleave="dragleave">
             </div>
             <div class="c-tabs-view__empty-message"
                  v-if="!tabsList.length > 0">Drag objects here to add them to this view.</div>
@@ -197,13 +198,6 @@ export default {
 
         document.addEventListener('dragstart', this.dragstart);
         document.addEventListener('dragend', this.dragend);
-
-        let dropHint = this.$refs.dropHint;
-
-        if (dropHint) {
-            dropHint.addEventListener('dragenter', this.dragenter);
-            dropHint.addEventListener('dragleave', this.dragleave);
-        }
     },
     destroyed() {
         this.composition.off('add', this.addItem);
@@ -212,12 +206,6 @@ export default {
 
         document.removeEventListener('dragstart', this.dragstart);
         document.removeEventListener('dragend', this.dragend);
-    },
-    beforeDestroy() {
-        let dropHint = this.$refs.dropHint;
-
-        dropHint.removeEventListener('dragenter', this.dragenter);
-        dropHint.removeEventListener('dragleave', this.dragleave);
     }
 }
 </script>

src/styles-new/_legacy-plots.scss

@@ -51,6 +51,22 @@ mct-plot {
     }
 }
 
+.is-editing {
+    .gl-plot.child-frame {
+        &:hover {
+            background: rgba($editUIColorBg, 0.1);
+            box-shadow: inset rgba($editUIColorBg, 0.8) 0 0 0 1px;
+        }
+
+        &[s-selected] {
+            border: 1px solid $editUIColorFg !important;
+            color: $editUIColorFg !important;
+            box-shadow: $editFrameSelectedShdw;
+            z-index: 2;
+        }
+    }
+}
+
 .gl-plot {
     color: $colorPlotFg;
     display: flex;