History

src/lib/History/history.ts

@@ -0,0 +1,25 @@
+import { derived, Readable, Writable, writable } from 'svelte/store';
+
+const MAX_AUTO_HISTORY_LENGTH = 10;
+
+export const autoHistoryMode: Writable<boolean> = writable(true);
+const autoHistoryStore: Writable<HistoryEntry[]> = writable([]);
+const manualHistoryStore: Writable<HistoryEntry[]> = writable([]);
+export const historyStore: Readable<HistoryEntry[]> = derived(
+	[autoHistoryMode, autoHistoryStore, manualHistoryStore],
+	([autoMode, autoHistories, manualHistories], set) => {
+		set(autoMode ? autoHistories : manualHistories);
+	}
+);
+export const addHistoryEntry = (entry: HistoryEntry): void => {
+	if (!entry.auto) {
+		manualHistoryStore.update((entries) => [entry, ...entries]);
+		return;
+	}
+	autoHistoryStore.update((entries) => {
+		if (entries.length === MAX_AUTO_HISTORY_LENGTH) {
+			entries.pop();
+		}
+		return [entry, ...entries];
+	});
+};

src/lib/History/index.svelte

@@ -2,12 +2,13 @@
 	import Tabs from '$lib/Tabs/index.svelte';
 	import Card from '$lib/Card/index.svelte';
 	import { codeStore, getStateString } from '$lib/Util/state';
-	import { historyStore } from '$lib/Util/history';
+	import { addHistoryEntry, autoHistoryMode, historyStore } from './history';
+	import { notify } from '$lib/Util/notify';
 
-	let historyMode: string = 'saved';
+	const HISTORY_SAVE_INTERVAL: number = 60000;
 
 	const tabSelectHandler = (message: CustomEvent<Tab>) => {
-		historyMode = message.detail.id;
+		autoHistoryMode.set('timeline' === message.detail.id);
 	};
 	const tabs: Tab[] = [
 		{
@@ -20,28 +21,25 @@
 		}
 	];
 
-	let previousState = getStateString();
+	const previousState = {};
 
 	setInterval(() => {
-		const currentState = getStateString();
-		if (previousState !== currentState) {
-			saveHistory(true);
-			previousState = currentState;
-		}
-	}, 1000);
+		saveHistory(true);
+	}, HISTORY_SAVE_INTERVAL);
 
-	let history: HistoryEntry[] = [];
-	$: history = $historyStore.filter((h) => (historyMode === 'saved' ? !h.auto : h.auto));
 	const saveHistory = (auto = false) => {
-		historyStore.update((h) => [
-			{
+		const currentState = getStateString();
+		if (previousState[`${auto}`] !== currentState) {
+			addHistoryEntry({
 				state: $codeStore,
 				time: new Date(),
 				name: 'test',
 				auto
-			},
-			...h
-		]);
+			});
+			previousState[`${auto}`] = currentState;
+		} else if (!auto) {
+			notify('State already saved.');
+		}
 	};
 
 	const restoreHistory = (state: State): any => {
@@ -54,15 +52,16 @@
 		<div class="flex"><Tabs on:select={tabSelectHandler} {tabs} /></div>
 		<div class="flex-grow" />
 		<div class="flex gap-x-4 text-white">
-			<button class="bg-blue-500 hover:bg-blue-700 rounded px-1" on:click={() => saveHistory()}
-				>Save</button
+			<button class="bg-yellow-500 hover:bg-yellow-700 rounded px-1" on:click={() => saveHistory()}
+				>💾</button
 			>
 		</div>
 	</div>
 	<ul>
-		{#each history as { state, time, name }}
+		{#each $historyStore as { state, time, name }}
 			<li>
 				{time}
+				{name}
 				<button on:click={restoreHistory(state)}>Restore</button>
 			</li>
 		{/each}

src/lib/Util/history.ts

@@ -1,3 +0,0 @@
-import { Writable, writable } from 'svelte/store';
-
-export const historyStore: Writable<HistoryEntry[]> = writable([]);

src/lib/Util/notify.ts

@@ -0,0 +1,3 @@
+export const notify = (message: string): void => {
+	alert(message);
+};

src/routes/edit.svelte

@@ -109,7 +109,7 @@
 				<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}
-							>↻ Sync</button
+							>🔄</button
 						>
 					{/if}
 					<label for="autoSync">