[Layout] Utilize mct-drag

Utilize mct-drag in the layout view to allow editing
of frame position by drag. WTD-535.

platform/features/layout/res/templates/layout.html

@@ -11,6 +11,14 @@
             </mct-representation>
         </div>
 
+        <span>
+            <span style="position: absolute; left: 12px; right: 12px; top: 12px; bottom: 12px;"
+                  mct-drag-down="controller.startDrag(childObject.getId(), [1,1], [0,0])"
+                  mct-drag="controller.continueDrag(delta)"
+                  mct-drag-up="controller.endDrag()">
+            </span>
+        </span>
+
     </div>
 
 </div>

platform/features/layout/src/LayoutController.js

@@ -1,15 +1,17 @@
 /*global define*/
 
 define(
-    [],
+    ['./LayoutDrag'],
-    function () {
+    function (LayoutDrag) {
         "use strict";
 
-        var DEFAULT_DIMENSIONS = [ 4, 2 ];
+        var DEFAULT_DIMENSIONS = [ 12, 8 ];
 
         function LayoutController($scope) {
-            var width = 16,
+            var width = 32,
-                height = 16,
+                height = 32,
+                activeDrag,
+                activeDragId,
                 rawPositions = {},
                 positions = {};
 
@@ -30,8 +32,10 @@ define(
             }
 
             function populatePosition(id, index) {
-                rawPositions[id] = rawPositions[id] || defaultPosition(index);
+                rawPositions[id] =
-                positions[id] = convertPosition(rawPositions[id]);
+                    rawPositions[id] || defaultPosition(index || 0);
+                positions[id] =
+                    convertPosition(rawPositions[id]);
             }
 
             function lookupPanels(model) {
@@ -55,14 +59,24 @@ define(
                 getFrameStyle: function (id) {
                     return positions[id];
                 },
-                startDrag: function (event) {
+                startDrag: function (id, posFactor, dimFactor) {
-                    console.log("start", event);
+                    activeDragId = id;
+                    activeDrag = new LayoutDrag(
+                        rawPositions[id],
+                        posFactor,
+                        dimFactor,
+                        [ width, height ]
+                    );
                 },
-                continueDrag: function (event) {
+                continueDrag: function (delta) {
-                    console.log("continue", event);
+                    if (activeDrag) {
+                        rawPositions[activeDragId] =
+                            activeDrag.getAdjustedPosition(delta);
+                        populatePosition(activeDragId);
+                    }
                 },
-                endDrag: function (event) {
+                endDrag: function () {
-                    console.log("end", event);
+                    // TODO: Mutate, persist
                 }
             };
 

platform/features/layout/src/LayoutDrag.js

@@ -0,0 +1,56 @@
+/*global define*/
+
+define(
+    [],
+    function () {
+        "use strict";
+
+        function LayoutDrag(rawPosition, posFactor, dimFactor, gridSize) {
+            function toGridDelta(pixelDelta) {
+                return pixelDelta.map(function (v, i) {
+                    return Math.round(v / gridSize[i]);
+                });
+            }
+
+            function multiply(array, factors) {
+                return array.map(function (v, i) {
+                    return v * factors[i];
+                });
+            }
+
+            function add(array, other) {
+                return array.map(function (v, i) {
+                    return v + other[i];
+                });
+            }
+
+            function max(array, other) {
+                return array.map(function (v, i) {
+                    return Math.max(v, other[i]);
+                });
+            }
+
+            function getAdjustedPosition(pixelDelta) {
+                var gridDelta = toGridDelta(pixelDelta);
+                return {
+                    position: max(add(
+                        rawPosition.position,
+                        multiply(gridDelta, posFactor)
+                    ), [0, 0]),
+                    dimensions: max(add(
+                        rawPosition.dimensions,
+                        multiply(gridDelta, dimFactor)
+                    ), [1, 1])
+                };
+
+            }
+
+            return {
+                getAdjustedPosition: getAdjustedPosition
+            };
+        }
+
+        return LayoutDrag;
+
+    }
+);