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

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);