steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-04 17:32:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

uniformize layer control input styling

Browse Source
This commit is contained in:
vcoppe
2024-04-12 15:12:27 +02:00
parent f38d5b7a75
commit cae8cb63f9
8 changed files with 101 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,6 +4,9 @@
import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
import LayerTree from './LayerTree.svelte';
import Label from '$lib/components/ui/label/label.svelte';
import { Separator } from '$lib/components/ui/separator';
import Fa from 'svelte-fa';
import { faLayerGroup } from '@fortawesome/free-solid-svg-icons';
@@ -27,43 +30,50 @@
<div class="flex flex-row justify-center items-center w-[29px] h-[29px] group-hover:hidden">
<Fa icon={faLayerGroup} size="1.4x" />
</div>
<div class="hidden group-hover:block p-2 space-y-2">
<LayerTree
layerTree={basemapTree}
name="basemaps"
onValueChange={(id) => {
if (map) {
map.setStyle(basemaps[id]);
}
}}
/>
<LayerTree
layerTree={overlayTree}
name="overlays"
multiple={true}
onValueChange={(id, checked) => {
if (map) {
if (checked) {
if (!map.getSource(id)) {
map.addSource(id, overlays[id]);
}
map.addLayer({
id,
type: overlays[id].type === 'raster' ? 'raster' : 'line',
source: id,
paint: {
...(id in opacities
? overlays[id].type === 'raster'
? { 'raster-opacity': opacities[id] }
: { 'line-opacity': opacities[id] }
: {})
}
});
} else {
map.removeLayer(id);
<div class="hidden group-hover:block">
<div class="p-2">
<Label>Basemaps</Label>
<LayerTree
layerTree={basemapTree}
name="basemaps"
onValueChange={(id) => {
if (map) {
map.setStyle(basemaps[id]);
}
}
}}
/>
}}
/>
</div>
<Separator class="w-full" />
<div class="p-2">
<Label>Overlays</Label>
<LayerTree
layerTree={overlayTree}
name="overlays"
multiple={true}
onValueChange={(id, checked) => {
if (map) {
if (checked) {
if (!map.getSource(id)) {
map.addSource(id, overlays[id]);
}
map.addLayer({
id,
type: overlays[id].type === 'raster' ? 'raster' : 'line',
source: id,
paint: {
...(id in opacities
? overlays[id].type === 'raster'
? { 'raster-opacity': opacities[id] }
: { 'line-opacity': opacities[id] }
: {})
}
});
} else {
map.removeLayer(id);
}
}
}}
/>
</div>
</div>
</CustomControl>

21
website/src/lib/components/layer-control/LayerTreeNode.svelte
View File

@@ -19,10 +19,10 @@
}
</script>
<div class="flex flex-col">
<div class="flex flex-col gap-1">
{#if Array.isArray(node)}
{#each node as id}
<div>
<div class="flex flex-row items-center gap-2">
{#if multiple}
<Checkbox
{id}
@@ -32,6 +32,7 @@
on:click={() => {
onValueChange(id, !checked[id]);
}}
class="scale-90"
/>
{:else}
<input
@@ -49,10 +50,24 @@
{/each}
{:else}
{#each Object.keys(node) as id}
<div class="ml-2">
<div class="ml-2 flex flex-col gap-1">
<Label>{id}</Label>
<svelte:self node={node[id]} {name} {multiple} {onValueChange} />
</div>
{/each}
{/if}
</div>
<style lang="postcss">
div :global(input[type='radio']) {
@apply appearance-none;
@apply w-4 h-4;
@apply border-[1.5px] border-primary;
@apply rounded-full;
@apply ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
@apply cursor-pointer;
@apply checked:bg-primary;
@apply checked:bg-clip-content;
@apply checked:p-0.5;
}
</style>