vue 2 to 3 #1
11
src/App.vue
11
src/App.vue
@ -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; */
|
||||
}
|
||||
|
||||
* {
|
||||
|
@ -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);
|
Loading…
Reference in New Issue
Block a user