Add a Download Svg Button

Fixed: Download Svg Button

Merge pull request #195 from DanielHabenicht:download

client-data/board.html

@@ -100,6 +100,7 @@
 	<script src="../tools/eraser/eraser.js"></script>
 	<script src="../tools/hand/hand.js"></script>
 	<script src="../tools/grid/grid.js"></script>
+	<script src="../tools/download/download.js"></script>
 	<script src="../tools/zoom/zoom.js"></script>
 	<script src="../js/canvascolor.js"></script>
 </body>

client-data/tools/download/download.js

@@ -0,0 +1,82 @@
+/**
+ *                        WHITEBOPHIR
+ *********************************************************
+ * @licstart  The following is the entire license notice for the
+ *  JavaScript code in this page.
+ *
+ * Copyright (C) 2020  Ophir LOJKINE
+ *
+ *
+ * The JavaScript code in this page is free software: you can
+ * redistribute it and/or modify it under the terms of the GNU
+ * General Public License (GNU GPL) as published by the Free Software
+ * Foundation, either version 3 of the License, or (at your option)
+ * any later version.  The code is distributed WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
+ *
+ * As additional permission under GNU GPL version 3 section 7, you
+ * may distribute non-source (e.g., minimized or compacted) forms of
+ * that code without the copy of the GNU GPL normally required by
+ * section 4, provided you include this license notice and a URL
+ * through which recipients can access the Corresponding Source.
+ *
+ * @licend
+ */
+
+(function download() { //Code isolation
+
+    function downloadSVGFile() {
+        var canvasCopy = Tools.svg.cloneNode(true);
+        canvasCopy.removeAttribute("style", ""); // Remove css transform
+        var styleNode = document.createElement("style");
+
+        // Copy the stylesheets from the whiteboard to the exported SVG
+        styleNode.innerHTML = Array.from(document.styleSheets)
+            .filter(function (stylesheet) {
+                if (stylesheet.href && (stylesheet.href.match(/boards\/tools\/.*\.css/)
+                    || stylesheet.href.match(/board\.css/))) {
+                    // This is a Stylesheet from a Tool or the Board itself, so we should include it
+                    return true;
+                }
+                // Not a stylesheet of the tool, so we can ignore it for export
+                return false;
+            })
+            .map(function (stylesheet) {
+                return Array.from(stylesheet.cssRules)
+                    .map(function (rule) { return rule.cssText })
+            }).join("\n")
+
+        canvasCopy.appendChild(styleNode);
+        var outerHTML = canvasCopy.outerHTML || new XMLSerializer().serializeToString(canvasCopy);
+        var blob = new Blob([outerHTML], { type: 'image/svg+xml;charset=utf-8' });
+        downloadContent(blob, Tools.boardName + ".svg");
+    }
+
+    function downloadContent(blob, filename) {
+        if (window.navigator.msSaveBlob) { // Internet Explorer
+            window.navigator.msSaveBlob(blob, filename);
+        } else {
+            const url = URL.createObjectURL(blob);
+            var element = document.createElement('a');
+            element.setAttribute('href', url);
+            element.setAttribute('download', filename);
+            element.style.display = 'none';
+            document.body.appendChild(element);
+            element.click();
+            document.body.removeChild(element);
+            window.URL.revokeObjectURL(url);
+        }
+    }
+
+    Tools.add({ //The new tool
+        "name": "Download",
+        "shortcut": "d",
+        "listeners": {},
+        "icon": "tools/download/download.svg",
+        "oneTouch": true,
+        "onstart": downloadSVGFile,
+        "mouseCursor": "crosshair",
+    });
+
+})(); //End of code isolation

client-data/tools/download/download.svg

@@ -0,0 +1,10 @@
+<?xml version='1.0' encoding='utf-8'?>
+<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 512 512">
+  <g>
+    <g>
+      <path d="M 470 319 C 461 319 461 328 461 339 V 471 H 50 V 339 C 50 329 50 319 41 319 C 32 319 32 329 32 339 V 481 C 32 491 37 491 47 491 H 464 C 474 491 479 491 479 481 V 339 C 479 327 479 319 470 319 Z"/>
+      <path d="M 247 317 C 255 321 257 321 265 317 L 380 214 C 384 210 383 203 381 200 C 378 198 370 196 366 200 L 266 295 V 19 C 266 13 260 9 256 9 C 252 9 246 13 246 19 V 295 L 146 200 C 142 196 135 197 132 199 C 130 202 128 210 132 214 L 247 317 Z"/>
+    </g>
+  </g>
+</svg>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "whitebophir",
   "description": "Online collaborative whiteboard",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "keywords": [
     "collaborative",
     "whiteboard"

server/translations.json

@@ -12,6 +12,7 @@
     "eraser": "Radierer",
     "grid": "Gitter",
     "hand": "Hand",
+    "download": "Herunterladen",
     "index_title": "Wilkommen bei WBO!",
     "introduction_paragraph": "WBO ist ein <a href=\"https://github.com/lovasoa/whitebophir\" title=\"Frei im Sinne von Redefreiheit, nicht Freibier. Diese Software wird unter der AGPL Lizenz veröffentlicht.\">freies und quelloffenes</a> kollaboratives Online-Whiteboard das vielen Nutzern erlaubt gleichzeitig auf einem großen virtuellen Whiteboard zu zeichnen. Das Whiteboard wird in Echtzeit für alle Nutzer aktualisiert und sein Inhalt wird gespeichert. Es kann für verschiedenste Anwendungen genutzt werden, z.B. Kunst, Unterhaltung, Design, Unterricht und Lehre.",
     "keyboard_shortcut": "Tastenkombination",
@@ -52,6 +53,7 @@
     "eraser": "Eraser",
     "grid": "Grid",
     "hand": "Hand",
+    "download": "Download",
     "index_title": "Welcome to the free online whiteboard WBO!",
     "introduction_paragraph": "WBO is a <a href=\"https://github.com/lovasoa/whitebophir\" title=\"Free as in free speech, not free beer. This software is released under the AGPL license\">free and open-source</a> online collaborative whiteboard that allows many users to draw simultaneously on a large virtual board. The board is updated in real time for all connected users, and its state is always persisted. It can be used for many different purposes, including art, entertainment, design and teaching.",
     "keyboard_shortcut": "keyboard shortcut",
@@ -128,6 +130,7 @@
     "eraser": "Gomme",
     "grid": "Grille",
     "hand": "Main",
+    "download": "Télécharger",
     "index_title": "Bienvenue sur le tableau blanc collaboratif WBO !",
     "introduction_paragraph": "WBO est un logiciel <a href=\"https://github.com/lovasoa/whitebophir\" title=\"voir le code sous license AGPL\">libre et gratuit</a> de dessin collaboratif en ligne qui permet à plusieurs utilisateurs de collaborer simultanément sur un tableau blanc. Le tableau est mis à jour en temps réel pour tous les utilisateurs connectés, et reste disponible après votre déconnexion. Il peut être utilisé notamment pour l'enseignement, l'art, le design ou juste pour s'amuser.",
     "keyboard_shortcut": "raccourci clavier",
@@ -321,6 +324,7 @@
     "eraser": "Ластик",
     "grid": "Сетка",
     "hand": "Рука",
+    "download": "Скачать",
     "index_title": "Добро пожаловать на WBO !",
     "introduction_paragraph": "WBO это бесплатная и <a href=\"https://github.com/lovasoa/whitebophir\" title=\"открытый исходный код\">открытая</a> виртуальная онлайн доска, позволяющая рисовать одновременно сразу нескольким пользователям. С WBO вы сможете рисовать, работать с коллегами над будущими проектами, проводить онлайн встречи, подкреплять ваши обучающие материалы и даже пробовать себя в дизайне. WBO доступен без регистрации.",
     "keyboard_shortcut": "горячая клавиша",
@@ -464,4 +468,4 @@
     "white-out": "修正液",
     "zoom": "放大"
   }
-}
+}