From 258a8c67f941c7ad08050a1e02896adb0b03f7ae Mon Sep 17 00:00:00 2001
From: Logicer <logicer@logicer.cc>
Date: Thu, 23 Nov 2023 22:28:38 +1100
Subject: [PATCH] add fill picker

---
 .../Download/Download.svelte}                 |  9 ++--
 src/lib/SVGPreview/SVGPreview.svelte          |  9 ++++
 src/lib/svgManipulator.ts                     | 42 ++++++++++++++++
 src/routes/+page.svelte                       | 50 ++++++++++++++-----
 src/routes/image-converter/+layout.svelte     |  1 -
 5 files changed, 93 insertions(+), 18 deletions(-)
 rename src/{routes/image-converter/+page.svelte => lib/Download/Download.svelte} (97%)
 create mode 100644 src/lib/SVGPreview/SVGPreview.svelte
 create mode 100644 src/lib/svgManipulator.ts
 delete mode 100644 src/routes/image-converter/+layout.svelte

diff --git a/src/routes/image-converter/+page.svelte b/src/lib/Download/Download.svelte
similarity index 97%
rename from src/routes/image-converter/+page.svelte
rename to src/lib/Download/Download.svelte
index 2871c81..f21aaf3 100644
--- a/src/routes/image-converter/+page.svelte
+++ b/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}"
diff --git a/src/lib/SVGPreview/SVGPreview.svelte b/src/lib/SVGPreview/SVGPreview.svelte
new file mode 100644
index 0000000..c577435
--- /dev/null
+++ b/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}
diff --git a/src/lib/svgManipulator.ts b/src/lib/svgManipulator.ts
new file mode 100644
index 0000000..5e9c9d9
--- /dev/null
+++ b/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>`
+  );
+}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index de636eb..bb1d767 100644
--- a/src/routes/+page.svelte
+++ b/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>
diff --git a/src/routes/image-converter/+layout.svelte b/src/routes/image-converter/+layout.svelte
deleted file mode 100644
index 4fa864c..0000000
--- a/src/routes/image-converter/+layout.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<slot />