Completado esquema cubierta con cotas

ci4/app/Language/es/Presupuestos.php

@@ -160,7 +160,7 @@ return [
     'preview' => 'Previsualización de configuraciones',
     'previewMaquina' => 'Configuración de máquina',
     'previewConfiguracionCubierta' => 'Configuración de cubierta',
-    'previewEsquemaCubierta' => 'Configuración de portada',
+    'previewEsquemaCubierta' => 'Esquema de cubierta',
     'resumen' => 'Resumen del presupuesto',
     'confirmar' => 'Confirmar presupuesto',
 

ci4/app/Views/themes/backend/vuexy/form/presupuestos/cosidotapablanda/_previewItems.php

@@ -37,14 +37,14 @@
                                 <?= lang("Presupuestos.previewConfiguracionCubierta") ?>
                             </button>
                         </li>
-                        <li id="tab-preview-esquema-portada" class="nav-item">
+                        <li id="tab-preview-esquema-cubierta" class="nav-item">
                             <button
                                     type="button"
                                     class="nav-link"
                                     role="tab"
                                     data-bs-toggle="tab"
-                                    data-bs-target="#preview-portada"
+                                    data-bs-target="#preview-esquema-cubierta"
-                                    aria-controls="preview-portada"
+                                    aria-controls="preview-esquema-cubierta"
                                     aria-selected="false">
                                 <?= lang("Presupuestos.previewEsquemaCubierta") ?>
                             </button>
@@ -204,7 +204,7 @@
                             </div>
                         </div>
 
-                        <div class="tab-pane fade" id="preview-portada" role="tabpanel">
+                        <div class="tab-pane fade" id="preview-esquema-cubierta" role="tabpanel">
                             <div class="row">
                                 <div class="col-3">
                                     <div class="p-4 mb-3 pb-3" >
@@ -298,17 +298,17 @@
 
     } );
 
-    $('#tab-preview-esquema-portada').on( "click", function() {
+    $('#tab-preview-esquema-cubierta').on( "click", function() {
 
         var altoLib = 400;
 
-        var portadaObjeto = {
+        var cubiertaObjeto = {
             altoLibro:altoLib,
             anchoLibro:altoLib * 0.67,
             solapas:0,
             lomo:altoLib * 0.21};
 
-        previewEsquemaCubierta(portadaObjeto);
+        previewEsquemaCubierta(cubiertaObjeto);
 
     } );
 

ci4/app/Views/themes/backend/vuexy/form/presupuestos/cosidotapablanda/previews.js

@@ -46,62 +46,156 @@ function previewConfiguracionCubierta(cubiertaObj) {
     formaCubierta.linewidth = 1;
 
     // Texts
-    _previewConfiguracionCubierta.makeText(cubiertaObj.altoLibro,  origenCubierta.x + (fullBookWith/2 -25), origenCubierta.y, styles);
+    _previewConfiguracionCubierta.makeText(cubiertaObj.altoLibro, origenCubierta.x + (fullBookWith / 2 - 25), origenCubierta.y, styles);
-    _previewConfiguracionCubierta.makeText(fullBookWith,  origenCubierta.x, origenCubierta.y + (cubiertaObj.altoLibro/2-15) , styles);
+    _previewConfiguracionCubierta.makeText(fullBookWith, origenCubierta.x, origenCubierta.y + (cubiertaObj.altoLibro / 2 - 15), styles);
 
     _previewConfiguracionCubierta.update();
 
     // Update preview info fields
-    $('#prevLibro').text(cubiertaObj.anchoLibro + "X" + cubiertaObj.altoLibro );
+    $('#prevLibro').text(cubiertaObj.anchoLibro + "X" + cubiertaObj.altoLibro);
     $('#prevLomo').text(cubiertaObj.lomo);
     $('#prevSolapas').text(cubiertaObj.solapas);
 
 }
 
 
-function previewEsquemaCubierta(portadaObj) {
+function previewEsquemaCubierta(esquemaCubiertaObj) {
+
+    // Variables locales
+    let altoLibro, anchoLibro, lomoLibro, anchoSolapa, anchoCubierta, altoSangrado, anchoSangrado;
+    let stylesEC = {
+        size: 24,
+        weight: 'bold',
+        family: 'Public Sans',
+    }
+
+    // Definicion de los parametros del Esquema de Cubierta (EC)
+    if (esquemaCubiertaObj.solapas == 0) {
+        altoLibro = 400;
+        anchoLibro = altoLibro * 0.67;
+        lomoLibro = altoLibro * 0.21;
+        anchoCubierta = (2 * anchoLibro) + lomoLibro;
+        altoSangrado = altoLibro * 1.04;
+        anchoSangrado = anchoCubierta * 1.03;
+    }else{
+        altoLibro = 400;
+        anchoLibro = altoLibro * 0.67;
+        anchoSolapa = altoLibro * 0.40;
+        lomoLibro = altoLibro * 0.22;
+        anchoCubierta = (2 * anchoLibro) + (2* anchoSolapa) + lomoLibro;
+        altoSangrado = altoLibro * 1.04;
+        anchoSangrado = anchoCubierta * 1.03;
+    }
 
     // Clear the canvas element
     $('#draw-portada').empty();
     // Get the element for placing the graphical elements
-    var divPortada = document.getElementById('draw-portada');
+    var divEC = document.getElementById('draw-portada');
-    var _previewEsquemaCubierta = new Two({fitted: true}).appendTo(divPortada);
+    var previewEC = new Two({fitted: true}).appendTo(divEC);
     // Calculate the center of the canvas element
-    var origenPortada = new Two.Vector(_previewEsquemaCubierta.width / 2, _previewEsquemaCubierta.height / 2);
+    var origenEC = new Two.Vector(previewEC.width / 2, previewEC.height / 2);
 
-    var solapas = _previewEsquemaCubierta.makeRectangle(
+    /*var solapas = previewEC.makeRectangle(
-        origenPortada.x,
+        origenEC.x,
-        origenPortada.y,
+        origenEC.y,
-        ((2 * portadaObj.anchoLibro) + (2 * (portadaObj.solapas + _offsetSolapas)) + portadaObj.lomo),
+        ((2 * esquemaCubiertaObj.anchoLibro) + (2 * (esquemaCubiertaObj.solapas + _offsetSolapas)) + esquemaCubiertaObj.lomo),
-        portadaObj.altoLibro);
+        esquemaCubiertaObj.altoLibro);
     solapas.stroke = '#5FD2B5';
     solapas.fill = '#5FD2B5';
-    solapas.linewidth = 1;
+    solapas.linewidth = 1;*/
 
-    var libro = _previewEsquemaCubierta.makeRectangle(
+    var sangrado = previewEC.makeRectangle(
-        origenPortada.x,
+        origenEC.x,
-        origenPortada.y,
+        origenEC.y,
-        ((2 * portadaObj.anchoLibro) + portadaObj.lomo),
+        anchoSangrado,
-        portadaObj.altoLibro);
+        altoSangrado
-    libro.stroke = '#6997D3';
+        );
-    libro.fill = '#6997D3';
+    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.fill = '#6997D3';
     libro.linewidth = 1;
 
-    var lomo = _previewEsquemaCubierta.makeRectangle(
+    var lomo = previewEC.makeRectangle(
-        origenPortada.x,
+        origenEC.x,
-        origenPortada.y,
+        origenEC.y,
-        portadaObj.lomo,
+        lomoLibro,
-        portadaObj.altoLibro);
+        altoLibro);
-    lomo.stroke = '#8171D4';
+    lomo.stroke = 'black';
-    lomo.fill = '#8171D4';
+    lomo.fill = '#F4F8F2';
     lomo.linewidth = 1;
-    
+
-    _previewEsquemaCubierta.update();
+    // Cotas
+    var cotaAnchoCubierta = previewEC.makeDobleArrow(
+        origenEC.x - (lomoLibro / 2 + anchoLibro),
+        origenEC.y + (altoLibro / 2) + 35,
+        origenEC.x + (lomoLibro / 2 + anchoLibro),
+        origenEC.y + (altoLibro / 2) + 35,
+        10);
+    cotaAnchoCubierta.linewidth = 2;
+    var cotaAltoCubierta = previewEC.makeDobleArrow(
+        origenEC.x + (lomoLibro / 2 + anchoLibro) + 35,
+        origenEC.y + (altoLibro / 2),
+        origenEC.x + (lomoLibro / 2 + anchoLibro) + 35,
+        origenEC.y - (altoLibro / 2),
+        10);
+    cotaAltoCubierta.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
+    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("Sangrado 3 mm", origenEC.x, origenEC.y + (altoLibro / 2 + 20), styleSangrado);
+    previewEC.makeText("Sangrado 3 mm", origenEC.x, origenEC.y - (altoLibro / 2 + 20), styleSangrado);
+    previewEC.makeText("Sangrado 3 mm", origenEC.x + (lomoLibro / 2 + anchoLibro + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+    previewEC.makeText("Sangrado 3 mm", origenEC.x - (lomoLibro / 2 + anchoLibro + 20), origenEC.y, styleSangrado).rotation = -Math.PI / 2;
+    // Cotas
+    let styleCotas = {size: 12, family: 'Public Sans'};
+    previewEC.makeText(lomoLibro + " mm", origenEC.x, origenEC.y + (altoLibro / 3) + 15, styleCotas);
+    previewEC.makeText(anchoLibro + " mm", origenEC.x - (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+    previewEC.makeText(anchoLibro + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro / 2), origenEC.y - (altoLibro / 3) + 15, styleCotas);
+    previewEC.makeText(altoLibro + " mm", origenEC.x + (lomoLibro / 2 + anchoLibro) + 50, origenEC.y, styleCotas).rotation = -Math.PI / 2;
+    previewEC.makeText(anchoCubierta + " mm", origenEC.x, origenEC.y + (altoLibro / 2) + 50, styleCotas);
+
+    previewEC.update();
 
     // Update preview info fields
-    $('#prevLibro').text(portadaObj.anchoLibro + "X" + portadaObj.altoLibro );
+    $('#prevLibro').text(esquemaCubiertaObj.anchoLibro + "X" + esquemaCubiertaObj.altoLibro);
-    $('#prevLomo').text(portadaObj.lomo);
+    $('#prevLomo').text(esquemaCubiertaObj.lomo);
-    $('#prevSolapas').text(portadaObj.solapas);
+    $('#prevSolapas').text(esquemaCubiertaObj.solapas);
 
 }
 

httpdocs/themes/vuexy/css/sk-datatables.css

@@ -93,6 +93,6 @@ table.dataTable.table-hover>tbody>tr.selected:hover>* {
 
 div.draw-shapes {
     width: 95%;
-    height: 500px;
+    height: 550px;
     margin: 2.5% auto;
 }