sideral/Module/Shape.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 index_1 = require("./../index");
var _1 = require("./../Tool/");
/**
 * The module to display shapes
 */
var Shape = (function (_super) {
    __extends(Shape, _super);
    /* LIFECYCLE */
    /**
     * @constructor
     */
    function Shape() {
        var _this = _super.call(this) || this;
        /**
         * PIXI Container
         * @readonly
         */
        _this.container = new index_1.PIXI.Graphics();
        _this.setProps({
            stroke: _1.Color.transparent,
            strokeAlpha: 1,
            strokeThickness: 1,
            fill: _1.Color.white,
            fillAlpha: 1,
            box: _1.Enum.BOX.RECTANGLE
        });
        _this.connect(_this.signals.propChange, ["box", "fill", "stroke", "strokeThickness", "strokeAlpha", "fillAlpha", "width", "height", "radius"], _this._updateShape.bind(_this));
        return _this;
    }
    /* METHODS */
    /**
     * The arc method creates an arc/curve (used to create circles, or parts of circles)
     * @param cx - The position of the center of the circle in x axis
     * @param cy - The position of the center of the circle in y axis
     * @param radius - The radius of the circle
     * @param startAngle - The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
     * @param endAngle - The ending angle, in radians
     * @param anticlockwise - Specifies whether the drawing should be counter-clockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise
     */
    Shape.prototype.arc = function (cx, cy, radius, startAngle, endAngle, anticlockwise) {
        if (anticlockwise === void 0) { anticlockwise = false; }
        this.container.arc(cx, cy, radius, startAngle, endAngle, anticlockwise);
        return this;
    };
    /**
     * The arcTo() method creates an arc/curve between two tangents on the canvas
     * @param x1 - The position of the beginning of the arc in x axis
     * @param y1 - The position of the beginning of the arc in y axis
     * @param x2 - The position of the end of the arc in x axis
     * @param y2 - The position of the end of the arc in y axis
     * @param radius - The radius of the arc
     */
    Shape.prototype.arcTo = function (x1, y1, x2, y2, radius) {
        this.container.arcTo(x1, y1, x2, y2, radius);
        return this;
    };
    /**
     * Specifies a simple one-color fill that subsequent calls to other Shape methods (such as lineTo() or drawCircle()), use when drawing
     * @param color - The color of the fill
     * @param alpha - The alpha of the fill
     */
    Shape.prototype.beginFill = function (color, alpha) {
        if (alpha === void 0) { alpha = 1; }
        this.container.beginFill(_1.Util.colorToDecimal(color), alpha);
        return this;
    };
    /**
     * Applies a fill to the lines and shapes that were added since the last call to te beginFill() method
     */
    Shape.prototype.endFill = function () {
        this.container.endFill();
        return this;
    };
    /**
     * Calculate the points for a bezier curve and the draws it
     * @param cpX - Control point in x axis
     * @param cpY - Control point in y axis
     * @param cpX2 - Second control point in x axis
     * @param cpY2 - Second control point in y axis
     * @param toX - Destination point in x axis
     * @param toY - Destination point in y axis
     */
    Shape.prototype.bezierCurveTo = function (cpX, cpY, cpX2, cpY2, toX, toY) {
        this.container.bezierCurveTo(cpX, cpY, cpX2, cpY2, toX, toY);
        return this;
    };
    /**
     * Draws a circle
     * @param x - The coordinate of the center of the circle in x axis
     * @param y - The coordinate of the center of the circle in y axis
     * @param radius - The radius of the circle
     */
    Shape.prototype.circle = function (x, y, radius) {
        this.container.drawCircle(x, y, radius);
        return this;
    };
    /**
     * Draws an ellipse
     * @param x - The coordinate of the center of the ellipse in x axis
     * @param y - The coordinate of the center of the ellipse in y axis
     * @param width - The half width of the ellipse
     * @param height - The half height of the ellipse
     */
    Shape.prototype.ellipse = function (x, y, width, height) {
        this.container.drawEllipse(x, y, width, height);
        return this;
    };
    /**
     * Draws a polygon using the given path
     * @param path - The path data used to constructh the polygon
     */
    Shape.prototype.polygon = function (path) {
        this.container.drawPolygon(path);
        return this;
    };
    /**
     * Draws a rectangle
     * @param x - The coordinate of the top-left of the rectangle in x axis
     * @param y - The coordinate of the top-left of the rectangle in y axis
     * @param width - The width of the rectangle
     * @param height - The height of the rectangle
     */
    Shape.prototype.rectangle = function (x, y, width, height) {
        this.container.drawRect(x, y, width, height);
        return this;
    };
    /**
     * Draws a rounded rectangle
     * @param x - The coordinate of the top-left of the rectangle in x axis
     * @param y - The coordinate of the top-left of the rectangle in y axis
     * @param width - The width of the rectangle
     * @param height - The height of the rectangle
     * @param radius - The radius of the rectangle corners
     */
    Shape.prototype.roundedRectangle = function (x, y, width, height, radius) {
        this.container.drawRoundedRect(x, y, width, height, radius);
        return this;
    };
    /**
     * Specifies the line style used for subsequent calls to the Shape methods such as the lineTo() method or the circle() method
     * @param width - Width of the line to draw, will update the objects stored style
     * @param color - Color of the line to draw, will update the objects stored style
     * @param alpha - Alpha of the line to draw, will update the objects stored style
     */
    Shape.prototype.lineStyle = function (width, color, alpha) {
        if (width === void 0) { width = 0; }
        if (alpha === void 0) { alpha = 1; }
        this.container.lineStyle(width, _1.Util.colorToDecimal(color), alpha);
        return this;
    };
    /**
     * Draws a line using the current line style from the current drawing position to (x, y); The current drawing position is then set to (x, y).
     * @param x - The coordinate in x axis to draw to
     * @param y - The coordinate in y axis to draw to
     */
    Shape.prototype.lineTo = function (x, y) {
        this.container.lineTo(x, y);
        return this;
    };
    /**
     * Moves the current drawing position to (x, y)
     * @param x - The coordinate in x axis to move to
     * @param y - The coordinate in y axis to move to
     */
    Shape.prototype.moveTo = function (x, y) {
        this.container.moveTo(x, y);
        return this;
    };
    /**
     * Calculate the points for a quadratic bezier curve and the draws it
     * @param cpX - Control point in x axis
     * @param cpY - Control point in y axis
     * @param toX - Destination point in x axis
     * @param toY - Destination point in y axis
     */
    Shape.prototype.quadraticCurveTo = function (cpX, cpY, toX, toY) {
        this.container.quadraticCurveTo(cpX, cpY, toX, toY);
        return this;
    };
    /**
     * Clears the graphics that were drawn to this shape objetct, and resets fill and line style settings
     */
    Shape.prototype.clear = function () {
        this.container.clear();
        return this;
    };
    /**
     * Clone the current shape
     * @param props - Properties to pass to the cloned shape
     * @returns The cloned shape
     */
    Shape.prototype.clone = function (props) {
        var clonedShape = new Shape();
        clonedShape.container = this.container.clone();
        return clonedShape;
    };
    /* PRIVATE */
    /**
     * Update the current shape
     * @private
     */
    Shape.prototype._updateShape = function () {
        if (!this.props.box) {
            return null;
        }
        var stroke = _1.Util.colorToDecimal(this.props.stroke), fill = this.props.fill === "transparent" ? 0x000000 : _1.Util.colorToDecimal(this.props.fill);
        this.container.clear();
        if (this.props.stroke !== _1.Color.transparent && !isNaN(stroke)) {
            this.container.lineStyle(this.props.strokeThickness, stroke, this.props.strokeAlpha);
        }
        this.container.beginFill(fill, this.props.fill === _1.Color.transparent ? 0 : this.props.fillAlpha);
        this._drawShape();
        this.container.endFill();
    };
    /**
     * Draw the shape with the current type value
     * @private
     */
    Shape.prototype._drawShape = function () {
        var _a = this.props, strokeThickness = _a.strokeThickness, width = _a.width, height = _a.height, radius = _a.radius, box = _a.box, offset = strokeThickness / 2;
        switch (box) {
            case _1.Enum.BOX.CIRCLE:
                if (width !== height) {
                    this.ellipse(width / 2, height / 2, width / 2, height / 2);
                }
                else {
                    this.circle(width / 2, width / 2, width / 2);
                }
                break;
            case _1.Enum.BOX.RECTANGLE:
                if (this.props.radius) {
                    this.roundedRectangle(offset, offset, width - strokeThickness, height - strokeThickness, radius);
                }
                else {
                    this.rectangle(offset, offset, width - strokeThickness, height - strokeThickness);
                }
                break;
        }
    };
    return Shape;
}(Module_1.Module));
exports.Shape = Shape;