mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2025-09-02 00:32:33 +00:00
refactoring for tools and start waypoint
This commit is contained in:
vcoppe
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { currentTool, reverseSelectedFiles, Tool } from '$lib/stores';
|
||||
import Routing from '$lib/components/routing/Routing.svelte';
|
||||
import { reverseSelectedFiles, Tool } from '$lib/stores';
|
||||
import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
|
||||
import Waypoint from '$lib/components/toolbar/tools/waypoint/Waypoint.svelte';
|
||||
import ToolbarItem from './ToolbarItem.svelte';
|
||||
import {
|
||||
ArrowRightLeft,
|
||||
@@ -16,14 +17,6 @@
|
||||
} from 'lucide-svelte';
|
||||
|
||||
import { _ } from 'svelte-i18n';
|
||||
|
||||
function getToggleTool(tool: Tool) {
|
||||
return () => toggleTool(tool);
|
||||
}
|
||||
|
||||
function toggleTool(tool: Tool) {
|
||||
currentTool.update((current) => (current === tool ? null : tool));
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="absolute top-0 bottom-0 left-0 z-20 flex flex-col justify-center pointer-events-none">
|
||||
@@ -31,47 +24,48 @@
|
||||
<div
|
||||
class="h-fit flex flex-col p-1 gap-1 bg-background rounded-md pointer-events-auto shadow-md"
|
||||
>
|
||||
<ToolbarItem on:click={getToggleTool(Tool.ROUTING)}>
|
||||
<ToolbarItem tool={Tool.ROUTING}>
|
||||
<Pencil slot="icon" size="18" />
|
||||
<span slot="tooltip">{$_('toolbar.routing.tooltip')}</span>
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<ToolbarItem tool={Tool.TIME}>
|
||||
<CalendarClock slot="icon" size="18" />
|
||||
<span slot="tooltip">{$_('toolbar.time_tooltip')}</span>
|
||||
</ToolbarItem>
|
||||
<ToolbarItem on:click={reverseSelectedFiles}>
|
||||
<ToolbarItem tool={Tool.REVERSE} on:click={reverseSelectedFiles}>
|
||||
<ArrowRightLeft slot="icon" size="18" />
|
||||
<span slot="tooltip">{$_('toolbar.reverse_tooltip')}</span>
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<ToolbarItem tool={Tool.MERGE}>
|
||||
<Group slot="icon" size="18" />
|
||||
<span slot="tooltip">{$_('toolbar.merge_tooltip')}</span>
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<ToolbarItem tool={Tool.EXTRACT}>
|
||||
<Ungroup slot="icon" size="18" />
|
||||
<span slot="tooltip">{$_('toolbar.extract_tooltip')}</span>
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<ToolbarItem tool={Tool.WAYPOINT}>
|
||||
<MapPin slot="icon" size="18" />
|
||||
<span slot="tooltip">{$_('toolbar.waypoint_tooltip')}</span>
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<ToolbarItem tool={Tool.REDUCE}>
|
||||
<Shrink slot="icon" size="18" />
|
||||
<span slot="tooltip">{$_('toolbar.reduce_tooltip')}</span>
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<ToolbarItem tool={Tool.CLEAN}>
|
||||
<SquareDashedMousePointer slot="icon" size="18" />
|
||||
<span slot="tooltip">{$_('toolbar.clean_tooltip')}</span>
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<ToolbarItem tool={Tool.STYLE}>
|
||||
<Palette slot="icon" size="18" />
|
||||
<span slot="tooltip">{$_('toolbar.style_tooltip')}</span>
|
||||
</ToolbarItem>
|
||||
<ToolbarItem>
|
||||
<ToolbarItem tool={Tool.STRUCTURE}>
|
||||
<FolderTree slot="icon" size="18" />
|
||||
<span slot="tooltip">{$_('toolbar.structure_tooltip')}</span>
|
||||
</ToolbarItem>
|
||||
</div>
|
||||
<Routing />
|
||||
<Waypoint />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,23 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import * as Tooltip from '$lib/components/ui/tooltip/index.js';
|
||||
import { currentTool, type Tool } from '$lib/stores';
|
||||
|
||||
export let tool: Tool;
|
||||
|
||||
function toggleTool() {
|
||||
currentTool.update((current) => (current === tool ? null : tool));
|
||||
}
|
||||
</script>
|
||||
|
||||
<Tooltip.Root openDelay={300}>
|
||||
<Tooltip.Trigger asChild let:builder>
|
||||
<Button builders={[builder]} variant="ghost" class="h-fit px-1 py-1.5" on:click>
|
||||
<Button
|
||||
builders={[builder]}
|
||||
variant="ghost"
|
||||
class="h-fit px-1 py-1.5 {$currentTool === tool ? 'bg-accent' : ''}"
|
||||
on:click={toggleTool}
|
||||
>
|
||||
<slot name="icon" />
|
||||
</Button>
|
||||
</Tooltip.Trigger>
|
||||
|
||||
@@ -1,9 +1,22 @@
|
||||
<script lang="ts">
|
||||
import { type Tool, currentTool } from '$lib/stores';
|
||||
import { flyAndScale } from '$lib/utils';
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
|
||||
export let tool: Tool;
|
||||
export let active = false;
|
||||
|
||||
$: active = $currentTool === tool;
|
||||
</script>
|
||||
|
||||
<div in:flyAndScale={{ x: -2, y: 0, duration: 100 }} class="translate-x-1 h-full">
|
||||
<div class="rounded-md shadow-md pointer-events-auto">
|
||||
<slot />
|
||||
{#if active}
|
||||
<div in:flyAndScale={{ x: -2, y: 0, duration: 100 }} class="translate-x-1 h-full">
|
||||
<div class="rounded-md shadow-md pointer-events-auto">
|
||||
<Card.Root class="border-none">
|
||||
<Card.Content class="p-4 flex flex-col gap-4">
|
||||
<slot />
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
<script lang="ts">
|
||||
import ToolbarItemMenu from '$lib/components/toolbar/ToolbarItemMenu.svelte';
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import * as Select from '$lib/components/ui/select';
|
||||
import { Switch } from '$lib/components/ui/switch';
|
||||
import { Label } from '$lib/components/ui/label/index.js';
|
||||
import * as Alert from '$lib/components/ui/alert';
|
||||
import { CircleHelp } from 'lucide-svelte';
|
||||
|
||||
import { currentTool, files, getFileStore, map, selectedFiles, Tool } from '$lib/stores';
|
||||
import { files, getFileStore, map, selectedFiles, Tool } from '$lib/stores';
|
||||
import { brouterProfiles, privateRoads, routing, routingProfile } from './Routing';
|
||||
|
||||
import { _ } from 'svelte-i18n';
|
||||
@@ -34,8 +33,6 @@
|
||||
});
|
||||
}
|
||||
|
||||
$: active = $currentTool === Tool.ROUTING;
|
||||
|
||||
$: if ($map && $selectedFiles) {
|
||||
// update selected file
|
||||
if ($selectedFiles.size == 0 || $selectedFiles.size > 1 || !active) {
|
||||
@@ -76,49 +73,40 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if active}
|
||||
<ToolbarItemMenu>
|
||||
<Card.Root class="border-none">
|
||||
<Card.Content class="p-4 flex flex-col gap-4">
|
||||
<div class="w-full flex flex-row justify-between items-center gap-2">
|
||||
<Label>{$_('toolbar.routing.activity')}</Label>
|
||||
<Select.Root bind:selected={$routingProfile}>
|
||||
<Select.Trigger class="h-8 w-40">
|
||||
<Select.Value />
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{#each Object.keys(brouterProfiles) as profile}
|
||||
<Select.Item value={profile}
|
||||
>{$_(`toolbar.routing.activities.${profile}`)}</Select.Item
|
||||
>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
<div class="w-full flex flex-row justify-between items-center gap-2">
|
||||
<Label for="routing">{$_('toolbar.routing.use_routing')}</Label>
|
||||
<Switch id="routing" class="scale-90" bind:checked={$routing} />
|
||||
</div>
|
||||
<div class="w-full flex flex-row justify-between items-center gap-2">
|
||||
<Label for="private">{$_('toolbar.routing.allow_private')}</Label>
|
||||
<Switch id="private" class="scale-90" bind:checked={$privateRoads} />
|
||||
</div>
|
||||
<Alert.Root class="max-w-64">
|
||||
<CircleHelp size="16" />
|
||||
<!-- <Alert.Title>Heads up!</Alert.Title> -->
|
||||
<Alert.Description>
|
||||
{#if $selectedFiles.size > 1}
|
||||
<div>{$_('toolbar.routing.help_multiple_files')}</div>
|
||||
{:else if $selectedFiles.size == 0}
|
||||
<div>{$_('toolbar.routing.help_no_file')}</div>
|
||||
{:else}
|
||||
<div>{$_('toolbar.routing.help')}</div>
|
||||
{/if}
|
||||
</Alert.Description>
|
||||
</Alert.Root>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</ToolbarItemMenu>
|
||||
{/if}
|
||||
<ToolbarItemMenu tool={Tool.ROUTING} bind:active>
|
||||
<div class="w-full flex flex-row justify-between items-center gap-2">
|
||||
<Label>{$_('toolbar.routing.activity')}</Label>
|
||||
<Select.Root bind:selected={$routingProfile}>
|
||||
<Select.Trigger class="h-8 w-40">
|
||||
<Select.Value />
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{#each Object.keys(brouterProfiles) as profile}
|
||||
<Select.Item value={profile}>{$_(`toolbar.routing.activities.${profile}`)}</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
<div class="w-full flex flex-row justify-between items-center gap-2">
|
||||
<Label for="routing">{$_('toolbar.routing.use_routing')}</Label>
|
||||
<Switch id="routing" class="scale-90" bind:checked={$routing} />
|
||||
</div>
|
||||
<div class="w-full flex flex-row justify-between items-center gap-2">
|
||||
<Label for="private">{$_('toolbar.routing.allow_private')}</Label>
|
||||
<Switch id="private" class="scale-90" bind:checked={$privateRoads} />
|
||||
</div>
|
||||
<Alert.Root class="max-w-64">
|
||||
<CircleHelp size="16" />
|
||||
<Alert.Description>
|
||||
{#if $selectedFiles.size > 1}
|
||||
<div>{$_('toolbar.routing.help_multiple_files')}</div>
|
||||
{:else if $selectedFiles.size == 0}
|
||||
<div>{$_('toolbar.routing.help_no_file')}</div>
|
||||
{:else}
|
||||
<div>{$_('toolbar.routing.help')}</div>
|
||||
{/if}
|
||||
</Alert.Description>
|
||||
</Alert.Root>
|
||||
</ToolbarItemMenu>
|
||||
|
||||
<RoutingControlPopup bind:element={popupElement} />
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
<script lang="ts">
|
||||
import ToolbarItemMenu from '$lib/components/toolbar/ToolbarItemMenu.svelte';
|
||||
import * as Alert from '$lib/components/ui/alert';
|
||||
import { CircleHelp } from 'lucide-svelte';
|
||||
|
||||
import { Tool, selectedFiles } from '$lib/stores';
|
||||
|
||||
import { _ } from 'svelte-i18n';
|
||||
|
||||
$: $selectedFiles.forEach((file) => {
|
||||
// todo
|
||||
});
|
||||
</script>
|
||||
|
||||
<ToolbarItemMenu tool={Tool.WAYPOINT}>
|
||||
<div class="w-full flex flex-row justify-between items-center gap-2">todo</div>
|
||||
|
||||
<Alert.Root class="max-w-64">
|
||||
<CircleHelp size="16" />
|
||||
<Alert.Description>
|
||||
<div>{$_('toolbar.waypoint.help')}</div>
|
||||
</Alert.Description>
|
||||
</Alert.Root>
|
||||
</ToolbarItemMenu>
|
||||
Reference in New Issue
Block a user