Merge remote-tracking branch 'origin/dev' into load-picture
This commit is contained in:
commit
7d4016a213
17
src/App.vue
17
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(() => {
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
@ -38,7 +38,7 @@
|
||||
import { globalStore } from "../stores/index.js";
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
export default {
|
||||
name: "MainMenu",
|
||||
name: "MenuCellProperties",
|
||||
components: {
|
||||
MenuRow,
|
||||
},
|
||||
|
@ -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;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
|
@ -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;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user