drawing logic back into component

src/store/index.js

@@ -8,25 +8,14 @@ rules:
 confusion bewteen ruleset and rules. 
 it's never clear if we refers to a rule or the whole (named) set
 */
-import { createStore } from 'vuex'
-import {
-  create1dState,
-  create1dStateOneCell,
-  create2dState,
-  createBoard,
-  conwayRules,
-  evolve2d,
-} from "../modules/automata.js";
-import { getRandomInt, sleep } from "../modules/common.js";
+import { createStore } from "vuex";
 
 export const store = createStore({
-  strict: process.env.NODE_ENV !== 'production',
+  strict: process.env.NODE_ENV !== "production",
   state: {
-    drawing: 0,
     rules1d: {
       name: "rule 73",
-      rules:
-      {
+      rules: {
         111: 0,
         110: 1,
         101: 0,
@@ -35,15 +24,13 @@ export const store = createStore({
         "010": 0,
         "001": 0,
         "000": 1,
-      }
+      },
     },
     cellProperties: {
       size: 3,
       liveColor: "#000000",
       deadColor: "#F5F5F5",
     },
-    canvas: null,
-    ctx: null,
     canvasWidth: 0,
     canvasHeight: 0,
     boardWidth: 0,
@@ -53,10 +40,11 @@ export const store = createStore({
     activeMenu: "",
     drawingDirection: "y",
     lastBoard: {},
+    isDrawing1d: false,
   },
   mutations: {
     update1dSingleRule(state, data) {
-      state.rules1d.name = data.name
+      state.rules1d.name = data.name;
       state.rules1d.rules[data.rule] = data.value;
     },
     update1dRules(state, data) {
@@ -65,9 +53,6 @@ export const store = createStore({
     setCellProperties(state, data) {
       state.cellProperties[data.name] = data.value;
     },
-    setDrawingStatus(state, data) {
-      state.drawing = data;
-    },
     setCanvasWidth(state, data) {
       state.canvasWidth = data;
     },
@@ -90,18 +75,13 @@ export const store = createStore({
       state.lastBoard = data;
     },
     setCanvas(state, data) {
-      state.canvas = data
+      state.canvas = data;
     },
     setContext(state, data) {
-      state.ctx = data
+      state.ctx = data;
     },
-    setBoardWidth(state) {
-      const width = Math.floor(state.canvasWidth / state.cellProperties.size);
-      state.boardWidth = width
-    },
-    setBoardHeight(state) {
-      const height = Math.floor(state.canvasHeight / state.cellProperties.size);
-      state.boardHeight = height
+    setIsDrawing1d(state, data) {
+      state.isDrawing1d = data;
     },
   },
   getters: {
@@ -115,9 +95,6 @@ export const store = createStore({
       // getter with side-effect. no work
       return state.rules1d;
     },
-    isDrawing(state) {
-      return state.drawing;
-    },
     getCanvasWidth(state) {
       return state.canvasWidth;
     },
@@ -139,85 +116,18 @@ export const store = createStore({
     getLastBoard(state) {
       return state.lastBoard;
     },
+    getIsDrawing1d(state) {
+      return state.isDrawing1d;
+    },
   },
   actions: {
-    async drawCanvas({state}, board) {
-      /** Draw the board on the canvas according to the
-          cells' properties and drawing direction */
-      const props = state.cellProperties
-      board.map((row, y) => {
-        const d = props.size;
-        return row.map((cell, x) => {
-          state.ctx.fillStyle = (() => {
-            if (cell === 1) return props.liveColor;
-            return props.deadColor;
-          })();
-          if (state.drawingDirection === "x")
-            state.ctx.fillRect(y * d, x * d, d, d);
-          else state.ctx.fillRect(x * d, y * d, d, d);
-          return cell;
-        });
-      });
-    },
-    async compute1dInitialState({state}) {
-      /** 
-          create the initial state for an elementary automaton based :
-          - on the selected board dimensions 
-          - if we want to start from a single cell or several random ones 
-      */
-      if (state.initial1dState === "onecell")
-        return create1dStateOneCell(state.canvasWidth);
-      return create1dState(state.canvasWidth, getRandomInt, [0, 2]);
-    },
-    async draw1d({state, commit, dispatch}) {
-      /** draw an elementary cellular automaton from an initial state and
-         a set of rules */
-      const initialState = await dispatch("compute1dInitialState")
-      const board = createBoard(initialState, state.rules1d.rules, state.boardWidth);
-      commit("setLastBoard", board);
-      await dispatch("drawCanvas", board);
-    },
-    async draw2d({state, dispatch}, board) {
-      /** draw a 2D cellular automaton from an initial state and
-         a set of rules */
-      if (this.drawing === 0) return;
-
-      const draw2dNext = async (b) => {
-        if (state.drawing === 0) return;
-        const newBoard = evolve2d(b, conwayRules);
-        dispatch("drawCanvas", b, this.cellProperties);
-        await sleep(this.refreshRate);
-        draw2dNext(newBoard);
-      };
-      return draw2dNext(board);
-    },
-    async draw2dNew({state, commit, dispatch}) {
-      /** draw a 2d cellular automaton from a random initial state
-         and a set of rules */
-      const initialState = create2dState(
-        state.boardWidth,
-        state.boardHeight,
-        getRandomInt,
-        [0, 2]
-      );
-      const board = evolve2d(initialState, conwayRules);
-      commit("setLastBoard", board);
-      await dispatch("draw2d", board);
-    },
-    async draw2dLast({state, dispatch}) {
-      /** draw a 2d cellular automaton from the latest known state
-         of the board and a set of rules */
-      await dispatch("draw2d", state.lastBoard);
+    draw1d({ commit }) {
+      commit("setIsDrawing1d", 1);
     },
     stop({ commit }) {
-      /** stop currently running drawing routine */
-      commit("setDrawingStatus", 0);
+      commit("setIsDrawing1d");
+      // commit("setIsDrawing2d")
     },
-    reset({state, dispatch}) {
-      /** stop currently running drawing routine and clear the board */
-      dispatch("stop");
-      state.ctx.clearRect(0, 0, state.canvasWidth, state.canvasHeight);
-    }
   },
   modules: {},
 });