merge display layout view config with components, add line view.

* Hacky WIP

* WIP

* check for 'domainobject' in data transfer

* Metadata manager can return default display value

* Refactor subobject and telemetry views to use layout frame

* Use data domainObject

* Get metadata for selected object.

* Don't inject lodash via vue

* move selection to specific layout types

* restore toolbar functionality

* Support creating line

* Add controls for setting x, y, x2 and y2 for lines from the toolbar.

* Initial attempt at resizing lines

* Check for duplicate panel

* line resize handles working

* Get Text and Box elements working.

* Refactor image view to use layout frame

* Fix drill in

* Check for object before accessing the identifier to avoid type error.

* Add inspectable class if item is subobject or telemetry view.

* Delete unused files

* remove unused imports

* Fix typos

* Fix cssClass and objectPath

* object can be undefined so check for it not being undefined before adding a listener.

* Set cssClass when domain object is available

* Get user input for text and image in the toolbar when adding element.

src/plugins/displayLayout/components/BoxView.vue

@@ -21,9 +21,13 @@
  *****************************************************************************/
 
 <template>
-    <div class="c-box-view"
-         :style="styleObject">
-    </div>
+    <layout-frame :item="item"
+                  :grid-size="gridSize"
+                  @endDrag="(item, updates) => $emit('endDrag', item, updates)">
+        <div class="c-box-view"
+             :style="style">
+        </div>
+    </layout-frame>
  </template>
 
 <style lang="scss">
@@ -40,24 +44,53 @@
 </style>
 
  <script>
+    import LayoutFrame from './LayoutFrame.vue'
+
     export default {
+        makeDefinition() {
+            return {
+                fill: '#717171',
+                stroke: 'transparent',
+                x: 1,
+                y: 1,
+                width: 10, 
+                height: 5 
+            };
+        },
+        inject: ['openmct'],
+        components: {
+            LayoutFrame
+        },
         props: {
-            item: Object
+            item: Object,
+            gridSize: Array,
+            index: Number,
+            initSelect: Boolean
         },
         computed: {
-            styleObject() {                
-                let element = this.item.config.element;
+            style() {
                 return {
-                    backgroundColor: element.fill,
-                    border: '1px solid ' + element.stroke
-                }
+                    backgroundColor: this.item.fill,
+                    border: '1px solid ' + this.item.stroke
+                };
             }
         },
         mounted() {
-            this.item.config.attachListeners();
+            let context = {
+                layoutItem: this.item,
+                index: this.index
+            };
+            this.removeSelectable = this.openmct.selection.selectable(
+                this.$el,
+                context,
+                this.initSelect
+            );
         },
         destroyed() {
-            this.item.config.removeListeners();
+            if (this.removeSelectable) {
+                this.removeSelectable();
+            }
         }
     }
- </script>
+ </script>
+