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

animation for layer control

Browse Source
This commit is contained in:
vcoppe
2024-04-12 17:22:04 +02:00
parent f4f10c03a1
commit b5a0200ca5
3 changed files with 62 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,54 +26,62 @@
} }
</script> </script>
<CustomControl {map} class="group"> <CustomControl {map} class="group min-w-[29px] min-h-[29px]">
<div class="flex flex-row justify-center items-center w-[29px] h-[29px] group-hover:hidden"> <div
class="flex flex-row justify-center items-center w-[29px] h-[29px] delay-100 transition-[opacity height] duration-0 group-hover:opacity-0 group-hover:h-0 group-hover:delay-0"
>
<Fa icon={faLayerGroup} size="1.4x" /> <Fa icon={faLayerGroup} size="1.4x" />
</div> </div>
<div class="hidden group-hover:block"> <div
<div class="p-2"> class="transition-[grid-template-rows grid-template-cols] grid grid-rows-[0fr] grid-cols-[0fr] duration-150 group-hover:grid-rows-[1fr] group-hover:grid-cols-[1fr]"
<Label>Basemaps</Label> >
<LayerTree <div class="overflow-hidden">
layerTree={basemapTree} <div class="p-2">
name="basemaps" <Label>Basemaps</Label>
onValueChange={(id) => { <LayerTree
if (map) { layerTree={basemapTree}
map.setStyle(basemaps[id]); 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>
<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>
<Separator class="w-full" />
<div class="p-2">TODO: Add layer settings</div>
</div> </div>
</div> </div>
</CustomControl> </CustomControl>

2
website/src/lib/components/layer-control/LayerTree.svelte
View File

@@ -9,6 +9,6 @@
export let onValueChange: (id: string, checked: boolean) => void; export let onValueChange: (id: string, checked: boolean) => void;
</script> </script>
<fieldset class="min-w-52"> <fieldset class="min-w-64">
<LayerTreeNode {name} node={layerTree} {multiple} {onValueChange} /> <LayerTreeNode {name} node={layerTree} {multiple} {onValueChange} />
</fieldset> </fieldset>

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

@@ -30,8 +30,8 @@
} }
</script> </script>
<div class="flex flex-col gap-1"> {#if Array.isArray(node)}
{#if Array.isArray(node)} <div class="flex flex-col gap-1 mt-1">
{#each node as id} {#each node as id}
<div class="flex flex-row items-center gap-2"> <div class="flex flex-row items-center gap-2">
{#if multiple} {#if multiple}
@@ -59,7 +59,9 @@
<Label for={id}>{id}</Label> <Label for={id}>{id}</Label>
</div> </div>
{/each} {/each}
{:else} </div>
{:else}
<div class="flex flex-col gap-1">
{#each Object.keys(node) as id} {#each Object.keys(node) as id}
<Collapsible.Root bind:open={open[id]} class="ml-1"> <Collapsible.Root bind:open={open[id]} class="ml-1">
<Collapsible.Trigger class="w-full" <Collapsible.Trigger class="w-full"
@@ -75,13 +77,13 @@
{/if} {/if}
</Button></Collapsible.Trigger </Button></Collapsible.Trigger
> >
<Collapsible.Content class="mt-1 ml-1"> <Collapsible.Content class="ml-1">
<svelte:self node={node[id]} {name} {multiple} {onValueChange} /> <svelte:self node={node[id]} {name} {multiple} {onValueChange} />
</Collapsible.Content> </Collapsible.Content>
</Collapsible.Root> </Collapsible.Root>
{/each} {/each}
{/if} </div>
</div> {/if}
<style lang="postcss"> <style lang="postcss">
div :global(input[type='radio']) { div :global(input[type='radio']) {