feat: add scale

src/components/Canvas.svelte

@@ -1,6 +1,9 @@
 <script context="module">
 	import { onMount } from 'svelte'
+	import { get } from 'svelte/store'
 
+	import { settings } from 'src/stores/draw'
+	import { scaleCoordinates } from 'src/utils/coordinates'
 	import { drawMandelbrot } from 'src/utils/draw'
 </script>
 
@@ -29,7 +32,22 @@
 		gl.putImageData(field, 0, 0)
 	}
 
+	/**
+	 * Calculate new borders and draw
+	 * @param {PointerEvent} e
+	 */
+	function scaleDraw(e) {
+		const st = get(settings)
+		let coords = scaleCoordinates(st, width, height, e.clientX, e.clientY)
+
+		settings.set('lx', coords.lx)
+		settings.set('rx', coords.rx)
+		settings.set('yc', coords.yc)
+
+		draw()
+	}
+
 	onMount(init)
 </script>
 
-<canvas bind:this={canvas} {width} {height} />
+<canvas bind:this={canvas} {width} {height} on:click={scaleDraw} />

src/components/Settings.svelte

@@ -15,6 +15,12 @@
 	function should_refresh() {
 		refresh.set(true)
 	}
+	function reset() {
+		settings.set('lx', -3)
+		settings.set('rx', 1)
+		settings.set('yc', 0)
+		should_refresh()
+	}
 </script>
 
 <div class="absolute rounded bg-gray-200 m-5 select-none" class:p-2={show}>
@@ -39,6 +45,8 @@
 			<InputNumber bind:value={$settings.yc} on:change={should_refresh} />
 		</div>
 
+		<Button on:click={reset} class="mt-2">Reset</Button>
+
 		<a
 			href="//github.com/istudyatuni/mandelbrot"
 			class="flex mt-5 text-sky-600 hover:text-sky-800">

src/utils/coordinates.js

@@ -0,0 +1,24 @@
+export function scaleCoordinates(
+	{ lx, rx, yc },
+	width,
+	height,
+	clientX,
+	clientY
+) {
+	// complex width
+	let w = rx - lx
+	// scale coeff
+	let scale = width / w
+	// complex height
+	let h = height / scale
+
+	let xoffset = clientX / scale
+	let yoffset = clientY / scale
+	let yt = yc + h / 2
+
+	return {
+		lx: lx + xoffset / 2,
+		rx: rx - (w - xoffset) / 2,
+		yc: yt - yoffset,
+	}
+}