Merge pull request nasa#1406 from nasa/separate-timeline-and-plot

[Reorg] Make timeline-specific chart directive

Author: akhenry

docs/src/guide/index.md

@@ -1339,41 +1339,6 @@ are supported:
 Open MCT defines several Angular directives that are intended for use both 
 internally within the platform, and by plugins. 
 
-## Chart 
-
-The `mct-chart` directive is used to support drawing of simple charts. It is 
-present to support the Plot view, and its functionality is limited to the 
-functionality that is relevant for that view.
-
-This directive is used at the element level and takes one attribute, `draw` 
-which is an Angular expression which will should evaluate to a drawing object. 
-This drawing object should contain the following properties:
-
-* `dimensions`: The size, in logical coordinates, of the chart area. A 
-two-element array or numbers. 
-* `origin`: The position, in logical coordinates, of the lower-left corner of 
-the chart area. A two-element array or numbers. 
-* `lines`: An array of lines (e.g. as a plot line) to draw, where each line is 
-expressed as an object containing: 
-    * `buffer`: A Float32Array containing points in the line, in logical 
-    coordinates, in sequential x,y pairs. 
-    * `color`: The color of the line, as a four-element RGBA array, where 
-    each element is a number in the range of 0.0-1.0. 
-    * `points`: The number of points in the line. 
-* `boxes`: An array of rectangles to draw in the chart area. Each is an object 
-containing: 
-    * `start`: The first corner of the rectangle, as a two-element array of 
-    numbers, in logical coordinates. 
-    * `end`: The opposite corner of the rectangle, as a two-element array of 
-    numbers, in logical coordinates. color : The color of the line, as a 
-    four-element RGBA array, where each element is a number in the range of 
-    0.0-1.0. 
-
-While `mct-chart` is intended to support plots specifically, it does perform 
-some useful management of canvas objects (e.g. choosing between WebGL and Canvas 
-2D APIs for drawing based on browser support) so its usage is recommended when 
-its supported drawing primitives are sufficient for other charting tasks. 
- 
 ## Container 
 
 The `mct-container` is similar to the `mct-include` directive insofar as it allows 

platform/features/plot/README.md

@@ -0,0 +1,37 @@
+# Plot README
+
+## Chart 
+
+The `mct-chart` directive is used to support drawing of simple charts. It is 
+present to support the Plot view, and its functionality is limited to the 
+functionality that is relevant for that view.
+
+This directive is used at the element level and takes one attribute, `draw` 
+which is an Angular expression which will should evaluate to a drawing object. 
+This drawing object should contain the following properties:
+
+* `dimensions`: The size, in logical coordinates, of the chart area. A 
+two-element array or numbers. 
+* `origin`: The position, in logical coordinates, of the lower-left corner of 
+the chart area. A two-element array or numbers. 
+* `lines`: An array of lines (e.g. as a plot line) to draw, where each line is 
+expressed as an object containing: 
+    * `buffer`: A Float32Array containing points in the line, in logical 
+    coordinates, in sequential x,y pairs. 
+    * `color`: The color of the line, as a four-element RGBA array, where 
+    each element is a number in the range of 0.0-1.0. 
+    * `points`: The number of points in the line. 
+* `boxes`: An array of rectangles to draw in the chart area. Each is an object 
+containing: 
+    * `start`: The first corner of the rectangle, as a two-element array of 
+    numbers, in logical coordinates. 
+    * `end`: The opposite corner of the rectangle, as a two-element array of 
+    numbers, in logical coordinates. color : The color of the line, as a 
+    four-element RGBA array, where each element is a number in the range of 
+    0.0-1.0. 
+
+While `mct-chart` is intended to support plots specifically, it does perform 
+some useful management of canvas objects (e.g. choosing between WebGL and Canvas 
+2D APIs for drawing based on browser support) so its usage is recommended when 
+its supported drawing primitives are sufficient for other charting tasks. 
+ 

platform/features/timeline/bundle.js

@@ -38,6 +38,7 @@ define([
     "./src/directives/MCTSwimlaneDrop",
     "./src/directives/MCTSwimlaneDrag",
     "./src/services/ObjectLoader",
+    "./src/chart/MCTTimelineChart",
     "text!./res/templates/values.html",
     "text!./res/templates/timeline.html",
     "text!./res/templates/activity-gantt.html",
@@ -67,6 +68,7 @@ define([
     MCTSwimlaneDrop,
     MCTSwimlaneDrag,
     ObjectLoader,
+    MCTTimelineChart,
     valuesTemplate,
     timelineTemplate,
     activityGanttTemplate,
@@ -556,6 +558,14 @@ define([
                     "depends": [
                         "dndService"
                     ]
+                },
+                {
+                    "key": "mctTimelineChart",
+                    "implementation": MCTTimelineChart,
+                    "depends": [
+                        "$interval",
+                        "$log"
+                    ]
                 }
             ],
             "services": [

platform/features/timeline/res/templates/resource-graphs.html

@@ -22,7 +22,7 @@
 <span ng-controller="TimelineGraphController as graphController">
     <div class="t-graph l-graph" ng-repeat="graph in parameters.graphs">
         <div class="l-graph-area l-canvas-holder">
-            <mct-chart draw="graph.drawingObject"></mct-chart>
+            <mct-timeline-chart draw="graph.drawingObject"></mct-timeline-chart>
         </div>
         <div class="t-graph-labels l-graph-labels">
             <mct-include key="'timeline-resource-graph-labels'"
@@ -31,4 +31,4 @@
             </mct-include>
         </div>
     </div>
-</span>
+</span>

platform/features/timeline/src/chart/Canvas2DChart.js

@@ -0,0 +1,117 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2016, 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 () {
+
+        /**
+         * Create a new chart which uses Canvas's 2D API for rendering.
+         *
+         * @memberof platform/features/plot
+         * @constructor
+         * @implements {platform/features/plot.Chart}
+         * @param {CanvasElement} canvas the canvas object to render upon
+         * @throws {Error} an error is thrown if Canvas's 2D API is unavailable.
+         */
+        function Canvas2DChart(canvas) {
+            this.canvas = canvas;
+            this.c2d = canvas.getContext('2d');
+            this.width = canvas.width;
+            this.height = canvas.height;
+            this.dimensions = [this.width, this.height];
+            this.origin = [0, 0];
+
+            if (!this.c2d) {
+                throw new Error("Canvas 2d API unavailable.");
+            }
+        }
+
+        // Convert from logical to physical x coordinates
+        Canvas2DChart.prototype.x = function (v) {
+            return ((v - this.origin[0]) / this.dimensions[0]) * this.width;
+        };
+
+        // Convert from logical to physical y coordinates
+        Canvas2DChart.prototype.y = function (v) {
+            return this.height -
+                ((v - this.origin[1]) / this.dimensions[1]) * this.height;
+        };
+
+        // Set the color to be used for drawing operations
+        Canvas2DChart.prototype.setColor = function (color) {
+            var mappedColor = color.map(function (c, i) {
+                return i < 3 ? Math.floor(c * 255) : (c);
+            }).join(',');
+            this.c2d.strokeStyle = "rgba(" + mappedColor + ")";
+            this.c2d.fillStyle = "rgba(" + mappedColor + ")";
+        };
+
+
+        Canvas2DChart.prototype.clear = function () {
+            var canvas = this.canvas;
+            this.width = canvas.width;
+            this.height = canvas.height;
+            this.c2d.clearRect(0, 0, this.width, this.height);
+        };
+
+        Canvas2DChart.prototype.setDimensions = function (newDimensions, newOrigin) {
+            this.dimensions = newDimensions;
+            this.origin = newOrigin;
+        };
+
+        Canvas2DChart.prototype.drawLine = function (buf, color, points) {
+            var i;
+
+            this.setColor(color);
+
+            // Configure context to draw two-pixel-thick lines
+            this.c2d.lineWidth = 2;
+
+            // Start a new path...
+            if (buf.length > 1) {
+                this.c2d.beginPath();
+                this.c2d.moveTo(this.x(buf[0]), this.y(buf[1]));
+            }
+
+            // ...and add points to it...
+            for (i = 2; i < points * 2; i = i + 2) {
+                this.c2d.lineTo(this.x(buf[i]), this.y(buf[i + 1]));
+            }
+
+            // ...before finally drawing it.
+            this.c2d.stroke();
+        };
+
+        Canvas2DChart.prototype.drawSquare = function (min, max, color) {
+            var x1 = this.x(min[0]),
+                y1 = this.y(min[1]),
+                w = this.x(max[0]) - x1,
+                h = this.y(max[1]) - y1;
+
+            this.setColor(color);
+            this.c2d.fillRect(x1, y1, w, h);
+        };
+
+        return Canvas2DChart;
+    }
+);