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

patches with immer (not working atm)

Browse Source
This commit is contained in:
vcoppe
2024-04-30 20:55:47 +02:00
parent 0db9f46c05
commit 667c94a4c4
14 changed files with 428 additions and 321 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
website/package-lock.json generated
View File

@@ -13,6 +13,7 @@
"chart.js": "^4.4.2", "chart.js": "^4.4.2",
"clsx": "^2.1.0", "clsx": "^2.1.0",
"gpx": "file:../gpx", "gpx": "file:../gpx",
"immer": "^10.1.1",
"lucide-svelte": "^0.365.0", "lucide-svelte": "^0.365.0",
"mapbox-gl": "^3.2.0", "mapbox-gl": "^3.2.0",
"mode-watcher": "^0.3.0", "mode-watcher": "^0.3.0",
@@ -3356,6 +3357,15 @@
"node": ">= 4" "node": ">= 4"
} }
}, },
"node_modules/immer": {
"version": "10.1.1",
"resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
"integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/immer"
}
},
"node_modules/import-fresh": { "node_modules/import-fresh": {
"version": "3.3.0", "version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",

1
website/package.json
View File

@@ -46,6 +46,7 @@
"chart.js": "^4.4.2", "chart.js": "^4.4.2",
"clsx": "^2.1.0", "clsx": "^2.1.0",
"gpx": "file:../gpx", "gpx": "file:../gpx",
"immer": "^10.1.1",
"lucide-svelte": "^0.365.0", "lucide-svelte": "^0.365.0",
"mapbox-gl": "^3.2.0", "mapbox-gl": "^3.2.0",
"mode-watcher": "^0.3.0", "mode-watcher": "^0.3.0",

8
website/src/lib/components/ElevationProfile.svelte
View File

@@ -6,8 +6,7 @@
import Chart from 'chart.js/auto'; import Chart from 'chart.js/auto';
import mapboxgl from 'mapbox-gl'; import mapboxgl from 'mapbox-gl';
import { map, fileOrder, selectedFiles, settings } from '$lib/stores'; import { map, settings, gpxData } from '$lib/stores';
import { get } from 'svelte/store';
import { onDestroy, onMount } from 'svelte'; import { onDestroy, onMount } from 'svelte';
import { import {
@@ -19,7 +18,6 @@
Thermometer, Thermometer,
Zap Zap
} from 'lucide-svelte'; } from 'lucide-svelte';
import { GPXFiles } from 'gpx';
import { surfaceColors } from '$lib/assets/surfaces'; import { surfaceColors } from '$lib/assets/surfaces';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
@@ -32,7 +30,6 @@
getConvertedVelocity, getConvertedVelocity,
getDistanceUnits, getDistanceUnits,
getDistanceWithUnits, getDistanceWithUnits,
getElevationUnits,
getElevationWithUnits, getElevationWithUnits,
getHeartRateUnits, getHeartRateUnits,
getHeartRateWithUnits, getHeartRateWithUnits,
@@ -236,8 +233,7 @@
}); });
$: if (chart && $settings) { $: if (chart && $settings) {
let gpxFiles = new GPXFiles(get(fileOrder).filter((f) => $selectedFiles.has(f))); let data = $gpxData;
let data = gpxFiles.getTrackPointsAndStatistics();
// update data // update data
chart.data.datasets[0] = { chart.data.datasets[0] = {

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

@@ -1,52 +1,50 @@
<script lang="ts"> <script lang="ts">
import { fileOrder, files, getFileIndex, selectedFiles, selectFiles } from '$lib/stores'; import { filestore, fileOrder, selectedFiles, selectFiles } from '$lib/stores';
import { ScrollArea } from '$lib/components/ui/scroll-area/index'; import { ScrollArea } from '$lib/components/ui/scroll-area/index';
import Sortable from 'sortablejs/Sortable'; import Sortable from 'sortablejs/Sortable';
import type { GPXFile } from 'gpx';
import { afterUpdate, onMount } from 'svelte'; import { afterUpdate, onMount } from 'svelte';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
import FileListItem from './FileListItem.svelte'; import FileListItem from './FileListItem.svelte';
let container: HTMLDivElement; let container: HTMLDivElement;
let buttons: HTMLDivElement[] = []; let buttons: { [id: string]: HTMLElement } = {};
let sortable: Sortable; let sortable: Sortable;
function selectFile(file: GPXFile) { function selectFile(fileId: string) {
selectedFiles.update((selectedFiles) => { selectedFiles.update((selectedFiles) => {
selectedFiles.clear(); selectedFiles.clear();
selectedFiles.add(file); selectedFiles.add(fileId);
return selectedFiles; return selectedFiles;
}); });
} }
function addSelectFile(file: GPXFile) { function addSelectFile(fileId: string) {
selectedFiles.update((selectedFiles) => { selectedFiles.update((selectedFiles) => {
selectedFiles.add(file); selectedFiles.add(fileId);
return selectedFiles; return selectedFiles;
}); });
} }
function selectAllFiles() { function selectAllFiles() {
selectedFiles.update((selectedFiles) => { selectedFiles.update((selectedFiles) => {
get(files).forEach((file) => { get(filestore).forEach((file) => {
selectedFiles.add(get(file)); selectedFiles.add(file._data.id);
}); });
return selectedFiles; return selectedFiles;
}); });
} }
function deselectFile(file: GPXFile) { function deselectFile(fileId: string) {
selectedFiles.update((selectedFiles) => { selectedFiles.update((selectedFiles) => {
selectedFiles.delete(file); selectedFiles.delete(fileId);
return selectedFiles; return selectedFiles;
}); });
} }
function updateFileOrder() { function updateFileOrder() {
let newFileOrder = sortable.toArray().map((index: string) => get(get(files)[parseInt(index)])); let newFileOrder = sortable.toArray();
if (newFileOrder.length !== get(fileOrder).length) { if (newFileOrder.length !== get(fileOrder).length) {
fileOrder.set(newFileOrder); fileOrder.set(newFileOrder);
return; return;
@@ -68,21 +66,19 @@
selectedClass: 'sortable-selected', selectedClass: 'sortable-selected',
avoidImplicitDeselect: true, avoidImplicitDeselect: true,
onSelect: (e) => { onSelect: (e) => {
const index = parseInt(e.item.getAttribute('data-id')); let selectedId = e.item.getAttribute('data-id');
addSelectFile(get($files[index])); addSelectFile(selectedId);
if (!e.originalEvent.shiftKey && $selectedFiles.size > 1) { if (!e.originalEvent.shiftKey && $selectedFiles.size > 1) {
$selectedFiles.forEach((file) => { $selectedFiles.forEach((fileId) => {
if (file !== get($files[index])) { if (fileId !== selectedId) {
deselectFile(file); deselectFile(fileId);
const index = getFileIndex(file); Sortable.utils.deselect(buttons[fileId]);
Sortable.utils.deselect(buttons[index]);
} }
}); });
} }
}, },
onDeselect: (e) => { onDeselect: (e) => {
const index = parseInt(e.item.getAttribute('data-id')); deselectFile(e.item.getAttribute('data-id'));
deselectFile(get($files[index]));
}, },
onSort: () => { onSort: () => {
updateFileOrder(); updateFileOrder();
@@ -92,48 +88,50 @@
selectFiles.update(() => { selectFiles.update(() => {
return { return {
select: (file: GPXFile) => { select: (fileId: string) => {
buttons.forEach((button) => { Object.values(buttons).forEach((button) => {
if (button) { Sortable.utils.deselect(button);
Sortable.utils.deselect(button);
}
}); });
const index = getFileIndex(file); Sortable.utils.select(buttons[fileId]);
Sortable.utils.select(buttons[index]); selectFile(fileId);
selectFile(file);
}, },
addSelect: (file: GPXFile) => { addSelect: (fileId: string) => {
const index = getFileIndex(file); Sortable.utils.select(buttons[fileId]);
Sortable.utils.select(buttons[index]); addSelectFile(fileId);
addSelectFile(file);
}, },
selectAllFiles: () => { selectAllFiles: () => {
$files.forEach((file, index) => { Object.values(buttons).forEach((button) => {
Sortable.utils.select(buttons[index]); Sortable.utils.select(button);
}); });
selectAllFiles(); selectAllFiles();
}, },
removeSelect: (file: GPXFile) => { removeSelect: (fileId: string) => {
const index = getFileIndex(file); Sortable.utils.deselect(buttons[fileId]);
Sortable.utils.deselect(buttons[index]); deselectFile(fileId);
deselectFile(file);
} }
}; };
}); });
afterUpdate(updateFileOrder); afterUpdate(() => {
updateFileOrder();
Object.keys(buttons).forEach((fileId) => {
if (!get(filestore).find((file) => file._data.id === fileId)) {
delete buttons[fileId];
}
});
});
</script> </script>
<div class="h-10 -translate-y-10 w-full pointer-events-none"> <div class="h-10 -translate-y-10 w-full pointer-events-none">
<ScrollArea orientation="horizontal" class="w-full h-full" scrollbarXClasses="h-2"> <ScrollArea orientation="horizontal" class="w-full h-full" scrollbarXClasses="h-2">
<div bind:this={container} class="flex flex-row gap-1"> <div bind:this={container} class="flex flex-row gap-1">
{#each $files as file, index} {#each $filestore as file}
<div <div
bind:this={buttons[index]} bind:this={buttons[file._data.id]}
data-id={index} data-id={file._data.id}
class="pointer-events-auto first:ml-1 last:mr-1 mb-1 bg-transparent" class="pointer-events-auto first:ml-1 last:mr-1 mb-1 bg-transparent"
> >
<FileListItem {file} /> <FileListItem file={filestore.getFileStore(file._data.id)} />
</div> </div>
{/each} {/each}
</div> </div>

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

@@ -4,43 +4,38 @@
import Shortcut from './Shortcut.svelte'; import Shortcut from './Shortcut.svelte';
import { Copy, Trash2 } from 'lucide-svelte'; import { Copy, Trash2 } from 'lucide-svelte';
import type { GPXFile } from 'gpx';
import { get, type Writable } from 'svelte/store'; import { get, type Writable } from 'svelte/store';
import { import { filestore, selectedFiles, selectFiles } from '$lib/stores';
duplicateSelectedFiles,
removeSelectedFiles,
selectedFiles,
selectFiles
} from '$lib/stores';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import type { GPXFile } from 'gpx';
import type { Immutable } from 'immer';
export let file: Writable<GPXFile>; export let file: Writable<Immutable<GPXFile>> | undefined;
</script> </script>
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
on:contextmenu={() => { on:contextmenu={() => {
if (!get(selectedFiles).has(get(file))) { if (!get(selectedFiles).has($file?._data.id)) {
get(selectFiles).select(get(file)); get(selectFiles).select($file?._data.id);
} }
}} }}
> >
<ContextMenu.Root> <ContextMenu.Root>
<ContextMenu.Trigger> <ContextMenu.Trigger>
<Button variant="outline" class="h-9 px-1.5 py-1 border-none shadow-md"> <Button variant="outline" class="h-9 px-1.5 py-1 border-none shadow-md">
{$file.metadata.name} {$file?.metadata.name}
</Button> </Button>
</ContextMenu.Trigger> </ContextMenu.Trigger>
<ContextMenu.Content> <ContextMenu.Content>
<ContextMenu.Item on:click={duplicateSelectedFiles}> <ContextMenu.Item on:click={filestore.duplicateSelectedFiles}>
<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={removeSelectedFiles} <ContextMenu.Item on:click={filestore.deleteSelectedFiles}
><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

29
website/src/lib/components/GPXData.svelte
View File

@@ -3,24 +3,17 @@
import Tooltip from '$lib/components/Tooltip.svelte'; import Tooltip from '$lib/components/Tooltip.svelte';
import WithUnits from '$lib/components/WithUnits.svelte'; import WithUnits from '$lib/components/WithUnits.svelte';
import { GPXFiles, GPXStatistics } from 'gpx'; import { GPXStatistics } from 'gpx';
import { selectedFiles, settings } from '$lib/stores'; import { gpxData, settings } from '$lib/stores';
import { get } from 'svelte/store';
import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from 'lucide-svelte'; import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from 'lucide-svelte';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
let gpxData: GPXStatistics = new GPXStatistics(); let data: GPXStatistics;
function updateGPXData() { $: data = $gpxData.statistics;
gpxData = new GPXFiles(Array.from(get(selectedFiles))).getStatistics();
}
$: if ($selectedFiles) {
updateGPXData();
}
</script> </script>
<Card.Root class="h-full overflow-hidden border-none shadow-none min-w-48 pl-4"> <Card.Root class="h-full overflow-hidden border-none shadow-none min-w-48 pl-4">
@@ -28,25 +21,25 @@
<Tooltip> <Tooltip>
<span slot="data" class="flex flex-row items-center"> <span slot="data" class="flex flex-row items-center">
<Ruler size="18" class="mr-1" /> <Ruler size="18" class="mr-1" />
<WithUnits value={gpxData.distance.total} type="distance" /> <WithUnits value={data.distance.total} type="distance" />
</span> </span>
<span slot="tooltip">{$_('quantities.distance')}</span> <span slot="tooltip">{$_('quantities.distance')}</span>
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
<span slot="data" class="flex flex-row items-center"> <span slot="data" class="flex flex-row items-center">
<MoveUpRight size="18" class="mr-1" /> <MoveUpRight size="18" class="mr-1" />
<WithUnits value={gpxData.elevation.gain} type="elevation" /> <WithUnits value={data.elevation.gain} type="elevation" />
<MoveDownRight size="18" class="mx-1" /> <MoveDownRight size="18" class="mx-1" />
<WithUnits value={gpxData.elevation.loss} type="elevation" /> <WithUnits value={data.elevation.loss} type="elevation" />
</span> </span>
<span slot="tooltip">{$_('quantities.elevation')}</span> <span slot="tooltip">{$_('quantities.elevation')}</span>
</Tooltip> </Tooltip>
<Tooltip> <Tooltip>
<span slot="data" class="flex flex-row items-center"> <span slot="data" class="flex flex-row items-center">
<Zap size="18" class="mr-1" /> <Zap size="18" class="mr-1" />
<WithUnits value={gpxData.speed.total} type="speed" showUnits={false} /> <WithUnits value={data.speed.total} type="speed" showUnits={false} />
<span class="mx-1">/</span> <span class="mx-1">/</span>
<WithUnits value={gpxData.speed.moving} type="speed" /> <WithUnits value={data.speed.moving} type="speed" />
</span> </span>
<span slot="tooltip" <span slot="tooltip"
>{$settings.velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_( >{$settings.velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_(
@@ -57,9 +50,9 @@
<Tooltip> <Tooltip>
<span slot="data" class="flex flex-row items-center"> <span slot="data" class="flex flex-row items-center">
<Timer size="18" class="mr-1" /> <Timer size="18" class="mr-1" />
<WithUnits value={gpxData.time.total} type="time" /> <WithUnits value={data.time.total} type="time" />
<span class="mx-1">/</span> <span class="mx-1">/</span>
<WithUnits value={gpxData.time.moving} type="time" /> <WithUnits value={data.time.moving} type="time" />
</span> </span>
<span slot="tooltip" <span slot="tooltip"
>{$_('quantities.time')} ({$_('quantities.total')} / {$_('quantities.moving')})</span >{$_('quantities.time')} ({$_('quantities.total')} / {$_('quantities.moving')})</span

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

@@ -6,13 +6,10 @@
import { Plus, Copy, Download, Undo2, Redo2, Trash2, Upload, Cloud, Heart } from 'lucide-svelte'; import { Plus, Copy, Download, Undo2, Redo2, Trash2, Upload, Cloud, Heart } from 'lucide-svelte';
import { import {
files, filestore,
selectedFiles, selectedFiles,
duplicateSelectedFiles,
exportAllFiles, exportAllFiles,
exportSelectedFiles, exportSelectedFiles,
removeAllFiles,
removeSelectedFiles,
triggerFileInput, triggerFileInput,
selectFiles, selectFiles,
settings, settings,
@@ -69,7 +66,10 @@
{$_('menu.load_drive')}</Menubar.Item {$_('menu.load_drive')}</Menubar.Item
> >
<Menubar.Separator /> <Menubar.Separator />
<Menubar.Item on:click={duplicateSelectedFiles} disabled={$selectedFiles.size == 0}> <Menubar.Item
on:click={filestore.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} />
@@ -80,7 +80,7 @@
{$_('menu.export')} {$_('menu.export')}
<Shortcut key="S" ctrl={true} /> <Shortcut key="S" ctrl={true} />
</Menubar.Item> </Menubar.Item>
<Menubar.Item on:click={exportAllFiles} disabled={$files.length == 0}> <Menubar.Item on:click={exportAllFiles} disabled={$filestore.length == 0}>
<Download size="16" class="mr-1" /> <Download size="16" class="mr-1" />
{$_('menu.export_all')} {$_('menu.export_all')}
<Shortcut key="S" ctrl={true} shift={true} /> <Shortcut key="S" ctrl={true} shift={true} />
@@ -107,15 +107,18 @@
<Shortcut key="A" ctrl={true} /> <Shortcut key="A" ctrl={true} />
</Menubar.Item> </Menubar.Item>
<Menubar.Separator /> <Menubar.Separator />
<Menubar.Item on:click={removeSelectedFiles} disabled={$selectedFiles.size == 0}> <Menubar.Item
on:click={filestore.deleteSelectedFiles}
disabled={$selectedFiles.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} />
</Menubar.Item> </Menubar.Item>
<Menubar.Item <Menubar.Item
class="text-destructive data-[highlighted]:text-destructive" class="text-destructive data-[highlighted]:text-destructive"
on:click={removeAllFiles} on:click={filestore.deleteAllFiles}
disabled={$files.length == 0} disabled={$filestore.length == 0}
> >
<Trash2 size="16" class="mr-1" /> <Trash2 size="16" class="mr-1" />
{$_('menu.delete_all')} {$_('menu.delete_all')}
@@ -199,7 +202,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)) {
duplicateSelectedFiles(); filestore.duplicateSelectedFiles();
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) {
@@ -210,9 +213,9 @@
e.preventDefault(); e.preventDefault();
} else if ((e.key === 'Backspace' || e.key === 'Delete') && (e.metaKey || e.ctrlKey)) { } else if ((e.key === 'Backspace' || e.key === 'Delete') && (e.metaKey || e.ctrlKey)) {
if (e.shiftKey) { if (e.shiftKey) {
removeAllFiles(); filestore.deleteAllFiles();
} else { } else {
removeSelectedFiles(); filestore.deleteSelectedFiles();
} }
e.preventDefault(); e.preventDefault();
} else if (e.key === 'a' && (e.metaKey || e.ctrlKey)) { } else if (e.key === 'a' && (e.metaKey || e.ctrlKey)) {

50
website/src/lib/components/gpx-layer/GPXLayer.ts
View File

@@ -1,13 +1,8 @@
import type { GPXFile, Waypoint } from "gpx"; import type { GPXFile } from "gpx";
import { map, selectFiles, currentTool, Tool } from "$lib/stores"; import { map, selectFiles, currentTool, Tool } from "$lib/stores";
import { get, type Writable } from "svelte/store"; import { get, type Writable } from "svelte/store";
import mapboxgl from "mapbox-gl"; import mapboxgl from "mapbox-gl";
let id = 0;
function getLayerId() {
return `gpx-${id++}`;
}
let defaultWeight = 6; let defaultWeight = 6;
let defaultOpacity = 1; let defaultOpacity = 1;
@@ -44,7 +39,7 @@ function decrementColor(color: string) {
export class GPXLayer { export class GPXLayer {
map: mapboxgl.Map; map: mapboxgl.Map;
file: Writable<GPXFile>; file: Writable<GPXFile>;
layerId: string; fileId: string;
layerColor: string; layerColor: string;
popup: mapboxgl.Popup; popup: mapboxgl.Popup;
popupElement: HTMLElement; popupElement: HTMLElement;
@@ -57,36 +52,33 @@ export class GPXLayer {
constructor(map: mapboxgl.Map, file: Writable<GPXFile>, popup: mapboxgl.Popup, popupElement: HTMLElement) { constructor(map: mapboxgl.Map, file: Writable<GPXFile>, popup: mapboxgl.Popup, popupElement: HTMLElement) {
this.map = map; this.map = map;
this.file = file; this.file = file;
this.layerId = getLayerId(); this.fileId = get(file)._data.id;
this.layerColor = getColor(); this.layerColor = getColor();
this.popup = popup; this.popup = popup;
this.popupElement = popupElement; this.popupElement = popupElement;
this.unsubscribe = file.subscribe(this.updateData.bind(this)); this.unsubscribe = file.subscribe(this.updateData.bind(this));
get(this.file)._data = { get(this.file)._data.layerColor = this.layerColor;
layerId: this.layerId,
layerColor: this.layerColor
};
this.add(); this.add();
this.map.on('style.load', this.addBinded); this.map.on('style.load', this.addBinded);
} }
add() { add() {
if (!this.map.getSource(this.layerId)) { if (!this.map.getSource(this.fileId)) {
let data = this.getGeoJSON(); let data = this.getGeoJSON();
this.map.addSource(this.layerId, { this.map.addSource(this.fileId, {
type: 'geojson', type: 'geojson',
data data
}); });
} }
if (!this.map.getLayer(this.layerId)) { if (!this.map.getLayer(this.fileId)) {
this.map.addLayer({ this.map.addLayer({
id: this.layerId, id: this.fileId,
type: 'line', type: 'line',
source: this.layerId, source: this.fileId,
layout: { layout: {
'line-join': 'round', 'line-join': 'round',
'line-cap': 'round' 'line-cap': 'round'
@@ -98,14 +90,14 @@ export class GPXLayer {
} }
}); });
this.map.on('click', this.layerId, this.selectOnClickBinded); this.map.on('click', this.fileId, this.selectOnClickBinded);
this.map.on('mouseenter', this.layerId, toPointerCursor); this.map.on('mouseenter', this.fileId, toPointerCursor);
this.map.on('mouseleave', this.layerId, toDefaultCursor); this.map.on('mouseleave', this.fileId, toDefaultCursor);
} }
} }
updateData() { updateData() {
let source = this.map.getSource(this.layerId); let source = this.map.getSource(this.fileId);
if (source) { if (source) {
source.setData(this.getGeoJSON()); source.setData(this.getGeoJSON());
} }
@@ -137,13 +129,13 @@ export class GPXLayer {
} }
remove() { remove() {
this.map.off('click', this.layerId, this.selectOnClickBinded); this.map.off('click', this.fileId, this.selectOnClickBinded);
this.map.off('mouseenter', this.layerId, toPointerCursor); this.map.off('mouseenter', this.fileId, toPointerCursor);
this.map.off('mouseleave', this.layerId, toDefaultCursor); this.map.off('mouseleave', this.fileId, toDefaultCursor);
this.map.off('style.load', this.addBinded); this.map.off('style.load', this.addBinded);
this.map.removeLayer(this.layerId); this.map.removeLayer(this.fileId);
this.map.removeSource(this.layerId); this.map.removeSource(this.fileId);
this.markers.forEach((marker) => { this.markers.forEach((marker) => {
marker.remove(); marker.remove();
@@ -155,7 +147,7 @@ export class GPXLayer {
} }
moveToFront() { moveToFront() {
this.map.moveLayer(this.layerId); this.map.moveLayer(this.fileId);
} }
selectOnClick(e: any) { selectOnClick(e: any) {
@@ -163,9 +155,9 @@ export class GPXLayer {
return; return;
} }
if (e.originalEvent.shiftKey) { if (e.originalEvent.shiftKey) {
get(selectFiles).addSelect(get(this.file)); get(selectFiles).addSelect(this.fileId);
} else { } else {
get(selectFiles).select(get(this.file)); get(selectFiles).select(this.fileId);
} }
} }

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

@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { map, files, selectedFiles, getFileStore, gpxLayers } from '$lib/stores'; import { map, filestore, selectedFiles, gpxLayers } from '$lib/stores';
import { GPXLayer } from './GPXLayer'; import { GPXLayer } from './GPXLayer';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
@@ -12,26 +12,26 @@
$: if ($map) { $: if ($map) {
gpxLayers.update(($layers) => { gpxLayers.update(($layers) => {
// remove layers for deleted files // remove layers for deleted files
$layers.forEach((layer, file) => { $layers.forEach((layer, fileId) => {
if (!get(files).includes(file)) { if (!get(filestore).find((file) => file._data.id === fileId)) {
layer.remove(); layer.remove();
$layers.delete(file); $layers.delete(fileId);
} }
}); });
// add layers for new files // add layers for new files
$files.forEach((file) => { $filestore.forEach((file) => {
if (!$layers.has(file)) { if (!$layers.has(file._data.id)) {
$layers.set(file, new GPXLayer(get(map), file, popup, popupElement)); let fileStore = filestore.getFileStore(file._data.id);
$layers.set(file._data.id, new GPXLayer(get(map), fileStore, popup, popupElement));
} }
}); });
return $layers; return $layers;
}); });
} }
$: $selectedFiles.forEach((file) => { $: $selectedFiles.forEach((fileId) => {
let fileStore = getFileStore(file); if ($gpxLayers.has(fileId)) {
if ($gpxLayers.has(fileStore)) { $gpxLayers.get(fileId)?.moveToFront();
$gpxLayers.get(fileStore)?.moveToFront();
} }
}); });

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

@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { reverseSelectedFiles, Tool } from '$lib/stores'; import { Tool, filestore } from '$lib/stores';
import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte'; import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
import Waypoint from '$lib/components/toolbar/tools/waypoint/Waypoint.svelte'; import Waypoint from '$lib/components/toolbar/tools/waypoint/Waypoint.svelte';
import ToolbarItem from './ToolbarItem.svelte'; import ToolbarItem from './ToolbarItem.svelte';
@@ -32,7 +32,10 @@
<CalendarClock slot="icon" size="18" /> <CalendarClock slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.time_tooltip')}</span> <span slot="tooltip">{$_('toolbar.time_tooltip')}</span>
</ToolbarItem> </ToolbarItem>
<ToolbarItem tool={Tool.REVERSE} on:click={reverseSelectedFiles}> <ToolbarItem
tool={Tool.REVERSE}
on:click={() => filestore.applyToSelectedFiles((file) => file.reverse())}
>
<ArrowRightLeft slot="icon" size="18" /> <ArrowRightLeft slot="icon" size="18" />
<span slot="tooltip">{$_('toolbar.reverse_tooltip')}</span> <span slot="tooltip">{$_('toolbar.reverse_tooltip')}</span>
</ToolbarItem> </ToolbarItem>

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

@@ -6,29 +6,28 @@
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 { files, getFileStore, map, selectedFiles, Tool } from '$lib/stores'; import { filestore, map, selectedFiles, Tool } from '$lib/stores';
import { brouterProfiles, privateRoads, routing, routingProfile } from './Routing'; import { brouterProfiles, privateRoads, routing, routingProfile } from './Routing';
import { _ } from 'svelte-i18n'; import { _ } from 'svelte-i18n';
import { get, type Writable } from 'svelte/store'; import { get } from 'svelte/store';
import type { GPXFile } from 'gpx';
import { RoutingControls } from './RoutingControls'; import { RoutingControls } from './RoutingControls';
import RoutingControlPopup from './RoutingControlPopup.svelte'; import RoutingControlPopup from './RoutingControlPopup.svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import mapboxgl from 'mapbox-gl'; import mapboxgl from 'mapbox-gl';
let routingControls: Map<Writable<GPXFile>, 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 selectedFile: Writable<GPXFile> | null = null; let selectedId: string | null = null;
let active = false; let active = false;
$: if ($map && $files) { $: if ($map && $filestore) {
// remove controls for deleted files // remove controls for deleted files
routingControls.forEach((controls, file) => { routingControls.forEach((controls, fileId) => {
if (!get(files).includes(file)) { if (!get(filestore).find((file) => file._data.id === fileId)) {
controls.remove(); controls.remove();
routingControls.delete(file); routingControls.delete(fileId);
} }
}); });
} }
@@ -36,30 +35,32 @@
$: if ($map && $selectedFiles) { $: if ($map && $selectedFiles) {
// update selected file // update selected file
if ($selectedFiles.size == 0 || $selectedFiles.size > 1 || !active) { if ($selectedFiles.size == 0 || $selectedFiles.size > 1 || !active) {
if (selectedFile) { if (selectedId) {
routingControls.get(selectedFile)?.remove(); routingControls.get(selectedId)?.remove();
} }
selectedFile = null; selectedId = null;
} else { } else {
let newSelectedFile = get(selectedFiles).values().next().value; let newSelectedId = get(selectedFiles).values().next().value;
let newSelectedFileStore = getFileStore(newSelectedFile); if (selectedId !== newSelectedId) {
if (selectedFile !== newSelectedFileStore) { if (selectedId) {
if (selectedFile) { routingControls.get(selectedId)?.remove();
routingControls.get(selectedFile)?.remove();
} }
selectedFile = newSelectedFileStore; selectedId = newSelectedId;
} }
} }
} }
$: if ($map && selectedFile) { $: if ($map && selectedId) {
if (!routingControls.has(selectedFile)) { if (!routingControls.has(selectedId)) {
routingControls.set( let selectedFileStore = filestore.getFileStore(selectedId);
selectedFile, if (selectedFileStore) {
new RoutingControls(get(map), selectedFile, popup, popupElement) routingControls.set(
); selectedId,
new RoutingControls(get(map), selectedFileStore, popup, popupElement)
);
}
} else { } else {
routingControls.get(selectedFile)?.add(); routingControls.get(selectedId)?.add();
} }
} }

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

@@ -3,11 +3,11 @@ import { get, type Writable } from "svelte/store";
import { computeAnchorPoints } from "./Simplify"; import { computeAnchorPoints } from "./Simplify";
import mapboxgl from "mapbox-gl"; import mapboxgl from "mapbox-gl";
import { route } from "./Routing"; import { route } from "./Routing";
import { applyToFileElement } from "$lib/stores";
import { toast } from "svelte-sonner"; import { toast } from "svelte-sonner";
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import { filestore } from "$lib/stores";
export class RoutingControls { export class RoutingControls {
map: mapboxgl.Map; map: mapboxgl.Map;
@@ -36,7 +36,7 @@ export class RoutingControls {
lon: 0 lon: 0
} }
}); });
this.temporaryAnchor = this.createAnchor(point, new TrackSegment()); this.temporaryAnchor = this.createAnchor(point, new TrackSegment(), 0);
this.temporaryAnchor.marker.getElement().classList.remove('z-10'); // Show below the other markers this.temporaryAnchor.marker.getElement().classList.remove('z-10'); // Show below the other markers
this.add(); this.add();
@@ -46,14 +46,18 @@ export class RoutingControls {
this.map.on('zoom', this.toggleAnchorsForZoomLevelAndBoundsBinded); this.map.on('zoom', this.toggleAnchorsForZoomLevelAndBoundsBinded);
this.map.on('move', this.toggleAnchorsForZoomLevelAndBoundsBinded); this.map.on('move', this.toggleAnchorsForZoomLevelAndBoundsBinded);
this.map.on('click', this.appendAnchorBinded); this.map.on('click', this.appendAnchorBinded);
this.map.on('mousemove', get(this.file)._data.layerId, this.showTemporaryAnchorBinded); this.map.on('mousemove', get(this.file)._data.id, this.showTemporaryAnchorBinded);
this.unsubscribe = this.file.subscribe(this.updateControls.bind(this)); this.unsubscribe = this.file.subscribe(this.updateControls.bind(this));
} }
updateControls() { // Update the markers when the file changes updateControls() { // Update the markers when the file changes
let segments = get(this.file).getSegments();
let anchorIndex = 0; let anchorIndex = 0;
for (let segment of get(this.file).getSegments()) { for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex++) {
let segment = segments[segmentIndex];
if (segment.trkpt.length === 0) { // Empty segment, skip if (segment.trkpt.length === 0) { // Empty segment, skip
continue; continue;
} }
@@ -79,7 +83,7 @@ export class RoutingControls {
this.anchors[anchorIndex].segment = segment; this.anchors[anchorIndex].segment = segment;
this.anchors[anchorIndex].marker.setLngLat(point.getCoordinates()); this.anchors[anchorIndex].marker.setLngLat(point.getCoordinates());
} else { } else {
this.anchors.push(this.createAnchor(point, segment)); this.anchors.push(this.createAnchor(point, segment, segmentIndex));
} }
anchorIndex++; anchorIndex++;
} }
@@ -100,13 +104,13 @@ export class RoutingControls {
this.map.off('zoom', this.toggleAnchorsForZoomLevelAndBoundsBinded); this.map.off('zoom', this.toggleAnchorsForZoomLevelAndBoundsBinded);
this.map.off('move', this.toggleAnchorsForZoomLevelAndBoundsBinded); this.map.off('move', this.toggleAnchorsForZoomLevelAndBoundsBinded);
this.map.off('click', this.appendAnchorBinded); this.map.off('click', this.appendAnchorBinded);
this.map.off('mousemove', get(this.file)._data.layerId, this.showTemporaryAnchorBinded); this.map.off('mousemove', get(this.file)._data.id, this.showTemporaryAnchorBinded);
this.map.off('mousemove', this.updateTemporaryAnchorBinded); this.map.off('mousemove', this.updateTemporaryAnchorBinded);
this.unsubscribe(); this.unsubscribe();
} }
createAnchor(point: TrackPoint, segment: TrackSegment): AnchorWithMarker { createAnchor(point: TrackPoint, segment: TrackSegment, segmentIndex: number): AnchorWithMarker {
let element = document.createElement('div'); let element = document.createElement('div');
element.className = `h-3 w-3 rounded-full bg-white border-2 border-black cursor-pointer`; element.className = `h-3 w-3 rounded-full bg-white border-2 border-black cursor-pointer`;
@@ -119,6 +123,7 @@ export class RoutingControls {
let anchor = { let anchor = {
point, point,
segment, segment,
segmentIndex,
marker, marker,
inZoom: false inZoom: false
}; };
@@ -254,28 +259,25 @@ export class RoutingControls {
getPermanentAnchor(): Anchor { getPermanentAnchor(): Anchor {
// Find the closest point closest to the temporary anchor // Find the closest point closest to the temporary anchor
let segments = get(this.file).getSegments();
let minDistance = Number.MAX_VALUE; let minDistance = Number.MAX_VALUE;
let minPoint: TrackPoint | null = null; let minAnchor = this.temporaryAnchor as Anchor;
let minSegment: TrackSegment | null = null; for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex++) {
for (let segment of get(this.file).getSegments()) { let segment = segments[segmentIndex];
for (let point of segment.trkpt) { for (let point of segment.trkpt) {
let dist = distance(point.getCoordinates(), this.temporaryAnchor.point.getCoordinates()); let dist = distance(point.getCoordinates(), this.temporaryAnchor.point.getCoordinates());
if (dist < minDistance) { if (dist < minDistance) {
minDistance = dist; minDistance = dist;
minPoint = point; minAnchor = {
minSegment = segment; point,
segment,
segmentIndex,
};
} }
} }
} }
if (!minPoint || !minSegment) { return minAnchor;
return this.temporaryAnchor;
}
return {
segment: minSegment,
point: minPoint,
};
} }
getDeleteAnchor(anchor: Anchor) { getDeleteAnchor(anchor: Anchor) {
@@ -288,17 +290,20 @@ export class RoutingControls {
let [previousAnchor, nextAnchor] = this.getNeighbouringAnchors(anchor); let [previousAnchor, nextAnchor] = this.getNeighbouringAnchors(anchor);
if (previousAnchor === null && nextAnchor === null) { // Only one point, remove it if (previousAnchor === null && nextAnchor === null) { // Only one point, remove it
applyToFileElement(this.file, anchor.segment, (segment) => { filestore.applyToFile(get(this.file)._data.id, (file) => {
let segment = file.getSegments()[anchor.segmentIndex];
segment.replace(0, 0, []); segment.replace(0, 0, []);
}, true); });
} else if (previousAnchor === null) { // First point, remove trackpoints until nextAnchor } else if (previousAnchor === null) { // First point, remove trackpoints until nextAnchor
applyToFileElement(this.file, anchor.segment, (segment) => { filestore.applyToFile(get(this.file)._data.id, (file) => {
let segment = file.getSegments()[anchor.segmentIndex];
segment.replace(0, nextAnchor.point._data.index - 1, []); segment.replace(0, nextAnchor.point._data.index - 1, []);
}, true); });
} else if (nextAnchor === null) { // Last point, remove trackpoints from previousAnchor } else if (nextAnchor === null) { // Last point, remove trackpoints from previousAnchor
applyToFileElement(this.file, anchor.segment, (segment) => { filestore.applyToFile(get(this.file)._data.id, (file) => {
let segment = file.getSegments()[anchor.segmentIndex];
segment.replace(previousAnchor.point._data.index + 1, segment.trkpt.length - 1, []); segment.replace(previousAnchor.point._data.index + 1, segment.trkpt.length - 1, []);
}, true); });
} else { // Route between previousAnchor and nextAnchor } else { // Route between previousAnchor and nextAnchor
this.routeBetweenAnchors([previousAnchor, nextAnchor], [previousAnchor.point.getCoordinates(), nextAnchor.point.getCoordinates()]); this.routeBetweenAnchors([previousAnchor, nextAnchor], [previousAnchor.point.getCoordinates(), nextAnchor.point.getCoordinates()]);
} }
@@ -318,16 +323,18 @@ export class RoutingControls {
if (!lastAnchor) { if (!lastAnchor) {
// TODO, create segment if it does not exist // TODO, create segment if it does not exist
applyToFileElement(this.file, get(this.file).getSegments()[0], (segment) => { filestore.applyToFile(get(this.file)._data.id, (file) => {
let segment = file.getSegments()[0];
segment.replace(0, 0, [newPoint]); segment.replace(0, 0, [newPoint]);
}, true); });
return; return;
} }
newPoint._data.index = lastAnchor.segment.trkpt.length - 1; // Do as if the point was the last point in the segment newPoint._data.index = lastAnchor.segment.trkpt.length - 1; // Do as if the point was the last point in the segment
let newAnchor = { let newAnchor = {
point: newPoint, point: newPoint,
segment: lastAnchor.segment segment: lastAnchor.segment,
segmentIndex: lastAnchor.segmentIndex
}; };
await this.routeBetweenAnchors([lastAnchor, newAnchor], [lastAnchor.point.getCoordinates(), newAnchor.point.getCoordinates()]); await this.routeBetweenAnchors([lastAnchor, newAnchor], [lastAnchor.point.getCoordinates(), newAnchor.point.getCoordinates()]);
@@ -358,11 +365,12 @@ export class RoutingControls {
let segment = anchors[0].segment; let segment = anchors[0].segment;
if (anchors.length === 1) { // Only one anchor, update the point in the segment if (anchors.length === 1) { // Only one anchor, update the point in the segment
applyToFileElement(this.file, segment, (segment) => { filestore.applyToFile(get(this.file)._data.id, (file) => {
let segment = file.getSegments()[anchors[0].segmentIndex];
segment.replace(0, 0, [new TrackPoint({ segment.replace(0, 0, [new TrackPoint({
attributes: targetCoordinates[0], attributes: targetCoordinates[0],
})]); })]);
}, true); });
return true; return true;
} }
@@ -417,9 +425,10 @@ export class RoutingControls {
anchor.point._data.zoom = 0; // Make these anchors permanent anchor.point._data.zoom = 0; // Make these anchors permanent
}); });
applyToFileElement(this.file, segment, (segment) => { filestore.applyToFile(get(this.file)._data.id, (file) => {
let segment = file.getSegments()[anchors[0].segmentIndex];
segment.replace(start, end, response); segment.replace(start, end, response);
}, true); });
return true; return true;
} }
@@ -427,6 +436,7 @@ export class RoutingControls {
type Anchor = { type Anchor = {
segment: TrackSegment; segment: TrackSegment;
segmentIndex: number;
point: TrackPoint; point: TrackPoint;
}; };

159
website/src/lib/filestore.ts Normal file
View File

@@ -0,0 +1,159 @@
import { writable, get, type Readable, type Writable } from "svelte/store";
import { GPXFile } from "gpx";
import { produceWithPatches, enableMapSet, enablePatches, type Immutable } from "immer";
import { fileOrder, selectedFiles } from "./stores";
enableMapSet();
enablePatches();
export type GPXFileStore = Readable<GPXFile[]> & {
add: (file: GPXFile) => void;
addMultiple: (files: GPXFile[]) => void;
applyToFile: (id: string, callback: (file: GPXFile) => void) => void;
applyToSelectedFiles: (callback: (file: GPXFile) => void) => void;
duplicateSelectedFiles: () => void;
deleteSelectedFiles: () => void;
deleteAllFiles: () => void;
getFileStore: (id: string) => Writable<Immutable<GPXFile>> | undefined;
}
export function createGPXFileStore(): GPXFileStore {
let files: Immutable<Map<string, GPXFile>> = new Map();
let subscribers: Set<Function> = new Set();
let filestores = new Map<string, Writable<Immutable<GPXFile>>>();
let patches = [];
function notifySubscriber(run: Function) {
run(Array.from(files.values()));
}
function notify() {
subscribers.forEach((run) => {
notifySubscriber(run);
});
}
function applyToGlobalStore(callback: (files: Map<string, GPXFile>) => void) {
const [newFiles, patch, inversePatch] = produceWithPatches(files, callback);
files = newFiles;
patches.push({
patch,
inversePatch,
global: true
});
console.log(patches[patches.length - 1]);
notify();
}
function applyToFiles(fileIds: string[], callback: (file: GPXFile) => void) {
const [newFiles, patch, inversePatch] = produceWithPatches(files, (draft) => {
fileIds.forEach((fileId) => {
if (draft.has(fileId)) {
callback(draft.get(fileId));
}
});
});
files = newFiles;
patches.push({
patch,
inversePatch,
global: false
});
console.log(patches[patches.length - 1]);
fileIds.forEach((fileId) => {
let filestore = filestores.get(fileId), newFile = newFiles.get(fileId);
if (filestore && newFile) {
filestore.set(newFile);
}
});
}
subscribers.add(() => {
// remove filestores that are no longer in the files map
filestores.forEach((_, fileId) => {
if (!files.has(fileId)) {
filestores.delete(fileId);
}
});
// add filestores that are in the files map but not in the filestores map
files.forEach((file, fileId) => {
if (!filestores.has(fileId)) {
filestores.set(fileId, writable(file));
}
});
});
return {
subscribe: (run) => {
subscribers.add(run);
notifySubscriber(run);
return () => {
subscribers.delete(run);
}
},
add: (file: GPXFile) => {
file._data.id = getLayerId();
applyToGlobalStore((draft) => {
draft.set(file._data.id, file);
});
},
addMultiple: (files: GPXFile[]) => {
applyToGlobalStore((draft) => {
files.forEach((file) => {
file._data.id = getLayerId();
draft.set(file._data.id, file);
});
});
},
applyToFile: (id: string, callback: (file: GPXFile) => void) => {
applyToFiles([id], callback);
},
applyToSelectedFiles: (callback: (file: GPXFile) => void) => {
applyToFiles(get(fileOrder).filter(fileId => get(selectedFiles).has(fileId)), callback);
},
duplicateSelectedFiles: () => {
applyToGlobalStore((draft) => {
get(fileOrder).forEach((fileId) => {
if (get(selectedFiles).has(fileId)) {
let file = draft.get(fileId);
if (file) {
let clone = file.clone();
clone._data.id = getLayerId();
draft.set(clone._data.id, clone);
}
}
});
});
},
deleteSelectedFiles: () => {
applyToGlobalStore((draft) => {
get(selectedFiles).forEach((fileId) => {
draft.delete(fileId);
});
});
selectedFiles.update($selected => {
$selected.clear();
return $selected;
});
},
deleteAllFiles: () => {
applyToGlobalStore((draft) => {
draft.clear();
});
selectedFiles.update($selected => {
$selected.clear();
return $selected;
});
},
getFileStore: (id: string) => {
return filestores.get(id);
}
}
}
let id = 0;
function getLayerId() {
return `gpx-${id++}`;
}

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

@@ -1,23 +1,52 @@
import { writable, get, type Writable } from 'svelte/store'; import { writable, get, type Writable, derived } from 'svelte/store';
import mapboxgl from 'mapbox-gl'; import mapboxgl from 'mapbox-gl';
import { GPXFile, buildGPX, parseGPX, type AnyGPXTreeElement } from 'gpx'; import { GPXFile, buildGPX, parseGPX, type AnyGPXTreeElement, GPXFiles } from 'gpx';
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 { createGPXFileStore } from './filestore';
export const map = writable<mapboxgl.Map | null>(null); export const map = writable<mapboxgl.Map | null>(null);
export const files = writable<Writable<GPXFile>[]>([]);
export const fileOrder = writable<GPXFile[]>([]); export const filestore = createGPXFileStore();
export const selectedFiles = writable<Set<GPXFile>>(new Set()); export const fileOrder = writable<string[]>([]);
export const selectFiles = writable<{ [key: string]: (file?: GPXFile) => void }>({}); export const selectedFiles = writable<Set<string>>(new Set());
export const selectFiles = writable<{ [key: string]: (fileId?: string) => void }>({});
export const gpxData = writable(new GPXFiles([]).getTrackPointsAndStatistics());
function updateGPXData() {
let fileIds: string[] = get(fileOrder).filter((f) => get(selectedFiles).has(f));
let files: GPXFile[] = fileIds
.map((id) => get(filestore).find((f) => f._data.id === id))
.filter((f) => f) as GPXFile[];
let gpxFiles = new GPXFiles(files);
gpxData.set(gpxFiles.getTrackPointsAndStatistics());
}
let selectedFilesUnsubscribe: Function[] = [];
selectedFiles.subscribe((selectedFiles) => {
selectedFilesUnsubscribe.forEach((unsubscribe) => unsubscribe());
selectedFiles.forEach((fileId) => {
let fileStore = filestore.getFileStore(fileId);
if (fileStore) {
let unsubscribe = fileStore.subscribe(() => {
updateGPXData();
});
selectedFilesUnsubscribe.push(unsubscribe);
}
});
updateGPXData();
});
export const settings = writable<{ [key: string]: any }>({ export const settings = writable<{ [key: string]: any }>({
distanceUnits: 'metric', distanceUnits: 'metric',
velocityUnits: 'speed', velocityUnits: 'speed',
temperatureUnits: 'celsius', temperatureUnits: 'celsius',
mode: 'system' mode: 'system'
}); });
export const gpxLayers: Writable<Map<Writable<GPXFile>, GPXLayer>> = writable(new Map()); export const gpxLayers: Writable<Map<string, GPXLayer>> = writable(new Map());
export enum Tool { export enum Tool {
ROUTING, ROUTING,
@@ -33,66 +62,14 @@ export enum Tool {
} }
export const currentTool = writable<Tool | null>(null); export const currentTool = writable<Tool | null>(null);
export function getFileStore(file: GPXFile): Writable<GPXFile> { export function createFile() {
return get(files).find(store => get(store) === file) ?? addFile(file);
}
export function getFileIndex(file: GPXFile): number {
return get(files).findIndex(store => get(store) === file);
}
export function applyToFileElement<T extends AnyGPXTreeElement>(store: Writable<GPXFile>, element: T, callback: (element: T) => void, updateSelected: boolean) {
store.update($file => {
callback(element);
return $file;
});
if (updateSelected) {
selectedFiles.update($selected => $selected);
}
}
export function applyToFile(file: GPXFile, callback: (file: GPXFile) => void, updateSelected: boolean) {
let store = getFileStore(file);
applyToFileStore(store, callback, updateSelected);
}
export function applyToFileStore(store: Writable<GPXFile>, callback: (file: GPXFile) => void, updateSelected: boolean) {
store.update($file => {
callback($file)
return $file;
});
if (updateSelected) {
selectedFiles.update($selected => $selected);
}
}
export function applyToSelectedFiles(callback: (file: GPXFile) => void, updateSelected: boolean) {
get(fileOrder).forEach(file => {
if (get(selectedFiles).has(file)) {
applyToFile(file, callback, false);
}
});
if (updateSelected) {
selectedFiles.update($selected => $selected);
}
}
export function addFile(file: GPXFile): Writable<GPXFile> {
let fileStore = writable(file);
files.update($files => {
$files.push(fileStore);
return $files;
});
return fileStore;
}
export function createFile(): Writable<GPXFile> {
let file = new GPXFile(); let file = new GPXFile();
file.metadata.name = get(_)("menu.new_filename"); file.metadata.name = get(_)("menu.new_filename");
let fileStore = addFile(file);
tick().then(() => get(selectFiles).select(file)); filestore.add(file);
tick().then(() => get(selectFiles).select(file._data.id));
currentTool.set(Tool.ROUTING); currentTool.set(Tool.ROUTING);
return fileStore;
} }
export function triggerFileInput() { export function triggerFileInput() {
@@ -112,36 +89,43 @@ export function triggerFileInput() {
export async function loadFiles(list: FileList) { export async function loadFiles(list: FileList) {
let bounds = new mapboxgl.LngLatBounds(); let bounds = new mapboxgl.LngLatBounds();
let mapBounds = new mapboxgl.LngLatBounds([180, 90, -180, -90]); let mapBounds = new mapboxgl.LngLatBounds([180, 90, -180, -90]);
if (get(files).length > 0) { if (get(filestore).length > 0) {
mapBounds = get(map)?.getBounds() ?? mapBounds; mapBounds = get(map)?.getBounds() ?? mapBounds;
bounds.extend(mapBounds); bounds.extend(mapBounds);
} }
let files = [];
for (let i = 0; i < list.length; i++) { for (let i = 0; i < list.length; i++) {
let file = await loadFile(list[i]); let file = await loadFile(list[i]);
if (file) { if (file) {
if (i == 0) { files.push(file);
get(selectFiles).select(get(file));
}
let fileBounds = get(file).getStatistics().bounds; let fileBounds = file.getStatistics().bounds;
bounds.extend(fileBounds.southWest); bounds.extend(fileBounds.southWest);
bounds.extend(fileBounds.northEast); bounds.extend(fileBounds.northEast);
bounds.extend([fileBounds.southWest.lon, fileBounds.northEast.lat]); bounds.extend([fileBounds.southWest.lon, fileBounds.northEast.lat]);
bounds.extend([fileBounds.northEast.lon, fileBounds.southWest.lat]); bounds.extend([fileBounds.northEast.lon, fileBounds.southWest.lat]);
if (!mapBounds.contains(bounds.getSouthWest()) || !mapBounds.contains(bounds.getNorthEast()) || !mapBounds.contains(bounds.getSouthEast()) || !mapBounds.contains(bounds.getNorthWest())) {
get(map)?.fitBounds(bounds, {
padding: 80,
linear: true,
easing: () => 1
});
}
} }
} }
filestore.addMultiple(files);
if (!mapBounds.contains(bounds.getSouthWest()) || !mapBounds.contains(bounds.getNorthEast()) || !mapBounds.contains(bounds.getSouthEast()) || !mapBounds.contains(bounds.getNorthWest())) {
get(map)?.fitBounds(bounds, {
padding: 80,
linear: true,
easing: () => 1
});
}
await tick();
if (files.length > 0) {
get(selectFiles).select(files[0]._data.id);
}
} }
export async function loadFile(file: File) { export async function loadFile(file: File): Promise<GPXFile | null> {
let result = await new Promise<Writable<GPXFile> | null>((resolve) => { let result = await new Promise<GPXFile | null>((resolve) => {
const reader = new FileReader(); const reader = new FileReader();
reader.onload = () => { reader.onload = () => {
let data = reader.result?.toString() ?? null; let data = reader.result?.toString() ?? null;
@@ -150,7 +134,7 @@ export async function loadFile(file: File) {
if (gpx.metadata.name === undefined) { if (gpx.metadata.name === undefined) {
gpx.metadata['name'] = file.name.split('.').slice(0, -1).join('.'); gpx.metadata['name'] = file.name.split('.').slice(0, -1).join('.');
} }
resolve(addFile(gpx)); resolve(gpx);
} else { } else {
resolve(null); resolve(null);
} }
@@ -160,49 +144,18 @@ export async function loadFile(file: File) {
return result; return result;
} }
export function duplicateSelectedFiles() { export async function exportSelectedFiles() {
applyToSelectedFiles(file => { for (let file of get(filestore)) {
let clone = file.clone(); if (get(selectedFiles).has(file._data.id)) {
addFile(clone); exportFile(file);
}, false); await new Promise(resolve => setTimeout(resolve, 200));
}
export function removeSelectedFiles() {
files.update($files => {
let index = 0;
while (index < $files.length) {
if (get(selectedFiles).has(get($files[index]))) {
$files.splice(index, 1);
} else {
index++;
}
} }
return $files; }
});
selectedFiles.update($selected => {
$selected.clear();
return $selected;
});
}
export function removeAllFiles() {
files.update($files => {
$files.splice(0, $files.length);
return $files;
});
selectedFiles.update($selected => {
$selected.clear();
return $selected;
});
}
export function exportSelectedFiles() {
get(selectedFiles).forEach(file => exportFile(file));
} }
export async function exportAllFiles() { export async function exportAllFiles() {
for (let file of get(files)) { for (let file of get(filestore)) {
exportFile(get(file)); exportFile(file);
await new Promise(resolve => setTimeout(resolve, 200)); await new Promise(resolve => setTimeout(resolve, 200));
} }
} }
@@ -215,11 +168,4 @@ export function exportFile(file: GPXFile) {
a.download = file.metadata.name + '.gpx'; a.download = file.metadata.name + '.gpx';
a.click(); a.click();
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
}
export function reverseSelectedFiles() {
selectedFiles.update($selected => {
$selected.forEach(file => applyToFile(file, file => file.reverse(), false));
return $selected;
});
} }