Pass Layout instance into Renderer

dialupdev · Jan 15, 2024 · 6283455 · 6283455
1 parent c5f2365
commit 6283455
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 25 deletions.
diff --git a/src/core/Playback.ts b/src/core/Playback.ts
@@ -1,12 +1,10 @@
 import { Config } from "../core/Config";
-import { Layout } from "../core/Layout";
 import { Renderer } from "../core/Renderer";
 import { World } from "../core/World";
 
 export class Playback {
   private _config: Config;
   private _world: World;
-  private _layout: Layout;
   private _renderer: Renderer;
   private _lastFrameTime!: number;
   private _currentTime!: number;
@@ -15,10 +13,9 @@ export class Playback {
 
   public playing = false;
 
-  constructor(config: Config, world: World, layout: Layout, renderer: Renderer) {
+  constructor(config: Config, world: World, renderer: Renderer) {
     this._config = config;
     this._world = world;
-    this._layout = layout;
     this._renderer = renderer;
 
     this.tickLazy = this.tickLazy.bind(this);
@@ -51,7 +48,7 @@ export class Playback {
 
   private _tick(): void {
     this._world.tick(this._config);
-    this._renderer.update(this._layout, this._world);
+    this._renderer.update(this._world);
   }
 
   private _tickRecursive(): void {

diff --git a/src/core/Renderer.ts b/src/core/Renderer.ts
@@ -2,39 +2,41 @@ import { Layout } from "./Layout";
 import { World } from "./World";
 
 export class Renderer {
+  private _layout: Layout;
   private _context: CanvasRenderingContext2D;
   private _color: string;
 
-  constructor(context: CanvasRenderingContext2D, color: string) {
+  constructor(layout: Layout, context: CanvasRenderingContext2D, color: string) {
+    this._layout = layout;
     this._context = context;
     this._color = color;
   }
 
-  public update(layout: Layout, world: World): void {
-    this._clear(layout);
+  public update(world: World): void {
+    this._clear();
     this._context.fillStyle = this._color;
 
     world.cells.forEach(cell => {
-      this._drawCell(layout, cell.x, cell.y);
+      this._drawCell(cell.x, cell.y);
     });
   }
 
-  private _drawCell(layout: Layout, world_x: number, world_y: number): void {
-    const pixelRatio = layout.pixelRatio;
-    const actualCellSize = layout.naturalCellSize * layout.zoomScale;
+  private _drawCell(world_x: number, world_y: number): void {
+    const pixelRatio = this._layout.pixelRatio;
+    const actualCellSize = this._layout.naturalCellSize * this._layout.zoomScale;
 
     this._context.fillRect(
-      pixelRatio * actualCellSize * world_x + pixelRatio * layout.offsetX,
-      pixelRatio * actualCellSize * world_y + pixelRatio * layout.offsetY,
+      pixelRatio * actualCellSize * world_x + pixelRatio * this._layout.offsetX,
+      pixelRatio * actualCellSize * world_y + pixelRatio * this._layout.offsetY,
       pixelRatio * actualCellSize,
       pixelRatio * actualCellSize
     );
   }
 
-  private _clear(layout: Layout): void {
-    const [canvasWidth, canvasHeight] = layout.getCanvasSize();
+  private _clear(): void {
+    const [canvasWidth, canvasHeight] = this._layout.getCanvasSize();
 
     this._context.fillStyle = "#fff";
-    this._context.fillRect(0.0, 0.0, canvasWidth * layout.pixelRatio, canvasHeight * layout.pixelRatio);
+    this._context.fillRect(0.0, 0.0, canvasWidth * this._layout.pixelRatio, canvasHeight * this._layout.pixelRatio);
   }
 }
diff --git a/src/main.ts b/src/main.ts
@@ -27,8 +27,8 @@ canvas.style.left = `${SIDEBAR_WIDTH}px`;
 const config = new Config();
 const world = new World();
 const layout = new Layout(canvas, PIXEL_RATIO, NATURAL_CELL_SIZE);
-const renderer = new Renderer(context, "#A76FDE");
-const playback = new Playback(config, world, layout, renderer);
+const renderer = new Renderer(layout, context, "#A76FDE");
+const playback = new Playback(config, world, renderer);
 const library = new Library(world);
 
 const configStore = new ConfigStore(config, playback);

diff --git a/src/stores/LayoutStore.ts b/src/stores/LayoutStore.ts
@@ -41,12 +41,12 @@ export class LayoutStore {
     this._canvas.style.width = `${width}px`;
     this._canvas.style.height = `${height}px`;
 
-    this._renderer.update(this._layout, this._world); // make this lazy
+    this._renderer.update(this._world); // make this lazy
   }
 
   public translateOffset(deltaX: number, deltaY: number): void {
     this._layout.translateOffset(deltaX, deltaY);
-    this._renderer.update(this._layout, this._world); // make this lazy
+    this._renderer.update(this._world); // make this lazy
   }
 
   public panInDirection(direction: PanDirection): void {
@@ -79,15 +79,15 @@ export class LayoutStore {
 
     this._setZoomScaleTruncated(scale);
 
-    this._renderer.update(this._layout, this._world); // make this lazy
+    this._renderer.update(this._world); // make this lazy
   }
 
   public zoomByStep(direction: ZoomDirection): void {
     const scale = this._layout.zoomByStep(direction);
 
     this._setZoomScaleTruncated(scale);
 
-    this._renderer.update(this._layout, this._world); // make this lazy
+    this._renderer.update(this._world); // make this lazy
   }
 
   public zoomAt(delta: number, windowX: number, windowY: number): void {
@@ -101,15 +101,15 @@ export class LayoutStore {
 
     this._setZoomScaleTruncated(scale);
 
-    this._renderer.update(this._layout, this._world); // make this lazy
+    this._renderer.update(this._world); // make this lazy
   }
 
   public zoomToFit(): void {
     const scale = this._layout.zoomToFit(this._world);
 
     this._setZoomScaleTruncated(scale);
 
-    this._renderer.update(this._layout, this._world); // make this lazy
+    this._renderer.update(this._world); // make this lazy
   }
 
   private _setZoomScaleTruncated(zoomScale: number): void {