[Fixed Position] Change UI pixel/grid toggle to checkbox

Change the input for grid units/pixels to a simple checkbox toggle from a
dropdown menu.

Add a new specialized AccessorMutator class to support this operation.

platform/features/fixed/bundle.js

@@ -212,21 +212,15 @@ define([
                                         "control": "numberfield",
                                         "description": "Resize object width",
                                         "min": "1"
-                                    },
+                                    }
+                                ]
+                            },
+                            {
+                                "items": [
                                     {
-                                        "method": "setUnits",
+                                        "property": "useGrid",
-                                        "name": "Units",
+                                        "name": "Snap to Grid",
-                                        "control": "menu-button",
+                                        "control": "checkbox"
-                                        "options": [
-                                            {
-                                                "name": "px",
-                                                "key": "px"
-                                            },
-                                            {
-                                                "name": "grid",
-                                                "key": "grid"
-                                            }
-                                        ]
                                     }
                                 ]
                             },

platform/features/layout/src/elements/ElementProxy.js

@@ -21,8 +21,8 @@
  *****************************************************************************/
 
 define(
-    ['./AccessorMutator', './ResizeHandle'],
+    ['./AccessorMutator', './ResizeHandle', './UnitAccessorMutator'],
-    function (AccessorMutator, ResizeHandle) {
+    function (AccessorMutator, ResizeHandle, UnitAccessorMutator) {
 
         // Index deltas for changes in order
         var ORDERS = {
@@ -122,9 +122,10 @@ define(
              */
             this.height = new AccessorMutator(element, 'height');
 
+            this.useGrid = new UnitAccessorMutator(this);
+
             this.index = index;
             this.elements = elements;
-            this.useGrid = element.useGrid;
         }
 
         /**

platform/features/layout/src/elements/UnitAccessorMutator.js

@@ -0,0 +1,55 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2017, 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 () {
+
+        /**
+         * Variant of AccessorMutator to handle the specific case of updating
+         * useGrid, in order update the positions appropriately from within
+         * the scope of UnitAccessorMutator
+         *
+         * @memberof platform/features/layout
+         * @constructor
+         * @param {ElementProxy} proxy ElementProxy object to perform the update
+         *                             upon
+         */
+        function UnitAccessorMutator(elementProxy) {
+            return function (useGrid) {
+                var current = elementProxy.element.useGrid;
+                if (arguments.length > 0) {
+                    elementProxy.element.useGrid = useGrid;
+                    if (useGrid && !current) {
+                        elementProxy.convertCoordsTo('grid');
+                    } else if (!useGrid && current) {
+                        elementProxy.convertCoordsTo('px');
+                    }
+                }
+
+                return elementProxy.element.useGrid;
+            };
+        }
+
+        return UnitAccessorMutator;
+    }
+);