sideral/Graphic/Progress.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 Tool_1 = require("./../Tool");
var Progress = (function (_super) {
    __extends(Progress, _super);
    /* LIFECYCLE */
    function Progress() {
        var _this = _super.call(this) || this;
        _this.setProps({
            min: 0,
            max: 100,
            value: 0
        });
        _this.connect(_this.signals.propChange, ["min", "max", "value"], _this.onValueChange.bind(_this));
        return _this;
    }
    Progress.prototype.initialize = function (props) {
        _super.prototype.initialize.call(this, props);
        this.shape("fill", {
            width: this.getRatioWidth(),
            height: this.props.height,
            stroke: Tool_1.Color.transparent,
            fill: Tool_1.Color.white,
            fillAlpha: 1
        }).shape("shape", {
            width: this.props.width,
            height: this.props.height,
            fill: Tool_1.Color.transparent,
            stroke: Tool_1.Color.cyan400
        });
        this.onValueChange();
    };
    /* METHODS */
    /**
     * Get the percentage of progression relative to the value and the max value
     * @returns The percentage
     */
    Progress.prototype.getPercentage = function () {
        var _a = this.props, min = _a.min, max = _a.max, value = Tool_1.Util.limit(this.props.value, min, max);
        return (value / max) * 100;
    };
    /**
     * Get the width relative to the Percentage of progression
     * @returns The width rationed
     */
    Progress.prototype.getRatioWidth = function () {
        return (this.props.width * this.getPercentage()) / 100;
    };
    /* EVENTS */
    /**
     * When width or height attributes has changed
     */
    Progress.prototype.onSizeChange = function () {
        _super.prototype.onSizeChange.call(this);
        this.onValueChange();
        this.shape("shape", {
            width: this.props.width,
            height: this.props.height
        });
    };
    /**
     * When the ratio value has changed ("min", "max" or "value")
     */
    Progress.prototype.onValueChange = function () {
        this.shape("fill", {
            width: this.getRatioWidth(),
            height: this.props.height
        });
    };
    return Progress;
}(Graphic_1.Graphic));
exports.Progress = Progress;