add fill picker

src/routes/image-converter/+page.svelte → src/lib/Download/Download.svelte

@@ -13,9 +13,12 @@
   } from "@skeletonlabs/skeleton";
   import {browser} from "$app/environment";
   import FileSaver from "file-saver";
+  import type {SVGData} from "$lib/svgManipulator";
   import {vips} from "$lib/vips/vips";
   import type Vips from "wasm-vips";
 
+  export let svg: SVGData | undefined;
+
   const value = undefined;
 
   type WellKnownDirectory =
@@ -136,12 +139,11 @@
   }
 
   async function getFile(): Promise<File | undefined> {
-    const svg = await (await fetch("/favicon/favicon.svg")).arrayBuffer();
     const format = DownloadFormat.getFormatFromExtension(
       downloadFormats,
       comboboxValue
     );
-    if (format === undefined) return;
+    if (format === undefined || svg === undefined) return;
     let data: BlobPart | undefined;
     if (format.extension === "svg") {
       data = svg;
@@ -234,8 +236,7 @@
   }
 </script>
 
-<div class="container mx-auto space-x-2 space-y-8 p-8">
-  <h1 class="h1">Image Conversion Test</h1>
+<div class="container mx-auto space-x-2 space-y-8">
   <ProgressRadial
     {value}
     stroke="{100}"

src/lib/SVGPreview/SVGPreview.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import type {SVGData} from "$lib/svgManipulator";
+
+  export let svg: SVGData | undefined;
+</script>
+
+{#if svg !== undefined}
+  {@html svg}
+{/if}

src/lib/svgManipulator.ts

@@ -0,0 +1,42 @@
+import type Vips from "wasm-vips";
+
+export type SVGData = Vips.Blob & BlobPart;
+
+export interface SVGProcessParameters {
+  fillColour?: string;
+}
+
+const textDecoder = new TextDecoder("utf-8");
+
+export function processSvg(
+  rawSvg: SVGData,
+  parameters: SVGProcessParameters
+): string;
+export function processSvg(
+  rawSvg: undefined,
+  parameters: SVGProcessParameters
+): undefined;
+export function processSvg(
+  rawSvg: SVGData | undefined,
+  parameters: SVGProcessParameters
+): string | undefined {
+  if (rawSvg === undefined) return;
+  return addStyle(rawSvg, parameters);
+}
+
+function addStyle(rawSvg: SVGData, parameters: SVGProcessParameters): string {
+  const styles: string[] = [];
+  if (parameters.fillColour !== undefined) {
+    styles.push(`#Fill * {fill:${parameters.fillColour};}`);
+  }
+  let parsedSvg: string | undefined;
+  if (typeof rawSvg !== "string") {
+    parsedSvg = textDecoder.decode(rawSvg);
+  } else {
+    parsedSvg = rawSvg;
+  }
+  return parsedSvg.replace(
+    "</svg>",
+    `<style>${styles.join("\n")}</style></svg>`
+  );
+}

src/routes/+page.svelte

@@ -1,19 +1,43 @@
 <script lang="ts">
-  import {title} from "$lib/const";
+  import {derived, writable, type Writable} from "svelte/store";
+  import {processSvg, type SVGData} from "$lib/svgManipulator";
+  import {themeColour, title} from "$lib/const";
+  import Download from "$lib/Download/Download.svelte";
+  import {onMount} from "svelte";
+  import SvgPreview from "$lib/SVGPreview/SVGPreview.svelte";
+
+  let fillColour: Writable<string> | undefined = writable(themeColour);
+
+  let rawSvg = writable<string>();
+  onMount(() => {
+    fetch("/favicon/favicon.svg")
+      .then(async (response) => {
+        return response.text();
+      })
+      .then((contents) => {
+        rawSvg.set(contents);
+      })
+      .catch((error) => {
+        throw error;
+      });
+  });
+
+  let svg = derived(
+    [rawSvg, fillColour],
+    ([$rawSvg, $fillColour], set: (value: SVGData) => void) => {
+      set(processSvg($rawSvg, {fillColour: $fillColour}));
+    }
+  );
 </script>
 
 <div class="container mx-auto space-y-8 p-8">
   <h1 class="h1">{title}</h1>
-  <p>
-    Go to the image converter test page <a
-      class="font-medium text-blue-600 hover:underline dark:text-blue-500"
-      href="/image-converter">here</a>
-  </p>
-  <!-- <section>
-    <a class="btn variant-filled-primary" href="https://kit.svelte.dev/"
-      >SvelteKit</a>
-    <a class="btn variant-filled-secondary" href="https://tailwindcss.com/"
-      >Tailwind</a>
-    <a class="btn variant-filled-tertiary" href="https://github.com/">GitHub</a>
-  </section> -->
+  <div class="w-80">
+    <SvgPreview svg="{$svg}"></SvgPreview>
+  </div>
+  {#if $fillColour !== ""}
+    <!-- This will throw an error regarding the format of the hex colour on page load. This has no real effect as it cannot occur. -->
+    <input type="color" name="fill" bind:value="{$fillColour}" />
+  {/if}
+  <Download svg="{$svg}"></Download>
 </div>