fix tools

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

@@ -151,6 +151,7 @@ export class GPXFileStateCollectionObserver {
     private _onFileAdded: GPXFileStateCallback;
     private _onFileRemoved: (fileId: string) => void;
     private _onDestroy: () => void;
+    private _unsubscribe: () => void;
 
     constructor(
         onFileAdded: GPXFileStateCallback,
@@ -162,7 +163,7 @@ export class GPXFileStateCollectionObserver {
         this._onFileRemoved = onFileRemoved;
         this._onDestroy = onDestroy;
 
-        fileStateCollection.subscribe((files) => {
+        this._unsubscribe = fileStateCollection.subscribe((files) => {
             this._fileIds.forEach((fileId) => {
                 if (!files.has(fileId)) {
                     this._onFileRemoved(fileId);
@@ -180,5 +181,6 @@ export class GPXFileStateCollectionObserver {
 
     destroy() {
         this._onDestroy();
+        this._unsubscribe();
     }
 }

website/src/lib/logic/map-cursor.ts

@@ -0,0 +1,55 @@
+import { map } from '$lib/components/map/map';
+import { get, writable, type Writable } from 'svelte/store';
+
+export enum MapCursorState {
+    DEFAULT,
+    LAYER_HOVER,
+    WAYPOINT_DRAGGING,
+    TRACKPOINT_DRAGGING,
+    TOOL_WITH_CROSSHAIR,
+    SCISSORS,
+    MAPILLARY_HOVER,
+    STREET_VIEW_CROSSHAIR,
+}
+
+const scissorsCursor = `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" version="1.1"><path d="M 3.200 3.200 C 0.441 5.959, 2.384 9.516, 7 10.154 C 10.466 10.634, 10.187 13.359, 6.607 13.990 C 2.934 14.637, 1.078 17.314, 2.612 19.750 C 4.899 23.380, 10 21.935, 10 17.657 C 10 16.445, 12.405 13.128, 15.693 9.805 C 18.824 6.641, 21.066 3.732, 20.674 3.341 C 20.283 2.950, 18.212 4.340, 16.072 6.430 C 12.019 10.388, 10 10.458, 10 6.641 C 10 2.602, 5.882 0.518, 3.200 3.200 M 4.446 5.087 C 3.416 6.755, 5.733 8.667, 7.113 7.287 C 8.267 6.133, 7.545 4, 6 4 C 5.515 4, 4.816 4.489, 4.446 5.087 M 14 14.813 C 14 16.187, 19.935 21.398, 20.667 20.667 C 21.045 20.289, 20.065 18.634, 18.490 16.990 C 15.661 14.036, 14 13.231, 14 14.813 M 4.446 17.087 C 3.416 18.755, 5.733 20.667, 7.113 19.287 C 8.267 18.133, 7.545 16, 6 16 C 5.515 16, 4.816 16.489, 4.446 17.087" stroke="black" stroke-width="1.2" fill="white" fill-rule="evenodd"/></svg>') 12 12, auto`;
+const cursorStyles = {
+    [MapCursorState.DEFAULT]: 'default',
+    [MapCursorState.LAYER_HOVER]: 'pointer',
+    [MapCursorState.WAYPOINT_DRAGGING]: 'grabbing',
+    [MapCursorState.TRACKPOINT_DRAGGING]: 'grabbing',
+    [MapCursorState.TOOL_WITH_CROSSHAIR]: 'crosshair',
+    [MapCursorState.SCISSORS]: scissorsCursor,
+    [MapCursorState.MAPILLARY_HOVER]: 'pointer',
+    [MapCursorState.STREET_VIEW_CROSSHAIR]: 'crosshair',
+};
+
+export class MapCursor {
+    private _states: Writable<Set<MapCursorState>>;
+
+    constructor() {
+        this._states = writable(new Set());
+        this._states.subscribe((states) => {
+            let state = states.entries().reduce((max, entry) => {
+                return entry[0] > max ? entry[0] : max;
+            }, MapCursorState.DEFAULT);
+            let canvas = get(map)?.getCanvas();
+            if (canvas) {
+                canvas.style.cursor = cursorStyles[state];
+            }
+        });
+    }
+
+    notify(cursorState: MapCursorState, isActive: boolean) {
+        this._states.update((states) => {
+            if (isActive) {
+                states.add(cursorState);
+            } else {
+                states.delete(cursorState);
+            }
+            return states;
+        });
+    }
+}
+
+export const mapCursor = new MapCursor();

website/src/lib/logic/selection.ts

@@ -14,6 +14,7 @@ import { settings } from '$lib/logic/settings';
 import type { GPXFile } from 'gpx';
 import { get, writable, type Readable, type Writable } from 'svelte/store';
 import { SelectionTreeType } from '$lib/logic/selection-tree';
+import { tick } from 'svelte';
 
 export class Selection {
     private _selection: Writable<SelectionTreeType>;
@@ -100,6 +101,15 @@ export class Selection {
         });
     }
 
+    selectFileWhenLoaded(fileId: string) {
+        const unsubscribe = fileStateCollection.subscribe((files) => {
+            if (files.has(fileId)) {
+                this.selectFile(fileId);
+                unsubscribe();
+            }
+        });
+    }
+
     set(items: ListItem[]) {
         this._selection.update(($selection) => {
             $selection.clear();

website/src/lib/logic/statistics.ts

@@ -7,6 +7,9 @@ import {
     ListWaypointsItem,
 } from '$lib/components/file-list/file-list';
 import { get, writable, type Writable } from 'svelte/store';
+import { settings } from '$lib/logic/settings';
+
+const { fileOrder } = settings;
 
 export class SelectedGPXStatistics {
     private _statistics: Writable<GPXStatistics>;
@@ -22,6 +25,7 @@ export class SelectedGPXStatistics {
         this._statistics = writable(new GPXStatistics());
         this._files = new Map();
         selection.subscribe(() => this.update());
+        fileOrder.subscribe(() => this.update());
     }
 
     subscribe(run: (value: GPXStatistics) => void, invalidate?: (value?: GPXStatistics) => void) {