renderer module

src/components/CanvasBoard.vue

@@ -15,16 +15,9 @@
     create1dInitialState,
     create2dRandomGrid,
   } from "../modules/board.js";
-  import { boardToPic, picToBoard } from "../modules/picture.js";
 
   const store = globalStore();
 
-  // TODO: Do we really need to declare a work canvas in this scope?
-  // Do we really need to declare a canvas here at all?
-  let canvas = null;
-  let workCanvas = null;
-  let workCtx = null;
-  let ctx = null;
   const available2dRules = {
     conway: conwayRules,
     overpopulation: overpopulationRules,
@@ -35,6 +28,7 @@
   };
 
   // used to determine the dimensions of the board
+  // TODO: should be a Board method
   const max = () => {
     return Math.max(store.board.width, store.board.height);
   };
@@ -79,31 +73,28 @@
   );
 
   onMounted(() => {
-    canvas = Object.freeze(document.getElementById("board-canvas"));
-    workCanvas = Object.freeze(document.getElementById("work-canvas"));
-    ctx = canvas.getContext("2d", { willReadFrequently: true });
-    workCtx = workCanvas.getContext("2d", {
+    // TODO : butt ugly.
+    const canvas = document.getElementById("board-canvas");
+    store.renderer.width = canvas.parentElement.clientWidth;
+    store.renderer.height = canvas.parentElement.clientHeight;
+    store.renderer.canvas = canvas;
+    store.renderer.ctx = store.renderer.canvas.getContext("2d", {
+      willReadFrequently: true,
+    });
+    store.renderer.workCanvas = new OffscreenCanvas(
+      canvas.parentElement.clientWidth,
+      canvas.parentElement.clientHeight
+    );
+    store.renderer.workCtx = store.renderer.workCanvas.getContext("2d", {
       willReadFrequently: true,
     });
-    store.canvasWidth = canvas.parentElement.clientWidth;
-    store.canvasHeight = canvas.parentElement.clientHeight;
     store.setBoardWidth();
     store.setBoardHeight();
   });
 
   // draws the board on the canvas
   const drawCanvas = async (board) => {
-    const d = board.cellProperties.size;
-    // bool to RGBA colors
-    const img = await boardToPic(board);
-    // rescale and draw
-    ctx.save();
-    ctx.clearRect(0, 0, store.canvasWidth, store.canvasHeight);
-    workCtx.putImageData(img, 0, 0);
-    ctx.imageSmoothingEnabled = false;
-    ctx.scale(d, d);
-    ctx.drawImage(workCanvas, 0, 0, store.canvasWidth, store.canvasHeight);
-    ctx.restore();
+    store.renderer.render(board);
   };
 
   // draw elementary automaton on the canvas based on selected ruleset
@@ -159,47 +150,18 @@
   // draw 2d automaton from an uploaded picture.
   // use the picture representation as an initial state
   const draw2dPicture = () => {
-    // draw image on canvas
-    ctx.fillStyle = "black";
-    ctx.fillRect(0, 0, store.canvasWidth, store.canvasHeight);
-    ctx.drawImage(
+    store.renderer.renderImage(store.picture);
+    const newBoard = store.renderer.getResizedImageData(
       store.picture,
-      Math.floor((store.canvasWidth - store.picture.width) / 2),
-      Math.floor((store.canvasHeight - store.picture.height) / 2),
-      store.picture.width,
-      store.picture.height
+      store.board
     );
-
-    // draw the image back on the work canvas with the dimensions of the board
-    workCtx.drawImage(
-      store.picture,
-      0,
-      0,
-      store.board.width,
-      store.board.height
-    );
-
-    // get the resized image data from work canvas
-    const resized = workCtx.getImageData(
-      0,
-      0,
-      store.board.width,
-      store.board.height
-    );
-
-    // convert the image into a 2D board of boolean based on pixel value
-    store.board.grid = Object.freeze(
-      picToBoard(resized.data, store.board.width, store.board.height)
-    );
-
-    store.toggleStop();
+    store.board.grid = Object.freeze(newBoard);
   };
 
-  // stop drawing routines and clear the canvas
   const reset = () => {
     store.toggleStop();
     store.board.grid = null;
-    ctx.clearRect(0, 0, store.canvasWidth, store.canvasHeight);
+    store.renderer.reset();
     store.reset = false;
   };
 </script>
@@ -207,14 +169,8 @@
   <canvas
     id="board-canvas"
     ref="board-canvas"
-    :width="store.canvasWidth"
-    :height="store.canvasHeight"
-  />
-  <canvas
-    id="work-canvas"
-    ref="work-canvas"
-    :width="store.canvasWidth"
-    :height="store.canvasHeight"
+    :width="store.renderer.width"
+    :height="store.renderer.height"
   />
 </template>
 <style>