steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-03 17:12:31 +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);