Separate painter from display

src/main/js/Display.ts

@@ -6,46 +6,72 @@ const height: number = 100;
 
 
 export class Display {
-    private readonly scale: number = 15;
-
     private readonly canvas: HTMLCanvasElement;
-    private readonly primeMath: PrimeMath;
+
+    private _painter: Painter | undefined = undefined;
+    public set painter(painter: Painter) {
+        this._painter = painter;
+        this.reloadPainter();
+    }
+
+    private isDrawing: boolean = false;
 
 
     constructor(canvas: HTMLCanvasElement) {
         this.canvas = canvas;
-        this.canvas.width = this.scale * width;
-        this.canvas.height = this.scale * height;
-
-        this.primeMath = CachedPrimeMath.getInstance();
+        this.reloadPainter();
     }
 
 
     public startDrawLoop(): void {
+        if (this.isDrawing) return;
+
         const cb = () => {
-            this.draw();
+            if (!this.isDrawing) return;
+
+            this._painter?.draw(this.canvas);
             window.requestAnimationFrame(cb);
         };
+
+        this.isDrawing = true;
         window.requestAnimationFrame(cb);
     }
 
-
-    private draw(): void {
-        const ctx = this.canvas.getContext("2d")!;
-
-        this.clearCanvas(ctx);
-        this.drawGrid(ctx);
-        this.drawPrimes(ctx);
+    public stopDrawLoop(): void {
+        this.isDrawing = false;
     }
 
-    private clearCanvas(ctx: CanvasRenderingContext2D): void {
+
+    public reloadPainter(): void {
+        this.canvas.width = this._painter?.getWidth() ?? 1;
+        this.canvas.height = this._painter?.getHeight() ?? 1;
+    }
+}
+
+
+export interface Painter {
+    draw(canvas: HTMLCanvasElement): void;
+
+    getWidth(): number;
+
+    getHeight(): number;
+}
+
+export class GridPainter implements Painter {
+    private readonly scale: number = 15;
+    private readonly primeMath: PrimeMath = CachedPrimeMath.getInstance();
+
+
+    draw(canvas: HTMLCanvasElement): void {
+        const ctx = canvas.getContext("2d")!;
+
+        // Clear canvas
         ctx.save();
         ctx.fillStyle = "#ffffff";
-        ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
         ctx.restore();
-    }
 
-    private drawGrid(ctx: CanvasRenderingContext2D): void {
+        // Draw grid
         ctx.save();
         ctx.beginPath();
         ctx.strokeStyle = "#7b7b7b";
@@ -59,9 +85,8 @@ export class Display {
         }
         ctx.stroke();
         ctx.restore();
-    }
 
-    private drawPrimes(ctx: CanvasRenderingContext2D): void {
+        // Draw primes
         ctx.save();
         ctx.fillStyle = "#ff0000";
         for (let i = 1; i <= width * height; i++) {
@@ -70,4 +95,12 @@ export class Display {
         }
         ctx.restore();
     }
+
+    getWidth(): number {
+        return this.scale * width;
+    }
+
+    getHeight(): number {
+        return this.scale * height;
+    }
 }

src/main/js/Main.ts

@@ -1,7 +1,7 @@
 // @ts-ignore
 const {$, doAfterLoad, footer, header, nav} = window.fwdekker;
 
-import {Display} from "./Display";
+import {Display, GridPainter} from "./Display";
 
 
 // Set up template
@@ -24,5 +24,6 @@ doAfterLoad(async () => {
     canvas.classList.remove("invisible");
 
     const display = new Display(canvas);
+    display.painter = new GridPainter();
     display.startDrawLoop();
 });