scrollable layer list

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">
+			<ScrollArea>
-				<Label>Basemaps</Label>
+				<div class="h-fit max-h-[50vh]">
-				<LayerTree
+					<div class="p-2">
-					layerTree={basemapTree}
+						<Label>Basemaps</Label>
-					name="basemaps"
+						<LayerTree
-					onValueChange={(id) => {
+							layerTree={basemapTree}
-						if (map) {
+							name="basemaps"
-							map.setStyle(basemaps[id]);
+							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',
+					</div>
-									source: id,
+					<Separator class="w-full" />
-									paint: {
+					<div class="p-2">
-										...(id in opacities
+						<Label>Overlays</Label>
-											? overlays[id].type === 'raster'
+						<LayerTree
-												? { 'raster-opacity': opacities[id] }
+							layerTree={overlayTree}
-												: { 'line-opacity': opacities[id] }
+							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>
-			</div>
+			</ScrollArea>
-			<Separator class="w-full" />
-			<div class="p-2">TODO: Add layer settings</div>
 		</div>
 	</div>
 </CustomControl>

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,
+};

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>

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>