fix download

ci4/app/Views/themes/vuexy/form/presupuestos/cliente/items/_resumen.php

@@ -19,8 +19,11 @@
 
             </div>
         </div>
-        <div class="row">
+        <div class="col-md-12 mb-3">
-            <div id="pv_ec_shape" class="col-sm-12 d-none" style="width:850px;height:630px;margin:2.5% auto;"></div>
+            <div class="d-flex align-items-stretch justify-content-end gap-2 d-none">
+                <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="d-none draw-shapes"></div>
         </div>
     </div>
 

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

@@ -1322,6 +1322,8 @@ class previewFormas {
         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
 
     }
 

httpdocs/assets/js/safekat/pages/presupuestoAdmin/presupuestoAdminEdit.js

@@ -614,21 +614,24 @@ class PresupuestoAdminEdit {
             const svgData = serializer.serializeToString(shapeSvgEl);
             const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
             const svgUrl = URL.createObjectURL(svgBlob);
-            const img = new Image();
+            const img = new Image(shapeSvgEl.getBoundingClientRect().width,shapeSvgEl.getBoundingClientRect().height);
             img.onload = () => {
+                const scaleFactor = 3; // Increase resolution (e.g., 2x, 3x)
                 const canvas = document.createElement('canvas');
-                canvas.width = img.width;
+                // Scale canvas for high resolution
-                canvas.height = img.height;
+                const width = img.naturalWidth || img.width;
+                const height = img.naturalHeight || img.height;
+                canvas.width = width * scaleFactor;
+                canvas.height = height * scaleFactor;
                 const ctx = canvas.getContext('2d');
-                ctx.drawImage(img, 0, 0);
+                ctx.scale(scaleFactor, scaleFactor);
+                ctx.drawImage(img, 0,0,width,height);
                 const pngUrl = canvas.toDataURL('image/png');
                 const downloadLink = document.createElement('a');
                 downloadLink.href = pngUrl;
                 downloadLink.download = filename ?? '.png';
                 document.body.appendChild(downloadLink);
                 downloadLink.click();
-                document.body.removeChild(downloadLink);
-
                 URL.revokeObjectURL(svgUrl);
             };
 

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

@@ -56,7 +56,7 @@ class Resumen {
 
         this.divPreview = $(this.domItem.find("#pv_ec_shape"));
         this.btnPreviewCubierta = $(this.domItem.find("#btnPreviewCubierta"));
-
+        this.btnDownloadPreviewCubierta = this.domItem.find('.download-shape');
         this.submitFiles = $(this.domItem.find("#submit-all-files"));
 
         this.dropzone = null;
@@ -67,9 +67,8 @@ class Resumen {
     init(presupuesto_id = -1) {
 
         this.btnPreviewCubierta.on('click', this.#btnPreview.bind(this));
-
         this.submitFiles.on('click', this.#btnUploadFiles.bind(this));
-
+        this.downloadPreviewImage()
         if (presupuesto_id != -1) {
             this.presupuesto_id = presupuesto_id;
         }
@@ -193,10 +192,12 @@ class Resumen {
         if (this.divPreview.hasClass('d-none')) {
             this.btnPreviewCubierta.text('Ocultar desarrollo cubierta');
             this.divPreview.removeClass('d-none');
+            this.btnDownloadPreviewCubierta.parent().removeClass('d-none')
             this.generate();
         }
         else {
             this.btnPreviewCubierta.text('Mostrar desarrollo cubierta');
+            this.btnDownloadPreviewCubierta.parent().addClass('d-none')
             this.divPreview.addClass('d-none');
         }
     }
@@ -229,21 +230,21 @@ class Resumen {
             this.disenioCubierta.disenioCubierta.filter('.selected').attr('id'),
             "resumen",
             {
-                ancho: () => {return ancho},
+                ancho: () => { return ancho },
-                alto: () => {return alto},
+                alto: () => { return alto },
-                lomo: () => {return $('#lc').val() === '' ? parseFloat('0.0') : parseFloat($('#lc').val())},
+                lomo: () => { return $('#lc').val() === '' ? parseFloat('0.0') : parseFloat($('#lc').val()) },
-                solapas: () => {return this.disenioCubierta.getSolapasCubierta()},
+                solapas: () => { return this.disenioCubierta.getSolapasCubierta() },
-                lomoRedondo: ()=> {return this.disenioCubierta.tapaDuraLomoRedondo.hasClass('selected')? 1: 0},
+                lomoRedondo: () => { return this.disenioCubierta.tapaDuraLomoRedondo.hasClass('selected') ? 1 : 0 },
             }
         ).previewEsquemaCubierta();
 
         this.paginas.text(this.datosGenerales.paginas.val());
         this.paginasColor.text(this.datosGenerales.paginasColor.val());
         this.paginasNegro.text(this.datosGenerales.paginasNegro.val());
-        if(this.datosGenerales.selectedTirada){
+        if (this.datosGenerales.selectedTirada) {
             this.tirada.text(this.datosGenerales.selectedTirada);
         }
-        else{
+        else {
             this.tirada.text(parseInt($($('.check-tirada-envio:checked')[0]).attr('tirada')));
         }
         this.prototipo.text(this.datosGenerales.prototipo.is(':checked') ? 'Sí' : 'No');
@@ -310,7 +311,7 @@ class Resumen {
             return parseInt($(this).find('.tarjeta-tiradas-precios-tirada').attr('data')) == unidades;
         });
 
-        
+
         let envios = tarjetaPrecio.find('.tarjeta-tiradas-precios-envio').val();
         this.total_envios.text(this.#changeDecimalFormat(parseFloat(envios).toFixed(2)));
 
@@ -323,10 +324,10 @@ class Resumen {
         const total_antes_iva_text = this.#changeDecimalFormat((parseFloat(base) + parseFloat(envios)).toFixed(2));
 
         const iva_porcentaje = parseInt(this.datosGenerales.ivaReducido.find('option:selected').val()) == 1 ? 0.04 : 0.21;
-        const iva = ((parseFloat(base) + parseFloat(envios))* iva_porcentaje).toFixed(2);
+        const iva = ((parseFloat(base) + parseFloat(envios)) * iva_porcentaje).toFixed(2);
         let iva_text = this.#changeDecimalFormat(iva);
 
-        const total = (parseFloat(base) + parseFloat(envios) +parseFloat(iva)).toFixed(2);
+        const total = (parseFloat(base) + parseFloat(envios) + parseFloat(iva)).toFixed(2);
         let total_text = this.#changeDecimalFormat(total);
 
 
@@ -349,7 +350,7 @@ class Resumen {
         let total_antes_iva = parseFloat(base) + parseFloat(total_envio);
         let total_antes_iva_text = this.#changeDecimalFormat(total_antes_iva.toFixed(2));
 
-        const iva_porcentaje = !iva_reducido? 0.21 : 0.04;
+        const iva_porcentaje = !iva_reducido ? 0.21 : 0.04;
         const iva = ((parseFloat(base) + parseFloat(total_envio)) * iva_porcentaje).toFixed(2);
         let iva_text = this.#changeDecimalFormat(iva);
 
@@ -360,7 +361,7 @@ class Resumen {
         this.total_base.text(base_text);
         this.total_envios.text(envios_text);
         this.total_antes_iva.text(total_antes_iva_text);
-        this.iva_porcentaje.text(!iva_reducido? '21' : '4');
+        this.iva_porcentaje.text(!iva_reducido ? '21' : '4');
         this.iva.text(iva_text);
         this.total.text(total_text);
     }
@@ -373,6 +374,38 @@ class Resumen {
         partes[0] = partes[0].replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.');
         return partes.join(',');
     }
+    downloadPreviewImage() {
+        $(document).on("click", ".download-shape", (event) => {
+            let parentDiv = $(event.currentTarget).parent().parent();
+            let shapeSvgElQuery = $(parentDiv).find("svg");
+            let shapeSvgEl = shapeSvgElQuery[0];
+            console.log(shapeSvgEl)
+            const filename = shapeSvgElQuery.parent().attr("id") ?? "image"
+            const serializer = new XMLSerializer();
+            const svgData = serializer.serializeToString(shapeSvgEl);
+            const svgBlob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+            const svgUrl = URL.createObjectURL(svgBlob);
+            const img = new Image();
+            img.onload = () => {
+                const canvas = document.createElement('canvas');
+                canvas.width = img.width;
+                canvas.height = img.height;
+                const ctx = canvas.getContext('2d');
+                ctx.drawImage(img, 0, 0);
+                const pngUrl = canvas.toDataURL('image/png');
+                const downloadLink = document.createElement('a');
+                downloadLink.href = pngUrl;
+                downloadLink.download = filename ?? '.png';
+                document.body.appendChild(downloadLink);
+                downloadLink.click();
+                document.body.removeChild(downloadLink);
+
+                URL.revokeObjectURL(svgUrl);
+            };
+
+            img.src = svgUrl;
+        })
+    }
 }
 
 export default Resumen;