Vue toolbar (#2191)

* Add a toolbar provider for display layout.

* Move toolbar provider to the plugin

* basic toolbar generation

* componentize different toolbar control types

Break toolbar control types down into different parts and provide
a test toolbar generator in index.html that utilizes all the
controls.

* Get the 'Show frame' checkbox working in the toolbar

* - Remove extra listener.
- Display toolbar only when editing.

* Modify the Selection API to set s-selected and s-selected-parent attributes instead of adding to the css class names.

* Move the logic for allowing the toolbar in the edit mode to the provider.

* Use toggle-button component to toggle frame

* Delete old files

* Remove MCTToolbar

* Modify the toggle button component to return the computed value

* Remove reload=true

* Revert to the original setting

* use value from props

* Always update toolbars on edit status change

* restore fixed position bundle

* bring back reload when hmr unavailable

src/plugins/displayLayout/DisplayLayout.vue

@@ -91,8 +91,8 @@
             background: rgba($editColor, 0.1);
         }
 
-        .s-selected,
-        .s-selected-parent {
+        [s-selected],
+        [s-selected-parent] {
             .l-layout {
                 // Show the layout grid for the top-most child of the current selection,
                 // and hide the grid for deeper nested levels.
@@ -128,7 +128,6 @@
                 frames: [],
                 frameStyles: [],
                 rawPositions: {},
-                initSelect: true,
                 drilledIn: undefined
             }
         },          
@@ -141,6 +140,7 @@
             this.newDomainObject = this.domainObject;
             this.gridSize = this.newDomainObject.layoutGrid ||  DEFAULT_GRID_SIZE;
             this.composition = this.openmct.composition.get(this.newDomainObject);
+            this.Listeners = [];
             let panels = (((this.newDomainObject.configuration || {}).layout || {}).panels || {});
 
             if (this.composition !== undefined) {
@@ -237,8 +237,32 @@
                     return;
                 }
 
+                let domainObject = selection[0].context.item;
+                if (domainObject && domainObject === this.selectedObject) {
+                    return;
+                }
+                
+                this.selectedObject = domainObject;
+                this.removeListeners();
+
+                if (selection[1]) {
+                    this.attachSelectionListeners();
+                }
+
                 this.updateDrilledInState();
             },
+            attachSelectionListeners() {
+                let id = this.openmct.objects.makeKeyString(this.selectedObject.identifier);
+                let path = "configuration.layout.panels[" + id + "]";
+                this.listeners.push(this.openmct.objects.observe(this.newDomainObject, path + ".hasFrame", function (newValue) {
+                    this.frameItems.forEach(function (item) {
+                        if (item.id === id) {
+                            item.hasFrame = newValue;
+                        }
+                    });
+                    this.frames[id] = newValue;
+                }.bind(this)));  
+            },
             updateDrilledInState(id) {
                 this.drilledIn = id;
                 this.frameItems.forEach(function (item) {
@@ -282,6 +306,7 @@
             },
             handleDrop($event) {
                 $event.preventDefault();
+                $event.stopPropagation();
 
                 let child = JSON.parse($event.dataTransfer.getData('domainObject'));
                 let duplicates = [];
@@ -311,6 +336,14 @@
             },
             handleDragOver($event){
                 $event.preventDefault();
+            },
+            removeListeners() {
+                if (this.listeners) {
+                    this.listeners.forEach(function (l) {
+                        l();
+                    })
+                }
+                this.listeners = [];
             }
         },
         mounted() {
@@ -321,6 +354,7 @@
             this.composition.off('remove', this.onRemoveComposition);
             this.openmct.off('change', this.selection);
             this.unlisten();
+            this.removeListeners();
         }
     }
     

src/plugins/displayLayout/LayoutFrame.vue

@@ -139,7 +139,7 @@
             }
         }
 
-        &.s-selected, // LEGACY
+        &[s-selected], // LEGACY
         &.is-selected {
             border: $browseBorderSelected;
         }
@@ -155,7 +155,7 @@
                     border: $editBorderSelectableHov;
                 }
 
-                &.s-selected,
+                &[s-selected],
                 &.is-selected {
                     border: $editBorderSelected;
 

src/plugins/displayLayout/plugin.js

@@ -63,5 +63,40 @@ export default function () {
             }
         });
         openmct.types.addType('layout', DisplayLayoutType());
+        openmct.toolbars.addProvider({
+            name: "Display Layout Toolbar",
+            key: "layout",
+            description: "A toolbar for objects inside a display layout.",
+            forSelection: function (selection) {
+                // Apply the layout toolbar if the selected object is inside a layout,
+                // and in edit mode.
+                return (selection &&
+                    selection[1] &&
+                    selection[1].context.item.type === 'layout' &&
+                    openmct.editor.isEditing());
+            },
+            toolbar: function (selection) {                
+                let id = openmct.objects.makeKeyString(selection[0].context.item.identifier);
+                return [
+                    {
+                        control: "toggle-button",
+                        domainObject: selection[1].context.item,
+                        property: "configuration.layout.panels[" + id + "].hasFrame",
+                        options: [
+                            {
+                                value: false,
+                                icon: 'icon-frame-hide',
+                                title: "Hide frame"
+                            },
+                            {
+                                value: true,
+                                icon: 'icon-frame-show',
+                                title: "Show frame"
+                            }
+                        ]
+                    }
+                ];
+            }
+        });
     }
-}
+}