From 7db0c8a554211154a5f4fe4d8c21e2c7f8f015d9 Mon Sep 17 00:00:00 2001
From: Ilia <istudyatuni@gmail.com>
Date: Thu, 21 Apr 2022 16:32:56 +0300
Subject: [PATCH] feat: add scale

---
 src/components/Canvas.svelte   | 20 +++++++++++++++++++-
 src/components/Settings.svelte |  8 ++++++++
 src/utils/coordinates.js       | 24 ++++++++++++++++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/coordinates.js

diff --git a/src/components/Canvas.svelte b/src/components/Canvas.svelte
index cf11efe..09d11e3 100644
--- a/src/components/Canvas.svelte
+++ b/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} />
diff --git a/src/components/Settings.svelte b/src/components/Settings.svelte
index 7425d7a..6eca38f 100644
--- a/src/components/Settings.svelte
+++ b/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">
diff --git a/src/utils/coordinates.js b/src/utils/coordinates.js
new file mode 100644
index 0000000..59df851
--- /dev/null
+++ b/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,
+	}
+}