progress

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "gpx.studio",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

website/src/lib/components/Menu.svelte

@@ -44,21 +44,13 @@
         ChartArea,
         Maximize,
     } from '@lucide/svelte';
-    import { map } from '$lib/components/map/utils.svelte';
+    import { map } from '$lib/components/map/map';
     import { editMetadata } from '$lib/components/file-list/metadata/utils.svelte';
     import { editStyle } from '$lib/components/file-list/style/utils.svelte';
     import { exportState, ExportState } from '$lib/components/export/utils.svelte';
-    // import {
+    import { anySelectedLayer } from '$lib/components/map/layer-control/utils';
-    //     triggerFileInput,
-    //     createFile,
-    //     loadFiles,
-    //     updateSelectionFromKey,
-    //     allHidden,
-    // } from '$lib/stores';
-    // import { canUndo, canRedo, fileActions, fileObservers, settings } from '$lib/db';
-    import { anySelectedLayer } from '$lib/components/map/layer-control/utils.svelte';
     import { defaultOverlays } from '$lib/assets/layers';
-    // import LayerControlSettings from '$lib/components/map/layer-control/LayerControlSettings.svelte';
+    import LayerControlSettings from '$lib/components/map/layer-control/LayerControlSettings.svelte';
     import {
         allowedPastes,
         ListFileItem,
@@ -69,17 +61,17 @@
     import { i18n } from '$lib/i18n.svelte';
     import { languages } from '$lib/languages';
     import { getURLForLanguage } from '$lib/utils';
-    import { settings } from '$lib/logic/settings.svelte';
+    import { settings } from '$lib/logic/settings';
     import {
         createFile,
         fileActions,
         loadFiles,
         pasteSelection,
         triggerFileInput,
-    } from '$lib/logic/file-actions.svelte';
+    } from '$lib/logic/file-actions';
-    import { fileStateCollection } from '$lib/logic/file-state.svelte';
+    import { fileStateCollection } from '$lib/logic/file-state';
-    import { fileActionManager } from '$lib/logic/file-action-manager.svelte';
+    import { fileActionManager } from '$lib/logic/file-action-manager';
-    import { selection } from '$lib/logic/selection.svelte';
+    import { selection } from '$lib/logic/selection';
 
     const {
         distanceUnits,
@@ -98,19 +90,14 @@
     } = settings;
 
     function switchBasemaps() {
-        [currentBasemap.value, previousBasemap.value] = [
+        [$currentBasemap, $previousBasemap] = [$previousBasemap, $currentBasemap];
-            previousBasemap.value,
-            currentBasemap.value,
-        ];
     }
 
     function toggleOverlays() {
-        if (currentOverlays.value && anySelectedLayer(currentOverlays.value)) {
+        if ($currentOverlays && anySelectedLayer($currentOverlays)) {
-            previousOverlays.value = JSON.parse(JSON.stringify(currentOverlays.value));
+            [$currentOverlays, $previousOverlays] = [defaultOverlays, $currentOverlays];
-            currentOverlays.value = defaultOverlays;
         } else {
-            currentOverlays.value = JSON.parse(JSON.stringify(previousOverlays.value));
+            [$currentOverlays, $previousOverlays] = [$previousOverlays, defaultOverlays];
-            previousOverlays.value = defaultOverlays;
         }
     }
 
@@ -146,7 +133,7 @@
                     <Menubar.Separator />
                     <Menubar.Item
                         onclick={fileActions.duplicateSelection}
-                        disabled={selection.value.size == 0}
+                        disabled={$selection.size == 0}
                     >
                         <Copy size="16" class="mr-1" />
                         {i18n._('menu.duplicate')}
@@ -155,7 +142,7 @@
                     <Menubar.Separator />
                     <Menubar.Item
                         onclick={fileActions.deleteSelectedFiles}
-                        disabled={selection.value.size == 0}
+                        disabled={$selection.size == 0}
                     >
                         <FileX size="16" class="mr-1" />
                         {i18n._('menu.close')}
@@ -172,7 +159,7 @@
                     <Menubar.Separator />
                     <Menubar.Item
                         onclick={() => (exportState.current = ExportState.SELECTION)}
-                        disabled={selection.value.size == 0}
+                        disabled={$selection.size == 0}
                     >
                         <Download size="16" class="mr-1" />
                         {i18n._('menu.export')}
@@ -195,7 +182,7 @@
                 </Menubar.Trigger>
                 <Menubar.Content class="border-none">
                     <Menubar.Item
-                        onclick={fileActionManager.undo}
+                        onclick={() => fileActionManager.undo()}
                         disabled={!fileActionManager.canUndo}
                     >
                         <Undo2 size="16" class="mr-1" />
@@ -203,7 +190,7 @@
                         <Shortcut key="Z" ctrl={true} />
                     </Menubar.Item>
                     <Menubar.Item
-                        onclick={fileActionManager.redo}
+                        onclick={() => fileActionManager.redo()}
                         disabled={!fileActionManager.canRedo}
                     >
                         <Redo2 size="16" class="mr-1" />
@@ -212,8 +199,8 @@
                     </Menubar.Item>
                     <Menubar.Separator />
                     <Menubar.Item
-                        disabled={selection.value.size !== 1 ||
+                        disabled={$selection.size !== 1 ||
-                            !selection.value
+                            !$selection
                                 .getSelected()
                                 .every(
                                     (item) =>
@@ -227,8 +214,8 @@
                         <Shortcut key="I" ctrl={true} />
                     </Menubar.Item>
                     <Menubar.Item
-                        disabled={selection.value.size === 0 ||
+                        disabled={$selection.size === 0 ||
-                            !selection.value
+                            !$selection
                                 .getSelected()
                                 .every(
                                     (item) =>
@@ -248,7 +235,7 @@
                             //     fileActions.setHiddenToSelection(true);
                             // }
                         }}
-                        disabled={selection.value.size == 0}
+                        disabled={$selection.size == 0}
                     >
                         <!-- {#if $allHidden}
                             <Eye size="16" class="mr-1" />
@@ -259,34 +246,32 @@
                         {/if} -->
                         <Shortcut key="H" ctrl={true} />
                     </Menubar.Item>
-                    {#if treeFileView.value}
+                    {#if $treeFileView}
-                        {#if selection.value
+                        {#if $selection.getSelected().some((item) => item instanceof ListFileItem)}
-                            .getSelected()
-                            .some((item) => item instanceof ListFileItem)}
                             <Menubar.Separator />
                             <Menubar.Item
                                 onclick={() =>
                                     fileActions.addNewTrack(
-                                        selection.value.getSelected()[0].getFileId()
+                                        $selection.getSelected()[0].getFileId()
                                     )}
-                                disabled={selection.value.size !== 1}
+                                disabled={$selection.size !== 1}
                             >
                                 <Plus size="16" class="mr-1" />
                                 {i18n._('menu.new_track')}
                             </Menubar.Item>
-                        {:else if selection.value
+                        {:else if $selection
                             .getSelected()
                             .some((item) => item instanceof ListTrackItem)}
                             <Menubar.Separator />
                             <Menubar.Item
                                 onclick={() => {
-                                    let item = selection.value.getSelected()[0];
+                                    let item = $selection.getSelected()[0];
                                     fileActions.addNewSegment(
                                         item.getFileId(),
                                         item.getTrackIndex()
                                     );
                                 }}
-                                disabled={selection.value.size !== 1}
+                                disabled={$selection.size !== 1}
                             >
                                 <Plus size="16" class="mr-1" />
                                 {i18n._('menu.new_segment')}
@@ -304,7 +289,7 @@
                     </Menubar.Item>
                     <Menubar.Item
                         onclick={() => {
-                            if (selection.value.size > 0) {
+                            if ($selection.size > 0) {
                                 // centerMapOnSelection();
                             }
                         }}
@@ -313,11 +298,11 @@
                         {i18n._('menu.center')}
                         <Shortcut key="⏎" ctrl={true} />
                     </Menubar.Item>
-                    {#if treeFileView.value}
+                    {#if $treeFileView}
                         <Menubar.Separator />
                         <Menubar.Item
                             onclick={selection.copySelection}
-                            disabled={selection.value.size === 0}
+                            disabled={$selection.size === 0}
                         >
                             <ClipboardCopy size="16" class="mr-1" />
                             {i18n._('menu.copy')}
@@ -325,7 +310,7 @@
                         </Menubar.Item>
                         <Menubar.Item
                             onclick={selection.cutSelection}
-                            disabled={selection.value.size === 0}
+                            disabled={$selection.size === 0}
                         >
                             <Scissors size="16" class="mr-1" />
                             {i18n._('menu.cut')}
@@ -334,9 +319,9 @@
                         <Menubar.Item
                             disabled={selection.copied === undefined ||
                                 selection.copied.length === 0 ||
-                                (selection.value.size > 0 &&
+                                ($selection.size > 0 &&
                                     !allowedPastes[selection.copied[0].level].includes(
-                                        selection.value.getSelected().pop()?.level
+                                        $selection.getSelected().pop()?.level
                                     ))}
                             onclick={pasteSelection}
                         >
@@ -348,7 +333,7 @@
                     <Menubar.Separator />
                     <Menubar.Item
                         onclick={fileActions.deleteSelection}
-                        disabled={selection.value.size == 0}
+                        disabled={$selection.size == 0}
                     >
                         <Trash2 size="16" class="mr-1" />
                         {i18n._('menu.delete')}
@@ -362,12 +347,12 @@
                     <span class="hidden md:block">{i18n._('menu.view')}</span>
                 </Menubar.Trigger>
                 <Menubar.Content class="border-none">
-                    <Menubar.CheckboxItem bind:checked={elevationProfile.value}>
+                    <Menubar.CheckboxItem bind:checked={$elevationProfile}>
                         <ChartArea size="16" class="mr-1" />
                         {i18n._('menu.elevation_profile')}
                         <Shortcut key="P" ctrl={true} />
                     </Menubar.CheckboxItem>
-                    <Menubar.CheckboxItem bind:checked={treeFileView.value}>
+                    <Menubar.CheckboxItem bind:checked={$treeFileView}>
                         <ListTree size="16" class="mr-1" />
                         {i18n._('menu.tree_file_view')}
                         <Shortcut key="L" ctrl={true} />
@@ -384,12 +369,12 @@
                         />
                     </Menubar.Item>
                     <Menubar.Separator />
-                    <Menubar.CheckboxItem bind:checked={distanceMarkers.value}>
+                    <Menubar.CheckboxItem bind:checked={$distanceMarkers}>
                         <Coins size="16" class="mr-1" />{i18n._('menu.distance_markers')}<Shortcut
                             key="F3"
                         />
                     </Menubar.CheckboxItem>
-                    <Menubar.CheckboxItem bind:checked={directionMarkers.value}>
+                    <Menubar.CheckboxItem bind:checked={$directionMarkers}>
                         <Milestone size="16" class="mr-1" />{i18n._(
                             'menu.direction_markers'
                         )}<Shortcut key="F4" />
@@ -415,7 +400,7 @@
                             <Ruler size="16" class="mr-1" />{i18n._('menu.distance_units')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
-                            <Menubar.RadioGroup bind:value={distanceUnits.value}>
+                            <Menubar.RadioGroup bind:value={$distanceUnits}>
                                 <Menubar.RadioItem value="metric"
                                     >{i18n._('menu.metric')}</Menubar.RadioItem
                                 >
@@ -433,7 +418,7 @@
                             <Zap size="16" class="mr-1" />{i18n._('menu.velocity_units')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
-                            <Menubar.RadioGroup bind:value={velocityUnits.value}>
+                            <Menubar.RadioGroup bind:value={$velocityUnits}>
                                 <Menubar.RadioItem value="speed"
                                     >{i18n._('quantities.speed')}</Menubar.RadioItem
                                 >
@@ -448,7 +433,7 @@
                             <Thermometer size="16" class="mr-1" />{i18n._('menu.temperature_units')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
-                            <Menubar.RadioGroup bind:value={temperatureUnits.value}>
+                            <Menubar.RadioGroup bind:value={$temperatureUnits}>
                                 <Menubar.RadioItem value="celsius"
                                     >{i18n._('menu.celsius')}</Menubar.RadioItem
                                 >
@@ -506,7 +491,7 @@
                             {i18n._('menu.street_view_source')}
                         </Menubar.SubTrigger>
                         <Menubar.SubContent>
-                            <Menubar.RadioGroup bind:value={streetViewSource.value}>
+                            <Menubar.RadioGroup bind:value={$streetViewSource}>
                                 <Menubar.RadioItem value="mapillary"
                                     >{i18n._('menu.mapillary')}</Menubar.RadioItem
                                 >
@@ -554,7 +539,7 @@
 </div>
 
 <Export />
-<!-- <LayerControlSettings bind:open={layerSettingsOpen} /> -->
+<LayerControlSettings bind:open={layerSettingsOpen} />
 
 <svelte:window
     on:keydown={(e) => {
@@ -598,7 +583,7 @@
                 if (fileStateCollection.size > 0) {
                     exportState.current = ExportState.ALL;
                 }
-            } else if (selection.value.size > 0) {
+            } else if ($selection.size > 0) {
                 exportState.current = ExportState.SELECTION;
             }
             e.preventDefault();
@@ -625,8 +610,8 @@
             }
         } else if (e.key === 'i' && (e.metaKey || e.ctrlKey)) {
             if (
-                selection.value.size === 1 &&
+                $selection.size === 1 &&
-                selection.value
+                $selection
                     .getSelected()
                     .every((item) => item instanceof ListFileItem || item instanceof ListTrackItem)
             ) {
@@ -634,10 +619,10 @@
             }
             e.preventDefault();
         } else if (e.key === 'p' && (e.metaKey || e.ctrlKey)) {
-            elevationProfile.value = !elevationProfile.value;
+            $elevationProfile = !$elevationProfile;
             e.preventDefault();
         } else if (e.key === 'l' && (e.metaKey || e.ctrlKey)) {
-            treeFileView.value = !treeFileView.value;
+            $treeFileView = !$treeFileView;
             e.preventDefault();
         } else if (e.key === 'h' && (e.metaKey || e.ctrlKey)) {
             // if ($allHidden) {
@@ -657,13 +642,13 @@
             toggleOverlays();
             e.preventDefault();
         } else if (e.key === 'F3') {
-            distanceMarkers.value = !distanceMarkers.value;
+            $distanceMarkers = !$distanceMarkers;
             e.preventDefault();
         } else if (e.key === 'F4') {
-            directionMarkers.value = !directionMarkers.value;
+            $directionMarkers = !$directionMarkers;
             e.preventDefault();
         } else if (e.key === 'F5') {
-            routing.value = !routing.value;
+            $routing = !$routing;
             e.preventDefault();
         } else if (
             e.key === 'ArrowRight' ||

website/src/lib/components/WithUnits.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { settings } from '$lib/db';
     import {
         celsiusToFahrenheit,
         getConvertedDistance,
@@ -11,6 +10,7 @@
         secondsToHHMMSS,
     } from '$lib/units';
     import { i18n } from '$lib/i18n.svelte';
+    import { settings } from '$lib/logic/settings';
 
     let {
         value,

website/src/lib/components/embedding/Embedding.svelte

@@ -4,7 +4,7 @@
     // import FileList from '$lib/components/file-list/FileList.svelte';
     // import GPXStatistics from '$lib/components/GPXStatistics.svelte';
     import Map from '$lib/components/map/Map.svelte';
-    import { map } from '$lib/components/map/utils.svelte';
+    import { map } from '$lib/components/map/map';
     // import LayerControl from '$lib/components/map/layer-control/LayerControl.svelte';
     import OpenIn from '$lib/components/embedding/OpenIn.svelte';
     import {
@@ -25,8 +25,8 @@
     } from './Embedding';
     import { mode, setMode } from 'mode-watcher';
     import { browser } from '$app/environment';
-    import { settings } from '$lib/logic/settings.svelte';
+    import { settings } from '$lib/logic/settings';
-    import { fileStateCollection } from '$lib/logic/file-state.svelte';
+    import { fileStateCollection } from '$lib/logic/file-state';
 
     let {
         useHash = true,

website/src/lib/components/export/Export.svelte

@@ -10,7 +10,7 @@
         ExportState,
         exportState,
     } from '$lib/components/export/utils.svelte';
-    import { tool } from '$lib/components/toolbar/utils.svelte';
+    import { currentTool } from '$lib/components/toolbar/tools';
     // import { gpxStatistics } from '$lib/stores';
     import {
         Download,
@@ -24,8 +24,8 @@
     import { i18n } from '$lib/i18n.svelte';
     import { GPXStatistics } from 'gpx';
     import { ListRootItem } from '$lib/components/file-list/file-list';
-    import { fileStateCollection } from '$lib/logic/file-state.svelte';
+    import { fileStateCollection } from '$lib/logic/file-state';
-    import { selection } from '$lib/logic/selection.svelte';
+    import { selection } from '$lib/logic/selection';
 
     let open = $derived(exportState.current !== ExportState.NONE);
     let exportOptions: Record<string, boolean> = $state({
@@ -80,7 +80,7 @@
 
     $effect(() => {
         if (open) {
-            tool.current = null;
+            currentTool.set(null);
         }
     });
 </script>
@@ -125,7 +125,7 @@
                     }}
                 >
                     <Download size="16" class="mr-1" />
-                    {#if fileStateCollection.files.size === 1 || (exportState.current === ExportState.SELECTION && selection.value.size === 1)}
+                    {#if $fileStateCollection.size === 1 || (exportState.current === ExportState.SELECTION && $selection.size === 1)}
                         {i18n._('menu.download_file')}
                     {:else}
                         {i18n._('menu.download_files')}

website/src/lib/components/export/utils.svelte.ts

@@ -1,9 +1,10 @@
-import { applyToOrderedSelectedItemsFromFile } from '$lib/logic/selection.svelte';
+import { selection } from '$lib/logic/selection';
-import { fileStateCollection } from '$lib/logic/file-state.svelte';
+import { fileStateCollection } from '$lib/logic/file-state';
-import { settings } from '$lib/logic/settings.svelte';
+import { settings } from '$lib/logic/settings';
 import { buildGPX, type GPXFile } from 'gpx';
 import FileSaver from 'file-saver';
 import JSZip from 'jszip';
+import { get } from 'svelte/store';
 
 export enum ExportState {
     NONE,
@@ -30,14 +31,14 @@ async function exportFiles(fileIds: string[], exclude: string[]) {
 
 export async function exportSelectedFiles(exclude: string[]) {
     const fileIds: string[] = [];
-    applyToOrderedSelectedItemsFromFile(async (fileId, level, items) => {
+    selection.applyToOrderedSelectedItemsFromFile(async (fileId, level, items) => {
         fileIds.push(fileId);
     });
     await exportFiles(fileIds, exclude);
 }
 
 export async function exportAllFiles(exclude: string[]) {
-    await exportFiles(settings.fileOrder.value, exclude);
+    await exportFiles(get(settings.fileOrder), exclude);
 }
 
 function exportFile(file: GPXFile, exclude: string[]) {

website/src/lib/components/file-list/FileList.svelte

@@ -2,14 +2,15 @@
     import { ScrollArea } from '$lib/components/ui/scroll-area/index';
     import * as ContextMenu from '$lib/components/ui/context-menu';
     import FileListNode from './FileListNode.svelte';
-    import { fileObservers, settings } from '$lib/db';
     import { setContext } from 'svelte';
     import { ListFileItem, ListLevel, ListRootItem, allowedPastes } from './file-list';
-    import { copied, pasteSelection, selectAll, selection } from './Selection';
     import { ClipboardPaste, FileStack, Plus } from '@lucide/svelte';
     import Shortcut from '$lib/components/Shortcut.svelte';
     import { i18n } from '$lib/i18n.svelte';
-    import { createFile } from '$lib/stores';
+    import { settings } from '$lib/logic/settings';
+    import { fileStateCollection } from '$lib/logic/file-state';
+    import { createFile, pasteSelection } from '$lib/logic/file-actions';
+    import { selection } from '$lib/logic/selection';
 
     let {
         orientation,
@@ -28,28 +29,28 @@
 
     const { treeFileView } = settings;
 
-    treeFileView.subscribe(($vertical) => {
+    // treeFileView.subscribe(($vertical) => {
-        if ($vertical) {
+    //     if ($vertical) {
-            selection.update(($selection) => {
+    //         selection.update(($selection) => {
-                $selection.forEach((item) => {
+    //             $selection.forEach((item) => {
-                    if ($selection.hasAnyChildren(item, false)) {
+    //                 if ($selection.hasAnyChildren(item, false)) {
-                        $selection.toggle(item);
+    //                     $selection.toggle(item);
-                    }
+    //                 }
-                });
+    //             });
-                return $selection;
+    //             return $selection;
-            });
+    //         });
-        } else {
+    //     } else {
-            selection.update(($selection) => {
+    //         selection.update(($selection) => {
-                $selection.forEach((item) => {
+    //             $selection.forEach((item) => {
-                    if (!(item instanceof ListFileItem)) {
+    //                 if (!(item instanceof ListFileItem)) {
-                        $selection.toggle(item);
+    //                     $selection.toggle(item);
-                        $selection.set(new ListFileItem(item.getFileId()), true);
+    //                     $selection.set(new ListFileItem(item.getFileId()), true);
-                    }
+    //                 }
-                });
+    //             });
-                return $selection;
+    //             return $selection;
-            });
+    //         });
-        }
+    //     }
-    });
+    // });
 </script>
 
 <ScrollArea
@@ -64,7 +65,7 @@
             : 'flex-row'} {className ?? ''}"
         {style}
     >
-        <FileListNode bind:node={$fileObservers} item={new ListRootItem()} />
+        <FileListNode node={$fileStateCollection} item={new ListRootItem()} />
         {#if orientation === 'vertical'}
             <ContextMenu.Root>
                 <ContextMenu.Trigger class="grow" />
@@ -75,16 +76,19 @@
                         <Shortcut key="+" ctrl={true} />
                     </ContextMenu.Item>
                     <ContextMenu.Separator />
-                    <ContextMenu.Item onclick={selectAll} disabled={$fileObservers.size === 0}>
+                    <ContextMenu.Item
+                        onclick={() => selection.selectAll()}
+                        disabled={$fileStateCollection.size === 0}
+                    >
                         <FileStack size="16" class="mr-1" />
                         {i18n._('menu.select_all')}
                         <Shortcut key="A" ctrl={true} />
                     </ContextMenu.Item>
                     <ContextMenu.Separator />
                     <ContextMenu.Item
-                        disabled={$copied === undefined ||
+                        disabled={selection.copied === undefined ||
-                            $copied.length === 0 ||
+                            selection.copied.length === 0 ||
-                            !allowedPastes[$copied[0].level].includes(ListLevel.ROOT)}
+                            !allowedPastes[selection.copied[0].level].includes(ListLevel.ROOT)}
                         onclick={pasteSelection}
                     >
                         <ClipboardPaste size="16" class="mr-1" />

website/src/lib/components/file-list/FileListNode.svelte

@@ -8,11 +8,10 @@
         type GPXTreeElement,
     } from 'gpx';
     import { CollapsibleTreeNode } from '$lib/components/collapsible-tree/index';
-    import { settings, type GPXFileWithStatistics } from '$lib/db';
+    import { type Readable } from 'svelte/store';
-    import { get, type Readable } from 'svelte/store';
     import FileListNodeContent from './FileListNodeContent.svelte';
     import FileListNodeLabel from './FileListNodeLabel.svelte';
-    import { afterUpdate, getContext } from 'svelte';
+    import { getContext } from 'svelte';
     import {
         ListFileItem,
         ListTrackSegmentItem,
@@ -22,20 +21,27 @@
         type ListTrackItem,
     } from './file-list';
     import { i18n } from '$lib/i18n.svelte';
-    import { selection } from './Selection';
+    import { settings } from '$lib/logic/settings';
+    import type { GPXFileWithStatistics } from '$lib/logic/statistics';
+    import { selection } from '$lib/logic/selection';
 
-    export let node:
+    let {
+        node,
+        item,
+    }: {
+        node:
             | Map<string, Readable<GPXFileWithStatistics | undefined>>
             | GPXTreeElement<AnyGPXTreeElement>
             | Waypoint[]
             | Waypoint;
-    export let item: ListItem;
+        item: ListItem;
+    } = $props();
 
     let recursive = getContext<boolean>('recursive');
 
-    let collapsible: CollapsibleTreeNode;
+    let collapsible: CollapsibleTreeNode | undefined = $state();
 
-    $: label =
+    let label = $derived(
         node instanceof GPXFile && item instanceof ListFileItem
             ? node.metadata.name
             : node instanceof Track
@@ -47,12 +53,13 @@
                     `${i18n._('gpx.waypoint')} ${(item as ListWaypointItem).waypointIndex + 1}`)
                   : node instanceof GPXFile && item instanceof ListWaypointsItem
                     ? i18n._('gpx.waypoints')
-                    : '';
+                    : ''
+    );
 
     const { treeFileView } = settings;
 
     function openIfSelectedChild() {
-        if (collapsible && get(treeFileView) && $selection.hasAnyChildren(item, false)) {
+        if (collapsible && treeFileView.value && $selection.hasAnyChildren(item, false)) {
             collapsible.openNode();
         }
     }
@@ -61,7 +68,7 @@
         openIfSelectedChild();
     }
 
-    afterUpdate(openIfSelectedChild);
+    // afterUpdate(openIfSelectedChild);
 </script>
 
 {#if node instanceof Map}

website/src/lib/components/file-list/FileListNodeContent.svelte

@@ -6,9 +6,8 @@
 
 <script lang="ts">
     import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
-    import { afterUpdate, getContext, onDestroy, onMount } from 'svelte';
+    import { getContext, onDestroy, onMount } from 'svelte';
     import Sortable from 'sortablejs/Sortable';
-    import { getFileIds, settings, type GPXFileWithStatistics } from '$lib/db';
     import { get, writable, type Readable, type Writable } from 'svelte/store';
     import FileListNodeStore from './FileListNodeStore.svelte';
     import FileListNode from './FileListNode.svelte';
@@ -18,18 +17,25 @@
         ListRootItem,
         ListWaypointsItem,
         allowedMoves,
-        moveItems,
         type ListItem,
     } from './file-list';
-    import { selection } from './Selection';
     import { isMac } from '$lib/utils';
+    import type { GPXFileWithStatistics } from '$lib/logic/statistics';
+    import { settings } from '$lib/logic/settings';
+    import { getFileIds, moveItems } from '$lib/logic/file-actions';
 
-    export let node:
+    let {
+        node,
+        item,
+        waypointRoot = false,
+    }: {
+        node:
             | Map<string, Readable<GPXFileWithStatistics | undefined>>
             | GPXTreeElement<AnyGPXTreeElement>
             | Waypoint;
-    export let item: ListItem;
+        item: ListItem;
-    export let waypointRoot: boolean = false;
+        waypointRoot?: boolean;
+    } = $props();
 
     let container: HTMLElement;
     let elements: { [id: string]: HTMLElement } = {};
@@ -126,28 +132,26 @@
         updateFromSelection();
     }
 
-    const { fileOrder } = settings;
+    function syncFileOrder(order: string[]) {
-    function syncFileOrder() {
         if (!sortable || sortableLevel !== ListLevel.FILE) {
             return;
         }
 
         const currentOrder = sortable.toArray();
-        if (currentOrder.length !== $fileOrder.length) {
+        if (currentOrder.length !== order.length) {
-            sortable.sort($fileOrder);
+            sortable.sort(order);
         } else {
             for (let i = 0; i < currentOrder.length; i++) {
-                if (currentOrder[i] !== $fileOrder[i]) {
+                if (currentOrder[i] !== order[i]) {
-                    sortable.sort($fileOrder);
+                    sortable.sort(order);
                     break;
                 }
             }
         }
     }
 
-    $: if ($fileOrder) {
+    const { fileOrder } = settings;
-        syncFileOrder();
+    $effect(() => syncFileOrder(fileOrder.value));
-    }
 
     function createSortable() {
         sortable = Sortable.create(container, {
@@ -172,12 +176,12 @@
             onSort: (e) => {
                 if (sortableLevel === ListLevel.FILE) {
                     let newFileOrder = sortable.toArray();
-                    if (newFileOrder.length !== get(fileOrder).length) {
+                    if (newFileOrder.length !== fileOrder.value.length) {
-                        fileOrder.set(newFileOrder);
+                        fileOrder.value = newFileOrder;
                     } else {
                         for (let i = 0; i < newFileOrder.length; i++) {
-                            if (newFileOrder[i] !== get(fileOrder)[i]) {
+                            if (newFileOrder[i] !== fileOrder.value[i]) {
-                                fileOrder.set(newFileOrder);
+                                fileOrder.value = newFileOrder;
                                 break;
                             }
                         }
@@ -222,7 +226,7 @@
                         if (toItem instanceof ListRootItem) {
                             let newFileIds = getFileIds(newIndices.length);
                             toItems = newIndices.map((i, index) => {
-                                $fileOrder.splice(i, 0, newFileIds[index]);
+                                fileOrder.value.splice(i, 0, newFileIds[index]);
                                 return item.extend(newFileIds[index]);
                             });
                         } else {

website/src/lib/components/file-list/FileListNodeLabel.svelte

@@ -2,7 +2,6 @@
     import { Button } from '$lib/components/ui/button';
     import * as ContextMenu from '$lib/components/ui/context-menu';
     import Shortcut from '$lib/components/Shortcut.svelte';
-    import { dbUtils, getFile } from '$lib/db';
     import {
         Copy,
         Info,
@@ -28,20 +27,8 @@
         allowedPastes,
         type ListItem,
     } from './file-list';
-    import {
-        copied,
-        copySelection,
-        cut,
-        cutSelection,
-        pasteSelection,
-        selectAll,
-        selectItem,
-        selection,
-    } from './Selection';
     import { getContext } from 'svelte';
     import { get } from 'svelte/store';
-    import { allHidden, gpxLayers } from '$lib/stores';
-    import { map, centerMapOnSelection } from '$lib/components/map/map.svelte';
     import { GPXTreeElement, Track, type AnyGPXTreeElement, Waypoint, GPXFile } from 'gpx';
     import { i18n } from '$lib/i18n.svelte';
     import MetadataDialog from '$lib/components/file-list/metadata/MetadataDialog.svelte';
@@ -50,6 +37,9 @@
     import { editStyle } from '$lib/components/file-list/style/utils.svelte';
     import { waypointPopup } from '$lib/components/map/gpx-layer/GPXLayerPopup';
     import { getSymbolKey, symbols } from '$lib/assets/symbols';
+    import { selection } from '$lib/logic/selection';
+    import { map } from '$lib/components/map/map';
+    import { fileActions, pasteSelection } from '$lib/logic/file-actions';
 
     let {
         node,
@@ -66,9 +56,9 @@
 
     let singleSelection = $derived($selection.size === 1);
 
-    let nodeColors: string[] = $derived.by(() => {
+    let nodeColors: string[] = []; /* $derived.by(() => {
         let colors: string[] = [];
-        if (node && map.current) {
+        if (node && map.value) {
             if (node instanceof GPXFile) {
                 let defaultColor = undefined;
 
@@ -102,23 +92,18 @@
             }
         }
         return colors;
-    });
+    });*/
 
     let symbolKey = $derived(node instanceof Waypoint ? getSymbolKey(node.sym) : undefined);
 
-    let openEditMetadata: boolean = $state(false);
+    let openEditMetadata: boolean = $derived(
-    let openEditStyle: boolean = $state(false);
+        editMetadata.current && singleSelection && $selection.has(item)
-
+    );
-    $effect(() => {
+    let openEditStyle: boolean = $derived(
-        openEditMetadata = editMetadata.current && singleSelection && $selection.has(item);
-    });
-
-    $effect(() => {
-        openEditStyle =
         editStyle.current &&
             $selection.has(item) &&
-            $selection.getSelected().findIndex((i) => i.getFullId() === item.getFullId()) === 0;
+            $selection.getSelected().findIndex((i) => i.getFullId() === item.getFullId()) === 0
-    });
+    );
 
     let hidden = $derived(
         item.level === ListLevel.WAYPOINTS ? node._data.hiddenWpt : node._data.hidden
@@ -166,7 +151,8 @@
             <span
                 class="w-full text-left truncate py-1 flex flex-row items-center {hidden
                     ? 'text-muted-foreground'
-                    : ''} {$cut && $copied?.some((i) => i.getFullId() === item.getFullId())
+                    : ''} {selection.cut &&
+                selection.copied?.some((i) => i.getFullId() === item.getFullId())
                     ? 'text-muted-foreground'
                     : ''}"
                 oncontextmenu={(e) => {
@@ -255,20 +241,20 @@
         {/if}
         <ContextMenu.Item
             onclick={() => {
-                if ($allHidden) {
+                // if ($allHidden) {
-                    dbUtils.setHiddenToSelection(false);
+                //     dbUtils.setHiddenToSelection(false);
-                } else {
+                // } else {
-                    dbUtils.setHiddenToSelection(true);
+                //     dbUtils.setHiddenToSelection(true);
-                }
+                // }
             }}
         >
-            {#if $allHidden}
+            <!-- {#if $allHidden}
                 <Eye size="16" class="mr-1" />
                 {i18n._('menu.unhide')}
             {:else}
                 <EyeOff size="16" class="mr-1" />
                 {i18n._('menu.hide')}
-            {/if}
+            {/if} -->
             <Shortcut key="H" ctrl={true} />
         </ContextMenu.Item>
         <ContextMenu.Separator />
@@ -276,7 +262,7 @@
             {#if item instanceof ListFileItem}
                 <ContextMenu.Item
                     disabled={!singleSelection}
-                    onclick={() => dbUtils.addNewTrack(item.getFileId())}
+                    onclick={() => fileActions.addNewTrack(item.getFileId())}
                 >
                     <Plus size="16" class="mr-1" />
                     {i18n._('menu.new_track')}
@@ -285,7 +271,8 @@
             {:else if item instanceof ListTrackItem}
                 <ContextMenu.Item
                     disabled={!singleSelection}
-                    onclick={() => dbUtils.addNewSegment(item.getFileId(), item.getTrackIndex())}
+                    onclick={() =>
+                        fileActions.addNewSegment(item.getFileId(), item.getTrackIndex())}
                 >
                     <Plus size="16" class="mr-1" />
                     {i18n._('menu.new_segment')}
@@ -294,7 +281,7 @@
             {/if}
         {/if}
         {#if item.level !== ListLevel.WAYPOINTS}
-            <ContextMenu.Item onclick={selectAll}>
+            <ContextMenu.Item onclick={() => selection.selectAll()}>
                 <FileStack size="16" class="mr-1" />
                 {i18n._('menu.select_all')}
                 <Shortcut key="A" ctrl={true} />
@@ -306,26 +293,26 @@
             <Shortcut key="⏎" ctrl={true} />
         </ContextMenu.Item>
         <ContextMenu.Separator />
-        <ContextMenu.Item onclick={dbUtils.duplicateSelection}>
+        <ContextMenu.Item onclick={fileActions.duplicateSelection}>
             <Copy size="16" class="mr-1" />
             {i18n._('menu.duplicate')}
             <Shortcut key="D" ctrl={true} /></ContextMenu.Item
         >
         {#if orientation === 'vertical'}
-            <ContextMenu.Item onclick={copySelection}>
+            <ContextMenu.Item onclick={() => selection.copySelection()}>
                 <ClipboardCopy size="16" class="mr-1" />
                 {i18n._('menu.copy')}
                 <Shortcut key="C" ctrl={true} />
             </ContextMenu.Item>
-            <ContextMenu.Item onclick={cutSelection}>
+            <ContextMenu.Item onclick={() => selection.cutSelection()}>
                 <Scissors size="16" class="mr-1" />
                 {i18n._('menu.cut')}
                 <Shortcut key="X" ctrl={true} />
             </ContextMenu.Item>
             <ContextMenu.Item
-                disabled={$copied === undefined ||
+                disabled={selection.copied === undefined ||
-                    $copied.length === 0 ||
+                    selection.copied.length === 0 ||
-                    !allowedPastes[$copied[0].level].includes(item.level)}
+                    !allowedPastes[selection.copied[0].level].includes(item.level)}
                 onclick={pasteSelection}
             >
                 <ClipboardPaste size="16" class="mr-1" />
@@ -334,7 +321,7 @@
             </ContextMenu.Item>
         {/if}
         <ContextMenu.Separator />
-        <ContextMenu.Item onclick={dbUtils.deleteSelection}>
+        <ContextMenu.Item onclick={fileActions.deleteSelection}>
             {#if item instanceof ListFileItem}
                 <FileX size="16" class="mr-1" />
                 {i18n._('menu.close')}

website/src/lib/components/file-list/FileListNodeStore.svelte

@@ -2,10 +2,10 @@
     import CollapsibleTree from '$lib/components/collapsible-tree/CollapsibleTree.svelte';
     import FileListNode from '$lib/components/file-list/FileListNode.svelte';
 
-    import type { GPXFileWithStatistics } from '$lib/db';
     import { getContext } from 'svelte';
     import type { Readable } from 'svelte/store';
     import { ListFileItem } from './file-list';
+    import type { GPXFileWithStatistics } from '$lib/logic/statistics';
 
     let {
         file,

website/src/lib/components/file-list/file-list.ts

@@ -1,9 +1,3 @@
-// import { dbUtils, getFile } from '$lib/db';
-// import { freeze } from 'immer';
-// import { GPXFile, Track, TrackSegment, Waypoint } from 'gpx';
-// import { selection } from './Selection';
-// import { newGPXFile } from '$lib/stores';
-
 export enum ListLevel {
     ROOT,
     FILE,

website/src/lib/components/map/Map.svelte

@@ -4,11 +4,10 @@
     import 'mapbox-gl/dist/mapbox-gl.css';
     import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
     import { Button } from '$lib/components/ui/button';
-    import { settings } from '$lib/logic/settings.svelte';
     import { i18n } from '$lib/i18n.svelte';
     import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
     import { page } from '$app/state';
-    import { map } from '$lib/components/map/utils.svelte';
+    import { map } from '$lib/components/map/map';
 
     let {
         accessToken = PUBLIC_MAPBOX_TOKEN,
@@ -29,9 +28,6 @@
     let webgl2Supported = $state(true);
     let embeddedApp = $state(false);
 
-    const { distanceUnits, elevationProfile, treeFileView, bottomPanelSize, rightPanelSize } =
-        settings;
-
     onMount(() => {
         let gl = document.createElement('canvas').getContext('webgl2');
         if (!gl) {
@@ -52,23 +48,12 @@
             language = 'en';
         }
 
-        map.init(PUBLIC_MAPBOX_TOKEN, language, distanceUnits.value, hash, geocoder, geolocate);
+        map.init(PUBLIC_MAPBOX_TOKEN, language, hash, geocoder, geolocate);
     });
 
     onDestroy(() => {
         map.destroy();
     });
-
-    $effect(() => {
-        if (
-            !treeFileView.value ||
-            !elevationProfile.value ||
-            bottomPanelSize.value ||
-            rightPanelSize.value
-        ) {
-            map.resize();
-        }
-    });
 </script>
 
 <div class={className}>

website/src/lib/components/map/MapPopup.svelte

@@ -3,20 +3,32 @@
     import WaypointPopup from '$lib/components/map/gpx-layer/WaypointPopup.svelte';
     import TrackpointPopup from '$lib/components/map/gpx-layer/TrackpointPopup.svelte';
     import OverpassPopup from '$lib/components/map/layer-control/OverpassPopup.svelte';
-    import type { PopupItem } from '$lib/components/map/map.svelte';
+    import type { PopupItem } from '$lib/components/map/map-popup';
+    import type { Writable } from 'svelte/store';
 
-    let { item, container = null }: { item: PopupItem | null; container: HTMLDivElement | null } =
+    let {
+        item,
+        onContainerReady,
+    }: { item: Writable<PopupItem | null>; onContainerReady: (div: HTMLDivElement) => void } =
         $props();
+
+    let container: HTMLDivElement | null = $state(null);
+
+    $effect(() => {
+        if (container) {
+            onContainerReady(container);
+        }
+    });
 </script>
 
 <div bind:this={container}>
-    {#if item}
+    {#if $item}
-        {#if item.item instanceof Waypoint}
+        {#if $item.item instanceof Waypoint}
-            <WaypointPopup waypoint={item} />
+            <WaypointPopup waypoint={$item} />
-        {:else if item.item instanceof TrackPoint}
+        {:else if $item.item instanceof TrackPoint}
-            <TrackpointPopup trackpoint={item} />
+            <TrackpointPopup trackpoint={$item} />
         {:else}
-            <OverpassPopup poi={item} />
+            <OverpassPopup poi={$item} />
         {/if}
     {/if}
 </div>

website/src/lib/components/map/custom-control/CustomControl.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import CustomControl from './CustomControl';
-    import { map } from '$lib/components/map/utils.svelte';
+    import { map } from '$lib/components/map/map';
     import { onMount, type Snippet } from 'svelte';
 
     let {

website/src/lib/components/map/gpx-layer/CopyCoordinates.svelte

@@ -10,7 +10,7 @@
         class: className = '',
     }: {
         coordinates: Coordinates;
-        onCopy: () => void;
+        onCopy?: () => void;
         class?: string;
     } = $props();
 </script>

website/src/lib/components/map/gpx-layer/DistanceMarkers.ts

@@ -1,9 +1,8 @@
-import { settings } from '$lib/db';
+import { settings } from '$lib/logic/settings';
-import { gpxStatistics } from '$lib/stores';
 import type { GeoJSONSource } from 'mapbox-gl';
 import { get } from 'svelte/store';
 
-// const { distanceMarkers, distanceUnits } = settings;
+const { distanceMarkers, distanceUnits } = settings;
 
 const stops = [
     [100, 0],

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

@@ -1,56 +1,41 @@
 <script lang="ts">
-    import { map, gpxLayers } from '$lib/stores';
+    import { gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
-    import { GPXLayer } from './GPXLayer';
+    import { onMount } from 'svelte';
-    import { fileObservers } from '$lib/db';
+    // import { map, gpxLayers } from '$lib/stores';
-    import { DistanceMarkers } from './DistanceMarkers';
+    // import { GPXLayer } from './gpx-layer';
-    import { StartEndMarkers } from './StartEndMarkers';
+    // import { DistanceMarkers } from './DistanceMarkers';
-    import { onDestroy } from 'svelte';
+    // import { StartEndMarkers } from './StartEndMarkers';
-    import { createPopups, removePopups } from './GPXLayerPopup';
+    // import { onDestroy } from 'svelte';
+    // import { createPopups, removePopups } from './GPXLayerPopup';
 
-    let distanceMarkers: DistanceMarkers | undefined = undefined;
+    // let distanceMarkers = $derived(map.current ? new DistanceMarkers(map.current) : undefined);
-    let startEndMarkers: StartEndMarkers | undefined = undefined;
+    // let startEndMarkers = $derived(map.current ? new StartEndMarkers(map.current) : undefined);
 
-    $: if ($map && $fileObservers) {
+    // $: if ($map) {
-        // remove layers for deleted files
+    //     if (distanceMarkers) {
-        gpxLayers.forEach((layer, fileId) => {
+    //         distanceMarkers.remove();
-            if (!$fileObservers.has(fileId)) {
+    //     }
-                layer.remove();
+    //     if (startEndMarkers) {
-                gpxLayers.delete(fileId);
+    //         startEndMarkers.remove();
-            } else if ($map !== layer.map) {
+    //     }
-                layer.updateMap($map);
+    //     createPopups($map);
-            }
+    //     distanceMarkers = new DistanceMarkers($map);
-        });
+    //     startEndMarkers = new StartEndMarkers($map);
-        // add layers for new files
+    // }
-        $fileObservers.forEach((file, fileId) => {
-            if (!gpxLayers.has(fileId)) {
-                gpxLayers.set(fileId, new GPXLayer($map, fileId, file));
-            }
-        });
-    }
 
-    $: if ($map) {
+    // onDestroy(() => {
-        if (distanceMarkers) {
+    //     removePopups();
-            distanceMarkers.remove();
+    //     if (distanceMarkers) {
-        }
+    //         distanceMarkers.remove();
-        if (startEndMarkers) {
+    //         distanceMarkers = undefined;
-            startEndMarkers.remove();
+    //     }
-        }
+    //     if (startEndMarkers) {
-        createPopups($map);
+    //         startEndMarkers.remove();
-        distanceMarkers = new DistanceMarkers($map);
+    //         startEndMarkers = undefined;
-        startEndMarkers = new StartEndMarkers($map);
+    //     }
-    }
+    // });
 
-    onDestroy(() => {
+    onMount(() => {
-        gpxLayers.forEach((layer) => layer.remove());
+        gpxLayers.init();
-        gpxLayers.clear();
-        removePopups();
-        if (distanceMarkers) {
-            distanceMarkers.remove();
-            distanceMarkers = undefined;
-        }
-        if (startEndMarkers) {
-            startEndMarkers.remove();
-            startEndMarkers = undefined;
-        }
     });
 </script>

website/src/lib/components/map/gpx-layer/TrackpointPopup.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
     import type { TrackPoint } from 'gpx';
-    import type { PopupItem } from '$lib/components/map/map.svelte';
     import CopyCoordinates from '$lib/components/map/gpx-layer/CopyCoordinates.svelte';
     import * as Card from '$lib/components/ui/card';
     import WithUnits from '$lib/components/WithUnits.svelte';
     import { Compass, Mountain, Timer } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
+    import type { PopupItem } from '$lib/components/map/map';
 
     let { trackpoint }: { trackpoint: PopupItem<TrackPoint> } = $props();
 </script>

website/src/lib/components/map/gpx-layer/WaypointPopup.svelte

@@ -3,16 +3,16 @@
     import { Button } from '$lib/components/ui/button';
     import Shortcut from '$lib/components/Shortcut.svelte';
     import CopyCoordinates from '$lib/components/map/gpx-layer/CopyCoordinates.svelte';
-    import { deleteWaypoint } from './GPXLayerPopup';
     import WithUnits from '$lib/components/WithUnits.svelte';
     import { Dot, ExternalLink, Trash2 } from '@lucide/svelte';
-    import { tool, Tool } from '$lib/components/toolbar/utils.svelte';
+    import { currentTool, Tool } from '$lib/components/toolbar/tools';
     import { getSymbolKey, symbols } from '$lib/assets/symbols';
     import { i18n } from '$lib/i18n.svelte';
     import sanitizeHtml from 'sanitize-html';
     import type { Waypoint } from 'gpx';
-    import type { PopupItem } from '$lib/components/map/map.svelte';
     import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+    import type { PopupItem } from '$lib/components/map/map';
+    import { fileActions } from '$lib/logic/file-actions';
 
     export let waypoint: PopupItem<Waypoint>;
 
@@ -80,11 +80,15 @@
         </ScrollArea>
         <div class="mt-2 flex flex-col gap-1">
             <CopyCoordinates coordinates={waypoint.item.attributes} />
-            {#if tool.current === Tool.WAYPOINT}
+            {#if $currentTool === Tool.WAYPOINT}
                 <Button
                     class="w-full px-2 py-1 h-8 justify-start"
                     variant="outline"
-                    onclick={() => deleteWaypoint(waypoint.fileId, waypoint.item._data.index)}
+                    onclick={() => {
+                        if (waypoint.fileId) {
+                            fileActions.deleteWaypoint(waypoint.fileId, waypoint.item._data.index);
+                        }
+                    }}
                 >
                     <Trash2 size="16" class="mr-1" />
                     {i18n._('menu.delete')}

website/src/lib/components/map/gpx-layer/gpx-layer-popup.ts

@@ -1,5 +1,4 @@
-import { dbUtils } from '$lib/db';
+import { MapPopup } from '$lib/components/map/map-popup';
-import { MapPopup } from '$lib/components/map/map.svelte';
 
 export let waypointPopup: MapPopup | null = null;
 export let trackpointPopup: MapPopup | null = null;
@@ -38,7 +37,3 @@ export function removePopups() {
         trackpointPopup = null;
     }
 }
-
-export function deleteWaypoint(fileId: string, waypointIndex: number) {
-    dbUtils.applyToFile(fileId, (file) => file.replaceWaypoints(waypointIndex, waypointIndex, []));
-}

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

@@ -1,8 +1,7 @@
-import { currentTool, map, splitAs, Tool } from '$lib/stores';
-import { settings, type GPXFileWithStatistics, dbUtils } from '$lib/db';
 import { get, type Readable } from 'svelte/store';
 import mapboxgl from 'mapbox-gl';
-import { waypointPopup, deleteWaypoint, trackpointPopup } from './GPXLayerPopup';
+import { map } from '$lib/components/map/map';
+import { waypointPopup, trackpointPopup } from './gpx-layer-popup';
 import {
     ListTrackSegmentItem,
     ListWaypointItem,
@@ -19,9 +18,16 @@ import {
     setPointerCursor,
     setScissorsCursor,
 } from '$lib/utils';
-import { selectedWaypoint } from '$lib/components/toolbar/tools/waypoint/utils.svelte';
+import { selectedWaypoint } from '$lib/components/toolbar/tools/waypoint/waypoint';
 import { MapPin, Square } from 'lucide-static';
 import { getSymbolKey, symbols } from '$lib/assets/symbols';
+import type { GPXFileWithStatistics } from '$lib/logic/statistics';
+import { selection } from '$lib/logic/selection';
+import { settings } from '$lib/logic/settings';
+import { currentTool, Tool } from '$lib/components/toolbar/tools';
+import { fileActionManager } from '$lib/logic/file-action-manager';
+import { fileActions } from '$lib/logic/file-actions';
+import { splitAs } from '$lib/components/toolbar/tools/scissors/scissors';
 
 const colors = [
     '#ff0000',
@@ -81,10 +87,9 @@ function getMarkerForSymbol(symbol: string | undefined, layerColor: string) {
     </svg>`;
 }
 
-// const { directionMarkers, treeFileView, defaultOpacity, defaultWidth } = settings;
+const { directionMarkers, treeFileView, defaultOpacity, defaultWidth } = settings;
 
 export class GPXLayer {
-    map: mapboxgl.Map;
     fileId: string;
     file: Readable<GPXFileWithStatistics | undefined>;
     layerColor: string;
@@ -100,15 +105,18 @@ export class GPXLayer {
     layerOnClickBinded: (e: any) => void = this.layerOnClick.bind(this);
     layerOnContextMenuBinded: (e: any) => void = this.layerOnContextMenu.bind(this);
 
-    constructor(
+    constructor(fileId: string, file: Readable<GPXFileWithStatistics | undefined>) {
-        map: mapboxgl.Map,
-        fileId: string,
-        file: Readable<GPXFileWithStatistics | undefined>
-    ) {
-        this.map = map;
         this.fileId = fileId;
         this.file = file;
         this.layerColor = getColor();
+        this.unsubscribe.push(
+            map.subscribe(($map) => {
+                if ($map) {
+                    $map.on('style.import.load', this.updateBinded);
+                    this.update();
+                }
+            })
+        );
         this.unsubscribe.push(file.subscribe(this.updateBinded));
         this.unsubscribe.push(
             selection.subscribe(($selection) => {
@@ -135,13 +143,12 @@ export class GPXLayer {
             })
         );
         this.draggable = get(currentTool) === Tool.WAYPOINT;
-
-        this.map.on('style.import.load', this.updateBinded);
     }
 
     update() {
+        const _map = get(map);
         let file = get(this.file)?.file;
-        if (!file) {
+        if (!_map || !file) {
             return;
         }
 
@@ -155,18 +162,18 @@ export class GPXLayer {
         }
 
         try {
-            let source = this.map.getSource(this.fileId);
+            let source = _map.getSource(this.fileId);
             if (source) {
                 source.setData(this.getGeoJSON());
             } else {
-                this.map.addSource(this.fileId, {
+                _map.addSource(this.fileId, {
                     type: 'geojson',
                     data: this.getGeoJSON(),
                 });
             }
 
-            if (!this.map.getLayer(this.fileId)) {
+            if (!_map.getLayer(this.fileId)) {
-                this.map.addLayer({
+                _map.addLayer({
                     id: this.fileId,
                     type: 'line',
                     source: this.fileId,
@@ -181,16 +188,16 @@ export class GPXLayer {
                     },
                 });
 
-                this.map.on('click', this.fileId, this.layerOnClickBinded);
+                _map.on('click', this.fileId, this.layerOnClickBinded);
-                this.map.on('contextmenu', this.fileId, this.layerOnContextMenuBinded);
+                _map.on('contextmenu', this.fileId, this.layerOnContextMenuBinded);
-                this.map.on('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
+                _map.on('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
-                this.map.on('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
+                _map.on('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
-                this.map.on('mousemove', this.fileId, this.layerOnMouseMoveBinded);
+                _map.on('mousemove', this.fileId, this.layerOnMouseMoveBinded);
             }
 
             if (get(directionMarkers)) {
-                if (!this.map.getLayer(this.fileId + '-direction')) {
+                if (!_map.getLayer(this.fileId + '-direction')) {
-                    this.map.addLayer(
+                    _map.addLayer(
                         {
                             id: this.fileId + '-direction',
                             type: 'symbol',
@@ -212,12 +219,12 @@ export class GPXLayer {
                                 'text-halo-color': 'white',
                             },
                         },
-                        this.map.getLayer('distance-markers') ? 'distance-markers' : undefined
+                        _map.getLayer('distance-markers') ? 'distance-markers' : undefined
                     );
                 }
             } else {
-                if (this.map.getLayer(this.fileId + '-direction')) {
+                if (_map.getLayer(this.fileId + '-direction')) {
-                    this.map.removeLayer(this.fileId + '-direction');
+                    _map.removeLayer(this.fileId + '-direction');
                 }
             }
 
@@ -228,7 +235,7 @@ export class GPXLayer {
                 }
             });
 
-            this.map.setFilter(
+            _map.setFilter(
                 this.fileId,
                 [
                     'any',
@@ -240,8 +247,8 @@ export class GPXLayer {
                 ],
                 { validate: false }
             );
-            if (this.map.getLayer(this.fileId + '-direction')) {
+            if (_map.getLayer(this.fileId + '-direction')) {
-                this.map.setFilter(
+                _map.setFilter(
                     this.fileId + '-direction',
                     [
                         'any',
@@ -299,7 +306,7 @@ export class GPXLayer {
                         }
 
                         if (get(currentTool) === Tool.WAYPOINT && e.shiftKey) {
-                            deleteWaypoint(this.fileId, marker._waypoint._data.index);
+                            fileActions.deleteWaypoint(this.fileId, marker._waypoint._data.index);
                             e.stopPropagation();
                             return;
                         }
@@ -312,11 +319,11 @@ export class GPXLayer {
                                     false
                                 )
                             ) {
-                                addSelectItem(
+                                selection.addSelectItem(
                                     new ListWaypointItem(this.fileId, marker._waypoint._data.index)
                                 );
                             } else {
-                                selectItem(
+                                selection.selectItem(
                                     new ListWaypointItem(this.fileId, marker._waypoint._data.index)
                                 );
                             }
@@ -336,7 +343,7 @@ export class GPXLayer {
                         resetCursor();
                         marker.getElement().style.cursor = '';
                         getElevation([marker._waypoint]).then((ele) => {
-                            dbUtils.applyToFile(this.fileId, (file) => {
+                            fileActionManager.applyToFile(this.fileId, (file) => {
                                 let latLng = marker.getLngLat();
                                 let wpt = file.wpt[marker._waypoint._data.index];
                                 wpt.setCoordinates({
@@ -361,36 +368,31 @@ export class GPXLayer {
 
         this.markers.forEach((marker) => {
             if (!marker._waypoint._data.hidden) {
-                marker.addTo(this.map);
+                marker.addTo(_map);
             } else {
                 marker.remove();
             }
         });
     }
 
-    updateMap(map: mapboxgl.Map) {
-        this.map = map;
-        this.map.on('style.import.load', this.updateBinded);
-        this.update();
-    }
-
     remove() {
-        if (get(map)) {
+        const _map = get(map);
-            this.map.off('click', this.fileId, this.layerOnClickBinded);
+        if (_map) {
-            this.map.off('contextmenu', this.fileId, this.layerOnContextMenuBinded);
+            _map.off('click', this.fileId, this.layerOnClickBinded);
-            this.map.off('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
+            _map.off('contextmenu', this.fileId, this.layerOnContextMenuBinded);
-            this.map.off('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
+            _map.off('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
-            this.map.off('mousemove', this.fileId, this.layerOnMouseMoveBinded);
+            _map.off('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
-            this.map.off('style.import.load', this.updateBinded);
+            _map.off('mousemove', this.fileId, this.layerOnMouseMoveBinded);
+            _map.off('style.import.load', this.updateBinded);
 
-            if (this.map.getLayer(this.fileId + '-direction')) {
+            if (_map.getLayer(this.fileId + '-direction')) {
-                this.map.removeLayer(this.fileId + '-direction');
+                _map.removeLayer(this.fileId + '-direction');
             }
-            if (this.map.getLayer(this.fileId)) {
+            if (_map.getLayer(this.fileId)) {
-                this.map.removeLayer(this.fileId);
+                _map.removeLayer(this.fileId);
             }
-            if (this.map.getSource(this.fileId)) {
+            if (_map.getSource(this.fileId)) {
-                this.map.removeSource(this.fileId);
+                _map.removeSource(this.fileId);
             }
         }
 
@@ -404,13 +406,17 @@ export class GPXLayer {
     }
 
     moveToFront() {
-        if (this.map.getLayer(this.fileId)) {
+        const _map = get(map);
-            this.map.moveLayer(this.fileId);
+        if (!_map) {
+            return;
         }
-        if (this.map.getLayer(this.fileId + '-direction')) {
+        if (_map.getLayer(this.fileId)) {
-            this.map.moveLayer(
+            _map.moveLayer(this.fileId);
+        }
+        if (_map.getLayer(this.fileId + '-direction')) {
+            _map.moveLayer(
                 this.fileId + '-direction',
-                this.map.getLayer('distance-markers') ? 'distance-markers' : undefined
+                _map.getLayer('distance-markers') ? 'distance-markers' : undefined
             );
         }
     }
@@ -468,7 +474,7 @@ export class GPXLayer {
                 new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)
             )
         ) {
-            dbUtils.split(splitAs.current, this.fileId, trackIndex, segmentIndex, {
+            fileActions.split(get(splitAs), this.fileId, trackIndex, segmentIndex, {
                 lat: e.lngLat.lat,
                 lon: e.lngLat.lng,
             });
@@ -492,9 +498,9 @@ export class GPXLayer {
         }
 
         if (e.originalEvent.ctrlKey || e.originalEvent.metaKey) {
-            addSelectItem(item);
+            selection.addSelectItem(item);
         } else {
-            selectItem(item);
+            selection.selectItem(item);
         }
     }
 

website/src/lib/components/map/gpx-layer/gpx-layers.ts

@@ -0,0 +1,38 @@
+import { GPXFileStateCollectionObserver } from '$lib/logic/file-state';
+import { GPXLayer } from './gpx-layer';
+
+export class GPXLayerCollection {
+    private _layers: Map<string, GPXLayer>;
+    private _fileStateCollectionObserver: GPXFileStateCollectionObserver | null = null;
+
+    constructor() {
+        this._layers = new Map<string, GPXLayer>();
+    }
+
+    init() {
+        if (this._fileStateCollectionObserver) {
+            return;
+        }
+        this._fileStateCollectionObserver = new GPXFileStateCollectionObserver(
+            (fileId, fileState) => {
+                const layer = new GPXLayer(fileId, fileState);
+                this._layers.set(fileId, layer);
+            },
+            (fileId) => {
+                const layer = this._layers.get(fileId);
+                if (layer) {
+                    layer.remove();
+                    this._layers.delete(fileId);
+                }
+            },
+            () => {
+                this._layers.forEach((layer) => {
+                    layer.remove();
+                });
+                this._layers.clear();
+            }
+        );
+    }
+}
+
+export const gpxLayers = new GPXLayerCollection();

website/src/lib/components/map/layer-control/CustomLayers.svelte

@@ -18,12 +18,12 @@
         Layers2,
     } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
-    import { settings } from '$lib/db';
     import { defaultBasemap, type CustomLayer } from '$lib/assets/layers';
-    import { map } from '$lib/stores';
     import { onDestroy, onMount } from 'svelte';
     import Sortable from 'sortablejs/Sortable';
-    import { customBasemapUpdate } from './utils.svelte';
+    import { customBasemapUpdate } from './utils';
+    import { settings } from '$lib/logic/settings';
+    import { map } from '$lib/components/map/map';
 
     const {
         customLayers,
@@ -312,10 +312,10 @@
             <div class="flex flex-row items-center gap-2" data-id={id}>
                 <Move size="12" />
                 <span class="grow">{$customLayers[id].name}</span>
-                <Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
+                <Button variant="outline" onclick={() => (selectedLayerId = id)} class="p-1 h-7">
                     <Pencil size="16" />
                 </Button>
-                <Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
+                <Button variant="outline" onclick={() => deleteLayer(id)} class="p-1 h-7">
                     <Trash2 size="16" />
                 </Button>
             </div>
@@ -338,10 +338,10 @@
             <div class="flex flex-row items-center gap-2" data-id={id}>
                 <Move size="12" />
                 <span class="grow">{$customLayers[id].name}</span>
-                <Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
+                <Button variant="outline" onclick={() => (selectedLayerId = id)} class="p-1 h-7">
                     <Pencil size="16" />
                 </Button>
-                <Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
+                <Button variant="outline" onclick={() => deleteLayer(id)} class="p-1 h-7">
                     <Trash2 size="16" />
                 </Button>
             </div>
@@ -373,7 +373,7 @@
                         />
                         {#if tileUrls.length > 1}
                             <Button
-                                on:click={() =>
+                                onclick={() =>
                                     (tileUrls = tileUrls.filter((_, index) => index !== i))}
                                 variant="outline"
                                 class="p-1 h-8"
@@ -383,7 +383,7 @@
                         {/if}
                         {#if i === tileUrls.length - 1}
                             <Button
-                                on:click={() => (tileUrls = [...tileUrls, ''])}
+                                onclick={() => (tileUrls = [...tileUrls, ''])}
                                 variant="outline"
                                 class="p-1 h-8"
                             >
@@ -416,16 +416,16 @@
                 </RadioGroup.Root>
                 {#if selectedLayerId}
                     <div class="mt-2 flex flex-row gap-2">
-                        <Button variant="outline" on:click={createLayer} class="grow">
+                        <Button variant="outline" onclick={createLayer} class="grow">
                             <Save size="16" class="mr-1" />
                             {i18n._('layers.custom_layers.update')}
                         </Button>
-                        <Button variant="outline" on:click={() => (selectedLayerId = undefined)}>
+                        <Button variant="outline" onclick={() => (selectedLayerId = undefined)}>
                             <CircleX size="16" />
                         </Button>
                     </div>
                 {:else}
-                    <Button variant="outline" class="mt-2" on:click={createLayer}>
+                    <Button variant="outline" class="mt-2" onclick={createLayer}>
                         <CirclePlus size="16" class="mr-1" />
                         {i18n._('layers.custom_layers.create')}
                     </Button>

website/src/lib/components/map/layer-control/LayerControl.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
     import CustomControl from '$lib/components/map/custom-control/CustomControl.svelte';
     import LayerTree from './LayerTree.svelte';
-    // import { OverpassLayer } from './OverpassLayer';
+    import { OverpassLayer } from './OverpassLayer';
     import { Separator } from '$lib/components/ui/separator';
     import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
     import { Layers } from '@lucide/svelte';
     import { basemaps, defaultBasemap, overlays } from '$lib/assets/layers';
-    import { settings } from '$lib/logic/settings.svelte';
+    import { settings } from '$lib/logic/settings';
-    import { map } from '$lib/components/map/utils.svelte';
+    import { map } from '$lib/components/map/map';
-    import { customBasemapUpdate, getLayers } from './utils.svelte';
+    import { customBasemapUpdate, getLayers } from './utils';
     import type { ImportSpecification, StyleSpecification } from 'mapbox-gl';
 
     let container: HTMLDivElement;
-    // let overpassLayer: OverpassLayer;
+    let overpassLayer: OverpassLayer;
 
     const {
         currentBasemap,
@@ -27,17 +27,17 @@
     } = settings;
 
     function setStyle() {
-        if (!map.value) {
+        if (!$map) {
             return;
         }
-        let basemap = basemaps.hasOwnProperty(currentBasemap.value)
+        let basemap = basemaps.hasOwnProperty($currentBasemap)
-            ? basemaps[currentBasemap.value]
+            ? basemaps[$currentBasemap]
-            : (customLayers.value[currentBasemap.value]?.value ?? basemaps[defaultBasemap]);
+            : ($customLayers[$currentBasemap] ?? basemaps[defaultBasemap]);
-        map.value.removeImport('basemap');
+        $map.removeImport('basemap');
         if (typeof basemap === 'string') {
-            map.value.addImport({ id: 'basemap', url: basemap }, 'overlays');
+            $map.addImport({ id: 'basemap', url: basemap }, 'overlays');
         } else {
-            map.value.addImport(
+            $map.addImport(
                 {
                     id: 'basemap',
                     url: '',
@@ -49,23 +49,21 @@
     }
 
     $effect(() => {
-        if (map.value && (currentBasemap.value || customBasemapUpdate.value)) {
+        if ($map && ($currentBasemap || $customBasemapUpdate)) {
             setStyle();
         }
     });
 
     function addOverlay(id: string) {
-        if (!map.value) {
+        if (!$map) {
             return;
         }
         try {
-            let overlay = customLayers.value.hasOwnProperty(id)
+            let overlay = $customLayers.hasOwnProperty(id) ? $customLayers[id].value : overlays[id];
-                ? customLayers.value[id].value
-                : overlays[id];
             if (typeof overlay === 'string') {
-                map.value.addImport({ id, url: overlay });
+                $map.addImport({ id, url: overlay });
             } else {
-                if (opacities.value.hasOwnProperty(id)) {
+                if ($opacities.hasOwnProperty(id)) {
                     overlay = {
                         ...overlay,
                         layers: (overlay as StyleSpecification).layers.map((layer) => {
@@ -73,13 +71,13 @@
                                 if (!layer.paint) {
                                     layer.paint = {};
                                 }
-                                layer.paint['raster-opacity'] = opacities.value[id];
+                                layer.paint['raster-opacity'] = $opacities[id];
                             }
                             return layer;
                         }),
                     };
                 }
-                map.value.addImport({
+                $map.addImport({
                     id,
                     url: '',
                     data: overlay as StyleSpecification,
@@ -91,13 +89,13 @@
     }
 
     function updateOverlays() {
-        if (map.value && currentOverlays.value && opacities.value) {
+        if ($map && $currentOverlays && $opacities) {
-            let overlayLayers = getLayers(currentOverlays.value);
+            let overlayLayers = getLayers($currentOverlays);
             try {
                 let activeOverlays =
-                    map.value
+                    $map
                         .getStyle()
-                        ?.imports?.reduce(
+                        .imports?.reduce(
                             (
                                 acc: Record<string, ImportSpecification>,
                                 imprt: ImportSpecification
@@ -113,7 +111,7 @@
                         ) || {};
                 let toRemove = Object.keys(activeOverlays).filter((id) => !overlayLayers[id]);
                 toRemove.forEach((id) => {
-                    map.value?.removeImport(id);
+                    $map?.removeImport(id);
                 });
                 let toAdd = Object.entries(overlayLayers)
                     .filter(([id, selected]) => selected && !activeOverlays.hasOwnProperty(id))
@@ -128,19 +126,19 @@
     }
 
     $effect(() => {
-        if (map.value && currentOverlays.value && opacities.value) {
+        if ($map && $currentOverlays && $opacities) {
             updateOverlays();
         }
     });
 
-    // map.onLoad((map: mapboxgl.Map) => {
+    map.onLoad((_map: mapboxgl.Map) => {
-    //     if (overpassLayer) {
+        if (overpassLayer) {
-    //         overpassLayer.remove();
+            overpassLayer.remove();
-    //     }
+        }
-    //     overpassLayer = new OverpassLayer(map);
+        overpassLayer = new OverpassLayer(_map);
-    //     overpassLayer.add();
+        overpassLayer.add();
-    //     map.on('style.import.load', updateOverlays);
+        _map.on('style.import.load', updateOverlays);
-    // });
+    });
 
     let open = $state(false);
     function openLayerControl() {
@@ -185,34 +183,34 @@
                 <div class="h-fit">
                     <div class="p-2">
                         <LayerTree
-                            layerTree={selectedBasemapTree.value}
+                            layerTree={$selectedBasemapTree}
                             name="basemaps"
-                            selected={currentBasemap.value}
+                            selected={$currentBasemap}
                             onselect={(value) => {
-                                previousBasemap.value = currentBasemap.value;
+                                $previousBasemap = $currentBasemap;
-                                currentBasemap.value = value;
+                                $currentBasemap = value;
                             }}
                         />
                     </div>
                     <Separator class="w-full" />
                     <div class="p-2">
-                        {#if currentOverlays.value}
+                        {#if $currentOverlays}
                             <LayerTree
-                                layerTree={selectedOverlayTree.value}
+                                layerTree={$selectedOverlayTree}
                                 name="overlays"
                                 multiple={true}
-                                bind:checked={currentOverlays.value}
+                                bind:checked={$currentOverlays}
                             />
                         {/if}
                     </div>
                     <Separator class="w-full" />
                     <div class="p-2">
-                        {#if currentOverpassQueries.value}
+                        {#if $currentOverpassQueries}
                             <LayerTree
-                                layerTree={selectedOverpassTree.value}
+                                layerTree={$selectedOverpassTree}
                                 name="overpass"
                                 multiple={true}
-                                bind:checked={currentOverpassQueries.value}
+                                bind:checked={$currentOverpassQueries}
                             />
                         {/if}
                     </div>

website/src/lib/components/map/layer-control/LayerControlSettings.svelte

@@ -14,11 +14,11 @@
         overlayTree,
         overpassTree,
     } from '$lib/assets/layers';
-    import { getLayers, isSelected, toggle } from '$lib/components/map/layer-control/utils.svelte';
+    import { getLayers, isSelected, toggle } from '$lib/components/map/layer-control/utils';
-    import { settings } from '$lib/db';
     import { i18n } from '$lib/i18n.svelte';
-    import { map } from '$lib/components/map/map.svelte';
+    import { map } from '$lib/components/map/map';
     import CustomLayers from './CustomLayers.svelte';
+    import { settings } from '$lib/logic/settings';
 
     const {
         selectedBasemapTree,
@@ -48,7 +48,8 @@
         }
     }
 
-    $: if ($selectedBasemapTree && $currentBasemap) {
+    $effect(() => {
+        if ($selectedBasemapTree && $currentBasemap) {
             if (!isSelected($selectedBasemapTree, $currentBasemap)) {
                 if (!isSelected($selectedBasemapTree, defaultBasemap)) {
                     $selectedBasemapTree = toggle($selectedBasemapTree, defaultBasemap);
@@ -56,8 +57,10 @@
                 $currentBasemap = defaultBasemap;
             }
         }
+    });
 
-    $: if ($selectedOverlayTree && $currentOverlays) {
+    $effect(() => {
+        if ($selectedOverlayTree && $currentOverlays) {
             let overlayLayers = getLayers($currentOverlays);
             let toRemove = Object.entries(overlayLayers).filter(
                 ([id, checked]) => checked && !isSelected($selectedOverlayTree, id)
@@ -71,6 +74,7 @@
                 });
             }
         }
+    });
 </script>
 
 <Sheet.Root bind:open>
@@ -164,11 +168,12 @@
                                         onValueChange={(value) => {
                                             if (selectedOverlay) {
                                                 if (
-                                                    map.current &&
+                                                    $map &&
+                                                    $currentOverlays &&
                                                     isSelected($currentOverlays, selectedOverlay)
                                                 ) {
                                                     try {
-                                                        map.current.removeImport(selectedOverlay);
+                                                        $map.removeImport(selectedOverlay);
                                                     } catch (e) {
                                                         // No reliable way to check if the map is ready to remove sources and layers
                                                     }

website/src/lib/components/map/layer-control/LayerTreeNode.svelte

@@ -4,9 +4,9 @@
     import { Checkbox } from '$lib/components/ui/checkbox';
     import CollapsibleTreeNode from '$lib/components/collapsible-tree/CollapsibleTreeNode.svelte';
     import { type LayerTreeType } from '$lib/assets/layers';
-    import { anySelectedLayer } from './utils.svelte';
+    import { anySelectedLayer } from './utils';
     import { i18n } from '$lib/i18n.svelte';
-    import { settings } from '$lib/logic/settings.svelte';
+    import { settings } from '$lib/logic/settings';
 
     let {
         name,
@@ -70,8 +70,8 @@
                         />
                     {/if}
                     <Label for="{name}-{id}" class="flex flex-row items-center gap-1">
-                        {#if customLayers.value.hasOwnProperty(id)}
+                        {#if $customLayers.hasOwnProperty(id)}
-                            {customLayers.value[id].name}
+                            {$customLayers[id].name}
                         {:else}
                             {i18n._(`layers.label.${id}`)}
                         {/if}

website/src/lib/components/map/layer-control/OverpassLayer.ts

@@ -1,12 +1,13 @@
 import { SphericalMercator } from '@mapbox/sphericalmercator';
-import { getLayers } from './utils.svelte';
+import { getLayers } from './utils';
 import { get, writable } from 'svelte/store';
 import { liveQuery } from 'dexie';
-import { db, settings } from '$lib/db';
 import { overpassQueryData } from '$lib/assets/layers';
-import { MapPopup } from '$lib/components/map/map.svelte';
+import { MapPopup } from '$lib/components/map/map-popup';
+import { settings } from '$lib/logic/settings';
+import { db } from '$lib/db';
 
-// const { currentOverpassQueries } = settings;
+const { currentOverpassQueries } = settings;
 
 const mercator = new SphericalMercator({
     size: 256,
@@ -60,10 +61,12 @@ export class OverpassLayer {
 
     queryIfNeeded() {
         if (this.map.getZoom() >= this.minZoom) {
-            const bounds = this.map.getBounds().toArray();
+            const bounds = this.map.getBounds()?.toArray();
+            if (bounds) {
                 this.query([bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]]);
             }
         }
+    }
 
     update() {
         this.loadIcons();

website/src/lib/components/map/layer-control/OverpassPopup.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
     import * as Card from '$lib/components/ui/card';
     import { Button } from '$lib/components/ui/button';
-    import { selection } from '$lib/components/file-list/Selection';
     import { PencilLine, MapPin } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
-    import { dbUtils } from '$lib/db';
-    import type { PopupItem } from '$lib/components/MapPopup';
     import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
     import type { WaypointType } from 'gpx';
+    import type { PopupItem } from '$lib/components/map/map';
+    import { fileActions } from '$lib/logic/file-actions';
+    import { selection } from '$lib/logic/selection';
 
     export let poi: PopupItem<any>;
 
@@ -43,7 +43,7 @@
                 },
             };
         }
-        dbUtils.addOrUpdateWaypoint(wpt);
+        fileActions.addOrUpdateWaypoint(wpt);
     }
 </script>
 
@@ -94,12 +94,7 @@
                 {/each}
             </div>
         </ScrollArea>
-        <Button
+        <Button class="mt-2" variant="outline" disabled={$selection.size === 0} onclick={addToFile}>
-            class="mt-2"
-            variant="outline"
-            disabled={$selection.size === 0}
-            on:click={addToFile}
-        >
             <MapPin size="16" class="mr-1" />
             {i18n._('toolbar.waypoint.add')}
         </Button>

website/src/lib/components/map/layer-control/utils.ts

@@ -1,4 +1,5 @@
 import type { LayerTreeType } from '$lib/assets/layers';
+import { writable } from 'svelte/store';
 
 export function anySelectedLayer(node: LayerTreeType) {
     return (
@@ -54,6 +55,4 @@ export function toggle(node: LayerTreeType, id: string) {
     return node;
 }
 
-export const customBasemapUpdate = $state({
+export const customBasemapUpdate = writable(0);
-    value: 0,
-});

website/src/lib/components/map/map-popup.ts

@@ -0,0 +1,84 @@
+import { TrackPoint, Waypoint } from 'gpx';
+import mapboxgl from 'mapbox-gl';
+import { mount, tick } from 'svelte';
+import { get, writable, type Writable } from 'svelte/store';
+import MapPopupComponent from '$lib/components/map/MapPopup.svelte';
+
+export type PopupItem<T = Waypoint | TrackPoint | any> = {
+    item: T;
+    fileId?: string;
+    hide?: () => void;
+};
+
+export class MapPopup {
+    map: mapboxgl.Map;
+    popup: mapboxgl.Popup;
+    item: Writable<PopupItem | null> = writable(null);
+    component: ReturnType<typeof mount>;
+    maybeHideBinded = this.maybeHide.bind(this);
+
+    constructor(map: mapboxgl.Map, options?: mapboxgl.PopupOptions) {
+        this.map = map;
+        this.popup = new mapboxgl.Popup(options);
+        this.component = mount(MapPopupComponent, {
+            target: document.body,
+            props: {
+                item: this.item,
+                onContainerReady: (container: HTMLDivElement) => {
+                    this.popup.setDOMContent(container);
+                },
+            },
+        });
+    }
+
+    setItem(item: PopupItem | null) {
+        if (item) item.hide = () => this.hide();
+        this.item.set(item);
+        if (item === null) {
+            this.hide();
+        } else {
+            tick().then(() => this.show());
+        }
+    }
+
+    show() {
+        const item = get(this.item);
+        if (item === null) {
+            this.hide();
+            return;
+        }
+        this.popup.setLngLat(this.getCoordinates()).addTo(this.map);
+        this.map.on('mousemove', this.maybeHideBinded);
+    }
+
+    maybeHide(e: mapboxgl.MapMouseEvent) {
+        const item = get(this.item);
+        if (item === null) {
+            this.hide();
+            return;
+        }
+        if (this.map.project(this.getCoordinates()).dist(this.map.project(e.lngLat)) > 60) {
+            this.hide();
+        }
+    }
+
+    hide() {
+        this.popup.remove();
+        this.map.off('mousemove', this.maybeHideBinded);
+    }
+
+    remove() {
+        this.popup.remove();
+        this.component.$destroy();
+    }
+
+    getCoordinates() {
+        const item = get(this.item);
+        if (item === null) {
+            return new mapboxgl.LngLat(0, 0);
+        }
+        return item.item instanceof Waypoint || item.item instanceof TrackPoint
+            ? item.item.getCoordinates()
+            : new mapboxgl.LngLat(item.item.lon, item.item.lat);
+    }
+}

website/src/lib/components/map/map.ts

@@ -1,10 +1,9 @@
-import { TrackPoint, Waypoint, type Coordinates } from 'gpx';
 import mapboxgl from 'mapbox-gl';
-import { tick, mount } from 'svelte';
-// import MapPopupComponent from '$lib/components/map/MapPopup.svelte';
-import { get } from 'svelte/store';
-// import { fileObservers } from '$lib/db';
 import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
+import { get, writable, type Writable } from 'svelte/store';
+import { settings } from '$lib/logic/settings';
+
+const { treeFileView, elevationProfile, bottomPanelSize, rightPanelSize, distanceUnits } = settings;
 
 let fitBoundsOptions: mapboxgl.MapOptions['fitBoundsOptions'] = {
     maxZoom: 15,
@@ -13,13 +12,17 @@ let fitBoundsOptions: mapboxgl.MapOptions['fitBoundsOptions'] = {
 };
 
 export class MapboxGLMap {
-    private _map: mapboxgl.Map | null = $state(null);
+    private _map: Writable<mapboxgl.Map | null> = writable(null);
     private _onLoadCallbacks: ((map: mapboxgl.Map) => void)[] = [];
+    private _unsubscribes: (() => void)[] = [];
+
+    subscribe(run: (value: mapboxgl.Map | null) => void, invalidate?: () => void) {
+        return this._map.subscribe(run, invalidate);
+    }
 
     init(
         accessToken: string,
         language: string,
-        distanceUnits: 'metric' | 'imperial' | 'nautical',
         hash: boolean,
         geocoder: boolean,
         geolocate: boolean
@@ -126,7 +129,7 @@ export class MapboxGLMap {
             );
         }
         const scaleControl = new mapboxgl.ScaleControl({
-            unit: distanceUnits,
+            unit: get(distanceUnits),
         });
         map.addControl(scaleControl);
         map.on('style.load', () => {
@@ -160,46 +163,58 @@ export class MapboxGLMap {
             });
         });
         map.on('load', () => {
-            this._map = map; // only set the store after the map has loaded
+            this._map.set(map); // only set the store after the map has loaded
             window._map = map; // entry point for extensions
-            scaleControl.setUnit(distanceUnits);
+            scaleControl.setUnit(get(distanceUnits));
 
             this._onLoadCallbacks.forEach((callback) => callback(map));
             this._onLoadCallbacks = [];
         });
+
+        this._unsubscribes.push(treeFileView.subscribe(() => this.resize()));
+        this._unsubscribes.push(elevationProfile.subscribe(() => this.resize()));
+        this._unsubscribes.push(bottomPanelSize.subscribe(() => this.resize()));
+        this._unsubscribes.push(rightPanelSize.subscribe(() => this.resize()));
+        this._unsubscribes.push(
+            distanceUnits.subscribe((units) => {
+                scaleControl.setUnit(units);
+            })
+        );
     }
 
     onLoad(callback: (map: mapboxgl.Map) => void) {
-        if (this._map) {
+        const map = get(this._map);
-            callback(this._map);
+        if (map) {
+            callback(map);
         } else {
             this._onLoadCallbacks.push(callback);
         }
     }
 
     destroy() {
-        if (this._map) {
+        const map = get(this._map);
-            this._map.remove();
+        if (map) {
-            this._map = null;
+            map.remove();
+            this._map.set(null);
         }
-    }
+        this._unsubscribes.forEach((unsubscribe) => unsubscribe());
-
+        this._unsubscribes = [];
-    get value(): mapboxgl.Map | null {
-        return this._map;
     }
 
     resize() {
-        if (this._map) {
+        const map = get(this._map);
-            this._map.resize();
+        if (map) {
+            map.resize();
         }
     }
 
     toggle3D() {
-        if (this._map) {
+        const map = get(this._map);
-            if (this._map.getPitch() === 0) {
+        if (map) {
-                this._map.easeTo({ pitch: 70 });
+            if (map.getPitch() === 0) {
+                map.easeTo({ pitch: 70 });
             } else {
-                this._map.easeTo({ pitch: 0 });
+                map.easeTo({ pitch: 0 });
             }
         }
     }
@@ -207,15 +222,15 @@ export class MapboxGLMap {
 
 export const map = new MapboxGLMap();
 
-const targetMapBounds: {
+// const targetMapBounds: {
-    bounds: mapboxgl.LngLatBounds;
+//     bounds: mapboxgl.LngLatBounds;
-    ids: string[];
+//     ids: string[];
-    total: number;
+//     total: number;
-} = $state({
+// } = $state({
-    bounds: new mapboxgl.LngLatBounds([180, 90, -180, -90]),
+//     bounds: new mapboxgl.LngLatBounds([180, 90, -180, -90]),
-    ids: [],
+//     ids: [],
-    total: 0,
+//     total: 0,
-});
+// });
 
 // $effect(() => {
 //     if (
@@ -251,32 +266,32 @@ const targetMapBounds: {
 //     map.current.fitBounds(targetMapBounds.bounds, { padding: 80, linear: true, easing: () => 1 });
 // });
 
-export function initTargetMapBounds(ids: string[]) {
+// export function initTargetMapBounds(ids: string[]) {
-    targetMapBounds.bounds = new mapboxgl.LngLatBounds([180, 90, -180, -90]);
+//     targetMapBounds.bounds = new mapboxgl.LngLatBounds([180, 90, -180, -90]);
-    targetMapBounds.ids = ids;
+//     targetMapBounds.ids = ids;
-    targetMapBounds.total = ids.length;
+//     targetMapBounds.total = ids.length;
-}
+// }
 
-export function updateTargetMapBounds(
+// export function updateTargetMapBounds(
-    id: string,
+//     id: string,
-    bounds: { southWest: Coordinates; northEast: Coordinates }
+//     bounds: { southWest: Coordinates; northEast: Coordinates }
-) {
+// ) {
-    if (targetMapBounds.ids.indexOf(id) === -1) {
+//     if (targetMapBounds.ids.indexOf(id) === -1) {
-        return;
+//         return;
-    }
+//     }
 
-    if (
+//     if (
-        bounds.southWest.lat !== 90 ||
+//         bounds.southWest.lat !== 90 ||
-        bounds.southWest.lon !== 180 ||
+//         bounds.southWest.lon !== 180 ||
-        bounds.northEast.lat !== -90 ||
+//         bounds.northEast.lat !== -90 ||
-        bounds.northEast.lon !== -180
+//         bounds.northEast.lon !== -180
-    ) {
+//     ) {
-        // Avoid update for empty (new) files
+//         // Avoid update for empty (new) files
-        targetMapBounds.ids = targetMapBounds.ids.filter((x) => x !== id);
+//         targetMapBounds.ids = targetMapBounds.ids.filter((x) => x !== id);
-        targetMapBounds.bounds.extend(bounds.southWest);
+//         targetMapBounds.bounds.extend(bounds.southWest);
-        targetMapBounds.bounds.extend(bounds.northEast);
+//         targetMapBounds.bounds.extend(bounds.northEast);
-    }
+//     }
-}
+// }
 
 // export function centerMapOnSelection() {
 //     let selected = get(selection).getSelected();
@@ -308,77 +323,3 @@ export function updateTargetMapBounds(
 //         maxZoom: 15,
 //     });
 // }
-
-export type PopupItem<T = Waypoint | TrackPoint | any> = {
-    item: T;
-    fileId?: string;
-    hide?: () => void;
-};
-
-// export class MapPopup {
-//     map: mapboxgl.Map;
-//     popup: mapboxgl.Popup;
-//     item: PopupItem | null = $state(null);
-//     maybeHideBinded = this.maybeHide.bind(this);
-
-//     constructor(map: mapboxgl.Map, options?: mapboxgl.PopupOptions) {
-//         this.map = map;
-//         this.popup = new mapboxgl.Popup(options);
-
-//         let component = mount(MapPopupComponent, {
-//             target: document.body,
-//             props: {
-//                 item: this.item,
-//             },
-//         });
-
-//         tick().then(() => this.popup.setDOMContent(component.container));
-//     }
-
-//     setItem(item: PopupItem | null) {
-//         if (item) item.hide = () => this.hide();
-//         this.item = item;
-//         if (item === null) {
-//             this.hide();
-//         } else {
-//             tick().then(() => this.show());
-//         }
-//     }
-
-//     show() {
-//         if (this.item === null) {
-//             this.hide();
-//             return;
-//         }
-//         this.popup.setLngLat(this.getCoordinates()).addTo(this.map);
-//         this.map.on('mousemove', this.maybeHideBinded);
-//     }
-
-//     maybeHide(e: mapboxgl.MapMouseEvent) {
-//         if (this.item === null) {
-//             this.hide();
-//             return;
-//         }
-//         if (this.map.project(this.getCoordinates()).dist(this.map.project(e.lngLat)) > 60) {
-//             this.hide();
-//         }
-//     }
-
-//     hide() {
-//         this.popup.remove();
-//         this.map.off('mousemove', this.maybeHideBinded);
-//     }
-
-//     remove() {
-//         this.popup.remove();
-//     }
-
-//     getCoordinates() {
-//         if (this.item === null) {
-//             return new mapboxgl.LngLat(0, 0);
-//         }
-//         return this.item.item instanceof Waypoint || this.item.item instanceof TrackPoint
-//             ? this.item.item.getCoordinates()
-//             : new mapboxgl.LngLat(this.item.item.lon, this.item.item.lat);
-//     }
-// }

website/src/lib/components/map/street-view-control/StreetViewControl.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-    import { streetViewEnabled } from '$lib/components/map/street-view-control/utils.svelte';
+    import { streetViewEnabled } from '$lib/components/map/street-view-control/utils';
-    import { map } from '$lib/components/map/utils.svelte';
+    import { map } from '$lib/components/map/map';
     import CustomControl from '$lib/components/map/custom-control/CustomControl.svelte';
     import Tooltip from '$lib/components/Tooltip.svelte';
     import { Toggle } from '$lib/components/ui/toggle';
     import { PersonStanding, X } from '@lucide/svelte';
     import { MapillaryLayer } from './Mapillary';
     import { GoogleRedirect } from './Google';
-    import { settings } from '$lib/logic/settings.svelte';
+    import { settings } from '$lib/logic/settings';
     import { i18n } from '$lib/i18n.svelte';
     import { onMount } from 'svelte';
 
@@ -28,16 +28,16 @@
     });
 
     $effect(() => {
-        if (streetViewSource.value === 'mapillary') {
+        if ($streetViewSource === 'mapillary') {
             googleRedirect?.remove();
-            if (streetViewEnabled.current) {
+            if ($streetViewEnabled) {
                 mapillaryLayer?.add();
             } else {
                 mapillaryLayer?.remove();
             }
         } else {
             mapillaryLayer?.remove();
-            if (streetViewEnabled.current) {
+            if ($streetViewEnabled) {
                 googleRedirect?.add();
             } else {
                 googleRedirect?.remove();
@@ -49,7 +49,7 @@
 <CustomControl class="w-[29px] h-[29px] shrink-0">
     <Tooltip class="w-full h-full" side="left" label={i18n._('menu.toggle_street_view')}>
         <Toggle
-            bind:pressed={streetViewEnabled.current}
+            bind:pressed={$streetViewEnabled}
             class="w-full h-full rounded p-0"
             aria-label={i18n._('menu.toggle_street_view')}
         >

website/src/lib/components/map/street-view-control/utils.svelte.ts

@@ -1,3 +0,0 @@
-export const streetViewEnabled = $state({
-    current: false,
-});

website/src/lib/components/map/street-view-control/utils.ts

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const streetViewEnabled = writable(false);

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

@@ -1,7 +1,7 @@
 <script lang="ts">
     import ToolbarItem from '$lib/components/toolbar/ToolbarItem.svelte';
     import ToolbarItemMenu from '$lib/components/toolbar/ToolbarItemMenu.svelte';
-    import { Tool } from '$lib/components/toolbar/utils.svelte';
+    import { Tool } from '$lib/components/toolbar/tools';
     import {
         Group,
         CalendarClock,

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

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Button } from '$lib/components/ui/button';
     import * as Tooltip from '$lib/components/ui/tooltip/index.js';
-    import { tool, Tool } from '$lib/components/toolbar/utils.svelte';
+    import { tool, Tool } from '$lib/components/toolbar/tools';
     import type { Snippet } from 'svelte';
 
     let {

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Tool, tool } from '$lib/components/toolbar/utils.svelte';
+    import { Tool, tool } from '$lib/components/toolbar/tools';
     import * as Card from '$lib/components/ui/card';
     import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
     import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
@@ -13,7 +13,7 @@
     import RoutingControlPopup from '$lib/components/toolbar/tools/routing/RoutingControlPopup.svelte';
     import { onMount } from 'svelte';
     import mapboxgl from 'mapbox-gl';
-    import { settings } from '$lib/logic/settings.svelte';
+    import { settings } from '$lib/logic/settings';
 
     let {
         popupElement,

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

@@ -1,3 +1,5 @@
+import { writable, type Writable } from 'svelte/store';
+
 export enum Tool {
     ROUTING,
     WAYPOINT,
@@ -10,8 +12,4 @@ export enum Tool {
     CLEAN,
 }
 
-export const tool: {
+export const currentTool: Writable<Tool | null> = writable(null);
-    current: Tool | null;
-} = $state({
-    current: null,
-});

website/src/lib/components/toolbar/tools/Clean.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
     enum CleanType {
         INSIDE = 'inside',
         OUTSIDE = 'outside',
@@ -15,10 +15,10 @@
     import { onDestroy, onMount } from 'svelte';
     import { getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
     import { Trash2 } from '@lucide/svelte';
-    import { map } from '$lib/components/map/utils.svelte';
+    import { map } from '$lib/components/map/map';
     import type { GeoJSONSource } from 'mapbox-gl';
-    import { selection } from '$lib/logic/selection.svelte';
+    import { selection } from '$lib/logic/selection';
-    import { fileActions } from '$lib/logic/file-actions.svelte';
+    import { fileActions } from '$lib/logic/file-actions';
 
     let props: {
         class?: string;

website/src/lib/components/toolbar/tools/Elevation.svelte

@@ -2,11 +2,11 @@
     import { Button } from '$lib/components/ui/button';
     import Help from '$lib/components/Help.svelte';
     import { MountainSnow } from '@lucide/svelte';
-    import { map } from '$lib/components/map/utils.svelte';
+    import { map } from '$lib/components/map/map';
     import { i18n } from '$lib/i18n.svelte';
     import { getURLForLanguage } from '$lib/utils';
-    import { selection } from '$lib/logic/selection.svelte';
+    import { selection } from '$lib/logic/selection';
-    import { fileActions } from '$lib/logic/file-actions.svelte';
+    import { fileActions } from '$lib/logic/file-actions';
 
     let props: {
         class?: string;

website/src/lib/components/toolbar/tools/Extract.svelte

@@ -11,9 +11,9 @@
     import Help from '$lib/components/Help.svelte';
     import { i18n } from '$lib/i18n.svelte';
     import { getURLForLanguage } from '$lib/utils';
-    import { selection } from '$lib/logic/selection.svelte';
+    import { selection } from '$lib/logic/selection';
-    import { fileStateCollection } from '$lib/logic/file-state.svelte';
+    import { fileStateCollection } from '$lib/logic/file-state';
-    import { fileActions } from '$lib/logic/file-actions.svelte';
+    import { fileActions } from '$lib/logic/file-actions';
 
     let props: {
         class?: string;

website/src/lib/components/toolbar/tools/Merge.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
     enum MergeType {
         TRACES = 'traces',
         CONTENTS = 'contents',
@@ -17,9 +17,9 @@
     import { getURLForLanguage } from '$lib/utils';
     import Shortcut from '$lib/components/Shortcut.svelte';
     import { gpxStatistics } from '$lib/stores';
-    import { selection } from '$lib/logic/selection.svelte';
+    import { selection } from '$lib/logic/selection';
-    import { fileStateCollection } from '$lib/logic/file-state.svelte';
+    import { fileStateCollection } from '$lib/logic/file-state';
-    import { fileActions } from '$lib/logic/file-actions.svelte';
+    import { fileActions } from '$lib/logic/file-actions';
 
     let props: {
         class?: string;

website/src/lib/components/toolbar/tools/Reduce.svelte

@@ -11,13 +11,13 @@
     import { Funnel } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
     import WithUnits from '$lib/components/WithUnits.svelte';
-    import { map } from '$lib/components/map/utils.svelte';
+    import { map } from '$lib/components/map/map';
     import { onDestroy } from 'svelte';
     import { ramerDouglasPeucker, TrackPoint, type SimplifiedTrackPoint } from 'gpx';
     import { getURLForLanguage } from '$lib/utils';
     import type { GeoJSONSource } from 'mapbox-gl';
-    import { selection } from '$lib/logic/selection.svelte';
+    import { selection } from '$lib/logic/selection';
-    import { fileActions } from '$lib/logic/file-actions.svelte';
+    import { fileActions } from '$lib/logic/file-actions';
 
     let props: { class?: string } = $props();
 

website/src/lib/components/toolbar/tools/Time.svelte

@@ -24,10 +24,10 @@
     } from '$lib/components/file-list/file-list';
     import Help from '$lib/components/Help.svelte';
     import { getURLForLanguage } from '$lib/utils';
-    import { selection } from '$lib/logic/selection.svelte';
+    import { selection } from '$lib/logic/selection';
-    import { settings } from '$lib/logic/settings.svelte';
+    import { settings } from '$lib/logic/settings';
-    import { fileActions } from '$lib/logic/file-actions.svelte';
+    import { fileActions } from '$lib/logic/file-actions';
-    import { fileActionManager } from '$lib/logic/file-action-manager.svelte';
+    import { fileActionManager } from '$lib/logic/file-action-manager';
 
     let props: {
         class?: string;

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

@@ -35,11 +35,11 @@
     import { getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
     import { onDestroy, onMount } from 'svelte';
     import { TrackPoint } from 'gpx';
-    import { settings } from '$lib/logic/settings.svelte';
+    import { settings } from '$lib/logic/settings';
-    import { map } from '$lib/components/map/utils.svelte';
+    import { map } from '$lib/components/map/map';
-    import { fileStateCollection } from '$lib/logic/file-state.svelte';
+    import { fileStateCollection } from '$lib/logic/file-state';
-    import { selection } from '$lib/logic/selection.svelte';
+    import { selection } from '$lib/logic/selection';
-    import { fileActions, getFileIds, newGPXFile } from '$lib/logic/file-actions.svelte';
+    import { fileActions, getFileIds, newGPXFile } from '$lib/logic/file-actions';
 
     let {
         minimized = $bindable(false),
@@ -85,11 +85,11 @@
     // }
 
     let validSelection = $derived(
-        selection.value.hasAnyChildren(new ListRootItem(), true, ['waypoints'])
+        $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints'])
     );
 
     function createFileWithPoint(e: any) {
-        if (selection.value.size === 0) {
+        if ($selection.size === 0) {
             let file = newGPXFile();
             file.replaceTrackPoints(0, 0, 0, 0, [
                 new TrackPoint({
@@ -107,12 +107,12 @@
 
     onMount(() => {
         // setCrosshairCursor();
-        map.value?.on('click', createFileWithPoint);
+        $map?.on('click', createFileWithPoint);
     });
 
     onDestroy(() => {
         // resetCursor();
-        map.value?.off('click', createFileWithPoint);
+        $map?.off('click', createFileWithPoint);
 
         // routingControls.forEach((controls) => controls.destroy());
         // routingControls.clear();
@@ -233,7 +233,7 @@
                 variant="outline"
                 class="flex flex-row gap-1 text-xs px-2"
                 disabled={!validSelection}
-                onclick={dbUtils.createRoundTripForSelection}
+                onclick={fileActions.createRoundTripForSelection}
             >
                 <Repeat size="12" />{i18n._('toolbar.routing.round_trip.button')}
             </ButtonWithTooltip>

website/src/lib/components/toolbar/tools/routing/utils.svelte.ts

@@ -1,6 +1,6 @@
 import type { Coordinates } from 'gpx';
 import { TrackPoint, distance } from 'gpx';
-import { settings } from '$lib/logic/settings.svelte';
+import { settings } from '$lib/logic/settings';
 import { getElevation } from '$lib/utils';
 
 const { routing, routingProfile, privateRoads } = settings;

website/src/lib/components/toolbar/tools/scissors/Scissors.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { splitAs, SplitType } from '$lib/components/toolbar/tools/scissors/utils.svelte';
+    import { splitAs, SplitType } from '$lib/components/toolbar/tools/scissors/scissors';
     import Help from '$lib/components/Help.svelte';
     import { ListRootItem } from '$lib/components/file-list/file-list';
     import { Label } from '$lib/components/ui/label/index.js';
@@ -8,7 +8,7 @@
     import * as Select from '$lib/components/ui/select';
     import { Separator } from '$lib/components/ui/separator';
     import { gpxStatistics, slicedGPXStatistics } from '$lib/stores';
-    import { map } from '$lib/components/map/map.svelte';
+    import { map } from '$lib/components/map/map';
     import { get } from 'svelte/store';
     import { i18n } from '$lib/i18n.svelte';
     import { onDestroy, tick } from 'svelte';
@@ -16,7 +16,7 @@
     import { dbUtils } from '$lib/db';
     import { SplitControls } from './split-controls';
     import { getURLForLanguage } from '$lib/utils';
-    import { selection } from '$lib/logic/selection.svelte';
+    import { selection } from '$lib/logic/selection';
 
     let props: {
         class?: string;

website/src/lib/components/toolbar/tools/scissors/scissors.ts

@@ -0,0 +1,9 @@
+import { writable, type Writable } from 'svelte/store';
+
+export enum SplitType {
+    FILES = 'files',
+    TRACKS = 'tracks',
+    SEGMENTS = 'segments',
+}
+
+export let splitAs: Writable<SplitType> = writable(SplitType.FILES);

website/src/lib/components/toolbar/tools/scissors/split-controls.ts

@@ -3,10 +3,10 @@ import mapboxgl from 'mapbox-gl';
 import { dbUtils, getFile } from '$lib/db';
 import { ListTrackSegmentItem } from '$lib/components/file-list/file-list';
 import { gpxStatistics } from '$lib/stores';
-import { tool, Tool } from '$lib/components/toolbar/utils.svelte';
+import { tool, Tool } from '$lib/components/toolbar/tools';
-import { splitAs } from '$lib/components/toolbar/tools/scissors/utils.svelte';
+import { splitAs } from '$lib/components/toolbar/tools/scissors/scissors';
 import { Scissors } from 'lucide-static';
-import { applyToOrderedSelectedItemsFromFile, selection } from '$lib/logic/selection.svelte';
+import { selection } from '$lib/logic/selection';
 
 export class SplitControls {
     active: boolean = false;
@@ -53,7 +53,7 @@ export class SplitControls {
     updateControls() {
         // Update the markers when the files change
         let controlIndex = 0;
-        applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+        selection.applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
             let file = getFile(fileId);
 
             if (file) {

website/src/lib/components/toolbar/tools/scissors/utils.svelte.ts

@@ -1,9 +0,0 @@
-export enum SplitType {
-    FILES = 'files',
-    TRACKS = 'tracks',
-    SEGMENTS = 'segments',
-}
-
-export let splitAs = $state({
-    current: SplitType.FILES,
-});

website/src/lib/components/toolbar/tools/waypoint/Waypoint.svelte

@@ -14,8 +14,8 @@
     import { getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
     import { MapPin, CircleX, Save } from '@lucide/svelte';
     import { getSymbolKey, symbols } from '$lib/assets/symbols';
-    import { selection } from '$lib/logic/selection.svelte';
+    import { selection } from '$lib/logic/selection';
-    import { selectedWaypoint } from './utils.svelte';
+    import { selectedWaypoint } from './waypoint';
 
     let props: {
         class?: string;

website/src/lib/components/toolbar/tools/waypoint/waypoint.ts

@@ -1,16 +1,27 @@
 import { ListWaypointItem } from '$lib/components/file-list/file-list';
-import { fileStateCollection } from '$lib/logic/file-state.svelte';
+import { fileStateCollection } from '$lib/logic/file-state';
-import { selection } from '$lib/logic/selection.svelte';
+import { selection } from '$lib/logic/selection';
-import { settings } from '$lib/logic/settings.svelte';
+import { settings } from '$lib/logic/settings';
 import type { Waypoint } from 'gpx';
+import { get, writable, type Writable } from 'svelte/store';
 
 export class WaypointSelection {
-    private _selection: [Waypoint, string] | undefined;
+    private _selection: Writable<[Waypoint, string] | undefined>;
 
     constructor() {
-        this._selection = $derived.by(() => {
+        this._selection = writable(undefined);
-            if (settings.treeFileView.value && selection.value.size === 1) {
+        settings.treeFileView.subscribe(() => {
-                let item = selection.value.getSelected()[0];
+            this.update();
+        });
+        selection.subscribe(() => {
+            this.update();
+        });
+    }
+
+    update() {
+        this._selection.update(() => {
+            if (get(settings.treeFileView) && get(selection).size === 1) {
+                let item = get(selection).getSelected()[0];
                 if (item instanceof ListWaypointItem) {
                     let file = fileStateCollection.getFile(item.getFileId());
                     let waypoint = file?.wpt[item.getWaypointIndex()];
@@ -24,15 +35,17 @@ export class WaypointSelection {
     }
 
     reset() {
-        this._selection = undefined;
+        this._selection.set(undefined);
     }
 
     get wpt(): Waypoint | undefined {
-        return this._selection ? this._selection[0] : undefined;
+        const selection = get(this._selection);
+        return selection ? selection[0] : undefined;
     }
 
     get fileId(): string | undefined {
-        return this._selection ? this._selection[1] : undefined;
+        const selection = get(this._selection);
+        return selection ? selection[1] : undefined;
     }
 
     // TODO update the waypoint data if the file changes

website/src/lib/logic/file-action-manager.ts

@@ -2,37 +2,70 @@ import { db, type Database } from '$lib/db';
 import { liveQuery } from 'dexie';
 import type { GPXFile } from 'gpx';
 import { applyPatches, produceWithPatches, type Patch, type WritableDraft } from 'immer';
-import { fileStateCollection, type GPXFileStateCollection } from '$lib/logic/file-state.svelte';
+import {
+    fileStateCollection,
+    GPXFileStateCollectionObserver,
+    type GPXFileStateCollection,
+} from '$lib/logic/file-state';
+import {
+    derived,
+    get,
+    writable,
+    type Readable,
+    type Unsubscriber,
+    type Writable,
+} from 'svelte/store';
 
 const MAX_PATCHES = 100;
 
 export class FileActionManager {
     private _db: Database;
     private _files: Map<string, GPXFile>;
-    private _patchIndex: number;
+    private _fileSubscriptions: Map<string, Unsubscriber>;
-    private _patchMinIndex: number;
+    private _fileStateCollectionObserver: GPXFileStateCollectionObserver;
-    private _patchMaxIndex: number;
+    private _patchIndex: Writable<number>;
+    private _patchMinIndex: Writable<number>;
+    private _patchMaxIndex: Writable<number>;
+    private _canUndo: Readable<boolean>;
+    private _canRedo: Readable<boolean>;
 
     constructor(db: Database, fileStateCollection: GPXFileStateCollection) {
         this._db = db;
-
+        this._files = new Map();
-        this._files = $derived.by(() => {
+        this._fileSubscriptions = new Map();
-            let files = new Map<string, GPXFile>();
+        this._fileStateCollectionObserver = new GPXFileStateCollectionObserver(
-            fileStateCollection.files.forEach((state, id) => {
+            (fileId, fileState) => {
-                if (state.file) {
+                this._fileSubscriptions.set(
-                    files.set(id, state.file);
+                    fileId,
+                    fileState.subscribe((fileWithStatistics) => {
+                        if (fileWithStatistics) {
+                            this._files.set(fileId, fileWithStatistics.file);
                         }
-            });
+                    })
-            return files;
+                );
-        });
+            },
+            (fileId) => {
+                let unsubscribe = this._fileSubscriptions.get(fileId);
+                if (unsubscribe) {
+                    unsubscribe();
+                    this._fileSubscriptions.delete(fileId);
+                }
+                this._files.delete(fileId);
+            },
+            () => {
+                this._fileSubscriptions.forEach((unsubscribe) => unsubscribe());
+                this._fileSubscriptions.clear();
+                this._files.clear();
+            }
+        );
 
-        this._patchIndex = $state(-1);
+        this._patchIndex = writable(-1);
-        this._patchMinIndex = $state(0);
+        this._patchMinIndex = writable(0);
-        this._patchMaxIndex = $state(0);
+        this._patchMaxIndex = writable(0);
 
         liveQuery(() => db.settings.get('patchIndex')).subscribe((value) => {
             if (value !== undefined) {
-                this._patchIndex = value;
+                this._patchIndex.set(value);
             }
         });
         liveQuery(() =>
@@ -44,58 +77,51 @@ export class FileActionManager {
                 }
             })
         ).subscribe((value) => {
-            this._patchMinIndex = value.min;
+            this._patchMinIndex.set(value.min);
-            this._patchMaxIndex = value.max;
+            this._patchMaxIndex.set(value.max);
         });
-    }
 
-    async store(patch: Patch[], inversePatch: Patch[]) {
+        this._canUndo = derived(
-        this._db.patches.where(':id').above(this._patchIndex).delete(); // Delete all patches after the current patch to avoid redoing them
+            [this._patchIndex, this._patchMinIndex],
-        if (this._patchMaxIndex - this._patchMinIndex + 1 > MAX_PATCHES) {
+            ([$patchIndex, $patchMinIndex]) => {
-            this._db.patches
+                return $patchIndex >= $patchMinIndex;
-                .where(':id')
+            }
-                .belowOrEqual(this._patchMaxIndex - MAX_PATCHES)
+        );
-                .delete();
+        this._canRedo = derived(
+            [this._patchIndex, this._patchMaxIndex],
+            ([$patchIndex, $patchMaxIndex]) => {
+                return $patchIndex < $patchMaxIndex - 1;
             }
-        this._db.transaction('rw', this._db.patches, this._db.settings, async () => {
-            let index = this._patchIndex + 1;
-            await this._db.patches.put(
-                {
-                    patch,
-                    inversePatch,
-                    index,
-                },
-                index
         );
-            await this._db.settings.put(index, 'patchIndex');
-        });
     }
 
-    get canUndo(): boolean {
+    get canUndo(): Readable<boolean> {
-        return this._patchIndex >= this._patchMinIndex;
+        return this._canUndo;
     }
 
-    get canRedo(): boolean {
+    get canRedo(): Readable<boolean> {
-        return this._patchIndex < this._patchMaxIndex - 1;
+        return this._canRedo;
     }
 
     undo() {
-        if (this.canUndo) {
+        if (get(this.canUndo)) {
-            this._db.patches.get(this._patchIndex).then((patch) => {
+            const patchIndex = get(this._patchIndex);
+            this._db.patches.get(patchIndex).then((patch) => {
                 if (patch) {
                     this.apply(patch.inversePatch);
-                    this._db.settings.put(this._patchIndex - 1, 'patchIndex');
+                    this._db.settings.put(patchIndex - 1, 'patchIndex');
                 }
             });
         }
     }
 
     redo() {
-        if (this.canRedo) {
+        if (get(this.canRedo)) {
-            this._db.patches.get(this._patchIndex + 1).then((patch) => {
+            const patchIndex = get(this._patchIndex) + 1;
+            this._db.patches.get(patchIndex).then((patch) => {
                 if (patch) {
                     this.apply(patch.patch);
-                    this._db.settings.put(this._patchIndex + 1, 'patchIndex');
+                    this._db.settings.put(patchIndex, 'patchIndex');
                 }
             });
         }
@@ -142,7 +168,7 @@ export class FileActionManager {
     applyGlobal(callback: (files: Map<string, GPXFile>) => void) {
         const [newFileCollection, patch, inversePatch] = produceWithPatches(this._files, callback);
 
-        this.store(patch, inversePatch);
+        this.storePatches(patch, inversePatch);
 
         return this.commitFileStateChange(newFileCollection, patch);
     }
@@ -160,7 +186,7 @@ export class FileActionManager {
             }
         );
 
-        this.store(patch, inversePatch);
+        this.storePatches(patch, inversePatch);
 
         return this.commitFileStateChange(newFileCollection, patch);
     }
@@ -188,10 +214,32 @@ export class FileActionManager {
             }
         );
 
-        this.store(patch, inversePatch);
+        this.storePatches(patch, inversePatch);
 
         return this.commitFileStateChange(newFileCollection, patch);
     }
+
+    async storePatches(patch: Patch[], inversePatch: Patch[]) {
+        this._db.patches.where(':id').above(get(this._patchIndex)).delete(); // Delete all patches after the current patch to avoid redoing them
+        if (get(this._patchMaxIndex) - get(this._patchMinIndex) + 1 > MAX_PATCHES) {
+            this._db.patches
+                .where(':id')
+                .belowOrEqual(get(this._patchMaxIndex) - MAX_PATCHES)
+                .delete();
+        }
+        this._db.transaction('rw', this._db.patches, this._db.settings, async () => {
+            let index = get(this._patchIndex) + 1;
+            await this._db.patches.put(
+                {
+                    patch,
+                    inversePatch,
+                    index,
+                },
+                index
+            );
+            await this._db.settings.put(index, 'patchIndex');
+        });
+    }
 }
 
 // Get the file ids of the files that have changed in the patch

website/src/lib/logic/file-actions.ts

@@ -1,8 +1,8 @@
-import { fileStateCollection } from '$lib/logic/file-state.svelte';
+import { fileStateCollection } from '$lib/logic/file-state';
-import { fileActionManager } from '$lib/logic/file-action-manager.svelte';
+import { fileActionManager } from '$lib/logic/file-action-manager';
-import { selection } from '$lib/logic/selection.svelte';
+import { selection } from '$lib/logic/selection';
-import { tool, Tool } from '$lib/components/toolbar/utils.svelte';
+import { currentTool, Tool } from '$lib/components/toolbar/tools';
-import type { SplitType } from '$lib/components/toolbar/tools/scissors/utils.svelte';
+import type { SplitType } from '$lib/components/toolbar/tools/scissors/scissors';
 import {
     ListFileItem,
     ListLevel,
@@ -27,13 +27,14 @@ import {
     type LineStyleExtension,
     type WaypointType,
 } from 'gpx';
+import { get } from 'svelte/store';
 
 // Generate unique file ids, different from the ones in the database
 export function getFileIds(n: number) {
     let ids = [];
     for (let index = 0; ids.length < n; index++) {
         let id = `gpx-${index}`;
-        if (!fileStateCollection.files.has(id)) {
+        if (!fileStateCollection.getFile(id)) {
             ids.push(id);
         }
     }
@@ -46,9 +47,8 @@ export function newGPXFile() {
     let file = new GPXFile();
 
     let maxNewFileNumber = 0;
-    fileStateCollection.files.forEach((fileState) => {
+    fileStateCollection.forEach((fileId, file) => {
-        let file = fileState.file;
+        if (file.metadata.name && file.metadata.name.startsWith(newFileName)) {
-        if (file && file.metadata.name && file.metadata.name.startsWith(newFileName)) {
             let number = parseInt(file.metadata.name.split(' ').pop() ?? '0');
             if (!isNaN(number) && number > maxNewFileNumber) {
                 maxNewFileNumber = number;
@@ -738,6 +738,11 @@ export const fileActions = {
         //     }
         // });
     },
+    deleteWaypoint: (fileId: string, waypointIndex: number) => {
+        fileActionManager.applyToFile(fileId, (file) =>
+            file.replaceWaypoints(waypointIndex, waypointIndex, [])
+        );
+    },
     setStyleToSelection: (style: LineStyleExtension) => {
         // if (get(selection).size === 0) {
         //     return;
@@ -926,7 +931,7 @@ export function pasteSelection() {
         return;
     }
 
-    let selected = selection.value.getSelected();
+    let selected = get(selection).getSelected();
     if (selected.length === 0) {
         selected = [new ListRootItem()];
     }

website/src/lib/logic/file-state.ts

@@ -3,15 +3,16 @@ import { db, type Database } from '$lib/db';
 import { liveQuery } from 'dexie';
 import { GPXFile } from 'gpx';
 import { GPXStatisticsTree, type GPXFileWithStatistics } from '$lib/logic/statistics';
-import { settings } from '$lib/logic/settings.svelte';
+import { settings } from '$lib/logic/settings';
+import { get, writable, type Subscriber, type Writable } from 'svelte/store';
 
 // Observe a single file from the database, and maintain its statistics
 class GPXFileState {
-    private _file: GPXFileWithStatistics | undefined;
+    private _file: Writable<GPXFileWithStatistics | undefined>;
     private _subscription: { unsubscribe: () => void } | undefined;
 
     constructor(db: Database, fileId: string) {
-        this._file = $state(undefined);
+        this._file = writable(undefined);
         let first = true;
 
         this._subscription = liveQuery(() => db.files.get(fileId)).subscribe((value) => {
@@ -29,7 +30,7 @@ class GPXFileState {
                     first = false;
                 }
 
-                this._file = { file, statistics };
+                this._file.set({ file, statistics });
 
                 // if (get(selection).hasAnyChildren(new ListFileItem(id))) {
                 //     updateAllHidden();
@@ -38,29 +39,36 @@ class GPXFileState {
         });
     }
 
+    subscribe(run: Subscriber<GPXFileWithStatistics | undefined>, invalidate?: () => void) {
+        return this._file.subscribe(run, invalidate);
+    }
+
     destroy() {
         this._subscription?.unsubscribe();
         this._subscription = undefined;
-        this._file = undefined;
     }
 
     get file(): GPXFile | undefined {
-        return this._file?.file;
+        return get(this._file)?.file;
     }
 
     get statistics(): GPXStatisticsTree | undefined {
-        return this._file?.statistics;
+        return get(this._file)?.statistics;
     }
 }
 
 // Observe the file ids in the database, and maintain a map of file states for the corresponding files
 export class GPXFileStateCollection {
     private _db: Database;
-    private _files: Map<string, GPXFileState>;
+    private _files: Writable<Map<string, GPXFileState>>;
 
     constructor(db: Database) {
         this._db = db;
-        this._files = $state(new Map());
+        this._files = writable(new Map());
+    }
+
+    subscribe(run: Subscriber<Map<string, GPXFileState>>, invalidate?: () => void) {
+        return this._files.subscribe(run, invalidate);
     }
 
     initialize(fitBounds: boolean) {
@@ -72,57 +80,101 @@ export class GPXFileStateCollection {
                 // }
                 initialize = false;
             }
+            const currentFiles = get(this._files);
             // Find new files to observe
             let newFiles = dbFileIds
-                .filter((id) => !this._files.has(id))
+                .filter((id) => !currentFiles.has(id))
                 .sort((a, b) => parseInt(a.split('-')[1]) - parseInt(b.split('-')[1]));
             // Find deleted files to stop observing
-            let deletedFiles = Array.from(this._files.keys()).filter(
+            let deletedFiles = Array.from(currentFiles.keys()).filter(
                 (id) => !dbFileIds.find((fileId) => fileId === id)
             );
 
             if (newFiles.length > 0 || deletedFiles.length > 0) {
                 // Update the map of file states
-                let files = new Map(this._files);
+                this._files.update(($files) => {
                     newFiles.forEach((id) => {
-                    files.set(id, new GPXFileState(this._db, id));
+                        $files.set(id, new GPXFileState(this._db, id));
                     });
                     deletedFiles.forEach((id) => {
-                    files.get(id)?.destroy();
+                        $files.get(id)?.destroy();
-                    files.delete(id);
+                        $files.delete(id);
+                    });
+                    return $files;
                 });
-                this._files = files;
 
                 // Update the file order
-                let fileOrder = settings.fileOrder.value.filter((id) => !deletedFiles.includes(id));
+                let fileOrder = get(settings.fileOrder).filter((id) => !deletedFiles.includes(id));
                 newFiles.forEach((id) => {
                     if (!fileOrder.includes(id)) {
                         fileOrder.push(id);
                     }
                 });
-                settings.fileOrder.value = fileOrder;
+                settings.fileOrder.set(fileOrder);
             }
         });
     }
 
-    get files(): ReadonlyMap<string, GPXFileState> {
-        return this._files;
-    }
-
     get size(): number {
-        return this._files.size;
+        return get(this._files).size;
     }
 
     getFile(fileId: string): GPXFile | undefined {
-        let fileState = this._files.get(fileId);
+        let fileState = get(this._files).get(fileId);
         return fileState?.file;
     }
 
     getStatistics(fileId: string): GPXStatisticsTree | undefined {
-        let fileState = this._files.get(fileId);
+        let fileState = get(this._files).get(fileId);
         return fileState?.statistics;
     }
+
+    forEach(callback: (fileId: string, file: GPXFile) => void) {
+        get(this._files).forEach((fileState, fileId) => {
+            if (fileState.file) {
+                callback(fileId, fileState.file);
+            }
+        });
+    }
 }
 
 // Collection of all file states
 export const fileStateCollection = new GPXFileStateCollection(db);
+
+export type GPXFileStateCallback = (fileId: string, fileState: GPXFileState) => void;
+export class GPXFileStateCollectionObserver {
+    private _fileIds: Set<string>;
+    private _onFileAdded: GPXFileStateCallback;
+    private _onFileRemoved: (fileId: string) => void;
+    private _onDestroy: () => void;
+
+    constructor(
+        onFileAdded: GPXFileStateCallback,
+        onFileRemoved: (fileId: string) => void,
+        onDestroy: () => void
+    ) {
+        this._fileIds = new Set();
+        this._onFileAdded = onFileAdded;
+        this._onFileRemoved = onFileRemoved;
+        this._onDestroy = onDestroy;
+
+        fileStateCollection.subscribe((files) => {
+            this._fileIds.forEach((fileId) => {
+                if (!files.has(fileId)) {
+                    this._onFileRemoved(fileId);
+                    this._fileIds.delete(fileId);
+                }
+            });
+            files.forEach((file: GPXFileState, fileId: string) => {
+                if (!this._fileIds.has(fileId)) {
+                    this._onFileAdded(fileId, file);
+                    this._fileIds.add(fileId);
+                }
+            });
+        });
+    }
+
+    destroy() {
+        this._onDestroy();
+    }
+}

website/src/lib/logic/selection-tree.ts

@@ -0,0 +1,140 @@
+import type { ListItem } from '$lib/components/file-list/file-list';
+
+export class SelectionTreeType {
+    item: ListItem;
+    selected: boolean;
+    children: {
+        [key: string | number]: SelectionTreeType;
+    };
+    size: number = 0;
+
+    constructor(item: ListItem) {
+        this.item = item;
+        this.selected = false;
+        this.children = {};
+    }
+
+    clear() {
+        this.selected = false;
+        for (let key in this.children) {
+            this.children[key].clear();
+        }
+        this.size = 0;
+    }
+
+    _setOrToggle(item: ListItem, value?: boolean) {
+        if (item.level === this.item.level) {
+            let newSelected = value === undefined ? !this.selected : value;
+            if (this.selected !== newSelected) {
+                this.selected = newSelected;
+                this.size += this.selected ? 1 : -1;
+            }
+        } else {
+            let id = item.getIdAtLevel(this.item.level);
+            if (id !== undefined) {
+                if (!this.children.hasOwnProperty(id)) {
+                    this.children[id] = new SelectionTreeType(this.item.extend(id));
+                }
+                this.size -= this.children[id].size;
+                this.children[id]._setOrToggle(item, value);
+                this.size += this.children[id].size;
+            }
+        }
+    }
+
+    set(item: ListItem, value: boolean) {
+        this._setOrToggle(item, value);
+    }
+
+    toggle(item: ListItem) {
+        this._setOrToggle(item);
+    }
+
+    has(item: ListItem): boolean {
+        if (item.level === this.item.level) {
+            return this.selected;
+        } else {
+            let id = item.getIdAtLevel(this.item.level);
+            if (id !== undefined) {
+                if (this.children.hasOwnProperty(id)) {
+                    return this.children[id].has(item);
+                }
+            }
+        }
+        return false;
+    }
+
+    hasAnyParent(item: ListItem, self: boolean = true): boolean {
+        if (
+            this.selected &&
+            this.item.level <= item.level &&
+            (self || this.item.level < item.level)
+        ) {
+            return this.selected;
+        }
+        let id = item.getIdAtLevel(this.item.level);
+        if (id !== undefined) {
+            if (this.children.hasOwnProperty(id)) {
+                return this.children[id].hasAnyParent(item, self);
+            }
+        }
+        return false;
+    }
+
+    hasAnyChildren(item: ListItem, self: boolean = true, ignoreIds?: (string | number)[]): boolean {
+        if (
+            this.selected &&
+            this.item.level >= item.level &&
+            (self || this.item.level > item.level)
+        ) {
+            return this.selected;
+        }
+        let id = item.getIdAtLevel(this.item.level);
+        if (id !== undefined) {
+            if (ignoreIds === undefined || ignoreIds.indexOf(id) === -1) {
+                if (this.children.hasOwnProperty(id)) {
+                    return this.children[id].hasAnyChildren(item, self, ignoreIds);
+                }
+            }
+        } else {
+            for (let key in this.children) {
+                if (ignoreIds === undefined || ignoreIds.indexOf(key) === -1) {
+                    if (this.children[key].hasAnyChildren(item, self, ignoreIds)) {
+                        return true;
+                    }
+                }
+            }
+        }
+        return false;
+    }
+
+    getSelected(selection: ListItem[] = []): ListItem[] {
+        if (this.selected) {
+            selection.push(this.item);
+        }
+        for (let key in this.children) {
+            this.children[key].getSelected(selection);
+        }
+        return selection;
+    }
+
+    forEach(callback: (item: ListItem) => void) {
+        if (this.selected) {
+            callback(this.item);
+        }
+        for (let key in this.children) {
+            this.children[key].forEach(callback);
+        }
+    }
+
+    getChild(id: string | number): SelectionTreeType | undefined {
+        return this.children[id];
+    }
+
+    deleteChild(id: string | number) {
+        if (this.children.hasOwnProperty(id)) {
+            this.size -= this.children[id].size;
+            delete this.children[id];
+        }
+    }
+}

website/src/lib/logic/selection.svelte.ts

@@ -1,228 +0,0 @@
-import {
-    ListFileItem,
-    ListItem,
-    ListRootItem,
-    ListTrackItem,
-    ListTrackSegmentItem,
-    ListWaypointItem,
-    ListLevel,
-    sortItems,
-    ListWaypointsItem,
-} from '$lib/components/file-list/file-list';
-import { SelectionTreeType } from '$lib/logic/selection';
-import { fileStateCollection } from '$lib/logic/file-state.svelte';
-import { settings } from '$lib/logic/settings.svelte';
-import type { GPXFile } from 'gpx';
-
-export class Selection {
-    private _selection: SelectionTreeType;
-    private _copied: ListItem[] | undefined;
-    private _cut: boolean;
-
-    constructor() {
-        this._selection = $state(new SelectionTreeType(new ListRootItem()));
-        this._copied = $state(undefined);
-        this._cut = $state(false);
-    }
-
-    get value(): SelectionTreeType {
-        return this._selection;
-    }
-
-    selectItem(item: ListItem) {
-        let selection = new SelectionTreeType(new ListRootItem());
-        selection.set(item, true);
-        this._selection = selection;
-    }
-
-    selectFile(fileId: string) {
-        this.selectItem(new ListFileItem(fileId));
-    }
-
-    addSelectItem(item: ListItem) {
-        this._selection.toggle(item);
-    }
-
-    addSelectFile(fileId: string) {
-        this.addSelectItem(new ListFileItem(fileId));
-    }
-
-    selectAll() {
-        let item: ListItem = new ListRootItem();
-        this._selection.forEach((i) => {
-            item = i;
-        });
-        let selection = new SelectionTreeType(new ListRootItem());
-        if (item instanceof ListRootItem || item instanceof ListFileItem) {
-            fileStateCollection.files.forEach((_file, fileId) => {
-                selection.set(new ListFileItem(fileId), true);
-            });
-        } else if (item instanceof ListTrackItem) {
-            let file = fileStateCollection.getFile(item.getFileId());
-            if (file) {
-                file.trk.forEach((_track, trackId) => {
-                    selection.set(new ListTrackItem(item.getFileId(), trackId), true);
-                });
-            }
-        } else if (item instanceof ListTrackSegmentItem) {
-            let file = fileStateCollection.getFile(item.getFileId());
-            if (file) {
-                file.trk[item.getTrackIndex()].trkseg.forEach((_segment, segmentId) => {
-                    selection.set(
-                        new ListTrackSegmentItem(item.getFileId(), item.getTrackIndex(), segmentId),
-                        true
-                    );
-                });
-            }
-        } else if (item instanceof ListWaypointItem) {
-            let file = fileStateCollection.getFile(item.getFileId());
-            if (file) {
-                file.wpt.forEach((_waypoint, waypointId) => {
-                    selection.set(new ListWaypointItem(item.getFileId(), waypointId), true);
-                });
-            }
-        }
-        this._selection = selection;
-    }
-
-    set(items: ListItem[]) {
-        let selection = new SelectionTreeType(new ListRootItem());
-        items.forEach((item) => {
-            selection.set(item, true);
-        });
-        this._selection = selection;
-    }
-
-    update(updatedFiles: GPXFile[], deletedFileIds: string[]) {
-        // TODO do it the other way around: get all selected items, and check if they still exist?
-        // let removedItems: ListItem[] = [];
-        // applyToOrderedItemsFromFile(selection.value.getSelected(), (fileId, level, items) => {
-        //     let file = updatedFiles.find((file) => file._data.id === fileId);
-        //     if (file) {
-        //         items.forEach((item) => {
-        //             if (item instanceof ListTrackItem) {
-        //                 let newTrackIndex = file.trk.findIndex(
-        //                     (track) => track._data.trackIndex === item.getTrackIndex()
-        //                 );
-        //                 if (newTrackIndex === -1) {
-        //                     removedItems.push(item);
-        //                 }
-        //             } else if (item instanceof ListTrackSegmentItem) {
-        //                 let newTrackIndex = file.trk.findIndex(
-        //                     (track) => track._data.trackIndex === item.getTrackIndex()
-        //                 );
-        //                 if (newTrackIndex === -1) {
-        //                     removedItems.push(item);
-        //                 } else {
-        //                     let newSegmentIndex = file.trk[newTrackIndex].trkseg.findIndex(
-        //                         (segment) => segment._data.segmentIndex === item.getSegmentIndex()
-        //                     );
-        //                     if (newSegmentIndex === -1) {
-        //                         removedItems.push(item);
-        //                     }
-        //                 }
-        //             } else if (item instanceof ListWaypointItem) {
-        //                 let newWaypointIndex = file.wpt.findIndex(
-        //                     (wpt) => wpt._data.index === item.getWaypointIndex()
-        //                 );
-        //                 if (newWaypointIndex === -1) {
-        //                     removedItems.push(item);
-        //                 }
-        //             }
-        //         });
-        //     } else if (deletedFileIds.includes(fileId)) {
-        //         items.forEach((item) => {
-        //             removedItems.push(item);
-        //         });
-        //     }
-        // });
-        // if (removedItems.length > 0) {
-        //     selection.update(($selection) => {
-        //         removedItems.forEach((item) => {
-        //             if (item instanceof ListFileItem) {
-        //                 $selection.deleteChild(item.getFileId());
-        //             } else {
-        //                 $selection.set(item, false);
-        //             }
-        //         });
-        //         return $selection;
-        //     });
-        // }
-    }
-
-    getOrderedSelection(reverse: boolean = false): ListItem[] {
-        let selected: ListItem[] = [];
-        applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
-            selected.push(...items);
-        }, reverse);
-        return selected;
-    }
-
-    copySelection(): boolean {
-        let selected = this._selection.getSelected();
-        if (selected.length > 0) {
-            this._copied = selected;
-            this._cut = false;
-            return true;
-        }
-        return false;
-    }
-
-    cutSelection() {
-        if (this.copySelection()) {
-            this._cut = true;
-        }
-    }
-
-    resetCopied() {
-        this._copied = undefined;
-        this._cut = false;
-    }
-
-    get copied(): ListItem[] | undefined {
-        return this._copied;
-    }
-
-    get cut(): boolean {
-        return this._cut;
-    }
-}
-
-export const selection = new Selection();
-
-export function applyToOrderedItemsFromFile(
-    selectedItems: ListItem[],
-    callback: (fileId: string, level: ListLevel | undefined, items: ListItem[]) => void,
-    reverse: boolean = true
-) {
-    settings.fileOrder.value.forEach((fileId) => {
-        let level: ListLevel | undefined = undefined;
-        let items: ListItem[] = [];
-        selectedItems.forEach((item) => {
-            if (item.getFileId() === fileId) {
-                level = item.level;
-                if (
-                    item instanceof ListFileItem ||
-                    item instanceof ListTrackItem ||
-                    item instanceof ListTrackSegmentItem ||
-                    item instanceof ListWaypointsItem ||
-                    item instanceof ListWaypointItem
-                ) {
-                    items.push(item);
-                }
-            }
-        });
-
-        if (items.length > 0) {
-            sortItems(items, reverse);
-            callback(fileId, level, items);
-        }
-    });
-}
-
-export function applyToOrderedSelectedItemsFromFile(
-    callback: (fileId: string, level: ListLevel | undefined, items: ListItem[]) => void,
-    reverse: boolean = true
-) {
-    applyToOrderedItemsFromFile(selection.value.getSelected(), callback, reverse);
-}

website/src/lib/logic/selection.ts

@@ -1,140 +1,245 @@
-import type { ListItem } from '$lib/components/file-list/file-list';
+import {
+    ListFileItem,
+    ListItem,
+    ListRootItem,
+    ListTrackItem,
+    ListTrackSegmentItem,
+    ListWaypointItem,
+    ListLevel,
+    sortItems,
+    ListWaypointsItem,
+} from '$lib/components/file-list/file-list';
+import { fileStateCollection } from '$lib/logic/file-state';
+import { settings } from '$lib/logic/settings';
+import type { GPXFile } from 'gpx';
+import { get, writable, type Writable } from 'svelte/store';
+import { SelectionTreeType } from '$lib/logic/selection-tree';
 
-export class SelectionTreeType {
+export class Selection {
-    item: ListItem;
+    private _selection: Writable<SelectionTreeType>;
-    selected: boolean;
+    private _copied: Writable<ListItem[] | undefined>;
-    children: {
+    private _cut: Writable<boolean>;
-        [key: string | number]: SelectionTreeType;
-    };
-    size: number = 0;
 
-    constructor(item: ListItem) {
+    constructor() {
-        this.item = item;
+        this._selection = writable(new SelectionTreeType(new ListRootItem()));
-        this.selected = false;
+        this._copied = writable(undefined);
-        this.children = {};
+        this._cut = writable(false);
     }
 
-    clear() {
+    subscribe(
-        this.selected = false;
+        run: (value: SelectionTreeType) => void,
-        for (let key in this.children) {
+        invalidate?: (value?: SelectionTreeType) => void
-            this.children[key].clear();
-        }
-        this.size = 0;
-    }
-
-    _setOrToggle(item: ListItem, value?: boolean) {
-        if (item.level === this.item.level) {
-            let newSelected = value === undefined ? !this.selected : value;
-            if (this.selected !== newSelected) {
-                this.selected = newSelected;
-                this.size += this.selected ? 1 : -1;
-            }
-        } else {
-            let id = item.getIdAtLevel(this.item.level);
-            if (id !== undefined) {
-                if (!this.children.hasOwnProperty(id)) {
-                    this.children[id] = new SelectionTreeType(this.item.extend(id));
-                }
-                this.size -= this.children[id].size;
-                this.children[id]._setOrToggle(item, value);
-                this.size += this.children[id].size;
-            }
-        }
-    }
-
-    set(item: ListItem, value: boolean) {
-        this._setOrToggle(item, value);
-    }
-
-    toggle(item: ListItem) {
-        this._setOrToggle(item);
-    }
-
-    has(item: ListItem): boolean {
-        if (item.level === this.item.level) {
-            return this.selected;
-        } else {
-            let id = item.getIdAtLevel(this.item.level);
-            if (id !== undefined) {
-                if (this.children.hasOwnProperty(id)) {
-                    return this.children[id].has(item);
-                }
-            }
-        }
-        return false;
-    }
-
-    hasAnyParent(item: ListItem, self: boolean = true): boolean {
-        if (
-            this.selected &&
-            this.item.level <= item.level &&
-            (self || this.item.level < item.level)
     ) {
-            return this.selected;
+        return this._selection.subscribe(run, invalidate);
-        }
-        let id = item.getIdAtLevel(this.item.level);
-        if (id !== undefined) {
-            if (this.children.hasOwnProperty(id)) {
-                return this.children[id].hasAnyParent(item, self);
-            }
-        }
-        return false;
     }
 
-    hasAnyChildren(item: ListItem, self: boolean = true, ignoreIds?: (string | number)[]): boolean {
+    selectItem(item: ListItem) {
-        if (
+        this._selection.update(($selection) => {
-            this.selected &&
+            $selection.clear();
-            this.item.level >= item.level &&
+            $selection.set(item, true);
-            (self || this.item.level > item.level)
+            return $selection;
+        });
+    }
+
+    selectFile(fileId: string) {
+        this.selectItem(new ListFileItem(fileId));
+    }
+
+    addSelectItem(item: ListItem) {
+        this._selection.update(($selection) => {
+            $selection.toggle(item);
+            return $selection;
+        });
+    }
+
+    addSelectFile(fileId: string) {
+        this.addSelectItem(new ListFileItem(fileId));
+    }
+
+    selectAll() {
+        let item: ListItem = new ListRootItem();
+        get(this._selection).forEach((i) => {
+            item = i;
+        });
+        this._selection.update(($selection) => {
+            $selection.clear();
+            if (item instanceof ListRootItem || item instanceof ListFileItem) {
+                fileStateCollection.forEach((fileId, file) => {
+                    $selection.set(new ListFileItem(fileId), true);
+                });
+            } else if (item instanceof ListTrackItem) {
+                let file = fileStateCollection.getFile(item.getFileId());
+                if (file) {
+                    file.trk.forEach((_track, trackId) => {
+                        $selection.set(new ListTrackItem(item.getFileId(), trackId), true);
+                    });
+                }
+            } else if (item instanceof ListTrackSegmentItem) {
+                let file = fileStateCollection.getFile(item.getFileId());
+                if (file) {
+                    file.trk[item.getTrackIndex()].trkseg.forEach((_segment, segmentId) => {
+                        $selection.set(
+                            new ListTrackSegmentItem(
+                                item.getFileId(),
+                                item.getTrackIndex(),
+                                segmentId
+                            ),
+                            true
+                        );
+                    });
+                }
+            } else if (item instanceof ListWaypointItem) {
+                let file = fileStateCollection.getFile(item.getFileId());
+                if (file) {
+                    file.wpt.forEach((_waypoint, waypointId) => {
+                        $selection.set(new ListWaypointItem(item.getFileId(), waypointId), true);
+                    });
+                }
+            }
+            return $selection;
+        });
+    }
+
+    set(items: ListItem[]) {
+        this._selection.update(($selection) => {
+            $selection.clear();
+            items.forEach((item) => {
+                $selection.set(item, true);
+            });
+            return $selection;
+        });
+    }
+
+    update(updatedFiles: GPXFile[], deletedFileIds: string[]) {
+        // TODO do it the other way around: get all selected items, and check if they still exist?
+        // let removedItems: ListItem[] = [];
+        // applyToOrderedItemsFromFile(selection.value.getSelected(), (fileId, level, items) => {
+        //     let file = updatedFiles.find((file) => file._data.id === fileId);
+        //     if (file) {
+        //         items.forEach((item) => {
+        //             if (item instanceof ListTrackItem) {
+        //                 let newTrackIndex = file.trk.findIndex(
+        //                     (track) => track._data.trackIndex === item.getTrackIndex()
+        //                 );
+        //                 if (newTrackIndex === -1) {
+        //                     removedItems.push(item);
+        //                 }
+        //             } else if (item instanceof ListTrackSegmentItem) {
+        //                 let newTrackIndex = file.trk.findIndex(
+        //                     (track) => track._data.trackIndex === item.getTrackIndex()
+        //                 );
+        //                 if (newTrackIndex === -1) {
+        //                     removedItems.push(item);
+        //                 } else {
+        //                     let newSegmentIndex = file.trk[newTrackIndex].trkseg.findIndex(
+        //                         (segment) => segment._data.segmentIndex === item.getSegmentIndex()
+        //                     );
+        //                     if (newSegmentIndex === -1) {
+        //                         removedItems.push(item);
+        //                     }
+        //                 }
+        //             } else if (item instanceof ListWaypointItem) {
+        //                 let newWaypointIndex = file.wpt.findIndex(
+        //                     (wpt) => wpt._data.index === item.getWaypointIndex()
+        //                 );
+        //                 if (newWaypointIndex === -1) {
+        //                     removedItems.push(item);
+        //                 }
+        //             }
+        //         });
+        //     } else if (deletedFileIds.includes(fileId)) {
+        //         items.forEach((item) => {
+        //             removedItems.push(item);
+        //         });
+        //     }
+        // });
+        // if (removedItems.length > 0) {
+        //     selection.update(($selection) => {
+        //         removedItems.forEach((item) => {
+        //             if (item instanceof ListFileItem) {
+        //                 $selection.deleteChild(item.getFileId());
+        //             } else {
+        //                 $selection.set(item, false);
+        //             }
+        //         });
+        //         return $selection;
+        //     });
+        // }
+    }
+
+    getOrderedSelection(reverse: boolean = false): ListItem[] {
+        let selected: ListItem[] = [];
+        this.applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
+            selected.push(...items);
+        }, reverse);
+        return selected;
+    }
+
+    applyToOrderedSelectedItemsFromFile(
+        callback: (fileId: string, level: ListLevel | undefined, items: ListItem[]) => void,
+        reverse: boolean = true
     ) {
-            return this.selected;
+        applyToOrderedItemsFromFile(get(this._selection).getSelected(), callback, reverse);
     }
-        let id = item.getIdAtLevel(this.item.level);
+
-        if (id !== undefined) {
+    copySelection(): boolean {
-            if (ignoreIds === undefined || ignoreIds.indexOf(id) === -1) {
+        let selected = get(this._selection).getSelected();
-                if (this.children.hasOwnProperty(id)) {
+        if (selected.length > 0) {
-                    return this.children[id].hasAnyChildren(item, self, ignoreIds);
+            this._copied.set(selected);
-                }
+            this._cut.set(false);
-            }
-        } else {
-            for (let key in this.children) {
-                if (ignoreIds === undefined || ignoreIds.indexOf(key) === -1) {
-                    if (this.children[key].hasAnyChildren(item, self, ignoreIds)) {
             return true;
         }
-                }
-            }
-        }
         return false;
     }
 
-    getSelected(selection: ListItem[] = []): ListItem[] {
+    cutSelection() {
-        if (this.selected) {
+        if (this.copySelection()) {
-            selection.push(this.item);
+            this._cut.set(true);
-        }
-        for (let key in this.children) {
-            this.children[key].getSelected(selection);
-        }
-        return selection;
-    }
-
-    forEach(callback: (item: ListItem) => void) {
-        if (this.selected) {
-            callback(this.item);
-        }
-        for (let key in this.children) {
-            this.children[key].forEach(callback);
         }
     }
 
-    getChild(id: string | number): SelectionTreeType | undefined {
+    resetCopied() {
-        return this.children[id];
+        this._copied.set(undefined);
+        this._cut.set(false);
     }
 
-    deleteChild(id: string | number) {
+    get copied(): ListItem[] | undefined {
-        if (this.children.hasOwnProperty(id)) {
+        return this._copied;
-            this.size -= this.children[id].size;
-            delete this.children[id];
     }
+
+    get cut(): boolean {
+        return this._cut;
     }
 }
+
+export const selection = new Selection();
+
+export function applyToOrderedItemsFromFile(
+    selectedItems: ListItem[],
+    callback: (fileId: string, level: ListLevel | undefined, items: ListItem[]) => void,
+    reverse: boolean = true
+) {
+    settings.fileOrder.value.forEach((fileId) => {
+        let level: ListLevel | undefined = undefined;
+        let items: ListItem[] = [];
+        selectedItems.forEach((item) => {
+            if (item.getFileId() === fileId) {
+                level = item.level;
+                if (
+                    item instanceof ListFileItem ||
+                    item instanceof ListTrackItem ||
+                    item instanceof ListTrackSegmentItem ||
+                    item instanceof ListWaypointsItem ||
+                    item instanceof ListWaypointItem
+                ) {
+                    items.push(item);
+                }
+            }
+        });
+
+        if (items.length > 0) {
+            sortItems(items, reverse);
+            callback(fileId, level, items);
+        }
+    });
+}

website/src/lib/logic/settings.ts

@@ -11,36 +11,44 @@ import {
     type CustomLayer,
 } from '$lib/assets/layers';
 import { browser } from '$app/environment';
+import { get, writable, type Writable } from 'svelte/store';
 
 export class Setting<V> {
     private _db: Database;
     private _key: string;
-    private _value: V;
+    private _value: Writable<V>;
 
     constructor(db: Database, key: string, initial: V) {
         this._db = db;
         this._key = key;
-        this._value = $state(initial);
+        this._value = writable(initial);
 
         let first = true;
         liveQuery(() => db.settings.get(key)).subscribe((value) => {
             if (value === undefined) {
                 if (!first) {
-                    this._value = value;
+                    this._value.set(value);
                 }
             } else {
-                this._value = value;
+                this._value.set(value);
             }
             first = false;
         });
     }
 
-    get value(): V {
+    subscribe(run: (value: V) => void, invalidate?: (value?: V) => void) {
-        return this._value;
+        return this._value.subscribe(run, invalidate);
     }
 
-    set value(newValue: V) {
+    set(newValue: V) {
-        if (newValue !== this._value) {
+        if (typeof newValue === 'object' || newValue !== get(this._value)) {
+            this._db.settings.put(newValue, this._key);
+        }
+    }
+
+    update(callback: (value: any) => any) {
+        let newValue = callback(get(this._value));
+        if (typeof newValue === 'object' || newValue !== get(this._value)) {
             this._db.settings.put(newValue, this._key);
         }
     }
@@ -49,34 +57,41 @@ export class Setting<V> {
 export class SettingInitOnFirstRead<V> {
     private _db: Database;
     private _key: string;
-    private _value: V | undefined;
+    private _value: Writable<V | undefined>;
 
     constructor(db: Database, key: string, initial: V) {
         this._db = db;
         this._key = key;
-        this._value = $state(undefined);
+        this._value = writable(undefined);
 
         let first = true;
         liveQuery(() => db.settings.get(key)).subscribe((value) => {
             if (value === undefined) {
                 if (first) {
-                    this._value = initial;
+                    this._value.set(initial);
                 } else {
-                    this._value = value;
+                    this._value.set(value);
                 }
             } else {
-                this._value = value;
+                this._value.set(value);
             }
             first = false;
         });
     }
 
-    get value(): V | undefined {
+    subscribe(run: (value: V | undefined) => void, invalidate?: (value?: V | undefined) => void) {
-        return this._value;
+        return this._value.subscribe(run, invalidate);
     }
 
-    set value(newValue: V) {
+    set(newValue: V) {
-        if (newValue !== this._value) {
+        if (typeof newValue === 'object' || newValue !== get(this._value)) {
+            this._db.settings.put(newValue, this._key);
+        }
+    }
+
+    update(callback: (value: any) => any) {
+        let newValue = callback(get(this._value));
+        if (typeof newValue === 'object' || newValue !== get(this._value)) {
             this._db.settings.put(newValue, this._key);
         }
     }

website/src/lib/units.ts

@@ -1,5 +1,6 @@
-import { settings } from '$lib/logic/settings.svelte';
+import { settings } from '$lib/logic/settings';
 import { i18n } from '$lib/i18n.svelte';
+import { get } from 'svelte/store';
 
 const { distanceUnits, velocityUnits, temperatureUnits } = settings;
 
@@ -55,7 +56,7 @@ export function getDistanceWithUnits(value: number, convert: boolean = true) {
 }
 
 export function getVelocityWithUnits(value: number, convert: boolean = true) {
-    if (velocityUnits.value === 'speed') {
+    if (get(velocityUnits) === 'speed') {
         if (convert) {
             return getConvertedVelocity(value).toFixed(2) + ' ' + getVelocityUnits();
         } else {
@@ -99,7 +100,7 @@ export function getTemperatureWithUnits(value: number, convert: boolean = true)
 }
 
 // Get the units
-export function getDistanceUnits(targetDistanceUnits = distanceUnits.value) {
+export function getDistanceUnits(targetDistanceUnits = get(distanceUnits)) {
     switch (targetDistanceUnits) {
         case 'metric':
             return i18n._('units.kilometers');
@@ -111,8 +112,8 @@ export function getDistanceUnits(targetDistanceUnits = distanceUnits.value) {
 }
 
 export function getVelocityUnits(
-    targetVelocityUnits = velocityUnits.value,
+    targetVelocityUnits = get(velocityUnits),
-    targetDistanceUnits = distanceUnits.value
+    targetDistanceUnits = get(distanceUnits)
 ) {
     if (targetVelocityUnits === 'speed') {
         switch (targetDistanceUnits) {
@@ -135,7 +136,7 @@ export function getVelocityUnits(
     }
 }
 
-export function getElevationUnits(targetDistanceUnits = distanceUnits.value) {
+export function getElevationUnits(targetDistanceUnits = get(distanceUnits)) {
     switch (targetDistanceUnits) {
         case 'metric':
             return i18n._('units.meters');
@@ -160,13 +161,13 @@ export function getPowerUnits() {
 }
 
 export function getTemperatureUnits() {
-    return temperatureUnits.value === 'celsius'
+    return get(temperatureUnits) === 'celsius'
         ? i18n._('units.celsius')
         : i18n._('units.fahrenheit');
 }
 
 // Convert only the value
-export function getConvertedDistance(value: number, targetDistanceUnits = distanceUnits.value) {
+export function getConvertedDistance(value: number, targetDistanceUnits = get(distanceUnits)) {
     switch (targetDistanceUnits) {
         case 'metric':
             return value;
@@ -177,7 +178,7 @@ export function getConvertedDistance(value: number, targetDistanceUnits = distan
     }
 }
 
-export function getConvertedElevation(value: number, targetDistanceUnits = distanceUnits.value) {
+export function getConvertedElevation(value: number, targetDistanceUnits = get(distanceUnits)) {
     switch (targetDistanceUnits) {
         case 'metric':
             return value;
@@ -190,8 +191,8 @@ export function getConvertedElevation(value: number, targetDistanceUnits = dista
 
 export function getConvertedVelocity(
     value: number,
-    targetVelocityUnits = velocityUnits.value,
+    targetVelocityUnits = get(velocityUnits),
-    targetDistanceUnits = distanceUnits.value
+    targetDistanceUnits = get(distanceUnits)
 ) {
     if (targetVelocityUnits === 'speed') {
         switch (targetDistanceUnits) {
@@ -215,5 +216,5 @@ export function getConvertedVelocity(
 }
 
 export function getConvertedTemperature(value: number) {
-    return temperatureUnits.value === 'celsius' ? value : celsiusToFahrenheit(value);
+    return get(temperatureUnits) === 'celsius' ? value : celsiusToFahrenheit(value);
 }

website/src/routes/[[language]]/app/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    // import GPXLayers from '$lib/components/map/gpx-layer/GPXLayers.svelte';
+    import GPXLayers from '$lib/components/map/gpx-layer/GPXLayers.svelte';
     // import ElevationProfile from '$lib/components/ElevationProfile.svelte';
     // import FileList from '$lib/components/file-list/FileList.svelte';
     // import GPXStatistics from '$lib/components/GPXStatistics.svelte';
@@ -18,9 +18,9 @@
     import { getURLForLanguage } from '$lib/utils';
     // import { getURLForGoogleDriveFile } from '$lib/components/embedding/Embedding';
     import { i18n } from '$lib/i18n.svelte';
-    import { settings } from '$lib/logic/settings.svelte';
+    import { settings } from '$lib/logic/settings';
-    import { fileStateCollection } from '$lib/logic/file-state.svelte';
+    import { fileStateCollection } from '$lib/logic/file-state';
-    import { loadFiles } from '$lib/logic/file-actions.svelte';
+    import { loadFiles } from '$lib/logic/file-actions';
     import { onMount } from 'svelte';
     import { page } from '$app/state';
 
@@ -103,29 +103,29 @@
             >
                 <!-- <Toolbar /> -->
             </div>
-            <Map class="h-full {treeFileView.value ? '' : 'horizontal'}" />
+            <Map class="h-full {$treeFileView ? '' : 'horizontal'}" />
             <StreetViewControl />
             <LayerControl />
-            <!-- <GPXLayers /> -->
+            <GPXLayers />
             <!-- <CoordinatesPopup /> -->
             <Toaster richColors />
-            <!-- {#if !treeFileView.value}
+            {#if !$treeFileView}
                 <div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
-                    <FileList orientation="horizontal" />
+                    <!-- <FileList orientation="horizontal" /> -->
                 </div>
-            {/if} -->
+            {/if}
         </div>
-        {#if elevationProfile.value}
+        {#if $elevationProfile}
             <Resizer
                 orientation="row"
-                bind:after={bottomPanelSize.value}
+                bind:after={$bottomPanelSize}
                 minAfter={100}
                 maxAfter={300}
             />
         {/if}
         <div
-            class="{elevationProfile.value ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
+            class="{$elevationProfile ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
-            style={elevationProfile.value ? `height: ${bottomPanelSize.value}px` : ''}
+            style={$elevationProfile ? `height: ${$bottomPanelSize}px` : ''}
         >
             <!-- <GPXStatistics
                 {gpxStatistics}
@@ -143,13 +143,8 @@
             {/if} -->
         </div>
     </div>
-    {#if treeFileView.value}
+    {#if $treeFileView}
-        <Resizer
+        <Resizer orientation="col" bind:after={$rightPanelSize} minAfter={100} maxAfter={400} />
-            orientation="col"
-            bind:after={rightPanelSize.value}
-            minAfter={100}
-            maxAfter={400}
-        />
         <!-- <FileList orientation="vertical" recursive={true} style="width: {$rightPanelSize}px" /> -->
     {/if}
 </div>