Fabio/gpx.studio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

* Change icon to Maximize

Browse source 
* Use default animation
* Rename feature to "Fly to"
* Move logic to stores so that it can be reused in the main menu (and eventually a keyboard shortcut)
This commit is contained in:
mbof 2024-08-23 07:18:36 -07:00
parent 6559fdd125
commit c6919f518a
4 changed files with 843 additions and 783 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
website/src/lib/components/Menu.svelte
View file

@ -41,7 +41,8 @@
FileStack,
FileX,
BookOpenText,
ChartArea
ChartArea,
Maximize
} from 'lucide-svelte';
import {
@ -54,7 +55,9 @@
editMetadata,
editStyle,
exportState,
ExportState
ExportState,
flyToBounds,
gpxStatistics
} from '$lib/stores';
import {
copied,
@ -222,6 +225,13 @@
<PaintBucket size="16" class="mr-1" />
{$_('menu.style.button')}
</Menubar.Item>
<Menubar.Item
disabled={$selection.size === 0}
on:click={() => flyToBounds($gpxStatistics.global.bounds, $map)}
>
<Maximize size="16" class="mr-1" />
{$_('menu.fly_to_selection')}
</Menubar.Item>
<Menubar.Item
on:click={() => {
if ($allHidden) {

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

@ -15,7 +15,7 @@
EyeOff,
ClipboardCopy,
ClipboardPaste,
Maximize2,
Maximize,
Scissors,
FileStack,
FileX
@ -45,9 +45,10 @@
editMetadata,
editStyle,
embedding,
flyToBounds,
gpxLayers,
map,
updateTargetMapBounds
gpxStatistics,
map
} from '$lib/stores';
import {
GPXTreeElement,
@ -226,30 +227,14 @@
{$_('menu.style.button')}
</ContextMenu.Item>
{/if}
{#if node instanceof GPXTreeElement}
<ContextMenu.Item
on:click={() => {
const targetBounds = node.getStatistics().global.bounds;
const mapBoxBounds = new mapboxgl.LngLatBounds([
[targetBounds.northEast.lon, targetBounds.northEast.lat],
[targetBounds.southWest.lon, targetBounds.southWest.lat]
]);
$map?.fitBounds(mapBoxBounds, {
padding: 80,
linear: true,
duration: 1000,
easing: (t) => {
return t < 0.5
? (1 - Math.sqrt(1 - Math.pow(2 * t, 2))) / 2
: (Math.sqrt(1 - Math.pow(-2 * t + 2, 2)) + 1) / 2;
}
});
flyToBounds($gpxStatistics.global.bounds, $map);
}}
>
<Maximize2 size="16" class="mr-1" />
{$_('menu.fit_map')}
<Maximize size="16" class="mr-1" />
{$_('menu.fly_to')}
</ContextMenu.Item>
{/if}
<ContextMenu.Item
on:click={() => {
if ($allHidden) {

134
website/src/lib/stores.ts
View file

@ -6,8 +6,21 @@ import { tick } from 'svelte';
import { _ } from 'svelte-i18n';
import type { GPXLayer } from '$lib/components/gpx-layer/GPXLayer';
import { dbUtils, fileObservers, getFile, getStatistics, settings } from './db';
import { addSelectItem, applyToOrderedSelectedItemsFromFile, selectFile, selectItem, selection } from '$lib/components/file-list/Selection';
import { ListFileItem, ListItem, ListTrackItem, ListTrackSegmentItem, ListWaypointItem, ListWaypointsItem } from '$lib/components/file-list/FileList';
import {
addSelectItem,
applyToOrderedSelectedItemsFromFile,
selectFile,
selectItem,
selection
} from '$lib/components/file-list/Selection';
import {
ListFileItem,
ListItem,
ListTrackItem,
ListTrackSegmentItem,
ListWaypointItem,
ListWaypointsItem
} from '$lib/components/file-list/FileList';
import type { RoutingControls } from '$lib/components/toolbar/tools/routing/RoutingControls';
import { SplitType } from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
@ -18,7 +31,8 @@ export const embedding = writable(false);
export const selectFiles = writable<{ [key: string]: (fileId?: string) => void }>({});
export const gpxStatistics: Writable<GPXStatistics> = writable(new GPXStatistics());
export const slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined> = writable(undefined);
export const slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined> =
writable(undefined);
export function updateGPXData() {
let statistics = new GPXStatistics();
@ -38,7 +52,8 @@ export function updateGPXData() {
}
let unsubscribes: Map<string, () => void> = new Map();
selection.subscribe(($selection) => { // Maintain up-to-date statistics for the current selection
selection.subscribe(($selection) => {
// Maintain up-to-date statistics for the current selection
updateGPXData();
while (unsubscribes.size > 0) {
@ -53,10 +68,13 @@ selection.subscribe(($selection) => { // Maintain up-to-date statistics for the
let fileObserver = get(fileObservers).get(fileId);
if (fileObserver) {
let first = true;
unsubscribes.set(fileId, fileObserver.subscribe(() => {
unsubscribes.set(
fileId,
fileObserver.subscribe(() => {
if (first) first = false;
else updateGPXData();
}));
})
);
}
}
});
@ -72,8 +90,15 @@ const targetMapBounds = writable({
total: -1
});
derived([targetMapBounds, map], x => x).subscribe(([bounds, $map]) => {
if ($map === null || bounds.count !== bounds.total || (bounds.bounds.getSouth() === 90 && bounds.bounds.getWest() === 180 && bounds.bounds.getNorth() === -90 && bounds.bounds.getEast() === -180)) {
derived([targetMapBounds, map], (x) => x).subscribe(([bounds, $map]) => {
if (
$map === null ||
bounds.count !== bounds.total ||
(bounds.bounds.getSouth() === 90 &&
bounds.bounds.getWest() === 180 &&
bounds.bounds.getNorth() === -90 &&
bounds.bounds.getEast() === -180)
) {
return;
}
@ -81,7 +106,10 @@ derived([targetMapBounds, map], x => x).subscribe(([bounds, $map]) => {
if (bounds.count !== get(fileObservers).size && currentBounds) {
// There are other files on the map
if (currentBounds.contains(bounds.bounds.getSouthEast()) && currentBounds.contains(bounds.bounds.getNorthWest())) {
if (
currentBounds.contains(bounds.bounds.getSouthEast()) &&
currentBounds.contains(bounds.bounds.getNorthWest())
) {
return;
}
@ -89,14 +117,9 @@ derived([targetMapBounds, map], x => x).subscribe(([bounds, $map]) => {
bounds.bounds.extend(currentBounds.getNorthEast());
}
$map.fitBounds(bounds.bounds, {
padding: 80,
linear: true,
easing: () => 1
});
$map.fitBounds(bounds.bounds, { padding: 80, linear: true, easing: () => 1 });
});
export function initTargetMapBounds(total: number) {
targetMapBounds.set({
bounds: new mapboxgl.LngLatBounds([180, 90, -180, -90]),
@ -105,11 +128,14 @@ export function initTargetMapBounds(total: number) {
});
}
export function updateTargetMapBounds(bounds: {
southWest: Coordinates,
northEast: Coordinates
}) {
if (bounds.southWest.lat == 90 && bounds.southWest.lon == 180 && bounds.northEast.lat == -90 && bounds.northEast.lon == -180) { // Avoid update for empty (new) files
export function updateTargetMapBounds(bounds: { southWest: Coordinates; northEast: Coordinates }) {
if (
bounds.southWest.lat == 90 &&
bounds.southWest.lon == 180 &&
bounds.northEast.lat == -90 &&
bounds.northEast.lon == -180
) {
// Avoid update for empty (new) files
targetMapBounds.update((target) => {
target.count += 1;
return target;
@ -125,6 +151,19 @@ export function updateTargetMapBounds(bounds: {
});
}
export function flyToBounds(
bounds: { southWest: Coordinates; northEast: Coordinates },
map: mapboxgl.Map | null
) {
const mapBoxBounds = new mapboxgl.LngLatBounds([
[bounds.northEast.lon, bounds.northEast.lat],
[bounds.southWest.lon, bounds.southWest.lat]
]);
map?.fitBounds(mapBoxBounds, {
padding: 80
});
}
export const gpxLayers: Map<string, GPXLayer> = new Map();
export const routingControls: Map<string, RoutingControls> = new Map();
@ -143,7 +182,7 @@ export const splitAs = writable(SplitType.FILES);
export const streetViewEnabled = writable(false);
export function newGPXFile() {
const newFileName = get(_)("menu.new_file");
const newFileName = get(_)('menu.new_file');
let file = new GPXFile();
@ -247,7 +286,11 @@ export function updateSelectionFromKey(down: boolean, shift: boolean) {
let limitIndex: number | undefined = undefined;
selected.forEach((item) => {
let index = order.indexOf(item.getFileId());
if (limitIndex === undefined || (down && index > limitIndex) || (!down && index < limitIndex)) {
if (
limitIndex === undefined ||
(down && index > limitIndex) ||
(!down && index < limitIndex)
) {
limitIndex = index;
}
});
@ -274,37 +317,52 @@ export function updateSelectionFromKey(down: boolean, shift: boolean) {
nextIndex += down ? 1 : -1;
}
}
} else if (selected[0] instanceof ListTrackItem && selected[selected.length - 1] instanceof ListTrackItem) {
} else if (
selected[0] instanceof ListTrackItem &&
selected[selected.length - 1] instanceof ListTrackItem
) {
let fileId = selected[0].getFileId();
let file = getFile(fileId);
if (file) {
let numberOfTracks = file.trk.length;
let trackIndex = down ? selected[selected.length - 1].getTrackIndex() : selected[0].getTrackIndex();
let trackIndex = down
? selected[selected.length - 1].getTrackIndex()
: selected[0].getTrackIndex();
if (down && trackIndex < numberOfTracks - 1) {
next = new ListTrackItem(fileId, trackIndex + 1);
} else if (!down && trackIndex > 0) {
next = new ListTrackItem(fileId, trackIndex - 1);
}
}
} else if (selected[0] instanceof ListTrackSegmentItem && selected[selected.length - 1] instanceof ListTrackSegmentItem) {
} else if (
selected[0] instanceof ListTrackSegmentItem &&
selected[selected.length - 1] instanceof ListTrackSegmentItem
) {
let fileId = selected[0].getFileId();
let file = getFile(fileId);
if (file) {
let trackIndex = selected[0].getTrackIndex();
let numberOfSegments = file.trk[trackIndex].trkseg.length;
let segmentIndex = down ? selected[selected.length - 1].getSegmentIndex() : selected[0].getSegmentIndex();
let segmentIndex = down
? selected[selected.length - 1].getSegmentIndex()
: selected[0].getSegmentIndex();
if (down && segmentIndex < numberOfSegments - 1) {
next = new ListTrackSegmentItem(fileId, trackIndex, segmentIndex + 1);
} else if (!down && segmentIndex > 0) {
next = new ListTrackSegmentItem(fileId, trackIndex, segmentIndex - 1);
}
}
} else if (selected[0] instanceof ListWaypointItem && selected[selected.length - 1] instanceof ListWaypointItem) {
} else if (
selected[0] instanceof ListWaypointItem &&
selected[selected.length - 1] instanceof ListWaypointItem
) {
let fileId = selected[0].getFileId();
let file = getFile(fileId);
if (file) {
let numberOfWaypoints = file.wpt.length;
let waypointIndex = down ? selected[selected.length - 1].getWaypointIndex() : selected[0].getWaypointIndex();
let waypointIndex = down
? selected[selected.length - 1].getWaypointIndex()
: selected[0].getWaypointIndex();
if (down && waypointIndex < numberOfWaypoints - 1) {
next = new ListWaypointItem(fileId, waypointIndex + 1);
} else if (!down && waypointIndex > 0) {
@ -327,7 +385,7 @@ async function exportFiles(fileIds: string[], exclude: string[]) {
let file = getFile(fileId);
if (file) {
exportFile(file, exclude);
await new Promise(resolve => setTimeout(resolve, 200));
await new Promise((resolve) => setTimeout(resolve, 200));
}
}
}
@ -367,15 +425,21 @@ export function updateAllHidden() {
}
if (item instanceof ListFileItem) {
hidden = hidden && (file._data.hidden === true);
hidden = hidden && file._data.hidden === true;
} else if (item instanceof ListTrackItem && item.getTrackIndex() < file.trk.length) {
hidden = hidden && (file.trk[item.getTrackIndex()]._data.hidden === true);
} else if (item instanceof ListTrackSegmentItem && item.getTrackIndex() < file.trk.length && item.getSegmentIndex() < file.trk[item.getTrackIndex()].trkseg.length) {
hidden = hidden && (file.trk[item.getTrackIndex()].trkseg[item.getSegmentIndex()]._data.hidden === true);
hidden = hidden && file.trk[item.getTrackIndex()]._data.hidden === true;
} else if (
item instanceof ListTrackSegmentItem &&
item.getTrackIndex() < file.trk.length &&
item.getSegmentIndex() < file.trk[item.getTrackIndex()].trkseg.length
) {
hidden =
hidden &&
file.trk[item.getTrackIndex()].trkseg[item.getSegmentIndex()]._data.hidden === true;
} else if (item instanceof ListWaypointsItem) {
hidden = hidden && (file._data.hiddenWpt === true);
hidden = hidden && file._data.hiddenWpt === true;
} else if (item instanceof ListWaypointItem && item.getWaypointIndex() < file.wpt.length) {
hidden = hidden && (file.wpt[item.getWaypointIndex()]._data.hidden === true);
hidden = hidden && file.wpt[item.getWaypointIndex()]._data.hidden === true;
}
}
}

3
website/src/locales/en.json
View file

@ -77,7 +77,8 @@
"hide": "Hide",
"unhide": "Unhide",
"open_in": "Open in",
"fit_map": "Fit on map"
"fly_to": "Fly to",
"fly_to_selection": "Fly to selection"
},
"toolbar": {
"routing": {