sideral/Graphic/Button.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");
/**
 * This Graphic helpers let you create a button easily
 */
var Button = (function (_super) {
    __extends(Button, _super);
    /* LIFECYCLE */
    /**
     * @constructor
     */
    function Button() {
        var _this = _super.call(this) || this;
        _this.setProps({
            label: "",
            labelCentered: false,
            paddingLeft: 0,
            paddingRight: 0,
            paddingTop: 0,
            paddingBottom: 0
        });
        return _this;
    }
    /**
     * @initialize
     * @override
     */
    Button.prototype.initialize = function (props) {
        _super.prototype.initialize.call(this, props);
        this.shape("shape", {
            stroke: this.context.theme.primaryColor,
            strokeThickness: 2,
            fill: Tool_1.Color.black,
            fillAlpha: 0.5,
            radius: 5
        }, {
            hover: {
                fill: Tool_1.Color.cyan900,
                fillAlpha: 1
            },
            disabled: {
                fill: Tool_1.Color.grey900,
                fillAlpha: 0.7,
                stroke: Tool_1.Color.grey400
            }
        }).text("label", {
            text: this.props.label,
            fill: Tool_1.Color.white,
            dropShadow: true,
            dropShadowColor: Tool_1.Color.black,
            dropShadowAngle: 80,
            dropShadowBlur: 30,
            dropShadowDistance: 1
        }, {
            disabled: {
                fill: Tool_1.Color.grey400
            }
        });
        this.connect(this.signals.propChange, ["label", "labelCentered"], this.onSizeChange.bind(this))
            .connect(this.getGraphicItem("label").signals.propChange, ["width", "height"], this.onSizeChange.bind(this));
    };
    /* EVENTS */
    /**
     * @override
     */
    Button.prototype.onSizeChange = function () {
        var label = this.getGraphicItem("label"), _a = label && label.props, width = _a.width, height = _a.height;
        this.shape("shape", {
            width: (this.props.width || width) + this.props.paddingLeft + this.props.paddingRight,
            height: (this.props.height || height) + this.props.paddingTop + this.props.paddingBottom
        }).text("label", {
            text: this.props.label,
            x: this.props.labelCentered ? ((this.props.width + this.props.paddingLeft + this.props.paddingRight) / 2) - (width / 2) : this.props.paddingLeft,
            y: this.props.labelCentered ? ((this.props.height + this.props.paddingTop + this.props.paddingBottom) / 2) - (height / 2) : this.props.paddingTop
        });
        _super.prototype.onSizeChange.call(this);
    };
    return Button;
}(Graphic_1.Graphic));
exports.Button = Button;