View

src/lib/Util/util.ts

@@ -1,5 +1,10 @@
-import { loadState } from './state';
+import { initURLSubscription, loadState } from './state';
 
 export const loadStateFromURL = (): void => {
 	loadState(window.location.hash.slice(1));
 };
+
+export const initHandler = (): void => {
+	loadStateFromURL();
+	initURLSubscription();
+};

src/lib/components/actions.svelte

@@ -0,0 +1 @@
+<!-- <div class="h-40">Hello</div> -->

src/lib/components/preset.svelte

@@ -78,8 +78,9 @@
 
 <div class="flex gap-2 flex-wrap p-2">
 	{#each Object.keys(samples) as sample}
-		<button class="rounded p-2 bg-blue-400 flex-auto" on:click={() => loadSampleDiagram(sample)}
-			>{sample}</button
+		<button
+			class="rounded p-2 bg-blue-400 shadow flex-auto text-white hover:bg-blue-500"
+			on:click={() => loadSampleDiagram(sample)}>{sample}</button
 		>
 	{/each}
 </div>

src/routes/edit.svelte

@@ -7,7 +7,7 @@
 	import Tabs from '$lib/components/tabs.svelte';
 	import History from '$lib/components/history/index.svelte';
 	import { initURLSubscription, updateCode, updateConfig, codeStore } from '$lib/util/state';
-	import { loadStateFromURL } from '$lib/util/util';
+	import { initHandler, loadStateFromURL } from '$lib/util/util';
 	import { errorStore } from '$lib/util/error';
 	import { onMount } from 'svelte';
 	import type monaco from 'monaco-editor';
@@ -90,12 +90,8 @@
 			console.error(e);
 		}
 	};
-	loadStateFromURL();
 
-	onMount(() => {
-		syncDiagram();
-		initURLSubscription();
-	});
+	onMount(initHandler);
 </script>
 
 <svelte:head>
@@ -128,9 +124,9 @@
 					</div>
 				</div>
 			</Card>
-			<Preset />
 
 			<div class="flex-1">
+				<Preset />
 				<History />
 				<!-- Hello -->
 			</div>
@@ -143,7 +139,6 @@
 					<View />
 				</div>
 			</Card>
-			<!-- <div class="h-40">Hello</div> -->
 		</div>
 	</div>
 </div>

src/routes/view.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import View from '$lib/components/view.svelte';
+	import { initHandler } from '$lib/util/util';
+	import { onMount } from 'svelte';
+	onMount(initHandler);
+</script>
+
+<View />