From 8af672671005fe7caad406dc5e57545ca17dc1f0 Mon Sep 17 00:00:00 2001
From: vvvyyynet <63237439+vvvyyynet@users.noreply.github.com>
Date: Mon, 16 Dec 2024 11:46:22 +0100
Subject: [PATCH 1/7] improve robustnes

allows for rest-props other than label and puts focus on values.
---
 src/routes/Devilstable.svelte | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/routes/Devilstable.svelte b/src/routes/Devilstable.svelte
index e049743..9f332a9 100644
--- a/src/routes/Devilstable.svelte
+++ b/src/routes/Devilstable.svelte
@@ -75,9 +75,10 @@
 		end: 100
 	});
 	let detailData = $derived(
-		boolData.map((d) => {
-			return { label: d.label, values: d.values.slice(selection.start - 1, selection.end) };
-		})
+		boolData.map(({ values, ...rest }) => ({
+			values: values.slice(selection.start - 1, selection.end),
+			...rest
+		}))
 	);
 </script>
 

From 4d6ab130d9f192fc6a2a7f2e777159ba3a6dfa8e Mon Sep 17 00:00:00 2001
From: vvvyyynet <63237439+vvvyyynet@users.noreply.github.com>
Date: Mon, 16 Dec 2024 12:23:36 +0100
Subject: [PATCH 2/7] softcode defaults for brush window

use newly introduced defaults in Brush-props and set the defaults in Devilstable to undefined, since they will never be used.
---
 src/routes/Brush.svelte       | 7 ++++++-
 src/routes/Devilstable.svelte | 5 +++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/routes/Brush.svelte b/src/routes/Brush.svelte
index e87917b..9116feb 100644
--- a/src/routes/Brush.svelte
+++ b/src/routes/Brush.svelte
@@ -26,6 +26,8 @@
 		height = 150,
 		DATA_MIN = 1,
 		DATA_MAX = 827,
+		BRUSH_WINDOW_DEFAULT_START = 1,
+		BRUSH_WINDOW_DEFAULT_END = 100,
 		data = [
 			{
 				label: 'D',
@@ -116,7 +118,10 @@
 	$effect(() => {
 		d3.select(gBrush)
 			.call(brush)
-			.call(brush.move, [valuesDim(DATA_MIN), valuesDim(100)]);
+			.call(brush.move, [
+				valuesDim(BRUSH_WINDOW_DEFAULT_START),
+				valuesDim(BRUSH_WINDOW_DEFAULT_END)
+			]);
 	});
 	let chunkedData = $derived(
 		data.map((dataObject) => {
diff --git a/src/routes/Devilstable.svelte b/src/routes/Devilstable.svelte
index 9f332a9..34e64ca 100644
--- a/src/routes/Devilstable.svelte
+++ b/src/routes/Devilstable.svelte
@@ -71,9 +71,10 @@
 		})
 	);
 	let selection = $state({
-		start: 1,
-		end: 100
+		start: undefined,
+		end: undefined
 	});
+	$inspect(selection);
 	let detailData = $derived(
 		boolData.map(({ values, ...rest }) => ({
 			values: values.slice(selection.start - 1, selection.end),

From 84b62156a8628be9056c1f48d5e4cd42c5901703 Mon Sep 17 00:00:00 2001
From: vvvyyynet <63237439+vvvyyynet@users.noreply.github.com>
Date: Mon, 16 Dec 2024 13:06:18 +0100
Subject: [PATCH 3/7] move DEFAULTS into its own .json file

some defaults were defined redundantly in multiple files.

The file only contains *functional* defaults, but no style-defaults, since they should be close to the components' tailwind-css
---
 src/routes/Brush.svelte              | 12 +++++++-----
 src/routes/Detail.svelte             | 10 ++++++++--
 src/routes/Devilstable.svelte        | 14 ++++++++------
 src/routes/Devilstable_DEFAULTS.json |  6 ++++++
 4 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 src/routes/Devilstable_DEFAULTS.json

diff --git a/src/routes/Brush.svelte b/src/routes/Brush.svelte
index 9116feb..0f2c9f4 100644
--- a/src/routes/Brush.svelte
+++ b/src/routes/Brush.svelte
@@ -1,5 +1,11 @@
 <script>
 	import * as d3 from 'd3';
+	import {
+		DATA_MIN,
+		DATA_MAX,
+		BRUSH_WINDOW_DEFAULT_START,
+		BRUSH_WINDOW_DEFAULT_END
+	} from './Devilstable_DEFAULTS.json';
 
 	let marginTop = 20;
 	let marginRight = 0;
@@ -20,14 +26,10 @@
 	 */
 	let gBrush = $state();
 
-	/** @type {{width?: number, height?: number, DATA_MIN?: number, DATA_MAX?: number, data?: {values: boolean[], label: string}[], brushE: function}} */
+	/** @type {{width?: number, height?: number, data?: {values: boolean[], label: string}[], brushE: function}} */
 	let {
 		width = 400,
 		height = 150,
-		DATA_MIN = 1,
-		DATA_MAX = 827,
-		BRUSH_WINDOW_DEFAULT_START = 1,
-		BRUSH_WINDOW_DEFAULT_END = 100,
 		data = [
 			{
 				label: 'D',
diff --git a/src/routes/Detail.svelte b/src/routes/Detail.svelte
index 302f3ad..a54b844 100644
--- a/src/routes/Detail.svelte
+++ b/src/routes/Detail.svelte
@@ -3,9 +3,15 @@
 	import { computePosition, shift, flip, offset } from '@floating-ui/dom';
 	import { base } from '$app/paths';
 	import { summaryLabel } from '$lib/constants';
+	import {
+		DATA_MIN,
+		DATA_MAX,
+		BRUSH_WINDOW_DEFAULT_START,
+		BRUSH_WINDOW_DEFAULT_END
+	} from './Devilstable_DEFAULTS.json';
 
-	/** @type {{codices: any, width?: number, height?: number, data_start?: number, data?: {values: boolean[], label: string}[]}} */
-	let { codices, width = 400, height = 400, data_start = 1, data = [] } = $props();
+	/** @type {{codices: any, width?: number, height?: number,data?: {values: boolean[], label: string}[],  data_start?: number}} */
+	let { codices, width = 400, height = 400, data = [], data_start = $bindable() } = $props();
 	let marginTop = 30;
 	let marginRight = 0;
 	let marginBottom = 20;
diff --git a/src/routes/Devilstable.svelte b/src/routes/Devilstable.svelte
index 34e64ca..a9a7a7c 100644
--- a/src/routes/Devilstable.svelte
+++ b/src/routes/Devilstable.svelte
@@ -3,9 +3,11 @@
 	import Brush from './Brush.svelte';
 	import Detail from './Detail.svelte';
 	import { summaryLabel } from '$lib/constants';
-
-	const DATA_MAX = 827;
-
+	import {
+		DATA_MAX,
+		BRUSH_WINDOW_DEFAULT_START,
+		BRUSH_WINDOW_DEFAULT_END
+	} from './Devilstable_DEFAULTS.json';
 	const brushDimension = 200;
 	const brushDimensionWithSafetyPixel = brushDimension + 1; // fixes a glitch, where Brush and Detail don't fit next to each other on PageResize.
 
@@ -71,8 +73,8 @@
 		})
 	);
 	let selection = $state({
-		start: undefined,
-		end: undefined
+		start: BRUSH_WINDOW_DEFAULT_START,
+		end: BRUSH_WINDOW_DEFAULT_END
 	});
 	$inspect(selection);
 	let detailData = $derived(
@@ -151,7 +153,7 @@
 	width={mobile ? width : width - brushDimensionWithSafetyPixel}
 	height={mobile ? height - brushDimension : height}
 	data={detailData}
-	data_start={selection.start}
+	bind:data_start={selection.start}
 />
 
 <style>
diff --git a/src/routes/Devilstable_DEFAULTS.json b/src/routes/Devilstable_DEFAULTS.json
new file mode 100644
index 0000000..26b2750
--- /dev/null
+++ b/src/routes/Devilstable_DEFAULTS.json
@@ -0,0 +1,6 @@
+{
+	"DATA_MIN": 1,
+	"DATA_MAX": 827,
+	"BRUSH_WINDOW_DEFAULT_START": 1,
+	"BRUSH_WINDOW_DEFAULT_END": 100
+}

From 882deba599293d36de0c2bd4895c10c74b1ee599 Mon Sep 17 00:00:00 2001
From: vvvyyynet <63237439+vvvyyynet@users.noreply.github.com>
Date: Mon, 16 Dec 2024 14:34:21 +0100
Subject: [PATCH 4/7] fix live-update of Detail beyond 180

---
 src/routes/Brush.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/Brush.svelte b/src/routes/Brush.svelte
index 0f2c9f4..3a768a3 100644
--- a/src/routes/Brush.svelte
+++ b/src/routes/Brush.svelte
@@ -99,7 +99,7 @@
 			.on('brush', (/** @type {{ selection: [number, number]; }} */ e) => {
 				const from = e.selection[0];
 				const to = e.selection[1];
-				if (Math.abs(from - to) <= 180) {
+				if (Math.abs(from - to) <= DATA_MAX - DATA_MIN) {
 					const start = Math.round(valuesDim.invert(from));
 					const end = Math.round(valuesDim.invert(to));
 
@@ -109,7 +109,7 @@
 			.on('end', (/** @type {{ selection: [number, number]; }} */ e) => {
 				const from = e.selection[0];
 				const to = e.selection[1];
-				if (Math.abs(from - to) > 180) {
+				if (Math.abs(from - to) > DATA_MAX - DATA_MIN) {
 					const start = Math.round(valuesDim.invert(from));
 					const end = Math.round(valuesDim.invert(to));
 

From 8d7de713dad4f0f1c2218668d46aa79caa6077da Mon Sep 17 00:00:00 2001
From: vvvyyynet <63237439+vvvyyynet@users.noreply.github.com>
Date: Mon, 16 Dec 2024 14:57:22 +0100
Subject: [PATCH 5/7] feat: add scroll on Details

---
 src/routes/Brush.svelte              | 25 +++++++++----------
 src/routes/Detail.svelte             | 37 +++++++++++++++++++---------
 src/routes/Devilstable.svelte        | 11 +++++----
 src/routes/Devilstable_DEFAULTS.json |  3 ++-
 4 files changed, 44 insertions(+), 32 deletions(-)

diff --git a/src/routes/Brush.svelte b/src/routes/Brush.svelte
index 3a768a3..fbf5dab 100644
--- a/src/routes/Brush.svelte
+++ b/src/routes/Brush.svelte
@@ -26,7 +26,7 @@
 	 */
 	let gBrush = $state();
 
-	/** @type {{width?: number, height?: number, data?: {values: boolean[], label: string}[], brushE: function}} */
+	/** @type {{width?: number, height?: number, data?: {values: boolean[], label: string}[], selection: {start: number, end: number}}} */
 	let {
 		width = 400,
 		height = 150,
@@ -40,7 +40,7 @@
 				values: []
 			}
 		],
-		brushE
+		selection = $bindable()
 	} = $props();
 
 	let mobile = $derived(width > height);
@@ -99,31 +99,28 @@
 			.on('brush', (/** @type {{ selection: [number, number]; }} */ e) => {
 				const from = e.selection[0];
 				const to = e.selection[1];
-				if (Math.abs(from - to) <= DATA_MAX - DATA_MIN) {
-					const start = Math.round(valuesDim.invert(from));
-					const end = Math.round(valuesDim.invert(to));
 
-					brushE({ start, end });
+				// Update range in Details
+				if (Math.abs(from - to) <= DATA_MAX - DATA_MIN) {
+					selection.start = Math.round(valuesDim.invert(from));
+					selection.end = Math.round(valuesDim.invert(to));
 				}
 			})
 			.on('end', (/** @type {{ selection: [number, number]; }} */ e) => {
 				const from = e.selection[0];
 				const to = e.selection[1];
-				if (Math.abs(from - to) > DATA_MAX - DATA_MIN) {
-					const start = Math.round(valuesDim.invert(from));
-					const end = Math.round(valuesDim.invert(to));
 
-					brushE({ start, end });
+				// Update range in Details
+				if (Math.abs(from - to) > DATA_MAX - DATA_MIN) {
+					selection.start = Math.round(valuesDim.invert(from));
+					selection.end = Math.round(valuesDim.invert(to));
 				}
 			});
 	});
 	$effect(() => {
 		d3.select(gBrush)
 			.call(brush)
-			.call(brush.move, [
-				valuesDim(BRUSH_WINDOW_DEFAULT_START),
-				valuesDim(BRUSH_WINDOW_DEFAULT_END)
-			]);
+			.call(brush.move, [valuesDim(selection.start), valuesDim(selection.end)]);
 	});
 	let chunkedData = $derived(
 		data.map((dataObject) => {
diff --git a/src/routes/Detail.svelte b/src/routes/Detail.svelte
index a54b844..0dbdc2c 100644
--- a/src/routes/Detail.svelte
+++ b/src/routes/Detail.svelte
@@ -3,15 +3,10 @@
 	import { computePosition, shift, flip, offset } from '@floating-ui/dom';
 	import { base } from '$app/paths';
 	import { summaryLabel } from '$lib/constants';
-	import {
-		DATA_MIN,
-		DATA_MAX,
-		BRUSH_WINDOW_DEFAULT_START,
-		BRUSH_WINDOW_DEFAULT_END
-	} from './Devilstable_DEFAULTS.json';
+	import { DATA_MIN, DATA_MAX, SCROLL_SPEED } from './Devilstable_DEFAULTS.json';
 
-	/** @type {{codices: any, width?: number, height?: number,data?: {values: boolean[], label: string}[],  data_start?: number}} */
-	let { codices, width = 400, height = 400, data = [], data_start = $bindable() } = $props();
+	/** @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();
 	let marginTop = 30;
 	let marginRight = 0;
 	let marginBottom = 20;
@@ -44,6 +39,22 @@
 	 */
 	let svgElement = $state();
 
+	const handleWheel = (/** @type {{ deltaY: any; }} */ event) => {
+		event.preventDefault();
+		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');
+		} 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) => {
 		mousePos = d3.pointer(event, svgElement);
 		if (mousePos[0] >= marginLeft && mousePos[1] >= marginTop) {
@@ -164,14 +175,14 @@
 	let y = $derived(
 		d3.scaleLinear(
 			// Domain: from bottom to top: at the bottom is the last selected verse, at the top is the first selected verse
-			[data_start + data[0]?.values.length, data_start],
+			[selection.start + data[0]?.values.length, selection.start],
 			[height - marginBottom, marginTop]
 		)
 	);
 	let verse = $derived(Math.floor(y.invert(mousePos[1])));
 	let manuscript = $derived(
 		scaleBandInvert(x)(mousePos[0]) === 'fr'
-			? data.find((d) => d.label === 'fr')?.values[verse - data_start] || 'fr'
+			? data.find((d) => d.label === 'fr')?.values[verse - selection.start] || 'fr'
 			: scaleBandInvert(x)(mousePos[0])
 	);
 	// $inspect(contigousData);
@@ -226,6 +237,7 @@
 					});
 				}
 			})
+
 			.on('blur', (e) => {
 				const reference = e.currentTarget;
 				const popup =
@@ -269,7 +281,7 @@
 {/each}
 {#each data.find((d) => d.label === 'fr')?.values || [] as fraction, i}
 	{#if Array.isArray(fraction)}
-		{@const verse = i + data_start}
+		{@const verse = i + selection.start}
 		<div
 			class="card p-1 variant-filled-primary top-0 left-0 w-max absolute opacity-0"
 			bind:this={popupFractions[verse]}
@@ -288,6 +300,7 @@
 	{/if}
 {/each}
 <div
+	onwheel={handleWheel}
 	onmousemove={handleMouseMove}
 	onmouseleave={(_e) => {
 		floating.style.display = 'none';
@@ -306,7 +319,7 @@
 				{#each sigla.values as values, i}
 					{#if values}
 						{#if isNaN(values[1])}
-							{@const verseNumber = i + data_start}
+							{@const verseNumber = i + selection.start}
 							{#if values.length === 1}
 								<a
 									href={`${base}/textzeugen/${values[0]}/${verseNumber}`}
diff --git a/src/routes/Devilstable.svelte b/src/routes/Devilstable.svelte
index a9a7a7c..a0f29b1 100644
--- a/src/routes/Devilstable.svelte
+++ b/src/routes/Devilstable.svelte
@@ -76,13 +76,13 @@
 		start: BRUSH_WINDOW_DEFAULT_START,
 		end: BRUSH_WINDOW_DEFAULT_END
 	});
-	$inspect(selection);
 	let detailData = $derived(
 		boolData.map(({ values, ...rest }) => ({
 			values: values.slice(selection.start - 1, selection.end),
 			...rest
 		}))
 	);
+	$inspect(selection);
 </script>
 
 <div class="card p-4 variant-filled-primary max-w-lg" data-popup="popupChips">
@@ -143,17 +143,18 @@
 	width={mobile ? width : brushDimension}
 	height={mobile ? brushDimension : height}
 	data={boolData.filter((d) => d.label !== summaryLabel)}
-	brushE={(/** @type {{ start: number; end: number; }} */ e) => {
+	bind:selection
+/>
+<!-- brushE={(/** @type {{ start: number; end: number; }} */ e) => {
 		selection.start = e.start;
 		selection.end = e.end;
-	}}
-/>
+	}} -->
 <Detail
 	{codices}
 	width={mobile ? width : width - brushDimensionWithSafetyPixel}
 	height={mobile ? height - brushDimension : height}
 	data={detailData}
-	bind:data_start={selection.start}
+	bind:selection
 />
 
 <style>
diff --git a/src/routes/Devilstable_DEFAULTS.json b/src/routes/Devilstable_DEFAULTS.json
index 26b2750..f3f2c1a 100644
--- a/src/routes/Devilstable_DEFAULTS.json
+++ b/src/routes/Devilstable_DEFAULTS.json
@@ -2,5 +2,6 @@
 	"DATA_MIN": 1,
 	"DATA_MAX": 827,
 	"BRUSH_WINDOW_DEFAULT_START": 1,
-	"BRUSH_WINDOW_DEFAULT_END": 100
+	"BRUSH_WINDOW_DEFAULT_END": 100,
+	"SCROLL_SPEED": 50,
 }

From e73921cafc0b9695f1883bad5ae88119b0663c43 Mon Sep 17 00:00:00 2001
From: vvvyyynet <63237439+vvvyyynet@users.noreply.github.com>
Date: Mon, 16 Dec 2024 15:01:04 +0100
Subject: [PATCH 6/7] refactor: make contigousData more readable

---
 src/routes/Detail.svelte | 33 ++++++++++++++++-----------------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/routes/Detail.svelte b/src/routes/Detail.svelte
index 0dbdc2c..cbc7d7c 100644
--- a/src/routes/Detail.svelte
+++ b/src/routes/Detail.svelte
@@ -134,27 +134,26 @@
 	};
 	let contigousData = $derived(
 		data.map((d) => {
-			if (d.label === 'fr') {
-				return d;
-			}
+			// skip for label 'fr'
+			if (d.label === 'fr') return d;
+
+			// init
 			let contiguousRanges = [];
-			let start = 0;
+			let start = null;
+
+			//
 			for (let i = 0; i < d.values.length; i++) {
-				if (d.values[i]) {
-					if (start === 0) {
-						// console.log(d.label, i, data_start);
-						start = i + data_start;
-					}
-				} else {
-					if (start !== 0) {
-						contiguousRanges.push([start, i + data_start - 1]);
-						start = 0;
-					}
+				if (d.values[i] && start === null) {
+					// start a new range
+					start = i + selection.start;
+				} else if (!d.values[i] && start !== null) {
+					contiguousRanges.push([start, i + selection.start - 1]);
+					start = null; // reset start
 				}
 			}
-			if (start !== 0) {
-				// console.log(d.label, start, d.values.length - 1 + data_start);
-				contiguousRanges.push([start, d.values.length - 1 + data_start]);
+			// if range is still open at the end
+			if (start !== null) {
+				contiguousRanges.push([start, d.values.length + selection.start - 1]);
 			}
 			return {
 				label: d.label,

From 948ec51520a57ef88e8cd3b61c3248b068d35bef Mon Sep 17 00:00:00 2001
From: vvvyyynet <63237439+vvvyyynet@users.noreply.github.com>
Date: Mon, 16 Dec 2024 15:17:20 +0100
Subject: [PATCH 7/7] feat: add zoom on Detail

---
 src/routes/Detail.svelte             | 48 ++++++++++++++++++++++------
 src/routes/Devilstable_DEFAULTS.json |  2 ++
 2 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/src/routes/Detail.svelte b/src/routes/Detail.svelte
index cbc7d7c..dc18969 100644
--- a/src/routes/Detail.svelte
+++ b/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) => {
diff --git a/src/routes/Devilstable_DEFAULTS.json b/src/routes/Devilstable_DEFAULTS.json
index f3f2c1a..ad18657 100644
--- a/src/routes/Devilstable_DEFAULTS.json
+++ b/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
 }