"use strict";
// import set = Reflect.set;
Object.defineProperty(exports, "__esModule", { value: true });
var SketchArtboard = /** @class */ (function () {
    function SketchArtboard(options) {
        var _this = this;
        this.elements = [];
        this.tspans = [];
        this.routerMenu = false;
        this.data = {};
        this.el = options.el;
        this.elements = [];
        this.scaleFit = {
            xDown: true,
            xUp: false,
            yDown: false,
            yUp: false,
            xCenter: true,
            yCenter: false,
        };
        this.options = options;
        if (options.data) {
            this.data = options.data;
        }
        if (options.containerElement) {
            this.containerElement = options.containerElement;
        }
        if (options.scaleFit) {
            for (var k in options.scaleFit) {
                this.scaleFit[k] = options.scaleFit[k];
            }
        }
        if (!this.scaleFit.xCenter || options.center === false) {
            this.el.style.margin = 'inherit';
        }
        Array.from(this.el.querySelectorAll('*')).forEach(function (el) {
            var attrs = {};
            Object.keys(el['attributes']).forEach(function (key) {
                attrs[el['attributes'][key].name] = el['attributes'][key].value;
            });
            var element = {
                el: el,
                id: attrs['id'],
                attrs: attrs,
                rect: el.getBoundingClientRect(),
                rectHome: JSON.parse(JSON.stringify(el.getBoundingClientRect())),
            };
            if (attrs.transform) {
                element['transform'] = attrs.transform;
                element['transformHome'] = JSON.parse(JSON.stringify(attrs.transform));
            }
            _this.elements.push(element);
        });
        if (typeof window !== 'undefined') {
            window.addEventListener('resize', function (e) {
                _this.onWindowResize(e);
            });
            this.onWindowResize(false);
        }
        ;
        // routerMenu
        this.init();
    }
    SketchArtboard.prototype.init = function () {
        var _this = this;
        return new Promise(function (resolve) {
            setTimeout(function () {
                _this.initPageMenuRoutes();
                resolve();
            }, 100);
        });
    };
    SketchArtboard.prototype.initPageMenuRoutes = function () {
        var _this = this;
        if (document.querySelector('.sk-router-menu')) {
            var href_1;
            this.routerMenuItems = [];
            if (this.options.routerMenu === false || Array.from(document.querySelectorAll('.sk-router-menu ul li a')).length < 2) {
                var el = document.querySelector('.sk-router-menu');
                el.style.display = 'none';
            }
            if (this.options.routerMenuTitle === false) {
                var el = document.querySelector('.sk-router-menu h2');
                el.style.display = 'none';
            }
            Array.from(document.querySelectorAll('.sk-router-menu ul li a')).forEach(function (el) {
                href_1 = el.attributes['href'].value;
                if (href_1.startsWith('#/')) {
                    href_1 = href_1.replace('#/', '');
                }
                _this.routerMenuItems.push({
                    title: el.innerHTML,
                    href: href_1,
                });
            });
        }
    };
    SketchArtboard.prototype.onWindowResize = function (event) {
        this.scaleTemplate(this.options);
    };
    SketchArtboard.prototype.scaleTemplate = function (options) {
        var _this = this;
        var vH, vW, newscale, difference;
        var margin = options.margin || [0, 0, 0, 0];
        this.width = this.el.offsetWidth;
        this.height = this.el.offsetHeight;
        if (this.width === 0) {
            setTimeout(function () {
                _this.scaleTemplate(options);
            }, 10);
            return;
        }
        if (window.innerHeight) {
            vH = window.innerHeight;
            vW = window.innerWidth;
        }
        else {
            vW = document.documentElement.clientWidth;
            vH = document.documentElement.clientHeight;
        }
        this.containerWidth = vW;
        this.containerHeight = vH;
        if (this.containerElement) {
            // fixme: returns 0
            // this.containerWidth = this.containerElement.offsetWidth;
            // this.containerHeight = this.containerElement.offsetHeight;
            // this.containerHeight = this.containerElement.getBoundingClientRect().height;
        }
        this.maxScale = 1;
        if (this.scaleFit.xDown && (this.width >= this.containerWidth)) {
            // console.log('-down x');
            var marginW = margin[1] + margin[3];
            difference = this.width - this.containerWidth - marginW;
            newscale = 1 - (difference / (this.width / 100) / 100);
            this.maxScale = newscale;
            this.el.style.transform = 'scale(' + newscale + ')';
        }
        if (this.scaleFit.xUp && (this.width < this.containerWidth)) {
            // console.log('-up x');
            var marginW = margin[1] + margin[3];
            difference = this.containerWidth - marginW - this.width;
            newscale = 1 + (difference / (this.width / 100) / 100);
            this.maxScale = newscale;
            this.el.style.transform = 'scale(' + newscale + ')';
        }
        if (this.scaleFit.yDown && (newscale * this.height > (this.containerHeight - margin[0] - margin[2]))) {
            // console.log('-down y');
            var marginH = margin[0] + margin[2];
            difference = this.containerHeight - marginH - this.height;
            newscale = 1 + (difference / (this.height / 100) / 100);
            this.maxScale = newscale;
            this.el.style.transform = 'scale(' + newscale + ')';
        }
        // console.log('this.container',this.containerWidth,this.containerHeight);
        // console.log('this',this.width,this.height);
        // console.log('maxScale=',this.maxScale);
        // console.log('scaleFit=',this.scaleFit);
        // todo: ???
        if (this.scaleFit.yDown && this.scaleFit.yCenter) {
            this.el.style.transformOrigin = '50% 50%';
        }
        setTimeout(function () { return _this.parseTextSpans(); }, 200);
    };
    Object.defineProperty(SketchArtboard.prototype, "rect", {
        get: function () {
            return this.el.getBoundingClientRect();
        },
        enumerable: true,
        configurable: true
    });
    // todo:
    SketchArtboard.prototype.parseTextSpans = function () {
        var _this = this;
        // fixme: center svg text
        this.tspans = [];
        Array.from(this.el.querySelectorAll('tspan')).forEach(function (el) {
            var charWidth;
            var chars;
            var correction = 0;
            var maxChars;
            var maxWidth;
            var textWidth;
            var center;
            var computedTextLength;
            var className = el.className.baseVal;
            _this.tspans.push(el);
            if (className.match('sk-tspan-center')) {
                if (el.getComputedTextLength()) {
                    computedTextLength = Number(el.getComputedTextLength());
                }
                chars = el.innerHTML.length;
                // fixme: is not constant
                charWidth = el.getComputedTextLength() / chars;
                maxChars = Number(className.split('-')[className.split('-').length - 1]);
                maxWidth = maxChars * charWidth;
                textWidth = chars * charWidth;
                center = maxWidth / 2;
                correction = (maxWidth - textWidth) / 2;
                for (var k in _this.data) {
                    if (el.innerHTML === _this.data[k]) {
                        console.log('- - - - - - - - ');
                        console.log('chars=', chars, 'maxChars=', maxChars, 'charWidth=', charWidth);
                        console.log('maxWidth=', maxWidth, 'textWidth=', textWidth);
                        console.log('computedTextLength=' + computedTextLength, 'textWidth=', textWidth);
                    }
                }
                // center dynamic data text
                for (var k in _this.data) {
                    if (el.innerHTML === _this.data[k]) {
                        el.setAttribute('x', String(Number(el.attributes['x'].value) + correction));
                    }
                }
            }
        });
        this.elements.forEach(function (element) {
            if (element.attrs.id && element.attrs.id.match('placeholder,')) {
                console.log('text placeholder: ' + element.attrs.id);
            }
        });
    };
    return SketchArtboard;
}());
exports.SketchArtboard = SketchArtboard;
//# sourceMappingURL=sketch-artboard.js.map