dexie progress

website/package-lock.json

@@ -12,6 +12,7 @@
                 "bits-ui": "^0.21.5",
                 "chart.js": "^4.4.2",
                 "clsx": "^2.1.0",
+                "dexie": "^4.0.4",
                 "gpx": "file:../gpx",
                 "lucide-svelte": "^0.365.0",
                 "mapbox-gl": "^3.2.0",
@@ -2433,6 +2434,11 @@
             "integrity": "sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==",
             "dev": true
         },
+        "node_modules/dexie": {
+            "version": "4.0.4",
+            "resolved": "https://registry.npmjs.org/dexie/-/dexie-4.0.4.tgz",
+            "integrity": "sha512-wFzwWSUdi+MC3jiFeQcCp9nInR7EaX8edzYY+4wmiITkQAiSnHpe4Wo2o5Ce5tJZe2nqt7mLW91MsW4GYx3ziQ=="
+        },
         "node_modules/didyoumean": {
             "version": "1.2.2",
             "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",

website/package.json

@@ -45,6 +45,7 @@
         "bits-ui": "^0.21.5",
         "chart.js": "^4.4.2",
         "clsx": "^2.1.0",
+        "dexie": "^4.0.4",
         "gpx": "file:../gpx",
         "lucide-svelte": "^0.365.0",
         "mapbox-gl": "^3.2.0",

website/src/lib/components/FileList.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { filestore, fileOrder, selectedFiles, selectFiles } from '$lib/stores';
+	import { fileOrder, selectedFiles, selectFiles } from '$lib/stores';
 
 	import { ScrollArea } from '$lib/components/ui/scroll-area/index';
 	import Sortable from 'sortablejs/Sortable';
@@ -7,6 +7,7 @@
 	import { afterUpdate, onMount } from 'svelte';
 	import { get } from 'svelte/store';
 	import FileListItem from './FileListItem.svelte';
+	import { fileObservers } from '$lib/db';
 
 	let container: HTMLDivElement;
 	let buttons: { [id: string]: HTMLElement } = {};
@@ -29,8 +30,8 @@
 
 	function selectAllFiles() {
 		selectedFiles.update((selectedFiles) => {
-			get(filestore).forEach((file) => {
+			get(fileObservers).forEach((_, id) => {
-				selectedFiles.add(file._data.id);
+				selectedFiles.add(id);
 			});
 			return selectedFiles;
 		});
@@ -115,7 +116,7 @@
 	afterUpdate(() => {
 		updateFileOrder();
 		Object.keys(buttons).forEach((fileId) => {
-			if (!get(filestore).find((file) => file._data.id === fileId)) {
+			if (!get(fileObservers).has(fileId)) {
 				delete buttons[fileId];
 			}
 		});
@@ -125,15 +126,17 @@
 <div class="h-10 -translate-y-10 w-full pointer-events-none">
 	<ScrollArea orientation="horizontal" class="w-full h-full" scrollbarXClasses="h-2">
 		<div bind:this={container} class="flex flex-row gap-1">
-			{#each $filestore as file}
+			{#if $fileObservers}
+				{#each $fileObservers.values() as file}
 					<div
-					bind:this={buttons[file._data.id]}
+						bind:this={buttons[get(file)._data.id]}
-					data-id={file._data.id}
+						data-id={get(file)._data.id}
 						class="pointer-events-auto first:ml-1 last:mr-1 mb-1 bg-transparent"
 					>
-					<FileListItem file={filestore.getFileStore(file._data.id)} />
+						<FileListItem {file} />
 					</div>
 				{/each}
+			{/if}
 		</div>
 	</ScrollArea>
 </div>

website/src/lib/components/FileListItem.svelte

@@ -4,14 +4,15 @@
 	import Shortcut from './Shortcut.svelte';
 	import { Copy, Trash2 } from 'lucide-svelte';
 
-	import { get, type Writable } from 'svelte/store';
+	import { get, type Readable, type Writable } from 'svelte/store';
-	import { filestore, selectedFiles, selectFiles } from '$lib/stores';
+	import { selectedFiles, selectFiles } from '$lib/stores';
 
 	import { _ } from 'svelte-i18n';
 	import type { GPXFile } from 'gpx';
 	import type { FreezedObject } from 'structurajs';
+	import { dbUtils } from '$lib/db';
 
-	export let file: Writable<FreezedObject<GPXFile>> | undefined;
+	export let file: Readable<FreezedObject<GPXFile>> | undefined;
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -29,13 +30,13 @@
 			</Button>
 		</ContextMenu.Trigger>
 		<ContextMenu.Content>
-			<ContextMenu.Item on:click={filestore.duplicateSelectedFiles}>
+			<ContextMenu.Item on:click={dbUtils.duplicateSelectedFiles}>
 				<Copy size="16" class="mr-1" />
 				{$_('menu.duplicate')}
 				<Shortcut key="D" ctrl={true} /></ContextMenu.Item
 			>
 			<ContextMenu.Separator />
-			<ContextMenu.Item on:click={filestore.deleteSelectedFiles}
+			<ContextMenu.Item on:click={dbUtils.deleteSelectedFiles}
 				><Trash2 size="16" class="mr-1" />
 				{$_('menu.delete')}
 				<Shortcut key="⌫" ctrl={true} /></ContextMenu.Item

website/src/lib/components/Menu.svelte

@@ -6,7 +6,6 @@
 	import { Plus, Copy, Download, Undo2, Redo2, Trash2, Upload, Cloud, Heart } from 'lucide-svelte';
 
 	import {
-		filestore,
 		selectedFiles,
 		exportAllFiles,
 		exportSelectedFiles,
@@ -20,6 +19,7 @@
 
 	import { _ } from 'svelte-i18n';
 	import { derived, get } from 'svelte/store';
+	import { canUndo, dbUtils, fileObservers, redo, undo } from '$lib/db';
 
 	let showDistanceMarkers = false;
 	let showDirectionMarkers = false;
@@ -40,9 +40,8 @@
 		}
 	}
 
-	let undoRedo = filestore.undoRedo;
+	let undoDisabled = derived(canUndo, ($canUndo) => !$canUndo);
-	let undoDisabled = derived(undoRedo, ($undoRedo) => !$undoRedo.canUndo);
+	let redoDisabled = derived(canUndo, ($canUndo) => !$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">
@@ -71,7 +70,7 @@
 					>
 					<Menubar.Separator />
 					<Menubar.Item
-						on:click={filestore.duplicateSelectedFiles}
+						on:click={dbUtils.duplicateSelectedFiles}
 						disabled={$selectedFiles.size == 0}
 					>
 						<Copy size="16" class="mr-1" />
@@ -84,7 +83,7 @@
 						{$_('menu.export')}
 						<Shortcut key="S" ctrl={true} />
 					</Menubar.Item>
-					<Menubar.Item on:click={exportAllFiles} disabled={$filestore.length == 0}>
+					<Menubar.Item on:click={exportAllFiles} disabled={$fileObservers.size == 0}>
 						<Download size="16" class="mr-1" />
 						{$_('menu.export_all')}
 						<Shortcut key="S" ctrl={true} shift={true} />
@@ -94,12 +93,12 @@
 			<Menubar.Menu>
 				<Menubar.Trigger>{$_('menu.edit')}</Menubar.Trigger>
 				<Menubar.Content class="border-none">
-					<Menubar.Item on:click={$undoRedo.undo} disabled={$undoDisabled}>
+					<Menubar.Item on:click={undo} disabled={$undoDisabled}>
 						<Undo2 size="16" class="mr-1" />
 						{$_('menu.undo')}
 						<Shortcut key="Z" ctrl={true} />
 					</Menubar.Item>
-					<Menubar.Item on:click={$undoRedo.redo} disabled={$redoDisabled}>
+					<Menubar.Item on:click={redo} disabled={$redoDisabled}>
 						<Redo2 size="16" class="mr-1" />
 						{$_('menu.redo')}
 						<Shortcut key="Z" ctrl={true} shift={true} />
@@ -111,18 +110,15 @@
 						<Shortcut key="A" ctrl={true} />
 					</Menubar.Item>
 					<Menubar.Separator />
-					<Menubar.Item
+					<Menubar.Item on:click={dbUtils.deleteSelectedFiles} disabled={$selectedFiles.size == 0}>
-						on:click={filestore.deleteSelectedFiles}
-						disabled={$selectedFiles.size == 0}
-					>
 						<Trash2 size="16" class="mr-1" />
 						{$_('menu.delete')}
 						<Shortcut key="⌫" ctrl={true} />
 					</Menubar.Item>
 					<Menubar.Item
 						class="text-destructive data-[highlighted]:text-destructive"
-						on:click={filestore.deleteAllFiles}
+						on:click={dbUtils.deleteAllFiles}
-						disabled={$filestore.length == 0}
+						disabled={$fileObservers.size == 0}
 					>
 						<Trash2 size="16" class="mr-1" />
 						{$_('menu.delete_all')}
@@ -206,7 +202,7 @@
 			triggerFileInput();
 			e.preventDefault();
 		} else if (e.key === 'd' && (e.metaKey || e.ctrlKey)) {
-			filestore.duplicateSelectedFiles();
+			dbUtils.duplicateSelectedFiles();
 			e.preventDefault();
 		} else if ((e.key === 's' || e.key == 'S') && (e.metaKey || e.ctrlKey)) {
 			if (e.shiftKey) {
@@ -217,15 +213,15 @@
 			e.preventDefault();
 		} else if ((e.key === 'z' || e.key == 'Z') && (e.metaKey || e.ctrlKey)) {
 			if (e.shiftKey) {
-				$undoRedo.redo();
+				redo();
 			} else {
-				$undoRedo.undo();
+				undo();
 			}
 		} else if ((e.key === 'Backspace' || e.key === 'Delete') && (e.metaKey || e.ctrlKey)) {
 			if (e.shiftKey) {
-				filestore.deleteAllFiles();
+				dbUtils.deleteAllFiles();
 			} else {
-				filestore.deleteSelectedFiles();
+				dbUtils.deleteSelectedFiles();
 			}
 			e.preventDefault();
 		} else if (e.key === 'a' && (e.metaKey || e.ctrlKey)) {

website/src/lib/components/gpx-layer/GPXLayer.ts

@@ -1,7 +1,8 @@
 import type { GPXFile } from "gpx";
 import { map, selectFiles, currentTool, Tool } from "$lib/stores";
-import { get, type Writable } from "svelte/store";
+import { get, type Readable, type Writable } from "svelte/store";
 import mapboxgl from "mapbox-gl";
+import type { FreezedObject } from "structurajs";
 
 let defaultWeight = 6;
 let defaultOpacity = 1;
@@ -38,7 +39,7 @@ function decrementColor(color: string) {
 
 export class GPXLayer {
     map: mapboxgl.Map;
-    file: Writable<GPXFile>;
+    file: Readable<FreezedObject<GPXFile>>;
     fileId: string;
     layerColor: string;
     popup: mapboxgl.Popup;
@@ -49,7 +50,7 @@ export class GPXLayer {
     addBinded: () => void = this.add.bind(this);
     selectOnClickBinded: (e: any) => void = this.selectOnClick.bind(this);
 
-    constructor(map: mapboxgl.Map, file: Writable<GPXFile>, popup: mapboxgl.Popup, popupElement: HTMLElement) {
+    constructor(map: mapboxgl.Map, file: Readable<FreezedObject<GPXFile>>, popup: mapboxgl.Popup, popupElement: HTMLElement) {
         this.map = map;
         this.file = file;
         this.fileId = get(file)._data.id;
@@ -58,8 +59,6 @@ export class GPXLayer {
         this.popupElement = popupElement;
         this.unsubscribe = file.subscribe(this.updateData.bind(this));
 
-        get(this.file)._data.layerColor = this.layerColor;
-
         this.add();
         this.map.on('style.load', this.addBinded);
     }

website/src/lib/components/gpx-layer/GPXLayers.svelte

@@ -1,28 +1,28 @@
 <script lang="ts">
-	import { map, filestore, selectedFiles, gpxLayers } from '$lib/stores';
+	import { map, selectedFiles, gpxLayers } from '$lib/stores';
 	import { GPXLayer } from './GPXLayer';
 	import { get } from 'svelte/store';
 	import { onMount } from 'svelte';
 	import mapboxgl from 'mapbox-gl';
 	import WaypointPopup from './WaypointPopup.svelte';
+	import { fileObservers } from '$lib/db';
 
 	let popupElement: HTMLElement;
 	let popup: mapboxgl.Popup | null = null;
 
-	$: if ($map) {
+	$: if ($map && $fileObservers) {
 		gpxLayers.update(($layers) => {
 			// remove layers for deleted files
 			$layers.forEach((layer, fileId) => {
-				if (!get(filestore).find((file) => file._data.id === fileId)) {
+				if (!$fileObservers.has(fileId)) {
 					layer.remove();
 					$layers.delete(fileId);
 				}
 			});
 			// add layers for new files
-			$filestore.forEach((file) => {
+			$fileObservers.forEach((file, fileId) => {
-				if (!$layers.has(file._data.id)) {
+				if (!$layers.has(fileId)) {
-					let fileStore = filestore.getFileStore(file._data.id);
+					$layers.set(fileId, new GPXLayer(get(map), file, popup, popupElement));
-					$layers.set(file._data.id, new GPXLayer(get(map), fileStore, popup, popupElement));
 				}
 			});
 			return $layers;

website/src/lib/components/toolbar/Toolbar.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Tool, filestore } from '$lib/stores';
+	import { Tool } from '$lib/stores';
+	import { dbUtils } from '$lib/db';
 	import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
 	import Waypoint from '$lib/components/toolbar/tools/waypoint/Waypoint.svelte';
 	import ToolbarItem from './ToolbarItem.svelte';
@@ -34,7 +35,7 @@
 			</ToolbarItem>
 			<ToolbarItem
 				tool={Tool.REVERSE}
-				on:click={() => filestore.applyToSelectedFiles((file) => file.reverse())}
+				on:click={() => dbUtils.applyToSelectedFiles((file) => file.reverse())}
 			>
 				<ArrowRightLeft slot="icon" size="18" />
 				<span slot="tooltip">{$_('toolbar.reverse_tooltip')}</span>

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

@@ -6,7 +6,7 @@
 	import * as Alert from '$lib/components/ui/alert';
 	import { CircleHelp } from 'lucide-svelte';
 
-	import { filestore, map, selectedFiles, Tool } from '$lib/stores';
+	import { map, selectedFiles, Tool } from '$lib/stores';
 	import { brouterProfiles, privateRoads, routing, routingProfile } from './Routing';
 
 	import { _ } from 'svelte-i18n';
@@ -15,6 +15,7 @@
 	import RoutingControlPopup from './RoutingControlPopup.svelte';
 	import { onMount } from 'svelte';
 	import mapboxgl from 'mapbox-gl';
+	import { fileObservers } from '$lib/db';
 
 	let routingControls: Map<string, RoutingControls> = new Map();
 	let popupElement: HTMLElement;
@@ -22,10 +23,10 @@
 	let selectedId: string | null = null;
 	let active = false;
 
-	$: if ($map && $filestore) {
+	$: if ($map) {
 		// remove controls for deleted files
 		routingControls.forEach((controls, fileId) => {
-			if (!get(filestore).find((file) => file._data.id === fileId)) {
+			if (!$fileObservers.has(fileId)) {
 				controls.remove();
 				routingControls.delete(fileId);
 
@@ -56,11 +57,11 @@
 
 	$: if ($map && selectedId) {
 		if (!routingControls.has(selectedId)) {
-			let selectedFileStore = filestore.getFileStore(selectedId);
+			let selectedFileObserver = get(fileObservers).get(selectedId);
-			if (selectedFileStore) {
+			if (selectedFileObserver) {
 				routingControls.set(
 					selectedId,
-					new RoutingControls(get(map), selectedFileStore, popup, popupElement)
+					new RoutingControls(get(map), selectedFileObserver, popup, popupElement)
 				);
 			}
 		} else {

website/src/lib/components/toolbar/tools/routing/RoutingControls.ts

@@ -7,7 +7,7 @@ import { route } from "./Routing";
 import { toast } from "svelte-sonner";
 
 import { _ } from "svelte-i18n";
-import { filestore } from "$lib/stores";
+import { dbUtils } from "$lib/db";
 
 export class RoutingControls {
     map: mapboxgl.Map;
@@ -290,17 +290,17 @@ export class RoutingControls {
         let [previousAnchor, nextAnchor] = this.getNeighbouringAnchors(anchor);
 
         if (previousAnchor === null && nextAnchor === null) { // Only one point, remove it
-            filestore.applyToFile(get(this.file)._data.id, (file) => {
+            dbUtils.applyToFile(get(this.file)._data.id, (file) => {
                 let segment = file.getSegments()[anchor.segmentIndex];
                 segment.replace(0, 0, []);
             });
         } else if (previousAnchor === null) { // First point, remove trackpoints until nextAnchor
-            filestore.applyToFile(get(this.file)._data.id, (file) => {
+            dbUtils.applyToFile(get(this.file)._data.id, (file) => {
                 let segment = file.getSegments()[anchor.segmentIndex];
                 segment.replace(0, nextAnchor.point._data.index - 1, []);
             });
         } else if (nextAnchor === null) { // Last point, remove trackpoints from previousAnchor
-            filestore.applyToFile(get(this.file)._data.id, (file) => {
+            dbUtils.applyToFile(get(this.file)._data.id, (file) => {
                 let segment = file.getSegments()[anchor.segmentIndex];
                 segment.replace(previousAnchor.point._data.index + 1, segment.trkpt.length - 1, []);
             });
@@ -323,7 +323,7 @@ export class RoutingControls {
 
         if (!lastAnchor) {
             // TODO, create segment if it does not exist
-            filestore.applyToFile(get(this.file)._data.id, (file) => {
+            dbUtils.applyToFile(get(this.file)._data.id, (file) => {
                 let segment = file.getSegments()[0];
                 segment.replace(0, 0, [newPoint]);
             });
@@ -365,7 +365,7 @@ export class RoutingControls {
         let segment = anchors[0].segment;
 
         if (anchors.length === 1) { // Only one anchor, update the point in the segment
-            filestore.applyToFile(get(this.file)._data.id, (file) => {
+            dbUtils.applyToFile(get(this.file)._data.id, (file) => {
                 let segment = file.getSegments()[anchors[0].segmentIndex];
                 segment.replace(0, 0, [new TrackPoint({
                     attributes: targetCoordinates[0],
@@ -425,7 +425,7 @@ export class RoutingControls {
             anchor.point._data.zoom = 0; // Make these anchors permanent
         });
 
-        filestore.applyToFile(get(this.file)._data.id, (file) => {
+        dbUtils.applyToFile(get(this.file)._data.id, (file) => {
             let segment = file.getSegments()[anchors[0].segmentIndex];
             segment.replace(start, end, response);
         });

website/src/lib/db.ts

@@ -0,0 +1,191 @@
+import Dexie, { liveQuery } from 'dexie';
+import { GPXFile } from 'gpx';
+import { type FreezedObject, type Patch, produceWithPatches, applyPatches } from 'structurajs';
+import { writable, get, derived, type Readable, type Writable } from 'svelte/store';
+import { fileOrder, selectedFiles } from './stores';
+
+class Database extends Dexie {
+
+    files!: Dexie.Table<FreezedObject<GPXFile>, string>;
+    patches!: Dexie.Table<{ patch: Patch[], inversePatch: Patch[] }, number>;
+    settings!: Dexie.Table<any, string>;
+
+    constructor() {
+        super("Database");
+        this.version(1).stores({
+            files: ',file',
+            patches: '++id,patch,inversePatch',
+            settings: ',value'
+        });
+    }
+}
+
+const db = new Database();
+
+function dexieStore<T>(querier: () => T | Promise<T>): Readable<T> {
+    const dexieObservable = liveQuery(querier)
+    return {
+        subscribe(run, invalidate) {
+            return dexieObservable.subscribe(run, invalidate).unsubscribe
+        }
+    }
+}
+
+export function updateFiles(files: FreezedObject<GPXFile>[]) {
+    console.log(files);
+    return db.files.bulkPut(files, files.map(file => file._data.id));
+}
+
+export const fileObservers: Writable<Map<string, Readable<FreezedObject<GPXFile>>>> = writable(new Map());
+export const fileState: Map<string, FreezedObject<GPXFile>> = new Map(); // Used to generate patches
+
+liveQuery(() => db.files.toArray()).subscribe(dbFiles => {
+    // Find new files to observe
+    let newFiles = dbFiles.map(file => file._data.id).filter(id => !get(fileObservers).has(id));
+    // Find deleted files to stop observing
+    let deletedFiles = Array.from(get(fileObservers).keys()).filter(id => !dbFiles.find(file => file._data.id === id));
+    // Update the store
+    if (newFiles.length > 0 || deletedFiles.length > 0) {
+        fileObservers.update($files => {
+            newFiles.forEach(id => {
+                $files.set(id, dexieStore(() => db.files.get(id)));
+            });
+            deletedFiles.forEach(id => {
+                $files.delete(id);
+                fileState.delete(id);
+            });
+            return $files;
+        });
+        console.log(get(fileObservers));
+    }
+
+    // Update fileState
+    dbFiles.forEach(file => {
+        fileState.set(file._data.id, file);
+    });
+});
+
+const patchIndex = dexieStore(() => db.settings.get('patchIndex') ?? -1);
+const patches = dexieStore(() => db.patches.toArray());
+export const canUndo = derived(patchIndex, $patchIndex => $patchIndex >= 0);
+export const canRedo = derived([patchIndex, patches], ([$patchIndex, $patches]) => $patchIndex < $patches.length - 1);
+
+export function applyGlobal(callback: (files: Map<string, GPXFile>) => void) {
+    const [newFileState, patch, inversePatch] = produceWithPatches(fileState, callback);
+
+    appendPatches(patch, inversePatch, true);
+
+    return updateFiles(Array.from(newFileState.values()));
+}
+
+function applyToFiles(fileIds: string[], callback: (file: GPXFile) => void) {
+    const [newFileState, patch, inversePatch] = produceWithPatches(fileState, (draft) => {
+        fileIds.forEach((fileId) => {
+            callback(draft.get(fileId));
+        });
+    });
+
+    appendPatches(patch, inversePatch, false);
+
+    return updateFiles(fileIds.map((fileId) => newFileState.get(fileId)));
+}
+
+function appendPatches(patch: Patch[], inversePatch: Patch[], global: boolean) {
+    db.patches.where('id').above(patchIndex).delete();
+    db.patches.add({
+        patch,
+        inversePatch
+    });
+    db.settings.put(get(patchIndex) + 1, 'patchIndex');
+}
+
+function applyPatch(patch: Patch[]) {
+    let newFileState = applyPatches(fileState, patch);
+    let changedFiles = [];
+    for (let p of patch) {
+        let fileId = p.p?.toString();
+        if (fileId) {
+            let newFile = newFileState.get(fileId);
+            if (newFile) {
+                changedFiles.push(newFile);
+            }
+        }
+    }
+    return updateFiles(changedFiles);
+}
+
+function getFileId() {
+    for (let index = 0; ; index++) {
+        let id = `gpx-${index}`;
+        if (!get(fileObservers).has(id)) {
+            return id;
+        }
+    }
+}
+
+export function undo() {
+    if (get(canUndo)) {
+        let index = get(patchIndex);
+        applyPatch(get(patches)[index].inversePatch);
+        db.settings.put(index - 1, 'patchIndex');
+    }
+}
+
+export function redo() {
+    if (get(canRedo)) {
+        let index = get(patchIndex) + 1;
+        applyPatch(get(patches)[index].patch);
+        db.settings.put(index, 'patchIndex');
+    }
+}
+
+export const dbUtils = {
+    add: (file: GPXFile) => {
+        file._data.id = getFileId();
+        console.log(file._data.id);
+        let result = applyGlobal((draft) => {
+            draft.set(file._data.id, file);
+        });
+        console.log(result);
+    },
+    addMultiple: (files: GPXFile[]) => {
+        applyGlobal((draft) => {
+            files.forEach((file) => {
+                file._data.id = getFileId();
+                draft.set(file._data.id, file);
+            });
+        });
+    },
+    applyToFile: (id: string, callback: (file: GPXFile) => void) => {
+        applyToFiles([id], callback);
+    },
+    applyToSelectedFiles: (callback: (file: GPXFile) => void) => {
+        applyToFiles(get(fileOrder).filter(fileId => get(selectedFiles).has(fileId)), callback);
+    },
+    duplicateSelectedFiles: () => {
+        applyGlobal((draft) => {
+            get(fileOrder).forEach((fileId) => {
+                if (get(selectedFiles).has(fileId)) {
+                    let file = draft.get(fileId);
+                    if (file) {
+                        let clone = file.clone();
+                        clone._data.id = getFileId();
+                        draft.set(clone._data.id, clone);
+                    }
+                }
+            });
+        });
+    },
+    deleteSelectedFiles: () => {
+        applyGlobal((draft) => {
+            get(selectedFiles).forEach((fileId) => {
+                draft.delete(fileId);
+            });
+        });
+    },
+    deleteAllFiles: () => {
+        applyGlobal((draft) => {
+            draft.clear();
+        });
+    },
+}

website/src/lib/filestore.ts

@@ -1,199 +0,0 @@
-import { writable, get, type Readable, type Writable } from "svelte/store";
-import { GPXFile } from "gpx";
-import { produceWithPatches, type FreezedObject, type UnFreezedObject, applyPatches, type Patch } from "structurajs";
-import { fileOrder, selectedFiles } from "./stores";
-
-export type UndoRedoStore = {
-    canUndo: boolean;
-    canRedo: boolean;
-    undo: () => void;
-    redo: () => void;
-}
-
-export type GPXFileStore = Readable<GPXFile[]> & {
-    undoRedo: Writable<UndoRedoStore>;
-    add: (file: GPXFile) => void;
-    addMultiple: (files: GPXFile[]) => void;
-    applyToFile: (id: string, callback: (file: GPXFile) => void) => void;
-    applyToSelectedFiles: (callback: (file: GPXFile) => void) => void;
-    duplicateSelectedFiles: () => void;
-    deleteSelectedFiles: () => void;
-    deleteAllFiles: () => void;
-    getFileStore: (id: string) => Writable<FreezedObject<GPXFile>> | undefined;
-}
-
-export function createGPXFileStore(): GPXFileStore {
-    let files: ReadonlyMap<string, FreezedObject<GPXFile>> = new Map();
-    let subscribers: Set<Function> = new Set();
-
-    function notifySubscriber(run: Function) {
-        run(Array.from(files.values()));
-    }
-
-    function notify() {
-        subscribers.forEach((run) => {
-            notifySubscriber(run);
-        });
-    }
-
-    let filestores = new Map<string, Writable<FreezedObject<GPXFile>>>();
-    let patches: { patch: Patch[], inversePatch: Patch[], global: boolean }[] = [];
-    let patchIndex = -1;
-
-    function updateUndoRedo() {
-        undoRedo.update($undoRedo => {
-            $undoRedo.canUndo = patchIndex >= 0;
-            $undoRedo.canRedo = patchIndex < patches.length - 1;
-            return $undoRedo;
-        });
-    }
-
-    function appendPatches(patch: Patch[], inversePatch: Patch[], global: boolean) {
-        patches = patches.slice(0, patchIndex + 1);
-        patches.push({
-            patch,
-            inversePatch,
-            global
-        });
-        patchIndex++;
-        updateUndoRedo();
-    }
-
-    let undoRedo: Writable<UndoRedoStore> = writable({
-        canUndo: false,
-        canRedo: false,
-        undo: () => {
-            if (patchIndex >= 0) {
-                applyPatch(patches[patchIndex].inversePatch, patches[patchIndex].global);
-                patchIndex--;
-                updateUndoRedo();
-            }
-        },
-        redo: () => {
-            if (patchIndex < patches.length - 1) {
-                patchIndex++;
-                applyPatch(patches[patchIndex].patch, patches[patchIndex].global);
-                updateUndoRedo();
-            }
-        },
-    });
-
-    function applyPatch(patch: Patch[], global: boolean) {
-        files = applyPatches(files, patch);
-        for (let p of patch) {
-            let fileId = p.p?.toString();
-            if (fileId) {
-                let filestore = filestores.get(fileId), newFile = files.get(fileId);
-                if (filestore && newFile) {
-                    filestore.set(newFile);
-                }
-            }
-        }
-        if (global) {
-            notify();
-        }
-    }
-
-    function applyToGlobalStore(callback: (files: Map<string, GPXFile>) => void) {
-        const [newFiles, patch, inversePatch] = produceWithPatches(files, callback);
-        files = newFiles;
-        appendPatches(patch, inversePatch, true);
-        notify();
-    }
-
-    function applyToFiles(fileIds: string[], callback: (file: UnFreezedObject<FreezedObject<GPXFile>>) => void) {
-        const [newFiles, patch, inversePatch] = produceWithPatches(files, (draft) => {
-            fileIds.forEach((fileId) => {
-                callback(draft.get(fileId));
-            });
-        });
-        files = newFiles;
-        appendPatches(patch, inversePatch, false);
-        fileIds.forEach((fileId) => {
-            let filestore = filestores.get(fileId), newFile = newFiles.get(fileId);
-            if (filestore && newFile) {
-                filestore.set(newFile);
-            }
-        });
-    }
-
-    subscribers.add(() => {
-        // remove filestores that are no longer in the files map
-        filestores.forEach((_, fileId) => {
-            if (!files.has(fileId)) {
-                filestores.delete(fileId);
-            }
-        });
-        // add filestores that are in the files map but not in the filestores map
-        files.forEach((file, fileId) => {
-            if (!filestores.has(fileId)) {
-                filestores.set(fileId, writable(file));
-            }
-        });
-    });
-
-    return {
-        subscribe: (run) => {
-            subscribers.add(run);
-            notifySubscriber(run);
-            return () => {
-                subscribers.delete(run);
-            }
-        },
-        undoRedo,
-        add: (file: GPXFile) => {
-            file._data.id = getLayerId();
-            applyToGlobalStore((draft) => {
-                draft.set(file._data.id, file);
-            });
-        },
-        addMultiple: (files: GPXFile[]) => {
-            applyToGlobalStore((draft) => {
-                files.forEach((file) => {
-                    file._data.id = getLayerId();
-                    draft.set(file._data.id, file);
-                });
-            });
-        },
-        applyToFile: (id: string, callback: (file: GPXFile) => void) => {
-            applyToFiles([id], callback);
-        },
-        applyToSelectedFiles: (callback: (file: GPXFile) => void) => {
-            applyToFiles(get(fileOrder).filter(fileId => get(selectedFiles).has(fileId)), callback);
-        },
-        duplicateSelectedFiles: () => {
-            applyToGlobalStore((draft) => {
-                get(fileOrder).forEach((fileId) => {
-                    if (get(selectedFiles).has(fileId)) {
-                        let file = draft.get(fileId);
-                        if (file) {
-                            let clone = file.clone();
-                            clone._data.id = getLayerId();
-                            draft.set(clone._data.id, clone);
-                        }
-                    }
-                });
-            });
-        },
-        deleteSelectedFiles: () => {
-            applyToGlobalStore((draft) => {
-                get(selectedFiles).forEach((fileId) => {
-                    draft.delete(fileId);
-                });
-            });
-        },
-        deleteAllFiles: () => {
-            applyToGlobalStore((draft) => {
-                draft.clear();
-            });
-        },
-        getFileStore: (id: string) => {
-            return filestores.get(id);
-        }
-    }
-}
-
-let id = 0;
-function getLayerId() {
-    return `gpx-${id++}`;
-}

website/src/lib/stores.ts

@@ -1,27 +1,25 @@
-import { writable, get, type Writable, derived } from 'svelte/store';
+import { writable, get, type Writable } from 'svelte/store';
 
 import mapboxgl from 'mapbox-gl';
-import { GPXFile, buildGPX, parseGPX, type AnyGPXTreeElement, GPXFiles } from 'gpx';
+import { GPXFile, buildGPX, parseGPX, GPXFiles } from 'gpx';
 import { tick } from 'svelte';
 import { _ } from 'svelte-i18n';
 import type { GPXLayer } from '$lib/components/gpx-layer/GPXLayer';
-import { createGPXFileStore } from './filestore';
+import { dbUtils, fileObservers, fileState } from './db';
 
 export const map = writable<mapboxgl.Map | null>(null);
 
-export const filestore = createGPXFileStore();
 export const fileOrder = writable<string[]>([]);
 export const selectedFiles = writable<Set<string>>(new Set());
 export const selectFiles = writable<{ [key: string]: (fileId?: string) => void }>({});
 
-filestore.subscribe((files) => { // Update selectedFiles automatically when files are deleted (either by action or by undo-redo)
+fileObservers.subscribe((files) => { // Update selectedFiles automatically when files are deleted (either by action or by undo-redo)
     let deletedFileIds: string[] = [];
     get(selectedFiles).forEach((fileId) => {
-        if (!files.find((f) => f._data.id === fileId)) {
+        if (!files.has(fileId)) {
             deletedFileIds.push(fileId);
         }
     });
-
     if (deletedFileIds.length > 0) {
         selectedFiles.update((selectedFiles) => {
             deletedFileIds.forEach((fileId) => selectedFiles.delete(fileId));
@@ -35,7 +33,7 @@ export const gpxData = writable(new GPXFiles([]).getTrackPointsAndStatistics());
 function updateGPXData() {
     let fileIds: string[] = get(fileOrder).filter((f) => get(selectedFiles).has(f));
     let files: GPXFile[] = fileIds
-        .map((id) => get(filestore).find((f) => f._data.id === id))
+        .map((id) => fileState.get(id))
         .filter((f) => f) as GPXFile[];
     let gpxFiles = new GPXFiles(files);
     gpxData.set(gpxFiles.getTrackPointsAndStatistics());
@@ -45,9 +43,9 @@ let selectedFilesUnsubscribe: Function[] = [];
 selectedFiles.subscribe((selectedFiles) => {
     selectedFilesUnsubscribe.forEach((unsubscribe) => unsubscribe());
     selectedFiles.forEach((fileId) => {
-        let fileStore = filestore.getFileStore(fileId);
+        let fileObserver = get(fileObservers).get(fileId);
-        if (fileStore) {
+        if (fileObserver) {
-            let unsubscribe = fileStore.subscribe(() => {
+            let unsubscribe = fileObserver.subscribe(() => {
                 updateGPXData();
             });
             selectedFilesUnsubscribe.push(unsubscribe);
@@ -82,7 +80,7 @@ export function createFile() {
     let file = new GPXFile();
     file.metadata.name = get(_)("menu.new_filename");
 
-    filestore.add(file);
+    dbUtils.add(file);
 
     tick().then(() => get(selectFiles).select(file._data.id));
     currentTool.set(Tool.ROUTING);
@@ -105,7 +103,7 @@ export function triggerFileInput() {
 export async function loadFiles(list: FileList) {
     let bounds = new mapboxgl.LngLatBounds();
     let mapBounds = new mapboxgl.LngLatBounds([180, 90, -180, -90]);
-    if (get(filestore).length > 0) {
+    if (fileState.size > 0) {
         mapBounds = get(map)?.getBounds() ?? mapBounds;
         bounds.extend(mapBounds);
     }
@@ -123,7 +121,7 @@ export async function loadFiles(list: FileList) {
         }
     }
 
-    filestore.addMultiple(files);
+    dbUtils.addMultiple(files);
 
     if (!mapBounds.contains(bounds.getSouthWest()) || !mapBounds.contains(bounds.getNorthEast()) || !mapBounds.contains(bounds.getSouthEast()) || !mapBounds.contains(bounds.getNorthWest())) {
         get(map)?.fitBounds(bounds, {
@@ -161,7 +159,7 @@ export async function loadFile(file: File): Promise<GPXFile | null> {
 }
 
 export async function exportSelectedFiles() {
-    for (let file of get(filestore)) {
+    for (let file of fileState.values()) {
         if (get(selectedFiles).has(file._data.id)) {
             exportFile(file);
             await new Promise(resolve => setTimeout(resolve, 200));
@@ -170,7 +168,7 @@ export async function exportSelectedFiles() {
 }
 
 export async function exportAllFiles() {
-    for (let file of get(filestore)) {
+    for (let file of fileState.values()) {
         exportFile(file);
         await new Promise(resolve => setTimeout(resolve, 200));
     }