feat: add zoom on Detail

Author: vvvyyynet

src/routes/Detail.svelte

@@ -3,7 +3,13 @@
 	import { computePosition, shift, flip, offset } from '@floating-ui/dom';
 	import { base } from '$app/paths';
 	import { summaryLabel } from '$lib/constants';
-	import { DATA_MIN, DATA_MAX, SCROLL_SPEED } from './Devilstable_DEFAULTS.json';
+	import {
+		DATA_MIN,
+		DATA_MAX,
+		SCROLL_SPEED,
+		ZOOM_INCREMENT,
+		ZOOM_MINIMUM_WINDOW_SIZE
+	} from './Devilstable_DEFAULTS.json';
 
 	/** @type {{codices: any, width?: number, height?: number,data?: {values: boolean[], label: string}[],  selection: {start: number, end: number}}} */
 	let { codices, width = 400, height = 400, data = [], selection = $bindable() } = $props();
@@ -41,18 +47,40 @@
 
 	const handleWheel = (/** @type {{ deltaY: any; }} */ event) => {
 		event.preventDefault();
+
+		// Check if the CTRL key is held down during the scroll
+		const isZooming = event.ctrlKey;
+
 		let delta = selection.end - selection.start;
-		if (event.deltaY > 0) {
-			// Scroll down
-			selection.end = Math.min(DATA_MAX, (selection.end += SCROLL_SPEED));
-			selection.start = selection.end - delta;
-			console.log('down');
+
+		if (isZooming) {
+			// Zoom in
+			if (event.deltaY > 0) {
+				// Zoom out
+				selection.start = Math.max(DATA_MIN, selection.start - ZOOM_INCREMENT);
+				selection.end = Math.min(DATA_MAX, selection.end + ZOOM_INCREMENT);
+			} else {
+				// Zoom in
+				if (delta > ZOOM_MINIMUM_WINDOW_SIZE) {
+					selection.start = Math.max(DATA_MIN, selection.start + ZOOM_INCREMENT);
+					selection.end = Math.max(
+						selection.start + ZOOM_MINIMUM_WINDOW_SIZE,
+						Math.min(DATA_MAX, selection.end - ZOOM_INCREMENT)
+					);
+				}
+			}
 		} else {
-			// Scroll up
-			selection.start = Math.max(DATA_MIN, (selection.start -= SCROLL_SPEED));
-			selection.end = selection.start + delta;
+			// Scroll
+			if (event.deltaY > 0) {
+				// Scroll down
+				selection.end = Math.min(DATA_MAX, (selection.end += SCROLL_SPEED));
+				selection.start = selection.end - delta;
+			} else {
+				// Scroll up
+				selection.start = Math.max(DATA_MIN, (selection.start -= SCROLL_SPEED));
+				selection.end = selection.start + delta;
+			}
 		}
-		console.log('scrolling', selection.start);
 	};
 
 	const handleMouseMove = (/** @type {{ clientX: any; clientY: any; }} */ event) => {

src/routes/Devilstable_DEFAULTS.json

@@ -4,4 +4,6 @@
 	"BRUSH_WINDOW_DEFAULT_START": 1,
 	"BRUSH_WINDOW_DEFAULT_END": 100,
 	"SCROLL_SPEED": 50,
+	"ZOOM_INCREMENT": 40,
+	"ZOOM_MINIMUM_WINDOW_SIZE": 50
 }