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 */
    function Button() {
        var _this = _super.call(this) || this;
        _this.setProps({
            sizeAuto: false,
            labelCentered: true
        });
        return _this;
    }
    Button.prototype.initialize = function (props) {
        _super.prototype.initialize.call(this, props);
        if (!this.props.width && !this.props.height) {
            this.props.sizeAuto = true;
        }
        this.shape("shape", {
            width: this.props.width,
            height: this.props.height,
            stroke: Tool_1.Color.cyan400,
            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", {
            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.graphics.label.item.signals.propChange.bind(["width", "height"], this.updateLabelPosition.bind(this));
    };
    /* EVENTS */
    Button.prototype.onSizeChange = function () {
        _super.prototype.onSizeChange.call(this);
        this.updateLabelPosition();
    };
    /**
     * Update the position of the label when a size has changed
     */
    Button.prototype.updateLabelPosition = function () {
        var _this = this;
        if (this.props.labelCentered) {
            this.text("label", function (label) {
                return {
                    x: (_this.props.width / 2) - (label.props.width / 2),
                    y: (_this.props.height / 2) - (label.props.height / 2)
                };
            });
        }
    };
    return Button;
}(Graphic_1.Graphic));
exports.Button = Button;