functional undo-redo

website/src/lib/components/FileListItem.svelte

@@ -9,9 +9,9 @@
 
 	import { _ } from 'svelte-i18n';
 	import type { GPXFile } from 'gpx';
-	import type { Immutable } from 'immer';
+	import type { FreezedObject } from 'structurajs';
 
-	export let file: Writable<Immutable<GPXFile>> | undefined;
+	export let file: Writable<FreezedObject<GPXFile>> | undefined;
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

website/src/lib/components/Menu.svelte

@@ -39,6 +39,10 @@
 			setMode($settings.mode);
 		}
 	}
+
+	let undoRedo = filestore.undoRedo;
+	let undoDisabled = derived(undoRedo, ($undoRedo) => !$undoRedo.canUndo);
+	let redoDisabled = derived(undoRedo, ($undoRedo) => !$undoRedo.canRedo);
 </script>
 
 <div class="absolute top-2 left-0 right-0 z-20 flex flex-row justify-center pointer-events-none">
@@ -90,12 +94,12 @@
 			<Menubar.Menu>
 				<Menubar.Trigger>{$_('menu.edit')}</Menubar.Trigger>
 				<Menubar.Content class="border-none">
-					<Menubar.Item>
+					<Menubar.Item on:click={$undoRedo.undo} disabled={$undoDisabled}>
 						<Undo2 size="16" class="mr-1" />
 						{$_('menu.undo')}
 						<Shortcut key="Z" ctrl={true} />
 					</Menubar.Item>
-					<Menubar.Item>
+					<Menubar.Item on:click={$undoRedo.redo} disabled={$redoDisabled}>
 						<Redo2 size="16" class="mr-1" />
 						{$_('menu.redo')}
 						<Shortcut key="Z" ctrl={true} shift={true} />
@@ -211,6 +215,12 @@
 				exportSelectedFiles();
 			}
 			e.preventDefault();
+		} else if ((e.key === 'z' || e.key == 'Z') && (e.metaKey || e.ctrlKey)) {
+			if (e.shiftKey) {
+				$undoRedo.redo();
+			} else {
+				$undoRedo.undo();
+			}
 		} else if ((e.key === 'Backspace' || e.key === 'Delete') && (e.metaKey || e.ctrlKey)) {
 			if (e.shiftKey) {
 				filestore.deleteAllFiles();

website/src/lib/components/toolbar/tools/routing/Routing.svelte

@@ -26,13 +26,19 @@
 		// remove controls for deleted files
 		routingControls.forEach((controls, fileId) => {
 			if (!get(filestore).find((file) => file._data.id === fileId)) {
+				console.log('remove controls for deleted file', fileId);
 				controls.remove();
 				routingControls.delete(fileId);
+
+				if (selectedId === fileId) {
+					selectedId = null;
+				}
 			}
 		});
 	}
 
 	$: if ($map && $selectedFiles) {
+		console.log('selectedFiles', $selectedFiles);
 		// update selected file
 		if ($selectedFiles.size == 0 || $selectedFiles.size > 1 || !active) {
 			if (selectedId) {
@@ -48,12 +54,14 @@
 				selectedId = newSelectedId;
 			}
 		}
+		console.log('selectedId', selectedId);
 	}
 
 	$: if ($map && selectedId) {
 		if (!routingControls.has(selectedId)) {
 			let selectedFileStore = filestore.getFileStore(selectedId);
 			if (selectedFileStore) {
+				console.log('add controls for selected file', selectedId);
 				routingControls.set(
 					selectedId,
 					new RoutingControls(get(map), selectedFileStore, popup, popupElement)