From 1922e21664fedf49544fcb266c2fbc76617a962c Mon Sep 17 00:00:00 2001
From: blue <blue@macaw.me>
Date: Tue, 20 Nov 2018 18:10:46 +0300
Subject: [PATCH] an attempt to make a download button

---
 images/download.svg | 13 +++++++++++++
 main.js             | 22 +++++++++++++++++++---
 ui/canvas.js        |  3 +++
 3 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 images/download.svg

diff --git a/images/download.svg b/images/download.svg
new file mode 100644
index 0000000..00703f8
--- /dev/null
+++ b/images/download.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
+<g id="group0" transform="scale(0.9), translate(5 5)" fill="none">
+    <path id="shape0" stroke="#ffffff" stroke-width="10" d="
+    M 0 75 L 0 100 L 100 100 L 100 75
+    "/>
+    <path id="shape1" stroke="#ffffff" fill="#ffffff" stroke-width="10"  d="
+    M 20 60 L 50 100 L 80 60 z
+    "/>
+    <rect id="shape2" stroke="#ffffff" fill="#ffffff" stroke-width="10" x="40" y="0" width="20" height="60"/>
+</g>
+</svg>
diff --git a/main.js b/main.js
index efa7c33..e1cd800 100644
--- a/main.js
+++ b/main.js
@@ -31,6 +31,9 @@ settings.addHandler(panel.toggle.bind(panel));
 let clear = new Button("blank");
 clear.addHandler(canvas.clear.bind(canvas));
 
+let downloadButton = new Button("download");
+download.addHandler(download);
+
 window.addEventListener("resize", onWindowResize, false);
 
 let form = new Form(panelWidth, panelHeight - panelPaddingTop);
@@ -59,6 +62,7 @@ document.body.appendChild(panel.element);
 document.body.appendChild(paintButton.element);
 document.body.appendChild(settings.element);
 document.body.appendChild(clear.element);
+document.body.appendChild(downloadButton.element);
 
 adjustButtons(panelWidth);
 paint();
@@ -94,7 +98,19 @@ function paint() {
 }
 
 function adjustButtons(width) {
-    paintButton.setPosition(width / 4 - Button.width + 10, 25);
-    settings.setPosition(width / 2 - Button.width / 2 + 10, 25);
-    clear.setPosition(width * 0.75 + 10, 25);
+    let hc = width / 8;
+    let c = width / 4;
+    let ws = -Button.width / 2 + 10;
+
+    paintButton.setPosition(hc + ws, 25);
+    settings.setPosition(c + hc + ws, 25);
+    clear.setPosition(2 * c + hc + ws, 25);
+    downloadButton.setPosition(3 * c + hc + ws, 25);
+}
+
+function download() {
+    let data = canvas.getData();
+    let prev = window.location.href;
+    window.location.href = data.replace("image/png", "image/octet-stream");
+    window.location.href = prev;
 }
\ No newline at end of file
diff --git a/ui/canvas.js b/ui/canvas.js
index f88742d..eec6021 100644
--- a/ui/canvas.js
+++ b/ui/canvas.js
@@ -19,6 +19,9 @@ class Canvas extends UI {
         this._ctx.fillStyle = "";
         this._ctx.filter = "blur(" + this._blurStrength + "px)";
     }
+    getData() {
+        this.element.toDataURL();
+    }
     draw(shape) {
         this._ctx.fillStyle = shape.color.rgba();
         shape.draw(this._ctx);