class previewFormas {

    constructor(container, tipoLibro, tipoTapa, size, datos) {

        this.container = container;
        this.tipoLibro = tipoLibro;
        this.tipoTapa = tipoTapa;
        this.size = size;

        this.ancho = datos.ancho;
        this.alto = datos.alto;
        this.lomo = datos.lomo;
        this.lomoSobrecubierta = datos.lomoSobrecubierta;
        this.previews = []
        let solapaTemp = null;
        let solapaSobrecubiertaTemp = null;
        if (typeof this.lomo === 'function') {
            solapaTemp = datos.solapas ? datos.solapas() : null;
            solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta() : null;
        }
        else {
            solapaTemp = datos.solapas ? datos.solapas : null;
            solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta : null;
        }

        if (solapaTemp == undefined || solapaTemp == null || solapaTemp == false) {
            this.solapa = 0;
            this.offsetSolapa = 0.0;
        }
        else {
            this.solapa = solapaTemp;
            this.offsetSolapa = 3.0;
        }
        if (solapaSobrecubiertaTemp == undefined || solapaSobrecubiertaTemp == null || solapaSobrecubiertaTemp == false) {
            this.solapas_sobrecubierta = 0;
            this.offsetSolapa_sobrecubierta = 0.0;
        }
        else {
            this.solapa_sobrecubierta = solapaSobrecubiertaTemp;
            this.offsetSolapa_sobrecubierta = 3.0;
        }
        this.lomoRedondo = datos.lomoRedondo;

        this.pvObj = null;

    }
    resizeEvent() {
        $(window).resize(this.setViewBoxToPreview.bind(this))
    }
    setContainer(container) {
        this.container = container;
    }

    setData(datos) {
        this.previews = []
        this.actualPreview = null;
        this.ancho = datos.ancho;
        this.alto = datos.alto;
        this.lomo = datos.lomo;
        this.lomoSobrecubierta = datos.lomoSobrecubierta;

        let solapaTemp = null;
        let solapaSobrecubiertaTemp = null;
        if (typeof this.lomo === 'function') {
            solapaTemp = datos.solapas ? datos.solapas() : null;
            solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta() : null;
        }
        else {
            solapaTemp = datos.solapas ? datos.solapas : null;
            solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta : null;
        }

        if (solapaTemp == undefined || solapaTemp == null || solapaTemp == false) {
            this.solapa = 0;
            this.offsetSolapa = 0.0;
        }
        else {
            this.solapa = solapaTemp;
            this.offsetSolapa = 3.0;
        }
        if (solapaSobrecubiertaTemp == undefined || solapaSobrecubiertaTemp == null || solapaSobrecubiertaTemp == false) {
            this.solapas_sobrecubierta = 0;
            this.offsetSolapa_sobrecubierta = 0.0;
        }
        else {
            this.solapa_sobrecubierta = solapaSobrecubiertaTemp;
            this.offsetSolapa_sobrecubierta = 3.0;
        }
        this.lomoRedondo = datos.lomoRedondo;
    }

    getObjetoLP(lpName, _isCosido, _isTapaDura) {

        let rowData = null;

        $('#tableLineasPresupuesto').DataTable().rows().every(function (rowIdx, tableLoop, rowLoop) {

            let lineaPresupuestoId = this.data().row_id.replace('lp_', '');

            switch (lpName) {
                case 'bn':
                case 'bnhq':
                case 'color':
                case 'colorhq':
                case 'cubierta':
                case 'rot_bn':
                case 'rot_color':
                case 'guardas':
                case 'sobrecubierta':
                case 'faja':
                    if (lineaPresupuestoId === lpName) {
                        rowData = this.data();
                    }
                    break;
                case 'ec':
                    if (lineaPresupuestoId === 'cubierta') {
                        rowData = this.data();
                    }
                    break;
                default:
                    //console.log(lineaPresupuestoId);
                    break;
            }

        });


        this.pvObj = {
            idIndex: lpName,
            tipoImpresion: parseInt($('#tipo_impresion_id').val()),
            gramajeLibro: parseInt(rowData.gramaje),
            manoLP: parseFloat(rowData.lomo),
            lomoLibro: this.lomo(),
            lomoLibroSobrecubierta: this.lomoSobrecubierta(),
            anchoSolapa: $('#solapas').is(':checked') ? parseFloat($('#solapas_ancho').val()) : parseFloat(0),
            nFormas: parseInt(rowData.formas),
            nFormasH: parseInt(rowData.formas_h),
            nFormasV: parseInt(rowData.formas_v),
            orientacionFormas: rowData.formas_orientacion,
            altoMaquina: parseFloat(rowData.maquina_alto),
            anchoMaquina: parseFloat(rowData.maquina_ancho),
            altoImpresion: parseFloat(rowData.maquina_impresion_alto),
            anchoImpresion: parseFloat(rowData.maquina_impresion_ancho),
            altoLibro: lpName == 'faja' ? parseFloat(parseFloat(rowData.alto_faja).toFixed(0)) : parseFloat(this.alto()),
            anchoLibro: this.ancho(),
            offsetSolapa: 0
        };

        //console.log(pvObj);

        // Printing shape definition
        this.pvObj.anchoForma = parseInt(_isCosido) ? parseInt(2 * this.pvObj.anchoLibro) : parseInt(this.pvObj.anchoLibro);
        this.pvObj.altoForma = this.pvObj.altoLibro;


        // Update preview info fields
        let pvName = '#pv_' + lpName;
        $(pvName + '_pg').attr("href", $(pvName + '_pg').attr('sk-url') + rowData.papel);
        $(pvName + '_pi').attr("href", $(pvName + '_pi').attr('sk-url') + rowData.papel_impresion_id);
        $(pvName + '_mi').attr("href", $(pvName + '_mi').attr('sk-url') + rowData.maquina_id);

        $(pvName + '_gramaje').text(this.pvObj.gramajeLibro);
        $(pvName + '_mano').text(this.pvObj.manoLP);
        $(pvName + '_solapas').text(this.pvObj.anchoSolapa);
        $(pvName + '_maquina').text(this.pvObj.anchoMaquina + "x" + this.pvObj.altoMaquina);
        $(pvName + '_maquina_impresion').text(this.pvObj.anchoImpresion + "x" + this.pvObj.altoImpresion);
        $(pvName + '_libro').text(this.pvObj.anchoLibro + "x" + this.pvObj.altoLibro);
        $(pvName + '_forma').text(this.pvObj.anchoForma + "x" + this.pvObj.altoForma);
        $(pvName + '_nFormas').text(this.pvObj.nFormas);

        if (this.pvObj.anchoSolapa != 0) {
            $('.pv-solapas').show();
            this.pvObj.offsetSolapa = parseFloat(3); // 3mm

        }

        // Custom overwrites
        switch (this.pvObj.idIndex) {
            case 'cubierta':
                // Fresado TD or Cosido TD
                if (this.pvObj.tipoImpresion === 1 || this.pvObj.tipoImpresion === 3) {
                    let anchoPliegue = parseFloat(7);  // mm
                    let altoPliegue = parseFloat(7);  // mm
                    let sangre = parseFloat(20);  // mm
                    if (this.isTapaDura && (this.ancho() >= 210 || this.alto() >= 267)) {
                        sangre = parseFloat(10);  // mm
                    }
                    this.pvObj.anchoForma = ((2 * this.pvObj.anchoLibro) + (2 * anchoPliegue) + (2 * sangre) + this.pvObj.lomoLibro);
                    this.pvObj.altoForma += altoPliegue + (2 * sangre);
                }
                // Fresado TB y Cosido TB
                else if (this.pvObj.tipoImpresion === 2 || this.pvObj.tipoImpresion === 4) {
                    let sangre = parseFloat(5);  // mm
                    this.pvObj.anchoForma = ((2 * this.pvObj.anchoLibro) + (2 * (this.pvObj.anchoSolapa + this.pvObj.offsetSolapa)) + (2 * sangre) + this.pvObj.lomoLibro);
                    this.pvObj.altoForma += (2 * sangre);
                }
                // Grapado
                else if (this.pvObj.tipoImpresion === 21) {
                    let sangre = parseFloat(5);  // mm
                    this.pvObj.anchoForma = ((2 * this.pvObj.anchoLibro) + (2 * (this.pvObj.anchoSolapa + this.pvObj.offsetSolapa)) + (2 * sangre));
                    this.pvObj.altoForma += (2 * sangre);
                }
                // Espiral TD y TB, Wire-o TD y TB
                else if (this.pvObj.tipoImpresion === 5 || this.pvObj.tipoImpresion === 6 ||
                    this.pvObj.tipoImpresion === 7 || this.pvObj.tipoImpresion === 8) {
                    let sangre = parseFloat(20);  // mm
                    this.pvObj.anchoForma = this.pvObj.anchoLibro;
                } else {
                    // ?
                }

                // Update labels
                $(pvName + '_forma').text(this.pvObj.anchoForma + "x" + this.pvObj.altoForma);
                break;

            case 'sobrecubierta':
                let sangre = parseFloat(5);  // mm
                let anchoSolapaSobrecubierta = $('#solapas_sobrecubierta').is(':checked') ? parseFloat($('#solapas_ancho_sobrecubierta').val()) : parseFloat(0);  // mm
                if (_isTapaDura) {
                    let anchoPliegue = parseFloat(7);  // mm
                    let altoPliegue = parseFloat(7);  // mm
                    this.pvObj.anchoForma = ((2 * this.pvObj.anchoLibro) + (2 * anchoPliegue) + (2 * (anchoSolapaSobrecubierta + this.pvObj.offsetSolapa)) + (2 * sangre) + this.pvObj.lomoLibroSobrecubierta);
                    this.pvObj.altoForma += altoPliegue + parseFloat(2 * sangre);
                } else {
                    this.pvObj.anchoForma = ((2 * this.pvObj.anchoLibro) + (2 * (anchoSolapaSobrecubierta + this.pvObj.offsetSolapa)) + (2 * sangre) + this.pvObj.lomoLibroSobrecubierta);
                    this.pvObj.altoForma += parseFloat(2 * sangre);
                }

                // Update labels
                $(pvName + '_solapas').text(anchoSolapaSobrecubierta);
                anchoSolapaSobrecubierta != 0 ? $('.pv-solapas').show() : $('.pv-solapas').hide();
                $(pvName + '_forma').text(this.pvObj.anchoForma + "x" + this.pvObj.altoForma);
                break;

            case 'faja':
                let sangreFaja = parseFloat(5);  // mm
                let anchoSolapaFaja = $('#faja').is(':checked') ? parseFloat($('#faja_solapas_ancho').val()) : parseFloat(0);  // mm
                if (_isTapaDura) {
                    let anchoPliegue = parseFloat(7);  // mm
                    this.pvObj.anchoForma = ((2 * this.pvObj.anchoLibro) + (2 * anchoPliegue) + (2 * (anchoSolapaFaja + this.pvObj.offsetSolapa)) + (2 * sangreFaja) + this.pvObj.lomoLibroSobrecubierta);
                    this.pvObj.altoForma += parseFloat(2 * sangreFaja);
                } else {
                    this.pvObj.anchoForma = ((2 * this.pvObj.anchoLibro) + (2 * (anchoSolapaFaja + this.pvObj.offsetSolapa)) + (2 * sangreFaja) + this.pvObj.lomoLibroSobrecubierta);
                    this.pvObj.altoForma = parseFloat(this.pvObj.altoForma) + parseFloat(2 * sangreFaja);
                }

                // Update labels
                $(pvName + '_solapas').text(anchoSolapaFaja);
                anchoSolapaFaja != 0 ? $('.pv-solapas').show() : $('.pv-solapas').hide();
                $(pvName + '_forma').text(this.pvObj.anchoForma + "x" + this.pvObj.altoForma);
                break;
            case 'ec':
                $(pvName + '_pg').attr("href", $(pvName + '_pg').attr('sk-url') + rowData.papel);
                $(pvName + '_pi').attr("href", $(pvName + '_pi').attr('sk-url') + rowData.papel_impresion_id);
                $(pvName + '_mi').attr("href", $(pvName + '_mi').attr('sk-url') + rowData.maquina_id);
                $('#pv_ec_lomo').text(parseFloat(this.pvObj.lomoLibro).toFixed(1));
                break;

            case 'rot_bn':
            case 'rot_color':
                // Conditional assignements depending on rotation of the printing shape
                if (this.pvObj.orientacionFormas != 'h') {
                    let auxReg = this.pvObj.altoForma;
                    this.pvObj.altoForma = this.pvObj.anchoForma;
                    this.pvObj.anchoForma = auxReg;
                }
                $(pvName + '_forma').text(this.pvObj.anchoForma + "x" + this.pvObj.altoForma);
                this.pvObj.altoClick = isNaN(parseFloat(rowData.alto_click)) ? 305 : parseFloat(rowData.alto_click);
                this.pvObj.nFormasH = Math.trunc(this.pvObj.anchoImpresion / this.pvObj.anchoForma);
                this.pvObj.nFormasV = Math.trunc((this.pvObj.altoImpresion - 3) / (this.pvObj.altoForma + 4));
                break;

            case 'bn':
            case 'bnhq':
            case 'color':
            case 'colorhq':
                // Conditional assignements depending on rotation of the printing shape
                if (this.pvObj.orientacionFormas != 'h') {
                    let auxReg = this.pvObj.altoForma;
                    this.pvObj.altoForma = this.pvObj.anchoForma;
                    this.pvObj.anchoForma = auxReg;
                }
                $(pvName + '_forma').text(this.pvObj.anchoForma + "x" + this.pvObj.altoForma);
                break;
            case 'guardas':
                // Fresado TD y Cosido TD
                if (this.pvObj.tipoImpresion === 1 || this.pvObj.tipoImpresion === 3) {
                    this.pvObj.anchoForma = 2 * this.pvObj.anchoLibro;
                }
                // Fresado TB y Cosido TB
                else if (this.pvObj.tipoImpresion === 2 || this.pvObj.tipoImpresion === 4) {
                    this.pvObj.anchoForma = this.pvObj.anchoLibro;
                }
                // Espiral TD y TB, Wire-o TD y TB
                else if (this.pvObj.tipoImpresion === 5 || this.pvObj.tipoImpresion === 6 ||
                    this.pvObj.tipoImpresion === 7 || this.pvObj.tipoImpresion === 8) {
                    this.pvObj.anchoForma = this.pvObj.anchoLibro;
                } else {
                    // ?
                }

                // Conditional assignements depending on rotation of the printing shape
                if (this.pvObj.orientacionFormas == 'v') {
                    let auxReg = this.pvObj.altoForma;
                    this.pvObj.altoForma = this.pvObj.anchoForma;
                    this.pvObj.anchoForma = auxReg;
                }
                $(pvName + '_forma').text(this.pvObj.anchoForma + "x" + this.pvObj.altoForma);
                break;

            default:
                break;
        }
    }

    previewInteriorPlana(lpTagName, isCosido, isTapaDura) {

        // Local parameters
        let guardaV = 0;
        let guardaH = 0;
        let styleText = { size: 12, family: 'Public Sans' };

        // Get the preview Object parameters
        this.getObjetoLP(lpTagName, isCosido, isTapaDura);

        // Configuracion de las guardas
        // Guarda vertical
        if (this.pvObj.nFormasV > 1) {
            guardaV = 3;
        }
        // Guarda horizontal
        if (this.pvObj.nFormasH > 1) {
            guardaH = 3;
        }
        // Constantes relativas a las dimnesiones de la forma
        let LVo = this.pvObj.altoForma / 2;
        let LHo = this.pvObj.anchoForma / 2;

        // Clear the canvas element
        $('#pv_' + this.pvObj.idIndex + '_shape').empty();
        // Get the element for placing the graphical elements
        var divPlana = document.getElementById('pv_' + this.pvObj.idIndex + '_shape');
        var _pvPlana = new Two({ fitted: true }).appendTo(divPlana);
        this.previews.push(_pvPlana)
        // Calculate the center of the canvas element
        var origenPlana = new Two.Vector(_pvPlana.width / 2, _pvPlana.height / 2);

        var areaMaquinaPlana = _pvPlana.makeRectangle(
            origenPlana.x,
            origenPlana.y,
            this.pvObj.anchoMaquina,
            this.pvObj.altoMaquina);
        areaMaquinaPlana.stroke = 'black';
        areaMaquinaPlana.fill = '#E69F6E';
        areaMaquinaPlana.linewidth = 1;

        var areaImpresionPlana = _pvPlana.makeRectangle(
            origenPlana.x,
            origenPlana.y,
            this.pvObj.anchoImpresion,
            this.pvObj.altoImpresion);
        areaImpresionPlana.stroke = 'red';
        areaImpresionPlana.fill = '#FCEAF1';
        areaImpresionPlana.linewidth = 1;

        var formas = [];

        for (let iV = 0; iV < this.pvObj.nFormasV; iV++) {

            for (let iH = 0; iH < this.pvObj.nFormasH; iH++) {

                let _offsetX = ((((this.pvObj.nFormasH - 1) - 2 * iH) * LHo) + (((this.pvObj.nFormasH - 1) / 2 - iH) * guardaH));
                let _offsetY = ((((this.pvObj.nFormasV - 1) - 2 * iV) * LVo) + (((this.pvObj.nFormasV - 1) / 2 - iV) * guardaV));

                formas[iV + iH] = _pvPlana.makeRectangle(
                    origenPlana.x + _offsetX,
                    origenPlana.y + _offsetY,
                    this.pvObj.anchoForma,
                    this.pvObj.altoForma);
                formas[iV + iH].stroke = 'grey';
                formas[iV + iH].fill = '#F4F8F2';
                formas[iV + iH].linewidth = 1;

                // Texts
                _pvPlana.makeText(this.pvObj.altoForma, (origenPlana.x + _offsetX) + (this.pvObj.anchoForma / 2 - 25), (origenPlana.y + _offsetY), styleText);
                _pvPlana.makeText(this.pvObj.anchoForma, (origenPlana.x + _offsetX), (origenPlana.y + _offsetY) + (this.pvObj.altoForma / 2 - 15), styleText);

            }
        }
        _pvPlana.update();
        this.actualPreview = _pvPlana
        this.actualPreviewCallback = this.previewInteriorPlana
        this.setViewBoxToPreview()



    }

    previewRotativa(lpTagName, isCosido, isTapaDura) {

        // Local parameters
        let styleText = { size: 12, family: 'Public Sans' };
        let margenTop = 3;
        let guardaV = 0;
        let guardaH = 0;

        // Get the preview Object parameters
        this.getObjetoLP(lpTagName, isCosido, isTapaDura);

        // Calculos
        // Configuracion de las guardas
        // Guarda vertical
        if (this.pvObj.nFormasV > 1) {
            guardaV = 3;
        }
        // Guarda horizontal
        if (this.pvObj.nFormasH > 1) {
            guardaH = 3;
        }
        // Constantes relativas al libro
        let LVo = this.pvObj.altoForma / 2;
        let LHo = this.pvObj.anchoForma / 2;

        // offset Y
        let nTopForms = (this.pvObj.altoImpresion / 2.0 - margenTop) / (LVo + guardaV);
        const int_part = Math.trunc(nTopForms);
        const float_part = Number((nTopForms - int_part).toFixed(2));
        let yOffset = LVo * float_part;

        //console.log(yOffset);

        // Clear the canvas element
        $('#pv_' + this.pvObj.idIndex + '_shape').empty();
        // Get the element for placing the graphical elements
        var divRotativa = document.getElementById('pv_' + this.pvObj.idIndex + '_shape');
        var _pvRotativa = new Two({ fitted: true }).appendTo(divRotativa);
        this.previews.push(_pvRotativa)

        // Calculate the center of the canvas element
        var origenRotativa = new Two.Vector(_pvRotativa.width / 2, _pvRotativa.height / 2);

        var areaMaquinaRotativa = _pvRotativa.makeRectangle(
            origenRotativa.x,
            origenRotativa.y,
            this.pvObj.anchoMaquina,
            this.pvObj.altoMaquina);
        areaMaquinaRotativa.stroke = 'black';
        areaMaquinaRotativa.fill = '#E69F6E';
        areaMaquinaRotativa.linewidth = 1;

        var areaImpresionRotativa = _pvRotativa.makeRectangle(
            origenRotativa.x,
            origenRotativa.y,
            this.pvObj.anchoImpresion,
            this.pvObj.altoImpresion);
        areaImpresionRotativa.stroke = 'red';
        areaImpresionRotativa.fill = '#FCEAF1';
        areaImpresionRotativa.linewidth = 1;

        var areaClickRotativa = _pvRotativa.makeRectangle(
            origenRotativa.x,
            origenRotativa.y - (this.pvObj.altoImpresion / 2 - this.pvObj.altoClick / 2),
            this.pvObj.anchoImpresion - 10,
            this.pvObj.altoClick);
        areaClickRotativa.stroke = 'blue';
        //areaClickRotativa.fill = '#FCEAF1';
        areaClickRotativa.linewidth = 2;

        var formas = [];

        for (let iV = 0; iV < this.pvObj.nFormasV; iV++) {

            for (let iH = 0; iH < this.pvObj.nFormasH; iH++) {

                let _offsetX = ((((this.pvObj.nFormasH - 1) - 2 * iH) * LHo) + (((this.pvObj.nFormasH - 1) / 2 - iH) * guardaH));
                let _offsetY = ((((this.pvObj.nFormasV - 1) - 2 * iV) * LVo) + (((this.pvObj.nFormasV - 1) / 2 - iV) * guardaV));

                formas[iV + iH] = _pvRotativa.makeRectangle(
                    origenRotativa.x + _offsetX,
                    (origenRotativa.y - yOffset) + _offsetY,
                    this.pvObj.anchoForma,
                    this.pvObj.altoForma);
                formas[iV + iH].stroke = 'grey';
                formas[iV + iH].fill = '#F4F8F2';
                formas[iV + iH].linewidth = 1;

                // Texts
                _pvRotativa.makeText(this.pvObj.altoForma, (origenRotativa.x + _offsetX) + (this.pvObj.anchoForma / 2 - 25), ((origenRotativa.y - yOffset) + _offsetY), styleText);
                _pvRotativa.makeText(this.pvObj.anchoForma, (origenRotativa.x + _offsetX), ((origenRotativa.y - yOffset) + _offsetY) + (this.pvObj.altoForma / 2 - 15), styleText);

            }

        }

        _pvRotativa.update();
        this.actualPreview = _pvRotativa
        this.actualPreviewCallback = this.previewRotativa

        this.setViewBoxToPreview()



    }

    previewEsquemaCubierta() {

        if (this.tipoLibro.includes("cosido") || this.tipoLibro.includes("fresado")) {
            if (this.tipoTapa.toLowerCase().includes("dura"))
                this.#portadaTapaDura();
            else {
                this.#portadaTapaBlanda();
            }
        }
        else if (this.tipoLibro.includes("espiral") || this.tipoLibro.includes("wire-o")) {
            if (this.tipoTapa.toLowerCase().includes("dura"))
                this.#portadaEspiral(true);
            else
                this.#portadaEspiral(false);
        }
        else if (this.tipoLibro.includes("grapado")) {
            this.#portadaGrapado();
        }

    }


    #portadaTapaBlanda() {

        // Variables locales
        let altoLibro, anchoLibro, lomoLibro, anchoCubierta, altoSangrado, anchoSangrado, anchoSolapa;

        if (typeof this.lomo === 'function') {
            this.lomo = this.lomo();
            this.ancho = this.ancho();
            this.alto = this.alto();
            this.lomoRedondo = this.lomoRedondo();
        }

        let styleCotas = { size: 12, family: 'Public Sans' };
        let sangradoTexto = "Sangrado 5 mm";
        let sangradoValor = parseFloat(5);  // mm
        let offsetSolapaValor = parseFloat(0);  // mm

        // Definicion de los parametros del Esquema de Cubierta (EC)
        if (this.solapa == 0) {
            if (this.size == "thumbnail") {
                anchoSangrado = 350;    // px
                altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
            } else {
                anchoSangrado = 800;    // px
                altoSangrado = (anchoSangrado * 0.6 > 650) ? 650 : anchoSangrado * 0.6; // px
            }

            altoLibro = altoSangrado * 0.97;
            anchoLibro = anchoSangrado * 0.419;
            anchoSolapa = 0;
            lomoLibro = anchoSangrado * 0.133;
            anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;

        } else {
            if (this.size == "thumbnail") {
                anchoSangrado = 350;    // px
                altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
            } else {
                anchoSangrado = 800;    // px
                altoSangrado = (anchoSangrado * 0.6 > 650) ? 650 : anchoSangrado * 0.6; // px
            }
            altoLibro = altoSangrado * 0.95;
            anchoLibro = anchoSangrado * 0.28;
            anchoSolapa = anchoSangrado * 0.163;
            lomoLibro = anchoSangrado * 0.09;
            anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
        }

        // Clear the canvas element
        this.container.empty();
        // Get the element for placing the graphical elements
        var previewEC = new Two({ fitted: true }).appendTo(this.container[0]);
        this.previews.push(previewEC)

        // Calculate the center of the canvas element
        var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);

        var sangrado = previewEC.makeRectangle(
            origenEC.x,
            origenEC.y,
            anchoSangrado,
            altoSangrado
        );
        sangrado.stroke = 'black';
        sangrado.dashes = [5, 5];
        sangrado.fill = '#FCEAF1';
        sangrado.linewidth = 1;

        if (this.solapa != 0) {
            var solapas = previewEC.makeRectangle(
                origenEC.x,
                origenEC.y,
                anchoCubierta,
                altoLibro);
            solapas.stroke = 'black';
            solapas.linewidth = 1;

            // Cotas Solapas
            if (this.size != "thumbnail") {
                var cotaSolapa2 = previewEC.makeDobleArrow(
                    origenEC.x - anchoCubierta / 2,
                    origenEC.y - (altoLibro / 3),
                    origenEC.x - anchoLibro - lomoLibro / 2,
                    origenEC.y - (altoLibro / 3),
                    10);
                cotaSolapa2.linewidth = 2;
                var cotaSolapa1 = previewEC.makeDobleArrow(
                    origenEC.x + anchoCubierta / 2,
                    origenEC.y - (altoLibro / 3),
                    origenEC.x + anchoLibro + lomoLibro / 2,
                    origenEC.y - (altoLibro / 3),
                    10);
                cotaSolapa1.linewidth = 2;

                // Textos Solapas
                let stylesSolapa = { size: 18, family: 'Public Sans' };
                previewEC.makeText("Solapa 1", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
                previewEC.makeText("Solapa 2", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
                // Textos Cotas Solapas
                previewEC.makeText(this.solapa.toFixed(1) + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
                previewEC.makeText(this.solapa.toFixed(1) + " mm", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
            }

        }

        var libro = previewEC.makeRectangle(
            origenEC.x,
            origenEC.y,
            ((2 * anchoLibro) + lomoLibro),
            altoLibro);
        libro.stroke = 'black';
        libro.linewidth = 1;

        var lomo = previewEC.makeRectangle(
            origenEC.x,
            origenEC.y,
            lomoLibro,
            altoLibro);
        lomo.stroke = 'black';
        lomo.fill = '#F4F8F2';
        lomo.linewidth = 1;

        // Cotas y textos
        if (this.size != "thumbnail") {
            // Cotas:
            var cotaAnchoCubierta = previewEC.makeDobleArrow(
                origenEC.x - (anchoSangrado / 2),
                origenEC.y + (altoLibro / 2) + 35,
                origenEC.x + (anchoSangrado / 2),
                origenEC.y + (altoLibro / 2) + 35,
                10);
            cotaAnchoCubierta.linewidth = 2;
            var cotaAltoCubierta = previewEC.makeDobleArrow(
                origenEC.x + (anchoCubierta / 2) + 35,
                origenEC.y + (altoSangrado / 2),
                origenEC.x + (anchoCubierta / 2) + 35,
                origenEC.y - (altoSangrado / 2),
                10);
            cotaAltoCubierta.linewidth = 2;
            var cotaAltoLibro = previewEC.makeDobleArrow(
                origenEC.x + (lomoLibro / 2) + 35,
                origenEC.y + (altoLibro / 2),
                origenEC.x + (lomoLibro / 2) + 35,
                origenEC.y - (altoLibro / 2),
                10);
            cotaAltoLibro.linewidth = 2;
            var cotaLomo = previewEC.makeDobleArrow(
                origenEC.x - (lomoLibro / 2),
                origenEC.y + (altoLibro / 3),
                origenEC.x + (lomoLibro / 2),
                origenEC.y + (altoLibro / 3),
                10);
            cotaLomo.linewidth = 2;
            var cotaContraportada = previewEC.makeDobleArrow(
                origenEC.x - (lomoLibro / 2 + anchoLibro),
                origenEC.y - (altoLibro / 3),
                origenEC.x - (lomoLibro / 2),
                origenEC.y - (altoLibro / 3),
                10);
            cotaContraportada.linewidth = 2;
            var cotaPortada = previewEC.makeDobleArrow(
                origenEC.x + (lomoLibro / 2),
                origenEC.y - (altoLibro / 3),
                origenEC.x + (lomoLibro / 2 + anchoLibro),
                origenEC.y - (altoLibro / 3),
                10);
            cotaPortada.linewidth = 2;


            // Textos:
            // Titulos generales
            let stylesEC = { size: 22, weight: 'bold', family: 'Public Sans' };
            previewEC.makeText("Portada", origenEC.x + (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
            previewEC.makeText("Contraportada", origenEC.x - (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
            let a = previewEC.makeText("Lomo", origenEC.x, origenEC.y, stylesEC).rotation = -Math.PI / 2;
            // Sangrados
            let styleSangrado = { size: 10, family: 'Public Sans', style: 'italic', fill: 'red' };
            previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 20), styleSangrado);
            previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 20), styleSangrado);
            previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
            previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
            // Cotas
            let lomoTotal = 0;
            if (typeof this.lomo === 'function') {
                lomoTotal = this.lomo().toFixed(1);
            } else {
                lomoTotal = this.lomo.toFixed(1);
            }
            previewEC.makeText(lomoTotal + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
            previewEC.makeText((this.ancho + this.offsetSolapa).toFixed(1) + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
            previewEC.makeText((this.ancho + this.offsetSolapa).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
            previewEC.makeText(this.alto.toFixed(1) + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
            previewEC.makeText((this.alto + (2 * sangradoValor)).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
            previewEC.makeText((((2 * this.ancho) + (2 * (this.solapa + this.offsetSolapa)) + parseFloat(lomoTotal) + (2 * sangradoValor)).toFixed(1)) + " mm",
                origenEC.x,
                origenEC.y + (altoLibro / 2) + 50,
                styleCotas);

        }

        previewEC.update();
        this.actualPreview = previewEC
        this.actualPreviewCallback = this.#portadaTapaBlanda
        this.setViewBoxToPreview()





    }


    #portadaTapaDura() {

        // Variables locales
        let altoLibro, anchoLibro, lomoLibro, anchoCubierta, altoSangrado, anchoSangrado;

        if (typeof this.lomo === 'function') {
            this.lomo = this.lomo();
            this.ancho = this.ancho();
            this.alto = this.alto();
            this.lomoRedondo = this.lomoRedondo();
        }

        let styleCotas = { size: 12, family: 'Public Sans' };
        let sangradoTexto = "Sangrado 20 mm";
        let sangradoValor = parseFloat(20);  // mm
        if (this.ancho >= 210 || this.alto >= 267) {
            sangradoValor = parseFloat(10);  // mm
            sangradoTexto = "Sangrado 10 mm";
        }
        let anchoPliegue = parseFloat(7);  // mm cajo
        let altoPliegue = parseFloat(7);  // mm
        let anchoCarton = parseFloat(6); // mm
        if (this.lomoRedondo)
            anchoCarton += parseFloat(6); // mm
        // Definicion de los parametros del Esquema de Cubierta (EC)
        if (this.size == "thumbnail") {
            anchoSangrado = 350;    // px
            altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
        } else {
            anchoSangrado = 800;    // px
            altoSangrado = (anchoSangrado * 0.6 > 650) ? 650 : anchoSangrado * 0.6; // px
        }
        altoLibro = altoSangrado * 0.88;
        anchoLibro = anchoSangrado * 0.39;
        lomoLibro = anchoSangrado * 0.133;
        anchoCubierta = (2 * anchoLibro) + lomoLibro;

        // Clear the canvas element
        this.container.empty();
        // Get the element for placing the graphical elements
        var previewEC = new Two({ fitted: true }).appendTo($(this.container)[0]);
        this.previews.push(previewEC)

        // Calculate the center of the canvas element
        var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);

        var sangrado = previewEC.makeRectangle(
            origenEC.x,
            origenEC.y,
            anchoSangrado,
            altoSangrado
        );
        sangrado.stroke = 'black';
        sangrado.dashes = [5, 5];
        sangrado.fill = '#FCEAF1';
        sangrado.linewidth = 1;

        var libro = previewEC.makeRectangle(
            origenEC.x,
            origenEC.y,
            ((2 * anchoLibro) + lomoLibro),
            altoLibro);
        libro.stroke = 'black';
        libro.linewidth = 1;

        var lomo = previewEC.makeRectangle(
            origenEC.x,
            origenEC.y,
            lomoLibro,
            altoLibro);
        lomo.stroke = 'black';
        lomo.fill = '#F4F8F2';
        lomo.linewidth = 1;

        // Cotas y textos
        if (this.size != "thumbnail") {
            // Cotas:
            var cotaAnchoCubierta = previewEC.makeDobleArrow(
                origenEC.x - (anchoSangrado / 2),
                origenEC.y + (altoLibro / 2) + 35,
                origenEC.x + (anchoSangrado / 2),
                origenEC.y + (altoLibro / 2) + 35,
                10);
            cotaAnchoCubierta.linewidth = 2;
            var cotaAltoCubierta = previewEC.makeDobleArrow(
                origenEC.x + (anchoCubierta / 2) + 40,
                origenEC.y + (altoSangrado / 2),
                origenEC.x + (anchoCubierta / 2) + 40,
                origenEC.y - (altoSangrado / 2),
                10);
            cotaAltoCubierta.linewidth = 2;
            var cotaAltoLibro = previewEC.makeDobleArrow(
                origenEC.x + (lomoLibro / 2) + 35,
                origenEC.y + (altoLibro / 2),
                origenEC.x + (lomoLibro / 2) + 35,
                origenEC.y - (altoLibro / 2),
                10);
            cotaAltoLibro.linewidth = 2;
            var cotaLomo = previewEC.makeDobleArrow(
                origenEC.x - (lomoLibro / 2),
                origenEC.y + (altoLibro / 3),
                origenEC.x + (lomoLibro / 2),
                origenEC.y + (altoLibro / 3),
                10);
            cotaLomo.linewidth = 2;
            var cotaContraportada = previewEC.makeDobleArrow(
                origenEC.x - (lomoLibro / 2 + anchoLibro),
                origenEC.y - (altoLibro / 3),
                origenEC.x - (lomoLibro / 2),
                origenEC.y - (altoLibro / 3),
                10);
            cotaContraportada.linewidth = 2;
            var cotaPortada = previewEC.makeDobleArrow(
                origenEC.x + (lomoLibro / 2),
                origenEC.y - (altoLibro / 3),
                origenEC.x + (lomoLibro / 2 + anchoLibro),
                origenEC.y - (altoLibro / 3),
                10);
            cotaPortada.linewidth = 2;


            // Textos:
            // Titulos generales
            let stylesEC = { size: 22, weight: 'bold', family: 'Public Sans' };
            previewEC.makeText("Portada", origenEC.x + (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
            previewEC.makeText("Contraportada", origenEC.x - (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
            previewEC.makeText("Lomo", origenEC.x, origenEC.y, stylesEC).rotation = -Math.PI / 2;
            // Sangrados
            let styleSangrado = { size: 10, family: 'Public Sans', style: 'italic', fill: 'red' };
            previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
            previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
            previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + 13), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
            previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + 13), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
            // Cotas
            previewEC.makeText((this.lomo + anchoCarton).toFixed(1) + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
            previewEC.makeText((this.ancho + anchoPliegue).toFixed(1) + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
            previewEC.makeText((this.ancho + anchoPliegue).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
            previewEC.makeText((this.alto + altoPliegue).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
            previewEC.makeText((this.alto + (2 * sangradoValor) + altoPliegue).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro) + 55, origenEC.y, styleCotas).rotation = -Math.PI / 2;
            previewEC.makeText((2 * this.ancho) + this.lomo + (2 * sangradoValor) + +(2 * anchoPliegue) + anchoCarton + " mm",
                origenEC.x,
                origenEC.y + (altoLibro / 2) + 50,
                styleCotas);

        }

        previewEC.update();
        this.actualPreview = previewEC
        this.actualPreviewCallback = this.#portadaTapaBlanda
        this.setViewBoxToPreview()




    }

    #portadaEspiral(isTapaDura = false) {

        // Variables locales
        let altoLibro, anchoLibro, anchoSolapa, anchoCalle, altoSangrado, anchoSangrado, offsetCubierta, anchoCubierta;

        if (typeof this.lomo === 'function') {
            this.lomo = this.lomo();
            this.ancho = this.ancho();
            this.alto = this.alto();
            this.lomoRedondo = this.lomoRedondo();
            this.solapa = this.solapa();
        }

        let styleCotas = { size: 12, family: 'Public Sans' };
        let sangradoTexto = (isTapaDura) ? "Sangrado 20 mm" : "Sangrado 5 mm";
        let sangradoValor = (isTapaDura) ? parseFloat(20) : parseFloat(5);  // mm

        // Definicion de los parametros del Esquema de Cubierta (EC)
        if ((this.solapa !== 0) && (!isTapaDura)) {
            if (this.size == "thumbnail") {
                anchoSangrado = 350;    // px
                altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
            } else {
                anchoSangrado = 800;    // px
                altoSangrado = (anchoSangrado * 0.6 > 650) ? 650 : anchoSangrado * 0.6; // px
            }
            altoLibro = altoSangrado * 0.95;
            anchoLibro = anchoSangrado * 0.28;
            anchoCalle = anchoSangrado * 0.02;
            anchoSolapa = anchoSangrado * 0.163;
            sangrado = anchoSangrado * 0.03;
            anchoCubierta = 2 * (anchoLibro + anchoSolapa + sangrado) + anchoCalle;
            offsetCubierta = anchoLibro / 2 + anchoCalle / 2 + anchoSolapa / 2 + sangrado;
        } else {
            if (this.size == "thumbnail") {
                anchoSangrado = 350;    // px
                altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
            } else {
                anchoSangrado = 800;    // px
                altoSangrado = (anchoSangrado * 0.6 > 650) ? 650 : anchoSangrado * 0.6; // px
            }
            altoLibro = (isTapaDura) ? altoSangrado * 0.88 : altoSangrado * 0.9;
            anchoLibro = (isTapaDura) ? anchoSangrado * 0.39 : anchoSangrado * 0.44;
            anchoCalle = anchoSangrado * 0.02;
            anchoSolapa = 0;
            anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + anchoCalle;
            offsetCubierta = anchoLibro / 2 + anchoCalle / 2 + anchoSolapa + sangradoValor;
        }

        var previewEC = new Two({ fitted: true }).appendTo(this.container[0]);
        this.previews.push(previewEC)

        // Calculate the center of the canvas element
        var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);

        var sangrado = previewEC.makeRectangle(
            origenEC.x,
            origenEC.y,
            anchoSangrado,
            altoSangrado
        );
        sangrado.stroke = 'black';
        sangrado.dashes = [5, 5];
        sangrado.fill = '#FCEAF1';
        sangrado.linewidth = 1;

        if ((this.solapa != 0) && (!isTapaDura)) {
            var solapa1 = previewEC.makeRectangle(
                origenEC.x + (anchoLibro + anchoCalle / 2 + anchoSolapa / 2 + sangradoValor),
                origenEC.y,
                anchoSolapa,
                altoLibro);
            solapa1.stroke = 'black';
            solapa1.linewidth = 1;

            var solapa2 = previewEC.makeRectangle(
                origenEC.x - (anchoLibro + anchoCalle / 2 + anchoSolapa / 2 + sangradoValor),
                origenEC.y,
                anchoSolapa,
                altoLibro);
            solapa2.stroke = 'black';
            solapa2.linewidth = 1;

            // Cotas y textos
            if (this.size != "thumbnail") {
                // Cotas
                var cotaSolapa2 = previewEC.makeDobleArrow(
                    origenEC.x - (anchoCalle / 2 + sangradoValor + anchoLibro + anchoSolapa),
                    origenEC.y - (altoLibro / 3),
                    origenEC.x - (anchoLibro + sangradoValor + anchoCalle / 2),
                    origenEC.y - (altoLibro / 3),
                    10);
                cotaSolapa2.linewidth = 2;
                var cotaSolapa1 = previewEC.makeDobleArrow(
                    origenEC.x + (anchoCalle / 2 + sangradoValor + anchoLibro + anchoSolapa),
                    origenEC.y - (altoLibro / 3),
                    origenEC.x + (anchoLibro + sangradoValor + anchoCalle / 2),
                    origenEC.y - (altoLibro / 3),
                    10);
                cotaSolapa1.linewidth = 2;

                // Textos Solapas
                let stylesSolapa = { size: 18, family: 'Public Sans' };
                previewEC.makeText("Solapa 1", origenEC.x + anchoLibro + (anchoCalle + anchoSolapa) / 2, origenEC.y, stylesSolapa);
                previewEC.makeText("Solapa 2", origenEC.x - anchoLibro - (anchoCalle + anchoSolapa) / 2, origenEC.y, stylesSolapa);
                // Textos Cotas Solapas
                previewEC.makeText((this.solapa).toFixed(1) + " mm", origenEC.x - anchoLibro - (anchoCalle + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
                previewEC.makeText(this.solapa.toFixed(1) + " mm", origenEC.x + anchoLibro + (anchoCalle + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
            }

        }

        var portada = previewEC.makeRectangle(
            origenEC.x + (anchoLibro / 2 + anchoCalle / 2 + sangradoValor),
            origenEC.y,
            anchoLibro,
            altoLibro);
        portada.stroke = 'black';
        portada.linewidth = 1;

        var contraportada = previewEC.makeRectangle(
            origenEC.x - (anchoLibro / 2 + anchoCalle / 2 + sangradoValor),
            origenEC.y,
            anchoLibro,
            altoLibro);
        contraportada.stroke = 'black';
        contraportada.linewidth = 1;

        var calle = previewEC.makeRectangle(
            origenEC.x,
            origenEC.y,
            anchoCalle,
            altoSangrado);
        calle.stroke = 'black';
        calle.dashes = [2, 5];
        calle.fill = '#F4F8F2';
        calle.linewidth = 1;

        // Cotas y textos
        if (this.size != "thumbnail") {
            // Cotas:
            var cotaAnchoCubierta = previewEC.makeDobleArrow(
                origenEC.x - (anchoSangrado / 2),
                origenEC.y + (altoLibro / 2) + 35,
                origenEC.x + (anchoSangrado / 2),
                origenEC.y + (altoLibro / 2) + 35,
                10);
            cotaAnchoCubierta.linewidth = 2;
            var cotaAltoCubierta = previewEC.makeDobleArrow(
                origenEC.x + (anchoSangrado / 2) + 15,
                origenEC.y + (altoSangrado / 2),
                origenEC.x + (anchoSangrado / 2) + 15,
                origenEC.y - (altoSangrado / 2),
                10);
            cotaAltoCubierta.linewidth = 2;
            var cotaAltoLibro = previewEC.makeDobleArrow(
                origenEC.x + (anchoCalle / 2) + 35,
                origenEC.y + (altoLibro / 2),
                origenEC.x + (anchoCalle / 2) + 35,
                origenEC.y - (altoLibro / 2),
                10);
            cotaAltoLibro.linewidth = 2;
            var cotaContraportada = previewEC.makeDobleArrow(
                origenEC.x - (anchoCalle / 2 + anchoLibro + sangradoValor),
                origenEC.y - (altoLibro / 3),
                origenEC.x - ((anchoCalle / 2) + sangradoValor),
                origenEC.y - (altoLibro / 3),
                10);
            cotaContraportada.linewidth = 2;
            var cotaPortada = previewEC.makeDobleArrow(
                origenEC.x + ((anchoCalle / 2) + sangradoValor),
                origenEC.y - (altoLibro / 3),
                origenEC.x + (anchoCalle / 2 + anchoLibro + sangradoValor),
                origenEC.y - (altoLibro / 3),
                10);
            cotaPortada.linewidth = 2;


            // Textos:
            // Titulos generales
            let stylesEC = { size: 22, weight: 'bold', family: 'Public Sans' };
            previewEC.makeText("Portada",
                origenEC.x + anchoLibro / 2 + anchoCalle / 2 + sangradoValor + 15,
                origenEC.y,
                stylesEC
            );
            previewEC.makeText("Contraportada",
                origenEC.x - (anchoLibro / 2 + anchoCalle / 2 + sangradoValor),
                origenEC.y,
                stylesEC
            );
            // Sangrados
            let styleSangrado = { size: 10, family: 'Public Sans', style: 'italic', fill: 'red' };
            previewEC.makeText(sangradoTexto, origenEC.x + offsetCubierta, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
            previewEC.makeText(sangradoTexto, origenEC.x + offsetCubierta, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
            previewEC.makeText(sangradoTexto, origenEC.x - offsetCubierta, origenEC.y + (altoLibro / 2 + 13), styleSangrado);
            previewEC.makeText(sangradoTexto, origenEC.x - offsetCubierta, origenEC.y - (altoLibro / 2 + 13), styleSangrado);
            previewEC.makeText(sangradoTexto, origenEC.x + (anchoSangrado / 2) - 20, origenEC.y, styleSangrado).rotation = -Math.PI / 2;
            previewEC.makeText(sangradoTexto, origenEC.x - (anchoSangrado / 2) + 20, origenEC.y, styleSangrado).rotation = -Math.PI / 2;
            // Cotas
            previewEC.makeText(this.ancho.toFixed(1) + " mm", origenEC.x - (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
            previewEC.makeText(this.ancho.toFixed(1) + " mm", origenEC.x + (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
            previewEC.makeText(this.alto.toFixed(1) + " mm", origenEC.x + (anchoCalle / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
            previewEC.makeText((this.alto + (2 * sangradoValor)).toFixed(1) + " mm",
                origenEC.x + (anchoSangrado / 2) + 30,
                origenEC.y,
                styleCotas
            ).rotation = -Math.PI / 2;
            previewEC.makeText(((2 * this.ancho) + this.lomo + (2 * sangradoValor)).toFixed(1) + " mm",
                origenEC.x,
                origenEC.y + (altoLibro / 2) + 50,
                styleCotas);
        }

        previewEC.update();
        this.actualPreview = previewEC
        this.actualPreviewCallback = this.#portadaEspiral
        this.setViewBoxToPreview()





    }


    #portadaGrapado() {

        // Variables locales
        let altoLibro, anchoLibro, lomoLibro, anchoSolapa, anchoCubierta, altoSangrado, anchoSangrado;

        if (typeof this.lomo === 'function') {
            this.lomo = this.lomo();
            this.ancho = this.ancho();
            this.alto = this.alto();
            this.lomoRedondo = this.lomoRedondo();
            this.solapa = this.solapa();
        }

        let styleCotas = { size: 12, family: 'Public Sans' };
        let sangradoTexto = "Sangrado 5 mm";
        let sangradoValor = parseFloat(5);  // mm

        // Definicion de los parametros del Esquema de Cubierta (EC)
        if (this.solapa == 0) {
            if (this.size == "thumbnail") {
                anchoSangrado = 350;    // px
                altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
            } else {
                anchoSangrado = 800;    // px
                altoSangrado = (anchoSangrado * 0.6 > 650) ? 650 : anchoSangrado * 0.6; // px
            }
            altoLibro = altoSangrado * 0.97;
            anchoLibro = anchoSangrado * 0.48;
            anchoSolapa = 0;
            lomoLibro = 0;     // ESTA ES LA DIFERENCIA PARA GRAPADO
            anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;

        } else {
            if (this.size == "thumbnail") {
                anchoSangrado = 350;    // px
                altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
            } else {
                anchoSangrado = 800;    // px
                altoSangrado = (anchoSangrado * 0.6 > 650) ? 650 : anchoSangrado * 0.6; // px
            }
            altoLibro = altoSangrado * 0.95;
            anchoLibro = anchoSangrado * 0.3;
            anchoSolapa = anchoSangrado * 0.18;
            lomoLibro = 0;     // ESTA ES LA DIFERENCIA PARA GRAPADO
            anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + lomoLibro;
        }

        var previewEC = new Two({ fitted: true }).appendTo(this.container[0]);
        this.previews.push(previewEC)

        // Calculate the center of the canvas element
        var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);

        var sangrado = previewEC.makeRectangle(
            origenEC.x,
            origenEC.y,
            anchoSangrado,
            altoSangrado
        );
        sangrado.stroke = 'black';
        sangrado.dashes = [5, 5];
        sangrado.fill = '#FCEAF1';
        sangrado.linewidth = 1;

        if (this.solapa != 0) {
            var solapas = previewEC.makeRectangle(
                origenEC.x,
                origenEC.y,
                anchoCubierta,
                altoLibro);
            solapas.stroke = 'black';
            solapas.linewidth = 1;

            // Cotas y textos
            if (this.size != "thumbnail") {
                // Cotas
                var cotaSolapa2 = previewEC.makeDobleArrow(
                    origenEC.x - anchoCubierta / 2,
                    origenEC.y - (altoLibro / 3),
                    origenEC.x - anchoLibro - lomoLibro / 2,
                    origenEC.y - (altoLibro / 3),
                    10);
                cotaSolapa2.linewidth = 2;
                var cotaSolapa1 = previewEC.makeDobleArrow(
                    origenEC.x + anchoCubierta / 2,
                    origenEC.y - (altoLibro / 3),
                    origenEC.x + anchoLibro + lomoLibro / 2,
                    origenEC.y - (altoLibro / 3),
                    10);
                cotaSolapa1.linewidth = 2;

                // Textos Solapas
                let stylesSolapa = { size: 18, family: 'Public Sans' };
                previewEC.makeText("Solapa 1", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
                previewEC.makeText("Solapa 2", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y, stylesSolapa);
                // Textos Cotas Solapas
                previewEC.makeText(this.solapa + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
                previewEC.makeText(this.solapa + " mm", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
            }

        }

        var libro = previewEC.makeRectangle(
            origenEC.x,
            origenEC.y,
            ((2 * anchoLibro) + lomoLibro),
            altoLibro);
        libro.stroke = 'black';
        libro.linewidth = 1;

        var lomo = previewEC.makeRectangle(
            origenEC.x,
            origenEC.y,
            lomoLibro,
            altoLibro);
        lomo.stroke = 'black';
        lomo.fill = '#F4F8F2';
        lomo.linewidth = 1;

        // Cotas y textos
        if (this.size != "thumbnail") {
            // Cotas:
            var cotaAnchoCubierta = previewEC.makeDobleArrow(
                origenEC.x - (anchoSangrado / 2),
                origenEC.y + (altoLibro / 2) + 35,
                origenEC.x + (anchoSangrado / 2),
                origenEC.y + (altoLibro / 2) + 35,
                10);
            cotaAnchoCubierta.linewidth = 2;
            var cotaAltoCubierta = previewEC.makeDobleArrow(
                origenEC.x + (anchoCubierta / 2) + 35,
                origenEC.y + (altoSangrado / 2),
                origenEC.x + (anchoCubierta / 2) + 35,
                origenEC.y - (altoSangrado / 2),
                10);
            cotaAltoCubierta.linewidth = 2;
            var cotaAltoLibro = previewEC.makeDobleArrow(
                origenEC.x + (lomoLibro / 2) + 35,
                origenEC.y + (altoLibro / 2),
                origenEC.x + (lomoLibro / 2) + 35,
                origenEC.y - (altoLibro / 2),
                10);
            cotaAltoLibro.linewidth = 2;
            var cotaContraportada = previewEC.makeDobleArrow(
                origenEC.x - (lomoLibro / 2 + anchoLibro),
                origenEC.y - (altoLibro / 3),
                origenEC.x - (lomoLibro / 2),
                origenEC.y - (altoLibro / 3),
                10);
            cotaContraportada.linewidth = 2;
            var cotaPortada = previewEC.makeDobleArrow(
                origenEC.x + (lomoLibro / 2),
                origenEC.y - (altoLibro / 3),
                origenEC.x + (lomoLibro / 2 + anchoLibro),
                origenEC.y - (altoLibro / 3),
                10);
            cotaPortada.linewidth = 2;

            // Textos:
            // Titulos generales
            let stylesEC = { size: 22, weight: 'bold', family: 'Public Sans' };
            previewEC.makeText("Portada", origenEC.x + (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
            previewEC.makeText("Contraportada", origenEC.x - (lomoLibro + anchoLibro) / 2, origenEC.y, stylesEC);
            // Sangrados
            let styleSangrado = { size: 10, family: 'Public Sans', style: 'italic', fill: 'red' };
            previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y + (altoLibro / 2 + 20), styleSangrado);
            previewEC.makeText(sangradoTexto, origenEC.x, origenEC.y - (altoLibro / 2 + 20), styleSangrado);
            previewEC.makeText(sangradoTexto, origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
            previewEC.makeText(sangradoTexto, origenEC.x - (lomoLibro / 2 + anchoLibro + anchoSolapa + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
            // Cotas
            previewEC.makeText((this.ancho + this.offsetSolapa).toFixed(1) + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
            previewEC.makeText((this.ancho + this.offsetSolapa).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
            previewEC.makeText(this.alto.toFixed(1) + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
            previewEC.makeText(this.alto.toFixed(1) + (2 * sangradoValor) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
            previewEC.makeText(((2 * anchoLibro) + (2 * (this.solapa + this.offsetSolapa)) + this.lomo + (2 * sangradoValor)).toFixed(1) + " mm",
                origenEC.x,
                origenEC.y + (altoLibro / 2) + 50,
                styleCotas);
        }

        previewEC.update();
        this.actualPreview = previewEC
        this.actualPreviewCallback = this.#portadaGrapado
        this.setViewBoxToPreview()



    }
    setViewBoxToPreview() {
        if (this.actualPreview) {


        this.actualPreview.renderer.domElement.setAttribute('width', '100%'); // Optional, for aspect ratio
        this.actualPreview.renderer.domElement.setAttribute('height', "40rem"); // Optional, for aspect ratio

            this.resize()

        }

    }
    resize() {
        var fitElement = this.actualPreview.fit.domElement;
        this.actualPreview.renderer.domElement.setAttribute('viewBox', `0 0 ${this.actualPreview.width} ${this.actualPreview.height}`);
        this.actualPreview.renderer.domElement.setAttribute('preserveAspectRatio', 'xMidYMid meet'); // Optional, for aspect ratio
        this.actualPreview.renderer.domElement.setAttribute('width', '100%'); // Optional, for aspect ratio
        this.actualPreview.renderer.domElement.setAttribute('height', "40rem"); // Optional, for aspect ratio

    }

}

export default previewFormas;