From 40efb8f012dcf1aaec24d6f870a3549fd7b71eb7 Mon Sep 17 00:00:00 2001
From: Vincent LAURENT <vince.laurent@gmail.com>
Date: Mon, 27 Sep 2021 15:19:35 +0200
Subject: [PATCH] =?UTF-8?q?Trim=20du=20svg=20en=20js=20du=20coup=20pas=20d?=
 =?UTF-8?q?e=20d=C3=A9pendances=20=C3=A0=20inkscape?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.php          |  3 +--
 public/js/app.js | 29 ++++++++++++++++++++++++++---
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/app.php b/app.php
index 5e3eef1..322b5b5 100644
--- a/app.php
+++ b/app.php
@@ -87,10 +87,9 @@ $f3->route('POST /image2svg',
         shell_exec(sprintf("convert -background white -flatten %s %s", $imageFile, $imageFile.".bmp"));
         shell_exec(sprintf("mkbitmap -x -f 8 %s -o %s", $imageFile.".bmp", $imageFile.".bpm"));
         shell_exec(sprintf("potrace --svg %s -o %s", $imageFile.".bpm", $imageFile.".svg"));
-        shell_exec(sprintf("convert -trim %s %s", $imageFile.".svg", $imageFile."-trim.svg"));
 
         header('Content-Type: image/svg+xml');
-        echo file_get_contents($imageFile."-trim.svg");
+        echo file_get_contents($imageFile.".svg");
     }
 );
 $f3->route('POST /@key/save',
diff --git a/public/js/app.js b/public/js/app.js
index 26801ca..c672bc7 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -87,6 +87,29 @@ loadingTask.promise.then(function(pdf) {
         return new Blob([u8arr], {type:mime});
     }
     
+    function trimSvgWhitespace(svgContent) {
+        if(!svgContent) {
+            
+            return null;
+        }
+        var svgContainer = document.createElement("div")
+        svgContainer.classList.add('invisible');
+        svgContainer.classList.add('position-absolute');
+        svgContainer.classList.add('top-0');
+        svgContainer.classList.add('start-0');
+        svgContainer.style = "z-index: -1;";
+        svgContainer.innerHTML = svgContent;
+        document.body.appendChild(svgContainer);
+        var svg = svgContainer.querySelector('svg');
+        var box = svg.getBBox();
+        svg.setAttribute("viewBox", [box.x, box.y, box.width, box.height].join(" "));
+        svgContent = svgContainer.innerHTML;
+        document.body.removeChild(svgContainer)
+        
+        return svgContent = svgContainer.innerHTML;
+        document;
+    }
+    
     var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
         penColor: 'rgb(0, 0, 0)',
         minWidth: 1.25,
@@ -101,7 +124,7 @@ loadingTask.promise.then(function(pdf) {
             xhr = new XMLHttpRequest();
             xhr.open( 'POST', document.getElementById('form-image-upload').action, true );
             xhr.onreadystatechange = function () { 
-                var svgImage = "data:image/svg+xml;base64,"+btoa(this.responseText);
+                var svgImage = "data:image/svg+xml;base64,"+btoa(trimSvgWhitespace(this.responseText));
                 document.getElementById('img-upload').src = svgImage;
                 document.getElementById('img-upload').classList.remove("d-none");
                 document.getElementById('btn_modal_ajouter').focus();
@@ -141,10 +164,10 @@ loadingTask.promise.then(function(pdf) {
         data.append('file', document.getElementById('input-image-upload').files[0]);
         
         xhr = new XMLHttpRequest();
-
+        
         xhr.open( 'POST', document.getElementById('form-image-upload').action, true );
         xhr.onreadystatechange = function () { 
-            var svgImage = "data:image/svg+xml;base64,"+btoa(this.responseText);
+            var svgImage = "data:image/svg+xml;base64,"+btoa(trimSvgWhitespace(this.responseText));
             document.getElementById('img-upload').src = svgImage;
             document.getElementById('img-upload').classList.remove("d-none");
             document.getElementById('btn_modal_ajouter').focus();