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 __());
    };
})();
/**
 * Created by anlun on 2017/5/24.
 */
/**
 * @module annieUI
 */
var annieUI;
(function (annieUI) {
    /**
     * 画板类
     * @class annieUI.DrawingBoard
     * @public
     * @extends annie.Bitmap
     * @since 1.1.1
     */
    var DrawingBoard = (function (_super) {
        __extends(DrawingBoard, _super);
        /**
         * 构造函数
         * @method DrawingBoard
         * @param width 画板宽
         * @param height 画板高
         * @param bgColor 背景色 默认透明
         * @since 1.1.1
         */
        function DrawingBoard(width, height, bgColor) {
            if (bgColor === void 0) { bgColor = ""; }
            var _this = _super.call(this) || this;
            _this.context = null;
            _this._isMouseDown = false;
            _this._drawRadius = 50;
            /**
             * 绘画颜色, 可以是任何的颜色类型
             * @property drawColor
             * @type {string}
             * @public
             * @since
             * @type {any}
             */
            _this.drawColor = "#ffffff";
            /**
             * 背景色 可以是任何的颜色类型
             * @property bgColor
             * @type {any}
             * @public
             * @since 1.1.1
             */
            _this.bgColor = "";
            /**
             * 画板宽
             * @property drawWidth
             * @type {number}
             * @readonly
             * @public
             * @since 1.1.1
             */
            _this.drawWidth = 0;
            /**
             * 画板高
             * @property drawHeight
             * @type {number}
             * @readonly
             * @public
             * @since 1.1.1
             */
            _this.drawHeight = 0;
            //总步数数据
            _this.totalStepList = [];
            //当前步数所在的id
            _this.currentStepId = 0;
            var s = _this;
            var bd = document.createElement("canvas");
            bd.width = width;
            bd.height = height;
            s.context = bd.getContext("2d");
            s.context.lineCap = "round";
            s.context.lineJoin = "round";
            s.bitmapData = bd;
            s.drawHeight = height;
            s.drawWidth = width;
            s.reset(bgColor);
            var mouseDown = s.onMouseDown.bind(s);
            var mouseMove = s.onMouseMove.bind(s);
            var mouseUp = s.onMouseUp.bind(s);
            s.addEventListener(annie.MouseEvent.MOUSE_DOWN, mouseDown);
            s.addEventListener(annie.MouseEvent.MOUSE_MOVE, mouseMove);
            s.addEventListener(annie.MouseEvent.MOUSE_UP, mouseUp);
            return _this;
        }
        Object.defineProperty(DrawingBoard.prototype, "drawRadius", {
            /**
             * 绘画半径
             * @property drawRadius
             * @type {number}
             * @public
             * @since 1.1.1
             */
            get: function () {
                return this._drawRadius;
            },
            set: function (value) {
                this._drawRadius = value;
            },
            enumerable: true,
            configurable: true
        });
        ;
        DrawingBoard.prototype.onMouseDown = function (e) {
            var s = this;
            s._isMouseDown = true;
            var ctx = s.context;
            ctx.beginPath();
            ctx.strokeStyle = s.drawColor;
            ctx.lineWidth = s._drawRadius;
            var lx = e.localX >> 0;
            var ly = e.localY >> 0;
            ctx.moveTo(lx, ly);
            s.addStepObj = {};
            s.addStepObj.c = s.drawColor;
            s.addStepObj.r = s._drawRadius;
            s.addStepObj.sx = lx;
            s.addStepObj.sy = ly;
            s.addStepObj.ps = [];
        };
        ;
        DrawingBoard.prototype.onMouseUp = function (e) {
            var s = this;
            if (s._isMouseDown) {
                s._isMouseDown = false;
                if (s.addStepObj.ps && s.addStepObj.ps.length > 0) {
                    s.currentStepId++;
                    s.totalStepList.push(s.addStepObj);
                }
            }
        };
        ;
        DrawingBoard.prototype.onMouseMove = function (e) {
            var s = this;
            if (s._isMouseDown) {
                var ctx = s.context;
                var lx = e.localX >> 0;
                var ly = e.localY >> 0;
                ctx.lineTo(lx, ly);
                ctx.stroke();
                s.addStepObj.ps.push(lx, ly);
            }
        };
        ;
        /**
         * 重置画板
         * @method reset
         * @param bgColor
         * @public
         * @since 1.1.1
         */
        DrawingBoard.prototype.reset = function (bgColor) {
            if (bgColor === void 0) { bgColor = ""; }
            var s = this;
            if (bgColor != "") {
                s.bgColor = bgColor;
            }
            if (s.bgColor != "") {
                s.context.fillStyle = s.bgColor;
                s.context.fillRect(0, 0, s.bitmapData.width, s.bitmapData.height);
            }
            else {
                s.context.clearRect(0, 0, s.bitmapData.width, s.bitmapData.height);
            }
            s.currentStepId = 0;
            s.totalStepList = [];
        };
        /**
         * 撤销步骤
         * @method cancel
         * @param {number} step 撤销几步 0则全部撤销,等同于reset
         * @public
         * @since 1.1.1
         */
        DrawingBoard.prototype.cancel = function (step) {
            if (step === void 0) { step = 0; }
            var s = this;
            if (step == 0) {
                s.reset();
            }
            else {
                if (s.currentStepId - step >= 0) {
                    s.currentStepId -= step;
                    s.totalStepList.splice(s.currentStepId, step);
                    if (s.bgColor != "") {
                        s.context.fillStyle = s.bgColor;
                        s.context.fillRect(0, 0, s.bitmapData.width, s.bitmapData.height);
                    }
                    else {
                        s.context.clearRect(0, 0, s.bitmapData.width, s.bitmapData.height);
                    }
                    var len = s.totalStepList.length;
                    for (var i = 0; i < len; i++) {
                        var ctx = s.context;
                        ctx.beginPath();
                        ctx.strokeStyle = s.totalStepList[i].c;
                        ctx.lineWidth = s.totalStepList[i].r;
                        ctx.moveTo(s.totalStepList[i].sx, s.totalStepList[i].sy);
                        var ps = s.totalStepList[i].ps;
                        var pLen = ps.length;
                        for (var m = 0; m < pLen; m += 2) {
                            ctx.lineTo(ps[m], ps[m + 1]);
                            ctx.stroke();
                        }
                    }
                }
                else {
                    return false;
                }
            }
            return true;
        };
        return DrawingBoard;
    }(annie.Bitmap));
    annieUI.DrawingBoard = DrawingBoard;
})(annieUI || (annieUI = {}));