mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2025-08-31 15:43:25 +00:00
docs progress
This commit is contained in:
vcoppe
@@ -127,7 +127,7 @@
|
||||
$: validSelection = $selection.size > 0;
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-3 w-full max-w-80 items-center">
|
||||
<div class="flex flex-col gap-3 w-full max-w-80 items-center {$$props.class ?? ''}">
|
||||
<fieldset class="flex flex-col gap-3">
|
||||
<Label class="flex flex-row items-center gap-[6.4px] h-3">
|
||||
<Checkbox bind:checked={deleteTrackpoints} class="scale-90" />
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-3 w-full max-w-80">
|
||||
<div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
|
||||
<Button variant="outline" disabled={!validSelection} on:click={dbUtils.extractSelection}>
|
||||
<Ungroup size="16" class="mr-1" />
|
||||
{$_('toolbar.extract.button')}
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
let mergeType = MergeType.TRACES;
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-3 w-full max-w-80">
|
||||
<div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
|
||||
<RadioGroup.Root bind:value={mergeType}>
|
||||
<Label class="flex flex-row items-center gap-2 leading-5">
|
||||
<RadioGroup.Item value={MergeType.TRACES} />
|
||||
|
||||
@@ -147,7 +147,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-3 w-full max-w-80">
|
||||
<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} />
|
||||
</div>
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-3 w-full max-w-80">
|
||||
<div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
|
||||
<div class="p-2">
|
||||
<Slider bind:value={sliderValues} max={maxSliderValue} step={1} disabled={!validSelection} />
|
||||
</div>
|
||||
|
||||
@@ -160,7 +160,7 @@
|
||||
$selection.size === 1 && $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']);
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-3 w-80">
|
||||
<div class="flex flex-col gap-3 w-96 {$$props.class ?? ''}">
|
||||
<fieldset class="flex flex-col gap-2">
|
||||
<div class="flex flex-row gap-2 justify-center">
|
||||
<div class="flex flex-col gap-2">
|
||||
|
||||
@@ -162,7 +162,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-3 w-full max-w-96">
|
||||
<div class="flex flex-col gap-3 w-full max-w-96 {$$props.class ?? ''}">
|
||||
<fieldset class="flex flex-col gap-2">
|
||||
<Label for="name">{$_('menu.metadata.name')}</Label>
|
||||
<Input bind:value={name} id="name" class="font-semibold h-8" />
|
||||
|
||||
@@ -2,4 +2,13 @@
|
||||
title: Clean
|
||||
---
|
||||
|
||||
# { title }
|
||||
<script>
|
||||
import { SquareDashedMousePointer } from 'lucide-svelte';
|
||||
import Clean from '$lib/components/toolbar/tools/Clean.svelte';
|
||||
</script>
|
||||
|
||||
# <SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
|
||||
|
||||
<div class="flex flex-row justify-center">
|
||||
<Clean class="text-foreground p-3 border rounded-md shadow-lg" />
|
||||
</div>
|
||||
@@ -2,4 +2,13 @@
|
||||
title: Extract
|
||||
---
|
||||
|
||||
# { title }
|
||||
<script>
|
||||
import { Ungroup } from 'lucide-svelte';
|
||||
import Extract from '$lib/components/toolbar/tools/Extract.svelte';
|
||||
</script>
|
||||
|
||||
# <Ungroup size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
|
||||
|
||||
<div class="flex flex-row justify-center">
|
||||
<Extract class="text-foreground p-3 border rounded-md shadow-lg" />
|
||||
</div>
|
||||
@@ -2,4 +2,13 @@
|
||||
title: Merge
|
||||
---
|
||||
|
||||
# { title }
|
||||
<script>
|
||||
import { Group } from 'lucide-svelte';
|
||||
import Merge from '$lib/components/toolbar/tools/Merge.svelte';
|
||||
</script>
|
||||
|
||||
# <Group size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
|
||||
|
||||
<div class="flex flex-row justify-center">
|
||||
<Merge class="text-foreground p-3 border rounded-md shadow-lg" />
|
||||
</div>
|
||||
@@ -2,4 +2,26 @@
|
||||
title: Points of interest
|
||||
---
|
||||
|
||||
# { title }
|
||||
<script>
|
||||
import { MapPin } from 'lucide-svelte';
|
||||
import Waypoint from '$lib/components/toolbar/tools/Waypoint.svelte';
|
||||
</script>
|
||||
|
||||
# <MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
|
||||
|
||||
[Points of interest](../gpx) can be added to GPX files to mark locations of interest on the map.
|
||||
|
||||
### Creating a point of interest
|
||||
|
||||
To create a point of interest, fill in the form as shown below.
|
||||
You can choose the location of the point of interest either by clicking on the map or by entering the coordinates manually.
|
||||
Validate the form when you are done.
|
||||
|
||||
<div class="flex flex-row justify-center">
|
||||
<Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
|
||||
</div>
|
||||
|
||||
### Editing a point of interest
|
||||
|
||||
You can also use the above form to edit an existing point of interest after selecting it on the map.
|
||||
If you only need to move the point of interest, you can drag it to the desired location.
|
||||
@@ -1,5 +1,14 @@
|
||||
---
|
||||
title: Reduce
|
||||
title: Minify
|
||||
---
|
||||
|
||||
# { title }
|
||||
<script>
|
||||
import { Filter } from 'lucide-svelte';
|
||||
import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
|
||||
</script>
|
||||
|
||||
# <Filter size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
|
||||
|
||||
<div class="flex flex-row justify-center">
|
||||
<Reduce class="text-foreground p-3 border rounded-md shadow-lg" />
|
||||
</div>
|
||||
@@ -19,7 +19,7 @@ The route planning and editing tool allows you to create and edit routes by plac
|
||||
As shown below, the tool dialog contains a few settings to control the routing behavior.
|
||||
|
||||
<div class="flex flex-row justify-center">
|
||||
<Routing minimizable={false} class="text-foreground p-3 border rounded-md" />
|
||||
<Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
|
||||
</div>
|
||||
|
||||
### <Route size="16" class="inline-block" style="margin-bottom: 2px" /> Routing
|
||||
|
||||
@@ -1,5 +1,14 @@
|
||||
---
|
||||
title: Scissors
|
||||
title: Crop and split
|
||||
---
|
||||
|
||||
# { title }
|
||||
<script>
|
||||
import { ScissorsIcon } from 'lucide-svelte';
|
||||
import Scissors from '$lib/components/toolbar/tools/Scissors.svelte';
|
||||
</script>
|
||||
|
||||
# <ScissorsIcon size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
|
||||
|
||||
<div class="flex flex-row justify-center">
|
||||
<Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
|
||||
</div>
|
||||
@@ -2,4 +2,13 @@
|
||||
title: Time
|
||||
---
|
||||
|
||||
# { title }
|
||||
<script>
|
||||
import { CalendarClock } from 'lucide-svelte';
|
||||
import Time from '$lib/components/toolbar/tools/Time.svelte';
|
||||
</script>
|
||||
|
||||
# <CalendarClock size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
|
||||
|
||||
<div class="flex flex-row justify-center">
|
||||
<Time class="text-foreground p-3 border rounded-md shadow-lg" />
|
||||
</div>
|
||||
@@ -11,7 +11,7 @@
|
||||
<div
|
||||
class="{$page.params.guide
|
||||
? 'hidden md:flex'
|
||||
: 'flex'} flex-col gap-1 w-40 sticky top-28 self-start"
|
||||
: 'flex'} flex-col gap-1 w-40 sticky top-[105px] self-start"
|
||||
>
|
||||
{#each Object.keys(guides) as guide}
|
||||
<Button
|
||||
|
||||
Reference in New Issue
Block a user