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

collapsible state memory in layer control

Browse Source
This commit is contained in:
vcoppe
2024-04-15 11:04:36 +02:00
parent 87c62544bd
commit 2cd07688c9
5 changed files with 50 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -372,31 +372,39 @@ export const opacities: { [key: string]: number; } = {
}; };
export type LayerTreeType = string[] | { [key: string]: LayerTreeType; }; export type LayerTreeType = string[] | { [key: string]: LayerTreeType; };
export type CollapsedInfoTreeType = {
self: boolean;
children: { [key: string]: CollapsedInfoTreeType; };
};
export const basemapTree: LayerTreeType = { export const basemapTree: LayerTreeType = {
world: ['mapboxOutdoors', 'mapboxSatellite', 'openStreetMap', 'openTopoMap', 'openHikingMap', 'cyclOSM'], basemaps: {
countries: { world: ['mapboxOutdoors', 'mapboxSatellite', 'openStreetMap', 'openTopoMap', 'openHikingMap', 'cyclOSM'],
bulgaria: ['bgMountains'], countries: {
finland: ['finlandTopo'], bulgaria: ['bgMountains'],
france: ['ignPlanV2', 'ignFrScan25', 'ignSatellite'], finland: ['finlandTopo'],
newZealand: ['linz', 'linzTopo'], france: ['ignPlanV2', 'ignFrScan25', 'ignSatellite'],
norway: ['norwayTopo'], newZealand: ['linz', 'linzTopo'],
spain: ['ignEs'], norway: ['norwayTopo'],
sweden: ['swedenTopo'], spain: ['ignEs'],
switzerland: ['swisstopo'], sweden: ['swedenTopo'],
unitedKingdom: ['ordnanceSurvey'], switzerland: ['swisstopo'],
unitedStates: ['usgs'], unitedKingdom: ['ordnanceSurvey'],
unitedStates: ['usgs'],
},
}, },
} }
export const overlayTree: LayerTreeType = { export const overlayTree: LayerTreeType = {
world: { overlays: {
cyclOSM: ['cyclOSMlite'], world: {
waymarkedTrails: ['waymarkedTrailsHiking', 'waymarkedTrailsCycling', 'waymarkedTrailsMTB', 'waymarkedTrailsSkating', 'waymarkedTrailsHorseRiding', 'waymarkedTrailsWinter'] cyclOSM: ['cyclOSMlite'],
}, waymarkedTrails: ['waymarkedTrailsHiking', 'waymarkedTrailsCycling', 'waymarkedTrailsMTB', 'waymarkedTrailsSkating', 'waymarkedTrailsHorseRiding', 'waymarkedTrailsWinter']
countries: { },
france: ['ignFrCadastre', 'ignSlope'], countries: {
switzerland: ['swisstopoSlope', 'swisstopoCycling', 'swisstopoMountainBike'], france: ['ignFrCadastre', 'ignSlope'],
switzerland: ['swisstopoSlope', 'swisstopoCycling', 'swisstopoMountainBike'],
},
}, },
} }

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

@@ -41,7 +41,6 @@
<div class="p-2"> <div class="p-2">
<LayerTree <LayerTree
layerTree={basemapTree} layerTree={basemapTree}
label="Basemaps"
name="basemaps" name="basemaps"
onValueChange={(id) => { onValueChange={(id) => {
if (map) { if (map) {
@@ -54,7 +53,6 @@
<div class="p-2"> <div class="p-2">
<LayerTree <LayerTree
layerTree={overlayTree} layerTree={overlayTree}
label="Overlays"
name="overlays" name="overlays"
multiple={true} multiple={true}
onValueChange={(id, checked) => { onValueChange={(id, checked) => {

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

@@ -40,7 +40,6 @@
<ScrollArea class="py-2 pr-2"> <ScrollArea class="py-2 pr-2">
<LayerTree <LayerTree
layerTree={basemapTree} layerTree={basemapTree}
label="Basemaps"
name="basemapSettings" name="basemapSettings"
multiple={true} multiple={true}
onValueChange={(id) => { onValueChange={(id) => {
@@ -52,7 +51,6 @@
<ScrollArea class="py-2 pr-2"> <ScrollArea class="py-2 pr-2">
<LayerTree <LayerTree
layerTree={overlayTree} layerTree={overlayTree}
label="Overlays"
name="overlaySettings" name="overlaySettings"
multiple={true} multiple={true}
onValueChange={(id, checked) => { onValueChange={(id, checked) => {

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

@@ -1,39 +1,19 @@
<script lang="ts"> <script lang="ts">
import LayerTreeNode from './LayerTreeNode.svelte'; import LayerTreeNode from './LayerTreeNode.svelte';
import { type LayerTreeType } from '$lib/assets/layers'; import { type CollapsedInfoTreeType, type LayerTreeType } from '$lib/assets/layers';
import * as Collapsible from '$lib/components/ui/collapsible';
import { Button } from '$lib/components/ui/button';
import { ChevronDown, ChevronUp } from 'lucide-svelte';
export let layerTree: LayerTreeType; export let layerTree: LayerTreeType;
export let label: string;
export let name: string; export let name: string;
export let multiple: boolean = false; export let multiple: boolean = false;
export let onValueChange: (id: string, checked: boolean) => void; export let onValueChange: (id: string, checked: boolean) => void;
let open = true; let open: CollapsedInfoTreeType = {
self: true,
children: {}
};
</script> </script>
<fieldset class="min-w-64"> <fieldset class="min-w-64">
<Collapsible.Root bind:open> <LayerTreeNode {name} node={layerTree} {multiple} {onValueChange} bind:open />
<Collapsible.Trigger class="w-full"
><Button
variant="ghost"
class="w-full flex flex-row justify-between py-0 px-1 h-fit hover:bg-background"
>
<span class="mr-2">{label}</span>
{#if open}
<ChevronDown size="16" />
{:else}
<ChevronUp size="16" />
{/if}
</Button></Collapsible.Trigger
>
<Collapsible.Content>
<LayerTreeNode {name} node={layerTree} {multiple} {onValueChange} />
</Collapsible.Content>
</Collapsible.Root>
</fieldset> </fieldset>

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

@@ -6,7 +6,7 @@
import { ChevronDown, ChevronUp } from 'lucide-svelte'; import { ChevronDown, ChevronUp } from 'lucide-svelte';
import { type LayerTreeType } from '$lib/assets/layers'; import { type CollapsedInfoTreeType, type LayerTreeType } from '$lib/assets/layers';
export let name: string; export let name: string;
export let node: LayerTreeType; export let node: LayerTreeType;
@@ -21,10 +21,15 @@
}); });
} }
let open: { [key: string]: boolean } = {}; export let open: CollapsedInfoTreeType;
if (!Array.isArray(node)) { if (!Array.isArray(node)) {
Object.keys(node).forEach((id) => { Object.keys(node).forEach((id) => {
open[id] = true; if (!open.children.hasOwnProperty(id)) {
open.children[id] = {
self: true,
children: {}
};
}
}); });
} }
</script> </script>
@@ -62,14 +67,14 @@
{:else} {:else}
<div class="flex flex-col gap-1"> <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.children[id].self} class="ml-1">
<Collapsible.Trigger class="w-full" <Collapsible.Trigger class="w-full"
><Button ><Button
variant="ghost" variant="ghost"
class="w-full flex flex-row justify-between py-0 px-1 h-fit hover:bg-background" class="w-full flex flex-row justify-between py-0 px-1 h-fit hover:bg-background"
> >
<span class="mr-2">{id}</span> <span class="mr-2">{id}</span>
{#if open[id]} {#if open.children[id].self}
<ChevronUp size="16" /> <ChevronUp size="16" />
{:else} {:else}
<ChevronDown size="16" /> <ChevronDown size="16" />
@@ -77,7 +82,13 @@
</Button></Collapsible.Trigger </Button></Collapsible.Trigger
> >
<Collapsible.Content class="ml-1"> <Collapsible.Content class="ml-1">
<svelte:self node={node[id]} {name} {multiple} {onValueChange} /> <svelte:self
node={node[id]}
{name}
{multiple}
{onValueChange}
bind:open={open.children[id]}
/>
</Collapsible.Content> </Collapsible.Content>
</Collapsible.Root> </Collapsible.Root>
{/each} {/each}