made zoom preview update even when mouse isn't moving

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(){

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;

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);
 	}