From 0192fecef7112342a4d75fcdfe0c5577fe1daaf0 Mon Sep 17 00:00:00 2001
From: Doriane <doriane@ungual.digital>
Date: Mon, 23 Sep 2024 11:08:21 +0200
Subject: [PATCH] download simplified svg without bounding rectangle

---
 app.py                   | 37 +++++++++++++++++++++++++------------
 static/css/interface.css | 15 ++++++++++++++-
 templates/base.html      |  2 +-
 templates/catalogue.html |  2 +-
 templates/drawing.html   | 29 +++++++++++++++++------------
 templates/writing.html   | 29 +++++++++++++++++------------
 6 files changed, 75 insertions(+), 39 deletions(-)

diff --git a/app.py b/app.py
index 96c61d5..f53cdfb 100644
--- a/app.py
+++ b/app.py
@@ -413,18 +413,31 @@ def resizeSVG (m):
 
     return f'<svg xmlns="http://www.w3.org/2000/svg" viewbox="{viewbox}" width="{newWidth}mm" height="{newHeight}mm" class="svgbob">'
 
-# @app.route('/svg/<id>')
-# def svg (id):
-#     params = {
-#         'pad': id or 'default',
-#         'weight': request.args.get('w') or '2',
-#     }
-#     params['pad-full'] = etherpad + prefix + params['pad']
-
-#     # get pad content
-#     print('  getting ' + params['pad-full'])
-#     pad_export = requests.get(params['pad-full'] + '/export/txt')
-#     ascii = pad_export.text
+@app.route('/svg/<id>')
+def svg (id):
+    params = {
+        'pad': id or 'default',
+        'weight': request.args.get('w') or '2',
+    }
+    params['pad-full'] = etherpad + prefix + params['pad']
+
+    # get pad content
+    print('  getting ' + params['pad-full'])
+    pad_export = requests.get(params['pad-full'] + '/export/txt')
+    ascii = pad_export.text
+
+    # to SVG
+    svg = simplifySVG(ascii2svg(ascii, params['weight']))
+    # Remove background rect inserted by SVG Bob
+    svg = re.sub(r'\<rect class="backdrop" x="\d+" y="\d+" width="\d+" height="\d+">\<\/rect\>', '', svg, flags=re.M)
+    svg = re.sub(r'<svg xmlns="http://www.w3.org/2000/svg" width="(\d+)" height="(\d+)" class="svgbob">', resizeSVG,svg)
+
+    r = Response(svg, mimetype='application/svg')
+    r.headers.extend({
+        'Content-Disposition': f'attachment; filename="cobbled-paths-{id}.svg"'
+    })
+
+    return r
 
 
 @app.route('/hpgl/<id>')
diff --git a/static/css/interface.css b/static/css/interface.css
index 93c632b..64e5061 100644
--- a/static/css/interface.css
+++ b/static/css/interface.css
@@ -302,6 +302,11 @@ details[open] > summary{
     color: white;
 }
 
+#current-figfont,
+.category{
+    width: 15em;
+}
+
 .collection-menu{
     position: relative;
 }
@@ -348,7 +353,7 @@ summary + div{
     max-height: calc(100vh - 1px - var(--bar-h));
     overflow: auto;
     
-    width: calc(100vw - 24rem);
+    width: calc(100vw - 30rem);
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
     gap: 1px;
@@ -394,6 +399,14 @@ summary + div{
     mix-blend-mode: darken;
     display: block;
 }
+
+
+
+.legend{
+    width: 24rem;
+    font-size: 0.825rem;
+    margin-top: 1em;
+}
 .legend::before{
     content: '';
     width: 0.75rem;
diff --git a/templates/base.html b/templates/base.html
index 366b933..d84eadb 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -29,8 +29,8 @@
       <ul>
           <li><a {% if request.url_rule.endpoint == "index" %}class="active"{% endif %} href="/">about</a></li>
           <li><a {% if request.url_rule.endpoint == "draw" %}class="active"{% endif %} href="/draw.html">ASCII draw</a></li>
-          <li><a {% if request.url_rule.endpoint == "font" %}class="active"{% endif %} href="/font.html">FIGfont make</a></li>
           <li><a {% if request.url_rule.endpoint == "catalogue" %}class="active"{% endif %} href="/catalogue.html">FIGfont catalogue</a></li>
+          <li><a {% if request.url_rule.endpoint == "font" %}class="active"{% endif %} href="/font.html">FIGfont make</a></li>
           <!-- <li><a {% if request.url_rule.endpoint == "image" %}class="active"{% endif %} href="/image.html">image</a></li> -->
           <li><a {% if request.url_rule.endpoint == "gallery" %}class="active"{% endif %} href="/gallery.html">gallery</a></li>
       </ul>
diff --git a/templates/catalogue.html b/templates/catalogue.html
index 4039f36..c0b3d70 100644
--- a/templates/catalogue.html
+++ b/templates/catalogue.html
@@ -22,7 +22,7 @@
               </div>
             {% endfor %}
           {% endfor %}
-          <a class="specimen-link" href="/specimen/{{type}}" target="_blank">see all {{type}}</a>
+          <!-- <a class="specimen-link" href="/specimen/{{type}}" target="_blank">see all {{type}}</a> -->
 
           </div>
         </details>
diff --git a/templates/drawing.html b/templates/drawing.html
index 84c5289..59c30ce 100644
--- a/templates/drawing.html
+++ b/templates/drawing.html
@@ -41,18 +41,23 @@
     </script>
 
     <script>
-      let save_button = document.getElementById('save-svg');
-
-      save_button.addEventListener('click', function(){
-        //get svg element.
-        let svg = document.getElementsByTagName("svg")[0];
-
-        //get svg source.
-        let serializer = new XMLSerializer();
-        let source = serializer.serializeToString(svg);
-
-        let blob = new Blob([source], {type: "text/plain;charset=utf-8"});
-        saveAs(blob, 'cobbled-paths.svg');
+      let save_button_svg = document.getElementById('save-svg');
+      save_button_svg.addEventListener('click', function(){
+        let url = document.URL,
+        parts = url.split('/'),
+        name = parts[parts.length-1],
+        svg_url = '/svg/' + name,
+        a = document.createElement('a');
+        a.href = svg_url;
+        a.setAttribute('download', 'download');
+        if (document.createEvent) {
+          const event = document.createEvent('MouseEvents');
+          event.initEvent('click', true, true);
+          a.dispatchEvent(event);
+        }
+        else {
+          a.click();
+        }
       });
 
       let save_button_hpgl = document.getElementById('save-hpgl');
diff --git a/templates/writing.html b/templates/writing.html
index ab8b4ee..6c77f9a 100644
--- a/templates/writing.html
+++ b/templates/writing.html
@@ -45,18 +45,23 @@
     </script>
 
     <script>
-      let save_button = document.getElementById('save-svg');
-
-      save_button.addEventListener('click', function(){
-        //get svg element.
-        let svg = document.getElementsByTagName("svg")[0];
-
-        //get svg source.
-        let serializer = new XMLSerializer();
-        let source = serializer.serializeToString(svg);
-
-        let blob = new Blob([source], {type: "text/plain;charset=utf-8"});
-        saveAs(blob, 'cobbled-paths.svg');
+      let save_button_svg = document.getElementById('save-svg');
+      save_button_svg.addEventListener('click', function(){
+        let url = document.URL,
+        parts = url.split('/'),
+        name = parts[parts.length-1],
+        svg_url = '/svg/' + name,
+        a = document.createElement('a');
+        a.href = svg_url;
+        a.setAttribute('download', 'download');
+        if (document.createEvent) {
+          const event = document.createEvent('MouseEvents');
+          event.initEvent('click', true, true);
+          a.dispatchEvent(event);
+        }
+        else {
+          a.click();
+        }
       });
 
       let save_button_hpgl = document.getElementById('save-hpgl');