Vue toolbar (#2191)

* Add a toolbar provider for display layout.

* Move toolbar provider to the plugin

* basic toolbar generation

* componentize different toolbar control types

Break toolbar control types down into different parts and provide
a test toolbar generator in index.html that utilizes all the
controls.

* Get the 'Show frame' checkbox working in the toolbar

* - Remove extra listener.
- Display toolbar only when editing.

* Modify the Selection API to set s-selected and s-selected-parent attributes instead of adding to the css class names.

* Move the logic for allowing the toolbar in the edit mode to the provider.

* Use toggle-button component to toggle frame

* Delete old files

* Remove MCTToolbar

* Modify the toggle button component to return the computed value

* Remove reload=true

* Revert to the original setting

* use value from props

* Always update toolbars on edit status change

* restore fixed position bundle

* bring back reload when hmr unavailable

platform/features/fixed/src/FixedDragHandle.js

@@ -0,0 +1,110 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+define(
+    [],
+    function () {
+
+        // Drag handle dimensions
+        var DRAG_HANDLE_SIZE = [6, 6];
+
+        /**
+         * Template-displayable drag handle for an element in fixed
+         * position mode.
+         *
+         * @param elementHandle the element handle
+         * @param configPath the configuration path of an element
+         * @param {Object} fixedControl the fixed controller
+         * @memberof platform/features/layout
+         * @constructor
+         */
+        function FixedDragHandle(elementHandle, configPath, fixedControl) {
+            this.elementHandle = elementHandle;
+            this.configPath = configPath;
+            this.fixedControl = fixedControl;
+        }
+
+        /**
+         * Get a CSS style to position this drag handle.
+         *
+         * @returns CSS style object (for `ng-style`)
+         * @memberof platform/features/layout.FixedDragHandle#
+         */
+        FixedDragHandle.prototype.style = function () {
+            var gridSize = this.elementHandle.getGridSize();
+
+            // Adjust from grid to pixel coordinates
+            var x = this.elementHandle.x() * gridSize[0],
+                y = this.elementHandle.y() * gridSize[1];
+
+            // Convert to a CSS style centered on that point
+            return {
+                left: (x - DRAG_HANDLE_SIZE[0] / 2) + 'px',
+                top: (y - DRAG_HANDLE_SIZE[1] / 2) + 'px',
+                width: DRAG_HANDLE_SIZE[0] + 'px',
+                height: DRAG_HANDLE_SIZE[1] + 'px'
+            };
+        };
+
+        /**
+         * Start a drag gesture. This should be called when a drag
+         * begins to track initial state.
+         */
+        FixedDragHandle.prototype.startDrag = function () {
+            // Cache initial x/y positions
+            this.dragging = {
+                x: this.elementHandle.x(),
+                y: this.elementHandle.y()
+            };
+        };
+
+        /**
+         * Continue a drag gesture; update x/y positions.
+         *
+         * @param {number[]} delta x/y pixel difference since drag started
+         */
+        FixedDragHandle.prototype.continueDrag = function (delta) {
+            var gridSize = this.elementHandle.getGridSize();
+
+            if (this.dragging) {
+                // Update x/y positions (snapping to grid)
+                var newX = this.dragging.x + Math.round(delta[0] / gridSize[0]);
+                var newY = this.dragging.y + Math.round(delta[1] / gridSize[1]);
+
+                this.elementHandle.x(Math.max(0, newX));
+                this.elementHandle.y(Math.max(0, newY));
+                this.fixedControl.updateSelectionStyle();
+            }
+        };
+
+        /**
+         * End a drag gesture. This should be called when a drag
+         * concludes to trigger commit of changes.
+         */
+        FixedDragHandle.prototype.endDrag = function () {
+            this.dragging = undefined;
+            this.fixedControl.mutate(this.configPath, this.elementHandle.element);
+        };
+
+        return FixedDragHandle;
+    }
+);