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

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>