led-canvas-led/lib/index.js

Example LED class to be used by https://github.com/marionebl/led-canvas

"use strict";

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

var arc = Math.PI * 2;
var white = "rgba(255,255,255,1)";
var fadeout = "rgba(255,255,255,.1)";

var Styles = require("./styles");
var State = require("./state");

var Led = (function () {
  var Led =
  /**
   * Construct a new instance of Led
   * @param  {Integer} x - x coordinate of the new Led
   * @param  {Integer} y - y coordinate of the new Led
   * @param  {Integer} size - diameter in px of the new Led
   * @param {Boolean} enabled - enabled/disabled state of the new Led
   * @return {Led} new Led instance
   */
  function Led(x, y, size, enabled) {
    var _this = this;
    if (enabled === undefined) enabled = false;
    return (function () {
      _this.x = x;
      _this.y = y;
      _this.size = size;

      _this.styles = new Styles({
        enabled: {
          fillStyle: white,
          shadowColor: white,
          shadowBlur: _this.size / 2 - (_this.size / 2 - _this.size / 7.5)
        },
        disabled: {
          fillStyle: fadeout
        }
      });

      _this.state = new State({
        enabled: enabled
      });

      _this.enabled = enabled;
    })();
  };

  _classProps(Led, null, {
    cache: {
      writable: true,


      /**
       * Recaches the led's current state
       * @return {Boolean} - if the current state is valid from cache
       */
      value: function () {
        if (this.state.is(this.prev)) {
          return true;
        }
        this.prev = this.state.get();
        return false;
      }
    },
    toggle: {
      writable: true,


      /**
       * Toggles the led's state
       * @param {Boolean} [flag] Forced target state flag
       * @return {Led} Current instance of Led
       */
      value: function (flag) {
        if (typeof flag === "boolean") {
          this.enabled = flag;
        } else {
          this.enabled = !this.enabled;
        }

        return this;
      }
    },
    set: {
      writable: true,


      /**
       * Sets a style property
       * @param {String} key - Name of the style property to set
       * @param {String} vale - Value to assign to the property with name [key]
       * @return {Led} Current instance of Led
       */
      value: function (key, value) {
        if (typeof key === "undefined") {
          return this;
        }

        this.cache();
        var styles = this.state.get("styles");
        styles[key] = value;
        this.state = this.state.set("styles", styles);
        return this;
      }
    },
    enabled: {
      set: function (state) {
        this.cache();
        this.state = this.state.set("enabled", state);
        this.state = this.state.set("styles", this.styles.get(state ? "enabled" : "disabled"));
        return this;
      },
      get: function () {
        return this.state.get("enabled");
      }
    },
    figure: {
      writable: true,


      /**
       * Constructs the led graphics based on its state and style properties
       * @param {CanvasRenderingContext2D} context - Rendering context to paint on
       */
      value: function (context) {
        var x = this.x * this.size;
        var y = this.y * this.size;
        var radius = this.size / 2;
        var inner = radius - this.size / 7.5;

        if (typeof this.prev !== "undefined") {
          context.clearRect(x, y, this.size, this.size);
        }

        context.beginPath();
        context.arc(x + radius, y + radius, inner, 0, arc);

        var styles = this.state.get("styles") || {};

        Object.keys(styles).forEach(function (property) {
          context[property] = styles[property];
        });

        context.fill();
      }
    },
    render: {
      writable: true,


      /**
       * Renders the led on the given RenderingContext
       * @param {CanvasRenderingContext2D} context - Rendering context to paint on
       */
      value: function (context) {
        if (this.cache()) {
          return;
        }

        context.save();
        this.figure(context);
        context.restore();
      }
    }
  });

  return Led;
})();

module.exports = Led;