69 lines
1.6 KiB
Vue
69 lines
1.6 KiB
Vue
<template>
|
|
<MenuRow row-title="2D Cellular Automaton">
|
|
<div class="form-field">
|
|
<label>Start from empty board</label>
|
|
<input
|
|
type="button"
|
|
name="start2d"
|
|
value="start"
|
|
@click="toggleDraw2d()"
|
|
/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>Start from last result</label>
|
|
<input type="button" value="start" @click="toggleDraw2dLast()" />
|
|
</div>
|
|
<div class="form-field">
|
|
<label>Start from picture</label><br />
|
|
<input type="file" @change="preparePicture" />
|
|
</div>
|
|
</MenuRow>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions, mapWritableState } from "pinia";
|
|
import MenuRow from "./MenuRow.vue";
|
|
import { globalStore } from "../stores/index.js";
|
|
|
|
export default {
|
|
name: "Menu2dCA",
|
|
components: {
|
|
MenuRow,
|
|
},
|
|
data() {
|
|
return {
|
|
uploadedFile: "",
|
|
};
|
|
},
|
|
computed: {
|
|
...mapWritableState(globalStore, ["picture"]),
|
|
},
|
|
methods: {
|
|
...mapActions(globalStore, [
|
|
"toggleDraw2dLast",
|
|
"toggleDraw2d",
|
|
"toggle2dDrawFromPicture",
|
|
]),
|
|
preparePicture(event) {
|
|
const files = event.target.files;
|
|
this.picture = new Image();
|
|
this.picture.width = this.canvasWidth;
|
|
if (FileReader && files && files.length) {
|
|
const reader = new FileReader();
|
|
|
|
reader.onload = () => {
|
|
this.picture.src = reader.result;
|
|
this.toggle2dDrawFromPicture();
|
|
};
|
|
|
|
reader.onerror = () => {
|
|
console.log(reader.error);
|
|
};
|
|
|
|
reader.readAsDataURL(files[0]);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|