renamed canvas component (again) and fixed some issues

This commit is contained in:
Ali Gator 2022-11-30 20:57:26 +01:00
parent 20434ab52a
commit 454befaa24
2 changed files with 12 additions and 25 deletions

View File

@ -3,19 +3,20 @@
<h1 id="main-title">Cellular Automata Explorer</h1>
<div id="container">
<MainMenu />
<CanvasBoard />
<Board />
</div>
</div>
</template>
<script>
import MainMenu from "./components/MainMenu.vue";
import CanvasBoard from "./components/CanvasBoard.vue";
import Board from "./components/Board.vue";
export const App = {
export default {
name: "App",
components: {
MainMenu,
CanvasBoard,
Board,
},
};
</script>
@ -26,7 +27,7 @@ export const App = {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
/* color: #2c3e50; */
}
* {

View File

@ -1,11 +1,12 @@
<template>
<main id="mainContent">
<CanvasBoard
<canvas
id="canvas-board"
ref="canvas-board"
:width="canvasWidth"
:height="canvasHeight"
/>
>
</canvas>
</main>
</template>
<script>
@ -47,28 +48,13 @@ export default {
},
},
mounted() {
this.canvas = this.$refs["canvas"];
this.canvas = document.getElementById("canvas-board")
this.ctx = this.canvas.getContext("2d");
this.$store.commit("setCanvasWidth", this.canvas.parentElement.clientWidth);
this.$store.commit(
"setCanvasHeight",
"setCanvasHeight",
this.canvas.parentElement.clientHeight
);
this.$root.$on("draw1d", () => {
this.draw1d();
});
this.$root.$on("draw2dNew", () => {
this.draw2dNew();
});
this.$root.$on("draw2dLast", () => {
this.draw2dLast();
});
this.$root.$on("reset", () => {
this.reset();
});
this.$root.$on("stop", () => {
this.stop();
});
},
methods: {
drawCanvas(board) {
@ -127,7 +113,7 @@ export default {
},
stop() {
this.$store.commit("setDrawingStatus", 0);
},
},
reset() {
this.stop();
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);