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

progress

Browse Source
This commit is contained in:
vcoppe
2024-05-24 20:23:49 +02:00
parent 8e085a718f
commit fb21347e63
13 changed files with 203 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,5 @@
<script lang="ts">
import { 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 {
Group,
@@ -11,11 +9,11 @@
Ungroup,
MapPin,
Palette,
FolderTree,
Filter
} from 'lucide-svelte';
import { _ } from 'svelte-i18n';
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">
@@ -27,6 +25,10 @@
<Pencil slot="icon" size="18" />
<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.TIME}>
<CalendarClock slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.time_tooltip')}</span>
@@ -39,10 +41,6 @@
<Ungroup slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.extract_tooltip')}</span>
</ToolbarItem>
<ToolbarItem tool={Tool.WAYPOINT}>
<MapPin slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.waypoint_tooltip')}</span>
</ToolbarItem>
<ToolbarItem tool={Tool.REDUCE}>
<Filter slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.reduce_tooltip')}</span>
@@ -56,7 +54,6 @@
<span slot="tooltip">{$_('toolbar.style_tooltip')}</span>
</ToolbarItem>
</div>
<Routing />
<Waypoint />
<ToolbarItemMenu />
</div>
</div>

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

@@ -1,20 +1,39 @@
<script lang="ts">
import { type Tool, currentTool } from '$lib/stores';
import { Tool, currentTool } from '$lib/stores';
import { flyAndScale } from '$lib/utils';
import * as Card from '$lib/components/ui/card';
import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
import Waypoint from '$lib/components/toolbar/tools/waypoint/Waypoint.svelte';
import RoutingControlPopup from '$lib/components/toolbar/tools/routing/RoutingControlPopup.svelte';
import { onMount } from 'svelte';
import mapboxgl from 'mapbox-gl';
export let tool: Tool;
export let active = false;
let popupElement: HTMLElement;
let popup: mapboxgl.Popup;
$: active = $currentTool === tool;
onMount(() => {
popup = new mapboxgl.Popup({
closeButton: false,
maxWidth: undefined
});
popup.setDOMContent(popupElement);
popupElement.classList.remove('hidden');
});
</script>
{#if active}
<div in:flyAndScale={{ x: -2, y: 0, duration: 100 }} class="translate-x-1 h-full">
{#if $currentTool !== null}
<div
in:flyAndScale={{ x: -2, y: 0, duration: 100 }}
class="translate-x-1 h-full {$$props.class ?? ''}"
>
<div class="rounded-md shadow-md pointer-events-auto">
<Card.Root class="border-none">
<Card.Content class="p-3 flex flex-col gap-3">
<slot />
<Card.Content class="p-3">
{#if $currentTool === Tool.ROUTING}
<Routing {popup} {popupElement} />
{:else if $currentTool === Tool.WAYPOINT}
<Waypoint />
{/if}
</Card.Content>
</Card.Root>
</div>
@@ -23,8 +42,10 @@
<svelte:window
on:keydown={(e) => {
if (active && e.key === 'Escape') {
if ($currentTool && e.key === 'Escape') {
currentTool.set(null);
}
}}
/>
<RoutingControlPopup bind:element={popupElement} />

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

@@ -1,5 +1,4 @@
<script lang="ts">
import ToolbarItemMenu from '$lib/components/toolbar/ToolbarItemMenu.svelte';
import * as Select from '$lib/components/ui/select';
import { Switch } from '$lib/components/ui/switch';
import { Label } from '$lib/components/ui/label/index.js';
@@ -18,26 +17,22 @@
RouteOff
} from 'lucide-svelte';
import { map, Tool } from '$lib/stores';
import { map, routingControls } from '$lib/stores';
import { dbUtils, settings } from '$lib/db';
import { brouterProfiles, routingProfileSelectItem } from './Routing';
import { _ } from 'svelte-i18n';
import { get } from 'svelte/store';
import { RoutingControls } from './RoutingControls';
import RoutingControlPopup from './RoutingControlPopup.svelte';
import { onMount } from 'svelte';
import mapboxgl from 'mapbox-gl';
import { fileObservers } from '$lib/db';
import { slide } from 'svelte/transition';
import { selection } from '$lib/components/file-list/Selection';
import { ListRootItem, type ListItem } from '$lib/components/file-list/FileList';
let routingControls: Map<string, RoutingControls> = new Map();
let popupElement: HTMLElement;
let popup: mapboxgl.Popup | null = null;
export let popup: mapboxgl.Popup;
export let popupElement: HTMLElement;
let selectedItem: ListItem | null = null;
let active = false;
const { privateRoads, routing } = settings;
@@ -65,18 +60,9 @@
}
$: validSelection = $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']);
onMount(() => {
popup = new mapboxgl.Popup({
closeButton: false,
maxWidth: undefined
});
popup.setDOMContent(popupElement);
popupElement.classList.remove('hidden');
});
</script>
<ToolbarItemMenu tool={Tool.ROUTING} bind:active>
<div class=" flex flex-col gap-3">
<Tooltip>
<div slot="data" class="w-full flex flex-row justify-between items-center gap-2">
<Label for="routing" class="flex flex-row gap-1">
@@ -91,6 +77,7 @@
</div>
<span slot="tooltip">{$_('toolbar.routing.use_routing_tooltip')}</span>
</Tooltip>
{#if $routing}
<div class="flex flex-col gap-3" in:slide>
<div class="w-full flex flex-row justify-between items-center gap-2">
@@ -177,6 +164,4 @@
<div>{$_('toolbar.routing.help')}</div>
{/if}
</Help>
</ToolbarItemMenu>
<RoutingControlPopup bind:element={popupElement} />
</div>

3
website/src/lib/components/toolbar/tools/routing/RoutingControls.ts
View File

@@ -165,6 +165,9 @@ export class RoutingControls {
});
marker.getElement().addEventListener('click', (e) => {
e.stopPropagation();
if (marker === this.temporaryAnchor.marker) {
return;
}
if (Date.now() - lastDragEvent < 100) { // Prevent click event during drag
return;

34
website/src/lib/components/toolbar/tools/waypoint/Waypoint.svelte
View File

@@ -1,19 +1,35 @@
<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 { selection } from '$lib/components/file-list/Selection';
import { Tool } from '$lib/stores';
import type { Waypoint } from 'gpx';
import { _ } from 'svelte-i18n';
import { ListWaypointItem } from '$lib/components/file-list/FileList';
import { fileObservers } from '$lib/db';
import { get } from 'svelte/store';
$: $selection.forEach((item) => {
// todo
});
let waypoint: Waypoint | undefined = undefined;
$: if ($selection) {
waypoint = undefined;
$selection.forEach((item) => {
if (item instanceof ListWaypointItem) {
if (waypoint) return;
let fileStore = get(fileObservers).get(item.getFileId());
if (fileStore) {
waypoint = get(fileStore)?.file.wpt[item.getWaypointIndex()];
}
}
});
}
</script>
<ToolbarItemMenu tool={Tool.WAYPOINT}>
<div class="w-full flex flex-row justify-between items-center gap-2">todo</div>
<div class="flex flex-col gap-3 max-w-96">
{#if waypoint}
<span>{waypoint.name}</span>
<span>{waypoint.desc ?? ''}</span>
<span>{waypoint.cmt ?? ''}</span>
{/if}
<Alert.Root class="max-w-64">
<CircleHelp size="16" />
@@ -21,4 +37,4 @@
<div>{$_('toolbar.waypoint.help')}</div>
</Alert.Description>
</Alert.Root>
</ToolbarItemMenu>
</div>