[Display Layout] User should be able to set outer dimensions (#3333)

* 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

* add outer dimensions

* content dimensions not needed

* show/hide layout dimensions based on selection

* push non-dynamic styles to class definition

* remove grid code for other display layout feature

* reorder to match master

* layoutDimensionsStyle computed prop should return an object

* Styling for Display Layout dimensions box

- Mods to markup and SCSS;
- New ``$editDimensionsColor` theme constant;

* Styling for Display Layout dimensions box

- Refined styling;
- Fixed selector for nested sub-layouts;

* Styling for Display Layout dimensions box

- Added v-if that now only displays the dimensions indicator if both
width and height are greater than 0;

* fix lint issues

* fix merge issues

* fix display layout dimensions logic

* fix display layout dimensions check

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

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -36,7 +36,15 @@
         :grid-size="gridSize"
         :show-grid="showGrid"
     />
-
+    <div
+        v-if="shouldDisplayLayoutDimensions"
+        class="l-layout__dimensions"
+        :style="layoutDimensionsStyle"
+    >
+        <div class="l-layout__dimensions-vals">
+            {{ layoutDimensions[0] }},{{ layoutDimensions[1] }}
+        </div>
+    </div>
     <component
         :is="item.type"
         v-for="(item, index) in layoutItems"
@@ -165,6 +173,23 @@ export default {
                 return this.itemIsInCurrentSelection(item);
             });
         },
+        layoutDimensions() {
+            return this.internalDomainObject.configuration.layoutDimensions;
+        },
+        shouldDisplayLayoutDimensions() {
+            return this.layoutDimensions
+                && this.layoutDimensions[0] > 0
+                && this.layoutDimensions[1] > 0;
+        },
+        layoutDimensionsStyle() {
+            const width = `${this.layoutDimensions[0]}px`;
+            const height = `${this.layoutDimensions[1]}px`;
+
+            return {
+                width,
+                height
+            };
+        },
         showMarquee() {
             let selectionPath = this.selection[0];
             let singleSelectedLine = this.selection.length === 1

src/plugins/displayLayout/components/display-layout.scss

@@ -17,10 +17,29 @@
     flex-direction: column;
     overflow: auto;
 
-    &__grid-holder {
+    &__grid-holder,
+    &__dimensions {
         display: none;
     }
 
+    &__dimensions {
+        $b: 1px dashed $editDimensionsColor;
+        border-right: $b;
+        border-bottom: $b;
+        pointer-events: none;
+        position: absolute;
+
+        &-vals {
+            $p: 2px;
+            color: $editDimensionsColor;
+            display: inline-block;
+            font-style: italic;
+            position: absolute;
+            bottom: $p; right: $p;
+            opacity: 0.7;
+        }
+    }
+
     &__frame {
         position: absolute;
     }
@@ -34,6 +53,10 @@
             > .l-layout {
                 background: $editUIGridColorBg;
 
+                > [class*="__dimensions"] {
+                    display: block;
+                }
+
                 > [class*="__grid-holder"] {
                     display: block;
                 }
@@ -48,6 +71,10 @@
             > * > * > .l-layout.allow-editing {
                 box-shadow: inset $editUIGridColorFg 0 0 2px 1px;
 
+                > [class*="__dimensions"] {
+                    display: block;
+                }
+
                 > [class*='grid-holder'] {
                     display: block;
                 }