From 9b83b88c549240fae76ae9199a616d16753bae75 Mon Sep 17 00:00:00 2001
From: Gator <gator@ariona.fr>
Date: Sat, 10 Dec 2022 10:45:34 +0100
Subject: [PATCH 1/2] submenu closes when click outside

---
 src/components/MainMenu.vue           | 24 +++------------
 src/components/MenuCellProperties.vue |  2 +-
 src/components/MenuRow.vue            | 42 +++++++++++++++++++++------
 src/stores/index.js                   |  8 +++++
 4 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/src/components/MainMenu.vue b/src/components/MainMenu.vue
index b5c7f27..53a65bc 100644
--- a/src/components/MainMenu.vue
+++ b/src/components/MainMenu.vue
@@ -1,9 +1,9 @@
 <template>
   <div id="main-menu">
-    <MenuGeneralOptions :active="active" @update-active="updateActive" />
-    <MenuCellProperties :active="active" @update-active="updateActive" />
-    <MenuElementaryCA :active="active" @update-active="updateActive" />
-    <Menu2dCA :active="active" @update-active="updateActive" />
+    <MenuGeneralOptions />
+    <MenuCellProperties />
+    <MenuElementaryCA />
+    <Menu2dCA />
   </div>
 </template>
 
@@ -20,21 +20,6 @@
       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>
 
@@ -43,7 +28,6 @@
     display: flex;
     flex-direction: row;
     width: 100%;
-
     flex: 1;
   }
 
diff --git a/src/components/MenuCellProperties.vue b/src/components/MenuCellProperties.vue
index 49b07f9..33a4786 100644
--- a/src/components/MenuCellProperties.vue
+++ b/src/components/MenuCellProperties.vue
@@ -38,7 +38,7 @@
   import { globalStore } from "../stores/index.js";
   import MenuRow from "./MenuRow.vue";
   export default {
-    name: "MainMenu",
+    name: "MenuCellProperties",
     components: {
       MenuRow,
     },
diff --git a/src/components/MenuRow.vue b/src/components/MenuRow.vue
index 4db98db..4db663c 100644
--- a/src/components/MenuRow.vue
+++ b/src/components/MenuRow.vue
@@ -1,15 +1,17 @@
 <template>
   <div class="menu-row">
-    <h2 :id="rowTitle" @click="$emit('update-active', rowTitle)">
+    <h2 :id="rowTitle" @click.stop="storeActiveSubMenu">
       {{ rowTitle }}
     </h2>
-    <div v-if="isActive" class="menu-row-content">
+    <div v-if="isActive" ref="content" class="menu-row-content">
       <slot />
     </div>
   </div>
 </template>
 
 <script>
+  import { mapActions, mapState } from "pinia";
+  import { globalStore } from "../stores/index.js";
   export default {
     name: "MenuRow",
     props: {
@@ -17,15 +19,37 @@
         type: String,
         default: "",
       },
-      active: {
-        type: String,
-        default: "",
+    },
+    computed: {
+      ...mapState(globalStore, ["activeSubMenu"]),
+      isActive() {
+        return this.rowTitle == this.activeSubMenu;
       },
     },
-    emits: ["update-active"],
-    computed: {
-      isActive() {
-        return this.rowTitle == this.active;
+    beforeUnmount() {
+      window.removeEventListener("click", this.onWindowClick);
+    },
+    methods: {
+      ...mapActions(globalStore, ["setActiveSubMenu"]),
+      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("");
+          }
+          return;
+        }
       },
     },
   };
diff --git a/src/stores/index.js b/src/stores/index.js
index a3ef16e..16a7c7a 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -34,6 +34,7 @@ export const globalStore = defineStore("globalStore", {
       draw2dLast: false,
       reset: false,
       canDraw: true,
+      activeSubMenu: "",
     };
   },
   actions: {
@@ -46,14 +47,17 @@ export const globalStore = defineStore("globalStore", {
       );
     },
     toggleDraw1d() {
+      this.setActiveSubMenu("");
       this.draw1d = true;
     },
     toggleDraw2d() {
+      this.setActiveSubMenu("");
       this.toggleStop();
       this.canDraw = true;
       this.draw2d = true;
     },
     toggleDraw2dLast() {
+      this.setActiveSubMenu("");
       this.toggleStop();
       this.canDraw = true;
       this.draw2dLast = true;
@@ -68,5 +72,9 @@ export const globalStore = defineStore("globalStore", {
       this.draw2dLast = false;
       this.canDraw = false;
     },
+    setActiveSubMenu(data) {
+      if (this.activeSubMenu == data) this.activeSubMenu = "";
+      else this.activeSubMenu = data;
+    },
   },
 });
-- 
2.45.2


From b5b223ba5c1e789bb8f8898465d28dc725d80716 Mon Sep 17 00:00:00 2001
From: Gator <gator@ariona.fr>
Date: Sat, 10 Dec 2022 21:40:45 +0100
Subject: [PATCH 2/2] hide main menu once start is clicked (mobile)

---
 src/App.vue                         | 17 +++++++++--------
 src/components/MenuElementaryCA.vue | 11 ++++++++---
 src/components/MenuRow.vue          |  3 ++-
 src/stores/index.js                 |  7 +++++++
 4 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b86443a..3685d03 100644
--- a/src/App.vue
+++ b/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 { mapWritableState, mapActions } from "pinia";
+  import { mapState, mapWritableState, mapActions } from "pinia";
   import { globalStore } from "./stores/index.js";
 
   export default {
@@ -30,15 +30,12 @@
     },
     data() {
       return {
-        mainMenu: false,
         windowWidth: window.innerWidth,
       };
     },
     computed: {
-      ...mapWritableState(globalStore, {
-        canvasWidth: "canvasWidth",
-        canvasHeight: "canvasHeight",
-      }),
+      ...mapState(globalStore, ["mainMenu", "activeSubMenu"]),
+      ...mapWritableState(globalStore, ["canvasWidth", "canvasHeight"]),
     },
     mounted() {
       this.$nextTick(() => {
@@ -49,9 +46,13 @@
       window.removeEventListener("resize", this.onResize);
     },
     methods: {
-      ...mapActions(globalStore, ["setBoardWidth", "setBoardHeight"]),
+      ...mapActions(globalStore, [
+        "setBoardWidth",
+        "setBoardHeight",
+        "setMainMenu",
+      ]),
       toggleMainMenu() {
-        this.mainMenu = !this.mainMenu;
+        this.setMainMenu(!this.mainMenu);
       },
       onResize() {
         this.$nextTick(() => {
diff --git a/src/components/MenuElementaryCA.vue b/src/components/MenuElementaryCA.vue
index cfb99c6..5228b98 100644
--- a/src/components/MenuElementaryCA.vue
+++ b/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>
 
diff --git a/src/components/MenuRow.vue b/src/components/MenuRow.vue
index 4db663c..743bfe7 100644
--- a/src/components/MenuRow.vue
+++ b/src/components/MenuRow.vue
@@ -30,7 +30,7 @@
       window.removeEventListener("click", this.onWindowClick);
     },
     methods: {
-      ...mapActions(globalStore, ["setActiveSubMenu"]),
+      ...mapActions(globalStore, ["setActiveSubMenu", "toggleMainMenu"]),
       onKeyDown: function (event) {
         // escape
         if (event.keyCode == 27) {
@@ -47,6 +47,7 @@
         if (form != null) {
           if (!form.contains(event.target)) {
             this.setActiveSubMenu("");
+            this.setMainMenu(false);
           }
           return;
         }
diff --git a/src/stores/index.js b/src/stores/index.js
index 16a7c7a..5b40b41 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -34,6 +34,7 @@ export const globalStore = defineStore("globalStore", {
       draw2dLast: false,
       reset: false,
       canDraw: true,
+      mainMenu: false,
       activeSubMenu: "",
     };
   },
@@ -48,16 +49,19 @@ 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;
@@ -76,5 +80,8 @@ export const globalStore = defineStore("globalStore", {
       if (this.activeSubMenu == data) this.activeSubMenu = "";
       else this.activeSubMenu = data;
     },
+    setMainMenu(data) {
+      this.mainMenu = data;
+    },
   },
 });
-- 
2.45.2