sideral/Module/Text.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 Module_1 = require("./../Module");
var Tool_1 = require("./../Tool");
var index_1 = require("./../index");
var Text = (function (_super) {
    __extends(Text, _super);
    /* CONSTRUCTOR */
    function Text() {
        var _this = _super.call(this) || this;
        /**
         * The last offset in x axis provided by the centering property
         * @private
         */
        _this._centerOffsetX = 0;
        /**
         * The last offset in y axis provided by the centering property
         * @private
         */
        _this._centerOffsetY = 0;
        _this.setProps({
            text: "",
            align: "left",
            breakWords: false,
            dropShadow: false,
            dropShadowAlpha: 1,
            dropShadowAngle: 80,
            dropShadowColor: Tool_1.Color.black,
            dropShadowDistance: 0,
            dropShadowBlur: 2,
            fill: Tool_1.Color.black,
            fontFamily: "Verdana",
            fontSize: 20,
            fontStyle: "normal",
            fontVariant: "normal",
            fontWeight: "normal",
            letterSpacing: 0,
            lineHeight: null,
            padding: 0,
            stroke: Tool_1.Color.black,
            strokeThickness: 0,
            textBaseline: "alphabetic",
            wordWrap: false,
            wordWrapWidth: 100
        });
        _this.container = new index_1.PIXI.Text(_this.props.text);
        _this.connect(_this.signals.propChange, "centered", _this.onCenteredChange.bind(_this))
            .connect(_this.signals.propChange, "text", function () { return (_this.container.text = _this.props.text); })
            .connect(_this.signals.propChange, ["align", "breakWords", "dropShadow", "dropShadowAlpha", "dropShadowAngle", "dropShadowColor", "dropShadowDistance", "fill", "fontFamily", "fontSize", "fontStyle", "fontVariant",
            "fontWeight", "letterSpacing", "lineHeight", "padding", "stroke", "strokeThickness", "textBaseline", "wordWrap", "wordWrapWidth"], _this._onStyleChange.bind(_this));
        return _this;
    }
    Text.prototype.update = function (tick) {
        _super.prototype.update.call(this, tick);
        if (this.container) {
            this.props.width = this.container.width;
            this.props.height = this.container.height;
        }
    };
    /* EVENTS */
    /**
     * When "width" or "height" properties has changed
     */
    Text.prototype.onSizeChange = function () {
        _super.prototype.onSizeChange.call(this);
        this.onCenteredChange();
        /*
        if (this.props.centered) {
            console.log("centered");
            const midWidth  = this.props.width / 2,
                midHeight   = this.props.height / 2;

            this.props.x = this.props.x - midWidth;
            this.props.y = this.props.y - midHeight;
            this._centerOffsetX = midWidth;
            this._centerOffsetY = midHeight;
        }
        */
    };
    /**
     * When "centered" property has changed
     */
    Text.prototype.onCenteredChange = function () {
        if (this.props.centered) {
            this.props.x -= this.props.width / 2;
            this.props.y -= this.props.height / 2;
        }
        else if (!this.props.centered && this.last.centered) {
            this.props.x += this.props.width / 2;
            this.props.y += this.props.height / 2;
        }
    };
    /**
     * When a font style property has changed
     */
    Text.prototype._onStyleChange = function () {
        var _a = this.props, align = _a.align, breakWords = _a.breakWords, dropShadow = _a.dropShadow, dropShadowAlpha = _a.dropShadowAlpha, dropShadowAngle = _a.dropShadowAngle, dropShadowBlur = _a.dropShadowBlur, dropShadowColor = _a.dropShadowColor, dropShadowDistance = _a.dropShadowDistance, fill = _a.fill, fontFamily = _a.fontFamily, fontSize = _a.fontSize, fontStyle = _a.fontStyle, fontVariant = _a.fontVariant, fontWeight = _a.fontWeight, letterSpacing = _a.letterSpacing, lineHeight = _a.lineHeight, padding = _a.padding, stroke = _a.stroke, strokeThickness = _a.strokeThickness, textBaseline = _a.textBaseline, wordWrap = _a.wordWrap, wordWrapWidth = _a.wordWrapWidth;
        this.container.style.align = align;
        this.container.style.breakWords = breakWords;
        this.container.style.dropShadow = dropShadow;
        this.container.style.dropShadowAlpha = dropShadowAlpha;
        this.container.style.dropShadowAngle = Tool_1.Util.toRadians(dropShadowAngle);
        this.container.style.dropShadowColor = dropShadowColor;
        this.container.style.dropShadowBlur = dropShadowBlur;
        this.container.style.dropShadowDistance = dropShadowDistance;
        this.container.style.fill = fill;
        this.container.style.fontFamily = fontFamily;
        this.container.style.fontSize = fontSize;
        this.container.style.fontStyle = fontStyle;
        this.container.style.fontVariant = fontVariant;
        this.container.style.fontWeight = fontWeight;
        this.container.style.letterSpacing = letterSpacing;
        this.container.style.lineHeight = lineHeight;
        this.container.style.padding = padding;
        this.container.style.stroke = stroke;
        this.container.style.strokeThickness = strokeThickness;
        this.container.style.textBaseline = textBaseline;
        this.container.style.wordWrap = wordWrap;
        this.container.style.wordWrapWidth = wordWrapWidth;
    };
    return Text;
}(Module_1.Module));
exports.Text = Text;