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

This commit is contained in:
Ali Gator 2022-12-11 14:18:37 +01:00
commit 7d4016a213
5 changed files with 63 additions and 42 deletions

View File

@ -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(() => {

View File

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

View File

@ -38,7 +38,7 @@
import { globalStore } from "../stores/index.js";
import MenuRow from "./MenuRow.vue";
export default {
name: "MainMenu",
name: "MenuCellProperties",
components: {
MenuRow,
},

View File

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

View File

@ -36,6 +36,8 @@ export const globalStore = defineStore("globalStore", {
reset: false,
canDraw: true,
picture: null,
mainMenu: false,
activeSubMenu: "",
};
},
actions: {
@ -48,14 +50,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;
@ -77,5 +85,12 @@ 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;
},
},
});