small fixes for tools

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

@@ -2,7 +2,7 @@
     import { Label } from '$lib/components/ui/label/index.js';
     import { Button } from '$lib/components/ui/button';
     import { Slider } from '$lib/components/ui/slider';
-    import { ListItem, ListRootItem } from '$lib/components/file-list/file-list';
+    import { ListRootItem } from '$lib/components/file-list/file-list';
     import Help from '$lib/components/Help.svelte';
     import { Funnel } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
@@ -10,13 +10,11 @@
     import { onDestroy } from 'svelte';
     import { getURLForLanguage } from '$lib/utils';
     import { selection } from '$lib/logic/selection';
-    import { minTolerance, ReducedGPXLayerCollection, tolerance } from './reduce';
+    import { minTolerance, ReducedGPXLayerCollection, tolerance } from './reduce.svelte';
 
     let props: { class?: string } = $props();
 
     let sliderValue = $state([50]);
-    let maxPoints = $state(0);
-    let currentPoints = $state(0);
     const maxTolerance = 10000;
 
     let validSelection = $derived(
@@ -46,7 +44,7 @@
     </Label>
     <Label class="flex flex-row justify-between">
         <span>{i18n._('toolbar.reduce.number_of_points')}</span>
-        <span class="font-normal">{currentPoints}/{maxPoints}</span>
+        <span class="font-normal">{reducedLayers.currentPoints}/{reducedLayers.maxPoints}</span>
     </Label>
     <Button variant="outline" disabled={!validSelection} onclick={() => reducedLayers.reduce()}>
         <Funnel size="16" class="mr-1" />

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

@@ -5,7 +5,7 @@ import { GPXFileStateCollectionObserver, type GPXFileState } from '$lib/logic/fi
 import { selection } from '$lib/logic/selection';
 import { ramerDouglasPeucker, TrackPoint, type SimplifiedTrackPoint } from 'gpx';
 import type { GeoJSONSource } from 'mapbox-gl';
-import { get, writable } from 'svelte/store';
+import { get, writable, type Writable } from 'svelte/store';
 
 export const minTolerance = 0.1;
 
@@ -53,14 +53,16 @@ export const tolerance = writable<number>(0);
 export class ReducedGPXLayerCollection {
     private _layers: Map<string, ReducedGPXLayer> = new Map();
     private _simplified: Map<string, [ListItem, number, SimplifiedTrackPoint[]]>;
-    private _fileStateCollectionOberver: GPXFileStateCollectionObserver;
+    private _currentPoints = $state(0);
+    private _maxPoints = $state(0);
+    private _fileStateCollectionObserver: GPXFileStateCollectionObserver;
     private _updateSimplified = this.updateSimplified.bind(this);
     private _unsubscribes: (() => void)[] = [];
 
     constructor() {
         this._layers = new Map();
         this._simplified = new Map();
-        this._fileStateCollectionOberver = new GPXFileStateCollectionObserver(
+        this._fileStateCollectionObserver = new GPXFileStateCollectionObserver(
             (newFiles) => {
                 newFiles.forEach((fileState, fileId) => {
                     this._layers.set(
@@ -96,8 +98,8 @@ export class ReducedGPXLayerCollection {
     }
 
     update() {
-        let maxPoints = 0;
-        let currentPoints = 0;
+        this._currentPoints = 0;
+        this._maxPoints = 0;
 
         let data: GeoJSON.FeatureCollection = {
             type: 'FeatureCollection',
@@ -109,12 +111,12 @@ export class ReducedGPXLayerCollection {
                 return;
             }
 
-            maxPoints += maxPts;
+            this._maxPoints += maxPts;
 
             let current = points.filter(
                 (point) => point.distance === undefined || point.distance >= get(tolerance)
             );
-            currentPoints += current.length;
+            this._currentPoints += current.length;
 
             data.features.push({
                 type: 'Feature',
@@ -173,8 +175,16 @@ export class ReducedGPXLayerCollection {
         fileActions.reduce(itemsAndPoints);
     }
 
+    get currentPoints() {
+        return this._currentPoints;
+    }
+
+    get maxPoints() {
+        return this._maxPoints;
+    }
+
     destroy() {
-        this._fileStateCollectionOberver.destroy();
+        this._fileStateCollectionObserver.destroy();
         this._unsubscribes.forEach((unsubscribe) => unsubscribe());
 
         const map_ = get(map);