src/App.vue

@@ -18,7 +18,7 @@
   import MainMenu from "./components/MainMenu.vue";
   import CanvasBoard from "./components/CanvasBoard.vue";
   import MenuReset from "./components/MenuReset.vue";
-  import { mapState, mapWritableState, mapActions } from "pinia";
+  import { mapWritableState, mapActions } from "pinia";
   import { globalStore } from "./stores/index.js";
 
   export default {
@@ -30,12 +30,15 @@
     },
     data() {
       return {
+        mainMenu: false,
         windowWidth: window.innerWidth,
       };
     },
     computed: {
-      ...mapState(globalStore, ["mainMenu", "activeSubMenu"]),
+      ...mapWritableState(globalStore, {
-      ...mapWritableState(globalStore, ["canvasWidth", "canvasHeight"]),
+        canvasWidth: "canvasWidth",
+        canvasHeight: "canvasHeight",
+      }),
     },
     mounted() {
       this.$nextTick(() => {
@@ -46,13 +49,9 @@
       window.removeEventListener("resize", this.onResize);
     },
     methods: {
-      ...mapActions(globalStore, [
+      ...mapActions(globalStore, ["setBoardWidth", "setBoardHeight"]),
-        "setBoardWidth",
-        "setBoardHeight",
-        "setMainMenu",
-      ]),
       toggleMainMenu() {
-        this.setMainMenu(!this.mainMenu);
+        this.mainMenu = !this.mainMenu;
       },
       onResize() {
         this.$nextTick(() => {

src/components/CanvasBoard.vue

@@ -1,13 +1,7 @@
 <template>
   <canvas
-    id="board-canvas"
+    id="canvas-board"
-    ref="board-canvas"
+    ref="canvas-board"
-    :width="canvasWidth"
-    :height="canvasHeight"
-  />
-  <canvas
-    id="work-canvas"
-    ref="work-canvas"
     :width="canvasWidth"
     :height="canvasHeight"
   />
@@ -24,15 +18,12 @@
     evolve2d,
   } from "../modules/automata.js";
   import { getRandomInt, sleep } from "../modules/common.js";
-  import { picToBoard, picToBlackAndWhite } from "../modules/picture.js";
 
   export default {
     name: "CanvasBoard",
     data() {
       return {
         canvas: null,
-        workCanvas: null,
-        workCtx: null,
         ctx: null,
       };
     },
@@ -81,11 +72,8 @@
       },
     },
     mounted() {
-      this.canvas = Object.freeze(document.getElementById("board-canvas"));
+      this.canvas = Object.freeze(document.getElementById("canvas-board"));
-      this.workCanvas = Object.freeze(document.getElementById("work-canvas"));
       this.ctx = this.canvas.getContext("2d");
-      this.workCtx = this.workCanvas.getContext("2d");
-      this.workCanvas.setAttribute("willReadFrequently", true);
       this.canvasWidth = this.canvas.parentElement.clientWidth;
       this.canvasHeight = this.canvas.parentElement.clientHeight;
       this.setBoardWidth();
@@ -126,7 +114,7 @@
         const initialState = this.compute1dInitialState();
         const board = createBoard(initialState, this.ruleset.rules, this.max);
         this.lastBoard = Object.freeze(board);
-        this.drawCanvas(this.lastBoard);
+        this.drawCanvas(board);
         this.toggleStop();
       },
       // draw 2D automaton on the canvas (currently only the game of life)
@@ -157,55 +145,17 @@
       draw2dLast() {
         if (this.lastBoard != undefined) this.draw2d(this.lastBoard);
       },
-      // draw 2d automaton from an uploaded picture.
+      // draw 2d automaton from an uploaded picture
-      // use the picture representation as an initial state
+      draw2dPicture(e) {
-      draw2dPicture() {
+        this.picture.width = this.canvas.width;
-        // get image data by drawing it on a work canvas
+        this.picture.height = this.canvas.height;
-        this.workCtx.drawImage(
+        this.ctx.drawImage(
           this.picture,
           0,
           0,
-          this.canvasWidth,
+          this.canvas.width,
-          this.canvasHeight
+          this.canvas.height
         );
-        const imgData = this.workCtx.getImageData(
-          0,
-          0,
-          this.canvasWidth,
-          this.canvasHeight
-        );
-
-        // convert the image to black and white
-        const black = picToBlackAndWhite(
-          imgData.data,
-          this.canvasWidth,
-          this.canvasHeight
-        );
-
-        // draw it back on the canvas
-        this.ctx.putImageData(black, 0, 0);
-
-        // draw the image back on the work canvas with the dimensions of the board
-        this.workCtx.drawImage(
-          this.picture,
-          0,
-          0,
-          this.boardWidth,
-          this.boardHeight
-        );
-
-        const resized = this.workCtx.getImageData(
-          0,
-          0,
-          this.boardWidth,
-          this.boardHeight
-        );
-
-        // convert the resized image into a 2D board of boolean based on pixel value
-        this.lastBoard = Object.freeze(
-          picToBoard(resized.data, this.boardWidth, this.boardHeight)
-        );
-
         this.toggleStop();
       },
       // stop drawing routines and clear the canvas

src/components/MainMenu.vue

@@ -1,9 +1,9 @@
 <template>
   <div id="main-menu">
-    <MenuGeneralOptions />
+    <MenuGeneralOptions :active="active" @update-active="updateActive" />
-    <MenuCellProperties />
+    <MenuCellProperties :active="active" @update-active="updateActive" />
-    <MenuElementaryCA />
+    <MenuElementaryCA :active="active" @update-active="updateActive" />
-    <Menu2dCA />
+    <Menu2dCA :active="active" @update-active="updateActive" />
   </div>
 </template>
 
@@ -20,6 +20,21 @@
       MenuElementaryCA,
       Menu2dCA,
     },
+    data() {
+      return {
+        active: "",
+      };
+    },
+    methods: {
+      // set the opened submenu. If already active, reset it so it can close
+      updateActive(menu) {
+        if (menu === this.active) {
+          this.active = "";
+        } else {
+          this.active = menu;
+        }
+      },
+    },
   };
 </script>
 
@@ -28,6 +43,7 @@
     display: flex;
     flex-direction: row;
     width: 100%;
+
     flex: 1;
   }
 

src/components/MenuCellProperties.vue

@@ -34,11 +34,11 @@
 </template>
 
 <script>
-  import { mapActions, mapWritableState } from "pinia";
+  import { mapWritableState } from "pinia";
   import { globalStore } from "../stores/index.js";
   import MenuRow from "./MenuRow.vue";
   export default {
-    name: "MenuCellProperties",
+    name: "MainMenu",
     components: {
       MenuRow,
     },
@@ -46,7 +46,6 @@
       ...mapWritableState(globalStore, ["cellProperties"]),
     },
     methods: {
-      ...mapActions(globalStore, ["setBoardHeight", "setBoardWidth"]),
       getCellProperties(event) {
         const elem = event.target;
         const prop = this.cellProperties;
@@ -55,8 +54,6 @@
       updateCellProperties(event) {
         const elem = event.target;
         this.cellProperties[elem.name] = elem.value;
-        this.setBoardWidth();
-        this.setBoardHeight();
       },
     },
   };

src/components/MenuRow.vue

@@ -1,17 +1,19 @@
 <template>
   <div class="menu-row">
-    <h2 :id="rowTitle" @click.stop="storeActiveSubMenu">
+    <h2 :id="rowTitle" @click="$emit('update-active', rowTitle)">
       {{ rowTitle }}
     </h2>
-    <div v-if="isActive" ref="content" class="menu-row-content">
+    <div
+      v-if="isActive"
+      class="menu-row-content"
+      @mouseleave="$emit('update-active', '')"
+    >
       <slot />
     </div>
   </div>
 </template>
 
 <script>
-  import { mapActions, mapState } from "pinia";
-  import { globalStore } from "../stores/index.js";
   export default {
     name: "MenuRow",
     props: {
@@ -19,38 +21,15 @@
         type: String,
         default: "",
       },
+      active: {
+        type: String,
+        default: "",
       },
+    },
+    emits: ["update-active"],
     computed: {
-      ...mapState(globalStore, ["activeSubMenu"]),
       isActive() {
-        return this.rowTitle == this.activeSubMenu;
+        return this.rowTitle == this.active;
-      },
-    },
-    beforeUnmount() {
-      window.removeEventListener("click", this.onWindowClick);
-    },
-    methods: {
-      ...mapActions(globalStore, ["setActiveSubMenu", "toggleMainMenu"]),
-      onKeyDown: function (event) {
-        // escape
-        if (event.keyCode == 27) {
-          this.setActiveSubMenu("");
-        }
-      },
-      storeActiveSubMenu() {
-        window.addEventListener("click", this.onWindowClick);
-        this.setActiveSubMenu(this.rowTitle);
-      },
-      // hides submenu when click is detected outside from it
-      onWindowClick(event) {
-        const form = this.$refs.content;
-        if (form != null) {
-          if (!form.contains(event.target)) {
-            this.setActiveSubMenu("");
-            this.setMainMenu(false);
-          }
-          return;
-        }
       },
     },
   };

src/modules/picture.js

@@ -1,39 +0,0 @@
-// https://stackoverflow.com/questions/4492385/convert-simple-array-into-two-dimensional-array-matrix
-// convert a 1D array into a 2D matrix
-export function toMatrix(array, width) {
-  return array.reduce(
-    (rows, key, index) =>
-      (index % width == 0
-        ? rows.push([key])
-        : rows[rows.length - 1].push(key)) && rows,
-    []
-  );
-}
-
-// convert an image into a black and white image
-export function picToBlackAndWhite(pixels, width, height) {
-  return pixels.reduce((acc, pixel, index) => {
-    if (index % 4 == 0) {
-      const count = pixels[index] + pixels[index + 1] + pixels[index + 2];
-      const colour = count >= 255 ? 255 : 1;
-      acc.data[index] = colour;
-      acc.data[index + 1] = colour;
-      acc.data[index + 2] = colour;
-      acc.data[index + 3] = 255;
-    }
-    return acc;
-  }, new ImageData(width, height));
-}
-
-// convert an ImageData into a 2D array of boolean (0, 1) values
-export function picToBoard(pixels, width, height) {
-  const flat = pixels.reduce((acc, pixel, index) => {
-    if (index % 4 == 0) {
-      const count = pixels[index] + pixels[index + 1] + pixels[index + 2];
-      const value = count >= 255 ? 1 : 0;
-      acc.push(value);
-    }
-    return acc;
-  }, []);
-  return toMatrix(flat, Math.max(width, height));
-}

src/stores/index.js

@@ -36,8 +36,6 @@ export const globalStore = defineStore("globalStore", {
       reset: false,
       canDraw: true,
       picture: null,
-      mainMenu: false,
-      activeSubMenu: "",
     };
   },
   actions: {
@@ -50,25 +48,20 @@ export const globalStore = defineStore("globalStore", {
       );
     },
     toggleDraw1d() {
-      this.setActiveSubMenu("");
-      this.setMainMenu(false);
       this.draw1d = true;
     },
     toggleDraw2d() {
-      this.setActiveSubMenu("");
-      this.setMainMenu(false);
       this.toggleStop();
       this.canDraw = true;
       this.draw2d = true;
     },
     toggleDraw2dLast() {
-      this.setActiveSubMenu("");
-      this.setMainMenu(false);
       this.toggleStop();
       this.canDraw = true;
       this.draw2dLast = true;
     },
     toggle2dDrawFromPicture() {
+      console.log("toggleDraw2dFromPicture");
       this.toggleStop();
       this.canDraw = true;
       this.draw2dpicture = true;
@@ -84,12 +77,5 @@ export const globalStore = defineStore("globalStore", {
       this.draw2dpicture = false;
       this.canDraw = false;
     },
-    setActiveSubMenu(data) {
-      if (this.activeSubMenu == data) this.activeSubMenu = "";
-      else this.activeSubMenu = data;
-    },
-    setMainMenu(data) {
-      this.mainMenu = data;
-    },
   },
 });