fix tools

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

@@ -0,0 +1,63 @@
+<script lang="ts">
+    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 Help from '$lib/components/Help.svelte';
+    import { Funnel } from '@lucide/svelte';
+    import { i18n } from '$lib/i18n.svelte';
+    import WithUnits from '$lib/components/WithUnits.svelte';
+    import { onDestroy } from 'svelte';
+    import { getURLForLanguage } from '$lib/utils';
+    import { selection } from '$lib/logic/selection';
+    import { minTolerance, ReducedGPXLayerCollection, tolerance } from './reduce';
+
+    let props: { class?: string } = $props();
+
+    let sliderValue = $state([50]);
+    let maxPoints = $state(0);
+    let currentPoints = $state(0);
+    const maxTolerance = 10000;
+
+    let validSelection = $derived(
+        $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints'])
+    );
+
+    let reducedLayers = new ReducedGPXLayerCollection();
+
+    $effect(() => {
+        tolerance.set(
+            minTolerance * 2 ** (sliderValue[0] / (100 / Math.log2(maxTolerance / minTolerance)))
+        );
+    });
+
+    onDestroy(() => {
+        reducedLayers.destroy();
+    });
+</script>
+
+<div class="flex flex-col gap-3 w-full max-w-80 {props.class ?? ''}">
+    <div class="p-2">
+        <Slider bind:value={sliderValue} min={0} max={100} step={1} type="multiple" />
+    </div>
+    <Label class="flex flex-row justify-between">
+        <span>{i18n._('toolbar.reduce.tolerance')}</span>
+        <WithUnits value={$tolerance / 1000} type="distance" decimals={4} class="font-normal" />
+    </Label>
+    <Label class="flex flex-row justify-between">
+        <span>{i18n._('toolbar.reduce.number_of_points')}</span>
+        <span class="font-normal">{currentPoints}/{maxPoints}</span>
+    </Label>
+    <Button variant="outline" disabled={!validSelection} onclick={() => reducedLayers.reduce()}>
+        <Funnel size="16" class="mr-1" />
+        {i18n._('toolbar.reduce.button')}
+    </Button>
+
+    <Help link={getURLForLanguage(i18n.lang, '/help/toolbar/minify')}>
+        {#if validSelection}
+            {i18n._('toolbar.reduce.help')}
+        {:else}
+            {i18n._('toolbar.reduce.help_no_selection')}
+        {/if}
+    </Help>
+</div>