small fixes for tools

2025-11-04 13:31:13 +00:00 · 2025-10-24 20:07:15 +02:00
parent 9c83dcafa7
commit 6db8696a36
8 changed files with 241 additions and 196 deletions
--- a/website/src/lib/components/toolbar/tools/Elevation.svelte
+++ b/website/src/lib/components/toolbar/tools/Elevation.svelte
@@ -20,7 +20,7 @@
        variant="outline"
        class="whitespace-normal h-fit"
        disabled={!validSelection}
-        onclick={async () => {
+        onclick={() => {
            if ($map) {
                fileActions.addElevationToSelection($map);
            }
--- a/website/src/lib/components/toolbar/tools/Time.svelte
+++ b/website/src/lib/components/toolbar/tools/Time.svelte
@@ -13,7 +13,7 @@
    } from '$lib/units';
    import { CalendarDate, type DateValue } from '@internationalized/date';
    import { CalendarClock, CirclePlay, CircleStop, CircleX, Timer, Zap } from '@lucide/svelte';
-    import { tick } from 'svelte';
+    import { untrack } from 'svelte';
    import { i18n } from '$lib/i18n.svelte';
    import {
        ListFileItem,
@@ -87,7 +87,7 @@

    $effect(() => {
        if ($gpxStatistics && $velocityUnits && $distanceUnits) {
-            setGPXData();
+            untrack(() => setGPXData());
        }
    });

@@ -204,7 +204,9 @@
                            min={0.01}
                            disabled={!canUpdate}
                            bind:value={speed}
-                            onchange={updateDataFromSpeed}
+                            onchange={() => {
+                                untrack(() => updateDataFromSpeed());
+                            }}
                            class="text-sm"
                        />
                        <span class="text-sm shrink-0">
@@ -221,7 +223,9 @@
                            bind:value={speed}
                            showHours={false}
                            disabled={!canUpdate}
-                            onChange={updateDataFromSpeed}
+                            onChange={() => {
+                                untrack(() => updateDataFromSpeed());
+                            }}
                        />
                        <span class="text-sm shrink-0">
                            {#if $distanceUnits === 'imperial'}
@@ -243,7 +247,9 @@
                <TimePicker
                    bind:value={movingTime}
                    disabled={!canUpdate}
-                    onChange={updateDataFromTotalTime}
+                    onChange={() => {
+                        untrack(() => updateDataFromTotalTime());
+                    }}
                />
            </div>
        </div>
@@ -258,18 +264,19 @@
                locale={i18n.lang}
                placeholder={i18n._('toolbar.time.pick_date')}
                class="w-fit grow"
-                onValueChange={async () => {
-                    await tick();
-                    updateEnd();
+                onchange={() => {
+                    untrack(() => updateEnd());
                }}
            />
-            <input
+            <Input
                type="time"
                step={1}
                disabled={!canUpdate}
                bind:value={startTime}
                class="w-fit"
-                onchange={updateEnd}
+                onchange={() => {
+                    untrack(() => updateEnd());
+                }}
            />
        </div>
        <Label class="flex flex-row">
@@ -283,18 +290,19 @@
                locale={i18n.lang}
                placeholder={i18n._('toolbar.time.pick_date')}
                class="w-fit grow"
-                onValueChange={async () => {
-                    await tick();
-                    updateStart();
+                onchange={() => {
+                    untrack(() => updateStart());
                }}
            />
-            <input
+            <Input
                type="time"
                step={1}
                disabled={!canUpdate}
                bind:value={endTime}
                class="w-fit"
-                onchange={updateStart}
+                onchange={() => {
+                    untrack(() => updateStart());
+                }}
            />
        </div>
        {#if $gpxStatistics.global.time.moving === 0 || $gpxStatistics.global.time.moving === undefined}
@@ -400,15 +408,3 @@
        {/if}
    </Help>
 </div>
-
-<style lang="postcss">
-    @reference "../../../../app.css";
-
-    div :global(input[type='time']) {
-        /*
-        Style copy-pasted from shadcn-svelte Input.
-        Needed to use native time input to avoid a bug with 2-level bind:value.
-        */
-        @apply flex h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
-    }
-</style>
--- a/website/src/lib/components/toolbar/tools/reduce/Reduce.svelte
+++ b/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" />
--- a/website/src/lib/components/toolbar/tools/reduce/reduce.svelte.ts
+++ b/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);
--- a/website/src/lib/components/toolbar/tools/routing/Routing.svelte
+++ b/website/src/lib/components/toolbar/tools/routing/Routing.svelte
@@ -15,7 +15,7 @@
        Route,
        TriangleAlert,
        ArrowRightLeft,
-        Home,
+        House,
        RouteOff,
        Repeat,
        SquareArrowUpLeft,
@@ -231,7 +231,7 @@
                    }
                }}
            >
-                <Home size="12" />{i18n._('toolbar.routing.route_back_to_start.button')}
+                <House size="12" />{i18n._('toolbar.routing.route_back_to_start.button')}
            </ButtonWithTooltip>
            <ButtonWithTooltip
                label={i18n._('toolbar.routing.round_trip.tooltip')}
--- a/website/src/lib/components/ui/date-picker/DatePicker.svelte
+++ b/website/src/lib/components/ui/date-picker/DatePicker.svelte
@@ -12,12 +12,14 @@
        disabled = false,
        locale,
        class: className = '',
+        onchange = () => {},
    }: {
        value?: DateValue;
        placeholder?: string;
        disabled?: boolean;
        locale: string;
        class?: string;
+        onchange?: (date: DateValue | undefined) => void;
    } = $props();

    const df = new DateFormatter(locale, {
@@ -43,6 +45,6 @@
        {value ? df.format(value.toDate(getLocalTimeZone())) : placeholder}
    </Popover.Trigger>
    <Popover.Content bind:ref={contentRef} class="w-auto p-0">
-        <Calendar type="single" captionLayout="dropdown" bind:value />
+        <Calendar type="single" captionLayout="dropdown" bind:value onValueChange={onchange} />
    </Popover.Content>
 </Popover.Root>
--- a/website/src/lib/components/ui/time-picker/TimeComponentInput.svelte
+++ b/website/src/lib/components/ui/time-picker/TimeComponentInput.svelte
@@ -1,26 +1,45 @@
 <script lang="ts">
    import { Input } from '$lib/components/ui/input';

-    export let value: string | number;
+    let {
+        id,
+        value = $bindable(),
+        disabled,
+        oninput = () => {},
+        onchange = () => {},
+        onkeypress = () => {},
+        onfocusin = () => {},
+        class: className,
+    }: {
+        id: string;
+        value: string | number;
+        disabled?: boolean;
+        oninput?: (e: Event) => void;
+        onchange?: (e: Event) => void;
+        onkeypress?: (e: KeyboardEvent) => void;
+        onfocusin?: (e: FocusEvent) => void;
+        class?: string;
+    } = $props();
 </script>

 <div>
    <Input
+        {id}
        type="text"
        step={1}
        bind:value
-        on:input
-        on:change
-        on:keypress
-        on:focusin={() => {
+        {disabled}
+        {oninput}
+        {onchange}
+        {onkeypress}
+        onfocusin={(e) => {
            let input = document.activeElement;
            if (input instanceof HTMLInputElement) {
                input.select();
            }
+            onfocusin(e);
        }}
-        on:focusin
-        class="w-[22px] {$$props.class ?? ''}"
-        {...$$restProps}
+        class="w-[22px] {className ?? ''}"
    />
 </div>

@@ -29,8 +48,11 @@

    div :global(input) {
        @apply px-0.5;
+        @apply py-0;
+        @apply bg-transparent;
        @apply text-right;
        @apply border-none;
+        @apply shadow-none;
        @apply focus:ring-0;
        @apply focus:ring-offset-0;
        @apply focus:outline-none;
--- a/website/src/lib/components/ui/time-picker/TimePicker.svelte
+++ b/website/src/lib/components/ui/time-picker/TimePicker.svelte
@@ -1,14 +1,22 @@
 <script lang="ts">
+    import { untrack } from 'svelte';
    import TimeComponentInput from './TimeComponentInput.svelte';

-	export let showHours = true;
-	export let value: number | undefined = undefined;
-	export let disabled: boolean = false;
-	export let onChange = () => {};
+    let {
+        showHours = true,
+        value = $bindable(),
+        disabled = false,
+        onChange = () => {},
+    }: {
+        showHours?: boolean;
+        value?: number;
+        disabled?: boolean;
+        onChange?: () => void;
+    } = $props();

-	let hours: string | number = '--';
-	let minutes: string | number = '--';
-	let seconds: string | number = '--';
+    let hours: string | number = $state('--');
+    let minutes: string | number = $state('--');
+    let seconds: string | number = $state('--');

    function maybeParseInt(value: string | number): number {
        if (value === '--' || value === '') {
@@ -17,24 +25,30 @@
        return typeof value === 'string' ? parseInt(value) : value;
    }

-	function computeValue() {
+    function computeValue(): number {
        return Math.max(
            maybeParseInt(hours) * 3600 + maybeParseInt(minutes) * 60 + maybeParseInt(seconds),
            1
        );
    }

-	function updateValue() {
-		value = computeValue();
-	}
+    $effect(() => {
+        const val = computeValue();
+        untrack(() => {
+            value = val;
+        });
+    });

-	$: hours, minutes, seconds, updateValue();
-
-	$: if (value === undefined) {
+    $effect(() => {
+        if (value === undefined) {
+            untrack(() => {
                hours = '--';
                minutes = '--';
                seconds = '--';
-	} else if (value !== computeValue()) {
+            });
+        } else {
+            untrack(() => {
+                if (value != computeValue()) {
                    let rounded = Math.max(Math.round(value), 1);
                    if (showHours) {
                        hours = Math.floor(rounded / 3600);
@@ -46,6 +60,9 @@
                    }
                    seconds = (rounded % 60).toString().padStart(2, '0');
                }
+            });
+        }
+    });

    let container: HTMLDivElement;
    let countKeyPress = 0;
@@ -65,7 +82,7 @@

 <div
    bind:this={container}
-	class="flex flex-row items-center w-full min-w-fit border rounded-md px-3 focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 {disabled
+    class="h-9 flex flex-row items-center w-full min-w-fit border rounded-md px-3 focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 {disabled
        ? 'opacity-50 cursor-not-allowed'
        : ''}"
 >
@@ -75,7 +92,7 @@
            bind:value={hours}
            {disabled}
            class="w-[30px]"
-			on:input={() => {
+            oninput={() => {
                if (typeof hours === 'string') {
                    hours = parseInt(hours);
                }
@@ -87,8 +104,8 @@
                }
                onChange();
            }}
-			on:keypress={onKeyPress}
-			on:focusin={() => {
+            onkeypress={onKeyPress}
+            onfocusin={() => {
                countKeyPress = 0;
            }}
        />
@@ -98,7 +115,7 @@
        id="minutes"
        bind:value={minutes}
        {disabled}
-		on:input={() => {
+        oninput={() => {
            if (typeof minutes === 'string') {
                minutes = parseInt(minutes);
            }
@@ -113,8 +130,8 @@
            minutes = minutes.toString().padStart(showHours ? 2 : 1, '0');
            onChange();
        }}
-		on:keypress={onKeyPress}
-		on:focusin={() => {
+        onkeypress={onKeyPress}
+        onfocusin={() => {
            countKeyPress = 0;
        }}
    />
@@ -123,7 +140,7 @@
        id="seconds"
        bind:value={seconds}
        {disabled}
-		on:input={() => {
+        oninput={() => {
            if (typeof seconds === 'string') {
                seconds = parseInt(seconds);
            }
@@ -138,8 +155,8 @@
            seconds = seconds.toString().padStart(2, '0');
            onChange();
        }}
-		on:keypress={onKeyPress}
-		on:focusin={() => {
+        onkeypress={onKeyPress}
+        onfocusin={() => {
            countKeyPress = 0;
        }}
    />