test load picture on canvas

src/components/CanvasBoard.vue

@@ -38,8 +38,10 @@
         getDraw1d: "draw1d",
         getDraw2d: "draw2d",
         getDraw2dLast: "draw2dLast",
+        getDraw2dPicture: "draw2dpicture",
         boardWidth: "boardWidth",
         boardHeight: "boardHeight",
+        picture: "picture",
       }),
       ...mapWritableState(globalStore, {
         lastBoard: "lastBoard",
@@ -62,6 +64,9 @@
       getDraw2dLast(value) {
         if (value == true) this.draw2dLast();
       },
+      getDraw2dPicture(value) {
+        if (value == true) this.draw2dPicture();
+      },
       getReset(value) {
         if (value == true) this.reset();
       },
@@ -137,9 +142,22 @@
         this.draw2d(board);
       },
       // draw 2d automaton from the last known generated board
-      async draw2dLast() {
+      draw2dLast() {
         if (this.lastBoard != undefined) this.draw2d(this.lastBoard);
       },
+      // draw 2d automaton from an uploaded picture
+      draw2dPicture(e) {
+        this.picture.width = this.canvas.width;
+        this.picture.height = this.canvas.height;
+        this.ctx.drawImage(
+          this.picture,
+          0,
+          0,
+          this.canvas.width,
+          this.canvas.height
+        );
+        this.toggleStop();
+      },
       // stop drawing routines and clear the canvas
       reset() {
         this.toggleStop();

src/components/Menu2dCA.vue

@@ -15,14 +15,14 @@
     </div>
     <div class="form-field">
       <label>Start from picture</label><br />
-      <input type="file" @change="previewFile" />
+      <input type="file" @change="preparePicture" />
-      <input type="button" value="start" @click="toggleDraw2dLast()" />
+      <input type="button" value="start" @click="toggle2dDrawFromPicture()" />
     </div>
   </MenuRow>
 </template>
 
 <script>
-  import { mapActions } from "pinia";
+  import { mapActions, mapWritableState } from "pinia";
   import MenuRow from "./MenuRow.vue";
   import { globalStore } from "../stores/index.js";
 
@@ -31,10 +31,38 @@
     components: {
       MenuRow,
     },
+    data() {
+      return {
+        uploadedFile: "",
+      };
+    },
+    computed: {
+      ...mapWritableState(globalStore, ["picture"]),
+    },
     methods: {
-      ...mapActions(globalStore, ["toggleDraw2dLast", "toggleDraw2d"]),
+      ...mapActions(globalStore, [
-      previewFile(event) {
+        "toggleDraw2dLast",
-        console.log(event.target.files);
+        "toggleDraw2d",
+        "toggle2dDrawFromPicture",
+      ]),
+      preparePicture(event) {
+        const files = event.target.files;
+        this.picture = new Image();
+        this.picture.width = this.canvasWidth;
+        if (FileReader && files && files.length) {
+          const reader = new FileReader();
+
+          reader.onload = () => {
+            this.picture.src = reader.result;
+            this.toggle2dDrawFromPicture();
+          };
+
+          reader.onerror = () => {
+            console.log(reader.error);
+          };
+
+          reader.readAsDataURL(files[0]);
+        }
       },
     },
   };

src/components/MenuElementaryCA.vue

@@ -1,6 +1,14 @@
 <template>
   <MenuRow row-title="Elementary Automaton">
     <form>
+      <div class="form-field">
+        <input
+          type="button"
+          name="start"
+          value="start"
+          @click="toggleDraw1d()"
+        />
+      </div>
       <div class="form-field">
         <label>
           Initial state presets
@@ -62,9 +70,6 @@
         </label>
       </div>
     </form>
-    <div class="form-field">
-      <input type="button" name="start" value="start" @click="toggleDraw1d()" />
-    </div>
   </MenuRow>
 </template>
 

src/components/MenuRow.vue

@@ -3,7 +3,11 @@
     <h2 :id="rowTitle" @click="$emit('update-active', rowTitle)">
       {{ rowTitle }}
     </h2>
-    <div v-if="isActive" class="menu-row-content">
+    <div
+      v-if="isActive"
+      class="menu-row-content"
+      @mouseleave="$emit('update-active', '')"
+    >
       <slot />
     </div>
   </div>

src/stores/index.js

@@ -32,8 +32,10 @@ export const globalStore = defineStore("globalStore", {
       draw1d: false,
       draw2d: false,
       draw2dLast: false,
+      draw2dpicture: false,
       reset: false,
       canDraw: true,
+      picture: null,
     };
   },
   actions: {
@@ -58,6 +60,12 @@ export const globalStore = defineStore("globalStore", {
       this.canDraw = true;
       this.draw2dLast = true;
     },
+    toggle2dDrawFromPicture() {
+      console.log("toggleDraw2dFromPicture");
+      this.toggleStop();
+      this.canDraw = true;
+      this.draw2dpicture = true;
+    },
     toggleReset() {
       this.toggleStop();
       this.reset = true;
@@ -66,6 +74,7 @@ export const globalStore = defineStore("globalStore", {
       this.draw1d = false;
       this.draw2d = false;
       this.draw2dLast = false;
+      this.draw2dpicture = false;
       this.canDraw = false;
     },
   },