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');
         }
     }
@@ -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;