sideral/Graphic/Spinner.js

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var Graphic_1 = require("./../Graphic");
var Module_1 = require("./../Module");
var Tool_1 = require("./../Tool");
var Spinner = (function (_super) {
    __extends(Spinner, _super);
    /* LIFECYCLE */
    function Spinner() {
        var _this = _super.call(this) || this;
        /**
         * Shape lines of the spinner
         */
        _this.lines = [];
        _this.setProps({
            lines: 16,
            lineWidth: 10,
            centerSpacing: 15,
            lineHeight: 2,
            speed: 1000,
            color: Tool_1.Color.white
        });
        _this.connect(_this.signals.propChange, ["lineWidth", "lines"], _this.onLineChange.bind(_this))
            .connect(_this.signals.propChange, "speed", _this.onSpeedChange.bind(_this));
        return _this;
    }
    Spinner.prototype.initialize = function (props) {
        _super.prototype.initialize.call(this, props);
        this.onSpeedChange();
        this.onLineChange();
    };
    /* EVENTS */
    /**
     * Update the alpha of each lines
     * @param tick - Tick provided by the timer
     * @param value - Value of the timer
     * @param ratio - Ratio of the timer
     */
    Spinner.prototype.updateLinesAlpha = function (tick, value, ratio) {
        var _this = this;
        var length = this.lines.length;
        this.lines.forEach(function (line, i) { return line.props.fillAlpha = 1 - (ratio + (i / _this.props.lines)) % 1; });
    };
    /**
     * When lines attributes has changed
     */
    Spinner.prototype.onLineChange = function () {
        var angleFactor = 360 / this.props.lines;
        this.lines.forEach(function (lines) { return lines.kill(); });
        this.lines = [];
        for (var i = 0; i < this.props.lines; i++) {
            this.lines.push(this.spawn(new Module_1.Shape(), this.props.centerSpacing, 0, {
                offsetX: this.props.centerSpacing,
                offsetY: 0,
                fill: this.props.color,
                fillAlpha: (i / this.props.lines) % 1,
                width: this.props.lineWidth,
                height: this.props.lineHeight,
                angle: angleFactor * i
            }));
        }
        this.lines.reverse();
        this.props.width = this.container.width;
        this.props.height = this.container.height;
    };
    Spinner.prototype.onSpeedChange = function () {
        this.timers.addTimer("spin", this.props.speed, null, {
            recurrence: -1,
            update: this.updateLinesAlpha.bind(this)
        });
    };
    return Spinner;
}(Graphic_1.Graphic));
exports.Spinner = Spinner;