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/TextView.vue

@@ -21,10 +21,14 @@
  *****************************************************************************/
 
  <template>
-    <div class="c-text-view"
-         :style="styleObject">
-        {{ item.config.element.text }}
-    </div>
+    <layout-frame :item="item"
+                  :grid-size="gridSize"
+                  @endDrag="(item, updates) => $emit('endDrag', item, updates)">
+        <div class="c-text-view"
+             :style="style">
+            {{ item.text }}
+        </div>
+    </layout-frame>
  </template>
 
 <style lang="scss">
@@ -42,26 +46,55 @@
 </style>
 
  <script>
+    import LayoutFrame from './LayoutFrame.vue'
+
     export default {
+        makeDefinition(openmct, gridSize, element) {
+            return {
+                fill: 'transparent',
+                stroke: 'transparent',
+                size: '13px',
+                color: '',
+                x: 1,
+                y: 1,
+                width: 10,
+                height: 5,
+                text: element.text
+            };
+        },
+        inject: ['openmct'],
         props: {
-            item: Object
+            item: Object,
+            gridSize: Array,
+            index: Number,
+            initSelect: Boolean
+        },
+        components: {
+            LayoutFrame
         },
         computed: {
-            styleObject() {
-                let element = this.item.config.element;
+            style() {
                 return {
-                    backgroundColor: element.fill,
-                    borderColor: element.stroke,
-                    color: element.color,
-                    fontSize: element.size
-                }
+                    backgroundColor: this.item.fill,
+                    borderColor: this.item.stroke,
+                    color: this.item.color,
+                    fontSize: this.item.size
+                };
             }
         },
         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>
+