progress

website/src/lib/components/App.svelte

@@ -34,11 +34,9 @@
 			<ElevationProfile />
 		</div>
 	</div>
-	<div class="shrink-0">
+	{#if $verticalFileView}
-		{#if $verticalFileView}
+		<FileList orientation="vertical" recursive={true} class="w-60" />
-			<FileList orientation="vertical" recursive={true} class="w-60" />
+	{/if}
-		{/if}
-	</div>
 </div>
 
 <style lang="postcss">

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

@@ -14,7 +14,7 @@
 </script>
 
 <ScrollArea
-	class={orientation === 'vertical' ? 'p-1 pr-3' : 'h-10 px-1'}
+	class="shrink-0 {orientation === 'vertical' ? 'p-1 pr-3' : 'h-10 px-1'}"
 	{orientation}
 	scrollbarXClasses={orientation === 'vertical' ? '' : 'mt-1 h-2'}
 	scrollbarYClasses={orientation === 'vertical' ? '' : ''}

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

@@ -58,7 +58,21 @@
 
 		if ($fileOrder.length !== $fileObservers.size) {
 			// Files were added or removed
-			fileOrder.set(sortable.toArray());
+			fileOrder.update((order) => {
+				for (let i = 0; i < order.length; ) {
+					if (!$fileObservers.has(order[i])) {
+						order.splice(i, 1);
+					} else {
+						i++;
+					}
+				}
+				for (let id of $fileObservers.keys()) {
+					if (!order.includes(id)) {
+						order.push(id);
+					}
+				}
+				return order;
+			});
 			return;
 		}
 

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

@@ -1,7 +1,6 @@
 import { distance, type Coordinates, TrackPoint, TrackSegment } from "gpx";
 import { original } from "immer";
 import { get, type Readable } from "svelte/store";
-import { computeAnchorPoints } from "./Simplify";
 import mapboxgl from "mapbox-gl";
 import { route } from "./Routing";
 
@@ -66,22 +65,6 @@ export class RoutingControls {
         for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex++) {
             let segment = segments[segmentIndex];
 
-            if (!segment._data.anchors) { // New segment, compute anchor points for it
-                computeAnchorPoints(segment);
-            }
-
-            if (segment.trkpt.length > 0) {
-                if (!segment.trkpt[0]._data.anchor) { // First point is not an anchor, make it one
-                    segment.trkpt[0]._data.anchor = true;
-                    segment.trkpt[0]._data.zoom = 0;
-                }
-
-                if (!segment.trkpt[segment.trkpt.length - 1]._data.anchor) { // Last point is not an anchor, make it one
-                    segment.trkpt[segment.trkpt.length - 1]._data.anchor = true;
-                    segment.trkpt[segment.trkpt.length - 1]._data.zoom = 0;
-                }
-            }
-
             for (let point of segment.trkpt) { // Update the existing anchors (could be improved by matching the existing anchors with the new ones?)
                 if (point._data.anchor) {
                     if (anchorIndex < this.anchors.length) {
@@ -433,17 +416,19 @@ export class RoutingControls {
         }
 
         if (anchors[0].point._data.index === 0) { // First anchor is the first point of the segment
-            anchors[0].point = response[0]; // Update the first anchor
+            anchors[0].point = response[0]; // Replace the first anchor
             anchors[0].point._data.index = 0;
         } else {
-            response.splice(0, 0, anchors[0].point); // Keep the original start point
+            anchors[0].point = anchors[0].point.clone(); // Clone the anchor to assign new properties
+            response.splice(0, 0, anchors[0].point); // Insert it in the response to keep it
         }
 
         if (anchors[anchors.length - 1].point._data.index === segment.trkpt.length - 1) { // Last anchor is the last point of the segment
-            anchors[anchors.length - 1].point = response[response.length - 1]; // Update the last anchor
+            anchors[anchors.length - 1].point = response[response.length - 1]; // Replace the last anchor
             anchors[anchors.length - 1].point._data.index = segment.trkpt.length - 1;
         } else {
-            response.push(anchors[anchors.length - 1].point); // Keep the original end point
+            anchors[anchors.length - 1].point = anchors[anchors.length - 1].point.clone(); // Clone the anchor to assign new properties
+            response.push(anchors[anchors.length - 1].point); // Insert it in the response to keep it
         }
 
         for (let i = 1; i < anchors.length - 1; i++) {

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

@@ -1,4 +1,4 @@
-import type { Coordinates, TrackPoint, TrackSegment } from "gpx";
+import type { Coordinates, GPXFile, TrackPoint, TrackSegment } from "gpx";
 
 type SimplifiedTrackPoint = { point: TrackPoint, distance?: number };
 
@@ -15,7 +15,32 @@ export function getZoomLevelForDistance(latitude: number, distance?: number): nu
     return Math.min(20, Math.max(0, Math.floor(Math.log2((earthRadius * Math.cos(lat)) / distance))));
 }
 
-export function computeAnchorPoints(segment: TrackSegment) {
+export function updateAnchorPoints(file: GPXFile) {
+    let segments = file.getSegments();
+
+    for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex++) {
+        let segment = segments[segmentIndex];
+
+        if (!segment._data.anchors) { // New segment, compute anchor points for it
+            computeAnchorPoints(segment);
+            continue;
+        }
+
+        if (segment.trkpt.length > 0) {
+            if (!segment.trkpt[0]._data.anchor) { // First point is not an anchor, make it one
+                segment.trkpt[0]._data.anchor = true;
+                segment.trkpt[0]._data.zoom = 0;
+            }
+
+            if (!segment.trkpt[segment.trkpt.length - 1]._data.anchor) { // Last point is not an anchor, make it one
+                segment.trkpt[segment.trkpt.length - 1]._data.anchor = true;
+                segment.trkpt[segment.trkpt.length - 1]._data.zoom = 0;
+            }
+        }
+    }
+}
+
+function computeAnchorPoints(segment: TrackSegment) {
     let points = segment.trkpt;
     let anchors = ramerDouglasPeucker(points);
     anchors.forEach((anchor) => {

website/src/lib/db.ts

@@ -1,17 +1,17 @@
 import Dexie, { liveQuery } from 'dexie';
 import { GPXFile, GPXStatistics, Track } from 'gpx';
-import { enableMapSet, enablePatches, applyPatches, type Patch, type WritableDraft, castDraft, Immer } from 'immer';
+import { enableMapSet, enablePatches, applyPatches, type Patch, type WritableDraft, castDraft, freeze, produceWithPatches, original } from 'immer';
 import { writable, get, derived, type Readable, type Writable } from 'svelte/store';
 import { initTargetMapBounds, updateTargetMapBounds } from './stores';
 import { mode } from 'mode-watcher';
 import { defaultBasemap, defaultBasemapTree, defaultOverlayTree, defaultOverlays } from './assets/layers';
 import { selection } from '$lib/components/file-list/Selection';
 import { ListFileItem, ListItem, type ListLevel } from '$lib/components/file-list/FileList';
+import { updateAnchorPoints } from '$lib/components/toolbar/tools/routing/Simplify';
 
 enableMapSet();
 enablePatches();
 
-const noFreezeImmer = new Immer({ autoFreeze: false }); // Do not freeze files that are not concerned by an update, otherwise cannot assign anchors for them
 
 class Database extends Dexie {
 
@@ -163,6 +163,7 @@ function dexieGPXFileStore(id: string): Readable<GPXFileWithStatistics> & { dest
     let query = liveQuery(() => db.files.get(id)).subscribe(value => {
         if (value !== undefined) {
             let gpx = new GPXFile(value);
+            updateAnchorPoints(gpx);
 
             let statistics = new GPXStatisticsTree(gpx);
             if (!fileState.has(id)) { // Update the map bounds for new files
@@ -260,7 +261,7 @@ export const canRedo: Readable<boolean> = derived([patchIndex, patchMinMaxIndex]
 
 // Helper function to apply a callback to the global file state
 function applyGlobal(callback: (files: Map<string, GPXFile>) => void) {
-    const [newFileState, patch, inversePatch] = noFreezeImmer.produceWithPatches(fileState, callback);
+    const [newFileState, patch, inversePatch] = produceWithPatches(fileState, callback);
 
     storePatches(patch, inversePatch);
 
@@ -269,7 +270,7 @@ function applyGlobal(callback: (files: Map<string, GPXFile>) => void) {
 
 // Helper function to apply a callback to multiple files
 function applyToFiles(fileIds: string[], callback: (file: WritableDraft<GPXFile>) => GPXFile) {
-    const [newFileState, patch, inversePatch] = noFreezeImmer.produceWithPatches(fileState, (draft) => {
+    const [newFileState, patch, inversePatch] = produceWithPatches(fileState, (draft) => {
         fileIds.forEach((fileId) => {
             let file = draft.get(fileId);
             if (file) {
@@ -336,7 +337,7 @@ export const dbUtils = {
     add: (file: GPXFile) => {
         file._data.id = getFileIds(1)[0];
         return applyGlobal((draft) => {
-            draft.set(file._data.id, file);
+            draft.set(file._data.id, freeze(file));
         });
     },
     addMultiple: (files: GPXFile[]) => {
@@ -344,7 +345,7 @@ export const dbUtils = {
             let ids = getFileIds(files.length);
             files.forEach((file, index) => {
                 file._data.id = ids[index];
-                draft.set(file._data.id, file);
+                draft.set(file._data.id, freeze(file));
             });
         });
     },
@@ -360,12 +361,12 @@ export const dbUtils = {
             // TODO
             let ids = getFileIds(get(settings.fileOrder).length);
             get(settings.fileOrder).forEach((fileId, index) => {
-                if (get(selection).has(fileId)) {
+                if (get(selection).has(new ListFileItem(fileId))) {
-                    let file = draft.get(fileId);
+                    let file = original(draft)?.get(fileId);
                     if (file) {
                         let clone = file.clone();
                         clone._data.id = ids[index];
-                        draft.set(clone._data.id, clone);
+                        draft.set(clone._data.id, freeze(clone));
                     }
                 }
             });

website/src/lib/stores.ts

@@ -71,6 +71,11 @@ targetMapBounds.subscribe((bounds) => {
         return;
     }
 
+    let currentBounds = get(map)?.getBounds();
+    if (currentBounds && currentBounds.contains(bounds.bounds.getSouthEast()) && currentBounds.contains(bounds.bounds.getNorthWest())) {
+        return;
+    }
+
     get(map)?.fitBounds(bounds.bounds, {
         padding: 80,
         linear: true,