led-canvas/lib/index.js

Lightweight led board implemented with canvas

"use strict";

var _argumentsToArray = function (args) {
  var target = new Array(args.length);
  for (var i = 0; i < args.length; i++) {
    target[i] = args[i];
  }

  return target;
};

var _toArray = function (arr) {
  return Array.isArray(arr) ? arr : Array.from(arr);
};

var _classProps = function (child, staticProps, instanceProps) {
  if (staticProps) Object.defineProperties(child, staticProps);
  if (instanceProps) Object.defineProperties(child.prototype, instanceProps);
};

var _extends = function (child, parent) {
  child.prototype = Object.create(parent.prototype, {
    constructor: {
      value: child,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  child.__proto__ = parent;
};

var objectAssign = require("object-assign");
var LedCanvasMatrix = require("led-canvas-matrix");
var LedCanvasText = require("led-canvas-text");
var NanoEventEmitter = require("nano-event-emitter");

//var Cursor = require('./cursor');
var loop = require("./animation/loop");
var defaults = require("./defaults");

var LedCanvas = (function (NanoEventEmitter) {
  var LedCanvas =
  /**
   * Constructs a new LedCanvas instance
   * @param  {HTMLCanvasElement} [el] - <canvas> element to draw on
   * @param  {Object} [options] - LedCanvas options
   * @param  {Class}  [LedClass] - Led class to use
   * @return {Object} LedCanvas instance
   */
  function LedCanvas(el, options, LedClass) {
    this.options = objectAssign({}, defaults, options || {});
    this.ledClass = LedClass;
    this.setup(el);
    NanoEventEmitter.call(this);
  };

  _extends(LedCanvas, NanoEventEmitter);

  _classProps(LedCanvas, null, {
    setup: {
      writable: true,


      /**
       * Sets up basic dimensions and rendering context
       * @param  {HTMLCanvasElement} [el] - <canvas> element to draw on
       */
      value: function (el) {
        var _this = this;
        el.width = el.clientWidth * window.devicePixelRatio;
        el.height = el.clientHeight * window.devicePixelRatio;
        this.context = el.getContext("2d");
        this.matrix = new LedCanvasMatrix(0, 0, this.options.matrix.width, this.options.matrix.height, function (x, y) {
          return _this.getLed(x, y);
        });
      }
    },
    getLed: {
      writable: true,


      /**
       * Return a new Led
       */
      value: function (x, y) {
        return new this.ledClass(x, y, this.options.matrix.dim);
      }
    },
    start: {
      writable: true,


      /**
       * Starts a requestAnimationFrame loop
       */
      value: function () {
        loop(this);
      }
    },
    get: {
      writable: true,


      /**
       * Get a single led at {x, y}
       * @param {Integer} x - x coordinate of the led to retrieve
       * @param {Integer} y - y coordinate of the led to retrieve
       */
      value: function () {
        var args = _argumentsToArray(arguments);

        return this.matrix.get.apply(this.matrix, _toArray(args));
      }
    },
    prop: {
      writable: true,


      /**
       * Get all leds with the given property values
       * @param {String} key - Property name
       * @param {mixed} value - Property value to match against
       */
      value: function () {
        var args = _argumentsToArray(arguments);

        return this.matrix.prop.apply(this.matrix, _toArray(args));
      }
    },
    row: {
      writable: true,


      /**
       * Get all leds on row with index [y]
       * @param {Integer} y - y coordinate of the row to retrieve
       */
      value: function (y) {
        return this.matrix.row(y);
      }
    },
    column: {
      writable: true,


      /**
       * Get all leds on column with index [x]
       * @param {Integer} x - x coordinate of the column to retrieve
       */
      value: function (x) {
        return this.matrix.column(x);
      }
    },
    rect: {
      writable: true,


      /**
       * Get all leds contained by a rectangle with {x:x, y:y, width:width, height:height}
       * @param {Integer} x - x coordinate of the rectangle's upperleft corner
       * @param {Integer} y - y coordinate of the rectangle's upperleft corner
       * @param {Integer} width - width of the rectangle
       * @param {Integer} height - height of the rectangle
       */
      value: function () {
        var args = _argumentsToArray(arguments);

        return this.matrix.rect.apply(this.matrix, _toArray(args));
      }
    },
    render: {
      writable: true,


      /**
       * Rerender all changed leds on the board
       * @param {CanvasRenderingContext2D} context - Rendering context drawn on
       * @param {Integer} timestamp - Time delta since the loop has been started
       */
      value: function () {
        var args = _argumentsToArray(arguments);

        this.emit.apply(this, ["before:render"].concat(_toArray(args)));
        this.matrix.render.apply(this.matrix, _toArray(args));
        this.emit.apply(this, ["after:render"].concat(_toArray(args)));
        return this;
      }
    },
    set: {
      writable: true,


      /**
       * Set a single led's state
       * @param {Integer} x - x coordinate of the led to manipulate
       * @param {Integer} y - y coordinate of the led to manipulate
       * @param {Boolean} [state=true] - Target state of the led
       */
      value: function (x, y, state) {
        if (state === undefined) state = true;
        return this.matrix.get(x, y).set(state);
      }
    },
    toggle: {
      writable: true,


      /**
       * Toggle a single led's state
       * @param {Integer} x - x coordinate of the led to manipulate
       * @param {Integer} y - y coordinate of the led to manipulate
       * @param {Boolean} [state] - Target state of the led
       */
      value: function (x, y, state) {
        return this.matrix.get(x, y).toggle(state);
      }
    },
    move: {
      writable: true,


      /**
       * Move a given matrix by x horizontally and y vertically on the matrix
       * @param {Matrix} matrix - matrix to move on the board
       * @param {Integer} [x=0] - Number of leds to move the matrix on the x-axis by
       * @param {Integer} [y=0] - Number of leds to move the matrix on the y-axis by
       */
      value: function (matrix, x, y) {
        var _this2 = this;
        if (x === undefined) x = 0;
        if (y === undefined) y = 0;
        var enabledLeds = [];

        var leds = matrix.leds.map(function (led) {
          var nextLed = _this2.matrix.get(led.x + x, led.y + y);

          if (led.enabled) {
            enabledLeds.push(nextLed);
          }

          return nextLed.leds[0];
        });

        matrix.set(false);

        enabledLeds.forEach(function (led) {
          led.set(true);
        });

        return new LedCanvasMatrix(matrix.x + x, matrix.y + y, matrix.width, matrix.height, leds);
      }
    },
    write: {
      writable: true,


      /**
       * Write a string to the led board
       * @param {String} str - string to write to the led board
       * @param {Integer} x - starting x coordinate to write from
       * @param {Integer} y - starting y coordinate to write from
       */
      value: function (str, font, x, y) {
        var _this3 = this;
        if (x === undefined) x = 0;
        if (y === undefined) y = 0;
        return this.insert(new LedCanvasText(str, font, function (xc, yc) {
          return _this3.getLed(xc, yc);
        }), x, y);
      }
    },
    insert: {
      writable: true,


      /**
       * Insert a matrix to the led board
       * @param {Object} LedMatrix - matrix to render on the led board
       * @param {Integer} x - starting x coordinate to render from
       * @param {Integer} y - starting y coordinate to render from
       */
      value: function (matrix, x, y) {
        if (x === undefined) x = 0;
        if (y === undefined) y = 0;
        return this.matrix.join(matrix, x, y);
      }
    }
  });

  return LedCanvas;
})(NanoEventEmitter);

function ledCanvasFactory(el, options, LedClass, font) {
  return new LedCanvas(el, options, LedClass, font);
}

module.exports = ledCanvasFactory;