"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        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 extendStatics(d, b);
    }
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var utils_1 = require("./utils");
var constants_1 = require("./constants");
var Canvas = (function (_super) {
    __extends(Canvas, _super);
    function Canvas() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.canvas = null;
        _this.ctx = null;
        _this.matrix = null;
        _this.requestAnimationFrameId = null;
        _this._onScale = function (factor) {
            _this.ctx.scale(factor, factor);
        };
        _this._onTranslate = function (x, y) {
            _this.ctx.translate(x, y);
        };
        _this._setup = function (node) {
            if (!node)
                return;
            var getContext = _this.props.getContext;
            _this.canvas = node;
            _this.ctx = _this.canvas.getContext('2d');
            if (getContext)
                getContext(_this.ctx);
            _this._updateDimensions();
        };
        _this._updateDimensions = function () {
            if (!_this.canvas)
                return;
            var _a = _this.props, _b = _a.width, width = _b === void 0 ? 640 : _b, _c = _a.height, height = _c === void 0 ? 480 : _c;
            _this.canvas.width = width;
            _this.canvas.height = height;
            _this.canvas.style.display = 'block';
            _this.canvas.style.margin = '0px';
            _this.canvas.style.padding = '0px';
            _this.canvas.style.width = width + "px";
            _this.canvas.style.height = height + "px";
        };
        _this._onAnimationFrame = function (time) {
            var onAnimationFrame = _this.props.onAnimationFrame;
            if (!_this.canvas || !onAnimationFrame)
                return;
            var p1 = utils_1.transformedPoint(0, 0);
            var p2 = utils_1.transformedPoint(_this.canvas.width, _this.canvas.height);
            _this.ctx.clearRect(p1.x, p1.y, p2.x - p1.x, p2.y - p1.y);
            onAnimationFrame(_this.ctx, time);
            _this.requestAnimationFrameId = requestAnimationFrame(_this._onAnimationFrame);
        };
        return _this;
    }
    Canvas.prototype.componentDidMount = function () {
        this.requestAnimationFrameId = requestAnimationFrame(this._onAnimationFrame);
        utils_1.onChange.addListener(constants_1.SCALE, this._onScale);
        utils_1.onChange.addListener(constants_1.TRANSLATE, this._onTranslate);
        utils_1.onChange.addListener(constants_1.RESET, this._updateDimensions);
    };
    Canvas.prototype.componentDidUpdate = function () {
        this._updateDimensions();
    };
    Canvas.prototype.componentWillUnmount = function () {
        cancelAnimationFrame(this.requestAnimationFrameId);
        utils_1.onChange.removeListener(constants_1.SCALE, this._onScale);
        utils_1.onChange.removeListener(constants_1.TRANSLATE, this._onTranslate);
        utils_1.onChange.removeListener(constants_1.RESET, this._updateDimensions);
    };
    Canvas.prototype.render = function () {
        var _a = this.props, width = _a.width, height = _a.height, onAnimationFrame = _a.onAnimationFrame, getContext = _a.getContext, props = __rest(_a, ["width", "height", "onAnimationFrame", "getContext"]);
        return React.createElement("canvas", __assign({ ref: this._setup }, props));
    };
    return Canvas;
}(React.Component));
exports.Canvas = Canvas;
//# sourceMappingURL=Canvas.js.map