refactoring for tools and start waypoint

This commit is contained in:
vcoppe
2024-04-28 18:59:31 +02:00
parent 6b201d8341
commit 583af07412
10 changed files with 202 additions and 95 deletions

View File

@@ -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>