openmct/platform/features/plot/src/Canvas2DChart.js

/*global define,Float32Array*/

define(
    [],
    function () {
        "use strict";

        /**
         * Create a new chart which uses Canvas's 2D API for rendering.
         *
         * @constructor
         * @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) {
            var c2d = canvas.getContext('2d'),
                width = canvas.width,
                height = canvas.height,
                dimensions = [ width, height ],
                origin = [ 0, 0 ];

            // Convert from logical to physical x coordinates
            function x(v) {
                return ((v - origin[0]) / dimensions[0]) * width;
            }

            // Convert from logical to physical y coordinates
            function y(v) {
                return height - ((v - origin[1]) / dimensions[1]) * height;
            }

            // Set the color to be used for drawing operations
            function setColor(color) {
                var mappedColor = color.map(function (c, i) {
                        return i < 3 ? Math.floor(c * 255) : (c);
                    }).join(',');
                c2d.strokeStyle = "rgba(" + mappedColor + ")";
                c2d.fillStyle = "rgba(" + mappedColor + ")";
            }

            if (!c2d) {
                throw new Error("Canvas 2d API unavailable.");
            }

            return {
                /**
                 * Clear the chart.
                 */
                clear: function () {
                    width = canvas.width;
                    height = canvas.height;
                    c2d.clearRect(0, 0, width, height);
                },
                /**
                 * Set the logical boundaries of the chart.
                 * @param {number[]} dimensions the horizontal and
                 *        vertical dimensions of the chart
                 * @param {number[]} origin the horizontal/vertical
                 *        origin of the chart
                 */
                setDimensions: function (newDimensions, newOrigin) {
                    dimensions = newDimensions;
                    origin = newOrigin;
                },
                /**
                 * Draw the supplied buffer as a line strip (a sequence
                 * of line segments), in the chosen color.
                 * @param {Float32Array} buf the line strip to draw,
                 *        in alternating x/y positions
                 * @param {number[]} color the color to use when drawing
                 *        the line, as an RGBA color where each element
                 *        is in the range of 0.0-1.0
                 * @param {number} points the number of points to draw
                 */
                drawLine: function (buf, color, points) {
                    var i;

                    setColor(color);

                    // Configure context to draw two-pixel-thick lines
                    c2d.lineWidth = 2;

                    // Start a new path...
                    if (buf.length > 1) {
                        c2d.beginPath();
                        c2d.moveTo(x(buf[0]), y(buf[1]));
                    }

                    // ...and add points to it...
                    for (i = 2; i < points * 2; i = i + 2) {
                        c2d.lineTo(x(buf[i]), y(buf[i + 1]));
                    }

                    // ...before finally drawing it.
                    c2d.stroke();
                },
                /**
                 * Draw a rectangle extending from one corner to another,
                 * in the chosen color.
                 * @param {number[]} min the first corner of the rectangle
                 * @param {number[]} max the opposite corner
                 * @param {number[]} color the color to use when drawing
                 *        the rectangle, as an RGBA color where each element
                 *        is in the range of 0.0-1.0
                 */
                drawSquare: function (min, max, color) {
                    var x1 = x(min[0]),
                        y1 = y(min[1]),
                        w = x(max[0]) - x1,
                        h = y(max[1]) - y1;

                    setColor(color);
                    c2d.fillRect(x1, y1, w, h);
                }
            };
        }

        return Canvas2DChart;
    }
);