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

progress

Browse Source
This commit is contained in:
vcoppe
2025-10-17 23:54:45 +02:00
parent 0733562c0d
commit a73da0d81d
62 changed files with 1343 additions and 1162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated Normal file
View File

@@ -0,0 +1,6 @@
{
"name": "gpx.studio",
"lockfileVersion": 3,
"requires": true,
"packages": {}
}

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

@@ -44,21 +44,13 @@
ChartArea,
Maximize,
} from '@lucide/svelte';
import { map } from '$lib/components/map/utils.svelte';
import { map } from '$lib/components/map/map';
import { editMetadata } from '$lib/components/file-list/metadata/utils.svelte';
import { editStyle } from '$lib/components/file-list/style/utils.svelte';
import { exportState, ExportState } from '$lib/components/export/utils.svelte';
// import {
// triggerFileInput,
// createFile,
// loadFiles,
// updateSelectionFromKey,
// allHidden,
// } from '$lib/stores';
// import { canUndo, canRedo, fileActions, fileObservers, settings } from '$lib/db';
import { anySelectedLayer } from '$lib/components/map/layer-control/utils.svelte';
import { anySelectedLayer } from '$lib/components/map/layer-control/utils';
import { defaultOverlays } from '$lib/assets/layers';
// import LayerControlSettings from '$lib/components/map/layer-control/LayerControlSettings.svelte';
import LayerControlSettings from '$lib/components/map/layer-control/LayerControlSettings.svelte';
import {
allowedPastes,
ListFileItem,
@@ -69,17 +61,17 @@
import { i18n } from '$lib/i18n.svelte';
import { languages } from '$lib/languages';
import { getURLForLanguage } from '$lib/utils';
import { settings } from '$lib/logic/settings.svelte';
import { settings } from '$lib/logic/settings';
import {
createFile,
fileActions,
loadFiles,
pasteSelection,
triggerFileInput,
} from '$lib/logic/file-actions.svelte';
import { fileStateCollection } from '$lib/logic/file-state.svelte';
import { fileActionManager } from '$lib/logic/file-action-manager.svelte';
import { selection } from '$lib/logic/selection.svelte';
} from '$lib/logic/file-actions';
import { fileStateCollection } from '$lib/logic/file-state';
import { fileActionManager } from '$lib/logic/file-action-manager';
import { selection } from '$lib/logic/selection';
const {
distanceUnits,
@@ -98,19 +90,14 @@
} = settings;
function switchBasemaps() {
[currentBasemap.value, previousBasemap.value] = [
previousBasemap.value,
currentBasemap.value,
];
[$currentBasemap, $previousBasemap] = [$previousBasemap, $currentBasemap];
}
function toggleOverlays() {
if (currentOverlays.value && anySelectedLayer(currentOverlays.value)) {
previousOverlays.value = JSON.parse(JSON.stringify(currentOverlays.value));
currentOverlays.value = defaultOverlays;
if ($currentOverlays && anySelectedLayer($currentOverlays)) {
[$currentOverlays, $previousOverlays] = [defaultOverlays, $currentOverlays];
} else {
currentOverlays.value = JSON.parse(JSON.stringify(previousOverlays.value));
previousOverlays.value = defaultOverlays;
[$currentOverlays, $previousOverlays] = [$previousOverlays, defaultOverlays];
}
}
@@ -146,7 +133,7 @@
<Menubar.Separator />
<Menubar.Item
onclick={fileActions.duplicateSelection}
disabled={selection.value.size == 0}
disabled={$selection.size == 0}
>
<Copy size="16" class="mr-1" />
{i18n._('menu.duplicate')}
@@ -155,7 +142,7 @@
<Menubar.Separator />
<Menubar.Item
onclick={fileActions.deleteSelectedFiles}
disabled={selection.value.size == 0}
disabled={$selection.size == 0}
>
<FileX size="16" class="mr-1" />
{i18n._('menu.close')}
@@ -172,7 +159,7 @@
<Menubar.Separator />
<Menubar.Item
onclick={() => (exportState.current = ExportState.SELECTION)}
disabled={selection.value.size == 0}
disabled={$selection.size == 0}
>
<Download size="16" class="mr-1" />
{i18n._('menu.export')}
@@ -195,7 +182,7 @@
</Menubar.Trigger>
<Menubar.Content class="border-none">
<Menubar.Item
onclick={fileActionManager.undo}
onclick={() => fileActionManager.undo()}
disabled={!fileActionManager.canUndo}
>
<Undo2 size="16" class="mr-1" />
@@ -203,7 +190,7 @@
<Shortcut key="Z" ctrl={true} />
</Menubar.Item>
<Menubar.Item
onclick={fileActionManager.redo}
onclick={() => fileActionManager.redo()}
disabled={!fileActionManager.canRedo}
>
<Redo2 size="16" class="mr-1" />
@@ -212,8 +199,8 @@
</Menubar.Item>
<Menubar.Separator />
<Menubar.Item
disabled={selection.value.size !== 1 ||
!selection.value
disabled={$selection.size !== 1 ||
!$selection
.getSelected()
.every(
(item) =>
@@ -227,8 +214,8 @@
<Shortcut key="I" ctrl={true} />
</Menubar.Item>
<Menubar.Item
disabled={selection.value.size === 0 ||
!selection.value
disabled={$selection.size === 0 ||
!$selection
.getSelected()
.every(
(item) =>
@@ -248,7 +235,7 @@
// fileActions.setHiddenToSelection(true);
// }
}}
disabled={selection.value.size == 0}
disabled={$selection.size == 0}
>
<!-- {#if $allHidden}
<Eye size="16" class="mr-1" />
@@ -259,34 +246,32 @@
{/if} -->
<Shortcut key="H" ctrl={true} />
</Menubar.Item>
{#if treeFileView.value}
{#if selection.value
.getSelected()
.some((item) => item instanceof ListFileItem)}
{#if $treeFileView}
{#if $selection.getSelected().some((item) => item instanceof ListFileItem)}
<Menubar.Separator />
<Menubar.Item
onclick={() =>
fileActions.addNewTrack(
selection.value.getSelected()[0].getFileId()
$selection.getSelected()[0].getFileId()
)}
disabled={selection.value.size !== 1}
disabled={$selection.size !== 1}
>
<Plus size="16" class="mr-1" />
{i18n._('menu.new_track')}
</Menubar.Item>
{:else if selection.value
{:else if $selection
.getSelected()
.some((item) => item instanceof ListTrackItem)}
<Menubar.Separator />
<Menubar.Item
onclick={() => {
let item = selection.value.getSelected()[0];
let item = $selection.getSelected()[0];
fileActions.addNewSegment(
item.getFileId(),
item.getTrackIndex()
);
}}
disabled={selection.value.size !== 1}
disabled={$selection.size !== 1}
>
<Plus size="16" class="mr-1" />
{i18n._('menu.new_segment')}
@@ -304,7 +289,7 @@
</Menubar.Item>
<Menubar.Item
onclick={() => {
if (selection.value.size > 0) {
if ($selection.size > 0) {
// centerMapOnSelection();
}
}}
@@ -313,11 +298,11 @@
{i18n._('menu.center')}
<Shortcut key="⏎" ctrl={true} />
</Menubar.Item>
{#if treeFileView.value}
{#if $treeFileView}
<Menubar.Separator />
<Menubar.Item
onclick={selection.copySelection}
disabled={selection.value.size === 0}
disabled={$selection.size === 0}
>
<ClipboardCopy size="16" class="mr-1" />
{i18n._('menu.copy')}
@@ -325,7 +310,7 @@
</Menubar.Item>
<Menubar.Item
onclick={selection.cutSelection}
disabled={selection.value.size === 0}
disabled={$selection.size === 0}
>
<Scissors size="16" class="mr-1" />
{i18n._('menu.cut')}
@@ -334,9 +319,9 @@
<Menubar.Item
disabled={selection.copied === undefined ||
selection.copied.length === 0 ||
(selection.value.size > 0 &&
($selection.size > 0 &&
!allowedPastes[selection.copied[0].level].includes(
selection.value.getSelected().pop()?.level
$selection.getSelected().pop()?.level
))}
onclick={pasteSelection}
>
@@ -348,7 +333,7 @@
<Menubar.Separator />
<Menubar.Item
onclick={fileActions.deleteSelection}
disabled={selection.value.size == 0}
disabled={$selection.size == 0}
>
<Trash2 size="16" class="mr-1" />
{i18n._('menu.delete')}
@@ -362,12 +347,12 @@
<span class="hidden md:block">{i18n._('menu.view')}</span>
</Menubar.Trigger>
<Menubar.Content class="border-none">
<Menubar.CheckboxItem bind:checked={elevationProfile.value}>
<Menubar.CheckboxItem bind:checked={$elevationProfile}>
<ChartArea size="16" class="mr-1" />
{i18n._('menu.elevation_profile')}
<Shortcut key="P" ctrl={true} />
</Menubar.CheckboxItem>
<Menubar.CheckboxItem bind:checked={treeFileView.value}>
<Menubar.CheckboxItem bind:checked={$treeFileView}>
<ListTree size="16" class="mr-1" />
{i18n._('menu.tree_file_view')}
<Shortcut key="L" ctrl={true} />
@@ -384,12 +369,12 @@
/>
</Menubar.Item>
<Menubar.Separator />
<Menubar.CheckboxItem bind:checked={distanceMarkers.value}>
<Menubar.CheckboxItem bind:checked={$distanceMarkers}>
<Coins size="16" class="mr-1" />{i18n._('menu.distance_markers')}<Shortcut
key="F3"
/>
</Menubar.CheckboxItem>
<Menubar.CheckboxItem bind:checked={directionMarkers.value}>
<Menubar.CheckboxItem bind:checked={$directionMarkers}>
<Milestone size="16" class="mr-1" />{i18n._(
'menu.direction_markers'
)}<Shortcut key="F4" />
@@ -415,7 +400,7 @@
<Ruler size="16" class="mr-1" />{i18n._('menu.distance_units')}
</Menubar.SubTrigger>
<Menubar.SubContent>
<Menubar.RadioGroup bind:value={distanceUnits.value}>
<Menubar.RadioGroup bind:value={$distanceUnits}>
<Menubar.RadioItem value="metric"
>{i18n._('menu.metric')}</Menubar.RadioItem
>
@@ -433,7 +418,7 @@
<Zap size="16" class="mr-1" />{i18n._('menu.velocity_units')}
</Menubar.SubTrigger>
<Menubar.SubContent>
<Menubar.RadioGroup bind:value={velocityUnits.value}>
<Menubar.RadioGroup bind:value={$velocityUnits}>
<Menubar.RadioItem value="speed"
>{i18n._('quantities.speed')}</Menubar.RadioItem
>
@@ -448,7 +433,7 @@
<Thermometer size="16" class="mr-1" />{i18n._('menu.temperature_units')}
</Menubar.SubTrigger>
<Menubar.SubContent>
<Menubar.RadioGroup bind:value={temperatureUnits.value}>
<Menubar.RadioGroup bind:value={$temperatureUnits}>
<Menubar.RadioItem value="celsius"
>{i18n._('menu.celsius')}</Menubar.RadioItem
>
@@ -506,7 +491,7 @@
{i18n._('menu.street_view_source')}
</Menubar.SubTrigger>
<Menubar.SubContent>
<Menubar.RadioGroup bind:value={streetViewSource.value}>
<Menubar.RadioGroup bind:value={$streetViewSource}>
<Menubar.RadioItem value="mapillary"
>{i18n._('menu.mapillary')}</Menubar.RadioItem
>
@@ -554,7 +539,7 @@
</div>
<Export />
<!-- <LayerControlSettings bind:open={layerSettingsOpen} /> -->
<LayerControlSettings bind:open={layerSettingsOpen} />
<svelte:window
on:keydown={(e) => {
@@ -598,7 +583,7 @@
if (fileStateCollection.size > 0) {
exportState.current = ExportState.ALL;
}
} else if (selection.value.size > 0) {
} else if ($selection.size > 0) {
exportState.current = ExportState.SELECTION;
}
e.preventDefault();
@@ -625,8 +610,8 @@
}
} else if (e.key === 'i' && (e.metaKey || e.ctrlKey)) {
if (
selection.value.size === 1 &&
selection.value
$selection.size === 1 &&
$selection
.getSelected()
.every((item) => item instanceof ListFileItem || item instanceof ListTrackItem)
) {
@@ -634,10 +619,10 @@
}
e.preventDefault();
} else if (e.key === 'p' && (e.metaKey || e.ctrlKey)) {
elevationProfile.value = !elevationProfile.value;
$elevationProfile = !$elevationProfile;
e.preventDefault();
} else if (e.key === 'l' && (e.metaKey || e.ctrlKey)) {
treeFileView.value = !treeFileView.value;
$treeFileView = !$treeFileView;
e.preventDefault();
} else if (e.key === 'h' && (e.metaKey || e.ctrlKey)) {
// if ($allHidden) {
@@ -657,13 +642,13 @@
toggleOverlays();
e.preventDefault();
} else if (e.key === 'F3') {
distanceMarkers.value = !distanceMarkers.value;
$distanceMarkers = !$distanceMarkers;
e.preventDefault();
} else if (e.key === 'F4') {
directionMarkers.value = !directionMarkers.value;
$directionMarkers = !$directionMarkers;
e.preventDefault();
} else if (e.key === 'F5') {
routing.value = !routing.value;
$routing = !$routing;
e.preventDefault();
} else if (
e.key === 'ArrowRight' ||

2
website/src/lib/components/WithUnits.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { settings } from '$lib/db';
import {
celsiusToFahrenheit,
getConvertedDistance,
@@ -11,6 +10,7 @@
secondsToHHMMSS,
} from '$lib/units';
import { i18n } from '$lib/i18n.svelte';
import { settings } from '$lib/logic/settings';
let {
value,

6
website/src/lib/components/embedding/Embedding.svelte
View File

@@ -4,7 +4,7 @@
// import FileList from '$lib/components/file-list/FileList.svelte';
// import GPXStatistics from '$lib/components/GPXStatistics.svelte';
import Map from '$lib/components/map/Map.svelte';
import { map } from '$lib/components/map/utils.svelte';
import { map } from '$lib/components/map/map';
// import LayerControl from '$lib/components/map/layer-control/LayerControl.svelte';
import OpenIn from '$lib/components/embedding/OpenIn.svelte';
import {
@@ -25,8 +25,8 @@
} from './Embedding';
import { mode, setMode } from 'mode-watcher';
import { browser } from '$app/environment';
import { settings } from '$lib/logic/settings.svelte';
import { fileStateCollection } from '$lib/logic/file-state.svelte';
import { settings } from '$lib/logic/settings';
import { fileStateCollection } from '$lib/logic/file-state';
let {
useHash = true,

10
website/src/lib/components/export/Export.svelte
View File

@@ -10,7 +10,7 @@
ExportState,
exportState,
} from '$lib/components/export/utils.svelte';
import { tool } from '$lib/components/toolbar/utils.svelte';
import { currentTool } from '$lib/components/toolbar/tools';
// import { gpxStatistics } from '$lib/stores';
import {
Download,
@@ -24,8 +24,8 @@
import { i18n } from '$lib/i18n.svelte';
import { GPXStatistics } from 'gpx';
import { ListRootItem } from '$lib/components/file-list/file-list';
import { fileStateCollection } from '$lib/logic/file-state.svelte';
import { selection } from '$lib/logic/selection.svelte';
import { fileStateCollection } from '$lib/logic/file-state';
import { selection } from '$lib/logic/selection';
let open = $derived(exportState.current !== ExportState.NONE);
let exportOptions: Record<string, boolean> = $state({
@@ -80,7 +80,7 @@
$effect(() => {
if (open) {
tool.current = null;
currentTool.set(null);
}
});
</script>
@@ -125,7 +125,7 @@
}}
>
<Download size="16" class="mr-1" />
{#if fileStateCollection.files.size === 1 || (exportState.current === ExportState.SELECTION && selection.value.size === 1)}
{#if $fileStateCollection.size === 1 || (exportState.current === ExportState.SELECTION && $selection.size === 1)}
{i18n._('menu.download_file')}
{:else}
{i18n._('menu.download_files')}

11
website/src/lib/components/export/utils.svelte.ts
View File

@@ -1,9 +1,10 @@
import { applyToOrderedSelectedItemsFromFile } from '$lib/logic/selection.svelte';
import { fileStateCollection } from '$lib/logic/file-state.svelte';
import { settings } from '$lib/logic/settings.svelte';
import { selection } from '$lib/logic/selection';
import { fileStateCollection } from '$lib/logic/file-state';
import { settings } from '$lib/logic/settings';
import { buildGPX, type GPXFile } from 'gpx';
import FileSaver from 'file-saver';
import JSZip from 'jszip';
import { get } from 'svelte/store';
export enum ExportState {
NONE,
@@ -30,14 +31,14 @@ async function exportFiles(fileIds: string[], exclude: string[]) {
export async function exportSelectedFiles(exclude: string[]) {
const fileIds: string[] = [];
applyToOrderedSelectedItemsFromFile(async (fileId, level, items) => {
selection.applyToOrderedSelectedItemsFromFile(async (fileId, level, items) => {
fileIds.push(fileId);
});
await exportFiles(fileIds, exclude);
}
export async function exportAllFiles(exclude: string[]) {
await exportFiles(settings.fileOrder.value, exclude);
await exportFiles(get(settings.fileOrder), exclude);
}
function exportFile(file: GPXFile, exclude: string[]) {

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

@@ -2,14 +2,15 @@
import { ScrollArea } from '$lib/components/ui/scroll-area/index';
import * as ContextMenu from '$lib/components/ui/context-menu';
import FileListNode from './FileListNode.svelte';
import { fileObservers, settings } from '$lib/db';
import { setContext } from 'svelte';
import { ListFileItem, ListLevel, ListRootItem, allowedPastes } from './file-list';
import { copied, pasteSelection, selectAll, selection } from './Selection';
import { ClipboardPaste, FileStack, Plus } from '@lucide/svelte';
import Shortcut from '$lib/components/Shortcut.svelte';
import { i18n } from '$lib/i18n.svelte';
import { createFile } from '$lib/stores';
import { settings } from '$lib/logic/settings';
import { fileStateCollection } from '$lib/logic/file-state';
import { createFile, pasteSelection } from '$lib/logic/file-actions';
import { selection } from '$lib/logic/selection';
let {
orientation,
@@ -28,28 +29,28 @@
const { treeFileView } = settings;
treeFileView.subscribe(($vertical) => {
if ($vertical) {
selection.update(($selection) => {
$selection.forEach((item) => {
if ($selection.hasAnyChildren(item, false)) {
$selection.toggle(item);
}
});
return $selection;
});
} else {
selection.update(($selection) => {
$selection.forEach((item) => {
if (!(item instanceof ListFileItem)) {
$selection.toggle(item);
$selection.set(new ListFileItem(item.getFileId()), true);
}
});
return $selection;
});
}
});
// treeFileView.subscribe(($vertical) => {
// if ($vertical) {
// selection.update(($selection) => {
// $selection.forEach((item) => {
// if ($selection.hasAnyChildren(item, false)) {
// $selection.toggle(item);
// }
// });
// return $selection;
// });
// } else {
// selection.update(($selection) => {
// $selection.forEach((item) => {
// if (!(item instanceof ListFileItem)) {
// $selection.toggle(item);
// $selection.set(new ListFileItem(item.getFileId()), true);
// }
// });
// return $selection;
// });
// }
// });
</script>
<ScrollArea
@@ -64,7 +65,7 @@
: 'flex-row'} {className ?? ''}"
{style}
>
<FileListNode bind:node={$fileObservers} item={new ListRootItem()} />
<FileListNode node={$fileStateCollection} item={new ListRootItem()} />
{#if orientation === 'vertical'}
<ContextMenu.Root>
<ContextMenu.Trigger class="grow" />
@@ -75,16 +76,19 @@
<Shortcut key="+" ctrl={true} />
</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.Item onclick={selectAll} disabled={$fileObservers.size === 0}>
<ContextMenu.Item
onclick={() => selection.selectAll()}
disabled={$fileStateCollection.size === 0}
>
<FileStack size="16" class="mr-1" />
{i18n._('menu.select_all')}
<Shortcut key="A" ctrl={true} />
</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.Item
disabled={$copied === undefined ||
$copied.length === 0 ||
!allowedPastes[$copied[0].level].includes(ListLevel.ROOT)}
disabled={selection.copied === undefined ||
selection.copied.length === 0 ||
!allowedPastes[selection.copied[0].level].includes(ListLevel.ROOT)}
onclick={pasteSelection}
>
<ClipboardPaste size="16" class="mr-1" />

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

@@ -8,11 +8,10 @@
type GPXTreeElement,
} from 'gpx';
import { CollapsibleTreeNode } from '$lib/components/collapsible-tree/index';
import { settings, type GPXFileWithStatistics } from '$lib/db';
import { get, type Readable } from 'svelte/store';
import { type Readable } from 'svelte/store';
import FileListNodeContent from './FileListNodeContent.svelte';
import FileListNodeLabel from './FileListNodeLabel.svelte';
import { afterUpdate, getContext } from 'svelte';
import { getContext } from 'svelte';
import {
ListFileItem,
ListTrackSegmentItem,
@@ -22,20 +21,27 @@
type ListTrackItem,
} from './file-list';
import { i18n } from '$lib/i18n.svelte';
import { selection } from './Selection';
import { settings } from '$lib/logic/settings';
import type { GPXFileWithStatistics } from '$lib/logic/statistics';
import { selection } from '$lib/logic/selection';
export let node:
| Map<string, Readable<GPXFileWithStatistics | undefined>>
| GPXTreeElement<AnyGPXTreeElement>
| Waypoint[]
| Waypoint;
export let item: ListItem;
let {
node,
item,
}: {
node:
| Map<string, Readable<GPXFileWithStatistics | undefined>>
| GPXTreeElement<AnyGPXTreeElement>
| Waypoint[]
| Waypoint;
item: ListItem;
} = $props();
let recursive = getContext<boolean>('recursive');
let collapsible: CollapsibleTreeNode;
let collapsible: CollapsibleTreeNode | undefined = $state();
$: label =
let label = $derived(
node instanceof GPXFile && item instanceof ListFileItem
? node.metadata.name
: node instanceof Track
@@ -47,12 +53,13 @@
`${i18n._('gpx.waypoint')} ${(item as ListWaypointItem).waypointIndex + 1}`)
: node instanceof GPXFile && item instanceof ListWaypointsItem
? i18n._('gpx.waypoints')
: '';
: ''
);
const { treeFileView } = settings;
function openIfSelectedChild() {
if (collapsible && get(treeFileView) && $selection.hasAnyChildren(item, false)) {
if (collapsible && treeFileView.value && $selection.hasAnyChildren(item, false)) {
collapsible.openNode();
}
}
@@ -61,7 +68,7 @@
openIfSelectedChild();
}
afterUpdate(openIfSelectedChild);
// afterUpdate(openIfSelectedChild);
</script>
{#if node instanceof Map}

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

@@ -6,9 +6,8 @@
<script lang="ts">
import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
import { afterUpdate, getContext, onDestroy, onMount } from 'svelte';
import { getContext, onDestroy, onMount } from 'svelte';
import Sortable from 'sortablejs/Sortable';
import { getFileIds, settings, type GPXFileWithStatistics } from '$lib/db';
import { get, writable, type Readable, type Writable } from 'svelte/store';
import FileListNodeStore from './FileListNodeStore.svelte';
import FileListNode from './FileListNode.svelte';
@@ -18,18 +17,25 @@
ListRootItem,
ListWaypointsItem,
allowedMoves,
moveItems,
type ListItem,
} from './file-list';
import { selection } from './Selection';
import { isMac } from '$lib/utils';
import type { GPXFileWithStatistics } from '$lib/logic/statistics';
import { settings } from '$lib/logic/settings';
import { getFileIds, moveItems } from '$lib/logic/file-actions';
export let node:
| Map<string, Readable<GPXFileWithStatistics | undefined>>
| GPXTreeElement<AnyGPXTreeElement>
| Waypoint;
export let item: ListItem;
export let waypointRoot: boolean = false;
let {
node,
item,
waypointRoot = false,
}: {
node:
| Map<string, Readable<GPXFileWithStatistics | undefined>>
| GPXTreeElement<AnyGPXTreeElement>
| Waypoint;
item: ListItem;
waypointRoot?: boolean;
} = $props();
let container: HTMLElement;
let elements: { [id: string]: HTMLElement } = {};
@@ -126,28 +132,26 @@
updateFromSelection();
}
const { fileOrder } = settings;
function syncFileOrder() {
function syncFileOrder(order: string[]) {
if (!sortable || sortableLevel !== ListLevel.FILE) {
return;
}
const currentOrder = sortable.toArray();
if (currentOrder.length !== $fileOrder.length) {
sortable.sort($fileOrder);
if (currentOrder.length !== order.length) {
sortable.sort(order);
} else {
for (let i = 0; i < currentOrder.length; i++) {
if (currentOrder[i] !== $fileOrder[i]) {
sortable.sort($fileOrder);
if (currentOrder[i] !== order[i]) {
sortable.sort(order);
break;
}
}
}
}
$: if ($fileOrder) {
syncFileOrder();
}
const { fileOrder } = settings;
$effect(() => syncFileOrder(fileOrder.value));
function createSortable() {
sortable = Sortable.create(container, {
@@ -172,12 +176,12 @@
onSort: (e) => {
if (sortableLevel === ListLevel.FILE) {
let newFileOrder = sortable.toArray();
if (newFileOrder.length !== get(fileOrder).length) {
fileOrder.set(newFileOrder);
if (newFileOrder.length !== fileOrder.value.length) {
fileOrder.value = newFileOrder;
} else {
for (let i = 0; i < newFileOrder.length; i++) {
if (newFileOrder[i] !== get(fileOrder)[i]) {
fileOrder.set(newFileOrder);
if (newFileOrder[i] !== fileOrder.value[i]) {
fileOrder.value = newFileOrder;
break;
}
}
@@ -222,7 +226,7 @@
if (toItem instanceof ListRootItem) {
let newFileIds = getFileIds(newIndices.length);
toItems = newIndices.map((i, index) => {
$fileOrder.splice(i, 0, newFileIds[index]);
fileOrder.value.splice(i, 0, newFileIds[index]);
return item.extend(newFileIds[index]);
});
} else {

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

@@ -2,7 +2,6 @@
import { Button } from '$lib/components/ui/button';
import * as ContextMenu from '$lib/components/ui/context-menu';
import Shortcut from '$lib/components/Shortcut.svelte';
import { dbUtils, getFile } from '$lib/db';
import {
Copy,
Info,
@@ -28,20 +27,8 @@
allowedPastes,
type ListItem,
} from './file-list';
import {
copied,
copySelection,
cut,
cutSelection,
pasteSelection,
selectAll,
selectItem,
selection,
} from './Selection';
import { getContext } from 'svelte';
import { get } from 'svelte/store';
import { allHidden, gpxLayers } from '$lib/stores';
import { map, centerMapOnSelection } from '$lib/components/map/map.svelte';
import { GPXTreeElement, Track, type AnyGPXTreeElement, Waypoint, GPXFile } from 'gpx';
import { i18n } from '$lib/i18n.svelte';
import MetadataDialog from '$lib/components/file-list/metadata/MetadataDialog.svelte';
@@ -50,6 +37,9 @@
import { editStyle } from '$lib/components/file-list/style/utils.svelte';
import { waypointPopup } from '$lib/components/map/gpx-layer/GPXLayerPopup';
import { getSymbolKey, symbols } from '$lib/assets/symbols';
import { selection } from '$lib/logic/selection';
import { map } from '$lib/components/map/map';
import { fileActions, pasteSelection } from '$lib/logic/file-actions';
let {
node,
@@ -66,9 +56,9 @@
let singleSelection = $derived($selection.size === 1);
let nodeColors: string[] = $derived.by(() => {
let nodeColors: string[] = []; /* $derived.by(() => {
let colors: string[] = [];
if (node && map.current) {
if (node && map.value) {
if (node instanceof GPXFile) {
let defaultColor = undefined;
@@ -102,23 +92,18 @@
}
}
return colors;
});
});*/
let symbolKey = $derived(node instanceof Waypoint ? getSymbolKey(node.sym) : undefined);
let openEditMetadata: boolean = $state(false);
let openEditStyle: boolean = $state(false);
$effect(() => {
openEditMetadata = editMetadata.current && singleSelection && $selection.has(item);
});
$effect(() => {
openEditStyle =
editStyle.current &&
let openEditMetadata: boolean = $derived(
editMetadata.current && singleSelection && $selection.has(item)
);
let openEditStyle: boolean = $derived(
editStyle.current &&
$selection.has(item) &&
$selection.getSelected().findIndex((i) => i.getFullId() === item.getFullId()) === 0;
});
$selection.getSelected().findIndex((i) => i.getFullId() === item.getFullId()) === 0
);
let hidden = $derived(
item.level === ListLevel.WAYPOINTS ? node._data.hiddenWpt : node._data.hidden
@@ -166,7 +151,8 @@
<span
class="w-full text-left truncate py-1 flex flex-row items-center {hidden
? 'text-muted-foreground'
: ''} {$cut && $copied?.some((i) => i.getFullId() === item.getFullId())
: ''} {selection.cut &&
selection.copied?.some((i) => i.getFullId() === item.getFullId())
? 'text-muted-foreground'
: ''}"
oncontextmenu={(e) => {
@@ -255,20 +241,20 @@
{/if}
<ContextMenu.Item
onclick={() => {
if ($allHidden) {
dbUtils.setHiddenToSelection(false);
} else {
dbUtils.setHiddenToSelection(true);
}
// if ($allHidden) {
// dbUtils.setHiddenToSelection(false);
// } else {
// dbUtils.setHiddenToSelection(true);
// }
}}
>
{#if $allHidden}
<!-- {#if $allHidden}
<Eye size="16" class="mr-1" />
{i18n._('menu.unhide')}
{:else}
<EyeOff size="16" class="mr-1" />
{i18n._('menu.hide')}
{/if}
{/if} -->
<Shortcut key="H" ctrl={true} />
</ContextMenu.Item>
<ContextMenu.Separator />
@@ -276,7 +262,7 @@
{#if item instanceof ListFileItem}
<ContextMenu.Item
disabled={!singleSelection}
onclick={() => dbUtils.addNewTrack(item.getFileId())}
onclick={() => fileActions.addNewTrack(item.getFileId())}
>
<Plus size="16" class="mr-1" />
{i18n._('menu.new_track')}
@@ -285,7 +271,8 @@
{:else if item instanceof ListTrackItem}
<ContextMenu.Item
disabled={!singleSelection}
onclick={() => dbUtils.addNewSegment(item.getFileId(), item.getTrackIndex())}
onclick={() =>
fileActions.addNewSegment(item.getFileId(), item.getTrackIndex())}
>
<Plus size="16" class="mr-1" />
{i18n._('menu.new_segment')}
@@ -294,7 +281,7 @@
{/if}
{/if}
{#if item.level !== ListLevel.WAYPOINTS}
<ContextMenu.Item onclick={selectAll}>
<ContextMenu.Item onclick={() => selection.selectAll()}>
<FileStack size="16" class="mr-1" />
{i18n._('menu.select_all')}
<Shortcut key="A" ctrl={true} />
@@ -306,26 +293,26 @@
<Shortcut key="⏎" ctrl={true} />
</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.Item onclick={dbUtils.duplicateSelection}>
<ContextMenu.Item onclick={fileActions.duplicateSelection}>
<Copy size="16" class="mr-1" />
{i18n._('menu.duplicate')}
<Shortcut key="D" ctrl={true} /></ContextMenu.Item
>
{#if orientation === 'vertical'}
<ContextMenu.Item onclick={copySelection}>
<ContextMenu.Item onclick={() => selection.copySelection()}>
<ClipboardCopy size="16" class="mr-1" />
{i18n._('menu.copy')}
<Shortcut key="C" ctrl={true} />
</ContextMenu.Item>
<ContextMenu.Item onclick={cutSelection}>
<ContextMenu.Item onclick={() => selection.cutSelection()}>
<Scissors size="16" class="mr-1" />
{i18n._('menu.cut')}
<Shortcut key="X" ctrl={true} />
</ContextMenu.Item>
<ContextMenu.Item
disabled={$copied === undefined ||
$copied.length === 0 ||
!allowedPastes[$copied[0].level].includes(item.level)}
disabled={selection.copied === undefined ||
selection.copied.length === 0 ||
!allowedPastes[selection.copied[0].level].includes(item.level)}
onclick={pasteSelection}
>
<ClipboardPaste size="16" class="mr-1" />
@@ -334,7 +321,7 @@
</ContextMenu.Item>
{/if}
<ContextMenu.Separator />
<ContextMenu.Item onclick={dbUtils.deleteSelection}>
<ContextMenu.Item onclick={fileActions.deleteSelection}>
{#if item instanceof ListFileItem}
<FileX size="16" class="mr-1" />
{i18n._('menu.close')}

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

@@ -2,10 +2,10 @@
import CollapsibleTree from '$lib/components/collapsible-tree/CollapsibleTree.svelte';
import FileListNode from '$lib/components/file-list/FileListNode.svelte';
import type { GPXFileWithStatistics } from '$lib/db';
import { getContext } from 'svelte';
import type { Readable } from 'svelte/store';
import { ListFileItem } from './file-list';
import type { GPXFileWithStatistics } from '$lib/logic/statistics';
let {
file,

6
website/src/lib/components/file-list/file-list.ts
View File

@@ -1,9 +1,3 @@
// import { dbUtils, getFile } from '$lib/db';
// import { freeze } from 'immer';
// import { GPXFile, Track, TrackSegment, Waypoint } from 'gpx';
// import { selection } from './Selection';
// import { newGPXFile } from '$lib/stores';
export enum ListLevel {
ROOT,
FILE,

19
website/src/lib/components/map/Map.svelte
View File

@@ -4,11 +4,10 @@
import 'mapbox-gl/dist/mapbox-gl.css';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
import { Button } from '$lib/components/ui/button';
import { settings } from '$lib/logic/settings.svelte';
import { i18n } from '$lib/i18n.svelte';
import { PUBLIC_MAPBOX_TOKEN } from '$env/static/public';
import { page } from '$app/state';
import { map } from '$lib/components/map/utils.svelte';
import { map } from '$lib/components/map/map';
let {
accessToken = PUBLIC_MAPBOX_TOKEN,
@@ -29,9 +28,6 @@
let webgl2Supported = $state(true);
let embeddedApp = $state(false);
const { distanceUnits, elevationProfile, treeFileView, bottomPanelSize, rightPanelSize } =
settings;
onMount(() => {
let gl = document.createElement('canvas').getContext('webgl2');
if (!gl) {
@@ -52,23 +48,12 @@
language = 'en';
}
map.init(PUBLIC_MAPBOX_TOKEN, language, distanceUnits.value, hash, geocoder, geolocate);
map.init(PUBLIC_MAPBOX_TOKEN, language, hash, geocoder, geolocate);
});
onDestroy(() => {
map.destroy();
});
$effect(() => {
if (
!treeFileView.value ||
!elevationProfile.value ||
bottomPanelSize.value ||
rightPanelSize.value
) {
map.resize();
}
});
</script>
<div class={className}>

28
website/src/lib/components/map/MapPopup.svelte
View File

@@ -3,20 +3,32 @@
import WaypointPopup from '$lib/components/map/gpx-layer/WaypointPopup.svelte';
import TrackpointPopup from '$lib/components/map/gpx-layer/TrackpointPopup.svelte';
import OverpassPopup from '$lib/components/map/layer-control/OverpassPopup.svelte';
import type { PopupItem } from '$lib/components/map/map.svelte';
import type { PopupItem } from '$lib/components/map/map-popup';
import type { Writable } from 'svelte/store';
let { item, container = null }: { item: PopupItem | null; container: HTMLDivElement | null } =
let {
item,
onContainerReady,
}: { item: Writable<PopupItem | null>; onContainerReady: (div: HTMLDivElement) => void } =
$props();
let container: HTMLDivElement | null = $state(null);
$effect(() => {
if (container) {
onContainerReady(container);
}
});
</script>
<div bind:this={container}>
{#if item}
{#if item.item instanceof Waypoint}
<WaypointPopup waypoint={item} />
{:else if item.item instanceof TrackPoint}
<TrackpointPopup trackpoint={item} />
{#if $item}
{#if $item.item instanceof Waypoint}
<WaypointPopup waypoint={$item} />
{:else if $item.item instanceof TrackPoint}
<TrackpointPopup trackpoint={$item} />
{:else}
<OverpassPopup poi={item} />
<OverpassPopup poi={$item} />
{/if}
{/if}
</div>

2
website/src/lib/components/map/custom-control/CustomControl.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import CustomControl from './CustomControl';
import { map } from '$lib/components/map/utils.svelte';
import { map } from '$lib/components/map/map';
import { onMount, type Snippet } from 'svelte';
let {

2
website/src/lib/components/map/gpx-layer/CopyCoordinates.svelte
View File

@@ -10,7 +10,7 @@
class: className = '',
}: {
coordinates: Coordinates;
onCopy: () => void;
onCopy?: () => void;
class?: string;
} = $props();
</script>

5
website/src/lib/components/map/gpx-layer/DistanceMarkers.ts
View File

@@ -1,9 +1,8 @@
import { settings } from '$lib/db';
import { gpxStatistics } from '$lib/stores';
import { settings } from '$lib/logic/settings';
import type { GeoJSONSource } from 'mapbox-gl';
import { get } from 'svelte/store';
// const { distanceMarkers, distanceUnits } = settings;
const { distanceMarkers, distanceUnits } = settings;
const stops = [
[100, 0],

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

@@ -1,56 +1,41 @@
<script lang="ts">
import { map, gpxLayers } from '$lib/stores';
import { GPXLayer } from './GPXLayer';
import { fileObservers } from '$lib/db';
import { DistanceMarkers } from './DistanceMarkers';
import { StartEndMarkers } from './StartEndMarkers';
import { onDestroy } from 'svelte';
import { createPopups, removePopups } from './GPXLayerPopup';
import { gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
import { onMount } from 'svelte';
// import { map, gpxLayers } from '$lib/stores';
// import { GPXLayer } from './gpx-layer';
// import { DistanceMarkers } from './DistanceMarkers';
// import { StartEndMarkers } from './StartEndMarkers';
// import { onDestroy } from 'svelte';
// import { createPopups, removePopups } from './GPXLayerPopup';
let distanceMarkers: DistanceMarkers | undefined = undefined;
let startEndMarkers: StartEndMarkers | undefined = undefined;
// let distanceMarkers = $derived(map.current ? new DistanceMarkers(map.current) : undefined);
// let startEndMarkers = $derived(map.current ? new StartEndMarkers(map.current) : undefined);
$: if ($map && $fileObservers) {
// remove layers for deleted files
gpxLayers.forEach((layer, fileId) => {
if (!$fileObservers.has(fileId)) {
layer.remove();
gpxLayers.delete(fileId);
} else if ($map !== layer.map) {
layer.updateMap($map);
}
});
// add layers for new files
$fileObservers.forEach((file, fileId) => {
if (!gpxLayers.has(fileId)) {
gpxLayers.set(fileId, new GPXLayer($map, fileId, file));
}
});
}
// $: if ($map) {
// if (distanceMarkers) {
// distanceMarkers.remove();
// }
// if (startEndMarkers) {
// startEndMarkers.remove();
// }
// createPopups($map);
// distanceMarkers = new DistanceMarkers($map);
// startEndMarkers = new StartEndMarkers($map);
// }
$: if ($map) {
if (distanceMarkers) {
distanceMarkers.remove();
}
if (startEndMarkers) {
startEndMarkers.remove();
}
createPopups($map);
distanceMarkers = new DistanceMarkers($map);
startEndMarkers = new StartEndMarkers($map);
}
// onDestroy(() => {
// removePopups();
// if (distanceMarkers) {
// distanceMarkers.remove();
// distanceMarkers = undefined;
// }
// if (startEndMarkers) {
// startEndMarkers.remove();
// startEndMarkers = undefined;
// }
// });
onDestroy(() => {
gpxLayers.forEach((layer) => layer.remove());
gpxLayers.clear();
removePopups();
if (distanceMarkers) {
distanceMarkers.remove();
distanceMarkers = undefined;
}
if (startEndMarkers) {
startEndMarkers.remove();
startEndMarkers = undefined;
}
onMount(() => {
gpxLayers.init();
});
</script>

2
website/src/lib/components/map/gpx-layer/TrackpointPopup.svelte
View File

@@ -1,11 +1,11 @@
<script lang="ts">
import type { TrackPoint } from 'gpx';
import type { PopupItem } from '$lib/components/map/map.svelte';
import CopyCoordinates from '$lib/components/map/gpx-layer/CopyCoordinates.svelte';
import * as Card from '$lib/components/ui/card';
import WithUnits from '$lib/components/WithUnits.svelte';
import { Compass, Mountain, Timer } from '@lucide/svelte';
import { i18n } from '$lib/i18n.svelte';
import type { PopupItem } from '$lib/components/map/map';
let { trackpoint }: { trackpoint: PopupItem<TrackPoint> } = $props();
</script>

14
website/src/lib/components/map/gpx-layer/WaypointPopup.svelte
View File

@@ -3,16 +3,16 @@
import { Button } from '$lib/components/ui/button';
import Shortcut from '$lib/components/Shortcut.svelte';
import CopyCoordinates from '$lib/components/map/gpx-layer/CopyCoordinates.svelte';
import { deleteWaypoint } from './GPXLayerPopup';
import WithUnits from '$lib/components/WithUnits.svelte';
import { Dot, ExternalLink, Trash2 } from '@lucide/svelte';
import { tool, Tool } from '$lib/components/toolbar/utils.svelte';
import { currentTool, Tool } from '$lib/components/toolbar/tools';
import { getSymbolKey, symbols } from '$lib/assets/symbols';
import { i18n } from '$lib/i18n.svelte';
import sanitizeHtml from 'sanitize-html';
import type { Waypoint } from 'gpx';
import type { PopupItem } from '$lib/components/map/map.svelte';
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
import type { PopupItem } from '$lib/components/map/map';
import { fileActions } from '$lib/logic/file-actions';
export let waypoint: PopupItem<Waypoint>;
@@ -80,11 +80,15 @@
</ScrollArea>
<div class="mt-2 flex flex-col gap-1">
<CopyCoordinates coordinates={waypoint.item.attributes} />
{#if tool.current === Tool.WAYPOINT}
{#if $currentTool === Tool.WAYPOINT}
<Button
class="w-full px-2 py-1 h-8 justify-start"
variant="outline"
onclick={() => deleteWaypoint(waypoint.fileId, waypoint.item._data.index)}
onclick={() => {
if (waypoint.fileId) {
fileActions.deleteWaypoint(waypoint.fileId, waypoint.item._data.index);
}
}}
>
<Trash2 size="16" class="mr-1" />
{i18n._('menu.delete')}

7
website/src/lib/components/map/gpx-layer/GPXLayerPopup.ts → website/src/lib/components/map/gpx-layer/gpx-layer-popup.ts
View File

@@ -1,5 +1,4 @@
import { dbUtils } from '$lib/db';
import { MapPopup } from '$lib/components/map/map.svelte';
import { MapPopup } from '$lib/components/map/map-popup';
export let waypointPopup: MapPopup | null = null;
export let trackpointPopup: MapPopup | null = null;
@@ -38,7 +37,3 @@ export function removePopups() {
trackpointPopup = null;
}
}
export function deleteWaypoint(fileId: string, waypointIndex: number) {
dbUtils.applyToFile(fileId, (file) => file.replaceWaypoints(waypointIndex, waypointIndex, []));
}

134
website/src/lib/components/map/gpx-layer/GPXLayer.ts → website/src/lib/components/map/gpx-layer/gpx-layer.ts
View File

@@ -1,8 +1,7 @@
import { currentTool, map, splitAs, Tool } from '$lib/stores';
import { settings, type GPXFileWithStatistics, dbUtils } from '$lib/db';
import { get, type Readable } from 'svelte/store';
import mapboxgl from 'mapbox-gl';
import { waypointPopup, deleteWaypoint, trackpointPopup } from './GPXLayerPopup';
import { map } from '$lib/components/map/map';
import { waypointPopup, trackpointPopup } from './gpx-layer-popup';
import {
ListTrackSegmentItem,
ListWaypointItem,
@@ -19,9 +18,16 @@ import {
setPointerCursor,
setScissorsCursor,
} from '$lib/utils';
import { selectedWaypoint } from '$lib/components/toolbar/tools/waypoint/utils.svelte';
import { selectedWaypoint } from '$lib/components/toolbar/tools/waypoint/waypoint';
import { MapPin, Square } from 'lucide-static';
import { getSymbolKey, symbols } from '$lib/assets/symbols';
import type { GPXFileWithStatistics } from '$lib/logic/statistics';
import { selection } from '$lib/logic/selection';
import { settings } from '$lib/logic/settings';
import { currentTool, Tool } from '$lib/components/toolbar/tools';
import { fileActionManager } from '$lib/logic/file-action-manager';
import { fileActions } from '$lib/logic/file-actions';
import { splitAs } from '$lib/components/toolbar/tools/scissors/scissors';
const colors = [
'#ff0000',
@@ -81,10 +87,9 @@ function getMarkerForSymbol(symbol: string | undefined, layerColor: string) {
</svg>`;
}
// const { directionMarkers, treeFileView, defaultOpacity, defaultWidth } = settings;
const { directionMarkers, treeFileView, defaultOpacity, defaultWidth } = settings;
export class GPXLayer {
map: mapboxgl.Map;
fileId: string;
file: Readable<GPXFileWithStatistics | undefined>;
layerColor: string;
@@ -100,15 +105,18 @@ export class GPXLayer {
layerOnClickBinded: (e: any) => void = this.layerOnClick.bind(this);
layerOnContextMenuBinded: (e: any) => void = this.layerOnContextMenu.bind(this);
constructor(
map: mapboxgl.Map,
fileId: string,
file: Readable<GPXFileWithStatistics | undefined>
) {
this.map = map;
constructor(fileId: string, file: Readable<GPXFileWithStatistics | undefined>) {
this.fileId = fileId;
this.file = file;
this.layerColor = getColor();
this.unsubscribe.push(
map.subscribe(($map) => {
if ($map) {
$map.on('style.import.load', this.updateBinded);
this.update();
}
})
);
this.unsubscribe.push(file.subscribe(this.updateBinded));
this.unsubscribe.push(
selection.subscribe(($selection) => {
@@ -135,13 +143,12 @@ export class GPXLayer {
})
);
this.draggable = get(currentTool) === Tool.WAYPOINT;
this.map.on('style.import.load', this.updateBinded);
}
update() {
const _map = get(map);
let file = get(this.file)?.file;
if (!file) {
if (!_map || !file) {
return;
}
@@ -155,18 +162,18 @@ export class GPXLayer {
}
try {
let source = this.map.getSource(this.fileId);
let source = _map.getSource(this.fileId);
if (source) {
source.setData(this.getGeoJSON());
} else {
this.map.addSource(this.fileId, {
_map.addSource(this.fileId, {
type: 'geojson',
data: this.getGeoJSON(),
});
}
if (!this.map.getLayer(this.fileId)) {
this.map.addLayer({
if (!_map.getLayer(this.fileId)) {
_map.addLayer({
id: this.fileId,
type: 'line',
source: this.fileId,
@@ -181,16 +188,16 @@ export class GPXLayer {
},
});
this.map.on('click', this.fileId, this.layerOnClickBinded);
this.map.on('contextmenu', this.fileId, this.layerOnContextMenuBinded);
this.map.on('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
this.map.on('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
this.map.on('mousemove', this.fileId, this.layerOnMouseMoveBinded);
_map.on('click', this.fileId, this.layerOnClickBinded);
_map.on('contextmenu', this.fileId, this.layerOnContextMenuBinded);
_map.on('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
_map.on('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
_map.on('mousemove', this.fileId, this.layerOnMouseMoveBinded);
}
if (get(directionMarkers)) {
if (!this.map.getLayer(this.fileId + '-direction')) {
this.map.addLayer(
if (!_map.getLayer(this.fileId + '-direction')) {
_map.addLayer(
{
id: this.fileId + '-direction',
type: 'symbol',
@@ -212,12 +219,12 @@ export class GPXLayer {
'text-halo-color': 'white',
},
},
this.map.getLayer('distance-markers') ? 'distance-markers' : undefined
_map.getLayer('distance-markers') ? 'distance-markers' : undefined
);
}
} else {
if (this.map.getLayer(this.fileId + '-direction')) {
this.map.removeLayer(this.fileId + '-direction');
if (_map.getLayer(this.fileId + '-direction')) {
_map.removeLayer(this.fileId + '-direction');
}
}
@@ -228,7 +235,7 @@ export class GPXLayer {
}
});
this.map.setFilter(
_map.setFilter(
this.fileId,
[
'any',
@@ -240,8 +247,8 @@ export class GPXLayer {
],
{ validate: false }
);
if (this.map.getLayer(this.fileId + '-direction')) {
this.map.setFilter(
if (_map.getLayer(this.fileId + '-direction')) {
_map.setFilter(
this.fileId + '-direction',
[
'any',
@@ -299,7 +306,7 @@ export class GPXLayer {
}
if (get(currentTool) === Tool.WAYPOINT && e.shiftKey) {
deleteWaypoint(this.fileId, marker._waypoint._data.index);
fileActions.deleteWaypoint(this.fileId, marker._waypoint._data.index);
e.stopPropagation();
return;
}
@@ -312,11 +319,11 @@ export class GPXLayer {
false
)
) {
addSelectItem(
selection.addSelectItem(
new ListWaypointItem(this.fileId, marker._waypoint._data.index)
);
} else {
selectItem(
selection.selectItem(
new ListWaypointItem(this.fileId, marker._waypoint._data.index)
);
}
@@ -336,7 +343,7 @@ export class GPXLayer {
resetCursor();
marker.getElement().style.cursor = '';
getElevation([marker._waypoint]).then((ele) => {
dbUtils.applyToFile(this.fileId, (file) => {
fileActionManager.applyToFile(this.fileId, (file) => {
let latLng = marker.getLngLat();
let wpt = file.wpt[marker._waypoint._data.index];
wpt.setCoordinates({
@@ -361,36 +368,31 @@ export class GPXLayer {
this.markers.forEach((marker) => {
if (!marker._waypoint._data.hidden) {
marker.addTo(this.map);
marker.addTo(_map);
} else {
marker.remove();
}
});
}
updateMap(map: mapboxgl.Map) {
this.map = map;
this.map.on('style.import.load', this.updateBinded);
this.update();
}
remove() {
if (get(map)) {
this.map.off('click', this.fileId, this.layerOnClickBinded);
this.map.off('contextmenu', this.fileId, this.layerOnContextMenuBinded);
this.map.off('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
this.map.off('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
this.map.off('mousemove', this.fileId, this.layerOnMouseMoveBinded);
this.map.off('style.import.load', this.updateBinded);
const _map = get(map);
if (_map) {
_map.off('click', this.fileId, this.layerOnClickBinded);
_map.off('contextmenu', this.fileId, this.layerOnContextMenuBinded);
_map.off('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
_map.off('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
_map.off('mousemove', this.fileId, this.layerOnMouseMoveBinded);
_map.off('style.import.load', this.updateBinded);
if (this.map.getLayer(this.fileId + '-direction')) {
this.map.removeLayer(this.fileId + '-direction');
if (_map.getLayer(this.fileId + '-direction')) {
_map.removeLayer(this.fileId + '-direction');
}
if (this.map.getLayer(this.fileId)) {
this.map.removeLayer(this.fileId);
if (_map.getLayer(this.fileId)) {
_map.removeLayer(this.fileId);
}
if (this.map.getSource(this.fileId)) {
this.map.removeSource(this.fileId);
if (_map.getSource(this.fileId)) {
_map.removeSource(this.fileId);
}
}
@@ -404,13 +406,17 @@ export class GPXLayer {
}
moveToFront() {
if (this.map.getLayer(this.fileId)) {
this.map.moveLayer(this.fileId);
const _map = get(map);
if (!_map) {
return;
}
if (this.map.getLayer(this.fileId + '-direction')) {
this.map.moveLayer(
if (_map.getLayer(this.fileId)) {
_map.moveLayer(this.fileId);
}
if (_map.getLayer(this.fileId + '-direction')) {
_map.moveLayer(
this.fileId + '-direction',
this.map.getLayer('distance-markers') ? 'distance-markers' : undefined
_map.getLayer('distance-markers') ? 'distance-markers' : undefined
);
}
}
@@ -468,7 +474,7 @@ export class GPXLayer {
new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex)
)
) {
dbUtils.split(splitAs.current, this.fileId, trackIndex, segmentIndex, {
fileActions.split(get(splitAs), this.fileId, trackIndex, segmentIndex, {
lat: e.lngLat.lat,
lon: e.lngLat.lng,
});
@@ -492,9 +498,9 @@ export class GPXLayer {
}
if (e.originalEvent.ctrlKey || e.originalEvent.metaKey) {
addSelectItem(item);
selection.addSelectItem(item);
} else {
selectItem(item);
selection.selectItem(item);
}
}

38
website/src/lib/components/map/gpx-layer/gpx-layers.ts Normal file
View File

@@ -0,0 +1,38 @@
import { GPXFileStateCollectionObserver } from '$lib/logic/file-state';
import { GPXLayer } from './gpx-layer';
export class GPXLayerCollection {
private _layers: Map<string, GPXLayer>;
private _fileStateCollectionObserver: GPXFileStateCollectionObserver | null = null;
constructor() {
this._layers = new Map<string, GPXLayer>();
}
init() {
if (this._fileStateCollectionObserver) {
return;
}
this._fileStateCollectionObserver = new GPXFileStateCollectionObserver(
(fileId, fileState) => {
const layer = new GPXLayer(fileId, fileState);
this._layers.set(fileId, layer);
},
(fileId) => {
const layer = this._layers.get(fileId);
if (layer) {
layer.remove();
this._layers.delete(fileId);
}
},
() => {
this._layers.forEach((layer) => {
layer.remove();
});
this._layers.clear();
}
);
}
}
export const gpxLayers = new GPXLayerCollection();

24
website/src/lib/components/map/layer-control/CustomLayers.svelte
View File

@@ -18,12 +18,12 @@
Layers2,
} from '@lucide/svelte';
import { i18n } from '$lib/i18n.svelte';
import { settings } from '$lib/db';
import { defaultBasemap, type CustomLayer } from '$lib/assets/layers';
import { map } from '$lib/stores';
import { onDestroy, onMount } from 'svelte';
import Sortable from 'sortablejs/Sortable';
import { customBasemapUpdate } from './utils.svelte';
import { customBasemapUpdate } from './utils';
import { settings } from '$lib/logic/settings';
import { map } from '$lib/components/map/map';
const {
customLayers,
@@ -312,10 +312,10 @@
<div class="flex flex-row items-center gap-2" data-id={id}>
<Move size="12" />
<span class="grow">{$customLayers[id].name}</span>
<Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
<Button variant="outline" onclick={() => (selectedLayerId = id)} class="p-1 h-7">
<Pencil size="16" />
</Button>
<Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
<Button variant="outline" onclick={() => deleteLayer(id)} class="p-1 h-7">
<Trash2 size="16" />
</Button>
</div>
@@ -338,10 +338,10 @@
<div class="flex flex-row items-center gap-2" data-id={id}>
<Move size="12" />
<span class="grow">{$customLayers[id].name}</span>
<Button variant="outline" on:click={() => (selectedLayerId = id)} class="p-1 h-7">
<Button variant="outline" onclick={() => (selectedLayerId = id)} class="p-1 h-7">
<Pencil size="16" />
</Button>
<Button variant="outline" on:click={() => deleteLayer(id)} class="p-1 h-7">
<Button variant="outline" onclick={() => deleteLayer(id)} class="p-1 h-7">
<Trash2 size="16" />
</Button>
</div>
@@ -373,7 +373,7 @@
/>
{#if tileUrls.length > 1}
<Button
on:click={() =>
onclick={() =>
(tileUrls = tileUrls.filter((_, index) => index !== i))}
variant="outline"
class="p-1 h-8"
@@ -383,7 +383,7 @@
{/if}
{#if i === tileUrls.length - 1}
<Button
on:click={() => (tileUrls = [...tileUrls, ''])}
onclick={() => (tileUrls = [...tileUrls, ''])}
variant="outline"
class="p-1 h-8"
>
@@ -416,16 +416,16 @@
</RadioGroup.Root>
{#if selectedLayerId}
<div class="mt-2 flex flex-row gap-2">
<Button variant="outline" on:click={createLayer} class="grow">
<Button variant="outline" onclick={createLayer} class="grow">
<Save size="16" class="mr-1" />
{i18n._('layers.custom_layers.update')}
</Button>
<Button variant="outline" on:click={() => (selectedLayerId = undefined)}>
<Button variant="outline" onclick={() => (selectedLayerId = undefined)}>
<CircleX size="16" />
</Button>
</div>
{:else}
<Button variant="outline" class="mt-2" on:click={createLayer}>
<Button variant="outline" class="mt-2" onclick={createLayer}>
<CirclePlus size="16" class="mr-1" />
{i18n._('layers.custom_layers.create')}
</Button>

88
website/src/lib/components/map/layer-control/LayerControl.svelte
View File

@@ -1,18 +1,18 @@
<script lang="ts">
import CustomControl from '$lib/components/map/custom-control/CustomControl.svelte';
import LayerTree from './LayerTree.svelte';
// import { OverpassLayer } from './OverpassLayer';
import { OverpassLayer } from './OverpassLayer';
import { Separator } from '$lib/components/ui/separator';
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
import { Layers } from '@lucide/svelte';
import { basemaps, defaultBasemap, overlays } from '$lib/assets/layers';
import { settings } from '$lib/logic/settings.svelte';
import { map } from '$lib/components/map/utils.svelte';
import { customBasemapUpdate, getLayers } from './utils.svelte';
import { settings } from '$lib/logic/settings';
import { map } from '$lib/components/map/map';
import { customBasemapUpdate, getLayers } from './utils';
import type { ImportSpecification, StyleSpecification } from 'mapbox-gl';
let container: HTMLDivElement;
// let overpassLayer: OverpassLayer;
let overpassLayer: OverpassLayer;
const {
currentBasemap,
@@ -27,17 +27,17 @@
} = settings;
function setStyle() {
if (!map.value) {
if (!$map) {
return;
}
let basemap = basemaps.hasOwnProperty(currentBasemap.value)
? basemaps[currentBasemap.value]
: (customLayers.value[currentBasemap.value]?.value ?? basemaps[defaultBasemap]);
map.value.removeImport('basemap');
let basemap = basemaps.hasOwnProperty($currentBasemap)
? basemaps[$currentBasemap]
: ($customLayers[$currentBasemap] ?? basemaps[defaultBasemap]);
$map.removeImport('basemap');
if (typeof basemap === 'string') {
map.value.addImport({ id: 'basemap', url: basemap }, 'overlays');
$map.addImport({ id: 'basemap', url: basemap }, 'overlays');
} else {
map.value.addImport(
$map.addImport(
{
id: 'basemap',
url: '',
@@ -49,23 +49,21 @@
}
$effect(() => {
if (map.value && (currentBasemap.value || customBasemapUpdate.value)) {
if ($map && ($currentBasemap || $customBasemapUpdate)) {
setStyle();
}
});
function addOverlay(id: string) {
if (!map.value) {
if (!$map) {
return;
}
try {
let overlay = customLayers.value.hasOwnProperty(id)
? customLayers.value[id].value
: overlays[id];
let overlay = $customLayers.hasOwnProperty(id) ? $customLayers[id].value : overlays[id];
if (typeof overlay === 'string') {
map.value.addImport({ id, url: overlay });
$map.addImport({ id, url: overlay });
} else {
if (opacities.value.hasOwnProperty(id)) {
if ($opacities.hasOwnProperty(id)) {
overlay = {
...overlay,
layers: (overlay as StyleSpecification).layers.map((layer) => {
@@ -73,13 +71,13 @@
if (!layer.paint) {
layer.paint = {};
}
layer.paint['raster-opacity'] = opacities.value[id];
layer.paint['raster-opacity'] = $opacities[id];
}
return layer;
}),
};
}
map.value.addImport({
$map.addImport({
id,
url: '',
data: overlay as StyleSpecification,
@@ -91,13 +89,13 @@
}
function updateOverlays() {
if (map.value && currentOverlays.value && opacities.value) {
let overlayLayers = getLayers(currentOverlays.value);
if ($map && $currentOverlays && $opacities) {
let overlayLayers = getLayers($currentOverlays);
try {
let activeOverlays =
map.value
$map
.getStyle()
?.imports?.reduce(
.imports?.reduce(
(
acc: Record<string, ImportSpecification>,
imprt: ImportSpecification
@@ -113,7 +111,7 @@
) || {};
let toRemove = Object.keys(activeOverlays).filter((id) => !overlayLayers[id]);
toRemove.forEach((id) => {
map.value?.removeImport(id);
$map?.removeImport(id);
});
let toAdd = Object.entries(overlayLayers)
.filter(([id, selected]) => selected && !activeOverlays.hasOwnProperty(id))
@@ -128,19 +126,19 @@
}
$effect(() => {
if (map.value && currentOverlays.value && opacities.value) {
if ($map && $currentOverlays && $opacities) {
updateOverlays();
}
});
// map.onLoad((map: mapboxgl.Map) => {
// if (overpassLayer) {
// overpassLayer.remove();
// }
// overpassLayer = new OverpassLayer(map);
// overpassLayer.add();
// map.on('style.import.load', updateOverlays);
// });
map.onLoad((_map: mapboxgl.Map) => {
if (overpassLayer) {
overpassLayer.remove();
}
overpassLayer = new OverpassLayer(_map);
overpassLayer.add();
_map.on('style.import.load', updateOverlays);
});
let open = $state(false);
function openLayerControl() {
@@ -185,34 +183,34 @@
<div class="h-fit">
<div class="p-2">
<LayerTree
layerTree={selectedBasemapTree.value}
layerTree={$selectedBasemapTree}
name="basemaps"
selected={currentBasemap.value}
selected={$currentBasemap}
onselect={(value) => {
previousBasemap.value = currentBasemap.value;
currentBasemap.value = value;
$previousBasemap = $currentBasemap;
$currentBasemap = value;
}}
/>
</div>
<Separator class="w-full" />
<div class="p-2">
{#if currentOverlays.value}
{#if $currentOverlays}
<LayerTree
layerTree={selectedOverlayTree.value}
layerTree={$selectedOverlayTree}
name="overlays"
multiple={true}
bind:checked={currentOverlays.value}
bind:checked={$currentOverlays}
/>
{/if}
</div>
<Separator class="w-full" />
<div class="p-2">
{#if currentOverpassQueries.value}
{#if $currentOverpassQueries}
<LayerTree
layerTree={selectedOverpassTree.value}
layerTree={$selectedOverpassTree}
name="overpass"
multiple={true}
bind:checked={currentOverpassQueries.value}
bind:checked={$currentOverpassQueries}
/>
{/if}
</div>

51
website/src/lib/components/map/layer-control/LayerControlSettings.svelte
View File

@@ -14,11 +14,11 @@
overlayTree,
overpassTree,
} from '$lib/assets/layers';
import { getLayers, isSelected, toggle } from '$lib/components/map/layer-control/utils.svelte';
import { settings } from '$lib/db';
import { getLayers, isSelected, toggle } from '$lib/components/map/layer-control/utils';
import { i18n } from '$lib/i18n.svelte';
import { map } from '$lib/components/map/map.svelte';
import { map } from '$lib/components/map/map';
import CustomLayers from './CustomLayers.svelte';
import { settings } from '$lib/logic/settings';
const {
selectedBasemapTree,
@@ -48,29 +48,33 @@
}
}
$: if ($selectedBasemapTree && $currentBasemap) {
if (!isSelected($selectedBasemapTree, $currentBasemap)) {
if (!isSelected($selectedBasemapTree, defaultBasemap)) {
$selectedBasemapTree = toggle($selectedBasemapTree, defaultBasemap);
$effect(() => {
if ($selectedBasemapTree && $currentBasemap) {
if (!isSelected($selectedBasemapTree, $currentBasemap)) {
if (!isSelected($selectedBasemapTree, defaultBasemap)) {
$selectedBasemapTree = toggle($selectedBasemapTree, defaultBasemap);
}
$currentBasemap = defaultBasemap;
}
$currentBasemap = defaultBasemap;
}
}
});
$: if ($selectedOverlayTree && $currentOverlays) {
let overlayLayers = getLayers($currentOverlays);
let toRemove = Object.entries(overlayLayers).filter(
([id, checked]) => checked && !isSelected($selectedOverlayTree, id)
);
if (toRemove.length > 0) {
currentOverlays.update((tree) => {
toRemove.forEach(([id]) => {
toggle(tree, id);
$effect(() => {
if ($selectedOverlayTree && $currentOverlays) {
let overlayLayers = getLayers($currentOverlays);
let toRemove = Object.entries(overlayLayers).filter(
([id, checked]) => checked && !isSelected($selectedOverlayTree, id)
);
if (toRemove.length > 0) {
currentOverlays.update((tree) => {
toRemove.forEach(([id]) => {
toggle(tree, id);
});
return tree;
});
return tree;
});
}
}
}
});
</script>
<Sheet.Root bind:open>
@@ -164,11 +168,12 @@
onValueChange={(value) => {
if (selectedOverlay) {
if (
map.current &&
$map &&
$currentOverlays &&
isSelected($currentOverlays, selectedOverlay)
) {
try {
map.current.removeImport(selectedOverlay);
$map.removeImport(selectedOverlay);
} catch (e) {
// No reliable way to check if the map is ready to remove sources and layers
}

8
website/src/lib/components/map/layer-control/LayerTreeNode.svelte
View File

@@ -4,9 +4,9 @@
import { Checkbox } from '$lib/components/ui/checkbox';
import CollapsibleTreeNode from '$lib/components/collapsible-tree/CollapsibleTreeNode.svelte';
import { type LayerTreeType } from '$lib/assets/layers';
import { anySelectedLayer } from './utils.svelte';
import { anySelectedLayer } from './utils';
import { i18n } from '$lib/i18n.svelte';
import { settings } from '$lib/logic/settings.svelte';
import { settings } from '$lib/logic/settings';
let {
name,
@@ -70,8 +70,8 @@
/>
{/if}
<Label for="{name}-{id}" class="flex flex-row items-center gap-1">
{#if customLayers.value.hasOwnProperty(id)}
{customLayers.value[id].name}
{#if $customLayers.hasOwnProperty(id)}
{$customLayers[id].name}
{:else}
{i18n._(`layers.label.${id}`)}
{/if}

15
website/src/lib/components/map/layer-control/OverpassLayer.ts
View File

@@ -1,12 +1,13 @@
import { SphericalMercator } from '@mapbox/sphericalmercator';
import { getLayers } from './utils.svelte';
import { getLayers } from './utils';
import { get, writable } from 'svelte/store';
import { liveQuery } from 'dexie';
import { db, settings } from '$lib/db';
import { overpassQueryData } from '$lib/assets/layers';
import { MapPopup } from '$lib/components/map/map.svelte';
import { MapPopup } from '$lib/components/map/map-popup';
import { settings } from '$lib/logic/settings';
import { db } from '$lib/db';
// const { currentOverpassQueries } = settings;
const { currentOverpassQueries } = settings;
const mercator = new SphericalMercator({
size: 256,
@@ -60,8 +61,10 @@ export class OverpassLayer {
queryIfNeeded() {
if (this.map.getZoom() >= this.minZoom) {
const bounds = this.map.getBounds().toArray();
this.query([bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]]);
const bounds = this.map.getBounds()?.toArray();
if (bounds) {
this.query([bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]]);
}
}
}

15
website/src/lib/components/map/layer-control/OverpassPopup.svelte
View File

@@ -1,13 +1,13 @@
<script lang="ts">
import * as Card from '$lib/components/ui/card';
import { Button } from '$lib/components/ui/button';
import { selection } from '$lib/components/file-list/Selection';
import { PencilLine, MapPin } from '@lucide/svelte';
import { i18n } from '$lib/i18n.svelte';
import { dbUtils } from '$lib/db';
import type { PopupItem } from '$lib/components/MapPopup';
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
import type { WaypointType } from 'gpx';
import type { PopupItem } from '$lib/components/map/map';
import { fileActions } from '$lib/logic/file-actions';
import { selection } from '$lib/logic/selection';
export let poi: PopupItem<any>;
@@ -43,7 +43,7 @@
},
};
}
dbUtils.addOrUpdateWaypoint(wpt);
fileActions.addOrUpdateWaypoint(wpt);
}
</script>
@@ -94,12 +94,7 @@
{/each}
</div>
</ScrollArea>
<Button
class="mt-2"
variant="outline"
disabled={$selection.size === 0}
on:click={addToFile}
>
<Button class="mt-2" variant="outline" disabled={$selection.size === 0} onclick={addToFile}>
<MapPin size="16" class="mr-1" />
{i18n._('toolbar.waypoint.add')}
</Button>

5
website/src/lib/components/map/layer-control/utils.svelte.ts → website/src/lib/components/map/layer-control/utils.ts
View File

@@ -1,4 +1,5 @@
import type { LayerTreeType } from '$lib/assets/layers';
import { writable } from 'svelte/store';
export function anySelectedLayer(node: LayerTreeType) {
return (
@@ -54,6 +55,4 @@ export function toggle(node: LayerTreeType, id: string) {
return node;
}
export const customBasemapUpdate = $state({
value: 0,
});
export const customBasemapUpdate = writable(0);

84
website/src/lib/components/map/map-popup.ts Normal file
View File

@@ -0,0 +1,84 @@
import { TrackPoint, Waypoint } from 'gpx';
import mapboxgl from 'mapbox-gl';
import { mount, tick } from 'svelte';
import { get, writable, type Writable } from 'svelte/store';
import MapPopupComponent from '$lib/components/map/MapPopup.svelte';
export type PopupItem<T = Waypoint | TrackPoint | any> = {
item: T;
fileId?: string;
hide?: () => void;
};
export class MapPopup {
map: mapboxgl.Map;
popup: mapboxgl.Popup;
item: Writable<PopupItem | null> = writable(null);
component: ReturnType<typeof mount>;
maybeHideBinded = this.maybeHide.bind(this);
constructor(map: mapboxgl.Map, options?: mapboxgl.PopupOptions) {
this.map = map;
this.popup = new mapboxgl.Popup(options);
this.component = mount(MapPopupComponent, {
target: document.body,
props: {
item: this.item,
onContainerReady: (container: HTMLDivElement) => {
this.popup.setDOMContent(container);
},
},
});
}
setItem(item: PopupItem | null) {
if (item) item.hide = () => this.hide();
this.item.set(item);
if (item === null) {
this.hide();
} else {
tick().then(() => this.show());
}
}
show() {
const item = get(this.item);
if (item === null) {
this.hide();
return;
}
this.popup.setLngLat(this.getCoordinates()).addTo(this.map);
this.map.on('mousemove', this.maybeHideBinded);
}
maybeHide(e: mapboxgl.MapMouseEvent) {
const item = get(this.item);
if (item === null) {
this.hide();
return;
}
if (this.map.project(this.getCoordinates()).dist(this.map.project(e.lngLat)) > 60) {
this.hide();
}
}
hide() {
this.popup.remove();
this.map.off('mousemove', this.maybeHideBinded);
}
remove() {
this.popup.remove();
this.component.$destroy();
}
getCoordinates() {
const item = get(this.item);
if (item === null) {
return new mapboxgl.LngLat(0, 0);
}
return item.item instanceof Waypoint || item.item instanceof TrackPoint
? item.item.getCoordinates()
: new mapboxgl.LngLat(item.item.lon, item.item.lat);
}
}

205
website/src/lib/components/map/utils.svelte.ts → website/src/lib/components/map/map.ts
View File

@@ -1,10 +1,9 @@
import { TrackPoint, Waypoint, type Coordinates } from 'gpx';
import mapboxgl from 'mapbox-gl';
import { tick, mount } from 'svelte';
// import MapPopupComponent from '$lib/components/map/MapPopup.svelte';
import { get } from 'svelte/store';
// import { fileObservers } from '$lib/db';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import { get, writable, type Writable } from 'svelte/store';
import { settings } from '$lib/logic/settings';
const { treeFileView, elevationProfile, bottomPanelSize, rightPanelSize, distanceUnits } = settings;
let fitBoundsOptions: mapboxgl.MapOptions['fitBoundsOptions'] = {
maxZoom: 15,
@@ -13,13 +12,17 @@ let fitBoundsOptions: mapboxgl.MapOptions['fitBoundsOptions'] = {
};
export class MapboxGLMap {
private _map: mapboxgl.Map | null = $state(null);
private _map: Writable<mapboxgl.Map | null> = writable(null);
private _onLoadCallbacks: ((map: mapboxgl.Map) => void)[] = [];
private _unsubscribes: (() => void)[] = [];
subscribe(run: (value: mapboxgl.Map | null) => void, invalidate?: () => void) {
return this._map.subscribe(run, invalidate);
}
init(
accessToken: string,
language: string,
distanceUnits: 'metric' | 'imperial' | 'nautical',
hash: boolean,
geocoder: boolean,
geolocate: boolean
@@ -126,7 +129,7 @@ export class MapboxGLMap {
);
}
const scaleControl = new mapboxgl.ScaleControl({
unit: distanceUnits,
unit: get(distanceUnits),
});
map.addControl(scaleControl);
map.on('style.load', () => {
@@ -160,46 +163,58 @@ export class MapboxGLMap {
});
});
map.on('load', () => {
this._map = map; // only set the store after the map has loaded
this._map.set(map); // only set the store after the map has loaded
window._map = map; // entry point for extensions
scaleControl.setUnit(distanceUnits);
scaleControl.setUnit(get(distanceUnits));
this._onLoadCallbacks.forEach((callback) => callback(map));
this._onLoadCallbacks = [];
});
this._unsubscribes.push(treeFileView.subscribe(() => this.resize()));
this._unsubscribes.push(elevationProfile.subscribe(() => this.resize()));
this._unsubscribes.push(bottomPanelSize.subscribe(() => this.resize()));
this._unsubscribes.push(rightPanelSize.subscribe(() => this.resize()));
this._unsubscribes.push(
distanceUnits.subscribe((units) => {
scaleControl.setUnit(units);
})
);
}
onLoad(callback: (map: mapboxgl.Map) => void) {
if (this._map) {
callback(this._map);
const map = get(this._map);
if (map) {
callback(map);
} else {
this._onLoadCallbacks.push(callback);
}
}
destroy() {
if (this._map) {
this._map.remove();
this._map = null;
const map = get(this._map);
if (map) {
map.remove();
this._map.set(null);
}
}
get value(): mapboxgl.Map | null {
return this._map;
this._unsubscribes.forEach((unsubscribe) => unsubscribe());
this._unsubscribes = [];
}
resize() {
if (this._map) {
this._map.resize();
const map = get(this._map);
if (map) {
map.resize();
}
}
toggle3D() {
if (this._map) {
if (this._map.getPitch() === 0) {
this._map.easeTo({ pitch: 70 });
const map = get(this._map);
if (map) {
if (map.getPitch() === 0) {
map.easeTo({ pitch: 70 });
} else {
this._map.easeTo({ pitch: 0 });
map.easeTo({ pitch: 0 });
}
}
}
@@ -207,15 +222,15 @@ export class MapboxGLMap {
export const map = new MapboxGLMap();
const targetMapBounds: {
bounds: mapboxgl.LngLatBounds;
ids: string[];
total: number;
} = $state({
bounds: new mapboxgl.LngLatBounds([180, 90, -180, -90]),
ids: [],
total: 0,
});
// const targetMapBounds: {
// bounds: mapboxgl.LngLatBounds;
// ids: string[];
// total: number;
// } = $state({
// bounds: new mapboxgl.LngLatBounds([180, 90, -180, -90]),
// ids: [],
// total: 0,
// });
// $effect(() => {
// if (
@@ -251,32 +266,32 @@ const targetMapBounds: {
// map.current.fitBounds(targetMapBounds.bounds, { padding: 80, linear: true, easing: () => 1 });
// });
export function initTargetMapBounds(ids: string[]) {
targetMapBounds.bounds = new mapboxgl.LngLatBounds([180, 90, -180, -90]);
targetMapBounds.ids = ids;
targetMapBounds.total = ids.length;
}
// export function initTargetMapBounds(ids: string[]) {
// targetMapBounds.bounds = new mapboxgl.LngLatBounds([180, 90, -180, -90]);
// targetMapBounds.ids = ids;
// targetMapBounds.total = ids.length;
// }
export function updateTargetMapBounds(
id: string,
bounds: { southWest: Coordinates; northEast: Coordinates }
) {
if (targetMapBounds.ids.indexOf(id) === -1) {
return;
}
// export function updateTargetMapBounds(
// id: string,
// bounds: { southWest: Coordinates; northEast: Coordinates }
// ) {
// if (targetMapBounds.ids.indexOf(id) === -1) {
// return;
// }
if (
bounds.southWest.lat !== 90 ||
bounds.southWest.lon !== 180 ||
bounds.northEast.lat !== -90 ||
bounds.northEast.lon !== -180
) {
// Avoid update for empty (new) files
targetMapBounds.ids = targetMapBounds.ids.filter((x) => x !== id);
targetMapBounds.bounds.extend(bounds.southWest);
targetMapBounds.bounds.extend(bounds.northEast);
}
}
// if (
// bounds.southWest.lat !== 90 ||
// bounds.southWest.lon !== 180 ||
// bounds.northEast.lat !== -90 ||
// bounds.northEast.lon !== -180
// ) {
// // Avoid update for empty (new) files
// targetMapBounds.ids = targetMapBounds.ids.filter((x) => x !== id);
// targetMapBounds.bounds.extend(bounds.southWest);
// targetMapBounds.bounds.extend(bounds.northEast);
// }
// }
// export function centerMapOnSelection() {
// let selected = get(selection).getSelected();
@@ -308,77 +323,3 @@ export function updateTargetMapBounds(
// maxZoom: 15,
// });
// }
export type PopupItem<T = Waypoint | TrackPoint | any> = {
item: T;
fileId?: string;
hide?: () => void;
};
// export class MapPopup {
// map: mapboxgl.Map;
// popup: mapboxgl.Popup;
// item: PopupItem | null = $state(null);
// maybeHideBinded = this.maybeHide.bind(this);
// constructor(map: mapboxgl.Map, options?: mapboxgl.PopupOptions) {
// this.map = map;
// this.popup = new mapboxgl.Popup(options);
// let component = mount(MapPopupComponent, {
// target: document.body,
// props: {
// item: this.item,
// },
// });
// tick().then(() => this.popup.setDOMContent(component.container));
// }
// setItem(item: PopupItem | null) {
// if (item) item.hide = () => this.hide();
// this.item = item;
// if (item === null) {
// this.hide();
// } else {
// tick().then(() => this.show());
// }
// }
// show() {
// if (this.item === null) {
// this.hide();
// return;
// }
// this.popup.setLngLat(this.getCoordinates()).addTo(this.map);
// this.map.on('mousemove', this.maybeHideBinded);
// }
// maybeHide(e: mapboxgl.MapMouseEvent) {
// if (this.item === null) {
// this.hide();
// return;
// }
// if (this.map.project(this.getCoordinates()).dist(this.map.project(e.lngLat)) > 60) {
// this.hide();
// }
// }
// hide() {
// this.popup.remove();
// this.map.off('mousemove', this.maybeHideBinded);
// }
// remove() {
// this.popup.remove();
// }
// getCoordinates() {
// if (this.item === null) {
// return new mapboxgl.LngLat(0, 0);
// }
// return this.item.item instanceof Waypoint || this.item.item instanceof TrackPoint
// ? this.item.item.getCoordinates()
// : new mapboxgl.LngLat(this.item.item.lon, this.item.item.lat);
// }
// }

14
website/src/lib/components/map/street-view-control/StreetViewControl.svelte
View File

@@ -1,13 +1,13 @@
<script lang="ts">
import { streetViewEnabled } from '$lib/components/map/street-view-control/utils.svelte';
import { map } from '$lib/components/map/utils.svelte';
import { streetViewEnabled } from '$lib/components/map/street-view-control/utils';
import { map } from '$lib/components/map/map';
import CustomControl from '$lib/components/map/custom-control/CustomControl.svelte';
import Tooltip from '$lib/components/Tooltip.svelte';
import { Toggle } from '$lib/components/ui/toggle';
import { PersonStanding, X } from '@lucide/svelte';
import { MapillaryLayer } from './Mapillary';
import { GoogleRedirect } from './Google';
import { settings } from '$lib/logic/settings.svelte';
import { settings } from '$lib/logic/settings';
import { i18n } from '$lib/i18n.svelte';
import { onMount } from 'svelte';
@@ -28,16 +28,16 @@
});
$effect(() => {
if (streetViewSource.value === 'mapillary') {
if ($streetViewSource === 'mapillary') {
googleRedirect?.remove();
if (streetViewEnabled.current) {
if ($streetViewEnabled) {
mapillaryLayer?.add();
} else {
mapillaryLayer?.remove();
}
} else {
mapillaryLayer?.remove();
if (streetViewEnabled.current) {
if ($streetViewEnabled) {
googleRedirect?.add();
} else {
googleRedirect?.remove();
@@ -49,7 +49,7 @@
<CustomControl class="w-[29px] h-[29px] shrink-0">
<Tooltip class="w-full h-full" side="left" label={i18n._('menu.toggle_street_view')}>
<Toggle
bind:pressed={streetViewEnabled.current}
bind:pressed={$streetViewEnabled}
class="w-full h-full rounded p-0"
aria-label={i18n._('menu.toggle_street_view')}
>

3
website/src/lib/components/map/street-view-control/utils.svelte.ts
View File

@@ -1,3 +0,0 @@
export const streetViewEnabled = $state({
current: false,
});

3
website/src/lib/components/map/street-view-control/utils.ts Normal file
View File

@@ -0,0 +1,3 @@
import { writable } from 'svelte/store';
export const streetViewEnabled = writable(false);

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

@@ -1,7 +1,7 @@
<script lang="ts">
import ToolbarItem from '$lib/components/toolbar/ToolbarItem.svelte';
import ToolbarItemMenu from '$lib/components/toolbar/ToolbarItemMenu.svelte';
import { Tool } from '$lib/components/toolbar/utils.svelte';
import { Tool } from '$lib/components/toolbar/tools';
import {
Group,
CalendarClock,

2
website/src/lib/components/toolbar/ToolbarItem.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button';
import * as Tooltip from '$lib/components/ui/tooltip/index.js';
import { tool, Tool } from '$lib/components/toolbar/utils.svelte';
import { tool, Tool } from '$lib/components/toolbar/tools';
import type { Snippet } from 'svelte';
let {

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

@@ -1,5 +1,5 @@
<script lang="ts">
import { Tool, tool } from '$lib/components/toolbar/utils.svelte';
import { Tool, tool } from '$lib/components/toolbar/tools';
import * as Card from '$lib/components/ui/card';
import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
@@ -13,7 +13,7 @@
import RoutingControlPopup from '$lib/components/toolbar/tools/routing/RoutingControlPopup.svelte';
import { onMount } from 'svelte';
import mapboxgl from 'mapbox-gl';
import { settings } from '$lib/logic/settings.svelte';
import { settings } from '$lib/logic/settings';
let {
popupElement,

8
website/src/lib/components/toolbar/utils.svelte.ts → website/src/lib/components/toolbar/tools.ts
View File

@@ -1,3 +1,5 @@
import { writable, type Writable } from 'svelte/store';
export enum Tool {
ROUTING,
WAYPOINT,
@@ -10,8 +12,4 @@ export enum Tool {
CLEAN,
}
export const tool: {
current: Tool | null;
} = $state({
current: null,
});
export const currentTool: Writable<Tool | null> = writable(null);

8
website/src/lib/components/toolbar/tools/Clean.svelte
View File

@@ -1,4 +1,4 @@
<script lang="ts" context="module">
<script lang="ts" module>
enum CleanType {
INSIDE = 'inside',
OUTSIDE = 'outside',
@@ -15,10 +15,10 @@
import { onDestroy, onMount } from 'svelte';
import { getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
import { Trash2 } from '@lucide/svelte';
import { map } from '$lib/components/map/utils.svelte';
import { map } from '$lib/components/map/map';
import type { GeoJSONSource } from 'mapbox-gl';
import { selection } from '$lib/logic/selection.svelte';
import { fileActions } from '$lib/logic/file-actions.svelte';
import { selection } from '$lib/logic/selection';
import { fileActions } from '$lib/logic/file-actions';
let props: {
class?: string;

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

@@ -2,11 +2,11 @@
import { Button } from '$lib/components/ui/button';
import Help from '$lib/components/Help.svelte';
import { MountainSnow } from '@lucide/svelte';
import { map } from '$lib/components/map/utils.svelte';
import { map } from '$lib/components/map/map';
import { i18n } from '$lib/i18n.svelte';
import { getURLForLanguage } from '$lib/utils';
import { selection } from '$lib/logic/selection.svelte';
import { fileActions } from '$lib/logic/file-actions.svelte';
import { selection } from '$lib/logic/selection';
import { fileActions } from '$lib/logic/file-actions';
let props: {
class?: string;

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

@@ -11,9 +11,9 @@
import Help from '$lib/components/Help.svelte';
import { i18n } from '$lib/i18n.svelte';
import { getURLForLanguage } from '$lib/utils';
import { selection } from '$lib/logic/selection.svelte';
import { fileStateCollection } from '$lib/logic/file-state.svelte';
import { fileActions } from '$lib/logic/file-actions.svelte';
import { selection } from '$lib/logic/selection';
import { fileStateCollection } from '$lib/logic/file-state';
import { fileActions } from '$lib/logic/file-actions';
let props: {
class?: string;

8
website/src/lib/components/toolbar/tools/Merge.svelte
View File

@@ -1,4 +1,4 @@
<script lang="ts" context="module">
<script lang="ts" module>
enum MergeType {
TRACES = 'traces',
CONTENTS = 'contents',
@@ -17,9 +17,9 @@
import { getURLForLanguage } from '$lib/utils';
import Shortcut from '$lib/components/Shortcut.svelte';
import { gpxStatistics } from '$lib/stores';
import { selection } from '$lib/logic/selection.svelte';
import { fileStateCollection } from '$lib/logic/file-state.svelte';
import { fileActions } from '$lib/logic/file-actions.svelte';
import { selection } from '$lib/logic/selection';
import { fileStateCollection } from '$lib/logic/file-state';
import { fileActions } from '$lib/logic/file-actions';
let props: {
class?: string;

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

@@ -11,13 +11,13 @@
import { Funnel } from '@lucide/svelte';
import { i18n } from '$lib/i18n.svelte';
import WithUnits from '$lib/components/WithUnits.svelte';
import { map } from '$lib/components/map/utils.svelte';
import { map } from '$lib/components/map/map';
import { onDestroy } from 'svelte';
import { ramerDouglasPeucker, TrackPoint, type SimplifiedTrackPoint } from 'gpx';
import { getURLForLanguage } from '$lib/utils';
import type { GeoJSONSource } from 'mapbox-gl';
import { selection } from '$lib/logic/selection.svelte';
import { fileActions } from '$lib/logic/file-actions.svelte';
import { selection } from '$lib/logic/selection';
import { fileActions } from '$lib/logic/file-actions';
let props: { class?: string } = $props();

8
website/src/lib/components/toolbar/tools/Time.svelte
View File

@@ -24,10 +24,10 @@
} from '$lib/components/file-list/file-list';
import Help from '$lib/components/Help.svelte';
import { getURLForLanguage } from '$lib/utils';
import { selection } from '$lib/logic/selection.svelte';
import { settings } from '$lib/logic/settings.svelte';
import { fileActions } from '$lib/logic/file-actions.svelte';
import { fileActionManager } from '$lib/logic/file-action-manager.svelte';
import { selection } from '$lib/logic/selection';
import { settings } from '$lib/logic/settings';
import { fileActions } from '$lib/logic/file-actions';
import { fileActionManager } from '$lib/logic/file-action-manager';
let props: {
class?: string;

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

@@ -35,11 +35,11 @@
import { getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
import { onDestroy, onMount } from 'svelte';
import { TrackPoint } from 'gpx';
import { settings } from '$lib/logic/settings.svelte';
import { map } from '$lib/components/map/utils.svelte';
import { fileStateCollection } from '$lib/logic/file-state.svelte';
import { selection } from '$lib/logic/selection.svelte';
import { fileActions, getFileIds, newGPXFile } from '$lib/logic/file-actions.svelte';
import { settings } from '$lib/logic/settings';
import { map } from '$lib/components/map/map';
import { fileStateCollection } from '$lib/logic/file-state';
import { selection } from '$lib/logic/selection';
import { fileActions, getFileIds, newGPXFile } from '$lib/logic/file-actions';
let {
minimized = $bindable(false),
@@ -85,11 +85,11 @@
// }
let validSelection = $derived(
selection.value.hasAnyChildren(new ListRootItem(), true, ['waypoints'])
$selection.hasAnyChildren(new ListRootItem(), true, ['waypoints'])
);
function createFileWithPoint(e: any) {
if (selection.value.size === 0) {
if ($selection.size === 0) {
let file = newGPXFile();
file.replaceTrackPoints(0, 0, 0, 0, [
new TrackPoint({
@@ -107,12 +107,12 @@
onMount(() => {
// setCrosshairCursor();
map.value?.on('click', createFileWithPoint);
$map?.on('click', createFileWithPoint);
});
onDestroy(() => {
// resetCursor();
map.value?.off('click', createFileWithPoint);
$map?.off('click', createFileWithPoint);
// routingControls.forEach((controls) => controls.destroy());
// routingControls.clear();
@@ -233,7 +233,7 @@
variant="outline"
class="flex flex-row gap-1 text-xs px-2"
disabled={!validSelection}
onclick={dbUtils.createRoundTripForSelection}
onclick={fileActions.createRoundTripForSelection}
>
<Repeat size="12" />{i18n._('toolbar.routing.round_trip.button')}
</ButtonWithTooltip>

2
website/src/lib/components/toolbar/tools/routing/utils.svelte.ts
View File

@@ -1,6 +1,6 @@
import type { Coordinates } from 'gpx';
import { TrackPoint, distance } from 'gpx';
import { settings } from '$lib/logic/settings.svelte';
import { settings } from '$lib/logic/settings';
import { getElevation } from '$lib/utils';
const { routing, routingProfile, privateRoads } = settings;

6
website/src/lib/components/toolbar/tools/scissors/Scissors.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { splitAs, SplitType } from '$lib/components/toolbar/tools/scissors/utils.svelte';
import { splitAs, SplitType } from '$lib/components/toolbar/tools/scissors/scissors';
import Help from '$lib/components/Help.svelte';
import { ListRootItem } from '$lib/components/file-list/file-list';
import { Label } from '$lib/components/ui/label/index.js';
@@ -8,7 +8,7 @@
import * as Select from '$lib/components/ui/select';
import { Separator } from '$lib/components/ui/separator';
import { gpxStatistics, slicedGPXStatistics } from '$lib/stores';
import { map } from '$lib/components/map/map.svelte';
import { map } from '$lib/components/map/map';
import { get } from 'svelte/store';
import { i18n } from '$lib/i18n.svelte';
import { onDestroy, tick } from 'svelte';
@@ -16,7 +16,7 @@
import { dbUtils } from '$lib/db';
import { SplitControls } from './split-controls';
import { getURLForLanguage } from '$lib/utils';
import { selection } from '$lib/logic/selection.svelte';
import { selection } from '$lib/logic/selection';
let props: {
class?: string;

9
website/src/lib/components/toolbar/tools/scissors/scissors.ts Normal file
View File

@@ -0,0 +1,9 @@
import { writable, type Writable } from 'svelte/store';
export enum SplitType {
FILES = 'files',
TRACKS = 'tracks',
SEGMENTS = 'segments',
}
export let splitAs: Writable<SplitType> = writable(SplitType.FILES);

8
website/src/lib/components/toolbar/tools/scissors/split-controls.ts
View File

@@ -3,10 +3,10 @@ import mapboxgl from 'mapbox-gl';
import { dbUtils, getFile } from '$lib/db';
import { ListTrackSegmentItem } from '$lib/components/file-list/file-list';
import { gpxStatistics } from '$lib/stores';
import { tool, Tool } from '$lib/components/toolbar/utils.svelte';
import { splitAs } from '$lib/components/toolbar/tools/scissors/utils.svelte';
import { tool, Tool } from '$lib/components/toolbar/tools';
import { splitAs } from '$lib/components/toolbar/tools/scissors/scissors';
import { Scissors } from 'lucide-static';
import { applyToOrderedSelectedItemsFromFile, selection } from '$lib/logic/selection.svelte';
import { selection } from '$lib/logic/selection';
export class SplitControls {
active: boolean = false;
@@ -53,7 +53,7 @@ export class SplitControls {
updateControls() {
// Update the markers when the files change
let controlIndex = 0;
applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
selection.applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
let file = getFile(fileId);
if (file) {

9
website/src/lib/components/toolbar/tools/scissors/utils.svelte.ts
View File

@@ -1,9 +0,0 @@
export enum SplitType {
FILES = 'files',
TRACKS = 'tracks',
SEGMENTS = 'segments',
}
export let splitAs = $state({
current: SplitType.FILES,
});

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

@@ -14,8 +14,8 @@
import { getURLForLanguage, resetCursor, setCrosshairCursor } from '$lib/utils';
import { MapPin, CircleX, Save } from '@lucide/svelte';
import { getSymbolKey, symbols } from '$lib/assets/symbols';
import { selection } from '$lib/logic/selection.svelte';
import { selectedWaypoint } from './utils.svelte';
import { selection } from '$lib/logic/selection';
import { selectedWaypoint } from './waypoint';
let props: {
class?: string;

33
website/src/lib/components/toolbar/tools/waypoint/utils.svelte.ts → website/src/lib/components/toolbar/tools/waypoint/waypoint.ts
View File

@@ -1,16 +1,27 @@
import { ListWaypointItem } from '$lib/components/file-list/file-list';
import { fileStateCollection } from '$lib/logic/file-state.svelte';
import { selection } from '$lib/logic/selection.svelte';
import { settings } from '$lib/logic/settings.svelte';
import { fileStateCollection } from '$lib/logic/file-state';
import { selection } from '$lib/logic/selection';
import { settings } from '$lib/logic/settings';
import type { Waypoint } from 'gpx';
import { get, writable, type Writable } from 'svelte/store';
export class WaypointSelection {
private _selection: [Waypoint, string] | undefined;
private _selection: Writable<[Waypoint, string] | undefined>;
constructor() {
this._selection = $derived.by(() => {
if (settings.treeFileView.value && selection.value.size === 1) {
let item = selection.value.getSelected()[0];
this._selection = writable(undefined);
settings.treeFileView.subscribe(() => {
this.update();
});
selection.subscribe(() => {
this.update();
});
}
update() {
this._selection.update(() => {
if (get(settings.treeFileView) && get(selection).size === 1) {
let item = get(selection).getSelected()[0];
if (item instanceof ListWaypointItem) {
let file = fileStateCollection.getFile(item.getFileId());
let waypoint = file?.wpt[item.getWaypointIndex()];
@@ -24,15 +35,17 @@ export class WaypointSelection {
}
reset() {
this._selection = undefined;
this._selection.set(undefined);
}
get wpt(): Waypoint | undefined {
return this._selection ? this._selection[0] : undefined;
const selection = get(this._selection);
return selection ? selection[0] : undefined;
}
get fileId(): string | undefined {
return this._selection ? this._selection[1] : undefined;
const selection = get(this._selection);
return selection ? selection[1] : undefined;
}
// TODO update the waypoint data if the file changes

156
website/src/lib/logic/file-action-manager.svelte.ts → website/src/lib/logic/file-action-manager.ts
View File

@@ -2,37 +2,70 @@ import { db, type Database } from '$lib/db';
import { liveQuery } from 'dexie';
import type { GPXFile } from 'gpx';
import { applyPatches, produceWithPatches, type Patch, type WritableDraft } from 'immer';
import { fileStateCollection, type GPXFileStateCollection } from '$lib/logic/file-state.svelte';
import {
fileStateCollection,
GPXFileStateCollectionObserver,
type GPXFileStateCollection,
} from '$lib/logic/file-state';
import {
derived,
get,
writable,
type Readable,
type Unsubscriber,
type Writable,
} from 'svelte/store';
const MAX_PATCHES = 100;
export class FileActionManager {
private _db: Database;
private _files: Map<string, GPXFile>;
private _patchIndex: number;
private _patchMinIndex: number;
private _patchMaxIndex: number;
private _fileSubscriptions: Map<string, Unsubscriber>;
private _fileStateCollectionObserver: GPXFileStateCollectionObserver;
private _patchIndex: Writable<number>;
private _patchMinIndex: Writable<number>;
private _patchMaxIndex: Writable<number>;
private _canUndo: Readable<boolean>;
private _canRedo: Readable<boolean>;
constructor(db: Database, fileStateCollection: GPXFileStateCollection) {
this._db = db;
this._files = $derived.by(() => {
let files = new Map<string, GPXFile>();
fileStateCollection.files.forEach((state, id) => {
if (state.file) {
files.set(id, state.file);
this._files = new Map();
this._fileSubscriptions = new Map();
this._fileStateCollectionObserver = new GPXFileStateCollectionObserver(
(fileId, fileState) => {
this._fileSubscriptions.set(
fileId,
fileState.subscribe((fileWithStatistics) => {
if (fileWithStatistics) {
this._files.set(fileId, fileWithStatistics.file);
}
})
);
},
(fileId) => {
let unsubscribe = this._fileSubscriptions.get(fileId);
if (unsubscribe) {
unsubscribe();
this._fileSubscriptions.delete(fileId);
}
});
return files;
});
this._files.delete(fileId);
},
() => {
this._fileSubscriptions.forEach((unsubscribe) => unsubscribe());
this._fileSubscriptions.clear();
this._files.clear();
}
);
this._patchIndex = $state(-1);
this._patchMinIndex = $state(0);
this._patchMaxIndex = $state(0);
this._patchIndex = writable(-1);
this._patchMinIndex = writable(0);
this._patchMaxIndex = writable(0);
liveQuery(() => db.settings.get('patchIndex')).subscribe((value) => {
if (value !== undefined) {
this._patchIndex = value;
this._patchIndex.set(value);
}
});
liveQuery(() =>
@@ -44,58 +77,51 @@ export class FileActionManager {
}
})
).subscribe((value) => {
this._patchMinIndex = value.min;
this._patchMaxIndex = value.max;
this._patchMinIndex.set(value.min);
this._patchMaxIndex.set(value.max);
});
this._canUndo = derived(
[this._patchIndex, this._patchMinIndex],
([$patchIndex, $patchMinIndex]) => {
return $patchIndex >= $patchMinIndex;
}
);
this._canRedo = derived(
[this._patchIndex, this._patchMaxIndex],
([$patchIndex, $patchMaxIndex]) => {
return $patchIndex < $patchMaxIndex - 1;
}
);
}
async store(patch: Patch[], inversePatch: Patch[]) {
this._db.patches.where(':id').above(this._patchIndex).delete(); // Delete all patches after the current patch to avoid redoing them
if (this._patchMaxIndex - this._patchMinIndex + 1 > MAX_PATCHES) {
this._db.patches
.where(':id')
.belowOrEqual(this._patchMaxIndex - MAX_PATCHES)
.delete();
}
this._db.transaction('rw', this._db.patches, this._db.settings, async () => {
let index = this._patchIndex + 1;
await this._db.patches.put(
{
patch,
inversePatch,
index,
},
index
);
await this._db.settings.put(index, 'patchIndex');
});
get canUndo(): Readable<boolean> {
return this._canUndo;
}
get canUndo(): boolean {
return this._patchIndex >= this._patchMinIndex;
}
get canRedo(): boolean {
return this._patchIndex < this._patchMaxIndex - 1;
get canRedo(): Readable<boolean> {
return this._canRedo;
}
undo() {
if (this.canUndo) {
this._db.patches.get(this._patchIndex).then((patch) => {
if (get(this.canUndo)) {
const patchIndex = get(this._patchIndex);
this._db.patches.get(patchIndex).then((patch) => {
if (patch) {
this.apply(patch.inversePatch);
this._db.settings.put(this._patchIndex - 1, 'patchIndex');
this._db.settings.put(patchIndex - 1, 'patchIndex');
}
});
}
}
redo() {
if (this.canRedo) {
this._db.patches.get(this._patchIndex + 1).then((patch) => {
if (get(this.canRedo)) {
const patchIndex = get(this._patchIndex) + 1;
this._db.patches.get(patchIndex).then((patch) => {
if (patch) {
this.apply(patch.patch);
this._db.settings.put(this._patchIndex + 1, 'patchIndex');
this._db.settings.put(patchIndex, 'patchIndex');
}
});
}
@@ -142,7 +168,7 @@ export class FileActionManager {
applyGlobal(callback: (files: Map<string, GPXFile>) => void) {
const [newFileCollection, patch, inversePatch] = produceWithPatches(this._files, callback);
this.store(patch, inversePatch);
this.storePatches(patch, inversePatch);
return this.commitFileStateChange(newFileCollection, patch);
}
@@ -160,7 +186,7 @@ export class FileActionManager {
}
);
this.store(patch, inversePatch);
this.storePatches(patch, inversePatch);
return this.commitFileStateChange(newFileCollection, patch);
}
@@ -188,10 +214,32 @@ export class FileActionManager {
}
);
this.store(patch, inversePatch);
this.storePatches(patch, inversePatch);
return this.commitFileStateChange(newFileCollection, patch);
}
async storePatches(patch: Patch[], inversePatch: Patch[]) {
this._db.patches.where(':id').above(get(this._patchIndex)).delete(); // Delete all patches after the current patch to avoid redoing them
if (get(this._patchMaxIndex) - get(this._patchMinIndex) + 1 > MAX_PATCHES) {
this._db.patches
.where(':id')
.belowOrEqual(get(this._patchMaxIndex) - MAX_PATCHES)
.delete();
}
this._db.transaction('rw', this._db.patches, this._db.settings, async () => {
let index = get(this._patchIndex) + 1;
await this._db.patches.put(
{
patch,
inversePatch,
index,
},
index
);
await this._db.settings.put(index, 'patchIndex');
});
}
}
// Get the file ids of the files that have changed in the patch

25
website/src/lib/logic/file-actions.svelte.ts → website/src/lib/logic/file-actions.ts
View File

@@ -1,8 +1,8 @@
import { fileStateCollection } from '$lib/logic/file-state.svelte';
import { fileActionManager } from '$lib/logic/file-action-manager.svelte';
import { selection } from '$lib/logic/selection.svelte';
import { tool, Tool } from '$lib/components/toolbar/utils.svelte';
import type { SplitType } from '$lib/components/toolbar/tools/scissors/utils.svelte';
import { fileStateCollection } from '$lib/logic/file-state';
import { fileActionManager } from '$lib/logic/file-action-manager';
import { selection } from '$lib/logic/selection';
import { currentTool, Tool } from '$lib/components/toolbar/tools';
import type { SplitType } from '$lib/components/toolbar/tools/scissors/scissors';
import {
ListFileItem,
ListLevel,
@@ -27,13 +27,14 @@ import {
type LineStyleExtension,
type WaypointType,
} from 'gpx';
import { get } from 'svelte/store';
// Generate unique file ids, different from the ones in the database
export function getFileIds(n: number) {
let ids = [];
for (let index = 0; ids.length < n; index++) {
let id = `gpx-${index}`;
if (!fileStateCollection.files.has(id)) {
if (!fileStateCollection.getFile(id)) {
ids.push(id);
}
}
@@ -46,9 +47,8 @@ export function newGPXFile() {
let file = new GPXFile();
let maxNewFileNumber = 0;
fileStateCollection.files.forEach((fileState) => {
let file = fileState.file;
if (file && file.metadata.name && file.metadata.name.startsWith(newFileName)) {
fileStateCollection.forEach((fileId, file) => {
if (file.metadata.name && file.metadata.name.startsWith(newFileName)) {
let number = parseInt(file.metadata.name.split(' ').pop() ?? '0');
if (!isNaN(number) && number > maxNewFileNumber) {
maxNewFileNumber = number;
@@ -738,6 +738,11 @@ export const fileActions = {
// }
// });
},
deleteWaypoint: (fileId: string, waypointIndex: number) => {
fileActionManager.applyToFile(fileId, (file) =>
file.replaceWaypoints(waypointIndex, waypointIndex, [])
);
},
setStyleToSelection: (style: LineStyleExtension) => {
// if (get(selection).size === 0) {
// return;
@@ -926,7 +931,7 @@ export function pasteSelection() {
return;
}
let selected = selection.value.getSelected();
let selected = get(selection).getSelected();
if (selected.length === 0) {
selected = [new ListRootItem()];
}

108
website/src/lib/logic/file-state.svelte.ts → website/src/lib/logic/file-state.ts
View File

@@ -3,15 +3,16 @@ import { db, type Database } from '$lib/db';
import { liveQuery } from 'dexie';
import { GPXFile } from 'gpx';
import { GPXStatisticsTree, type GPXFileWithStatistics } from '$lib/logic/statistics';
import { settings } from '$lib/logic/settings.svelte';
import { settings } from '$lib/logic/settings';
import { get, writable, type Subscriber, type Writable } from 'svelte/store';
// Observe a single file from the database, and maintain its statistics
class GPXFileState {
private _file: GPXFileWithStatistics | undefined;
private _file: Writable<GPXFileWithStatistics | undefined>;
private _subscription: { unsubscribe: () => void } | undefined;
constructor(db: Database, fileId: string) {
this._file = $state(undefined);
this._file = writable(undefined);
let first = true;
this._subscription = liveQuery(() => db.files.get(fileId)).subscribe((value) => {
@@ -29,7 +30,7 @@ class GPXFileState {
first = false;
}
this._file = { file, statistics };
this._file.set({ file, statistics });
// if (get(selection).hasAnyChildren(new ListFileItem(id))) {
// updateAllHidden();
@@ -38,29 +39,36 @@ class GPXFileState {
});
}
subscribe(run: Subscriber<GPXFileWithStatistics | undefined>, invalidate?: () => void) {
return this._file.subscribe(run, invalidate);
}
destroy() {
this._subscription?.unsubscribe();
this._subscription = undefined;
this._file = undefined;
}
get file(): GPXFile | undefined {
return this._file?.file;
return get(this._file)?.file;
}
get statistics(): GPXStatisticsTree | undefined {
return this._file?.statistics;
return get(this._file)?.statistics;
}
}
// Observe the file ids in the database, and maintain a map of file states for the corresponding files
export class GPXFileStateCollection {
private _db: Database;
private _files: Map<string, GPXFileState>;
private _files: Writable<Map<string, GPXFileState>>;
constructor(db: Database) {
this._db = db;
this._files = $state(new Map());
this._files = writable(new Map());
}
subscribe(run: Subscriber<Map<string, GPXFileState>>, invalidate?: () => void) {
return this._files.subscribe(run, invalidate);
}
initialize(fitBounds: boolean) {
@@ -72,57 +80,101 @@ export class GPXFileStateCollection {
// }
initialize = false;
}
const currentFiles = get(this._files);
// Find new files to observe
let newFiles = dbFileIds
.filter((id) => !this._files.has(id))
.filter((id) => !currentFiles.has(id))
.sort((a, b) => parseInt(a.split('-')[1]) - parseInt(b.split('-')[1]));
// Find deleted files to stop observing
let deletedFiles = Array.from(this._files.keys()).filter(
let deletedFiles = Array.from(currentFiles.keys()).filter(
(id) => !dbFileIds.find((fileId) => fileId === id)
);
if (newFiles.length > 0 || deletedFiles.length > 0) {
// Update the map of file states
let files = new Map(this._files);
newFiles.forEach((id) => {
files.set(id, new GPXFileState(this._db, id));
this._files.update(($files) => {
newFiles.forEach((id) => {
$files.set(id, new GPXFileState(this._db, id));
});
deletedFiles.forEach((id) => {
$files.get(id)?.destroy();
$files.delete(id);
});
return $files;
});
deletedFiles.forEach((id) => {
files.get(id)?.destroy();
files.delete(id);
});
this._files = files;
// Update the file order
let fileOrder = settings.fileOrder.value.filter((id) => !deletedFiles.includes(id));
let fileOrder = get(settings.fileOrder).filter((id) => !deletedFiles.includes(id));
newFiles.forEach((id) => {
if (!fileOrder.includes(id)) {
fileOrder.push(id);
}
});
settings.fileOrder.value = fileOrder;
settings.fileOrder.set(fileOrder);
}
});
}
get files(): ReadonlyMap<string, GPXFileState> {
return this._files;
}
get size(): number {
return this._files.size;
return get(this._files).size;
}
getFile(fileId: string): GPXFile | undefined {
let fileState = this._files.get(fileId);
let fileState = get(this._files).get(fileId);
return fileState?.file;
}
getStatistics(fileId: string): GPXStatisticsTree | undefined {
let fileState = this._files.get(fileId);
let fileState = get(this._files).get(fileId);
return fileState?.statistics;
}
forEach(callback: (fileId: string, file: GPXFile) => void) {
get(this._files).forEach((fileState, fileId) => {
if (fileState.file) {
callback(fileId, fileState.file);
}
});
}
}
// Collection of all file states
export const fileStateCollection = new GPXFileStateCollection(db);
export type GPXFileStateCallback = (fileId: string, fileState: GPXFileState) => void;
export class GPXFileStateCollectionObserver {
private _fileIds: Set<string>;
private _onFileAdded: GPXFileStateCallback;
private _onFileRemoved: (fileId: string) => void;
private _onDestroy: () => void;
constructor(
onFileAdded: GPXFileStateCallback,
onFileRemoved: (fileId: string) => void,
onDestroy: () => void
) {
this._fileIds = new Set();
this._onFileAdded = onFileAdded;
this._onFileRemoved = onFileRemoved;
this._onDestroy = onDestroy;
fileStateCollection.subscribe((files) => {
this._fileIds.forEach((fileId) => {
if (!files.has(fileId)) {
this._onFileRemoved(fileId);
this._fileIds.delete(fileId);
}
});
files.forEach((file: GPXFileState, fileId: string) => {
if (!this._fileIds.has(fileId)) {
this._onFileAdded(fileId, file);
this._fileIds.add(fileId);
}
});
});
}
destroy() {
this._onDestroy();
}
}

140
website/src/lib/logic/selection-tree.ts Normal file
View File

@@ -0,0 +1,140 @@
import type { ListItem } from '$lib/components/file-list/file-list';
export class SelectionTreeType {
item: ListItem;
selected: boolean;
children: {
[key: string | number]: SelectionTreeType;
};
size: number = 0;
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();
}
this.size = 0;
}
_setOrToggle(item: ListItem, value?: boolean) {
if (item.level === this.item.level) {
let newSelected = value === undefined ? !this.selected : value;
if (this.selected !== newSelected) {
this.selected = newSelected;
this.size += this.selected ? 1 : -1;
}
} 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.size -= this.children[id].size;
this.children[id]._setOrToggle(item, value);
this.size += this.children[id].size;
}
}
}
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;
}
hasAnyParent(item: ListItem, self: boolean = true): boolean {
if (
this.selected &&
this.item.level <= item.level &&
(self || this.item.level < item.level)
) {
return this.selected;
}
let id = item.getIdAtLevel(this.item.level);
if (id !== undefined) {
if (this.children.hasOwnProperty(id)) {
return this.children[id].hasAnyParent(item, self);
}
}
return false;
}
hasAnyChildren(item: ListItem, self: boolean = true, ignoreIds?: (string | number)[]): boolean {
if (
this.selected &&
this.item.level >= item.level &&
(self || this.item.level > item.level)
) {
return this.selected;
}
let id = item.getIdAtLevel(this.item.level);
if (id !== undefined) {
if (ignoreIds === undefined || ignoreIds.indexOf(id) === -1) {
if (this.children.hasOwnProperty(id)) {
return this.children[id].hasAnyChildren(item, self, ignoreIds);
}
}
} else {
for (let key in this.children) {
if (ignoreIds === undefined || ignoreIds.indexOf(key) === -1) {
if (this.children[key].hasAnyChildren(item, self, ignoreIds)) {
return true;
}
}
}
}
return false;
}
getSelected(selection: ListItem[] = []): ListItem[] {
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];
}
deleteChild(id: string | number) {
if (this.children.hasOwnProperty(id)) {
this.size -= this.children[id].size;
delete this.children[id];
}
}
}

228
website/src/lib/logic/selection.svelte.ts
View File

@@ -1,228 +0,0 @@
import {
ListFileItem,
ListItem,
ListRootItem,
ListTrackItem,
ListTrackSegmentItem,
ListWaypointItem,
ListLevel,
sortItems,
ListWaypointsItem,
} from '$lib/components/file-list/file-list';
import { SelectionTreeType } from '$lib/logic/selection';
import { fileStateCollection } from '$lib/logic/file-state.svelte';
import { settings } from '$lib/logic/settings.svelte';
import type { GPXFile } from 'gpx';
export class Selection {
private _selection: SelectionTreeType;
private _copied: ListItem[] | undefined;
private _cut: boolean;
constructor() {
this._selection = $state(new SelectionTreeType(new ListRootItem()));
this._copied = $state(undefined);
this._cut = $state(false);
}
get value(): SelectionTreeType {
return this._selection;
}
selectItem(item: ListItem) {
let selection = new SelectionTreeType(new ListRootItem());
selection.set(item, true);
this._selection = selection;
}
selectFile(fileId: string) {
this.selectItem(new ListFileItem(fileId));
}
addSelectItem(item: ListItem) {
this._selection.toggle(item);
}
addSelectFile(fileId: string) {
this.addSelectItem(new ListFileItem(fileId));
}
selectAll() {
let item: ListItem = new ListRootItem();
this._selection.forEach((i) => {
item = i;
});
let selection = new SelectionTreeType(new ListRootItem());
if (item instanceof ListRootItem || item instanceof ListFileItem) {
fileStateCollection.files.forEach((_file, fileId) => {
selection.set(new ListFileItem(fileId), true);
});
} else if (item instanceof ListTrackItem) {
let file = fileStateCollection.getFile(item.getFileId());
if (file) {
file.trk.forEach((_track, trackId) => {
selection.set(new ListTrackItem(item.getFileId(), trackId), true);
});
}
} else if (item instanceof ListTrackSegmentItem) {
let file = fileStateCollection.getFile(item.getFileId());
if (file) {
file.trk[item.getTrackIndex()].trkseg.forEach((_segment, segmentId) => {
selection.set(
new ListTrackSegmentItem(item.getFileId(), item.getTrackIndex(), segmentId),
true
);
});
}
} else if (item instanceof ListWaypointItem) {
let file = fileStateCollection.getFile(item.getFileId());
if (file) {
file.wpt.forEach((_waypoint, waypointId) => {
selection.set(new ListWaypointItem(item.getFileId(), waypointId), true);
});
}
}
this._selection = selection;
}
set(items: ListItem[]) {
let selection = new SelectionTreeType(new ListRootItem());
items.forEach((item) => {
selection.set(item, true);
});
this._selection = selection;
}
update(updatedFiles: GPXFile[], deletedFileIds: string[]) {
// TODO do it the other way around: get all selected items, and check if they still exist?
// let removedItems: ListItem[] = [];
// applyToOrderedItemsFromFile(selection.value.getSelected(), (fileId, level, items) => {
// let file = updatedFiles.find((file) => file._data.id === fileId);
// if (file) {
// items.forEach((item) => {
// if (item instanceof ListTrackItem) {
// let newTrackIndex = file.trk.findIndex(
// (track) => track._data.trackIndex === item.getTrackIndex()
// );
// if (newTrackIndex === -1) {
// removedItems.push(item);
// }
// } else if (item instanceof ListTrackSegmentItem) {
// let newTrackIndex = file.trk.findIndex(
// (track) => track._data.trackIndex === item.getTrackIndex()
// );
// if (newTrackIndex === -1) {
// removedItems.push(item);
// } else {
// let newSegmentIndex = file.trk[newTrackIndex].trkseg.findIndex(
// (segment) => segment._data.segmentIndex === item.getSegmentIndex()
// );
// if (newSegmentIndex === -1) {
// removedItems.push(item);
// }
// }
// } else if (item instanceof ListWaypointItem) {
// let newWaypointIndex = file.wpt.findIndex(
// (wpt) => wpt._data.index === item.getWaypointIndex()
// );
// if (newWaypointIndex === -1) {
// removedItems.push(item);
// }
// }
// });
// } else if (deletedFileIds.includes(fileId)) {
// items.forEach((item) => {
// removedItems.push(item);
// });
// }
// });
// if (removedItems.length > 0) {
// selection.update(($selection) => {
// removedItems.forEach((item) => {
// if (item instanceof ListFileItem) {
// $selection.deleteChild(item.getFileId());
// } else {
// $selection.set(item, false);
// }
// });
// return $selection;
// });
// }
}
getOrderedSelection(reverse: boolean = false): ListItem[] {
let selected: ListItem[] = [];
applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
selected.push(...items);
}, reverse);
return selected;
}
copySelection(): boolean {
let selected = this._selection.getSelected();
if (selected.length > 0) {
this._copied = selected;
this._cut = false;
return true;
}
return false;
}
cutSelection() {
if (this.copySelection()) {
this._cut = true;
}
}
resetCopied() {
this._copied = undefined;
this._cut = false;
}
get copied(): ListItem[] | undefined {
return this._copied;
}
get cut(): boolean {
return this._cut;
}
}
export const selection = new Selection();
export function applyToOrderedItemsFromFile(
selectedItems: ListItem[],
callback: (fileId: string, level: ListLevel | undefined, items: ListItem[]) => void,
reverse: boolean = true
) {
settings.fileOrder.value.forEach((fileId) => {
let level: ListLevel | undefined = undefined;
let items: ListItem[] = [];
selectedItems.forEach((item) => {
if (item.getFileId() === fileId) {
level = item.level;
if (
item instanceof ListFileItem ||
item instanceof ListTrackItem ||
item instanceof ListTrackSegmentItem ||
item instanceof ListWaypointsItem ||
item instanceof ListWaypointItem
) {
items.push(item);
}
}
});
if (items.length > 0) {
sortItems(items, reverse);
callback(fileId, level, items);
}
});
}
export function applyToOrderedSelectedItemsFromFile(
callback: (fileId: string, level: ListLevel | undefined, items: ListItem[]) => void,
reverse: boolean = true
) {
applyToOrderedItemsFromFile(selection.value.getSelected(), callback, reverse);
}

345
website/src/lib/logic/selection.ts
View File

@@ -1,140 +1,245 @@
import type { ListItem } from '$lib/components/file-list/file-list';
import {
ListFileItem,
ListItem,
ListRootItem,
ListTrackItem,
ListTrackSegmentItem,
ListWaypointItem,
ListLevel,
sortItems,
ListWaypointsItem,
} from '$lib/components/file-list/file-list';
import { fileStateCollection } from '$lib/logic/file-state';
import { settings } from '$lib/logic/settings';
import type { GPXFile } from 'gpx';
import { get, writable, type Writable } from 'svelte/store';
import { SelectionTreeType } from '$lib/logic/selection-tree';
export class SelectionTreeType {
item: ListItem;
selected: boolean;
children: {
[key: string | number]: SelectionTreeType;
};
size: number = 0;
export class Selection {
private _selection: Writable<SelectionTreeType>;
private _copied: Writable<ListItem[] | undefined>;
private _cut: Writable<boolean>;
constructor(item: ListItem) {
this.item = item;
this.selected = false;
this.children = {};
constructor() {
this._selection = writable(new SelectionTreeType(new ListRootItem()));
this._copied = writable(undefined);
this._cut = writable(false);
}
clear() {
this.selected = false;
for (let key in this.children) {
this.children[key].clear();
}
this.size = 0;
subscribe(
run: (value: SelectionTreeType) => void,
invalidate?: (value?: SelectionTreeType) => void
) {
return this._selection.subscribe(run, invalidate);
}
_setOrToggle(item: ListItem, value?: boolean) {
if (item.level === this.item.level) {
let newSelected = value === undefined ? !this.selected : value;
if (this.selected !== newSelected) {
this.selected = newSelected;
this.size += this.selected ? 1 : -1;
}
} 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));
selectItem(item: ListItem) {
this._selection.update(($selection) => {
$selection.clear();
$selection.set(item, true);
return $selection;
});
}
selectFile(fileId: string) {
this.selectItem(new ListFileItem(fileId));
}
addSelectItem(item: ListItem) {
this._selection.update(($selection) => {
$selection.toggle(item);
return $selection;
});
}
addSelectFile(fileId: string) {
this.addSelectItem(new ListFileItem(fileId));
}
selectAll() {
let item: ListItem = new ListRootItem();
get(this._selection).forEach((i) => {
item = i;
});
this._selection.update(($selection) => {
$selection.clear();
if (item instanceof ListRootItem || item instanceof ListFileItem) {
fileStateCollection.forEach((fileId, file) => {
$selection.set(new ListFileItem(fileId), true);
});
} else if (item instanceof ListTrackItem) {
let file = fileStateCollection.getFile(item.getFileId());
if (file) {
file.trk.forEach((_track, trackId) => {
$selection.set(new ListTrackItem(item.getFileId(), trackId), true);
});
}
this.size -= this.children[id].size;
this.children[id]._setOrToggle(item, value);
this.size += this.children[id].size;
}
}
}
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);
} else if (item instanceof ListTrackSegmentItem) {
let file = fileStateCollection.getFile(item.getFileId());
if (file) {
file.trk[item.getTrackIndex()].trkseg.forEach((_segment, segmentId) => {
$selection.set(
new ListTrackSegmentItem(
item.getFileId(),
item.getTrackIndex(),
segmentId
),
true
);
});
}
} else if (item instanceof ListWaypointItem) {
let file = fileStateCollection.getFile(item.getFileId());
if (file) {
file.wpt.forEach((_waypoint, waypointId) => {
$selection.set(new ListWaypointItem(item.getFileId(), waypointId), true);
});
}
}
return $selection;
});
}
set(items: ListItem[]) {
this._selection.update(($selection) => {
$selection.clear();
items.forEach((item) => {
$selection.set(item, true);
});
return $selection;
});
}
update(updatedFiles: GPXFile[], deletedFileIds: string[]) {
// TODO do it the other way around: get all selected items, and check if they still exist?
// let removedItems: ListItem[] = [];
// applyToOrderedItemsFromFile(selection.value.getSelected(), (fileId, level, items) => {
// let file = updatedFiles.find((file) => file._data.id === fileId);
// if (file) {
// items.forEach((item) => {
// if (item instanceof ListTrackItem) {
// let newTrackIndex = file.trk.findIndex(
// (track) => track._data.trackIndex === item.getTrackIndex()
// );
// if (newTrackIndex === -1) {
// removedItems.push(item);
// }
// } else if (item instanceof ListTrackSegmentItem) {
// let newTrackIndex = file.trk.findIndex(
// (track) => track._data.trackIndex === item.getTrackIndex()
// );
// if (newTrackIndex === -1) {
// removedItems.push(item);
// } else {
// let newSegmentIndex = file.trk[newTrackIndex].trkseg.findIndex(
// (segment) => segment._data.segmentIndex === item.getSegmentIndex()
// );
// if (newSegmentIndex === -1) {
// removedItems.push(item);
// }
// }
// } else if (item instanceof ListWaypointItem) {
// let newWaypointIndex = file.wpt.findIndex(
// (wpt) => wpt._data.index === item.getWaypointIndex()
// );
// if (newWaypointIndex === -1) {
// removedItems.push(item);
// }
// }
// });
// } else if (deletedFileIds.includes(fileId)) {
// items.forEach((item) => {
// removedItems.push(item);
// });
// }
// });
// if (removedItems.length > 0) {
// selection.update(($selection) => {
// removedItems.forEach((item) => {
// if (item instanceof ListFileItem) {
// $selection.deleteChild(item.getFileId());
// } else {
// $selection.set(item, false);
// }
// });
// return $selection;
// });
// }
}
getOrderedSelection(reverse: boolean = false): ListItem[] {
let selected: ListItem[] = [];
this.applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
selected.push(...items);
}, reverse);
return selected;
}
applyToOrderedSelectedItemsFromFile(
callback: (fileId: string, level: ListLevel | undefined, items: ListItem[]) => void,
reverse: boolean = true
) {
applyToOrderedItemsFromFile(get(this._selection).getSelected(), callback, reverse);
}
copySelection(): boolean {
let selected = get(this._selection).getSelected();
if (selected.length > 0) {
this._copied.set(selected);
this._cut.set(false);
return true;
}
return false;
}
hasAnyParent(item: ListItem, self: boolean = true): boolean {
if (
this.selected &&
this.item.level <= item.level &&
(self || this.item.level < item.level)
) {
return this.selected;
}
let id = item.getIdAtLevel(this.item.level);
if (id !== undefined) {
if (this.children.hasOwnProperty(id)) {
return this.children[id].hasAnyParent(item, self);
}
}
return false;
}
hasAnyChildren(item: ListItem, self: boolean = true, ignoreIds?: (string | number)[]): boolean {
if (
this.selected &&
this.item.level >= item.level &&
(self || this.item.level > item.level)
) {
return this.selected;
}
let id = item.getIdAtLevel(this.item.level);
if (id !== undefined) {
if (ignoreIds === undefined || ignoreIds.indexOf(id) === -1) {
if (this.children.hasOwnProperty(id)) {
return this.children[id].hasAnyChildren(item, self, ignoreIds);
}
}
} else {
for (let key in this.children) {
if (ignoreIds === undefined || ignoreIds.indexOf(key) === -1) {
if (this.children[key].hasAnyChildren(item, self, ignoreIds)) {
return true;
}
}
}
}
return false;
}
getSelected(selection: ListItem[] = []): ListItem[] {
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);
cutSelection() {
if (this.copySelection()) {
this._cut.set(true);
}
}
getChild(id: string | number): SelectionTreeType | undefined {
return this.children[id];
resetCopied() {
this._copied.set(undefined);
this._cut.set(false);
}
deleteChild(id: string | number) {
if (this.children.hasOwnProperty(id)) {
this.size -= this.children[id].size;
delete this.children[id];
}
get copied(): ListItem[] | undefined {
return this._copied;
}
get cut(): boolean {
return this._cut;
}
}
export const selection = new Selection();
export function applyToOrderedItemsFromFile(
selectedItems: ListItem[],
callback: (fileId: string, level: ListLevel | undefined, items: ListItem[]) => void,
reverse: boolean = true
) {
settings.fileOrder.value.forEach((fileId) => {
let level: ListLevel | undefined = undefined;
let items: ListItem[] = [];
selectedItems.forEach((item) => {
if (item.getFileId() === fileId) {
level = item.level;
if (
item instanceof ListFileItem ||
item instanceof ListTrackItem ||
item instanceof ListTrackSegmentItem ||
item instanceof ListWaypointsItem ||
item instanceof ListWaypointItem
) {
items.push(item);
}
}
});
if (items.length > 0) {
sortItems(items, reverse);
callback(fileId, level, items);
}
});
}

49
website/src/lib/logic/settings.svelte.ts → website/src/lib/logic/settings.ts
View File

@@ -11,36 +11,44 @@ import {
type CustomLayer,
} from '$lib/assets/layers';
import { browser } from '$app/environment';
import { get, writable, type Writable } from 'svelte/store';
export class Setting<V> {
private _db: Database;
private _key: string;
private _value: V;
private _value: Writable<V>;
constructor(db: Database, key: string, initial: V) {
this._db = db;
this._key = key;
this._value = $state(initial);
this._value = writable(initial);
let first = true;
liveQuery(() => db.settings.get(key)).subscribe((value) => {
if (value === undefined) {
if (!first) {
this._value = value;
this._value.set(value);
}
} else {
this._value = value;
this._value.set(value);
}
first = false;
});
}
get value(): V {
return this._value;
subscribe(run: (value: V) => void, invalidate?: (value?: V) => void) {
return this._value.subscribe(run, invalidate);
}
set value(newValue: V) {
if (newValue !== this._value) {
set(newValue: V) {
if (typeof newValue === 'object' || newValue !== get(this._value)) {
this._db.settings.put(newValue, this._key);
}
}
update(callback: (value: any) => any) {
let newValue = callback(get(this._value));
if (typeof newValue === 'object' || newValue !== get(this._value)) {
this._db.settings.put(newValue, this._key);
}
}
@@ -49,34 +57,41 @@ export class Setting<V> {
export class SettingInitOnFirstRead<V> {
private _db: Database;
private _key: string;
private _value: V | undefined;
private _value: Writable<V | undefined>;
constructor(db: Database, key: string, initial: V) {
this._db = db;
this._key = key;
this._value = $state(undefined);
this._value = writable(undefined);
let first = true;
liveQuery(() => db.settings.get(key)).subscribe((value) => {
if (value === undefined) {
if (first) {
this._value = initial;
this._value.set(initial);
} else {
this._value = value;
this._value.set(value);
}
} else {
this._value = value;
this._value.set(value);
}
first = false;
});
}
get value(): V | undefined {
return this._value;
subscribe(run: (value: V | undefined) => void, invalidate?: (value?: V | undefined) => void) {
return this._value.subscribe(run, invalidate);
}
set value(newValue: V) {
if (newValue !== this._value) {
set(newValue: V) {
if (typeof newValue === 'object' || newValue !== get(this._value)) {
this._db.settings.put(newValue, this._key);
}
}
update(callback: (value: any) => any) {
let newValue = callback(get(this._value));
if (typeof newValue === 'object' || newValue !== get(this._value)) {
this._db.settings.put(newValue, this._key);
}
}

25
website/src/lib/units.ts
View File

@@ -1,5 +1,6 @@
import { settings } from '$lib/logic/settings.svelte';
import { settings } from '$lib/logic/settings';
import { i18n } from '$lib/i18n.svelte';
import { get } from 'svelte/store';
const { distanceUnits, velocityUnits, temperatureUnits } = settings;
@@ -55,7 +56,7 @@ export function getDistanceWithUnits(value: number, convert: boolean = true) {
}
export function getVelocityWithUnits(value: number, convert: boolean = true) {
if (velocityUnits.value === 'speed') {
if (get(velocityUnits) === 'speed') {
if (convert) {
return getConvertedVelocity(value).toFixed(2) + ' ' + getVelocityUnits();
} else {
@@ -99,7 +100,7 @@ export function getTemperatureWithUnits(value: number, convert: boolean = true)
}
// Get the units
export function getDistanceUnits(targetDistanceUnits = distanceUnits.value) {
export function getDistanceUnits(targetDistanceUnits = get(distanceUnits)) {
switch (targetDistanceUnits) {
case 'metric':
return i18n._('units.kilometers');
@@ -111,8 +112,8 @@ export function getDistanceUnits(targetDistanceUnits = distanceUnits.value) {
}
export function getVelocityUnits(
targetVelocityUnits = velocityUnits.value,
targetDistanceUnits = distanceUnits.value
targetVelocityUnits = get(velocityUnits),
targetDistanceUnits = get(distanceUnits)
) {
if (targetVelocityUnits === 'speed') {
switch (targetDistanceUnits) {
@@ -135,7 +136,7 @@ export function getVelocityUnits(
}
}
export function getElevationUnits(targetDistanceUnits = distanceUnits.value) {
export function getElevationUnits(targetDistanceUnits = get(distanceUnits)) {
switch (targetDistanceUnits) {
case 'metric':
return i18n._('units.meters');
@@ -160,13 +161,13 @@ export function getPowerUnits() {
}
export function getTemperatureUnits() {
return temperatureUnits.value === 'celsius'
return get(temperatureUnits) === 'celsius'
? i18n._('units.celsius')
: i18n._('units.fahrenheit');
}
// Convert only the value
export function getConvertedDistance(value: number, targetDistanceUnits = distanceUnits.value) {
export function getConvertedDistance(value: number, targetDistanceUnits = get(distanceUnits)) {
switch (targetDistanceUnits) {
case 'metric':
return value;
@@ -177,7 +178,7 @@ export function getConvertedDistance(value: number, targetDistanceUnits = distan
}
}
export function getConvertedElevation(value: number, targetDistanceUnits = distanceUnits.value) {
export function getConvertedElevation(value: number, targetDistanceUnits = get(distanceUnits)) {
switch (targetDistanceUnits) {
case 'metric':
return value;
@@ -190,8 +191,8 @@ export function getConvertedElevation(value: number, targetDistanceUnits = dista
export function getConvertedVelocity(
value: number,
targetVelocityUnits = velocityUnits.value,
targetDistanceUnits = distanceUnits.value
targetVelocityUnits = get(velocityUnits),
targetDistanceUnits = get(distanceUnits)
) {
if (targetVelocityUnits === 'speed') {
switch (targetDistanceUnits) {
@@ -215,5 +216,5 @@ export function getConvertedVelocity(
}
export function getConvertedTemperature(value: number) {
return temperatureUnits.value === 'celsius' ? value : celsiusToFahrenheit(value);
return get(temperatureUnits) === 'celsius' ? value : celsiusToFahrenheit(value);
}

35
website/src/routes/[[language]]/app/+page.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
// import GPXLayers from '$lib/components/map/gpx-layer/GPXLayers.svelte';
import GPXLayers from '$lib/components/map/gpx-layer/GPXLayers.svelte';
// import ElevationProfile from '$lib/components/ElevationProfile.svelte';
// import FileList from '$lib/components/file-list/FileList.svelte';
// import GPXStatistics from '$lib/components/GPXStatistics.svelte';
@@ -18,9 +18,9 @@
import { getURLForLanguage } from '$lib/utils';
// import { getURLForGoogleDriveFile } from '$lib/components/embedding/Embedding';
import { i18n } from '$lib/i18n.svelte';
import { settings } from '$lib/logic/settings.svelte';
import { fileStateCollection } from '$lib/logic/file-state.svelte';
import { loadFiles } from '$lib/logic/file-actions.svelte';
import { settings } from '$lib/logic/settings';
import { fileStateCollection } from '$lib/logic/file-state';
import { loadFiles } from '$lib/logic/file-actions';
import { onMount } from 'svelte';
import { page } from '$app/state';
@@ -103,29 +103,29 @@
>
<!-- <Toolbar /> -->
</div>
<Map class="h-full {treeFileView.value ? '' : 'horizontal'}" />
<Map class="h-full {$treeFileView ? '' : 'horizontal'}" />
<StreetViewControl />
<LayerControl />
<!-- <GPXLayers /> -->
<GPXLayers />
<!-- <CoordinatesPopup /> -->
<Toaster richColors />
<!-- {#if !treeFileView.value}
{#if !$treeFileView}
<div class="h-10 -translate-y-10 w-full pointer-events-none absolute z-30">
<FileList orientation="horizontal" />
<!-- <FileList orientation="horizontal" /> -->
</div>
{/if} -->
{/if}
</div>
{#if elevationProfile.value}
{#if $elevationProfile}
<Resizer
orientation="row"
bind:after={bottomPanelSize.value}
bind:after={$bottomPanelSize}
minAfter={100}
maxAfter={300}
/>
{/if}
<div
class="{elevationProfile.value ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
style={elevationProfile.value ? `height: ${bottomPanelSize.value}px` : ''}
class="{$elevationProfile ? '' : 'h-10'} flex flex-row gap-2 px-2 sm:px-4"
style={$elevationProfile ? `height: ${$bottomPanelSize}px` : ''}
>
<!-- <GPXStatistics
{gpxStatistics}
@@ -143,13 +143,8 @@
{/if} -->
</div>
</div>
{#if treeFileView.value}
<Resizer
orientation="col"
bind:after={rightPanelSize.value}
minAfter={100}
maxAfter={400}
/>
{#if $treeFileView}
<Resizer orientation="col" bind:after={$rightPanelSize} minAfter={100} maxAfter={400} />
<!-- <FileList orientation="vertical" recursive={true} style="width: {$rightPanelSize}px" /> -->
{/if}
</div>