steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 15:43:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

manage overlay opacity

Browse Source
This commit is contained in:
vcoppe
2024-06-26 18:46:03 +02:00
parent ac3cd9ecc5
commit a66303cd59
6 changed files with 104 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/src/lib/assets/layers.ts
View File

@@ -438,7 +438,7 @@ export const overlays: { [key: string]: AnySourceData; } = {
},
};
export const opacities: { [key: string]: number; } = {
export const defaultOpacities: { [key: string]: number; } = {
ignFrCadastre: 0.5,
ignSlope: 0.4,
swisstopoSlope: 0.4,

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

@@ -7,7 +7,7 @@
import { Layers } from 'lucide-svelte';
import { basemaps, overlays, opacities } from '$lib/assets/layers';
import { basemaps, overlays } from '$lib/assets/layers';
import { settings } from '$lib/db';
import { map } from '$lib/stores';
import { get, writable } from 'svelte/store';
@@ -19,7 +19,8 @@
currentOverlays,
selectedBasemapTree,
selectedOverlayTree,
customLayers
customLayers,
opacities
} = settings;
$: if ($map) {
@@ -33,6 +34,7 @@
}
$: if ($map && $currentOverlays) {
console.log($currentOverlays);
// Add or remove overlay layers depending on the current overlays
let overlayLayers = getLayers($currentOverlays);
Object.keys(overlayLayers).forEach((id) => {
@@ -79,10 +81,10 @@
type: overlay.type === 'raster' ? 'raster' : 'line',
source: id,
paint: {
...(id in opacities
...(id in $opacities
? overlay.type === 'raster'
? { 'raster-opacity': opacities[id] }
: { 'line-opacity': opacities[id] }
? { 'raster-opacity': $opacities[id] }
: { 'line-opacity': $opacities[id] }
: {})
}
},

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

@@ -7,8 +7,10 @@
import * as Accordion from '$lib/components/ui/accordion';
import { Label } from '$lib/components/ui/label';
import * as Select from '$lib/components/ui/select';
import { Slider } from '$lib/components/ui/slider';
import { basemapTree, overlayTree } from '$lib/assets/layers';
import { basemapTree, overlays, overlayTree } from '$lib/assets/layers';
import { isSelected } from '$lib/components/layer-control/utils';
import { settings } from '$lib/db';
import { _ } from 'svelte-i18n';
@@ -17,11 +19,37 @@
import { browser } from '$app/environment';
import CustomLayers from './CustomLayers.svelte';
const { selectedBasemapTree, selectedOverlayTree, stravaHeatmapColor, currentOverlays } =
settings;
const {
selectedBasemapTree,
selectedOverlayTree,
stravaHeatmapColor,
currentOverlays,
customLayers,
opacities
} = settings;
export let open: boolean;
let selectedOverlay = writable(undefined);
let overlayOpacity = writable([1]);
function setOpacityFromSelection() {
if ($selectedOverlay) {
let overlayId = $selectedOverlay.value;
if ($opacities.hasOwnProperty(overlayId)) {
$overlayOpacity = [$opacities[overlayId]];
} else {
$overlayOpacity = [1];
}
} else {
$overlayOpacity = [1];
}
}
$: if ($selectedOverlay) {
setOpacityFromSelection();
}
const heatmapColors = [
{ value: '', label: '' },
{ value: 'blue', label: $_('layers.color.blue') },
@@ -120,13 +148,61 @@
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-3">
<Accordion.Trigger>{$_('layers.opacity')}</Accordion.Trigger>
<Accordion.Content class="flex flex-col gap-3 overflow-visible">
<Label class="flex flex-row gap-2 items-center">
{$_('layers.custom_layers.overlay')}
<Select.Root bind:selected={$selectedOverlay}>
<Select.Trigger class="h-8 mr-1">
<Select.Value />
</Select.Trigger>
<Select.Content>
{#each Object.keys(overlays) as id}
{#if isSelected($selectedOverlayTree, id)}
<Select.Item value={id}>{$_(`layers.label.${id}`)}</Select.Item>
{/if}
{/each}
{#each Object.entries($customLayers) as [id, layer]}
{#if layer.layerType === 'overlay'}
<Select.Item value={id}>{layer.name}</Select.Item>
{/if}
{/each}
</Select.Content>
</Select.Root>
</Label>
<Label class="flex flex-row gap-2 items-center">
{$_('menu.style.opacity')}
<div class="p-2 pr-3 grow">
<Slider
bind:value={$overlayOpacity}
min={0.1}
max={1}
step={0.1}
disabled={$selectedOverlay === undefined}
onValueChange={() => {
if ($selectedOverlay) {
$opacities[$selectedOverlay.value] = $overlayOpacity[0];
if ($map) {
if ($map.getLayer($selectedOverlay.value)) {
$map.removeLayer($selectedOverlay.value);
$currentOverlays = $currentOverlays;
}
}
}
}}
/>
</div>
</Label>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-4">
<Accordion.Trigger>{$_('layers.heatmap')}</Accordion.Trigger>
<Accordion.Content class="overflow-visible">
<Label class="flex flex-row items-center justify-between gap-4"
>{$_('menu.style.color')}
<Select.Root bind:selected={$selectedHeatmapColor}>
<Select.Trigger class="h-8 mr-1">
<Select.Value placeholder="Theme" />
<Select.Value />
</Select.Trigger>
<Select.Content>
{#each heatmapColors as { value, label }}
@@ -137,7 +213,7 @@
</Label>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-4">
<Accordion.Item value="item-5">
<Accordion.Trigger>{$_('layers.pois')}</Accordion.Trigger>
<Accordion.Content></Accordion.Content>
</Accordion.Item>

12
website/src/lib/components/layer-control/utils.ts
View File

@@ -24,4 +24,16 @@ export function getLayers(node: LayerTreeType, layers: { [key: string]: boolean
}
});
return layers;
}
export function isSelected(node: LayerTreeType, id: string) {
return Object.keys(node).some((key) => {
if (key === id) {
return node[key];
}
if (typeof node[key] !== "boolean" && isSelected(node[key], id)) {
return true;
}
return false;
});
}

3
website/src/lib/db.ts
View File

@@ -4,7 +4,7 @@ import { enableMapSet, enablePatches, applyPatches, type Patch, type WritableDra
import { writable, get, derived, type Readable, type Writable } from 'svelte/store';
import { gpxStatistics, initTargetMapBounds, splitAs, updateTargetMapBounds } from './stores';
import { mode } from 'mode-watcher';
import { defaultBasemap, defaultBasemapTree, defaultOverlayTree, defaultOverlays, type CustomLayer } from './assets/layers';
import { defaultBasemap, defaultBasemapTree, defaultOverlayTree, defaultOverlays, type CustomLayer, defaultOpacities } from './assets/layers';
import { applyToOrderedItemsFromFile, applyToOrderedSelectedItemsFromFile, selection } from '$lib/components/file-list/Selection';
import { ListFileItem, ListItem, ListTrackItem, ListLevel, ListTrackSegmentItem, ListWaypointItem, ListRootItem } from '$lib/components/file-list/FileList';
import { updateAnchorPoints } from '$lib/components/toolbar/tools/routing/Simplify';
@@ -104,6 +104,7 @@ export const settings = {
currentOverlays: dexieUninitializedSettingStore('currentOverlays', defaultOverlays),
previousOverlays: dexieSettingStore('previousOverlays', defaultOverlays),
selectedOverlayTree: dexieSettingStore('selectedOverlayTree', defaultOverlayTree),
opacities: dexieSettingStore('opacities', defaultOpacities),
customLayers: dexieSettingStore<Record<string, CustomLayer>>('customLayers', {}),
directionMarkers: dexieSettingStore('directionMarkers', false),
distanceMarkers: dexieSettingStore('distanceMarkers', false),

1
website/src/locales/en.json
View File

@@ -211,6 +211,7 @@
"create": "Create layer",
"update": "Update layer"
},
"opacity": "Overlay opacity",
"heatmap": "Strava Heatmap",
"pois": "Points of interest",
"label": {