feat: allow download images

Author: byandrev

index.html

@@ -85,6 +85,14 @@ <h1 class="select-none">Automata Simulation</h1>
           >
             <i class="fa-solid fa-trash-can text-[10px]"></i>
           </div>
+
+          <div
+            class="bg-white cursor-pointer select-none rounded-full border-2 w-8 h-8 text-center leading-6 text-xs"
+            title="Clear all"
+            id="btn-download"
+          >
+            <i class="fa-solid fa-cloud-arrow-down text-[10px]"></i>
+          </div>
         </div>
 
         <div class="flex gap-4">

package-lock.json

@@ -15,6 +15,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "html2canvas": "^1.4.1",
     "micromodal": "^0.4.10",
     "split.js": "^1.6.5"
   }

package.json

@@ -117,9 +117,6 @@ function initGraph() {
 
   paper.on("element:pointerdblclick", function (elementView, evt) {
     const currentElement = elementView.model;
-    // const label = prompt("Label name?");
-    // currentElement.attr("label/text", label);
-    console.log(currentElement);
     const inputEl = document.querySelector("#input-state-name");
     MicroModal.show("modal-state-name");
     inputEl.setAttribute("state-id", currentElement.id);

src/graph.js

@@ -1,18 +1,20 @@
+import MicroModal from "micromodal";
 import Split from "split.js";
 import { verifyAFD } from "./afd.js";
 import { renderError, renderOut, renderOutString } from "./animateNode.js";
-import { createAutomata, clearAutomata } from "./automata.js";
+import { clearAutomata, createAutomata } from "./automata.js";
 import { startDragTools } from "./dragTools.js";
-import { CANVAS_HEIGHT, initGraph } from "./graph.js";
-import { CircleShape, FILL_NODE_FINAL, NODE_WIDTH } from "./shapes.js";
-import MicroModal from "micromodal"; // es6 module
+import { initGraph } from "./graph.js";
+import { CircleShape, FILL_NODE_FINAL } from "./shapes.js";
+import download from "./utils/download.js";
 
 const { graph, paper } = initGraph();
 const inputString = document.querySelector("#input-string");
 const inputEl = document.querySelector("#input-label-name");
 const inputLabel = document.querySelector("#input-label-name");
 const inputState = document.querySelector("#input-state-name");
 const btnClearAll = document.querySelector("#btn-clear-all");
+const btnDownload = document.querySelector("#btn-download");
 
 const automata = createAutomata();
 
@@ -151,3 +153,6 @@ btnClearAll.addEventListener("click", () => {
   clearAutomata(automata);
   graph.clear();
 });
+
+// Download png
+btnDownload.addEventListener("click", download);

src/main.js

@@ -0,0 +1,13 @@
+import html2canvas from "html2canvas";
+
+function download() {
+  const canvas = document.querySelector("#paper");
+  html2canvas(canvas).then((result) => {
+    const a = document.createElement("a");
+    a.href = result.toDataURL("image/png");
+    a.download = `automata-${Date.now()}.png`;
+    a.click();
+  });
+}
+
+export default download;