feat: crepuscule / shademap

package.json

@@ -45,10 +45,12 @@
 		"@vitest/coverage-v8": "^4.0.17",
 		"bits-ui": "^2.15.2",
 		"clsx": "^2.1.1",
+		"crepuscule": "file:../../forks/crepuscule",
 		"eslint": "^9.39.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^3.13.0",
 		"globals": "^17.3.0",
+		"mapbox-gl-shadow-simulator": "^0.67.0",
 		"maplibre-gl": "^5.17.0",
 		"mdsvex": "^0.12.3",
 		"mode-watcher": "^1.1.0",

src/lib/components/scale/scale.svelte

@@ -98,10 +98,8 @@
 			: 'bottom-2.5'} duration-500 left-2.5 z-10 select-none"
 		style="max-height: {totalHeight + 100}px;"
 	>
-		<div
-			class="flex flex-col-reverse overflow-hidden rounded  shadow-md">
-			<div
-				class="flex flex-col-reverse bg-glass/30 backdrop-blur-sm">
+		<div class="flex flex-col-reverse overflow-hidden rounded shadow-md">
+			<div class="flex flex-col-reverse bg-glass/30 backdrop-blur-sm">
 				{#each labeledColors as lc, i (lc)}
 					{@const alphaValue = getAlpha(lc.color)}
 					<button

src/lib/components/selection/variable-selection.svelte

@@ -242,9 +242,7 @@
 							></button
 						></Popover.Close
 					>
-					<Command.Root
-						class="bg-glass/85! backdrop-blur-sm rounded"
-					>
+					<Command.Root class="bg-glass/85! backdrop-blur-sm rounded">
 						<Command.Input class="border-none ring-0" placeholder="Search domains..." />
 						<Command.List>
 							<Command.Empty>No domains found.</Command.Empty>
@@ -342,9 +340,7 @@
 							></button
 						></Popover.Close
 					>
-					<Command.Root
-						class="bg-glass/85! backdrop-blur-sm rounded"
-					>
+					<Command.Root class="bg-glass/85! backdrop-blur-sm rounded">
 						<Command.Input class="border-none ring-0" placeholder="Search variables..." />
 						<Command.List>
 							<Command.Empty>No variables found.</Command.Empty>
@@ -454,9 +450,7 @@
 								></button
 							></Popover.Close
 						>
-						<Command.Root
-							class="bg-glass/85! backdrop-blur-sm rounded"
-						>
+						<Command.Root class="bg-glass/85! backdrop-blur-sm rounded">
 							<Command.Input class="border-none ring-0" placeholder="Search levels..." />
 							<Command.List>
 								<Command.Empty>No levels found.</Command.Empty>

src/lib/components/time/time-selector.svelte

@@ -8,9 +8,16 @@
 
 	import { browser } from '$app/environment';
 
-	import { desktop, loading, preferences } from '$lib/stores/preferences';
-	import { metaJson, modelRunLocked } from '$lib/stores/time';
-	import { inProgress, latest, modelRun, now, time } from '$lib/stores/time';
+	import { desktop, loading, preferences, shadeMap } from '$lib/stores/preferences';
+	import {
+		inProgress,
+		latest,
+		metaJson,
+		modelRun,
+		modelRunLocked,
+		now,
+		time
+	} from '$lib/stores/time';
 	import {
 		domainSelectionOpen,
 		selectedDomain,
@@ -452,19 +459,23 @@
 
 	// generates all possible time steps for the current day
 	const timeStepsComplete = $derived.by(() => {
-		const timeStepsComplete = [];
-		for (let day of daySteps) {
-			for (let i = 0; i <= 23; i++) {
-				if (metaFirstResolutionHours === 0.25) {
-					for (let j = 0; j < 60; j += 15) {
-						timeStepsComplete.push(withLocalTime(day, i, j));
+		if (metaFirstResolutionHours) {
+			const timeStepsComplete = [];
+			for (let day of daySteps) {
+				for (let i = 0; i <= 23; i++) {
+					if (metaFirstResolutionHours === 0.25) {
+						for (let j = 0; j < 60; j += 15) {
+							timeStepsComplete.push(withLocalTime(day, i, j));
+						}
+					} else {
+						timeStepsComplete.push(withLocalTime(day, i));
 					}
-				} else {
-					timeStepsComplete.push(withLocalTime(day, i));
 				}
 			}
+			return timeStepsComplete;
+		} else {
+			return undefined;
 		}
-		return timeStepsComplete;
 	});
 
 	// state variables for mouse interaction and scrolling behavior
@@ -476,7 +487,7 @@
 	let isScrolling = $state(false);
 
 	const centerDateButton = (date: Date, smooth = true) => {
-		if (dayContainer) {
+		if (dayContainer && timeStepsComplete) {
 			const index = timeStepsComplete.findIndex((tSC) => tSC.getTime() === date.getTime());
 			if (index !== -1) {
 				if (desktop.current) {
@@ -521,11 +532,18 @@
 
 	let hoveredHour = $derived(
 		timeStepsComplete
-			? timeStepsComplete[
-					Math.round(
-						(timeStepsComplete.length * (hoverX + dayContainerScrollLeft)) / dayContainerScrollWidth
-					)
-				]
+			? // ? timeStepsComplete[
+				// 		Math.round(
+				// 			(timeStepsComplete.length *
+				// 		)
+				// 	]
+				new Date(
+					timeStepsComplete[0].getTime() +
+						((timeStepsComplete[timeStepsComplete.length - 1].getTime() -
+							timeStepsComplete[0].getTime()) *
+							(hoverX + dayContainerScrollLeft)) /
+							dayContainerScrollWidth
+				)
 			: metaFirstTime
 	);
 
@@ -558,14 +576,17 @@
 	onMount(() => {
 		if (hoursHoverContainer) {
 			hoursHoverContainer.addEventListener('mousemove', (e) => {
-				if (hoursHoverContainerWidth)
+				if (hoursHoverContainerWidth) {
 					hoverX = e.layerX + (isSafari ? hoursHoverContainerWidth / 2 : 0);
+					$shadeMap?.setDate(hoveredHour);
+				}
 			});
 			hoursHoverContainer.addEventListener('mouseout', () => {
 				hoverX = 0;
+				$shadeMap?.setDate($time);
 			});
 			hoursHoverContainer.addEventListener('click', () => {
-				if (desktop.current) {
+				if (desktop.current && timeStepsComplete) {
 					let validTime = false;
 					let timeStep =
 						timeStepsComplete[
@@ -628,35 +649,52 @@
 		});
 
 		const onScrollEvent = (e: Event) => {
-			if (isScrolling) return;
+			if (isScrolling || !timeStepsComplete) return;
 
 			const target = e.target as Element;
 			const left = target.scrollLeft;
 
 			if (left === 0) {
 				currentDate.setHours(0);
 			}
-			let timeStep =
-				timeStepsComplete[
-					Math.round(
-						(timeStepsComplete.length * target.scrollLeft) / (dayContainerScrollWidth - viewWidth)
-					)
-				];
+			// let timeStep =
+			// 	timeStepsComplete[
+			// 		Math.round(
+			// 			(timeStepsComplete.length * target.scrollLeft) / (dayContainerScrollWidth - viewWidth)
+			// 		)
+			// 	];
+			//
+			let timeStep = new Date(
+				timeStepsComplete[0].getTime() +
+					(timeStepsComplete[timeStepsComplete.length - 1].getTime() -
+						timeStepsComplete[0].getTime()) *
+						(target.scrollLeft / (dayContainerScrollWidth - viewWidth))
+			);
+			$shadeMap?.setDate(timeStep);
+
 			if (timeStep) currentDate = new SvelteDate(timeStep);
 		};
 
 		const onScrollEndEvent = () => {
 			// Clear isScrolling flag when scrolling ends
 			isScrolling = false;
 
-			if (!desktop.current && !isDown) {
+			if (!desktop.current && !isDown && timeStepsComplete) {
 				if ($loading) {
 					centerDateButton($time);
 					currentDate = new SvelteDate($time);
 				} else {
-					let timeStep = findTimeStep(currentDate, timeSteps);
+					let timeStep =
+						timeStepsComplete[
+							Math.round(
+								(timeStepsComplete.length * dayContainerScrollLeft) /
+									(dayContainerScrollWidth - viewWidth)
+							)
+						];
+					timeStep = findTimeStep(timeStep, timeSteps);
 					if (timeStep) currentDate = timeStep;
 					onDateChange(currentDate);
+					isScrolling = true;
 					centerDateButton(currentDate);
 				}
 			}
@@ -669,7 +707,7 @@
 
 			const throttledScrollEvent = throttle((e: Event) => {
 				onScrollEvent(e);
-			}, 25);
+			}, 0);
 
 			const throttledScrollEndEvent = throttle(() => {
 				onScrollEndEvent();

src/lib/constants.ts

@@ -18,6 +18,7 @@ export const DEFAULT_PREFERENCES = {
 	hillshade: false,
 	clipWater: false,
 	showScale: true,
+	crepuscule: false,
 	timeSelector: true
 };
 

src/lib/index.ts

@@ -26,6 +26,7 @@ import {
 	opacity,
 	preferences as p,
 	resolution as r,
+	shadeMap as sM,
 	tileSize as tS,
 	url as u
 } from '$lib/stores/preferences';
@@ -602,6 +603,8 @@ const checkRasterLoaded = () => {
 			}
 			checked = 0;
 			loading.set(false);
+			const shadeMap = get(sM);
+			if (shadeMap) shadeMap.setDate(get(time));
 			clearInterval(checkRasterSourceLoadedInterval);
 		}
 	}, 50);
@@ -883,7 +886,7 @@ export const getInitialMetaData = async () => {
 	const domain = get(selectedDomain);
 
 	const uri =
-		domain && domain.value.startsWith('dwd_icon')&& !domain.value.endsWith('eps')
+		domain && domain.value.startsWith('dwd_icon') && !domain.value.endsWith('eps')
 			? `https://s3.servert.ch`
 			: `https://map-tiles.open-meteo.com`;
 

src/lib/stores/preferences.ts

@@ -24,6 +24,8 @@ import {
 } from './variables';
 import { defaultVectorOptions, vectorOptions } from './vector';
 
+import type ShadeMap from 'mapbox-gl-shadow-simulator';
+
 export const defaultPreferences = DEFAULT_PREFERENCES;
 
 export interface Preferences {
@@ -57,6 +59,8 @@ export const localStorageVersion: Persisted<string | undefined> = persisted(
 
 export const helpOpen = writable(false);
 
+export const shadeMap = writable<ShadeMap | null>(null);
+
 export const resetStates = async () => {
 	modelRunLocked.set(false);