[Fixed Position] Draw line as SVG

Draw line elements as SVG, WTD-880.

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

@@ -1,4 +1,10 @@
-<div ng-style="{ background: ngModel.fill }"
-     style="width: 100%; height: 100%">
-    ...line...
-</div>
+<svg ng-attr-width="{{parameters.gridSize[0] * ngModel.width()}}"
+     ng-attr-height="{{parameters.gridSize[1] * ngModel.height()}}">
+    <line ng-attr-x1="{{parameters.gridSize[0] * ngModel.x1()}}"
+          ng-attr-y1="{{parameters.gridSize[1] * ngModel.y1()}}"
+          ng-attr-x2="{{parameters.gridSize[0] * ngModel.x2()}}"
+          ng-attr-y2="{{parameters.gridSize[1] * ngModel.y2()}}"
+          stroke="lightgray"
+          stroke-width="2">
+    </line>
+</svg>

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

@@ -14,6 +14,7 @@
     <mct-include ng-repeat="element in controller.getElements()"
                  style="position: absolute;"
                  key="element.template"
+                 parameters="{ gridSize: controller.getGridSize() }"
                  ng-class="{ test: controller.selected(element) }"
                  ng-style="element.style"
                  ng-click="controller.select(element)"

platform/features/layout/src/FixedController.js

@@ -52,13 +52,13 @@ define(
 
             // Convert from element x/y/width/height to an
             // apropriate ng-style argument, to position elements.
-            function convertPosition(raw) {
+            function convertPosition(elementProxy) {
                 // Multiply position/dimensions by grid size
                 return {
-                    left: (gridSize[0] * raw.x) + 'px',
-                    top: (gridSize[1] * raw.y) + 'px',
-                    width: (gridSize[0] * raw.width) + 'px',
-                    height: (gridSize[1] * raw.height) + 'px'
+                    left: (gridSize[0] * elementProxy.x()) + 'px',
+                    top: (gridSize[1] * elementProxy.y()) + 'px',
+                    width: (gridSize[0] * elementProxy.width()) + 'px',
+                    height: (gridSize[1] * elementProxy.height()) + 'px'
                 };
             }
 
@@ -89,7 +89,7 @@ define(
 
                 if (e) {
                     // Provide a displayable position (convert from grid to px)
-                    e.style = convertPosition(element);
+                    e.style = convertPosition(e);
                     // Template names are same as type names, presently
                     e.template = element.type;
                 }
@@ -227,6 +227,14 @@ define(
                 getCellStyles: function () {
                     return cellStyles;
                 },
+                /**
+                 * Get the size of the grid, in pixels. The returned array
+                 * is in the form `[x, y]`.
+                 * @returns {number[]} the grid size
+                 */
+                getGridSize: function () {
+                    return gridSize;
+                },
                 /**
                  * Set the size of the viewable fixed position area.
                  * @memberof FixedController#
@@ -308,9 +316,11 @@ define(
                  */
                 continueDrag: function (delta) {
                     if (dragging) {
+                        // Update x/y values
                         dragging.element.x(dragging.x + Math.round(delta[0] / gridSize[0]));
                         dragging.element.y(dragging.y + Math.round(delta[1] / gridSize[1]));
-                        dragging.element.style = convertPosition(dragging.element.element);
+                        // Update display position
+                        dragging.element.style = convertPosition(dragging.element);
                     }
                 },
                 /**

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

@@ -11,7 +11,12 @@ define(
                     fill: "#888",
                     border: "transparent"
                 },
-                "fixed.line": {},
+                "fixed.line": {
+                    x: 0,
+                    y: 0,
+                    x2: 5,
+                    y2: 3
+                },
                 "fixed.text": {
                     fill: "transparent",
                     border: "transparent"

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

@@ -1,13 +1,13 @@
 /*global define*/
 
 define(
-    ['./TelemetryProxy', './ElementProxy'],
-    function (TelemetryProxy, ElementProxy) {
+    ['./TelemetryProxy', './ElementProxy', './LineProxy'],
+    function (TelemetryProxy, ElementProxy, LineProxy) {
         "use strict";
 
         return {
             "fixed.telemetry": TelemetryProxy,
-            "fixed.line": ElementProxy,
+            "fixed.line": LineProxy,
             "fixed.box": ElementProxy,
             "fixed.image": ElementProxy,
             "fixed.text": ElementProxy

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

@@ -0,0 +1,63 @@
+/*global define*/
+
+define(
+    ['./ElementProxy'],
+    function (ElementProxy) {
+        'use strict';
+
+        /**
+         *
+         */
+        function LineProxy(element, index, elements) {
+            var proxy = new ElementProxy(element, index, elements);
+
+            proxy.x = function (v) {
+                var x = Math.min(element.x, element.x2),
+                    delta = v - x;
+                if (arguments.length > 0 && delta) {
+                    element.x += delta;
+                    element.x2 += delta;
+                }
+                return x;
+            };
+
+            proxy.y = function (v) {
+                var y = Math.min(element.y, element.y2),
+                    delta = v - y;
+                if (arguments.length > 0 && delta) {
+                    element.y += delta;
+                    element.y2 += delta;
+                }
+                return y;
+            };
+
+            proxy.width = function () {
+                return Math.max(element.x, element.x2) - proxy.x();
+            };
+
+            proxy.height = function () {
+                return Math.max(element.y, element.y2) - proxy.y();
+            };
+
+            proxy.x1 = function () {
+                return element.x - proxy.x();
+            };
+
+            proxy.y1 = function () {
+                return element.y - proxy.y();
+            };
+
+            proxy.x2 = function () {
+                return element.x2 - proxy.x();
+            };
+
+            proxy.y2 = function () {
+                return element.y2 - proxy.y();
+            };
+
+            return proxy;
+        }
+
+        return LineProxy;
+    }
+);