[Display Layout] User should be able to toggle grid lines (#3331)

* Display Layout grid toggle and dimensions

- Added toggle grid button;
- Added Layout 'size' properties;
- Very WIP!

* Display Layout grid toggle and dimensions

- Cleanup toolbar;

* new configuration layoutDimensions

* extract display layout grid to own vue component

* split toolbar structure into two structures

* allow toggling grid when editing display layout

* toggle grid icon show/hide state on click

* grid be shown on starting edit mode

* remove dimensions code for other display layout feature

* toggle icon after method completes

* change icon names

* update spec to include new action and separator

Co-authored-by: charlesh88 <charlesh88@gmail.com>
Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>

src/plugins/displayLayout/DisplayLayoutToolbar.js

@@ -623,6 +623,33 @@ define(['lodash'], function (_) {
                     }
                 }
 
+                function getToggleGridButton(selection, selectionPath) {
+                    const ICON_GRID_SHOW = 'icon-grid-on';
+                    const ICON_GRID_HIDE = 'icon-grid-off';
+
+                    let displayLayoutContext;
+
+                    if (selection.length === 1 && selectionPath === undefined) {
+                        displayLayoutContext = selection[0][0].context;
+                    } else {
+                        displayLayoutContext = selectionPath[1].context;
+                    }
+
+                    return {
+                        control: "button",
+                        domainObject: displayLayoutContext.item,
+                        icon: ICON_GRID_SHOW,
+                        method: function () {
+                            displayLayoutContext.toggleGrid();
+
+                            this.icon = this.icon === ICON_GRID_SHOW
+                                ? ICON_GRID_HIDE
+                                : ICON_GRID_SHOW;
+                        },
+                        secondary: true
+                    };
+                }
+
                 function getSeparator() {
                     return {
                         control: "separator"
@@ -637,7 +664,9 @@ define(['lodash'], function (_) {
                 }
 
                 if (isMainLayoutSelected(selectedObjects[0])) {
-                    return [getAddButton(selectedObjects)];
+                    return [
+                        getToggleGridButton(selectedObjects),
+                        getAddButton(selectedObjects)];
                 }
 
                 let toolbar = {
@@ -653,7 +682,8 @@ define(['lodash'], function (_) {
                     'position': [],
                     'duplicate': [],
                     'unit-toggle': [],
-                    'remove': []
+                    'remove': [],
+                    'toggle-grid': []
                 };
 
                 selectedObjects.forEach(selectionPath => {
@@ -800,6 +830,10 @@ define(['lodash'], function (_) {
                     if (toolbar.duplicate.length === 0) {
                         toolbar.duplicate = [getDuplicateButton(selectedParent, selectionPath, selectedObjects)];
                     }
+
+                    if (toolbar['toggle-grid'].length === 0) {
+                        toolbar['toggle-grid'] = [getToggleGridButton(selectedObjects, selectionPath)];
+                    }
                 });
 
                 let toolbarArray = Object.values(toolbar);

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -31,22 +31,12 @@
     @click.capture="bypassSelection"
     @drop="handleDrop"
 >
-    <!-- Background grid -->
+    <display-layout-grid
-    <div
         v-if="isEditing"
-        class="l-layout__grid-holder c-grid"
+        :grid-size="gridSize"
-    >
+        :show-grid="showGrid"
-        <div
+    />
-            v-if="gridSize[0] >= 3"
+
-            class="c-grid__x l-grid l-grid-x"
-            :style="[{ backgroundSize: gridSize[0] + 'px 100%' }]"
-        ></div>
-        <div
-            v-if="gridSize[1] >= 3"
-            class="c-grid__y l-grid l-grid-y"
-            :style="[{ backgroundSize: '100%' + gridSize[1] + 'px' }]"
-        ></div>
-    </div>
     <component
         :is="item.type"
         v-for="(item, index) in layoutItems"
@@ -81,6 +71,7 @@ import TextView from './TextView.vue';
 import LineView from './LineView.vue';
 import ImageView from './ImageView.vue';
 import EditMarquee from './EditMarquee.vue';
+import DisplayLayoutGrid from './DisplayLayoutGrid.vue';
 import _ from 'lodash';
 
 const TELEMETRY_IDENTIFIER_FUNCTIONS = {
@@ -127,6 +118,7 @@ const DUPLICATE_OFFSET = 3;
 
 let components = ITEM_TYPE_VIEW_MAP;
 components['edit-marquee'] = EditMarquee;
+components['display-layout-grid'] = DisplayLayoutGrid;
 
 function getItemDefinition(itemType, ...options) {
     let itemView = ITEM_TYPE_VIEW_MAP[itemType];
@@ -140,6 +132,7 @@ function getItemDefinition(itemType, ...options) {
 
 export default {
     components: components,
+    inject: ['openmct', 'options', 'objectPath'],
     props: {
         domainObject: {
             type: Object,
@@ -156,7 +149,8 @@ export default {
         return {
             internalDomainObject: domainObject,
             initSelectIndex: undefined,
-            selection: []
+            selection: [],
+            showGrid: true
         };
     },
     computed: {
@@ -179,7 +173,13 @@ export default {
             return this.isEditing && selectionPath && selectionPath.length > 1 && !singleSelectedLine;
         }
     },
-    inject: ['openmct', 'options', 'objectPath'],
+    watch: {
+        isEditing(value) {
+            if (value) {
+                this.showGrid = value;
+            }
+        }
+    },
     mounted() {
         this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', function (obj) {
             this.internalDomainObject = JSON.parse(JSON.stringify(obj));
@@ -798,6 +798,9 @@ export default {
 
             this.removeItem(selection);
             this.initSelectIndex = this.layoutItems.length - 1; //restore selection
+        },
+        toggleGrid() {
+            this.showGrid = !this.showGrid;
         }
     }
 };

src/plugins/displayLayout/components/DisplayLayoutGrid.vue

@@ -0,0 +1,34 @@
+<template>
+<div
+    class="l-layout__grid-holder"
+    :class="{ 'c-grid': showGrid }"
+>
+    <div
+        v-if="gridSize[0] >= 3"
+        class="c-grid__x l-grid l-grid-x"
+        :style="[{ backgroundSize: gridSize[0] + 'px 100%' }]"
+    ></div>
+    <div
+        v-if="gridSize[1] >= 3"
+        class="c-grid__y l-grid l-grid-y"
+        :style="[{ backgroundSize: '100%' + gridSize[1] + 'px' }]"
+    ></div>
+</div>
+</template>
+
+<script>
+export default {
+    props: {
+        gridSize: {
+            type: Array,
+            required: true,
+            validator: (arr) => arr && arr.length === 2
+                && arr.every(el => typeof el === 'number')
+        },
+        showGrid: {
+            type: Boolean,
+            required: true
+        }
+    }
+};
+</script>

src/plugins/displayLayout/plugin.js

@@ -72,7 +72,8 @@ export default function DisplayLayoutPlugin(options) {
                             duplicateItem: component && component.$refs.displayLayout.duplicateItem,
                             switchViewType: component && component.$refs.displayLayout.switchViewType,
                             mergeMultipleTelemetryViews: component && component.$refs.displayLayout.mergeMultipleTelemetryViews,
-                            mergeMultipleOverlayPlots: component && component.$refs.displayLayout.mergeMultipleOverlayPlots
+                            mergeMultipleOverlayPlots: component && component.$refs.displayLayout.mergeMultipleOverlayPlots,
+                            toggleGrid: component && component.$refs.displayLayout.toggleGrid
                         };
                     },
                     onEditModeChange: function (isEditing) {

src/plugins/displayLayout/pluginSpec.js

@@ -340,7 +340,8 @@ describe('the plugin', function () {
 
         it('provides controls including separators', () => {
             const displayLayoutToolbar = openmct.toolbars.get(selection);
-            expect(displayLayoutToolbar.length).toBe(9);
+
+            expect(displayLayoutToolbar.length).toBe(11);
         });
     });
 });

src/styles/_controls.scss

@@ -739,8 +739,17 @@ select {
 }
 
 .c-toolbar {
-    > * + * {
+    display: flex;
-        margin-left: 2px;
+    align-items: center;
+    justify-content: space-between;
+
+    > * {
+        // First level items
+        display: flex;
+
+        > * + * {
+            margin-left: 2px;
+        }
     }
 
     &__separator {

src/ui/toolbar/Toolbar.vue

@@ -1,13 +1,25 @@
 <template>
 <div class="c-toolbar">
-    <component
+    <div class="c-toolbar__element-controls">
-        :is="item.control"
+        <component
-        v-for="(item, index) in structure"
+            :is="item.control"
-        :key="index"
+            v-for="(item, index) in primaryStructure"
-        :options="item"
+            :key="index"
-        @click="triggerMethod(item, $event)"
+            :options="item"
-        @change="updateObjectValue"
+            @change="updateObjectValue"
-    />
+            @click="triggerMethod(item, $event)"
+        />
+    </div>
+    <div class="c-toolbar__dimensions-and-controls">
+        <component
+            :is="item.control"
+            v-for="(item, index) in secondaryStructure"
+            :key="index"
+            :options="item"
+            @change="updateObjectValue"
+            @click="triggerMethod(item, $event)"
+        />
+    </div>
 </div>
 </template>
 
@@ -40,6 +52,14 @@ export default {
             structure: []
         };
     },
+    computed: {
+        primaryStructure() {
+            return this.structure.filter(item => !item.secondary);
+        },
+        secondaryStructure() {
+            return this.structure.filter(item => item.secondary);
+        }
+    },
     mounted() {
         this.openmct.selection.on('change', this.handleSelection);
         this.handleSelection(this.openmct.selection.get());