"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const classnames_1 = require("../../../../client/classnames");
const element_1 = require("../../../../client/element");
const parentElement_1 = require("../../../../client/platform/web/parentElement");
const zoom_1 = require("../../../../client/zoom");
const Component_1 = require("../Div/Component");
const Component_2 = require("../svg/Group/Component");
const Component_3 = require("../svg/SVG/Component");
const DEFAULT_STYLE = {
    position: 'absolute',
    width: '0',
    height: '0',
    top: '0',
};
const DEFAULT_WIDTH = 240;
const DEFAULT_HEIGHT = 240;
class Zoom_ extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        this._transform = () => {
            const { zoom = zoom_1.ZOOM_IDENTITY } = this.$props;
            const transform = (0, zoom_1.getTransform)(zoom);
            this._html.$element.style.transform = transform;
            this._svg_g.$element.style.transform = transform;
        };
        const { className, style, width = DEFAULT_WIDTH, height = DEFAULT_HEIGHT, draggable, } = this.$props;
        const widthStr = `${width}px`;
        const heightStr = `${height}px`;
        const zoom = new Component_1.default({
            className: (0, classnames_1.classnames)('zoom', className),
            style: {
                ...DEFAULT_STYLE,
                ...style,
            },
            draggable,
        }, this.$system);
        this._root = zoom;
        const svg = new Component_3.default({
            className: 'zoom-svg',
            style: {
                width: widthStr,
                height: heightStr,
                position: 'absolute',
                top: '0',
                left: '0',
            },
        }, this.$system);
        zoom.registerParentRoot(svg);
        this._svg = svg;
        const svg_g = new Component_2.default({ style: { width: '0', height: '0' } }, this.$system);
        svg.registerParentRoot(svg_g);
        this._svg_g = svg_g;
        const html = new Component_1.default({
            className: 'zoom-html',
            style: {
                position: 'absolute',
                width: '0',
                height: '0',
                top: '0',
            },
        }, this.$system);
        zoom.registerParentRoot(html);
        this._html = html;
        const $element = (0, parentElement_1.parentElement)($system);
        this.$element = $element;
        this.$slot = {
            default: html,
            svg: svg_g,
        };
        this.$slotChildren = {
            default: [],
            svg: [],
        };
        this.$unbundled = false;
        this.$primitive = true;
        this.setSubComponents({
            zoom,
            html,
            svg,
            svg_g,
        });
        this.registerRoot(zoom);
        this._transform();
    }
    onPropChanged(prop, current) {
        // console.log('Zoom', 'onPropChanged', prop, current)
        if (prop === 'className') {
            this._root.setProp('className', current);
        }
        else if (prop === 'style') {
            this._root.setProp('style', { ...DEFAULT_STYLE, ...current });
        }
        else if (prop === 'zoom') {
            this._transform();
        }
        else if (prop === 'width') {
            this._svg.$element.style.width = `${current}px`;
        }
        else if (prop === 'height') {
            this._svg.$element.style.height = `${current}px`;
        }
        else if (prop === 'draggable') {
            this._root.setProp('draggable', current);
        }
    }
}
exports.default = Zoom_;
//# sourceMappingURL=Component.js.map