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

View File

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