Merge remote-tracking branch 'origin/dev' into load-picture

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;
   }
 

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,
     },

src/components/MenuRow.vue

@@ -1,19 +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"
-      @mouseleave="$emit('update-active', '')"
-    >
+    <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: {
@@ -21,15 +19,38 @@
         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", "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;
+        }
       },
     },
   };