From 2cd07688c91d23d13fe89d5cfa5bae40232847c0 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Mon, 15 Apr 2024 11:04:36 +0200
Subject: [PATCH] collapsible state memory in layer control

---
 website/src/lib/assets/layers.ts              | 46 +++++++++++--------
 .../layer-control/LayerControl.svelte         |  2 -
 .../layer-control/LayerControlSettings.svelte |  2 -
 .../components/layer-control/LayerTree.svelte | 32 +++----------
 .../layer-control/LayerTreeNode.svelte        | 23 +++++++---
 5 files changed, 50 insertions(+), 55 deletions(-)

diff --git a/website/src/lib/assets/layers.ts b/website/src/lib/assets/layers.ts
index d832a4bc..edd1fab1 100644
--- a/website/src/lib/assets/layers.ts
+++ b/website/src/lib/assets/layers.ts
@@ -372,31 +372,39 @@ export const opacities: { [key: string]: number; } = {
 };
 
 export type LayerTreeType = string[] | { [key: string]: LayerTreeType; };
+export type CollapsedInfoTreeType = {
+    self: boolean;
+    children: { [key: string]: CollapsedInfoTreeType; };
+};
 
 export const basemapTree: LayerTreeType = {
-    world: ['mapboxOutdoors', 'mapboxSatellite', 'openStreetMap', 'openTopoMap', 'openHikingMap', 'cyclOSM'],
-    countries: {
-        bulgaria: ['bgMountains'],
-        finland: ['finlandTopo'],
-        france: ['ignPlanV2', 'ignFrScan25', 'ignSatellite'],
-        newZealand: ['linz', 'linzTopo'],
-        norway: ['norwayTopo'],
-        spain: ['ignEs'],
-        sweden: ['swedenTopo'],
-        switzerland: ['swisstopo'],
-        unitedKingdom: ['ordnanceSurvey'],
-        unitedStates: ['usgs'],
+    basemaps: {
+        world: ['mapboxOutdoors', 'mapboxSatellite', 'openStreetMap', 'openTopoMap', 'openHikingMap', 'cyclOSM'],
+        countries: {
+            bulgaria: ['bgMountains'],
+            finland: ['finlandTopo'],
+            france: ['ignPlanV2', 'ignFrScan25', 'ignSatellite'],
+            newZealand: ['linz', 'linzTopo'],
+            norway: ['norwayTopo'],
+            spain: ['ignEs'],
+            sweden: ['swedenTopo'],
+            switzerland: ['swisstopo'],
+            unitedKingdom: ['ordnanceSurvey'],
+            unitedStates: ['usgs'],
+        },
     },
 }
 
 export const overlayTree: LayerTreeType = {
-    world: {
-        cyclOSM: ['cyclOSMlite'],
-        waymarkedTrails: ['waymarkedTrailsHiking', 'waymarkedTrailsCycling', 'waymarkedTrailsMTB', 'waymarkedTrailsSkating', 'waymarkedTrailsHorseRiding', 'waymarkedTrailsWinter']
-    },
-    countries: {
-        france: ['ignFrCadastre', 'ignSlope'],
-        switzerland: ['swisstopoSlope', 'swisstopoCycling', 'swisstopoMountainBike'],
+    overlays: {
+        world: {
+            cyclOSM: ['cyclOSMlite'],
+            waymarkedTrails: ['waymarkedTrailsHiking', 'waymarkedTrailsCycling', 'waymarkedTrailsMTB', 'waymarkedTrailsSkating', 'waymarkedTrailsHorseRiding', 'waymarkedTrailsWinter']
+        },
+        countries: {
+            france: ['ignFrCadastre', 'ignSlope'],
+            switzerland: ['swisstopoSlope', 'swisstopoCycling', 'swisstopoMountainBike'],
+        },
     },
 }
 
diff --git a/website/src/lib/components/layer-control/LayerControl.svelte b/website/src/lib/components/layer-control/LayerControl.svelte
index 37b21444..f174941f 100644
--- a/website/src/lib/components/layer-control/LayerControl.svelte
+++ b/website/src/lib/components/layer-control/LayerControl.svelte
@@ -41,7 +41,6 @@
 					<div class="p-2">
 						<LayerTree
 							layerTree={basemapTree}
-							label="Basemaps"
 							name="basemaps"
 							onValueChange={(id) => {
 								if (map) {
@@ -54,7 +53,6 @@
 					<div class="p-2">
 						<LayerTree
 							layerTree={overlayTree}
-							label="Overlays"
 							name="overlays"
 							multiple={true}
 							onValueChange={(id, checked) => {
diff --git a/website/src/lib/components/layer-control/LayerControlSettings.svelte b/website/src/lib/components/layer-control/LayerControlSettings.svelte
index f5963c0f..f69691c5 100644
--- a/website/src/lib/components/layer-control/LayerControlSettings.svelte
+++ b/website/src/lib/components/layer-control/LayerControlSettings.svelte
@@ -40,7 +40,6 @@
 						<ScrollArea class="py-2 pr-2">
 							<LayerTree
 								layerTree={basemapTree}
-								label="Basemaps"
 								name="basemapSettings"
 								multiple={true}
 								onValueChange={(id) => {
@@ -52,7 +51,6 @@
 						<ScrollArea class="py-2 pr-2">
 							<LayerTree
 								layerTree={overlayTree}
-								label="Overlays"
 								name="overlaySettings"
 								multiple={true}
 								onValueChange={(id, checked) => {
diff --git a/website/src/lib/components/layer-control/LayerTree.svelte b/website/src/lib/components/layer-control/LayerTree.svelte
index c40c0ad8..48428ae3 100644
--- a/website/src/lib/components/layer-control/LayerTree.svelte
+++ b/website/src/lib/components/layer-control/LayerTree.svelte
@@ -1,39 +1,19 @@
 <script lang="ts">
 	import LayerTreeNode from './LayerTreeNode.svelte';
-	import { 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';
+	import { type CollapsedInfoTreeType, type LayerTreeType } from '$lib/assets/layers';
 
 	export let layerTree: LayerTreeType;
-	export let label: string;
 	export let name: string;
 	export let multiple: boolean = false;
 
 	export let onValueChange: (id: string, checked: boolean) => void;
 
-	let open = true;
+	let open: CollapsedInfoTreeType = {
+		self: true,
+		children: {}
+	};
 </script>
 
 <fieldset class="min-w-64">
-	<Collapsible.Root 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>
+	<LayerTreeNode {name} node={layerTree} {multiple} {onValueChange} bind:open />
 </fieldset>
diff --git a/website/src/lib/components/layer-control/LayerTreeNode.svelte b/website/src/lib/components/layer-control/LayerTreeNode.svelte
index 262557b6..0b7e3c53 100644
--- a/website/src/lib/components/layer-control/LayerTreeNode.svelte
+++ b/website/src/lib/components/layer-control/LayerTreeNode.svelte
@@ -6,7 +6,7 @@
 
 	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 node: LayerTreeType;
@@ -21,10 +21,15 @@
 		});
 	}
 
-	let open: { [key: string]: boolean } = {};
+	export let open: CollapsedInfoTreeType;
 	if (!Array.isArray(node)) {
 		Object.keys(node).forEach((id) => {
-			open[id] = true;
+			if (!open.children.hasOwnProperty(id)) {
+				open.children[id] = {
+					self: true,
+					children: {}
+				};
+			}
 		});
 	}
 </script>
@@ -62,14 +67,14 @@
 {:else}
 	<div class="flex flex-col gap-1">
 		{#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"
 					><Button
 						variant="ghost"
 						class="w-full flex flex-row justify-between py-0 px-1 h-fit hover:bg-background"
 					>
 						<span class="mr-2">{id}</span>
-						{#if open[id]}
+						{#if open.children[id].self}
 							<ChevronUp size="16" />
 						{:else}
 							<ChevronDown size="16" />
@@ -77,7 +82,13 @@
 					</Button></Collapsible.Trigger
 				>
 				<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.Root>
 		{/each}