[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/DisplayLayoutType.js

@@ -56,6 +56,28 @@ define(function () {
                         1
                     ],
                     required: true
+                },
+                {
+                    name: "Horizontal size (px)",
+                    control: "numberfield",
+                    cssClass: "l-input-sm l-numeric",
+                    property: [
+                        "configuration",
+                        "layoutDimensions",
+                        0
+                    ],
+                    required: false
+                },
+                {
+                    name: "Vertical size (px)",
+                    control: "numberfield",
+                    cssClass: "l-input-sm l-numeric",
+                    property: [
+                        "configuration",
+                        "layoutDimensions",
+                        1
+                    ],
+                    required: false
                 }
             ]
         };

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;
                 }

src/styles/_constants-espresso.scss

@@ -173,6 +173,7 @@ $editUIAreaShdw: $editUIAreaBaseColor 0 0 0 2px; // Edit area s-selected-parent
 $editUIAreaShdwSelected: $editUIAreaBaseColor 0 0 0 3px; // Edit area s-selected
 $editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of layout editing area
 $editUIGridColorFg: rgba(#000, 0.1); // Grid lines in layout editing area
+$editDimensionsColor: #6a5ea6;
 $editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-selected frames in a layout; move-bar on frame hover
 $editFrameBorder: 1px dotted $editFrameColor;
 $editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects

src/styles/_constants-maelstrom.scss

@@ -177,6 +177,7 @@ $editUIAreaShdw: $editUIAreaBaseColor 0 0 0 2px; // Edit area s-selected-parent
 $editUIAreaShdwSelected: $editUIAreaBaseColor 0 0 0 3px; // Edit area s-selected
 $editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of layout editing area
 $editUIGridColorFg: rgba(#000, 0.1); // Grid lines in layout editing area
+$editDimensionsColor: #6a5ea6;
 $editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-selected frames in a layout; move-bar on frame hover
 $editFrameBorder: 1px dotted $editFrameColor;
 $editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects

src/styles/_constants-snow.scss

@@ -173,6 +173,7 @@ $editUIAreaShdw: $editUIAreaBaseColor 0 0 0 2px; // Edit area s-selected-parent
 $editUIAreaShdwSelected: $editUIAreaBaseColor 0 0 0 3px; // Edit area s-selected
 $editUIGridColorBg: rgba($editUIBaseColor, 0.2); // Background of layout editing area
 $editUIGridColorFg: rgba($editUIBaseColor, 0.3); // Grid lines in layout editing area
+$editDimensionsColor: #d7aeff;
 $editFrameColor: $browseFrameColor; // Solid or dotted border applied to non-selected frames in a layout; move-bar on frame hover
 $editFrameBorder: 1px dotted $editFrameColor;
 $editFrameColorHov: $editUIColor; // Solid border hover on frames; hover should not be applied to selected objects