From ac15f9064fee65933a1fdacda70665c6ce5ad811 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Sun, 14 Apr 2024 14:53:57 +0200
Subject: [PATCH] scrollable layer list

---
 .../layer-control/LayerControl.svelte         | 93 ++++++++++---------
 .../lib/components/ui/scroll-area/index.ts    | 10 ++
 .../scroll-area/scroll-area-scrollbar.svelte  | 27 ++++++
 .../ui/scroll-area/scroll-area.svelte         | 32 +++++++
 4 files changed, 118 insertions(+), 44 deletions(-)
 create mode 100644 website/src/lib/components/ui/scroll-area/index.ts
 create mode 100644 website/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
 create mode 100644 website/src/lib/components/ui/scroll-area/scroll-area.svelte

diff --git a/website/src/lib/components/layer-control/LayerControl.svelte b/website/src/lib/components/layer-control/LayerControl.svelte
index 9bb7bd37..ba6965d5 100644
--- a/website/src/lib/components/layer-control/LayerControl.svelte
+++ b/website/src/lib/components/layer-control/LayerControl.svelte
@@ -6,6 +6,7 @@
 
 	import Label from '$lib/components/ui/label/label.svelte';
 	import { Separator } from '$lib/components/ui/separator';
+	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
 
 	import Fa from 'svelte-fa';
 	import { faLayerGroup } from '@fortawesome/free-solid-svg-icons';
@@ -36,52 +37,56 @@
 		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]);
+			<ScrollArea>
+				<div class="h-fit max-h-[50vh]">
+					<div class="p-2">
+						<Label>Basemaps</Label>
+						<LayerTree
+							layerTree={basemapTree}
+							name="basemaps"
+							onValueChange={(id) => {
+								if (map) {
+									map.setStyle(basemaps[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] }
-											: {})
+							}}
+						/>
+					</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);
 									}
-								});
-							} else {
-								map.removeLayer(id);
-							}
-						}
-					}}
-				/>
-			</div>
-			<Separator class="w-full" />
-			<div class="p-2">TODO: Add layer settings</div>
+								}
+							}}
+						/>
+					</div>
+					<Separator class="w-full" />
+					<div class="p-2">TODO: Add layer settings</div>
+				</div>
+			</ScrollArea>
 		</div>
 	</div>
 </CustomControl>
diff --git a/website/src/lib/components/ui/scroll-area/index.ts b/website/src/lib/components/ui/scroll-area/index.ts
new file mode 100644
index 00000000..e86a25b2
--- /dev/null
+++ b/website/src/lib/components/ui/scroll-area/index.ts
@@ -0,0 +1,10 @@
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar,
+};
diff --git a/website/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/website/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
new file mode 100644
index 00000000..a97f3bba
--- /dev/null
+++ b/website/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ScrollAreaPrimitive.ScrollbarProps & {
+		orientation?: "vertical" | "horizontal";
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let orientation: $$Props["orientation"] = "vertical";
+	export { className as class };
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	{orientation}
+	class={cn(
+		"flex touch-none select-none transition-colors",
+		orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+		orientation === "horizontal" && "h-2.5 w-full border-t border-t-transparent p-px",
+		className
+	)}
+>
+	<slot />
+	<ScrollAreaPrimitive.Thumb
+		class={cn("relative rounded-full bg-border", orientation === "vertical" && "flex-1")}
+	/>
+</ScrollAreaPrimitive.Scrollbar>
diff --git a/website/src/lib/components/ui/scroll-area/scroll-area.svelte b/website/src/lib/components/ui/scroll-area/scroll-area.svelte
new file mode 100644
index 00000000..e8e368c9
--- /dev/null
+++ b/website/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { Scrollbar } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = ScrollAreaPrimitive.Props & {
+		orientation?: "vertical" | "horizontal" | "both";
+		scrollbarXClasses?: string;
+		scrollbarYClasses?: string;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+	export let orientation = "vertical";
+	export let scrollbarXClasses: string = "";
+	export let scrollbarYClasses: string = "";
+</script>
+
+<ScrollAreaPrimitive.Root {...$$restProps} class={cn("relative overflow-hidden", className)}>
+	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
+		<ScrollAreaPrimitive.Content>
+			<slot />
+		</ScrollAreaPrimitive.Content>
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === "vertical" || orientation === "both"}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === "horizontal" || orientation === "both"}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>