Clean up downloading logic.

sebinside · Feb 4, 2024 · 524d65e · 524d65e
1 parent 63b5add
commit 524d65e
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 23 deletions.
diff --git a/StreamAwesome/src/components/IconCanvas.vue b/StreamAwesome/src/components/IconCanvas.vue
@@ -34,8 +34,8 @@ function waitForRequiredInitialization(callback: () => void) {
 function createGenerator() {
   if (props.icon && iconCanvas.value) {
     const iconGenerator = new IconGenerator(
-      iconCanvas.value,
-      FontAwesomeIcon.fontVersionInfo.fontFamilyBase
+      FontAwesomeIcon.fontVersionInfo.fontFamilyBase,
+      iconCanvas.value
     )
     iconGenerator.generateIcon(props.icon)
 

diff --git a/StreamAwesome/src/components/MainSettings.vue b/StreamAwesome/src/components/MainSettings.vue
@@ -8,21 +8,9 @@ import { useIconsStore } from '@/stores/icons'
 
 const iconStore = useIconsStore()
 
-// TODO: Find better place for this
 function downloadIcon() {
-  const canvas = document.createElement('canvas')
-  canvas.width = 256
-  canvas.height = 256
-  const iconGenerator = new IconGenerator(canvas, FontAwesomeIcon.fontVersionInfo.fontFamilyBase)
-  iconGenerator.generateIcon(iconStore.currentIcon)
-
-  const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')
-  let link = document.createElement('a')
-
-  // TODO: Implement better naming using color-namer
-  link.download = `stream-awesome-icon-${Math.round(Math.random() * 100000)}.png`
-  link.href = image
-  link.click()
+  const iconGenerator = new IconGenerator(FontAwesomeIcon.fontVersionInfo.fontFamilyBase)
+  iconGenerator.saveIcon(iconStore.currentIcon)
 }
 </script>
 

diff --git a/StreamAwesome/src/components/settings/IconSettings.vue b/StreamAwesome/src/components/settings/IconSettings.vue
@@ -11,18 +11,19 @@ const props = defineProps({
 
 const currentIcon = reactive(props.icon || ({} as CustomIcon))
 
-function udpateHue(hue: number) {
+function updateHue(hue: number) {
   const foregroundColor = chroma(currentIcon.foregroundColor)
   const backgroundColor = chroma(currentIcon.backgroundColor)
   currentIcon.foregroundColor = foregroundColor.set('hsl.h', hue).hex()
   currentIcon.backgroundColor = backgroundColor.set('hsl.h', hue).hex()
 }
 defineEmits(['downloadIcon'])
+// TODO: Refactor icon settings to use Input Group or somewhat similar
 </script>
 
 <template>
   <div>
-    <HueSelector :value="chroma(currentIcon.foregroundColor).hsl()[0]" @input="udpateHue" />
+    <HueSelector :value="chroma(currentIcon.foregroundColor).hsl()[0]" @input="updateHue" />
   </div>
   <div class="mt-5 hidden">
     <label for="iconSymbol" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"

diff --git a/StreamAwesome/src/logic/generator.ts b/StreamAwesome/src/logic/generator.ts
@@ -4,12 +4,22 @@ import type { FontFamilySuffix, FontWeight } from '@/model/fontAwesomeIcon'
 export default class IconGenerator {
   private renderingContext: CanvasRenderingContext2D
 
+  private defaultCanvasSize = 256
+  private readonly canvas: HTMLCanvasElement
+
   public constructor(
-    private readonly canvas: HTMLCanvasElement,
-    private readonly fontFamilyBase: string
+    private readonly fontFamilyBase: string,
+    canvas?: HTMLCanvasElement
   ) {
-    const context = canvas.getContext('2d')
+    if (canvas) {
+      this.canvas = canvas
+    } else {
+      this.canvas = document.createElement('canvas')
+      this.canvas.width = this.defaultCanvasSize
+      this.canvas.height = this.defaultCanvasSize
+    }
 
+    const context = this.canvas.getContext('2d')
     if (context == null) {
       throw new Error('Could not get rendering context from canvas element')
     } else {
@@ -22,6 +32,17 @@ export default class IconGenerator {
     this.drawIcon(icon)
   }
 
+  saveIcon(icon: CustomIcon) {
+    this.generateIcon(icon)
+    const image = this.canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')
+
+    // TODO: Implement better naming using color-namer
+    const link = document.createElement('a')
+    link.download = `stream-awesome-icon-${Math.round(Math.random() * 100000)}.png`
+    link.href = image
+    link.click()
+  }
+
   private fillBackground(backgroundColor: string): void {
     this.renderingContext.fillStyle = backgroundColor
     this.renderingContext.fillRect(0, 0, this.canvas.width, this.canvas.height)

diff --git a/StreamAwesome/src/views/HomeView.vue b/StreamAwesome/src/views/HomeView.vue
@@ -4,8 +4,7 @@ import MainSettings from '@/components/MainSettings.vue'
 
 <template>
   <main>
-    <h1 class="text-3xl font-bold">Stream Awesome <i class="fa-solid fa-square-question"></i></h1>
-    <RouterLink to="/howto">How to use</RouterLink>
+    <h1 class="text-3xl font-bold">Stream Awesome</h1>
     <MainSettings />
   </main>
 </template>