From a695d52edd03c9db522e60dfd1a1909c9d42ebff Mon Sep 17 00:00:00 2001
From: Ben Eltschig <43812953+peabrainiac@users.noreply.github.com>
Date: Thu, 8 Oct 2020 17:12:59 +0200
Subject: [PATCH] made zoom preview update even when mouse isn't moving

---
 explorer/FractalCanvas.js      | 13 +++++++++++++
 explorer/FractalExplorer.js    | 22 +++++++++++++++++++++-
 explorer/FractalZoomPreview.js | 16 ++++++++++++----
 3 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/explorer/FractalCanvas.js b/explorer/FractalCanvas.js
index f23f99d..f0cd25c 100644
--- a/explorer/FractalCanvas.js
+++ b/explorer/FractalCanvas.js
@@ -23,6 +23,7 @@ export default class FractalCanvas extends HTMLElement {
 		this._onViewportChangeCallbacks = [];
 		this._onStateChangeCallbacks = [];
 		this._onProgressChangeCallbacks = [];
+		this._onCanvasUpdateCallbacks = [];
 		this._onZoomChangeCallbacks = [];
 		this._state = STATE_LOADING;
 		this._progress = 0;
@@ -120,6 +121,18 @@ export default class FractalCanvas extends HTMLElement {
 	_refreshCanvas(){
 		this._ctx.putImageData(this._renderer.imageData,0,0);
 		this._progress = this._pixelsCalculated/(this._width*this._height);
+		this._onCanvasUpdateCallbacks.forEach(callback=>{
+			callback(this._canvas);
+		});
+	}
+
+	/**
+	 * Registers a callback to be executed after every time the canvas is updated, and also once when the callback is registered.
+	 * @param {(canvas:HTMLCanvasElement)=>{}} callback
+	 */
+	onCanvasUpdate(callback){
+		this._onCanvasUpdateCallbacks.push(callback);
+		callback(this._canvas);
 	}
 
 	get _pixelsCalculated(){
diff --git a/explorer/FractalExplorer.js b/explorer/FractalExplorer.js
index e6c052a..5990007 100644
--- a/explorer/FractalExplorer.js
+++ b/explorer/FractalExplorer.js
@@ -61,6 +61,9 @@ export default class FractalExplorer extends HTMLElement {
 		/** @type {FractalZoomPreview} */
 		const zoomPreviewElement = this.shadowRoot.getElementById("zoom-preview");
 		zoomPreviewElement.targetCanvas = fractalCanvas.canvas;
+		let mouseX = 0;
+		let mouseY = 0;
+		let mouseOn = false;
 		fractalCanvas.addEventListener("mousedown",(e)=>{
 			if (e.button!==2){
 				zoomPreviewElement.show();
@@ -69,6 +72,9 @@ export default class FractalExplorer extends HTMLElement {
 			}
 		});
 		fractalCanvas.addEventListener("mousemove",(e)=>{
+			mouseX = e.offsetX;
+			mouseY = e.offsetY;
+			mouseOn = true;
 			let pixelX = fractalCanvas.mouseXToPixelX(e.offsetX);
 			let pixelY = fractalCanvas.mouseYToPixelY(e.offsetY);
 			let iterations = fractalCanvas.getPixelIterations(pixelX,pixelY);
@@ -77,6 +83,17 @@ export default class FractalExplorer extends HTMLElement {
 				zoomPreviewElement.setPosition(e.offsetX,e.offsetY);
 			}
 		});
+		fractalCanvas.onCanvasUpdate(()=>{
+			if (mouseOn){
+				let pixelX = fractalCanvas.mouseXToPixelX(mouseX);
+				let pixelY = fractalCanvas.mouseYToPixelY(mouseY);
+				let iterations = fractalCanvas.getPixelIterations(pixelX,pixelY);
+				statusbar.mouseInfo = `Iterations: ${iterations!=ITERATIONS_NOT_YET_KNOWN?iterations+(iterations<fractalCanvas.iterations?"":"+"):"not yet known"}`;	
+			}
+			if (!zoomPreviewElement.hidden){
+				zoomPreviewElement.update();
+			}
+		});
 		fractalCanvas.addEventListener("mouseup",(e)=>{
 			if (!zoomPreviewElement.hidden){
 				zoomPreviewElement.hide();
@@ -93,11 +110,14 @@ export default class FractalExplorer extends HTMLElement {
 			}
 		});
 		fractalCanvas.addEventListener("contextmenu",(e)=>{
-			e.preventDefault();
+			if (!e.shiftKey){
+				e.preventDefault();
+			}
 		});
 		fractalCanvas.addEventListener("mouseleave",(e)=>{
 			zoomPreviewElement.hide();
 			statusbar.mouseInfo = "";
+			mouseOn = false;
 		});
 		this._width = 960;
 		this._height = 720;
diff --git a/explorer/FractalZoomPreview.js b/explorer/FractalZoomPreview.js
index 9696cdd..5b91f68 100644
--- a/explorer/FractalZoomPreview.js
+++ b/explorer/FractalZoomPreview.js
@@ -24,6 +24,8 @@ export default class FractalZoomPreview extends HTMLElement {
 				canvas {
 					width: 100%;
 					height: 100%;
+					image-rendering: pixelated;
+					image-rendering: crisp-edges;
 				}
 			</style>
 			<canvas></canvas>
@@ -36,15 +38,21 @@ export default class FractalZoomPreview extends HTMLElement {
 	}
 
 	setPosition(x,y,zoom=this._zoom){
+		this._x = x;
+		this._y = y;
 		this.zoom = zoom;
 		this.style.left = x+"px";
 		this.style.top = y+"px";
-		let width = this._targetCanvas.width/zoom;
-		let height = this._targetCanvas.height/zoom;
+		this.update();
+	}
+
+	update(){
+		let width = this._targetCanvas.width/this._zoom;
+		let height = this._targetCanvas.height/this._zoom;
 		this._previewCanvas.width = width;
 		this._previewCanvas.height = height;
-		let pixelOffsetX = Math.round(x*this._targetCanvas.width/this.parentElement.offsetWidth-width/2);
-		let pixelOffsetY = Math.round(y*this._targetCanvas.height/this.parentElement.offsetHeight-height/2);
+		let pixelOffsetX = Math.round(this._x*this._targetCanvas.width/this.parentElement.offsetWidth-width/2);
+		let pixelOffsetY = Math.round(this._y*this._targetCanvas.height/this.parentElement.offsetHeight-height/2);
 		this._previewCtx.putImageData(this._targetCtx.getImageData(pixelOffsetX,pixelOffsetY,width,height),0,0);
 	}