Add button to download design as a file

wntrblm · Dec 18, 2023 · 7ce1bca · 7ce1bca
1 parent 5f16742
commit 7ce1bca
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 18 deletions.
diff --git a/web/index.html b/web/index.html
@@ -139,20 +139,29 @@
         </div>
 
         <div class="gb-side-panel-actions">
-          <button class="button is-primary is-fullwidth" x-on:click="export_to_clipboard();" x-bind:disabled="exporting !== false">
-            <span class="material-symbols-outlined">
-              content_paste
-            </span>
-            <template x-if="!exporting">
-              <span>Export to clipboard</span>
-            </template>
-            <template x-if="exporting === true">
-              <span>Exporting...</span>
-            </template>
-            <template x-if="exporting === 'done'">
+          <template x-if="!exporting">
+            <div class="buttons has-addons is-fullwidth">
+              <button class="button is-primary" x-on:click="export_design('download');" x-bind:disabled="exporting !== false">
+                <span class="material-symbols-outlined">
+                  download
+                </span>
+              </button>
+              <button class="button is-alt" x-on:click="export_design('clipboard');" x-bind:disabled="exporting !== false">
+                <span class="material-symbols-outlined">
+                  content_paste
+                </span>
+              </button>
+            </div>
+          </template>
+          <template x-if="exporting === true">
+            <button class="button is-fullwidth is-success is-loading" disabled>
+            </button>
+          </template>
+          <template x-if="exporting === 'done'">
+            <button class="button is-fullwidth is-success" disabled>
               <span>Done!</span>
-            </template>
-          </button>
+            </button>
+          </template>
         </div>
       </div> <!-- gb-side-panel -->
 

diff --git a/web/scripts/main.js b/web/scripts/main.js
@@ -260,7 +260,7 @@ class Design {
         return layer.visible;
     }
 
-    async export() {
+    async export(method) {
         const gingerbread = await LibGingerbread.new();
         console.log(gingerbread);
 
@@ -306,7 +306,13 @@ class Design {
         }
 
         const footprint = gingerbread.conversion_finish();
-        navigator.clipboard.writeText(footprint);
+
+        if (method == "clipboard") {
+            navigator.clipboard.writeText(footprint);
+        } else {
+            let file = new File([footprint], "design.kicad_pcb");
+            yak.initiateDownload(file);
+        }
     }
 }
 
@@ -424,9 +430,9 @@ document.addEventListener("alpine:init", () => {
             this.design = e.detail;
         },
         exporting: false,
-        async export_to_clipboard() {
+        async export_design(method) {
             this.exporting = true;
-            await this.design.export();
+            await this.design.export(method);
             this.exporting = 'done';
             window.setTimeout(() => {
                 this.exporting = false;

diff --git a/web/scripts/yak.js b/web/scripts/yak.js
@@ -295,3 +295,31 @@ export function* SVGElement_to_paths(elm) {
         yield* SVGGeometryElement_to_paths(elm);
     }
 }
+
+/*
+    Basic helper to initiate a download of a given File using the browser.
+    Useful for generating files client side for the user to download.
+*/
+export function initiateDownload(file) {
+    let name;
+    let url;
+
+    if (file instanceof File) {
+        url = URL.createObjectURL(file);
+        name ??= file.name;
+    } else {
+        url = file.href;
+        name ??= basename(url);
+    }
+
+    const anchor = document.createElement("a");
+
+    anchor.href = url;
+    anchor.download = name;
+    anchor.target = "_blank";
+    anchor.click();
+
+    if (file instanceof File) {
+        URL.revokeObjectURL(url);
+    }
+}
diff --git a/web/styles/styles.css b/web/styles/styles.css
@@ -126,6 +126,16 @@ a.button::after {
     background-color: var(--color-Aquarelle);
 }
 
+.button.is-alt, .button.is-alt.is-active {
+    color: white;
+    background-color: var(--color-Teal);
+    border-color: transparent;
+}
+
+.button.is-alt:hover {
+    background-color: var(--color-Cupid);
+}
+
 a.button.is-static {
     text-decoration: none;
 }
@@ -259,10 +269,23 @@ body {
     text-align: center;
 }
 
-.gb-side-panel-actions .button {
+.gb-side-panel-actions .buttons {
+    margin-bottom: 0;
+    width: 100%;
+    flex-wrap: nowrap;
+}
+
+.gb-side-panel-actions .buttons .button {
+    flex: 1;
     border-radius: 0;
+    margin-bottom: 0;
 }
 
+.gb-side-panel-actions .buttons .button:first-child {
+    flex-basis: 75%;
+}
+
+
 .color-button {
     width: 32px;
     height: 32px;