steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-02 00:32:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

about page

Browse Source
This commit is contained in:
vcoppe
2024-07-05 16:08:16 +02:00
parent 9edcc5b55b
commit cb735db216
27 changed files with 44025 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
website/src/lib/components/toolbar/Toolbar.svelte
View File

@@ -16,44 +16,42 @@
import ToolbarItemMenu from './ToolbarItemMenu.svelte';
</script>
<div class="absolute top-0 bottom-0 left-0 z-20 flex flex-col justify-center pointer-events-none">
<div class="flex flex-row w-screen items-center">
<div
class="h-fit flex flex-col p-1 gap-1.5 bg-background rounded-r-md pointer-events-auto shadow-md"
>
<ToolbarItem tool={Tool.ROUTING}>
<Pencil slot="icon" size="18" class="h-" />
<span slot="tooltip">{$_('toolbar.routing.tooltip')}</span>
</ToolbarItem>
<ToolbarItem tool={Tool.WAYPOINT}>
<MapPin slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.waypoint.tooltip')}</span>
</ToolbarItem>
<ToolbarItem tool={Tool.SCISSORS}>
<Scissors slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.scissors.tooltip')}</span>
</ToolbarItem>
<ToolbarItem tool={Tool.TIME}>
<CalendarClock slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.time.tooltip')}</span>
</ToolbarItem>
<ToolbarItem tool={Tool.MERGE}>
<Group slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.merge.tooltip')}</span>
</ToolbarItem>
<ToolbarItem tool={Tool.EXTRACT}>
<Ungroup slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.extract.tooltip')}</span>
</ToolbarItem>
<ToolbarItem tool={Tool.REDUCE}>
<Filter slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.reduce.tooltip')}</span>
</ToolbarItem>
<ToolbarItem tool={Tool.CLEAN}>
<SquareDashedMousePointer slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.clean.tooltip')}</span>
</ToolbarItem>
</div>
<ToolbarItemMenu />
<div class="flex flex-row w-full items-center">
<div
class="h-fit flex flex-col p-1 gap-1.5 bg-background rounded-r-md pointer-events-auto shadow-md"
>
<ToolbarItem tool={Tool.ROUTING}>
<Pencil slot="icon" size="18" class="h-" />
<span slot="tooltip">{$_('toolbar.routing.tooltip')}</span>
</ToolbarItem>
<ToolbarItem tool={Tool.WAYPOINT}>
<MapPin slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.waypoint.tooltip')}</span>
</ToolbarItem>
<ToolbarItem tool={Tool.SCISSORS}>
<Scissors slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.scissors.tooltip')}</span>
</ToolbarItem>
<ToolbarItem tool={Tool.TIME}>
<CalendarClock slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.time.tooltip')}</span>
</ToolbarItem>
<ToolbarItem tool={Tool.MERGE}>
<Group slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.merge.tooltip')}</span>
</ToolbarItem>
<ToolbarItem tool={Tool.EXTRACT}>
<Ungroup slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.extract.tooltip')}</span>
</ToolbarItem>
<ToolbarItem tool={Tool.REDUCE}>
<Filter slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.reduce.tooltip')}</span>
</ToolbarItem>
<ToolbarItem tool={Tool.CLEAN}>
<SquareDashedMousePointer slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.clean.tooltip')}</span>
</ToolbarItem>
</div>
<ToolbarItemMenu />
</div>

5
website/src/lib/components/toolbar/ToolbarItemMenu.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import { Tool, currentTool } from '$lib/stores';
import { settings } from '$lib/db';
import { flyAndScale } from '$lib/utils';
import * as Card from '$lib/components/ui/card';
import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
@@ -14,6 +15,8 @@
import { onMount } from 'svelte';
import mapboxgl from 'mapbox-gl';
const { minimizeRoutingMenu } = settings;
let popupElement: HTMLElement;
let popup: mapboxgl.Popup;
@@ -36,7 +39,7 @@
<Card.Root class="rounded-md border-none">
<Card.Content class="p-2.5">
{#if $currentTool === Tool.ROUTING}
<Routing {popup} {popupElement} />
<Routing {popup} {popupElement} bind:minimized={$minimizeRoutingMenu} />
{:else if $currentTool === Tool.SCISSORS}
<Scissors />
{:else if $currentTool === Tool.WAYPOINT}

22
website/src/lib/components/toolbar/tools/routing/Routing.svelte
View File

@@ -36,13 +36,15 @@
import { onDestroy, onMount } from 'svelte';
import { TrackPoint } from 'gpx';
export let popup: mapboxgl.Popup;
export let popupElement: HTMLElement;
export let minimized = false;
export let minimizable = true;
export let popup: mapboxgl.Popup | undefined = undefined;
export let popupElement: HTMLElement | undefined = undefined;
let selectedItem: ListItem | null = null;
const { minimizeRoutingMenu, privateRoads, routing } = settings;
const { privateRoads, routing } = settings;
$: if ($map) {
$: if ($map && popup && popupElement) {
// remove controls for deleted files
routingControls.forEach((controls, fileId) => {
if (!$fileObservers.has(fileId)) {
@@ -93,9 +95,9 @@
});
</script>
{#if $minimizeRoutingMenu}
{#if minimized}
<div class="-m-1.5 -mb-2">
<Button variant="ghost" class="px-1 h-[26px]" on:click={() => ($minimizeRoutingMenu = false)}>
<Button variant="ghost" class="px-1 h-[26px]" on:click={() => (minimized = false)}>
<SquareArrowOutDownRight size="18" />
</Button>
</div>
@@ -207,9 +209,11 @@
<div>{$_('toolbar.routing.help')}</div>
{/if}
</Help>
<Button variant="ghost" class="px-1 h-6" on:click={() => ($minimizeRoutingMenu = true)}>
<SquareArrowUpLeft size="18" />
</Button>
{#if minimizable}
<Button variant="ghost" class="px-1 h-6" on:click={() => (minimized = true)}>
<SquareArrowUpLeft size="18" />
</Button>
{/if}
</div>
</div>
{/if}