Preview instead of navigate in edit mode + highlight navigated object (#2252)

* Preview instead of navigate when in edit mode.

* Prevent preview of navigated object

* Removed trailing comma

* Observe navigation from tree items instead of mct-tree

* Cleanup of redundant code

* .is-selected -> .is-navigated-object

src/MCT.js

@@ -43,6 +43,7 @@ define([
     './ui/layout/Layout.vue',
     '../platform/core/src/objects/DomainObjectImpl',
     '../platform/core/src/capabilities/ContextualDomainObject',
+    './ui/preview/plugin',
     'vue'
 ], function (
     EventEmitter,
@@ -67,6 +68,7 @@ define([
     Layout,
     DomainObjectImpl,
     ContextualDomainObject,
+    PreviewPlugin,
     Vue
 ) {
     /**
@@ -230,7 +232,7 @@ define([
         this.install(this.plugins.Plot());
         this.install(this.plugins.TelemetryTable());
         this.install(this.plugins.DisplayLayout());
-        this.install(this.plugins.Preview());
+        this.install(PreviewPlugin.default());
 
         if (typeof BUILD_CONSTANTS !== 'undefined') {
             this.install(buildInfoPlugin(BUILD_CONSTANTS));

src/plugins/plugins.js

@@ -40,8 +40,7 @@ define([
     './flexibleLayout/plugin',
     './tabs/plugin',
     '../../platform/features/fixed/plugin',
-    './LADTable/plugin',
-    './preview/plugin'
+    './LADTable/plugin'
 ], function (
     _,
     UTCTimeSystem,
@@ -62,8 +61,7 @@ define([
     FlexibleLayout,
     Tabs,
     FixedView,
-    LADTable,
-    PreviewPlugin
+    LADTable
 ) {
     var bundleMap = {
         LocalStorage: 'platform/persistence/local',
@@ -179,7 +177,6 @@ define([
     plugins.FixedView = FixedView;
     plugins.FlexibleLayout = FlexibleLayout;
     plugins.LADTable = LADTable;
-    plugins.Preview = PreviewPlugin.default;
 
     return plugins;
 });

src/ui/components/ObjectLabel.vue

@@ -2,6 +2,7 @@
 <a class="c-tree__item__label"
     draggable="true"
     @dragstart="dragStart"
+    @click="navigateOrPreview"
     :href="objectLink">
     <div class="c-tree__item__type-icon"
         :class="typeClass"></div>
@@ -13,12 +14,19 @@
 
 import ObjectLink from '../mixins/object-link';
 import ContextMenuGesture from '../mixins/context-menu-gesture';
+import PreviewAction from '../preview/PreviewAction.js';
 
 export default {
     mixins: [ObjectLink, ContextMenuGesture],
     inject: ['openmct'],
     props: {
-        domainObject: Object
+        domainObject: Object,
+        objectPath: {
+            type: Array,
+            default() {
+                return [];
+            }
+        }
     },
     data() {
         return {
@@ -32,6 +40,7 @@ export default {
             });
             this.$once('hook:destroyed', removeListener);
         }
+        this.previewAction = new PreviewAction(this.openmct);
     },
     computed: {
         typeClass() {
@@ -43,6 +52,17 @@ export default {
         }
     },
     methods: {
+        navigateOrPreview(event) {
+            if (this.openmct.editor.isEditing()){
+                event.preventDefault();
+                this.preview();
+            }
+        },
+        preview() {
+            if (this.previewAction.appliesTo(this.objectPath)){
+                this.previewAction.invoke(this.objectPath);
+            }
+        },
         dragStart(event) {
             let navigatedObject = this.openmct.router.path[0];
             let serializedObject = JSON.stringify(this.observedObject);

src/ui/layout/mct-tree.vue

@@ -47,7 +47,7 @@
                 }
             }
 
-            &.is-selected {
+            &.is-navigated-object {
                 background: $colorItemTreeSelectedBg;
                 .c-tree__item__type-icon:before {
                     color: $colorItemTreeIconHover;

src/ui/layout/tree-item.vue

@@ -1,7 +1,7 @@
 <template>
     <li class="c-tree__item-h">
         <div class="c-tree__item"
-            :class="{ 'is-alias': isAlias }">
+            :class="{ 'is-alias': isAlias, 'is-navigated-object': isNavigated }">
             <view-control class="c-tree__item__view-control"
                           :enabled="hasChildren"
                           v-model="expanded">
@@ -31,10 +31,13 @@
             node: Object
         },
         data() {
+            this.pathToObject = this.buildPathString(this.node.objectPath);
+
             return {
                 hasChildren: false,
                 isLoading: false,
                 loaded: false,
+                isNavigated: this.pathToObject === this.openmct.router.currentLocation.path,
                 children: [],
                 expanded: false
             }
@@ -47,7 +50,7 @@
                 }
                 let parentKeyString = this.openmct.objects.makeKeyString(parent.identifier);
                 return parentKeyString !== this.node.object.location;
-            }
+            },
         },
         mounted() {
             // TODO: should update on mutation.
@@ -65,11 +68,14 @@
             if (this.openmct.composition.get(this.node.object)) {
                 this.hasChildren = true;
             }
+
+            this.openmct.router.on('change:path', this.highlightIfNavigated);
         },
         destroy() {
             if (this.composition) {
                 this.composition.off('add', this.addChild);
                 this.composition.off('remove', this.removeChild);
+                this.openmct.router.off('change:path', this.highlightIfNavigated);
                 delete this.composition;
             }
         },
@@ -102,6 +108,18 @@
             finishLoading () {
                 this.isLoading = false;
                 this.loaded = true;
+            },
+            buildPathString(path) {
+                return '/browse/' + path.map(o => o && this.openmct.objects.makeKeyString(o.identifier))
+                    .reverse()
+                    .join('/');
+            },
+            highlightIfNavigated(newPath, oldPath){
+                if (newPath === this.pathToObject) {
+                    this.isNavigated = true;
+                } else if (oldPath === this.pathToObject) {
+                    this.isNavigated = false;
+                }
             }
         },
         components: {

src/ui/preview/PreviewAction.js

@@ -61,4 +61,13 @@ export default class PreviewAction {
             onDestroy: () => preview.$destroy()
         });
     }
+    appliesTo(objectPath) {
+        return !this._isNavigatedObject(objectPath)
+    }
+    _isNavigatedObject(objectPath) {
+        let targetObject = objectPath[0];
+        let navigatedObject = this._openmct.router.path[0];
+        return targetObject.identifier.namespace === navigatedObject.identifier.namespace &&
+            targetObject.identifier.key === navigatedObject.identifier.key;
+    }
 }