steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-30 23:30:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

scrollable layer list

Browse Source
This commit is contained in:
vcoppe
2024-04-14 14:53:57 +02:00
parent 32c992a492
commit ac15f9064f
4 changed files with 118 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

10
website/src/lib/components/ui/scroll-area/index.ts Normal file
View File

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

27
website/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte Normal file
View File

@@ -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>

32
website/src/lib/components/ui/scroll-area/scroll-area.svelte Normal file
View File

@@ -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>