diff --git a/package.json b/package.json index 20103a2..b86388a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "embroidery-viewer", "private": true, - "version": "1.2.0", + "version": "1.2.1", "type": "module", "scripts": { "dev": "vite", diff --git a/src/lib/CardList.svelte b/src/lib/CardList.svelte index 2f5c4d5..30f832a 100644 --- a/src/lib/CardList.svelte +++ b/src/lib/CardList.svelte @@ -7,6 +7,23 @@ let stitchesRefs = []; let sizeRefs = []; let errorMessageRef; + + const downloadCanvasAsImage = (canvas, filename) => { + const image = canvas + .toDataURL("image/png") + .replace("image/png", "image/octet-stream"); + + const link = document.createElement("a"); + link.download = `${filename.split(".").slice(0, -1).join(".")}.png`; + link.href = image; + link.click(); + }; + + const onKeydown = (evt) => { + if (evt.key === "Enter") { + document.getElementById("download-button").click(); + } + }; {#if files.length !== 0} @@ -18,6 +35,14 @@
+
downloadCanvasAsImage(canvasRefs[i], file.name)} + > + Download +
{canvasRefs[i] && renderFileToCanvas( @@ -56,7 +81,7 @@ } .canvas { - height: 80%; + height: 70%; width: 100%; object-fit: contain; } @@ -67,12 +92,27 @@ flex-wrap: wrap; gap: 5px; row-gap: 5px; + padding-bottom: 15px; } .stitches-container { padding: 10px 0; } + div[role="button"] { + background-color: #05345f; + font-weight: 500; + color: white; + padding: 10px; + border-radius: 0; + } + + div[role="button"]:hover { + cursor: pointer; + background-color: black; + color: white; + } + @media only screen and (max-device-width: 812px) { .canvas-container { width: 100%;