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

reactive modifications

Browse Source
This commit is contained in:
vcoppe
2024-04-24 22:35:53 +02:00
parent ae7806a553
commit e7dbb07ace
7 changed files with 88 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -230,7 +230,7 @@
});
$: if (chart && $settings) {
let gpxFiles = new GPXFiles(Array.from($selectedFiles).map((file) => get(file)));
let gpxFiles = new GPXFiles(Array.from($selectedFiles));
gpxFiles.files.sort(function (a, b) {
return get(fileOrder).indexOf(a) - get(fileOrder).indexOf(b);
});

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

@@ -1,5 +1,5 @@
<script lang="ts">
import { fileOrder, files, selectedFiles, selectFiles } from '$lib/stores';
import { fileOrder, files, getFileIndex, selectedFiles, selectFiles } from '$lib/stores';
import { ScrollArea } from '$lib/components/ui/scroll-area/index';
import Sortable from 'sortablejs/Sortable';
@@ -7,13 +7,13 @@
import type { GPXFile } from 'gpx';
import { onMount } from 'svelte';
import { get, type Writable } from 'svelte/store';
import { get } from 'svelte/store';
let tabs: HTMLDivElement;
let buttons: HTMLButtonElement[] = [];
let sortable: Sortable;
function selectFile(file: Writable<GPXFile>) {
function selectFile(file: GPXFile) {
selectedFiles.update((selectedFiles) => {
selectedFiles.clear();
selectedFiles.add(file);
@@ -21,7 +21,7 @@
});
}
function addSelectFile(file: Writable<GPXFile>) {
function addSelectFile(file: GPXFile) {
selectedFiles.update((selectedFiles) => {
selectedFiles.add(file);
return selectedFiles;
@@ -31,13 +31,13 @@
function selectAllFiles() {
selectedFiles.update((selectedFiles) => {
get(files).forEach((file) => {
selectedFiles.add(file);
selectedFiles.add(get(file));
});
return selectedFiles;
});
}
function deselectFile(file: Writable<GPXFile>) {
function deselectFile(file: GPXFile) {
selectedFiles.update((selectedFiles) => {
selectedFiles.delete(file);
return selectedFiles;
@@ -53,12 +53,12 @@
avoidImplicitDeselect: true,
onSelect: (e) => {
const index = parseInt(e.item.getAttribute('data-id'));
addSelectFile($files[index]);
addSelectFile(get($files[index]));
if (!e.originalEvent.shiftKey && $selectedFiles.size > 1) {
$selectedFiles.forEach((file) => {
if (file !== $files[index]) {
if (file !== get($files[index])) {
deselectFile(file);
const index = $files.indexOf(file);
const index = getFileIndex(file);
Sortable.utils.deselect(buttons[index]);
}
});
@@ -66,7 +66,7 @@
},
onDeselect: (e) => {
const index = parseInt(e.item.getAttribute('data-id'));
deselectFile($files[index]);
deselectFile(get($files[index]));
},
onSort: () => {
$fileOrder = sortable.toArray().map((index: string) => $files[parseInt(index)]);
@@ -76,18 +76,18 @@
selectFiles.update(() => {
return {
select: (file: Writable<GPXFile>) => {
select: (file: GPXFile) => {
buttons.forEach((button) => {
if (button) {
Sortable.utils.deselect(button);
}
});
const index = $files.indexOf(file);
const index = getFileIndex(file);
Sortable.utils.select(buttons[index]);
selectFile(file);
},
addSelect: (file: Writable<GPXFile>) => {
const index = $files.indexOf(file);
addSelect: (file: GPXFile) => {
const index = getFileIndex(file);
Sortable.utils.select(buttons[index]);
addSelectFile(file);
},
@@ -97,8 +97,8 @@
});
selectAllFiles();
},
removeSelect: (file: Writable<GPXFile>) => {
const index = $files.indexOf(file);
removeSelect: (file: GPXFile) => {
const index = getFileIndex(file);
Sortable.utils.deselect(buttons[index]);
deselectFile(file);
}

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

@@ -5,7 +5,7 @@
import { GPXStatistics } from 'gpx';
import { selectedFiles, settings } from '$lib/stores';
import { getFileStore, selectedFiles, settings } from '$lib/stores';
import { get } from 'svelte/store';
import { MoveDownRight, MoveUpRight, Ruler, Timer, Zap } from 'lucide-svelte';
@@ -14,12 +14,16 @@
let gpxData: GPXStatistics = new GPXStatistics();
$: {
function updateGPXData() {
gpxData = new GPXStatistics();
$selectedFiles.forEach((file) => {
gpxData.mergeWith(get(file).statistics);
gpxData.mergeWith(file.statistics);
});
}
$: if ($selectedFiles) {
updateGPXData();
}
</script>
<Card.Root class="h-full overflow-hidden border-none min-w-48 pl-4">

26
website/src/lib/components/GPXMapLayer.svelte
View File

@@ -59,9 +59,9 @@
function selectOnClick(e: any) {
if (e.originalEvent.shiftKey) {
get(selectFiles).addSelect(file);
get(selectFiles).addSelect(get(file));
} else {
get(selectFiles).select(file);
get(selectFiles).select(get(file));
}
}
@@ -125,16 +125,19 @@
}
}
$: if ($map) {
$map.on('style.load', addGPXLayer);
}
$: if ($selectedFiles.has(file)) {
$: if ($selectedFiles.has(get(file))) {
if ($map) {
$map.moveLayer(layerId);
}
}
$: if ($map) {
let source = $map.getSource(layerId);
if (source) {
source.setData(extendGeoJSON($file.toGeoJSON()));
}
}
onMount(() => {
addGPXLayer();
if ($map) {
@@ -178,16 +181,11 @@
}
);
}
$map.on('style.load', addGPXLayer);
}
});
$: if ($map) {
let source = $map.getSource(layerId);
if (source) {
source.setData(extendGeoJSON($file.toGeoJSON()));
}
}
onDestroy(() => {
if ($map) {
$map.off('click', layerId, selectOnClick);

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

@@ -7,8 +7,7 @@
import * as Alert from '$lib/components/ui/alert';
import { CircleHelp } from 'lucide-svelte';
import { map, selectedFiles } from '$lib/stores';
import { get, type Writable } from 'svelte/store';
import { map, selectedFiles, getFileStore, applyToFile } from '$lib/stores';
import { AnchorPointHierarchy, getMarker, route } from './routing';
import { onDestroy } from 'svelte';
import mapboxgl from 'mapbox-gl';
@@ -36,7 +35,7 @@
let anchorPointHierarchy: AnchorPointHierarchy | null = null;
let markers: mapboxgl.Marker[] = [];
let file: Writable<GPXFile> | null = null;
let file: GPXFile | null = null;
let kdbush: KDBush | null = null;
function toggleMarkersForZoomLevelAndBounds() {
@@ -65,11 +64,7 @@
privateRoads,
routing
);
console.log(response);
file.update((file) => {
file.append(response);
return file;
});
applyToFile(file, (f) => f.append(response));
}
}
@@ -111,7 +106,7 @@
$map.off('move', toggleMarkersForZoomLevelAndBounds);
$map.off('click', extendFile);
if (file) {
$map.off('mouseover', get(file).layerId, showInsertableMarker);
$map.off('mouseover', file.layerId, showInsertableMarker);
}
if (insertableMarker) {
insertableMarker.remove();
@@ -127,7 +122,7 @@
// record time
let start = performance.now();
anchorPointHierarchy = AnchorPointHierarchy.create(get(file));
anchorPointHierarchy = AnchorPointHierarchy.create(file);
// record time
let end = performance.now();
console.log('Time to create anchor points: ' + (end - start) + 'ms');
@@ -138,9 +133,9 @@
$map.on('zoom', toggleMarkersForZoomLevelAndBounds);
$map.on('move', toggleMarkersForZoomLevelAndBounds);
$map.on('click', extendFile);
$map.on('mouseover', get(file).layerId, showInsertableMarker);
$map.on('mouseover', file.layerId, showInsertableMarker);
let points = get(file).getTrackPoints();
let points = file.getTrackPoints();
start = performance.now();
kdbush = new KDBush(points.length);

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

@@ -5,15 +5,32 @@ import { GPXFile, buildGPX, parseGPX } from 'gpx';
export const map = writable<mapboxgl.Map | null>(null);
export const files = writable<Writable<GPXFile>[]>([]);
export const fileOrder = writable<Writable<GPXFile>[]>([]);
export const selectedFiles = writable<Set<Writable<GPXFile>>>(new Set());
export const selectFiles = writable<{ [key: string]: (file?: Writable<GPXFile>) => void }>({});
export const fileOrder = writable<GPXFile[]>([]);
export const selectedFiles = writable<Set<GPXFile>>(new Set());
export const selectFiles = writable<{ [key: string]: (file?: GPXFile) => void }>({});
export const settings = writable<{ [key: string]: any }>({
distanceUnits: 'metric',
velocityUnits: 'speed',
temperatureUnits: 'celsius',
});
export function getFileStore(file: GPXFile): Writable<GPXFile> {
return get(files).find(store => get(store) === file) ?? addFile(file);
}
export function getFileIndex(file: GPXFile): number {
return get(files).findIndex(store => get(store) === file);
}
export function applyToFile(file: GPXFile, callback: (file: GPXFile) => void) {
let store = getFileStore(file);
store.update($file => {
callback($file)
return $file;
});
selectedFiles.update($selected => $selected);
}
export function addFile(file: GPXFile): Writable<GPXFile> {
let fileStore = writable(file);
files.update($files => {
@@ -41,7 +58,7 @@ export async function loadFiles(list: FileList) {
for (let i = 0; i < list.length; i++) {
let file = await loadFile(list[i]);
if (i == 0 && file) {
get(selectFiles).select(file);
get(selectFiles).select(get(file));
}
}
}
@@ -68,7 +85,7 @@ export async function loadFile(file: File) {
export function duplicateSelectedFiles() {
let selected: GPXFile[] = [];
get(selectedFiles).forEach(file => selected.push(get(file)));
get(selectedFiles).forEach(file => selected.push(file));
selected.forEach(file => duplicateFile(file));
}
@@ -81,7 +98,7 @@ export function removeSelectedFiles() {
files.update($files => {
let index = 0;
while (index < $files.length) {
if (get(selectedFiles).has($files[index])) {
if (get(selectedFiles).has(get($files[index]))) {
$files.splice(index, 1);
} else {
index++;
@@ -107,7 +124,7 @@ export function removeAllFiles() {
}
export function exportSelectedFiles() {
get(selectedFiles).forEach(file => exportFile(get(file)));
get(selectedFiles).forEach(file => exportFile(file));
}
export async function exportAllFiles() {
@@ -128,15 +145,5 @@ export function exportFile(file: GPXFile) {
}
export function reverseSelectedFiles() {
files.update($files => {
$files.forEach(file => {
if (get(selectedFiles).has(file)) {
file.update($file => {
$file.reverse();
return $file;
});
}
});
return $files;
});
get(selectedFiles).forEach(file => applyToFile(file, file => file.reverse()));
}