"use strict";
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
Object.defineProperty(exports, "__esModule", { value: true });
const Element_1 = require("../../../../../Class/Element");
const _ids_1 = require("../../../../_ids");
const Component_1 = require("./Component");
class Canvas extends Element_1.Element_ {
    constructor(system) {
        super({
            i: ['style', 'width', 'height', 'd'],
            o: [],
        }, {
            output: {},
        }, system, _ids_1.ID_CANVAS);
        this.__ = ['U', 'C', 'V', 'J', 'CA', 'EE'];
        this._state = {
            d: [],
        };
        this._component = new Component_1.default({}, this.__system);
        this._offscreen = new OffscreenCanvas(1000, 1000);
        this._offscreen_ctx = this._offscreen.getContext('2d', {
            willReadFrequently: true,
        });
    }
    clear() {
        return __awaiter(this, void 0, void 0, function* () {
            this._component.clear();
            this.set('d', []);
            this.emit('call', { method: 'clear', data: undefined });
            return;
        });
    }
    drawImage(imageBitmap, x, y, width, height) {
        return __awaiter(this, void 0, void 0, function* () {
            // console.log('drawImage', imageBitmap, x, y, width, height)
            // this._component.drawImage(imageBitmap, x, y, width, height)
            this._offscreen_ctx.drawImage(imageBitmap, x, y, width, height);
            this.emit('call', {
                method: 'drawImage',
                data: [imageBitmap, x, y, width, height],
            });
        });
    }
    strokePath(d) {
        this._component.strokePath(d);
        this.emit('call', { method: 'strokePath', data: [d] });
    }
    fillPath(d, fillRule) {
        this._component.fillPath(d, fillRule);
        this.emit('call', { method: 'fillPath', data: [d, fillRule] });
    }
    scale(sx, sy) {
        this._component.scale(sx, sy);
        this.emit('call', { method: 'scale', data: [sx, sy] });
    }
    translate(x, y) {
        this._component.translate(x, y);
        this.emit('call', { method: 'translate', data: [x, y] });
    }
    draw(step) {
        return __awaiter(this, void 0, void 0, function* () {
            this._state.d.push(step);
            this._backwarding = true;
            this._input.d.pull();
            this._backwarding = false;
            this._component.draw(step);
            this.emit('call', { method: 'draw', data: [step] });
            return;
        });
    }
    toBlob(type, quality) {
        return __awaiter(this, void 0, void 0, function* () {
            return new Promise((resolve, reject) => {
                this._component.toBlob({ type, quality }, (blob) => {
                    if (blob) {
                        resolve(blob);
                    }
                    else {
                        reject('cannot convert canvas to blob');
                    }
                });
            });
        });
    }
    captureStream({ frameRate }) {
        return __awaiter(this, void 0, void 0, function* () {
            return this._component.$element.captureStream(frameRate);
        });
    }
    getImageData(x, y, width, height) {
        const imageData = this._offscreen_ctx.getImageData(x, y, width, height);
        return imageData;
    }
    putImageData(image, dx, dy, x, y, width, height) {
        // this._component.$element
        //   .getContext('2d')
        //   .putImageData(image, dx, dy, x, y, width, height)
        this.emit('call', {
            method: 'putImageData',
            data: [image, dx, dy, x, y, width, height],
        });
    }
    onDataInputData(name, data) {
        // console.log('Canvas', 'onDataInputData', name, data)
        super.onDataInputData(name, data);
        switch (name) {
            case 'width':
                // if (typeof data === 'string' && data.endsWith('vw')) {
                //   data = 0
                // }
                try {
                    this._offscreen.width = data;
                }
                catch (err) {
                    // console.log(err)
                    //
                }
                // this._component.setProp('width', data)
                break;
            case 'height':
                // if (typeof data === 'string' && data.endsWith('vw')) {
                //   data = 0
                // }
                try {
                    this._offscreen.height = data;
                }
                catch (err) {
                    // console.log(err)
                    //
                }
                // this._component.setProp('height', data)
                break;
        }
    }
}
exports.default = Canvas;
//# sourceMappingURL=index.js.map