steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 15:43: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 LayerControl from '$lib/components/layer-control/LayerControl.svelte';
import { Toaster } from '$lib/components/ui/sonner';
import { settings } from '$lib/db';
const { verticalFileView } = settings;
</script>
<div class="flex flex-row w-screen h-screen">
@@ -19,16 +23,20 @@
<LayerControl />
<GPXLayers />
<Toaster richColors />
<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
<FileList orientation="horizontal" class="pointer-events-auto" />
</div>
{#if !$verticalFileView}
<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
<FileList orientation="horizontal" class="pointer-events-auto" />
</div>
{/if}
</div>
<div class="h-48 flex flex-row gap-2 overflow-hidden">
<GPXStatistics />
<ElevationProfile />
</div>
</div>
<FileList orientation="vertical" recursive={true} class="w-60" />
{#if $verticalFileView}
<FileList orientation="vertical" recursive={true} class="w-60" />
{/if}
</div>
<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,
Thermometer,
Sun,
Moon
Moon,
Rows3
} from 'lucide-svelte';
import {
map,
selectedFiles,
exportAllFiles,
exportSelectedFiles,
triggerFileInput,
selectFiles,
createFile
} from '$lib/stores';
import { selection } from '$lib/components/file-list/Selection';
import { derived } from 'svelte/store';
import { canUndo, canRedo, dbUtils, fileObservers, settings } from '$lib/db';
@@ -47,6 +48,7 @@
distanceUnits,
velocityUnits,
temperatureUnits,
verticalFileView,
mode,
currentBasemap,
previousBasemap,
@@ -113,16 +115,13 @@
{$_('menu.load_drive')}</Menubar.Item
>
<Menubar.Separator />
<Menubar.Item
on:click={dbUtils.duplicateSelectedFiles}
disabled={$selectedFiles.size == 0}
>
<Menubar.Item on:click={dbUtils.duplicateSelection} disabled={$selection.size == 0}>
<Copy size="16" class="mr-1" />
{$_('menu.duplicate')}
<Shortcut key="D" ctrl={true} />
</Menubar.Item>
<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" />
{$_('menu.export')}
<Shortcut key="S" ctrl={true} />
@@ -154,7 +153,7 @@
<Shortcut key="A" ctrl={true} />
</Menubar.Item>
<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" />
{$_('menu.delete')}
<Shortcut key="⌫" ctrl={true} />
@@ -173,6 +172,10 @@
<Menubar.Menu>
<Menubar.Trigger>{$_('menu.view')}</Menubar.Trigger>
<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}
><Map size="16" class="mr-1" />{$_('menu.switch_basemap')}<Shortcut
key="F1"
@@ -289,7 +292,7 @@
triggerFileInput();
e.preventDefault();
} else if (e.key === 'd' && (e.metaKey || e.ctrlKey)) {
dbUtils.duplicateSelectedFiles();
dbUtils.duplicateSelection();
e.preventDefault();
} else if ((e.key === 's' || e.key == 'S') && (e.metaKey || e.ctrlKey)) {
if (e.shiftKey) {
@@ -308,7 +311,7 @@
if (e.shiftKey) {
dbUtils.deleteAllFiles();
} else {
dbUtils.deleteSelectedFiles();
dbUtils.deleteSelection();
}
e.preventDefault();
} 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-margin', margin);
setContext('collapsible-tree-nohover', nohover);
setContext('collapsible-tree-parent-id', 'root');
</script>
<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 { Button } from '$lib/components/ui/button';
import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-svelte';
import { getContext } from 'svelte';
import { getContext, setContext } from 'svelte';
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 open = getContext<Writable<Record<string, boolean>>>('collapsible-tree-state');
let side = getContext<'left' | 'right'>('collapsible-tree-side');
let margin = getContext<number>('collapsible-tree-margin');
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) => {
if (!value.hasOwnProperty(id)) {
value[id] = defaultState === 'open';
if (!value.hasOwnProperty(fullId)) {
value[fullId] = defaultState === 'open';
}
return value;
});
</script>
<Collapsible.Root bind:open={$open[id]} class={$$props.class ?? ''}>
<Collapsible.Root bind:open={$open[fullId]} class={$$props.class ?? ''}>
<Collapsible.Trigger class="w-full">
<Button
variant="ghost"
@@ -30,7 +34,7 @@
: 'justify-start'} py-0 px-1 h-fit {nohover ? 'hover:bg-background' : ''}"
>
{#if side === 'left'}
{#if $open[id]}
{#if $open[fullId]}
<ChevronDown size="16" class="shrink-0" />
{:else}
<ChevronRight size="16" class="shrink-0" />
@@ -38,7 +42,7 @@
{/if}
<slot name="trigger" />
{#if side === 'right'}
{#if $open[id]}
{#if $open[fullId]}
<ChevronDown size="16" class="shrink-0" />
{:else}
<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 { setContext } from 'svelte';
import { writable } from 'svelte/store';
import { ListRootItem } from './FileList';
export let orientation: 'vertical' | 'horizontal';
export let recursive = false;
export let selected = writable(new Set<string>());
setContext('orientation', orientation);
setContext('recursive', recursive);
setContext('selected', selected);
</script>
<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}
scrollbarXClasses={orientation === 'vertical' ? '' : 'mt-1 h-2'}
scrollbarYClasses={orientation === 'vertical' ? '' : ''}
>
<div class="flex {orientation === 'vertical' ? 'flex-col' : 'flex-row'} {$$props.class ?? ''}">
<FileListNode node={$fileObservers} id="root" />
<FileListNode node={$fileObservers} item={new ListRootItem()} />
</div>
</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 FileListNodeLabel from './FileListNodeLabel.svelte';
import { getContext } from 'svelte';
import { type ListItem, type ListTrackItem } from './FileList';
export let node:
| Map<string, Readable<GPXFileWithStatistics | undefined>>
| GPXTreeElement<AnyGPXTreeElement>
| ReadonlyArray<Readonly<Waypoint>>;
export let id: string;
export let index: number = 0;
export let item: ListItem;
let recursive = getContext<boolean>('recursive');
@@ -20,21 +20,21 @@
node instanceof GPXFile
? node.metadata.name
: 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
? 'Waypoints'
: '';
</script>
{#if node instanceof Map}
<FileListNodeContent {node} {id} />
<FileListNodeContent {node} {item} />
{:else if recursive}
<CollapsibleTreeNode {id}>
<FileListNodeLabel {id} {label} slot="trigger" />
<CollapsibleTreeNode id={item.getId()}>
<FileListNodeLabel {item} {label} slot="trigger" />
<div slot="content">
<FileListNodeContent {node} {id} />
<FileListNodeContent {node} {item} />
</div>
</CollapsibleTreeNode>
{:else}
<FileListNodeLabel {id} {label} />
<FileListNodeLabel {item} {label} />
{/if}

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

@@ -3,20 +3,22 @@
import { afterUpdate, getContext, onDestroy, onMount } from 'svelte';
import Sortable from 'sortablejs/Sortable';
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 FileListNode from './FileListNode.svelte';
import FileListNodeLabel from './FileListNodeLabel.svelte';
import { type ListItem } from './FileList';
import { selection } from './Selection';
export let node:
| Map<string, Readable<GPXFileWithStatistics | undefined>>
| GPXTreeElement<AnyGPXTreeElement>
| ReadonlyArray<Readonly<Waypoint>>;
export let item: ListItem;
export let waypointRoot: boolean = false;
export let id: string;
let container: HTMLElement;
let items: { [id: string | number]: HTMLElement } = {};
let elements: { [id: string | number]: HTMLElement } = {};
let sortableLevel =
node instanceof Map
? 'file'
@@ -36,17 +38,15 @@
let sortable: Sortable;
let orientation = getContext<'vertical' | 'horizontal'>('orientation');
let selected = getContext<Writable<Set<string>>>('selected');
function onSelectChange() {
selected.update(($selected) => {
$selected.clear();
Object.entries(items).forEach(([id, item]) => {
if (item.classList.contains('sortable-selected')) {
$selected.add(id);
}
selection.update(($selection) => {
$selection.clear();
Object.entries(elements).forEach(([id, element]) => {
let realId = sortableLevel === 'file' || sortableLevel === 'waypoints' ? id : parseInt(id);
$selection.set(item.extend(realId), element.classList.contains('sortable-selected'));
});
return $selected;
return $selection;
});
}
@@ -54,6 +54,13 @@
if (sortableLevel !== 'file') {
return;
}
/*Object.keys(buttons).forEach((fileId) => {
if (!get(fileObservers).has(fileId)) {
delete buttons[fileId];
}
});*/
const currentOrder = sortable.toArray();
if (currentOrder.length !== $fileOrder.length) {
sortable.sort($fileOrder);
@@ -108,14 +115,18 @@
afterUpdate(() => {
syncFileOrder();
// TODO: update selection if files are removed
});
const unsubscribe = selected.subscribe(($selected) => {
Object.entries(items).forEach(([id, item]) => {
if ($selected.has(id) && !item.classList.contains('sortable-selected')) {
Sortable.utils.select(item);
} else if (!$selected.has(id) && item.classList.contains('sortable-selected')) {
Sortable.utils.deselect(item);
const unsubscribe = selection.subscribe(($selection) => {
Object.entries(elements).forEach(([id, element]) => {
let realId = sortableLevel === 'file' || sortableLevel === 'waypoints' ? id : parseInt(id);
let inSelection = $selection.has(item.extend(realId));
let isSelected = element.classList.contains('sortable-selected');
if (inSelection && !isSelected) {
Sortable.utils.select(element);
} else if (!inSelection && isSelected) {
Sortable.utils.deselect(element);
}
});
});
@@ -123,18 +134,6 @@
onDestroy(() => {
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>
<div
@@ -143,38 +142,34 @@
>
{#if node instanceof Map}
{#each node as [fileId, file]}
<div bind:this={items[fileId]} data-id={fileId}>
<div bind:this={elements[fileId]} data-id={fileId}>
<FileListNodeStore {file} />
</div>
{/each}
{:else if node instanceof GPXFile}
{#if waypointRoot}
{#if node.wpt.length > 0}
<div bind:this={items[`${id}-wpt`]}>
<FileListNode node={node.wpt} id={`${id}-wpt`} />
<div bind:this={elements['waypoints']}>
<FileListNode node={node.wpt} item={item.extend('waypoints')} />
</div>
{/if}
{:else}
{#each node.children as child, i}
<div bind:this={items[getChildId(i)]}>
<FileListNode node={child} id={getChildId(i)} index={i} />
<div bind:this={elements[i]}>
<FileListNode node={child} item={item.extend(i)} />
</div>
{/each}
{/if}
{:else if node instanceof Track}
{#each node.children as child, i}
<div bind:this={items[getChildId(i)]} class="ml-1">
<div>
<FileListNodeLabel id={getChildId(i)} label={`Segment ${i + 1}`} />
</div>
<div bind:this={elements[i]} class="ml-1">
<FileListNodeLabel item={item.extend(i)} label={`Segment ${i + 1}`} />
</div>
{/each}
{:else if Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint}
{#each node as wpt, i}
<div bind:this={items[getChildId(i)]} class="ml-1">
<div>
<FileListNodeLabel id={getChildId(i)} label={wpt.name ?? `Waypoint ${i + 1}`} />
</div>
<div bind:this={elements[i]} class="ml-1">
<FileListNodeLabel item={item.extend(i)} label={wpt.name ?? `Waypoint ${i + 1}`} />
</div>
{/each}
{/if}
@@ -182,7 +177,7 @@
{#if node instanceof GPXFile}
{#if !waypointRoot}
<svelte:self {node} {id} waypointRoot={true} />
<svelte:self {node} {item} waypointRoot={true} />
{/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 { dbUtils } from '$lib/db';
import { Copy, Trash2 } from 'lucide-svelte';
import { type ListItem } from './FileList';
import { selection } from './Selection';
import { _ } from 'svelte-i18n';
import { getContext } from 'svelte';
import { type Writable } from 'svelte/store';
export let id: string;
export let item: ListItem;
export let label: string | undefined;
let selected = getContext<Writable<Set<string>>>('selected');
let orientation = getContext<'vertical' | 'horizontal'>('orientation');
</script>
@@ -38,14 +36,7 @@
// Add to selection instead of opening context menu
e.preventDefault();
e.stopPropagation();
selected.update((value) => {
if (value.has(id)) {
value.delete(id);
} else {
value.add(id);
}
return value;
});
$selection.toggle(item);
}
}}
>
@@ -54,13 +45,13 @@
</Button>
</ContextMenu.Trigger>
<ContextMenu.Content>
<ContextMenu.Item on:click={dbUtils.duplicateSelectedFiles}>
<ContextMenu.Item on:click={dbUtils.duplicateSelection}>
<Copy size="16" class="mr-1" />
{$_('menu.duplicate')}
<Shortcut key="D" ctrl={true} /></ContextMenu.Item
>
<ContextMenu.Separator />
<ContextMenu.Item on:click={dbUtils.deleteSelectedFiles}
<ContextMenu.Item on:click={dbUtils.deleteSelection}
><Trash2 size="16" class="mr-1" />
{$_('menu.delete')}
<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 { getContext } from 'svelte';
import type { Readable } from 'svelte/store';
import { ListFileItem } from './FileList';
export let file: Readable<GPXFileWithStatistics | undefined>;
@@ -14,9 +15,9 @@
{#if $file}
{#if recursive}
<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>
{:else}
<FileListNode node={$file.file} id={$file.file._data.id} />
<FileListNode node={$file.file} item={new ListFileItem($file.file._data.id)} />
{/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">
import { map, selectedFiles, gpxLayers } from '$lib/stores';
import { map, gpxLayers } from '$lib/stores';
import { GPXLayer } from './GPXLayer';
import { get } from 'svelte/store';
import WaypointPopup from './WaypointPopup.svelte';
import { fileObservers } from '$lib/db';
import { selection } from '$lib/components/file-list/Selection';
$: if ($map && $fileObservers) {
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)) {
$gpxLayers.get(fileId)?.moveToFront();
}

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

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

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

@@ -1,10 +1,12 @@
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 { 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 { 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();
enablePatches();
@@ -73,9 +75,10 @@ function dexieUninitializedSettingStore(setting: string, initial: any): Writable
}
export const settings = {
distanceUnits: dexieSettingStore('distanceUnits', 'metric'),
distanceUnits: dexieSettingStore<'metric' | 'imperial'>('distanceUnits', 'metric'),
velocityUnits: dexieSettingStore('velocityUnits', 'speed'),
temperatureUnits: dexieSettingStore('temperatureUnits', 'celsius'),
verticalFileView: dexieSettingStore<boolean>('fileView', false),
mode: dexieSettingStore('mode', (() => {
let currentMode: string | undefined = get(mode);
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
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 => {
if (value !== undefined) {
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
updateTargetMapBounds(statistics.global.bounds);
updateTargetMapBounds(statistics.getStatisticsFor(new ListFileItem(id)).global.bounds);
}
fileState.set(id, gpx);
store.set({
file: gpx,
@@ -304,14 +351,14 @@ export const dbUtils = {
applyToFile: (id: string, callback: (file: WritableDraft<GPXFile>) => GPXFile) => {
applyToFiles([id], callback);
},
applyToSelectedFiles: (callback: (file: WritableDraft<GPXFile>) => GPXFile) => {
applyToFiles(get(settings.fileOrder).filter(fileId => get(selectedFiles).has(fileId)), callback);
applyToSelection: (callback: (file: WritableDraft<GPXFile>) => GPXFile) => {
applyToFiles(get(selection).forEach(fileId), callback);
},
duplicateSelectedFiles: () => {
duplicateSelection: () => {
applyGlobal((draft) => {
let ids = getFileIds(get(settings.fileOrder).length);
get(settings.fileOrder).forEach((fileId, index) => {
if (get(selectedFiles).has(fileId)) {
if (get(selection).has(fileId)) {
let file = draft.get(fileId);
if (file) {
let clone = file.clone();
@@ -322,10 +369,13 @@ export const dbUtils = {
});
});
},
deleteSelectedFiles: () => {
deleteSelection: () => {
applyGlobal((draft) => {
get(selectedFiles).forEach((fileId) => {
draft.delete(fileId);
get(selection).forEach((item) => {
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 { _ } from 'svelte-i18n';
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 selectedFiles = writable<Set<string>>(new Set());
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());
const { fileOrder } = settings;
function updateGPXData() {
let fileIds: string[] = get(fileOrder).filter((f) => get(selectedFiles).has(f));
gpxStatistics.set(fileIds.reduce((stats: GPXStatistics, fileId: string) => {
let statistics = new GPXStatistics();
get(fileOrder).forEach((fileId) => { // Get statistics in the order of the file list
let fileStore = get(fileObservers).get(fileId);
if (fileStore) {
let statistics = get(fileStore)?.statistics;
if (statistics) {
stats.mergeWith(statistics);
let stats = get(fileStore)?.statistics;
if (stats !== undefined) {
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[] = [];
selectedFiles.subscribe((selectedFiles) => { // Maintain up-to-date statistics for the current selection
let unsubscribes: Map<string, () => void> = new Map();
selection.subscribe(($selection) => { // Maintain up-to-date statistics for the current selection
updateGPXData();
while (unsubscribes.length > 0) {
unsubscribes.pop()();
while (unsubscribes.size > 0) {
let [fileId, unsubscribe] = unsubscribes.entries().next().value;
unsubscribe();
unsubscribes.delete(fileId);
}
selectedFiles.forEach((fileId) => {
let fileObserver = get(fileObservers).get(fileId);
if (fileObserver) {
let first = true;
unsubscribes.push(fileObserver.subscribe(() => {
if (first) first = false;
else updateGPXData();
}));
$selection.forEach((item) => {
let fileId = item.getFileId();
if (!unsubscribes.has(fileId)) {
let fileObserver = get(fileObservers).get(fileId);
if (fileObserver) {
let first = true;
unsubscribes.set(fileId, fileObserver.subscribe(() => {
if (first) first = false;
else updateGPXData();
}));
}
}
});
});
@@ -191,7 +188,11 @@ function selectFileWhenLoaded(fileId: string) {
const unsubscribe = fileObservers.subscribe((files) => {
if (files.has(fileId)) {
tick().then(() => {
get(selectFiles).select(fileId);
selection.update(($selection) => {
$selection.clear();
$selection.toggle(new ListFileItem(fileId));
return $selection;
});
});
unsubscribe();
}
@@ -200,7 +201,7 @@ function selectFileWhenLoaded(fileId: string) {
export function exportSelectedFiles() {
get(fileObservers).forEach(async (file, fileId) => {
if (get(selectedFiles).has(fileId)) {
if (get(selection).has(fileId)) {
let f = get(file);
if (f) {
exportFile(f.file);

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

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