From b5a0200ca52e321785ffbf491d67de34ee0e02aa Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Fri, 12 Apr 2024 17:22:04 +0200
Subject: [PATCH] animation for layer control

---
 .../layer-control/LayerControl.svelte         | 98 ++++++++++---------
 .../components/layer-control/LayerTree.svelte |  2 +-
 .../layer-control/LayerTreeNode.svelte        | 14 +--
 3 files changed, 62 insertions(+), 52 deletions(-)

diff --git a/website/src/lib/components/layer-control/LayerControl.svelte b/website/src/lib/components/layer-control/LayerControl.svelte
index d7cc403d..9bb7bd37 100644
--- a/website/src/lib/components/layer-control/LayerControl.svelte
+++ b/website/src/lib/components/layer-control/LayerControl.svelte
@@ -26,54 +26,62 @@
 	}
 </script>
 
-<CustomControl {map} class="group">
-	<div class="flex flex-row justify-center items-center w-[29px] h-[29px] group-hover:hidden">
+<CustomControl {map} class="group min-w-[29px] min-h-[29px]">
+	<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" />
 	</div>
-	<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
+		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]"
+	>
+		<div class="overflow-hidden">
+			<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>
+			<Separator class="w-full" />
+			<div class="p-2">TODO: Add layer settings</div>
 		</div>
 	</div>
 </CustomControl>
diff --git a/website/src/lib/components/layer-control/LayerTree.svelte b/website/src/lib/components/layer-control/LayerTree.svelte
index 5901132c..0c4c8d02 100644
--- a/website/src/lib/components/layer-control/LayerTree.svelte
+++ b/website/src/lib/components/layer-control/LayerTree.svelte
@@ -9,6 +9,6 @@
 	export let onValueChange: (id: string, checked: boolean) => void;
 </script>
 
-<fieldset class="min-w-52">
+<fieldset class="min-w-64">
 	<LayerTreeNode {name} node={layerTree} {multiple} {onValueChange} />
 </fieldset>
diff --git a/website/src/lib/components/layer-control/LayerTreeNode.svelte b/website/src/lib/components/layer-control/LayerTreeNode.svelte
index 8aa62e36..f37fb2f9 100644
--- a/website/src/lib/components/layer-control/LayerTreeNode.svelte
+++ b/website/src/lib/components/layer-control/LayerTreeNode.svelte
@@ -30,8 +30,8 @@
 	}
 </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}
 			<div class="flex flex-row items-center gap-2">
 				{#if multiple}
@@ -59,7 +59,9 @@
 				<Label for={id}>{id}</Label>
 			</div>
 		{/each}
-	{:else}
+	</div>
+{:else}
+	<div class="flex flex-col gap-1">
 		{#each Object.keys(node) as id}
 			<Collapsible.Root bind:open={open[id]} class="ml-1">
 				<Collapsible.Trigger class="w-full"
@@ -75,13 +77,13 @@
 						{/if}
 					</Button></Collapsible.Trigger
 				>
-				<Collapsible.Content class="mt-1 ml-1">
+				<Collapsible.Content class="ml-1">
 					<svelte:self node={node[id]} {name} {multiple} {onValueChange} />
 				</Collapsible.Content>
 			</Collapsible.Root>
 		{/each}
-	{/if}
-</div>
+	</div>
+{/if}
 
 <style lang="postcss">
 	div :global(input[type='radio']) {