"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const Element_1 = require("../../../../../Class/Element");
const draw_1 = require("../../../../../client/canvas/draw");
const _ids_1 = require("../../../../_ids");
const globalComponent_1 = require("../../../../globalComponent");
const Component_1 = require("./Component");
class Canvas extends Element_1.Element_ {
    constructor(system) {
        super({
            i: ['style', 'width', 'height', 'd', 'attr'],
            o: [],
        }, {
            output: {},
        }, system, _ids_1.ID_CANVAS);
        this.__ = ['U', 'C', 'V', 'J', 'CA', 'EE'];
        const { api: { window: { OffscreenCanvas }, document: {}, }, } = system;
        this._state = {
            d: [],
        };
        if (OffscreenCanvas) {
            this._canvas = new OffscreenCanvas(200, 200);
            this._ctx = this._canvas.getContext('2d');
        }
        this.addListener('reset', () => {
            if (this._ctx) {
                (0, Component_1.clearCanvas)(this._ctx);
            }
            this._state.d = [];
        });
    }
    async clear() {
        if (this._ctx) {
            (0, Component_1.clearCanvas)(this._ctx);
        }
        this._state['d'] = [];
        this.emit('call', { method: 'clear', data: undefined });
        return;
    }
    async drawImage(imageBitmap, x, y, width, height) {
        // console.log('drawImage', imageBitmap, x, y, width, height)
        if (this._ctx) {
            this._ctx.drawImage(imageBitmap, x, y, width, height);
        }
        this.emit('call', {
            method: 'drawImage',
            data: [imageBitmap, x, y, width, height],
        });
    }
    strokePath(d) {
        // if (this._ctx) {
        //   this._ctx.strokePath(d)
        // }
        this.emit('call', { method: 'strokePath', data: [d] });
    }
    fillPath(d, fillRule) {
        // if (this._ctx) {
        //   this._ctx.fillPath(d, fillRule)
        // }
        this.emit('call', { method: 'fillPath', data: [d, fillRule] });
    }
    scale(sx, sy) {
        if (this._ctx) {
            this._ctx.scale(sx, sy);
        }
        this.emit('call', { method: 'scale', data: [sx, sy] });
    }
    translate(x, y) {
        if (this._ctx) {
            this._ctx.translate(x, y);
        }
        this.emit('call', { method: 'translate', data: [x, y] });
    }
    async draw(step) {
        this._state.d.push(step);
        this._backwarding = true;
        this._input.d.pull();
        this._backwarding = false;
        if (this._ctx) {
            (0, draw_1.draw)(this._ctx, step);
        }
        this.emit('call', { method: 'draw', data: [step] });
        return;
    }
    async _local_component() {
        return (0, globalComponent_1.firstGlobalComponentPromise)(this.__system, this.__global_id);
    }
    async toBlob(type, quality) {
        const component = await this._local_component();
        return component.toBlob(type, quality);
    }
    async toDataUrl(type, quality) {
        const component = await this._local_component();
        return component.toDataUrl(type, quality);
    }
    async captureStream({ frameRate, }) {
        const component = await this._local_component();
        return component.captureStream({ frameRate });
    }
    async getImageData(x, y, width, height, opt) {
        const component = await this._local_component();
        return component.getImageData(x, y, width, height, opt);
    }
    async putImageData(image, dx, dy, x, y, width, height) {
        if (this._ctx) {
            this._ctx.putImageData(image, dx, dy, x, y, width, height);
        }
        this.emit('call', {
            method: 'putImageData',
            data: [image, dx, dy, x, y, width, height],
        });
    }
    onDataInputData(name, data) {
        super.onDataInputData(name, data);
        switch (name) {
            case 'width':
                if (typeof data === 'number') {
                    if (this._canvas) {
                        this._canvas.width = data;
                    }
                }
                break;
            case 'height':
                if (typeof data === 'number') {
                    if (this._canvas) {
                        this._canvas.height = data;
                    }
                }
                break;
        }
    }
}
exports.default = Canvas;
//# sourceMappingURL=index.js.map