From 53f5fdabe532f18e8d56bbfe876bb2397872d954 Mon Sep 17 00:00:00 2001
From: David 'Epper' Marshall <epper.marshall@gmail.com>
Date: Mon, 15 Nov 2021 14:25:57 -0500
Subject: [PATCH] Mct4207 (#4366)

* MCT 4207
* fix lint

Co-authored-by: Jamie V <jamie.j.vigliotta@nasa.gov>
Co-authored-by: Shefali Joshi <simplyrender@gmail.com>
---
 .../components/DisplayLayout.vue              | 22 ++++++++++++++++++-
 .../components/DisplayLayoutGrid.vue          | 10 +++++++--
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/plugins/displayLayout/components/DisplayLayout.vue b/src/plugins/displayLayout/components/DisplayLayout.vue
index c6a6115b93..a7b21e7f0a 100644
--- a/src/plugins/displayLayout/components/DisplayLayout.vue
+++ b/src/plugins/displayLayout/components/DisplayLayout.vue
@@ -35,6 +35,7 @@
         v-if="isEditing"
         :grid-size="gridSize"
         :show-grid="showGrid"
+        :grid-dimensions="gridDimensions"
     />
     <div
         v-if="shouldDisplayLayoutDimensions"
@@ -159,7 +160,8 @@ export default {
             initSelectIndex: undefined,
             selection: [],
             showGrid: true,
-            viewContext: {}
+            viewContext: {},
+            gridDimensions: [0, 0]
         };
     },
     computed: {
@@ -204,6 +206,23 @@ export default {
             if (value) {
                 this.showGrid = value;
             }
+        },
+        layoutItems: {
+            handler(value) {
+                let wMax = this.$el.clientWidth / this.gridSize[0];
+                let hMax = this.$el.clientHeight / this.gridSize[1];
+                value.forEach(item => {
+                    if (item.x + item.width > wMax) {
+                        wMax = item.x + item.width + 2;
+                    }
+
+                    if (item.y + item.height > hMax) {
+                        hMax = item.y + item.height + 2;
+                    }
+                });
+                this.gridDimensions = [wMax * this.gridSize[0], hMax * this.gridSize[1]];
+            },
+            deep: true
         }
     },
     mounted() {
@@ -213,6 +232,7 @@ export default {
         this.composition.on('add', this.addChild);
         this.composition.on('remove', this.removeChild);
         this.composition.load();
+        this.gridDimensions = [this.$el.offsetWidth, this.$el.scrollHeight];
     },
     destroyed: function () {
         this.openmct.selection.off('change', this.setSelection);
diff --git a/src/plugins/displayLayout/components/DisplayLayoutGrid.vue b/src/plugins/displayLayout/components/DisplayLayoutGrid.vue
index e6127277cd..315ccbff01 100644
--- a/src/plugins/displayLayout/components/DisplayLayoutGrid.vue
+++ b/src/plugins/displayLayout/components/DisplayLayoutGrid.vue
@@ -6,12 +6,12 @@
     <div
         v-if="gridSize[0] >= 3"
         class="c-grid__x l-grid l-grid-x"
-        :style="[{ backgroundSize: gridSize[0] + 'px 100%' }]"
+        :style="[{ backgroundSize: gridSize[0] + 'px 100%', width: gridDimensions[0] +'px', height: gridDimensions[1] +'px' }]"
     ></div>
     <div
         v-if="gridSize[1] >= 3"
         class="c-grid__y l-grid l-grid-y"
-        :style="[{ backgroundSize: '100%' + gridSize[1] + 'px' }]"
+        :style="[{ backgroundSize: '100%' + gridSize[1] + 'px', width: gridDimensions[0] +'px', height: gridDimensions[1] +'px' }]"
     ></div>
 </div>
 </template>
@@ -28,6 +28,12 @@ export default {
         showGrid: {
             type: Boolean,
             required: true
+        },
+        gridDimensions: {
+            type: Array,
+            required: true,
+            validator: (arr) => arr && arr.length === 2
+                && arr.every(el => typeof el === 'number')
         }
     }
 };