feat: download bed mesh image

Signed-off-by: Pedro Lamas <[email protected]>

Author: pedrolamas

src/components/settings/GeneralSettings.vue

@@ -285,10 +285,9 @@ import { readFileAsTextAsync } from '@/util/file-system-entry'
 import { EventBus } from '@/eventBus'
 import { isFluiddContent, toFluiddContent } from '@/util/fluidd-content'
 import { getAllLocales } from '@/plugins/i18n'
+import downloadUrl from '@/util/download-url'
 
-@Component({
-  components: {}
-})
+@Component({})
 export default class GeneralSettings extends Mixins(StateMixin) {
   @Ref('instanceName')
   readonly instanceNameElement!: VInput
@@ -630,17 +629,10 @@ export default class GeneralSettings extends Mixins(StateMixin) {
         const backupData = toFluiddContent('settings-backup', data)
         const backupDataAsString = JSON.stringify(backupData)
 
-        const link = document.createElement('a')
+        const filename = `backup-fluidd-v${import.meta.env.VERSION}-${this.instanceName}.json`
+        const url = `data:text/plain;charset=utf-8,${encodeURIComponent(backupDataAsString)}`
 
-        link.href = `data:text/plain;charset=utf-8,${encodeURIComponent(backupDataAsString)}`
-        link.download = `backup-fluidd-v${import.meta.env.VERSION}-${this.instanceName}.json`
-        link.target = '_blank'
-
-        document.body.appendChild(link)
-
-        link.click()
-
-        document.body.removeChild(link)
+        downloadUrl(filename, url)
       }
     } catch (e) {
       consola.error('[Settings] backup failed', e)

src/components/widgets/bedmesh/BedMeshCard.vue

@@ -19,24 +19,21 @@
         {{ $t('app.general.btn.calibrate') }}
       </app-btn>
 
-      <v-tooltip
-        v-if="canCopyImage"
-        bottom
-      >
+      <v-tooltip bottom>
         <template #activator="{ on, attrs }">
           <app-btn
             v-bind="attrs"
             icon
             :disabled="!hasMeshLoaded"
             v-on="on"
-            @click="copyImage()"
+            @click="downloadImage()"
           >
             <v-icon dense>
               $screenshot
             </v-icon>
           </app-btn>
         </template>
-        <span>{{ $t('app.bedmesh.tooltip.copy_image') }}</span>
+        <span>{{ $t('app.bedmesh.tooltip.download_image') }}</span>
       </v-tooltip>
 
       <app-btn
@@ -228,16 +225,8 @@ export default class BedMeshCard extends Mixins(StateMixin, ToolheadMixin, Brows
     return this.$typedGetters['mesh/getCurrentMeshData']
   }
 
-  get canCopyImage () {
-    return (
-      typeof navigator.clipboard === 'object' &&
-      typeof navigator.clipboard.write === 'function' &&
-      typeof ClipboardItem === 'function'
-    )
-  }
-
-  copyImage () {
-    this.bedMeshChart.copyImage()
+  downloadImage () {
+    this.bedMeshChart.downloadImage()
   }
 }
 </script>

src/components/widgets/bedmesh/BedMeshChart.vue

@@ -25,6 +25,7 @@ import type { ECharts, EChartsOption, GraphicComponentOption } from 'echarts'
 import { merge, cloneDeepWith } from 'lodash-es'
 import BrowserMixin from '@/mixins/browser'
 import type { BedSize } from '@/store/printer/types'
+import downloadUrl from '@/util/download-url'
 
 @Component({})
 export default class BedMeshChart extends Mixins(BrowserMixin) {
@@ -241,16 +242,18 @@ export default class BedMeshChart extends Mixins(BrowserMixin) {
     return opts
   }
 
-  async copyImage () {
-    const image = await fetch(this.chart.getDataURL({ type: 'png', backgroundColor: '#262629' }))
-
-    const blob = await image.blob()
+  async downloadImage () {
+    const url = this.chart.getDataURL({
+      type: 'png',
+      backgroundColor: '#262629'
+    })
 
-    const data = [
-      new ClipboardItem({ 'image/png': blob })
-    ]
+    const filename = [
+      'bedmesh',
+      this.$typedState.printer.printer.bed_mesh?.profile_name
+    ].filter(x => x).join('-')
 
-    await navigator.clipboard.write(data)
+    downloadUrl(filename, url)
   }
 }
 </script>

src/locales/de.yaml

@@ -22,7 +22,6 @@ app:
       delete: Profil löschen
       load: Profil laden
       save: Fügt das Mesh Profil der printer.cfg hinzu
-      copy_image: Bett-Mesh-Abbildung kopieren
   chart:
     label:
       current: Aktuell

src/locales/en.yaml

@@ -22,7 +22,7 @@ app:
       delete: Delete Profile
       load: Load Profile
       save: Commits calibrated profile to printer.cfg
-      copy_image: Copy bed mesh image
+      download_image: Download bed mesh image
   chart:
     label:
       current: Actual

src/locales/es.yaml

@@ -22,7 +22,6 @@ app:
       delete: Elimina el perfil
       load: Cargar el perfil
       save: Guarda el perfil de calibracion en el archivo printer.cfg
-      copy_image: Copiar imagen de la malla de cama
   chart:
     label:
       current: Tª

src/locales/fr.yaml

@@ -24,7 +24,6 @@ app:
       delete: Supprime le profil
       load: Charger le profil
       save: Enregistrer le profil calibré dans 'printer.cfg'
-      copy_image: Copier l'image du bed mesh
   chart:
     label:
       current: Courant

src/locales/hu.yaml

@@ -22,7 +22,6 @@ app:
       delete: Profil törlése
       load: Profil betöltése
       save: A kalibrált profil a printer.cfg fájlba íródik
-      copy_image: Ágyhálós kép másolása
   chart:
     label:
       current: Aktuális

src/locales/it.yaml

@@ -22,7 +22,6 @@ app:
       delete: Elimina profilo
       load: Carica profilo
       save: Salva il profilo calibrato in printer.cfg
-      copy_image: Copia immagine mesh
   chart:
     label:
       current: Effettivo

src/locales/ja.yaml

@@ -28,7 +28,6 @@ app:
       not_loaded: メッシュを読込しない
     tooltip:
       calibrate: 新しいキャリブレーションを開始し、プロファイル'default'として保存します
-      copy_image: ベッドメッシュ画像をコピー
       delete: プロファイルを削除します。
       load: プロファイルを読込み
       save: キャリブレーションされたプロファイルをprinter.cfgに書込みします。