View

src/lib/Util/state.ts

@@ -1,4 +1,4 @@
-import { writable, get } from 'svelte/store';
+import { writable, get, derived } from 'svelte/store';
 import { toBase64, fromBase64 } from 'js-base64';
 import { persist, localStorage } from '@macfja/svelte-persistent-store';
 
@@ -19,6 +19,9 @@ const defaultState: State = {
 };
 
 export const codeStore = persist(writable(defaultState), localStorage(), 'codeStore');
+export const base64State = derived([codeStore], ([code], set) => {
+	set(toBase64(JSON.stringify(code), true));
+});
 
 export const loadState = (data: string): void => {
 	let state: State;
@@ -50,8 +53,8 @@ export const updateConfig = (config: string, updateEditor: boolean): void => {
 };
 
 export const initURLSubscription = (): void => {
-	codeStore.subscribe((state: State) => {
-		window.location.hash = toBase64(JSON.stringify(state), true);
+	base64State.subscribe((state: string) => {
+		window.location.hash = state;
 	});
 };
 

src/lib/components/history/index.svelte

@@ -63,11 +63,10 @@
 </script>
 
 <Card class="h-64">
-	<div slot="title" class="flex">
+	<div slot="title" class="flex justify-between">
 		<div class="flex">
 			<Tabs on:select={tabSelectHandler} {tabs} title="History" />
 		</div>
-		<div class="flex-grow" />
 		<div class="flex gap-x-4 text-white">
 			<button class="bg-yellow-500 hover:bg-yellow-700 rounded px-1" on:click={() => saveHistory()}
 				>💾</button

src/routes/edit.svelte

@@ -6,12 +6,19 @@
 	import Card from '$lib/components/card.svelte';
 	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 {
+		initURLSubscription,
+		updateCode,
+		updateConfig,
+		codeStore,
+		base64State
+	} from '$lib/util/state';
 	import { initHandler, loadStateFromURL } from '$lib/util/util';
 	import { errorStore } from '$lib/util/error';
 	import { onMount } from 'svelte';
 	import type monaco from 'monaco-editor';
 	import type { Mermaid } from 'mermaid';
+	import { goto } from '$app/navigation';
 
 	const mermaid: Mermaid = (window.mermaid as unknown) as Mermaid;
 	let selectedMode = 'code';
@@ -91,6 +98,9 @@
 		}
 	};
 
+	const viewDiagram = async () => {
+		await goto(`/view#${$base64State}`, { replaceState: true });
+	};
 	onMount(initHandler);
 </script>
 
@@ -102,9 +112,8 @@
 	<div class="flex-1 flex overflow-hidden">
 		<div class="w-2/5 flex flex-col">
 			<Card class="flex-1">
-				<div slot="title" class="flex">
+				<div slot="title" class="flex justify-between">
 					<div class="flex"><Tabs on:select={tabSelectHandler} {tabs} title="Mermaid" /></div>
-					<div class="flex-grow" />
 					<div class="flex gap-x-4 text-white">
 						{#if !$codeStore.autoSync}
 							<button class="bg-blue-500 hover:bg-blue-700 rounded px-1" on:click={syncDiagram}
@@ -134,7 +143,13 @@
 
 		<div class="flex-1 flex flex-col  overflow-hidden">
 			<Card>
-				<div slot="title" class="text-white">Diagram</div>
+				<div slot="title" class="text-white  flex justify-between">
+					<div>Diagram</div>
+					<button
+						class="rounded shadow px-2 bg-blue-500 hover:bg-blue-700"
+						on:click={() => viewDiagram()}>View</button
+					>
+				</div>
 				<div class="flex-1 overflow-auto">
 					<View />
 				</div>

src/routes/index.svelte

@@ -8,6 +8,7 @@
 		if (hash.length > 2) {
 			newURL = `/${hash[1]}#${hash[2]}`;
 		}
+		debugger;
 		await goto(newURL, {
 			replaceState: true
 		});