preview casi

ci4/app/Controllers/Presupuestos/Presupuestocliente.php

@@ -1977,7 +1977,9 @@ class Presupuestocliente extends \App\Controllers\BaseResourceController
             }
 
             $return_data += [
-                'errors' => [],
+                'errors' => (object) ([
+                    'status' => 0,
+                ]),
                 //'total_lp' => $costeInterior + $coste_cubierta + $coste_sobrecubierta,
                 //'acabadoCubierta' => $acabadoCubierta,
                 //'acabadoSobrecubierta' => $acabadoSobrecubierta,

httpdocs/assets/js/safekat/pages/presupuestoCliente/presupuestoCliente.js

@@ -42,6 +42,7 @@ class PresupuestoCliente {
             () => { $('#loader').modal('hide'); });
 
         this.actualizarTiradasEnvio = false;
+        this.calcularPresupuesto = false;
     }
 
 
@@ -65,7 +66,7 @@ class PresupuestoCliente {
         this.btnSave.on('click', this.#savePresupuesto.bind(this));
 
         if (window.location.href.includes("edit")) {
-            $(".calcular-presupuesto").on('change', () => { });
+
             this.#cargarPresupuesto();
             const successMessage = sessionStorage.getItem('message');
             if (successMessage) {
@@ -74,61 +75,67 @@ class PresupuestoCliente {
             }
         }
         else {
-            $(".calcular-presupuesto").on('change', this.checkForm.bind(this));
+            this.calcularPresupuesto = true;
         }
 
+        $(".calcular-presupuesto").on('change', this.checkForm.bind(this));
+
     }
 
 
     checkForm(event) {
 
-        if (event.target.id === 'divDirecciones') {
+        if (this.calcularPresupuesto) {
-            if (!this.direcciones.calcularPresupuesto) {
+
-                this.actualizarTiradasEnvio = false;
+            if (event.target.id === 'divDirecciones') {
-                $('#loader').modal('hide');
+                if (!this.direcciones.calcularPresupuesto) {
-                return;
+                    this.actualizarTiradasEnvio = false;
+                    $('#loader').modal('hide');
+                    return;
+                }
+
+            }
+            else {
+                this.actualizarTiradasEnvio = true;
+                this.direcciones.divTiradas.empty();
             }
 
-        }
+            this.#getDatos();
-        else {
-            this.actualizarTiradasEnvio = true;
-            this.direcciones.divTiradas.empty();
-        }
 
-        this.#getDatos();
+            this.divTiradasPrecios.empty();
 
-        this.divTiradasPrecios.empty();
+            let datos_to_check = { ...this.datos };
-
+            if (datos_to_check.direcciones) {
-        let datos_to_check = { ...this.datos };
+                delete datos_to_check.direcciones;
-        if (datos_to_check.direcciones) {
-            delete datos_to_check.direcciones;
-        }
-        if (datos_to_check.posPaginasColor) {
-            delete datos_to_check.posPaginasColor;
-        }
-
-        if (Object.values(datos_to_check).every(this.#isValidDataForm)) {
-            try {
-                setTimeout(function () {
-                    $('#loader').modal('show');
-                }, 0);
-
-                // Si se está ejecutando la petición, abortar la petición anterior
-                this.ajax_calcular.abort();
-
-                this.ajax_calcular.setData(this.datos);
-                this.ajax_calcular.post();
-                this.direcciones.calcularPresupuesto = false;
             }
-            catch (e) {
+            if (datos_to_check.posPaginasColor) {
-                console.log(e);
+                delete datos_to_check.posPaginasColor;
-                $('#loader').modal('hide');
             }
 
+            if (Object.values(datos_to_check).every(this.#isValidDataForm)) {
+                try {
+                    setTimeout(function () {
+                        $('#loader').modal('show');
+                    }, 0);
+
+                    // Si se está ejecutando la petición, abortar la petición anterior
+                    this.ajax_calcular.abort();
+
+                    this.ajax_calcular.setData(this.datos);
+                    this.ajax_calcular.post();
+                    this.direcciones.calcularPresupuesto = false;
+                }
+                catch (e) {
+                    console.log(e);
+                    $('#loader').modal('hide');
+                }
+
+            }
         }
     }
 
 
+
     /*RELLENAR_PRESUPUESTO(finalizar) {
 
         if (finalizar) {
@@ -267,9 +274,11 @@ class PresupuestoCliente {
         $('#loader').modal('hide');
 
         if (Object.values(response.errors).some((value) => value !== "")) {
-            popErrorAlert("No se ha podido calcular el presupuesto para los datos proporcionados. Por favor, póngase en contacto con el departamento comercial."
+            if (response.errors.status == 1) {
-                , "sk-alert-2", false);
+                popErrorAlert("No se ha podido calcular el presupuesto para los datos proporcionados. Por favor, póngase en contacto con el departamento comercial."
-            return;
+                    , "sk-alert-2", false);
+                return;
+            }
         }
         else {
             popAlert2Hide();
@@ -277,7 +286,7 @@ class PresupuestoCliente {
 
         if (response.tiradas && response.tiradas.length) {
 
-            let tiradas = {...response.tiradas};
+            let tiradas = { ...response.tiradas };
             tiradas = Object.keys(tiradas).map((key) => tiradas[key]);
             tiradas.sort((a, b) => a - b);
             this.divTiradasPrecios.empty();
@@ -301,6 +310,7 @@ class PresupuestoCliente {
                 $(`#containerTiradasEnvios .tirada-envio input[tirada="${response.tiradas[0]}"]`).trigger('click');
             }, 0);
         }
+
         // DEBUG
         //console.log(response);
     }
@@ -437,33 +447,34 @@ class PresupuestoCliente {
             {},
             (response) => {
 
-                setTimeout(() => {
+                if (response.status === 1) {
-                    if (response.status === 1) {
 
-                        this.lc.val(parseFloat(response.data.lc).toFixed(2));
+                    this.lc.val(parseFloat(response.data.lc).toFixed(2));
-                        this.lsc.val(parseFloat(response.data.lsc).toFixed(2));
+                    this.lsc.val(parseFloat(response.data.lsc).toFixed(2));
 
-                        this.datosGenerales.cargarDatos(response.data.datosGenerales);
+                    this.calcularPresupuesto = false;
-                        this.direcciones.handleChangeCliente();
-                        this.disenioInterior.cargarDatos(response.data.interior, response.data.datosGenerales.papelInteriorDiferente);
-                        this.disenioCubierta.cargarDatos(response.data.cubierta, response.data.guardas, response.data.sobrecubierta);
-                        this.direcciones.cargarDatos(response.data.direcciones, response.data.datosGenerales);
 
-                        setTimeout(() => {
+                    this.datosGenerales.cargarDatos(response.data.datosGenerales);
-                            this.checkForm({ target: { id: 'tirada' } });
+                    this.direcciones.handleChangeCliente();
-                            this.validationStepper.next();
+                    this.disenioInterior.cargarDatos(response.data.interior, response.data.datosGenerales.papelInteriorDiferente);
-                            this.validationStepper.next();
+                    this.disenioCubierta.cargarDatos(response.data.cubierta, response.data.guardas, response.data.sobrecubierta);
-                            this.validationStepper.next();
+                    this.direcciones.cargarDatos(response.data.direcciones, response.data.datosGenerales);
-                            this.validationStepper.next();
+
-                            $('#loader').modal('hide');
+                    setTimeout(() => {
-                        }, 0);
+                        //this.checkForm({ target: { id: 'tirada' } });
-                    }
+                        this.validationStepper.next();
-                    $(".calcular-presupuesto").on('change', this.checkForm.bind(this));
+                        this.validationStepper.next();
-                }, 0);
+                        this.validationStepper.next();
+                        this.validationStepper.next();
+                        $('#loader').modal('hide');
+                        this.calcularPresupuesto = true;
+                        this.checkForm({ target: { id: 'tirada' } });
+                    }, 0);
+                }
             },
             () => {
                 $('#loader').modal('hide');
-                $(".calcular-presupuesto").on('change', this.checkForm.bind(this));
+                this.calcularPresupuesto = true;
             }
         ).get();
     }

httpdocs/assets/js/safekat/pages/preview.js

@@ -24,15 +24,15 @@ class previewFormas {
                 this.#portadaTapaBlanda();
             }
         }
-        /*else if (this.tipoLibro.includes("espiral") || this.tipoLibro.includes("wire-o")) {
+        else if (this.tipoLibro.includes("espiral") || this.tipoLibro.includes("wire-o")) {
             if (this.tipoTapa.includes("dura"))
-                portadaEspiral(isThumbnail, true);
+                this.#portadaEspiral(isThumbnail, true);
             else
-                portadaEspiral(isThumbnail, false);
+                this.#portadaEspiral(isThumbnail, false);
         }
         else if (this.tipoLibro.includes("grapado")) {
             portadaGrapado(isThumbnail);
-        }*/
+        }
 
     }
 
@@ -80,7 +80,7 @@ class previewFormas {
         // Clear the canvas element
         this.container.empty();
         // Get the element for placing the graphical elements
-        var previewEC = new Two({ fitted: true }).appendTo(this.container);
+        var previewEC = new Two({ fitted: true }).appendTo(this.container[0]);
         // Calculate the center of the canvas element
         var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);
     
@@ -126,8 +126,8 @@ class previewFormas {
                 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(pvObj.anchoSolapa + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+                previewEC.makeText(anchoSolapa.toFixed(1) + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
-                previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+                previewEC.makeText(anchoSolapa.toFixed(1) + " mm", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
             }
     
         }
@@ -209,12 +209,12 @@ class previewFormas {
             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(pvObj.lomoLibro + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText(lomoLibro.toFixed(1) + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
-            previewEC.makeText(pvObj.anchoLibro + offsetSolapaValor + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText((anchoLibro + offsetSolapaValor).toFixed(1) + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-            previewEC.makeText(pvObj.anchoLibro + offsetSolapaValor + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText((anchoLibro + offsetSolapaValor).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-            previewEC.makeText(pvObj.altoLibro + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+            previewEC.makeText(altoLibro.toFixed(1) + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-            previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+            previewEC.makeText((altoLibro + (2 * sangradoValor)).toFixed(1) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-            previewEC.makeText((2 * pvObj.anchoLibro) + (2 * (pvObj.anchoSolapa + offsetSolapaValor)) + pvObj.lomoLibro + (2 * sangradoValor) + " mm",
+            previewEC.makeText(((2 * anchoLibro) + (2 * (anchoSolapa + offsetSolapaValor)) + lomoLibro + (2 * sangradoValor)).toFixed(1) + " mm",
                 origenEC.x,
                 origenEC.y + (altoLibro / 2) + 50,
                 styleCotas);
@@ -365,6 +365,214 @@ class previewFormas {
     
         previewEC.update();    
     }
+
+    #portadaEspiral(isTapaDura = false) {
+
+        // Variables locales
+        let altoLibro, anchoLibro, anchoCalle, anchoCubierta, altoSangrado, anchoSangrado, anchoSolapa, offsetCubierta;
+        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 ((anchoSolapa !== 0) && (!isTapaDura)) {
+            if (isThumbnail) {
+                anchoSangrado = 350;    // px
+                altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
+            } else {
+                anchoSangrado = 750;    // px
+                altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // 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 = 750;    // px
+                altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
+            }
+            altoLibro = (isTapaDura) ? altoSangrado * 0.88 : altoSangrado * 0.97;
+            anchoLibro = (isTapaDura) ? anchoSangrado * 0.39 : anchoSangrado * 0.419;
+            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]);
+        // 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 ((anchoSolapa != 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 (!isThumbnail) {
+                // 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(anchoSolapa + " mm", origenEC.x - anchoLibro - (anchoCalle + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+                previewEC.makeText(anchoSolapa + " 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 (!isThumbnail) {
+            // 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(anchoLibro.toFixed(1) + " mm", origenEC.x - (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText(anchoLibro.toFixed(1) + " mm", origenEC.x + (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText(altoLibro.toFixed(1) + " mm", origenEC.x + (anchoCalle / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+            previewEC.makeText((altoLibro + (2 * sangradoValor)).toFixed(1) + " mm",
+                origenEC.x + (anchoSangrado / 2) + 30,
+                origenEC.y,
+                styleCotas
+            ).rotation = -Math.PI / 2;
+            previewEC.makeText(((2 * anchoLibro) + lomoLibro + (2 * sangradoValor)).toFixed(1) + " mm",
+                origenEC.x,
+                origenEC.y + (altoLibro / 2) + 50,
+                styleCotas);
+        }
+    
+        previewEC.update();
+    
+    }
 }
 
 export default previewFormas;
@@ -443,7 +651,7 @@ function portadaTapaBlanda(isThumbnail = false) {
 
 
     // Definicion de los parametros del Esquema de Cubierta (EC)
-    if (pvObj.anchoSolapa == 0) {
+    if (anchoSolapa == 0) {
         if (isThumbnail) {
             anchoSangrado = 350;    // px
             altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
@@ -492,7 +700,7 @@ function portadaTapaBlanda(isThumbnail = false) {
     sangrado.fill = '#FCEAF1';
     sangrado.linewidth = 1;
 
-    if (pvObj.anchoSolapa != 0) {
+    if (anchoSolapa != 0) {
         var solapas = previewEC.makeRectangle(
             origenEC.x,
             origenEC.y,
@@ -523,8 +731,8 @@ function portadaTapaBlanda(isThumbnail = false) {
             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(pvObj.anchoSolapa + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText(anchoSolapa + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
-            previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText(anchoSolapa + " mm", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
         }
 
     }
@@ -606,12 +814,12 @@ function portadaTapaBlanda(isThumbnail = false) {
         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(pvObj.lomoLibro + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(lomoLibro + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
-        previewEC.makeText(pvObj.anchoLibro + offsetSolapaValor + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(anchoLibro + offsetSolapaValor + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-        previewEC.makeText(pvObj.anchoLibro + offsetSolapaValor + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(anchoLibro + offsetSolapaValor + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-        previewEC.makeText(pvObj.altoLibro + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+        previewEC.makeText(altoLibro + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-        previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+        previewEC.makeText(altoLibro + (2 * sangradoValor) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-        previewEC.makeText((2 * pvObj.anchoLibro) + (2 * (pvObj.anchoSolapa + offsetSolapaValor)) + pvObj.lomoLibro + (2 * sangradoValor) + " mm",
+        previewEC.makeText((2 * anchoLibro) + (2 * (anchoSolapa + offsetSolapaValor)) + lomoLibro + (2 * sangradoValor) + " mm",
             origenEC.x,
             origenEC.y + (altoLibro / 2) + 50,
             styleCotas);
@@ -622,221 +830,7 @@ function portadaTapaBlanda(isThumbnail = false) {
 
 }
 
-function portadaEspiral(isThumbnail = false, isTapaDura = false) {
 
-    // Variables locales
-    let altoLibro, anchoLibro, anchoCalle, anchoCubierta, altoSangrado, anchoSangrado, anchoSolapa, offsetCubierta;
-    let styleCotas = { size: 12, family: 'Public Sans' };
-    let sangradoTexto = (isTapaDura) ? "Sangrado 20 mm" : "Sangrado 5 mm";
-    let sangradoValor = (isTapaDura) ? parseFloat(20) : parseFloat(5);  // mm
-
-    let divIdName = (isThumbnail) ? 'thumbnail_ec_shape' : 'pv_ec_shape';
-
-    // Get the preview Object parameters
-    getObjetoToPreview();
-
-    // Definicion de los parametros del Esquema de Cubierta (EC)
-    if ((pvObj.anchoSolapa !== 0) && (!isTapaDura)) {
-        if (isThumbnail) {
-            anchoSangrado = 350;    // px
-            altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
-        } else {
-            anchoSangrado = 750;    // px
-            altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // 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 (isThumbnail) {
-            anchoSangrado = 350;    // px
-            altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
-        } else {
-            anchoSangrado = 750;    // px
-            altoSangrado = (anchoSangrado * 0.647 > 650) ? 650 : anchoSangrado * 0.647; // px
-        }
-        altoLibro = (isTapaDura) ? altoSangrado * 0.88 : altoSangrado * 0.97;
-        anchoLibro = (isTapaDura) ? anchoSangrado * 0.39 : anchoSangrado * 0.419;
-        anchoCalle = anchoSangrado * 0.02;
-        anchoSolapa = 0;
-        anchoCubierta = (2 * anchoLibro) + (2 * anchoSolapa) + anchoCalle;
-        offsetCubierta = anchoLibro / 2 + anchoCalle / 2 + anchoSolapa + sangradoValor;
-    }
-
-    // Clear the canvas element
-    $(`#${divIdName}`).empty();
-    // Get the element for placing the graphical elements
-    var divEC = document.getElementById(divIdName);
-    var previewEC = new Two({ fitted: true }).appendTo(divEC);
-    // 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 ((pvObj.anchoSolapa != 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 (!isThumbnail) {
-            // 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(pvObj.anchoSolapa + " mm", origenEC.x - anchoLibro - (anchoCalle + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
-            previewEC.makeText(pvObj.anchoSolapa + " 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 (!isThumbnail) {
-        // 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(pvObj.anchoLibro + " mm", origenEC.x - (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-        previewEC.makeText(pvObj.anchoLibro + " mm", origenEC.x + (offsetCubierta - anchoSolapa / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-        previewEC.makeText(pvObj.altoLibro + " mm", origenEC.x + (anchoCalle / 2) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-        previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + " mm",
-            origenEC.x + (anchoSangrado / 2) + 30,
-            origenEC.y,
-            styleCotas
-        ).rotation = -Math.PI / 2;
-        previewEC.makeText((2 * pvObj.anchoLibro) + pvObj.lomoLibro + (2 * sangradoValor) + " mm",
-            origenEC.x,
-            origenEC.y + (altoLibro / 2) + 50,
-            styleCotas);
-    }
-
-    previewEC.update();
-
-}
 
 function portadaGrapado(isThumbnail = false) {
 
@@ -853,7 +847,7 @@ function portadaGrapado(isThumbnail = false) {
     getObjetoToPreview();
 
     // Definicion de los parametros del Esquema de Cubierta (EC)
-    if (pvObj.anchoSolapa == 0) {
+    if (anchoSolapa == 0) {
         if (isThumbnail) {
             anchoSangrado = 350;    // px
             altoSangrado = (anchoSangrado * 0.647 > 300) ? 300 : anchoSangrado * 0.647; // px
@@ -901,7 +895,7 @@ function portadaGrapado(isThumbnail = false) {
     sangrado.fill = '#FCEAF1';
     sangrado.linewidth = 1;
 
-    if (pvObj.anchoSolapa != 0) {
+    if (anchoSolapa != 0) {
         var solapas = previewEC.makeRectangle(
             origenEC.x,
             origenEC.y,
@@ -933,8 +927,8 @@ function portadaGrapado(isThumbnail = false) {
             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(pvObj.anchoSolapa + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText(anchoSolapa + " mm", origenEC.x - anchoLibro - (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
-            previewEC.makeText(pvObj.anchoSolapa + " mm", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
+            previewEC.makeText(anchoSolapa + " mm", origenEC.x + anchoLibro + (lomoLibro + anchoSolapa) / 2, origenEC.y - (altoLibro / 3) + 15, styleCotas);
         }
 
     }
@@ -1007,11 +1001,11 @@ function portadaGrapado(isThumbnail = false) {
         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(pvObj.anchoLibro + offsetSolapaValor + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(anchoLibro + offsetSolapaValor + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-        previewEC.makeText(pvObj.anchoLibro + offsetSolapaValor + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+        previewEC.makeText(anchoLibro + offsetSolapaValor + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
-        previewEC.makeText(pvObj.altoLibro + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+        previewEC.makeText(altoLibro + " mm", origenEC.x + (lomoLibro / 2) + 25, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-        previewEC.makeText(pvObj.altoLibro + (2 * sangradoValor) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+        previewEC.makeText(altoLibro + (2 * sangradoValor) + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro + anchoSolapa) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
-        previewEC.makeText((2 * pvObj.anchoLibro) + (2 * (pvObj.anchoSolapa + offsetSolapaValor)) + pvObj.lomoLibro + (2 * sangradoValor) + " mm",
+        previewEC.makeText((2 * anchoLibro) + (2 * (anchoSolapa + offsetSolapaValor)) + lomoLibro + (2 * sangradoValor) + " mm",
             origenEC.x,
             origenEC.y + (altoLibro / 2) + 50,
             styleCotas);