From 444fca6a130995e8a6ffb08c7708cb7d7864e8a9 Mon Sep 17 00:00:00 2001
From: Andreas Grasser <andi@grasserisen.de>
Date: Mon, 28 Nov 2022 20:43:16 +0100
Subject: [PATCH] ich dreh durch

---
 create-circle.js | 20 +-------------------
 image.js         | 10 ++++++++++
 index.html       |  3 ++-
 3 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/create-circle.js b/create-circle.js
index dc26f40..1d2d15e 100644
--- a/create-circle.js
+++ b/create-circle.js
@@ -166,8 +166,6 @@ function showConnections() {
     }
     //document.getElementById("outDiv").innerText = JSON.stringify(userDataExport);
 
-    // Render the Objects
-    document.getElementById("btn_download").style.display = "inline";
     render(items);
 }
 
@@ -193,20 +191,4 @@ function httpRequest(url, callback, callbackVal=null)
     }
     xmlHttp.open("GET", url, true);
     xmlHttp.send(null);
-}
-
-function downloadImage(){
-    var lnk = document.createElement('a'), e;
-    lnk.download = 'mastodon-circle.png';
-    lnk.href = document.getElementById("canvas").toDataURL("image/png;base64");
-
-    if (document.createEvent) {
-        e = document.createEvent("MouseEvents");
-        e.initMouseEvent("click", true, true, window,
-                        0, 0, 0, 0, 0, false, false, false,
-                        false, 0, null);
-        lnk.dispatchEvent(e);
-    } else if (lnk.fireEvent) {
-        lnk.fireEvent("onclick");
-    }
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/image.js b/image.js
index 3fa25c5..4334671 100644
--- a/image.js
+++ b/image.js
@@ -4,9 +4,11 @@ const dist = [200, 330, 450];
 const numb = [8, 15, 26];
 const radius = [64,58,50];
 let userNum = 0;
+let remainingImg = 1;
 
 function render(users) {
 	userNum = 0;
+	remainingImg = 1;
 
 	const canvas = document.getElementById("canvas");
 	const ctx = canvas.getContext("2d");
@@ -28,6 +30,7 @@ function render(users) {
 
 		// loop over each circle of the layer
 		for (let i = 0; i < numb[layerIndex]; i++) {
+			remainingImg += 1;
 			// if we are trying to render a circle but we ran out of users, just exit the loop. We are done.
 			if (userNum>=users.length) break;
 			// We need an offset or the first circle will always on the same line and it looks weird
@@ -85,6 +88,13 @@ function loadImage(ctx, url, x, y, r) {
         ctx.clip();
         ctx.closePath();
         ctx.restore();
+
+		remainingImg -= 1;
+		console.log(remainingImg);
+		if (remainingImg == 0) {
+			document.getElementById("btn_download").href = document.getElementById("canvas").toDataURL("image/png;base64")
+    		document.getElementById("btn_download").style.display = "inline";
+		}
     };
     img.src = url;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 8c18b48..71397b4 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,8 @@
     <br><br>
     <!-- Buttons -->
     <button id="btn_create" onClick="circle_main()">Circle Erstellen</button>
-    <button id="btn_download" onClick="downloadImage()" style="display: none;">DOWNLOAD</button>
+    <a href="" id="btn_download" class="button" download="mastodon-circle.png" style="display: none;">DOWNLOAD (klappt wsl nicht)</a>
+    <!-- <button id="btn_download" onClick="downloadImage()" style="display: none;">DOWNLOAD</button> -->
     <br><br>
     <!-- Canvas for the final Image -->
     <canvas id="canvas" width="1000" height="1000"></canvas>