Merge branch 'fix/svg-resize-previews' into 'main'

Fix/svg resize previews

See merge request jjimenez/safekat!585

ci4/app/Language/en/Presupuestos.php

@@ -174,6 +174,6 @@ return [
 		'lineaDuplicada' => 'That type of line already exists in the budget.',
 		'errorRotColor' => 'Papers and weights must be the same in color and BW',
     ],
-
+	'resize_preview' => 'Refresh preview'
 
 ];

ci4/app/Language/es/Presupuestos.php

@@ -402,5 +402,7 @@ return [
         'error_sobrecubierta_sin_solapas' => 'Debe seleccionar "sobrecubierta" en los datos del libro para introducir el ancho de solapa',
         'error_faja_sin_solapas' => 'Debe seleccionar "faja" en los datos del libro para introducir el ancho de solapa'
     ],
+	'resize_preview' => 'Refrescar vista esquema'
+
 ];
 

ci4/app/Views/themes/vuexy/form/presupuestos/admin/_previewItems.php

@@ -218,7 +218,8 @@
                                         <h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
 
                                         <div id="shape-container">
-                                            <div class="d-flex align-items-stretch justify-content-end">
+                                            <div class="d-flex align-items-stretch justify-content-end gap-2">
+                                                <!--<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>-->
                                                 <button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
                                             </div>
                                             <div id="pv_bn_shape" class="draw-shapes"></div>
@@ -299,7 +300,8 @@
                                         <h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
 
                                         <div id="shape-container">
-                                            <div class="d-flex align-items-stretch justify-content-end">
+                                            <div class="d-flex align-items-stretch justify-content-end gap-2">
+                                                <!--<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>-->
                                                 <button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
                                             </div>
                                             <div id="pv_bnhq_shape" class="draw-shapes"></div>
@@ -380,7 +382,8 @@
                                         <h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
 
                                         <div id="shape-container">
-                                            <div class="d-flex align-items-stretch justify-content-end">
+                                            <div class="d-flex align-items-stretch justify-content-end gap-2">
+                                                <!--<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>-->
                                                 <button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
                                             </div>
                                             <div id="pv_color_shape" class="draw-shapes"></div>
@@ -461,7 +464,9 @@
                                         <h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
 
                                         <div id="shape-container">
-                                            <div class="d-flex align-items-stretch justify-content-end">
+                                            <div class="d-flex align-items-stretch justify-content-end gap-2">
+                                            <!--<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>-->
+
                                                 <button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
                                             </div>
 
@@ -541,7 +546,8 @@
                                         <h6><?= lang("Presupuestos.previewMaquinaRotativa") ?></h6>
 
                                         <div id="shape-container">
-                                            <div class="d-flex align-items-stretch justify-content-end">
+                                            <div class="d-flex align-items-stretch justify-content-end gap-2">
+                                                <!--<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>-->
                                                 <button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
                                             </div>
                                             <div id="pv_rot_bn_shape" class="draw-rot-shapes"></div>
@@ -621,7 +627,8 @@
                                         <h6><?= lang("Presupuestos.previewMaquinaRotativa") ?></h6>
 
                                         <div id="shape-container">
-                                            <div class="d-flex align-items-stretch justify-content-end">
+                                            <div class="d-flex align-items-stretch justify-content-end gap-2">
+                                                <!--<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>-->
                                                 <button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
                                             </div>
                                             <div id="pv_rot_color_shape" class="draw-rot-shapes"></div>
@@ -702,7 +709,8 @@
                                         <h6><?= lang("Presupuestos.previewMaquinaPlana") ?></h6>
 
                                         <div id="shape-container">
-                                            <div class="d-flex align-items-stretch justify-content-end">
+                                            <div class="d-flex align-items-stretch justify-content-end gap-2">
+                                                <!--<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>-->
                                                 <button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
                                             </div>
                                             <div id="pv_guardas_shape" class="draw-shapes"></div>
@@ -786,7 +794,8 @@
                                         <h6><?= lang("Presupuestos.previewCubierta") ?></h6>
 
                                         <div id="pv-cubierta-container">
-                                            <div class="d-flex align-items-stretch justify-content-end">
+                                            <div class="d-flex align-items-stretch justify-content-end gap-2">
+                                                <!--<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>-->
                                                 <button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
                                             </div>
                                             <div id="pv_cubierta_shape" class="draw-shapes"></div>
@@ -854,7 +863,8 @@
                                         <h6><?= lang("Presupuestos.previewConfiguracionEsquemaCubierta") ?></h6>
 
                                         <div id="shape-container">
-                                            <div class="d-flex align-items-stretch justify-content-end">
+                                            <div class="d-flex align-items-stretch justify-content-end gap-2">
+                                                <!--<button type="button" class="btn btn-xs btn-success h-100 refresh-shape"><i class="ti ti-xs ti-refresh"></i></button>-->
                                                 <button type="button" class="btn btn-xs btn-primary h-100 download-shape"><i class="ti ti-xs ti-download"></i></button>
                                             </div>
                                             <div id="pv_ec_shape" class="draw-shapes"></div>

httpdocs/assets/js/safekat/components/preview.js

@@ -11,16 +11,16 @@ class previewFormas {
         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') {
+        if (typeof this.lomo === 'function') {
             solapaTemp = datos.solapas ? datos.solapas() : null;
-            solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta(): null;
+            solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta() : null;
         }
         else {
-            solapaTemp = datos.solapas? datos.solapas : null;
+            solapaTemp = datos.solapas ? datos.solapas : null;
-            solapaSobrecubiertaTemp = datos.solapas_sobrecubierta? datos.solapas_sobrecubierta : null;
+            solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta : null;
         }
 
         if (solapaTemp == undefined || solapaTemp == null || solapaTemp == false) {
@@ -44,13 +44,16 @@ class previewFormas {
         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;
@@ -58,13 +61,13 @@ class previewFormas {
 
         let solapaTemp = null;
         let solapaSobrecubiertaTemp = null;
-        if(typeof this.lomo === 'function') {
+        if (typeof this.lomo === 'function') {
             solapaTemp = datos.solapas ? datos.solapas() : null;
-            solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta(): null;
+            solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta() : null;
         }
         else {
-            solapaTemp = datos.solapas? datos.solapas : null;
+            solapaTemp = datos.solapas ? datos.solapas : null;
-            solapaSobrecubiertaTemp = datos.solapas_sobrecubierta? datos.solapas_sobrecubierta : null;
+            solapaSobrecubiertaTemp = datos.solapas_sobrecubierta ? datos.solapas_sobrecubierta : null;
         }
 
         if (solapaTemp == undefined || solapaTemp == null || solapaTemp == false) {
@@ -138,7 +141,7 @@ class previewFormas {
             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()),
+            altoLibro: lpName == 'faja' ? parseFloat(parseFloat(rowData.alto_faja).toFixed(0)) : parseFloat(this.alto()),
             anchoLibro: this.ancho(),
             offsetSolapa: 0
         };
@@ -338,6 +341,7 @@ class previewFormas {
         // 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);
 
@@ -384,6 +388,12 @@ class previewFormas {
             }
         }
         _pvPlana.update();
+        this.actualPreview = _pvPlana
+        this.actualPreviewCallback = this.previewInteriorPlana
+        this.setViewBoxToPreview()
+
+
+
     }
 
     previewRotativa(lpTagName, isCosido, isTapaDura) {
@@ -424,6 +434,8 @@ class previewFormas {
         // 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);
 
@@ -481,6 +493,12 @@ class previewFormas {
         }
 
         _pvRotativa.update();
+        this.actualPreview = _pvRotativa
+        this.actualPreviewCallback = this.previewRotativa
+
+        this.setViewBoxToPreview()
+
+
 
     }
 
@@ -511,7 +529,7 @@ class previewFormas {
         // Variables locales
         let altoLibro, anchoLibro, lomoLibro, anchoCubierta, altoSangrado, anchoSangrado, anchoSolapa;
 
-        if(typeof this.lomo === 'function') {
+        if (typeof this.lomo === 'function') {
             this.lomo = this.lomo();
             this.ancho = this.ancho();
             this.alto = this.alto();
@@ -558,6 +576,8 @@ class previewFormas {
         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);
 
@@ -687,7 +707,7 @@ class previewFormas {
             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') {
+            if (typeof this.lomo === 'function') {
                 lomoTotal = this.lomo().toFixed(1);
             } else {
                 lomoTotal = this.lomo.toFixed(1);
@@ -705,6 +725,13 @@ class previewFormas {
         }
 
         previewEC.update();
+        this.actualPreview = previewEC
+        this.actualPreviewCallback = this.#portadaTapaBlanda
+        this.setViewBoxToPreview()
+
+
+
+
 
     }
 
@@ -714,7 +741,7 @@ class previewFormas {
         // Variables locales
         let altoLibro, anchoLibro, lomoLibro, anchoCubierta, altoSangrado, anchoSangrado;
 
-        if(typeof this.lomo === 'function') {
+        if (typeof this.lomo === 'function') {
             this.lomo = this.lomo();
             this.ancho = this.ancho();
             this.alto = this.alto();
@@ -750,6 +777,7 @@ class previewFormas {
         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);
@@ -855,6 +883,13 @@ class previewFormas {
         }
 
         previewEC.update();
+        this.actualPreview = previewEC
+        this.actualPreviewCallback = this.#portadaTapaBlanda
+        this.setViewBoxToPreview()
+
+
+
+
     }
 
     #portadaEspiral(isTapaDura = false) {
@@ -862,7 +897,7 @@ class previewFormas {
         // Variables locales
         let altoLibro, anchoLibro, anchoSolapa, anchoCalle, altoSangrado, anchoSangrado, offsetCubierta, anchoCubierta;
 
-        if(typeof this.lomo === 'function') {
+        if (typeof this.lomo === 'function') {
             this.lomo = this.lomo();
             this.ancho = this.ancho();
             this.alto = this.alto();
@@ -907,6 +942,8 @@ class previewFormas {
         }
 
         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);
 
@@ -1070,6 +1107,13 @@ class previewFormas {
         }
 
         previewEC.update();
+        this.actualPreview = previewEC
+        this.actualPreviewCallback = this.#portadaEspiral
+        this.setViewBoxToPreview()
+
+
+
+
 
     }
 
@@ -1079,7 +1123,7 @@ class previewFormas {
         // Variables locales
         let altoLibro, anchoLibro, lomoLibro, anchoSolapa, anchoCubierta, altoSangrado, anchoSangrado;
 
-        if(typeof this.lomo === 'function') {
+        if (typeof this.lomo === 'function') {
             this.lomo = this.lomo();
             this.ancho = this.ancho();
             this.alto = this.alto();
@@ -1122,6 +1166,8 @@ class previewFormas {
         }
 
         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);
 
@@ -1253,7 +1299,32 @@ class previewFormas {
         }
 
         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
+
+    }
+
 }
 
 export default previewFormas;

httpdocs/assets/js/safekat/pages/presupuestoAdmin/sections/previewFormasAdmin.js

@@ -1,8 +1,8 @@
 import preview from '../../../components/preview.js';
 
-class PreviewFormasAdmin{
+class PreviewFormasAdmin {
 
-    constructor(tipoLibro, tipoTapa, data){
+    constructor(tipoLibro, tipoTapa, data) {
 
         this.data = data;
         this.isCosido = $("#isCosido").val();
@@ -12,81 +12,97 @@ class PreviewFormasAdmin{
         this.preview = new preview($('#pv_ec_shape'), tipoLibro, tipoTapa, "fullImage", data);
     }
 
-    setData(data){
+    setData(data) {
         this.data = data;
     }
 
-    init(){
+    init() {
 
         const self = this;
-       
+        this.preview.resizeEvent();
-        $('#tab-pv-bn').on( "click", function() {
+        // $(".refresh-shape").on("click", () => {
+        //     $("#accordionPreviewTip").find(".nav-link.active").each((index, element) => {
+        //         this.preview.setViewBoxToPreview()
+        //     })
+        // })
+        $('#tab-pv-bn').on("click", function () {
             self.preview.setData(self.data);
-            self.preview.previewInteriorPlana('bn', self.isCosido, self.tipoTapa.includes("dura")?1:0);
+            self.preview.previewInteriorPlana('bn', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
-        } );
 
-        $('#tab-pv-bnhq').on( "click", function() {
+        });
+
+        $('#tab-pv-bnhq').on("click", function () {
             self.preview.setData(self.data);
-            self.preview.previewInteriorPlana('bnhq', self.isCosido, self.tipoTapa.includes("dura")?1:0);
+            self.preview.previewInteriorPlana('bnhq', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
-        } );
 
-        $('#tab-pv-color').on( "click", function() {
+        });
+
+        $('#tab-pv-color').on("click", function () {
             self.preview.setData(self.data);
-            self.preview.previewInteriorPlana('color', self.isCosido, self.tipoTapa.includes("dura")?1:0);
+            self.preview.previewInteriorPlana('color', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
-        } );
 
-        $('#tab-pv-colorhq').on( "click", function() {
+        });
+
+        $('#tab-pv-colorhq').on("click", function () {
             self.preview.setData(self.data);
-            self.preview.previewInteriorPlana('colorhq', self.isCosido, self.tipoTapa.includes("dura")?1:0);
+            self.preview.previewInteriorPlana('colorhq', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
-        } );
 
-        $('#tab-pv-rot-bn').on( "click", function() {
+        });
+
+        $('#tab-pv-rot-bn').on("click", function () {
             self.preview.setData(self.data);
-            self.preview.previewRotativa('rot_bn', self.isCosido, self.tipoTapa.includes("dura")?1:0);
+            self.preview.previewRotativa('rot_bn', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
 
-        } );
 
-        $('#tab-pv-rot-color').on( "click", function() {
+        });
+
+        $('#tab-pv-rot-color').on("click", function () {
 
             self.preview.setData(self.data);
-            self.preview.previewRotativa('rot_color', self.isCosido, self.tipoTapa.includes("dura")?1:0);
+            self.preview.previewRotativa('rot_color', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
 
-        } );
 
-        $('#tab-pv-guardas').on( "click", function() {
+        });
+
+        $('#tab-pv-guardas').on("click", function () {
 
             self.preview.setData(self.data);
-            self.preview.previewInteriorPlana('guardas', self.isCosido, self.tipoTapa.includes("dura")?1:0);
+            self.preview.previewInteriorPlana('guardas', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
-        } );
 
-        $('#tab-pv-cubierta').on( "click", function() {
+        });
+
+        $('#tab-pv-cubierta').on("click", function () {
 
             self.preview.setData(self.data);
-            self.preview.previewInteriorPlana('cubierta', self.isCosido, self.tipoTapa.includes("dura")?1:0);
+            self.preview.previewInteriorPlana('cubierta', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
 
-        } );
 
-        $('#tab-pv-esquema-cubierta').on( "click", function() {
+        });
+
+        $('#tab-pv-esquema-cubierta').on("click", function () {
 
             self.preview.setData(self.data);
-            self.preview.getObjetoLP('ec', self.isCosido, self.tipoTapa.includes("dura")?1:0);
+            self.preview.getObjetoLP('ec', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
-            self.preview.previewEsquemaCubierta('ec', self.isCosido, self.tipoTapa.includes("dura")?1:0);
+            self.preview.previewEsquemaCubierta('ec', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
 
-        } );
 
-        $('#tab-pv-sobrecubierta').on( "click", function() {
+        });
+
+        $('#tab-pv-sobrecubierta').on("click", function () {
 
             self.preview.setData(self.data);
-            self.preview.previewInteriorPlana('sobrecubierta', self.isCosido, self.tipoTapa.includes("dura")?1:0);
+            self.preview.previewInteriorPlana('sobrecubierta', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
 
-        } );
 
-        $('#tab-pv-faja').on( "click", function() {
+        });
+
+        $('#tab-pv-faja').on("click", function () {
 
             self.preview.setData(self.data);
-            self.preview.previewInteriorPlana('faja', self.isCosido, self.tipoTapa.includes("dura")?1:0);
+            self.preview.previewInteriorPlana('faja', self.isCosido, self.tipoTapa.includes("dura") ? 1 : 0);
 
-        } );
+
+        });
     }
 }
 

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

@@ -97,11 +97,12 @@ table.dataTable.table-hover>tbody>tr.selected:hover>* {
 }
 
 div.draw-shapes {
-    width: 95%;
+    width: 100%;
-    height: 550px;
+    height: 40rem;
     margin: 2.5% auto;
 }
 
+
 div.draw-rot-shapes {
     width: 95%;
     height: 850px;