reimplement save button

package.json

@@ -40,10 +40,12 @@
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
     "vite": "^4.4.2",
-    "vite-plugin-tailwind-purgecss": "^0.1.3"
+    "vite-plugin-tailwind-purgecss": "^0.1.3",
+    "vite-plugin-wasm": "^3.2.2"
   },
   "type": "module",
   "dependencies": {
+    "@cathode/cathode-ray": "^0.1.0",
     "@floating-ui/dom": "1.5.3",
     "@neodrag/svelte": "^2.0.3",
     "@tauri-apps/api": "^1.5.1",

src/lib/components/SaveButton.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { mode } from '$lib/store';
+	import { getBase64 } from '$lib/utils';
+	import { Expression, UnpackedRay, save_ray } from '@cathode/cathode-ray';
+	import { frames } from '$lib/store';
+	import { onMount } from 'svelte';
+
+	let downloader: HTMLAnchorElement | undefined;
+
+	onMount(() => {
+		if (!downloader) downloader = document.createElement('a') as HTMLAnchorElement;
+	});
+
+	const saveCurrent = async () => {
+		const ray = new UnpackedRay();
+		const expr = new Expression();
+		for (let i = 0; i < $frames.length; i++) {
+			const frame = $frames[i];
+			if (!frame) {
+				continue;
+			}
+			const base64 = await getBase64(frame);
+			expr.set_frame(i, base64);
+		}
+
+		ray.add_expr(expr);
+
+		const data = save_ray(ray);
+
+        if(mode === "web"){
+            const url = URL.createObjectURL(new Blob([data]));
+            if(!downloader) return;
+		    downloader.href = url;
+		    downloader.download = 'cathode.ray';
+		    downloader.click();
+        }
+
+
+	};
+</script>
+
+<button class="btn btn-md variant-ringed-surface" on:click={saveCurrent}> Save </button>

src/lib/io.ts

@@ -46,3 +46,4 @@ export const loadGif = async (data: File | Blob): Promise<Gif | null> => {
 
 	return null;
 }
+

src/lib/utils.ts

@@ -1,4 +1,14 @@
+import type { FrameData } from "./store";
+
 export function bytesToBase64(bytes: Uint8Array): string {
   const binString = String.fromCodePoint(...bytes);
   return btoa(binString);
 }
+
+export const getBase64 = async (obj: FrameData) => {
+  if (obj.kind === "still") {
+    return await obj.value.toBase64();
+  } else {
+    return bytesToBase64(new Uint8Array(obj.data));
+  }
+}

src/routes/+layout.svelte

@@ -11,6 +11,7 @@
 	import Bar from '$lib/components/bar.svelte';
 	import { onDestroy, onMount } from 'svelte';
 	import { active, initState, closeThreshold, activationLevel, transparent } from '$lib/state';
+	import SaveButton from '$lib/components/SaveButton.svelte';
 	storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
 
 	let deinitAudio: NodeJS.Timeout | undefined = undefined;
@@ -29,6 +30,19 @@
 <div class="{bgColor} w-screen h-screen" id="container">
 	<slot />
 	{#if !$transparent}
+		<div
+			transition:fly={{
+				duration: 200,
+				y: -100,
+				opacity: 100,
+				easing: quintInOut
+			}}
+			class="flex w-full justify-center absolute top-4 gap-4"
+		>
+			<button class="btn btn-md variant-ringed-surface">New</button>
+			<SaveButton />
+			<button class="btn btn-md variant-ringed-surface">Load</button>
+		</div>
 		<div
 			transition:fly={{
 				duration: 200,
@@ -104,7 +118,7 @@
 		</div>
 	{/if}
 </div>
-<!-- 
+<!--
 <style lang="scss">
 	// @keyframes fade-out {
 	// 	0% {

vite.config.ts

@@ -1,7 +1,8 @@
 import { purgeCss } from 'vite-plugin-tailwind-purgecss';
 import { sveltekit } from '@sveltejs/kit/vite';
+import wasm from "vite-plugin-wasm";
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit(), purgeCss()]
+	plugins: [wasm(), sveltekit(), purgeCss()]
 });

yarn.lock

@@ -27,6 +27,11 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@cathode/cathode-ray@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@cathode/cathode-ray/-/cathode-ray-0.1.0.tgz#90361b4356ac06646c1ef03bf4639c948a3d6aeb"
+  integrity sha512-SbvRuR6S6FX1w3cQwpNAZiYu0LufaaCxF7EMPaNdw4Qx1lhzRpIbeUcd/L6fU8QvwMSVKGaCwFJubFVZdApj/A==
+
 "@esbuild/android-arm64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.20.tgz#984b4f9c8d0377443cc2dfcef266d02244593622"
@@ -2538,6 +2543,11 @@ vite-plugin-tailwind-purgecss@^0.1.3:
     estree-walker "^3.0.3"
     purgecss "6.0.0-alpha.0"
 
+vite-plugin-wasm@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/vite-plugin-wasm/-/vite-plugin-wasm-3.2.2.tgz#7a66fef27733a0dea9b2b14f942a6389a2523f7c"
+  integrity sha512-cdbBUNR850AEoMd5nvLmnyeq63CSfoP1ctD/L2vLk/5+wsgAPlAVAzUK5nGKWO/jtehNlrSSHLteN+gFQw7VOA==
+
 vite@^4.4.2:
   version "4.4.11"
   resolved "https://registry.yarnpkg.com/vite/-/vite-4.4.11.tgz#babdb055b08c69cfc4c468072a2e6c9ca62102b0"