Display layout alphanumeric (#2203)

* Support displaying and adding telemerty points in display layouts.

* Create TelemetryView component. Also disable the toolbar frame button for telemetry objects.

* Add 'components' directory and move the toolbar provider definition to a separate file.

* Saving work

* Saving work

* Saving work

* Fix telemetryClass

* Fixes for .no-frame in new markup structure

- CSS cleaned up and reorganized;
- Added .c-telemetry-view classes;

* Add computed properties for hiding label and value.

* Filter value meta data based on the item config display mode.

* Add drop down menus for display mode and value

* Add toolbar controls for telemerty points

* Set border and fill related styles on telemetry view instead of layout item

* Refinements to telemetry view

- Stoke and fill styling now work;
- Internal element layout now much better when sizing in a Layout frame;
- Tweaked color of frame border while editing;

* Prevents adding a new (panel) object if it's already in the composition.

* Fix for jumping edit area

- Removed v-if from Toolbar.vue;
- Refined c-toolbar styling;
- TODO: don't include toolbar component when not editing, and for
components that don't use a toolbar;

* Add a separator toolbar control

* Check for domainObject being on the toolbar item as not all controls have that property

* Hide 'no fill' option from the text palette.
Modify the color-picker component to say 'No border' for stroke palette.

* Move the listener for hasFrame to the subobject view configuration

* Fixes for toolbar-separator

- New mixin;
- Corrected markup for separator;
- New class for .c-toolbar__separator;
- Updated DisplayLayoutToolbar.js to include separators in the right
spots;

* Get type from item.

* Include copyright notice.

* Use arrow function for consistency and define a TEXT_SIZE constant.

* Use composition API to add non-telemetry objects instead of relying on the drop handler.
Display a blocking dialog if an existing non-telemetry object is dropped.

* Fix text color picker icon

* Address reviewer's feedback

* Load the composition and update addObject() to render existing panels as well. Also, cache the telemetry value formatter.

* Add listener for changes to time bounds.

* Code cleanup

* Use getFormatMap() to store formats. Reset telemetry value and class before fetching new data.

* Fix a typo

* Define telemetry class and value as computed properties.

* Change context object definition

* Look at the telemetry metadata to find a good default for the value key instead of defaulting to 'sin'. Also, make formats reactive.

* Use let instead of var.

src/plugins/displayLayout/plugin.js

@@ -20,10 +20,11 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-import Layout from './DisplayLayout.vue'
+import Layout from './components/DisplayLayout.vue'
 import Vue from 'vue'
 import objectUtils from '../../api/objects/object-utils.js'
 import DisplayLayoutType from './DisplayLayoutType.js'
+import DisplayLayoutToolbar from './DisplayLayoutToolbar.js'
 
 export default function () {
     return function (openmct) {
@@ -63,6 +64,7 @@ export default function () {
             }
         });
         openmct.types.addType('layout', DisplayLayoutType());
+        openmct.toolbars.addProvider(new DisplayLayoutToolbar(openmct));
         openmct.composition.addPolicy((parent, child) => {
             if (parent.type === 'layout' && child.type === 'folder') {
                 return false;
@@ -70,41 +72,5 @@ export default function () {
                 return true;
             }
         });
-        openmct.toolbars.addProvider({
-            name: "Display Layout Toolbar",
-            key: "layout",
-            description: "A toolbar for objects inside a display layout.",
-            forSelection: function (selection) {
-                // Apply the layout toolbar if the selected object is inside a layout,
-                // and in edit mode.
-                return (selection &&
-                    selection[1] &&
-                    selection[1].context.item &&
-                    selection[1].context.item.type === 'layout' &&
-                    openmct.editor.isEditing());
-            },
-            toolbar: function (selection) {                
-                let id = openmct.objects.makeKeyString(selection[0].context.item.identifier);
-                return [
-                    {
-                        control: "toggle-button",
-                        domainObject: selection[1].context.item,
-                        property: "configuration.layout.panels[" + id + "].hasFrame",
-                        options: [
-                            {
-                                value: false,
-                                icon: 'icon-frame-hide',
-                                title: "Hide frame"
-                            },
-                            {
-                                value: true,
-                                icon: 'icon-frame-show',
-                                title: "Show frame"
-                            }
-                        ]
-                    }
-                ];
-            }
-        });
     }
 }