steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 23:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

progress

Browse Source
This commit is contained in:
vcoppe
2024-05-22 16:05:31 +02:00
parent 94bfd791b7
commit f202b6c196
19 changed files with 553 additions and 395 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
website/src/lib/components/App.svelte
View File

@@ -8,6 +8,10 @@
import Toolbar from '$lib/components/toolbar/Toolbar.svelte'; import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
import LayerControl from '$lib/components/layer-control/LayerControl.svelte'; import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
import { Toaster } from '$lib/components/ui/sonner'; import { Toaster } from '$lib/components/ui/sonner';
import { settings } from '$lib/db';
const { verticalFileView } = settings;
</script> </script>
<div class="flex flex-row w-screen h-screen"> <div class="flex flex-row w-screen h-screen">
@@ -19,16 +23,20 @@
<LayerControl /> <LayerControl />
<GPXLayers /> <GPXLayers />
<Toaster richColors /> <Toaster richColors />
<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30"> {#if !$verticalFileView}
<FileList orientation="horizontal" class="pointer-events-auto" /> <div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
</div> <FileList orientation="horizontal" class="pointer-events-auto" />
</div>
{/if}
</div> </div>
<div class="h-48 flex flex-row gap-2 overflow-hidden"> <div class="h-48 flex flex-row gap-2 overflow-hidden">
<GPXStatistics /> <GPXStatistics />
<ElevationProfile /> <ElevationProfile />
</div> </div>
</div> </div>
<FileList orientation="vertical" recursive={true} class="w-60" /> {#if $verticalFileView}
<FileList orientation="vertical" recursive={true} class="w-60" />
{/if}
</div> </div>
<style lang="postcss"> <style lang="postcss">

156
website/src/lib/components/FileList.svelte
View File

@@ -1,156 +0,0 @@
<script lang="ts">
import { fileOrder, selectedFiles, selectFiles } from '$lib/stores';
import { ScrollArea } from '$lib/components/ui/scroll-area/index';
import Sortable from 'sortablejs/Sortable';
import { afterUpdate, onMount } from 'svelte';
import { get } from 'svelte/store';
import FileListItem from './FileListItem.svelte';
import { fileObservers } from '$lib/db';
let container: HTMLDivElement;
let buttons: { [id: string]: HTMLElement } = {};
let sortable: Sortable;
function selectFile(fileId: string) {
selectedFiles.update((selectedFiles) => {
selectedFiles.clear();
selectedFiles.add(fileId);
return selectedFiles;
});
}
function addSelectFile(fileId: string) {
selectedFiles.update((selectedFiles) => {
selectedFiles.add(fileId);
return selectedFiles;
});
}
function selectAllFiles() {
selectedFiles.update((selectedFiles) => {
get(fileObservers).forEach((_, id) => {
selectedFiles.add(id);
});
return selectedFiles;
});
}
function deselectFile(fileId: string) {
selectedFiles.update((selectedFiles) => {
selectedFiles.delete(fileId);
return selectedFiles;
});
}
function updateFileOrder() {
let newFileOrder = sortable.toArray();
if (newFileOrder.length !== get(fileOrder).length) {
fileOrder.set(newFileOrder);
return;
}
for (let i = 0; i < newFileOrder.length; i++) {
if (newFileOrder[i] !== get(fileOrder)[i]) {
fileOrder.set(newFileOrder);
return;
}
}
}
onMount(() => {
sortable = Sortable.create(container, {
forceAutoScrollFallback: true,
multiDrag: true,
multiDragKey: 'Meta',
selectedClass: 'sortable-selected',
avoidImplicitDeselect: true,
onSelect: (e) => {
let selectedId = e.item.getAttribute('data-id');
addSelectFile(selectedId);
if (
!(e.originalEvent.shiftKey || e.originalEvent.ctrlKey || e.originalEvent.metaKey) &&
$selectedFiles.size > 1
) {
$selectedFiles.forEach((fileId) => {
if (fileId !== selectedId) {
deselectFile(fileId);
Sortable.utils.deselect(buttons[fileId]);
}
});
}
},
onDeselect: (e) => {
deselectFile(e.item.getAttribute('data-id'));
},
onSort: () => {
updateFileOrder();
}
});
});
selectFiles.update(() => {
return {
select: (fileId: string) => {
Object.values(buttons).forEach((button) => {
Sortable.utils.deselect(button);
});
Sortable.utils.select(buttons[fileId]);
selectFile(fileId);
},
addSelect: (fileId: string) => {
Sortable.utils.select(buttons[fileId]);
addSelectFile(fileId);
},
selectAllFiles: () => {
Object.values(buttons).forEach((button) => {
Sortable.utils.select(button);
});
selectAllFiles();
},
removeSelect: (fileId: string) => {
Sortable.utils.deselect(buttons[fileId]);
deselectFile(fileId);
}
};
});
afterUpdate(() => {
updateFileOrder();
Object.keys(buttons).forEach((fileId) => {
if (!get(fileObservers).has(fileId)) {
delete buttons[fileId];
}
});
});
</script>
<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
<ScrollArea orientation="horizontal" class="w-full h-full" scrollbarXClasses="h-2">
<div bind:this={container} class="flex flex-row gap-1">
{#if $fileObservers}
{#each $fileObservers.entries() as [fileId, file]}
<div
bind:this={buttons[fileId]}
data-id={fileId}
class="pointer-events-auto first:ml-1 last:mr-1 mb-1 bg-transparent"
>
<FileListItem {file} />
</div>
{/each}
{/if}
</div>
</ScrollArea>
</div>
<style lang="postcss">
div :global(button) {
@apply bg-accent;
@apply hover:bg-background;
}
div :global(.sortable-selected button) {
@apply bg-background;
}
</style>

60
website/src/lib/components/FileListItem.svelte
View File

@@ -1,60 +0,0 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button';
import * as ContextMenu from '$lib/components/ui/context-menu';
import Shortcut from './Shortcut.svelte';
import { Copy, Trash2 } from 'lucide-svelte';
import { get, type Readable } from 'svelte/store';
import { selectedFiles, selectFiles } from '$lib/stores';
import { dbUtils, type GPXFileWithStatistics } from '$lib/db';
import { _ } from 'svelte-i18n';
export let file: Readable<GPXFileWithStatistics | undefined>;
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
{#if $file}
<div
on:contextmenu={() => {
if (!get(selectedFiles).has($file.file._data.id)) {
get(selectFiles).select($file.file._data.id);
}
}}
>
<ContextMenu.Root>
<ContextMenu.Trigger>
<Button
variant="outline"
class="h-9 p-0 border-none shadow-md focus-visible:ring-0 focus-visible:ring-offset-0"
>
<span
class="w-full h-full px-1.5 py-2"
on:contextmenu={(e) => {
if (e.ctrlKey) {
get(selectFiles).addSelect($file.file._data.id);
e.stopPropagation();
e.preventDefault();
}
}}
>
{$file.file.metadata.name}
</span>
</Button>
</ContextMenu.Trigger>
<ContextMenu.Content>
<ContextMenu.Item on:click={dbUtils.duplicateSelectedFiles}>
<Copy size="16" class="mr-1" />
{$_('menu.duplicate')}
<Shortcut key="D" ctrl={true} /></ContextMenu.Item
>
<ContextMenu.Separator />
<ContextMenu.Item on:click={dbUtils.deleteSelectedFiles}
><Trash2 size="16" class="mr-1" />
{$_('menu.delete')}
<Shortcut key="⌫" ctrl={true} /></ContextMenu.Item
>
</ContextMenu.Content>
</ContextMenu.Root>
</div>
{/if}

23
website/src/lib/components/Menu.svelte
View File

@@ -22,18 +22,19 @@
Zap, Zap,
Thermometer, Thermometer,
Sun, Sun,
Moon Moon,
Rows3
} from 'lucide-svelte'; } from 'lucide-svelte';
import { import {
map, map,
selectedFiles,
exportAllFiles, exportAllFiles,
exportSelectedFiles, exportSelectedFiles,
triggerFileInput, triggerFileInput,
selectFiles, selectFiles,
createFile createFile
} from '$lib/stores'; } from '$lib/stores';
import { selection } from '$lib/components/file-list/Selection';
import { derived } from 'svelte/store'; import { derived } from 'svelte/store';
import { canUndo, canRedo, dbUtils, fileObservers, settings } from '$lib/db'; import { canUndo, canRedo, dbUtils, fileObservers, settings } from '$lib/db';
@@ -47,6 +48,7 @@
distanceUnits, distanceUnits,
velocityUnits, velocityUnits,
temperatureUnits, temperatureUnits,
verticalFileView,
mode, mode,
currentBasemap, currentBasemap,
previousBasemap, previousBasemap,
@@ -113,16 +115,13 @@
{$_('menu.load_drive')}</Menubar.Item {$_('menu.load_drive')}</Menubar.Item
> >
<Menubar.Separator /> <Menubar.Separator />
<Menubar.Item <Menubar.Item on:click={dbUtils.duplicateSelection} disabled={$selection.size == 0}>
on:click={dbUtils.duplicateSelectedFiles}
disabled={$selectedFiles.size == 0}
>
<Copy size="16" class="mr-1" /> <Copy size="16" class="mr-1" />
{$_('menu.duplicate')} {$_('menu.duplicate')}
<Shortcut key="D" ctrl={true} /> <Shortcut key="D" ctrl={true} />
</Menubar.Item> </Menubar.Item>
<Menubar.Separator /> <Menubar.Separator />
<Menubar.Item on:click={exportSelectedFiles} disabled={$selectedFiles.size == 0}> <Menubar.Item on:click={exportSelectedFiles} disabled={$selection.size == 0}>
<Download size="16" class="mr-1" /> <Download size="16" class="mr-1" />
{$_('menu.export')} {$_('menu.export')}
<Shortcut key="S" ctrl={true} /> <Shortcut key="S" ctrl={true} />
@@ -154,7 +153,7 @@
<Shortcut key="A" ctrl={true} /> <Shortcut key="A" ctrl={true} />
</Menubar.Item> </Menubar.Item>
<Menubar.Separator /> <Menubar.Separator />
<Menubar.Item on:click={dbUtils.deleteSelectedFiles} disabled={$selectedFiles.size == 0}> <Menubar.Item on:click={dbUtils.deleteSelection} disabled={$selection.size == 0}>
<Trash2 size="16" class="mr-1" /> <Trash2 size="16" class="mr-1" />
{$_('menu.delete')} {$_('menu.delete')}
<Shortcut key="⌫" ctrl={true} /> <Shortcut key="⌫" ctrl={true} />
@@ -173,6 +172,10 @@
<Menubar.Menu> <Menubar.Menu>
<Menubar.Trigger>{$_('menu.view')}</Menubar.Trigger> <Menubar.Trigger>{$_('menu.view')}</Menubar.Trigger>
<Menubar.Content class="border-none"> <Menubar.Content class="border-none">
<Menubar.CheckboxItem bind:checked={$verticalFileView}>
<Rows3 size="16" class="mr-1" />{$_('menu.vertical_file_view')}
</Menubar.CheckboxItem>
<Menubar.Separator />
<Menubar.Item inset on:click={switchBasemaps} <Menubar.Item inset on:click={switchBasemaps}
><Map size="16" class="mr-1" />{$_('menu.switch_basemap')}<Shortcut ><Map size="16" class="mr-1" />{$_('menu.switch_basemap')}<Shortcut
key="F1" key="F1"
@@ -289,7 +292,7 @@
triggerFileInput(); triggerFileInput();
e.preventDefault(); e.preventDefault();
} else if (e.key === 'd' && (e.metaKey || e.ctrlKey)) { } else if (e.key === 'd' && (e.metaKey || e.ctrlKey)) {
dbUtils.duplicateSelectedFiles(); dbUtils.duplicateSelection();
e.preventDefault(); e.preventDefault();
} else if ((e.key === 's' || e.key == 'S') && (e.metaKey || e.ctrlKey)) { } else if ((e.key === 's' || e.key == 'S') && (e.metaKey || e.ctrlKey)) {
if (e.shiftKey) { if (e.shiftKey) {
@@ -308,7 +311,7 @@
if (e.shiftKey) { if (e.shiftKey) {
dbUtils.deleteAllFiles(); dbUtils.deleteAllFiles();
} else { } else {
dbUtils.deleteSelectedFiles(); dbUtils.deleteSelection();
} }
e.preventDefault(); e.preventDefault();
} else if (e.key === 'a' && (e.metaKey || e.ctrlKey)) { } else if (e.key === 'a' && (e.metaKey || e.ctrlKey)) {

1
website/src/lib/components/collapsible-tree/CollapsibleTree.svelte
View File

@@ -14,6 +14,7 @@
setContext('collapsible-tree-side', side); setContext('collapsible-tree-side', side);
setContext('collapsible-tree-margin', margin); setContext('collapsible-tree-margin', margin);
setContext('collapsible-tree-nohover', nohover); setContext('collapsible-tree-nohover', nohover);
setContext('collapsible-tree-parent-id', 'root');
</script> </script>
<slot /> <slot />

18
website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte
View File

@@ -2,26 +2,30 @@
import * as Collapsible from '$lib/components/ui/collapsible'; import * as Collapsible from '$lib/components/ui/collapsible';
import { Button } from '$lib/components/ui/button'; import { Button } from '$lib/components/ui/button';
import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-svelte'; import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-svelte';
import { getContext } from 'svelte'; import { getContext, setContext } from 'svelte';
import type { Writable } from 'svelte/store'; import type { Writable } from 'svelte/store';
export let id: string; export let id: string | number;
let defaultState = getContext<'open' | 'closed'>('collapsible-tree-default-state'); let defaultState = getContext<'open' | 'closed'>('collapsible-tree-default-state');
let open = getContext<Writable<Record<string, boolean>>>('collapsible-tree-state'); let open = getContext<Writable<Record<string, boolean>>>('collapsible-tree-state');
let side = getContext<'left' | 'right'>('collapsible-tree-side'); let side = getContext<'left' | 'right'>('collapsible-tree-side');
let margin = getContext<number>('collapsible-tree-margin'); let margin = getContext<number>('collapsible-tree-margin');
let nohover = getContext<boolean>('collapsible-tree-nohover'); let nohover = getContext<boolean>('collapsible-tree-nohover');
let parentId = getContext<string>('collapsible-tree-parent-id');
let fullId = `${parentId}.${id}`;
setContext('collapsible-tree-parent-id', fullId);
open.update((value) => { open.update((value) => {
if (!value.hasOwnProperty(id)) { if (!value.hasOwnProperty(fullId)) {
value[id] = defaultState === 'open'; value[fullId] = defaultState === 'open';
} }
return value; return value;
}); });
</script> </script>
<Collapsible.Root bind:open={$open[id]} class={$$props.class ?? ''}> <Collapsible.Root bind:open={$open[fullId]} class={$$props.class ?? ''}>
<Collapsible.Trigger class="w-full"> <Collapsible.Trigger class="w-full">
<Button <Button
variant="ghost" variant="ghost"
@@ -30,7 +34,7 @@
: 'justify-start'} py-0 px-1 h-fit {nohover ? 'hover:bg-background' : ''}" : 'justify-start'} py-0 px-1 h-fit {nohover ? 'hover:bg-background' : ''}"
> >
{#if side === 'left'} {#if side === 'left'}
{#if $open[id]} {#if $open[fullId]}
<ChevronDown size="16" class="shrink-0" /> <ChevronDown size="16" class="shrink-0" />
{:else} {:else}
<ChevronRight size="16" class="shrink-0" /> <ChevronRight size="16" class="shrink-0" />
@@ -38,7 +42,7 @@
{/if} {/if}
<slot name="trigger" /> <slot name="trigger" />
{#if side === 'right'} {#if side === 'right'}
{#if $open[id]} {#if $open[fullId]}
<ChevronDown size="16" class="shrink-0" /> <ChevronDown size="16" class="shrink-0" />
{:else} {:else}
<ChevronLeft size="16" class="shrink-0" /> <ChevronLeft size="16" class="shrink-0" />

8
website/src/lib/components/file-list/FileList.svelte
View File

@@ -4,24 +4,22 @@
import { fileObservers } from '$lib/db'; import { fileObservers } from '$lib/db';
import { setContext } from 'svelte'; import { setContext } from 'svelte';
import { writable } from 'svelte/store'; import { ListRootItem } from './FileList';
export let orientation: 'vertical' | 'horizontal'; export let orientation: 'vertical' | 'horizontal';
export let recursive = false; export let recursive = false;
export let selected = writable(new Set<string>());
setContext('orientation', orientation); setContext('orientation', orientation);
setContext('recursive', recursive); setContext('recursive', recursive);
setContext('selected', selected);
</script> </script>
<ScrollArea <ScrollArea
class={orientation === 'vertical' ? 'p-1 pr-3 border-l' : 'h-10 px-1'} class={orientation === 'vertical' ? 'p-1 pr-3' : 'h-10 px-1'}
{orientation} {orientation}
scrollbarXClasses={orientation === 'vertical' ? '' : 'mt-1 h-2'} scrollbarXClasses={orientation === 'vertical' ? '' : 'mt-1 h-2'}
scrollbarYClasses={orientation === 'vertical' ? '' : ''} scrollbarYClasses={orientation === 'vertical' ? '' : ''}
> >
<div class="flex {orientation === 'vertical' ? 'flex-col' : 'flex-row'} {$$props.class ?? ''}"> <div class="flex {orientation === 'vertical' ? 'flex-col' : 'flex-row'} {$$props.class ?? ''}">
<FileListNode node={$fileObservers} id="root" /> <FileListNode node={$fileObservers} item={new ListRootItem()} />
</div> </div>
</ScrollArea> </ScrollArea>

301
website/src/lib/components/file-list/FileList.ts Normal file
View File

@@ -0,0 +1,301 @@
export class SelectionTreeType {
item: ListItem;
selected: boolean;
children: {
[key: string | number]: SelectionTreeType
};
constructor(item: ListItem) {
this.item = item;
this.selected = false;
this.children = {};
}
clear() {
this.selected = false;
for (let key in this.children) {
this.children[key].clear();
}
}
_setOrToggle(item: ListItem, value?: boolean) {
if (item.level === this.item.level) {
this.selected = value === undefined ? !this.selected : value;
} else {
let id = item.getIdAtLevel(this.item.level);
if (id !== undefined) {
if (!this.children.hasOwnProperty(id)) {
this.children[id] = new SelectionTreeType(this.item.extend(id));
}
this.children[id]._setOrToggle(item, value);
}
}
}
set(item: ListItem, value: boolean) {
this._setOrToggle(item, value);
}
toggle(item: ListItem) {
this._setOrToggle(item);
}
has(item: ListItem): boolean {
if (item.level === this.item.level) {
return this.selected;
} else {
let id = item.getIdAtLevel(this.item.level);
if (id !== undefined) {
if (this.children.hasOwnProperty(id)) {
return this.children[id].has(item);
}
}
}
return false;
}
getSelected(selection?: ListItem[]): ListItem[] {
if (selection === undefined) {
selection = [];
}
if (this.selected) {
selection.push(this.item);
}
for (let key in this.children) {
this.children[key].getSelected(selection);
}
return selection;
}
forEach(callback: (item: ListItem) => void) {
if (this.selected) {
callback(this.item);
}
for (let key in this.children) {
this.children[key].forEach(callback);
}
}
getChild(id: string | number): SelectionTreeType | undefined {
return this.children[id];
}
get size(): number {
let size = this.selected ? 1 : 0;
for (let key in this.children) {
size += this.children[key].size;
}
return size;
}
};
export type ListLevel = 'root' | 'file' | 'track' | 'segment' | 'waypoints' | 'waypoint';
export abstract class ListItem {
level: ListLevel;
constructor(level: ListLevel) {
this.level = level;
}
abstract getId(): string | number;
abstract getIdAtLevel(level: ListLevel): string | number | undefined;
abstract getFileId(): string;
abstract extend(id: string | number): ListItem;
}
export class ListRootItem extends ListItem {
constructor() {
super('root');
}
getId(): string {
return 'root';
}
getIdAtLevel(level: ListLevel): string | number | undefined {
return undefined;
}
getFileId(): string {
return '';
}
extend(id: string): ListFileItem {
return new ListFileItem(id);
}
}
export class ListFileItem extends ListItem {
fileId: string;
constructor(fileId: string) {
super('file');
this.fileId = fileId;
}
getId(): string {
return this.fileId;
}
getIdAtLevel(level: ListLevel): string | number | undefined {
switch (level) {
case 'root':
return this.fileId;
default:
return undefined;
}
}
getFileId(): string {
return this.fileId;
}
extend(id: number | 'waypoints'): ListTrackItem | ListWaypointsItem {
if (id === 'waypoints') {
return new ListWaypointsItem(this.fileId);
} else {
return new ListTrackItem(this.fileId, id);
}
}
}
export class ListTrackItem extends ListItem {
fileId: string;
trackIndex: number;
constructor(fileId: string, trackIndex: number) {
super('track');
this.fileId = fileId;
this.trackIndex = trackIndex;
}
getId(): number {
return this.trackIndex;
}
getIdAtLevel(level: ListLevel): string | number | undefined {
switch (level) {
case 'root':
return this.fileId;
case 'file':
return this.trackIndex;
default:
return undefined;
}
}
getFileId(): string {
return this.fileId;
}
extend(id: number): ListSegmentItem {
return new ListSegmentItem(this.fileId, this.trackIndex, id);
}
}
export class ListSegmentItem extends ListItem {
fileId: string;
trackIndex: number;
segmentIndex: number;
constructor(fileId: string, trackIndex: number, segmentIndex: number) {
super('segment');
this.fileId = fileId;
this.trackIndex = trackIndex;
this.segmentIndex = segmentIndex;
}
getId(): number {
return this.segmentIndex;
}
getIdAtLevel(level: ListLevel): string | number | undefined {
switch (level) {
case 'root':
return this.fileId;
case 'file':
return this.trackIndex;
case 'track':
return this.segmentIndex;
default:
return undefined;
}
}
getFileId(): string {
return this.fileId;
}
extend(): ListSegmentItem {
return this;
}
}
export class ListWaypointsItem extends ListItem {
fileId: string;
constructor(fileId: string) {
super('waypoints');
this.fileId = fileId;
}
getId(): string {
return 'waypoints';
}
getIdAtLevel(level: ListLevel): string | number | undefined {
switch (level) {
case 'root':
return this.fileId;
case 'file':
return 'waypoints';
default:
return undefined;
}
}
getFileId(): string {
return this.fileId;
}
extend(id: number): ListWaypointItem {
return new ListWaypointItem(this.fileId, id);
}
}
export class ListWaypointItem extends ListItem {
fileId: string;
waypointIndex: number;
constructor(fileId: string, waypointIndex: number) {
super('waypoint');
this.fileId = fileId;
this.waypointIndex = waypointIndex;
}
getId(): number {
return this.waypointIndex;
}
getIdAtLevel(level: ListLevel): string | number | undefined {
switch (level) {
case 'root':
return this.fileId;
case 'file':
return 'waypoints';
case 'waypoints':
return this.waypointIndex;
default:
return undefined;
}
}
getFileId(): string {
return this.fileId;
}
extend(): ListWaypointItem {
return this;
}
}

16
website/src/lib/components/file-list/FileListNode.svelte
View File

@@ -6,13 +6,13 @@
import FileListNodeContent from './FileListNodeContent.svelte'; import FileListNodeContent from './FileListNodeContent.svelte';
import FileListNodeLabel from './FileListNodeLabel.svelte'; import FileListNodeLabel from './FileListNodeLabel.svelte';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import { type ListItem, type ListTrackItem } from './FileList';
export let node: export let node:
| Map<string, Readable<GPXFileWithStatistics | undefined>> | Map<string, Readable<GPXFileWithStatistics | undefined>>
| GPXTreeElement<AnyGPXTreeElement> | GPXTreeElement<AnyGPXTreeElement>
| ReadonlyArray<Readonly<Waypoint>>; | ReadonlyArray<Readonly<Waypoint>>;
export let id: string; export let item: ListItem;
export let index: number = 0;
let recursive = getContext<boolean>('recursive'); let recursive = getContext<boolean>('recursive');
@@ -20,21 +20,21 @@
node instanceof GPXFile node instanceof GPXFile
? node.metadata.name ? node.metadata.name
: node instanceof Track : node instanceof Track
? node.name ?? `Track ${index + 1}` ? node.name ?? `Track ${(item as ListTrackItem).trackIndex + 1}`
: Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint : Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint
? 'Waypoints' ? 'Waypoints'
: ''; : '';
</script> </script>
{#if node instanceof Map} {#if node instanceof Map}
<FileListNodeContent {node} {id} /> <FileListNodeContent {node} {item} />
{:else if recursive} {:else if recursive}
<CollapsibleTreeNode {id}> <CollapsibleTreeNode id={item.getId()}>
<FileListNodeLabel {id} {label} slot="trigger" /> <FileListNodeLabel {item} {label} slot="trigger" />
<div slot="content"> <div slot="content">
<FileListNodeContent {node} {id} /> <FileListNodeContent {node} {item} />
</div> </div>
</CollapsibleTreeNode> </CollapsibleTreeNode>
{:else} {:else}
<FileListNodeLabel {id} {label} /> <FileListNodeLabel {item} {label} />
{/if} {/if}

81
website/src/lib/components/file-list/FileListNodeContent.svelte
View File

@@ -3,20 +3,22 @@
import { afterUpdate, getContext, onDestroy, onMount } from 'svelte'; import { afterUpdate, getContext, onDestroy, onMount } from 'svelte';
import Sortable from 'sortablejs/Sortable'; import Sortable from 'sortablejs/Sortable';
import { settings, type GPXFileWithStatistics } from '$lib/db'; import { settings, type GPXFileWithStatistics } from '$lib/db';
import { get, type Readable, type Writable } from 'svelte/store'; import { get, type Readable } from 'svelte/store';
import FileListNodeStore from './FileListNodeStore.svelte'; import FileListNodeStore from './FileListNodeStore.svelte';
import FileListNode from './FileListNode.svelte'; import FileListNode from './FileListNode.svelte';
import FileListNodeLabel from './FileListNodeLabel.svelte'; import FileListNodeLabel from './FileListNodeLabel.svelte';
import { type ListItem } from './FileList';
import { selection } from './Selection';
export let node: export let node:
| Map<string, Readable<GPXFileWithStatistics | undefined>> | Map<string, Readable<GPXFileWithStatistics | undefined>>
| GPXTreeElement<AnyGPXTreeElement> | GPXTreeElement<AnyGPXTreeElement>
| ReadonlyArray<Readonly<Waypoint>>; | ReadonlyArray<Readonly<Waypoint>>;
export let item: ListItem;
export let waypointRoot: boolean = false; export let waypointRoot: boolean = false;
export let id: string;
let container: HTMLElement; let container: HTMLElement;
let items: { [id: string | number]: HTMLElement } = {}; let elements: { [id: string | number]: HTMLElement } = {};
let sortableLevel = let sortableLevel =
node instanceof Map node instanceof Map
? 'file' ? 'file'
@@ -36,17 +38,15 @@
let sortable: Sortable; let sortable: Sortable;
let orientation = getContext<'vertical' | 'horizontal'>('orientation'); let orientation = getContext<'vertical' | 'horizontal'>('orientation');
let selected = getContext<Writable<Set<string>>>('selected');
function onSelectChange() { function onSelectChange() {
selected.update(($selected) => { selection.update(($selection) => {
$selected.clear(); $selection.clear();
Object.entries(items).forEach(([id, item]) => { Object.entries(elements).forEach(([id, element]) => {
if (item.classList.contains('sortable-selected')) { let realId = sortableLevel === 'file' || sortableLevel === 'waypoints' ? id : parseInt(id);
$selected.add(id); $selection.set(item.extend(realId), element.classList.contains('sortable-selected'));
}
}); });
return $selected; return $selection;
}); });
} }
@@ -54,6 +54,13 @@
if (sortableLevel !== 'file') { if (sortableLevel !== 'file') {
return; return;
} }
/*Object.keys(buttons).forEach((fileId) => {
if (!get(fileObservers).has(fileId)) {
delete buttons[fileId];
}
});*/
const currentOrder = sortable.toArray(); const currentOrder = sortable.toArray();
if (currentOrder.length !== $fileOrder.length) { if (currentOrder.length !== $fileOrder.length) {
sortable.sort($fileOrder); sortable.sort($fileOrder);
@@ -108,14 +115,18 @@
afterUpdate(() => { afterUpdate(() => {
syncFileOrder(); syncFileOrder();
// TODO: update selection if files are removed
}); });
const unsubscribe = selected.subscribe(($selected) => { const unsubscribe = selection.subscribe(($selection) => {
Object.entries(items).forEach(([id, item]) => { Object.entries(elements).forEach(([id, element]) => {
if ($selected.has(id) && !item.classList.contains('sortable-selected')) { let realId = sortableLevel === 'file' || sortableLevel === 'waypoints' ? id : parseInt(id);
Sortable.utils.select(item); let inSelection = $selection.has(item.extend(realId));
} else if (!$selected.has(id) && item.classList.contains('sortable-selected')) { let isSelected = element.classList.contains('sortable-selected');
Sortable.utils.deselect(item); if (inSelection && !isSelected) {
Sortable.utils.select(element);
} else if (!inSelection && isSelected) {
Sortable.utils.deselect(element);
} }
}); });
}); });
@@ -123,18 +134,6 @@
onDestroy(() => { onDestroy(() => {
unsubscribe(); unsubscribe();
}); });
function getChildId(i: number): string {
switch (sortableLevel) {
case 'track':
return `${id}-track-${i}`;
case 'segment':
return `${id}-seg-${i}`;
case 'waypoint':
return `${id}-${i}`;
}
return '';
}
</script> </script>
<div <div
@@ -143,38 +142,34 @@
> >
{#if node instanceof Map} {#if node instanceof Map}
{#each node as [fileId, file]} {#each node as [fileId, file]}
<div bind:this={items[fileId]} data-id={fileId}> <div bind:this={elements[fileId]} data-id={fileId}>
<FileListNodeStore {file} /> <FileListNodeStore {file} />
</div> </div>
{/each} {/each}
{:else if node instanceof GPXFile} {:else if node instanceof GPXFile}
{#if waypointRoot} {#if waypointRoot}
{#if node.wpt.length > 0} {#if node.wpt.length > 0}
<div bind:this={items[`${id}-wpt`]}> <div bind:this={elements['waypoints']}>
<FileListNode node={node.wpt} id={`${id}-wpt`} /> <FileListNode node={node.wpt} item={item.extend('waypoints')} />
</div> </div>
{/if} {/if}
{:else} {:else}
{#each node.children as child, i} {#each node.children as child, i}
<div bind:this={items[getChildId(i)]}> <div bind:this={elements[i]}>
<FileListNode node={child} id={getChildId(i)} index={i} /> <FileListNode node={child} item={item.extend(i)} />
</div> </div>
{/each} {/each}
{/if} {/if}
{:else if node instanceof Track} {:else if node instanceof Track}
{#each node.children as child, i} {#each node.children as child, i}
<div bind:this={items[getChildId(i)]} class="ml-1"> <div bind:this={elements[i]} class="ml-1">
<div> <FileListNodeLabel item={item.extend(i)} label={`Segment ${i + 1}`} />
<FileListNodeLabel id={getChildId(i)} label={`Segment ${i + 1}`} />
</div>
</div> </div>
{/each} {/each}
{:else if Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint} {:else if Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint}
{#each node as wpt, i} {#each node as wpt, i}
<div bind:this={items[getChildId(i)]} class="ml-1"> <div bind:this={elements[i]} class="ml-1">
<div> <FileListNodeLabel item={item.extend(i)} label={wpt.name ?? `Waypoint ${i + 1}`} />
<FileListNodeLabel id={getChildId(i)} label={wpt.name ?? `Waypoint ${i + 1}`} />
</div>
</div> </div>
{/each} {/each}
{/if} {/if}
@@ -182,7 +177,7 @@
{#if node instanceof GPXFile} {#if node instanceof GPXFile}
{#if !waypointRoot} {#if !waypointRoot}
<svelte:self {node} {id} waypointRoot={true} /> <svelte:self {node} {item} waypointRoot={true} />
{/if} {/if}
{/if} {/if}

21
website/src/lib/components/file-list/FileListNodeLabel.svelte
View File

@@ -4,16 +4,14 @@
import Shortcut from '$lib/components/Shortcut.svelte'; import Shortcut from '$lib/components/Shortcut.svelte';
import { dbUtils } from '$lib/db'; import { dbUtils } from '$lib/db';
import { Copy, Trash2 } from 'lucide-svelte'; import { Copy, Trash2 } from 'lucide-svelte';
import { type ListItem } from './FileList';
import { selection } from './Selection';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import { type Writable } from 'svelte/store';
export let id: string; export let item: ListItem;
export let label: string | undefined; export let label: string | undefined;
let selected = getContext<Writable<Set<string>>>('selected');
let orientation = getContext<'vertical' | 'horizontal'>('orientation'); let orientation = getContext<'vertical' | 'horizontal'>('orientation');
</script> </script>
@@ -38,14 +36,7 @@
// Add to selection instead of opening context menu // Add to selection instead of opening context menu
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
selected.update((value) => { $selection.toggle(item);
if (value.has(id)) {
value.delete(id);
} else {
value.add(id);
}
return value;
});
} }
}} }}
> >
@@ -54,13 +45,13 @@
</Button> </Button>
</ContextMenu.Trigger> </ContextMenu.Trigger>
<ContextMenu.Content> <ContextMenu.Content>
<ContextMenu.Item on:click={dbUtils.duplicateSelectedFiles}> <ContextMenu.Item on:click={dbUtils.duplicateSelection}>
<Copy size="16" class="mr-1" /> <Copy size="16" class="mr-1" />
{$_('menu.duplicate')} {$_('menu.duplicate')}
<Shortcut key="D" ctrl={true} /></ContextMenu.Item <Shortcut key="D" ctrl={true} /></ContextMenu.Item
> >
<ContextMenu.Separator /> <ContextMenu.Separator />
<ContextMenu.Item on:click={dbUtils.deleteSelectedFiles} <ContextMenu.Item on:click={dbUtils.deleteSelection}
><Trash2 size="16" class="mr-1" /> ><Trash2 size="16" class="mr-1" />
{$_('menu.delete')} {$_('menu.delete')}
<Shortcut key="⌫" ctrl={true} /></ContextMenu.Item <Shortcut key="⌫" ctrl={true} /></ContextMenu.Item

5
website/src/lib/components/file-list/FileListNodeStore.svelte
View File

@@ -5,6 +5,7 @@
import type { GPXFileWithStatistics } from '$lib/db'; import type { GPXFileWithStatistics } from '$lib/db';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
import type { Readable } from 'svelte/store'; import type { Readable } from 'svelte/store';
import { ListFileItem } from './FileList';
export let file: Readable<GPXFileWithStatistics | undefined>; export let file: Readable<GPXFileWithStatistics | undefined>;
@@ -14,9 +15,9 @@
{#if $file} {#if $file}
{#if recursive} {#if recursive}
<CollapsibleTree side="left" margin={4} defaultState="closed"> <CollapsibleTree side="left" margin={4} defaultState="closed">
<FileListNode node={$file.file} id={$file.file._data.id} /> <FileListNode node={$file.file} item={new ListFileItem($file.file._data.id)} />
</CollapsibleTree> </CollapsibleTree>
{:else} {:else}
<FileListNode node={$file.file} id={$file.file._data.id} /> <FileListNode node={$file.file} item={new ListFileItem($file.file._data.id)} />
{/if} {/if}
{/if} {/if}

14
website/src/lib/components/file-list/Selection.ts Normal file
View File

@@ -0,0 +1,14 @@
import { get, writable } from "svelte/store";
import { ListFileItem, ListRootItem, SelectionTreeType } from "./FileList";
import { fileObservers } from "$lib/db";
export const selection = writable<SelectionTreeType>(new SelectionTreeType(new ListRootItem()));
export function selectAll() {
selection.update(($selection) => {
get(fileObservers).forEach((_file, fileId) => {
$selection.set(new ListFileItem(fileId), true);
});
return $selection;
});
}

7
website/src/lib/components/gpx-layer/GPXLayers.svelte
View File

@@ -1,9 +1,10 @@
<script lang="ts"> <script lang="ts">
import { map, selectedFiles, gpxLayers } from '$lib/stores'; import { map, gpxLayers } from '$lib/stores';
import { GPXLayer } from './GPXLayer'; import { GPXLayer } from './GPXLayer';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
import WaypointPopup from './WaypointPopup.svelte'; import WaypointPopup from './WaypointPopup.svelte';
import { fileObservers } from '$lib/db'; import { fileObservers } from '$lib/db';
import { selection } from '$lib/components/file-list/Selection';
$: if ($map && $fileObservers) { $: if ($map && $fileObservers) {
gpxLayers.update(($layers) => { gpxLayers.update(($layers) => {
@@ -24,7 +25,9 @@
}); });
} }
$: $selectedFiles.forEach((fileId) => { $: $selection.forEach((item) => {
let fileId = item.getFileId();
// TODO move more precise selection to front?
if ($gpxLayers.has(fileId)) { if ($gpxLayers.has(fileId)) {
$gpxLayers.get(fileId)?.moveToFront(); $gpxLayers.get(fileId)?.moveToFront();
} }

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

@@ -18,7 +18,7 @@
RouteOff RouteOff
} from 'lucide-svelte'; } from 'lucide-svelte';
import { map, selectedFiles, Tool } from '$lib/stores'; import { map, Tool } from '$lib/stores';
import { dbUtils, settings } from '$lib/db'; import { dbUtils, settings } from '$lib/db';
import { brouterProfiles, routingProfileSelectItem } from './Routing'; import { brouterProfiles, routingProfileSelectItem } from './Routing';
@@ -30,11 +30,13 @@
import mapboxgl from 'mapbox-gl'; import mapboxgl from 'mapbox-gl';
import { fileObservers } from '$lib/db'; import { fileObservers } from '$lib/db';
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
import { selection } from '$lib/components/file-list/Selection';
import type { ListItem } from '$lib/components/file-list/FileList';
let routingControls: Map<string, RoutingControls> = new Map(); let routingControls: Map<string, RoutingControls> = new Map();
let popupElement: HTMLElement; let popupElement: HTMLElement;
let popup: mapboxgl.Popup | null = null; let popup: mapboxgl.Popup | null = null;
let selectedId: string | null = null; let selectedItem: ListItem | null = null;
let active = false; let active = false;
const { privateRoads, routing } = settings; const { privateRoads, routing } = settings;
@@ -46,42 +48,43 @@
controls.remove(); controls.remove();
routingControls.delete(fileId); routingControls.delete(fileId);
if (selectedId === fileId) { if (selectedItem && selectedItem.getFileId() === fileId) {
selectedId = null; selectedItem = null;
} }
} }
}); });
} }
$: if ($map && $selectedFiles) { $: if ($map && $selection) {
// update selected file // update selected file
if ($selectedFiles.size == 0 || $selectedFiles.size > 1 || !active) { if ($selection.size == 0 || $selection.size > 1 || !active) {
if (selectedId) { if (selectedItem) {
routingControls.get(selectedId)?.remove(); routingControls.get(selectedItem.getFileId())?.remove();
} }
selectedId = null; selectedItem = null;
} else { } else {
let newSelectedId = get(selectedFiles).values().next().value; let newSelectedItem = get(selection).getSelected()[0];
if (selectedId !== newSelectedId) { if (selectedItem !== newSelectedItem) {
if (selectedId) { if (selectedItem) {
routingControls.get(selectedId)?.remove(); routingControls.get(selectedItem.getFileId())?.remove();
} }
selectedId = newSelectedId; selectedItem = newSelectedItem;
} }
} }
} }
$: if ($map && selectedId) { $: if ($map && selectedItem) {
if (!routingControls.has(selectedId)) { let fileId = selectedItem.getFileId();
let selectedFileObserver = get(fileObservers).get(selectedId); if (!routingControls.has(fileId)) {
let selectedFileObserver = get(fileObservers).get(fileId);
if (selectedFileObserver) { if (selectedFileObserver) {
routingControls.set( routingControls.set(
selectedId, fileId,
new RoutingControls(get(map), selectedId, selectedFileObserver, popup, popupElement) new RoutingControls(get(map), fileId, selectedFileObserver, popup, popupElement)
); );
} }
} else { } else {
routingControls.get(selectedId)?.add(); routingControls.get(fileId)?.add();
} }
} }
@@ -151,7 +154,7 @@
<Button <Button
slot="data" slot="data"
variant="outline" variant="outline"
on:click={() => dbUtils.applyToSelectedFiles((file) => file.reverse())} on:click={() => dbUtils.applyToSelection((file) => file.reverse())}
> >
<ArrowRightLeft size="16" /> <ArrowRightLeft size="16" />
</Button> </Button>
@@ -161,9 +164,9 @@
<Button <Button
slot="data" slot="data"
variant="outline" variant="outline"
disabled={$selectedFiles.size != 1} disabled={$selection.size != 1}
on:click={() => { on:click={() => {
const fileId = get(selectedFiles).values().next().value; const fileId = get(selection).getSelected()[0].getFileId();
routingControls.get(fileId)?.routeToStart(); routingControls.get(fileId)?.routeToStart();
}} }}
> >
@@ -175,9 +178,9 @@
<Button <Button
slot="data" slot="data"
variant="outline" variant="outline"
disabled={$selectedFiles.size != 1} disabled={$selection.size != 1}
on:click={() => { on:click={() => {
const fileId = get(selectedFiles).values().next().value; const fileId = get(selection).getSelected()[0].getFileId();
routingControls.get(fileId)?.createRoundTrip(); routingControls.get(fileId)?.createRoundTrip();
}} }}
> >
@@ -187,9 +190,9 @@
</Tooltip> </Tooltip>
</div> </div>
<Help class="max-w-60"> <Help class="max-w-60">
{#if $selectedFiles.size > 1} {#if $selection.size > 1}
<div>{$_('toolbar.routing.help_multiple_files')}</div> <div>{$_('toolbar.routing.help_multiple_files')}</div>
{:else if $selectedFiles.size == 0} {:else if $selection.size == 0}
<div>{$_('toolbar.routing.help_no_file')}</div> <div>{$_('toolbar.routing.help_no_file')}</div>
{:else} {:else}
<div>{$_('toolbar.routing.help')}</div> <div>{$_('toolbar.routing.help')}</div>

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

@@ -2,12 +2,12 @@
import ToolbarItemMenu from '$lib/components/toolbar/ToolbarItemMenu.svelte'; import ToolbarItemMenu from '$lib/components/toolbar/ToolbarItemMenu.svelte';
import * as Alert from '$lib/components/ui/alert'; import * as Alert from '$lib/components/ui/alert';
import { CircleHelp } from 'lucide-svelte'; import { CircleHelp } from 'lucide-svelte';
import { selection } from '$lib/components/file-list/Selection';
import { Tool, selectedFiles } from '$lib/stores'; import { Tool } from '$lib/stores';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
$: $selectedFiles.forEach((file) => { $: $selection.forEach((item) => {
// todo // todo
}); });
</script> </script>

76
website/src/lib/db.ts
View File

@@ -1,10 +1,12 @@
import Dexie, { liveQuery } from 'dexie'; import Dexie, { liveQuery } from 'dexie';
import { GPXFile, GPXStatistics } from 'gpx'; import { GPXFile, GPXStatistics, Track } from 'gpx';
import { enableMapSet, enablePatches, applyPatches, type Patch, type WritableDraft, castDraft, Immer } from 'immer'; import { enableMapSet, enablePatches, applyPatches, type Patch, type WritableDraft, castDraft, Immer } from 'immer';
import { writable, get, derived, type Readable, type Writable } from 'svelte/store'; import { writable, get, derived, type Readable, type Writable } from 'svelte/store';
import { initTargetMapBounds, selectedFiles, updateTargetMapBounds } from './stores'; import { initTargetMapBounds, updateTargetMapBounds } from './stores';
import { mode } from 'mode-watcher'; import { mode } from 'mode-watcher';
import { defaultBasemap, defaultBasemapTree, defaultOverlayTree, defaultOverlays } from './assets/layers'; import { defaultBasemap, defaultBasemapTree, defaultOverlayTree, defaultOverlays } from './assets/layers';
import { selection } from '$lib/components/file-list/Selection';
import { ListFileItem, ListItem, type ListLevel } from '$lib/components/file-list/FileList';
enableMapSet(); enableMapSet();
enablePatches(); enablePatches();
@@ -73,9 +75,10 @@ function dexieUninitializedSettingStore(setting: string, initial: any): Writable
} }
export const settings = { export const settings = {
distanceUnits: dexieSettingStore('distanceUnits', 'metric'), distanceUnits: dexieSettingStore<'metric' | 'imperial'>('distanceUnits', 'metric'),
velocityUnits: dexieSettingStore('velocityUnits', 'speed'), velocityUnits: dexieSettingStore('velocityUnits', 'speed'),
temperatureUnits: dexieSettingStore('temperatureUnits', 'celsius'), temperatureUnits: dexieSettingStore('temperatureUnits', 'celsius'),
verticalFileView: dexieSettingStore<boolean>('fileView', false),
mode: dexieSettingStore('mode', (() => { mode: dexieSettingStore('mode', (() => {
let currentMode: string | undefined = get(mode); let currentMode: string | undefined = get(mode);
if (currentMode === undefined) { if (currentMode === undefined) {
@@ -110,7 +113,49 @@ function dexieStore<T>(querier: () => T | Promise<T>, initial?: T): Readable<T>
}; };
} }
export type GPXFileWithStatistics = { file: GPXFile, statistics: GPXStatistics }; export class GPXStatisticsTree {
level: ListLevel;
statistics: {
[key: number]: GPXStatisticsTree | GPXStatistics;
} = {};
constructor(element: GPXFile | Track) {
if (element instanceof GPXFile) {
this.level = 'file';
element.children.forEach((child, index) => {
this.statistics[index] = new GPXStatisticsTree(child);
});
} else {
this.level = 'track';
element.children.forEach((child, index) => {
this.statistics[index] = child.getStatistics();
});
}
}
getStatisticsFor(item: ListItem): GPXStatistics {
let statistics = new GPXStatistics();
let id = item.getIdAtLevel(this.level);
if (id === undefined || id === 'waypoints') {
Object.keys(this.statistics).forEach(key => {
if (this.statistics[key] instanceof GPXStatistics) {
statistics.mergeWith(this.statistics[key]);
} else {
statistics.mergeWith(this.statistics[key].getStatisticsFor(item));
}
});
} else {
let child = this.statistics[id];
if (child instanceof GPXStatistics) {
statistics.mergeWith(child);
} else if (child !== undefined) {
statistics.mergeWith(child.getStatisticsFor(item));
}
}
return statistics;
}
};
export type GPXFileWithStatistics = { file: GPXFile, statistics: GPXStatisticsTree };
// Wrap Dexie live queries in a Svelte store to avoid triggering the query for every subscriber, also takes care of the conversion to a GPXFile object // Wrap Dexie live queries in a Svelte store to avoid triggering the query for every subscriber, also takes care of the conversion to a GPXFile object
function dexieGPXFileStore(id: string): Readable<GPXFileWithStatistics> & { destroy: () => void } { function dexieGPXFileStore(id: string): Readable<GPXFileWithStatistics> & { destroy: () => void } {
@@ -118,10 +163,12 @@ function dexieGPXFileStore(id: string): Readable<GPXFileWithStatistics> & { dest
let query = liveQuery(() => db.files.get(id)).subscribe(value => { let query = liveQuery(() => db.files.get(id)).subscribe(value => {
if (value !== undefined) { if (value !== undefined) {
let gpx = new GPXFile(value); let gpx = new GPXFile(value);
let statistics = gpx.getStatistics();
let statistics = new GPXStatisticsTree(gpx);
if (!fileState.has(id)) { // Update the map bounds for new files if (!fileState.has(id)) { // Update the map bounds for new files
updateTargetMapBounds(statistics.global.bounds); updateTargetMapBounds(statistics.getStatisticsFor(new ListFileItem(id)).global.bounds);
} }
fileState.set(id, gpx); fileState.set(id, gpx);
store.set({ store.set({
file: gpx, file: gpx,
@@ -304,14 +351,14 @@ export const dbUtils = {
applyToFile: (id: string, callback: (file: WritableDraft<GPXFile>) => GPXFile) => { applyToFile: (id: string, callback: (file: WritableDraft<GPXFile>) => GPXFile) => {
applyToFiles([id], callback); applyToFiles([id], callback);
}, },
applyToSelectedFiles: (callback: (file: WritableDraft<GPXFile>) => GPXFile) => { applyToSelection: (callback: (file: WritableDraft<GPXFile>) => GPXFile) => {
applyToFiles(get(settings.fileOrder).filter(fileId => get(selectedFiles).has(fileId)), callback); applyToFiles(get(selection).forEach(fileId), callback);
}, },
duplicateSelectedFiles: () => { duplicateSelection: () => {
applyGlobal((draft) => { applyGlobal((draft) => {
let ids = getFileIds(get(settings.fileOrder).length); let ids = getFileIds(get(settings.fileOrder).length);
get(settings.fileOrder).forEach((fileId, index) => { get(settings.fileOrder).forEach((fileId, index) => {
if (get(selectedFiles).has(fileId)) { if (get(selection).has(fileId)) {
let file = draft.get(fileId); let file = draft.get(fileId);
if (file) { if (file) {
let clone = file.clone(); let clone = file.clone();
@@ -322,10 +369,13 @@ export const dbUtils = {
}); });
}); });
}, },
deleteSelectedFiles: () => { deleteSelection: () => {
applyGlobal((draft) => { applyGlobal((draft) => {
get(selectedFiles).forEach((fileId) => { get(selection).forEach((item) => {
draft.delete(fileId); if (item instanceof ListFileItem) {
draft.delete(item.getId());
}
// TODO: Implement deletion of tracks, segments, waypoints
}); });
}); });
}, },

81
website/src/lib/stores.ts
View File

@@ -5,61 +5,58 @@ import { GPXFile, buildGPX, parseGPX, GPXStatistics, type Coordinates } from 'gp
import { tick } from 'svelte'; import { tick } from 'svelte';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import type { GPXLayer } from '$lib/components/gpx-layer/GPXLayer'; import type { GPXLayer } from '$lib/components/gpx-layer/GPXLayer';
import { dbUtils, fileObservers, settings } from './db'; import { settings, dbUtils, fileObservers } from './db';
import { selection } from '$lib/components/file-list/Selection';
import { ListFileItem, ListWaypointItem, type ListItem } from '$lib/components/file-list/FileList';
export const map = writable<mapboxgl.Map | null>(null); export const map = writable<mapboxgl.Map | null>(null);
export const selectedFiles = writable<Set<string>>(new Set());
export const selectFiles = writable<{ [key: string]: (fileId?: string) => void }>({}); export const selectFiles = writable<{ [key: string]: (fileId?: string) => void }>({});
const { fileOrder } = settings;
fileObservers.subscribe((files) => { // Update selectedFiles automatically when files are deleted (either by action or by undo-redo)
let deletedFileIds: string[] = [];
get(selectedFiles).forEach((fileId) => {
if (!files.has(fileId)) {
deletedFileIds.push(fileId);
}
});
if (deletedFileIds.length > 0) {
selectedFiles.update((selectedFiles) => {
deletedFileIds.forEach((fileId) => selectedFiles.delete(fileId));
return selectedFiles;
});
}
});
export const gpxStatistics: Writable<GPXStatistics> = writable(new GPXStatistics()); export const gpxStatistics: Writable<GPXStatistics> = writable(new GPXStatistics());
const { fileOrder } = settings;
function updateGPXData() { function updateGPXData() {
let fileIds: string[] = get(fileOrder).filter((f) => get(selectedFiles).has(f)); let statistics = new GPXStatistics();
gpxStatistics.set(fileIds.reduce((stats: GPXStatistics, fileId: string) => { get(fileOrder).forEach((fileId) => { // Get statistics in the order of the file list
let fileStore = get(fileObservers).get(fileId); let fileStore = get(fileObservers).get(fileId);
if (fileStore) { if (fileStore) {
let statistics = get(fileStore)?.statistics; let stats = get(fileStore)?.statistics;
if (statistics) { if (stats !== undefined) {
stats.mergeWith(statistics); let first = true;
get(selection).getChild(fileId)?.getSelected().forEach((item) => { // Get statistics for selected items within the file
if (!(item instanceof ListWaypointItem) || first) {
statistics.mergeWith(stats.getStatisticsFor(item));
first = false;
}
});
} }
} }
return stats; });
}, new GPXStatistics())); gpxStatistics.set(statistics);
} }
let unsubscribes: Function[] = []; let unsubscribes: Map<string, () => void> = new Map();
selectedFiles.subscribe((selectedFiles) => { // Maintain up-to-date statistics for the current selection selection.subscribe(($selection) => { // Maintain up-to-date statistics for the current selection
updateGPXData(); updateGPXData();
while (unsubscribes.length > 0) { while (unsubscribes.size > 0) {
unsubscribes.pop()(); let [fileId, unsubscribe] = unsubscribes.entries().next().value;
unsubscribe();
unsubscribes.delete(fileId);
} }
selectedFiles.forEach((fileId) => { $selection.forEach((item) => {
let fileObserver = get(fileObservers).get(fileId); let fileId = item.getFileId();
if (fileObserver) { if (!unsubscribes.has(fileId)) {
let first = true; let fileObserver = get(fileObservers).get(fileId);
unsubscribes.push(fileObserver.subscribe(() => { if (fileObserver) {
if (first) first = false; let first = true;
else updateGPXData(); unsubscribes.set(fileId, fileObserver.subscribe(() => {
})); if (first) first = false;
else updateGPXData();
}));
}
} }
}); });
}); });
@@ -191,7 +188,11 @@ function selectFileWhenLoaded(fileId: string) {
const unsubscribe = fileObservers.subscribe((files) => { const unsubscribe = fileObservers.subscribe((files) => {
if (files.has(fileId)) { if (files.has(fileId)) {
tick().then(() => { tick().then(() => {
get(selectFiles).select(fileId); selection.update(($selection) => {
$selection.clear();
$selection.toggle(new ListFileItem(fileId));
return $selection;
});
}); });
unsubscribe(); unsubscribe();
} }
@@ -200,7 +201,7 @@ function selectFileWhenLoaded(fileId: string) {
export function exportSelectedFiles() { export function exportSelectedFiles() {
get(fileObservers).forEach(async (file, fileId) => { get(fileObservers).forEach(async (file, fileId) => {
if (get(selectedFiles).has(fileId)) { if (get(selection).has(fileId)) {
let f = get(file); let f = get(file);
if (f) { if (f) {
exportFile(f.file); exportFile(f.file);

1
website/src/locales/en.json
View File

@@ -15,6 +15,7 @@
"delete_all": "Delete all", "delete_all": "Delete all",
"select_all": "Select all", "select_all": "Select all",
"view": "View", "view": "View",
"vertical_file_view": "Show vertical file list",
"switch_basemap": "Switch to previous basemap", "switch_basemap": "Switch to previous basemap",
"toggle_overlays": "Toggle overlays", "toggle_overlays": "Toggle overlays",
"toggle_3d": "Toggle 3D", "toggle_3d": "Toggle 3D",