linting and formating. renamed canvas component
This commit is contained in:
@ -1,134 +0,0 @@
|
||||
<template>
|
||||
<main id="mainContent">
|
||||
<canvas
|
||||
id="canvas"
|
||||
ref="canvas"
|
||||
:width="canvasWidth"
|
||||
:height="canvasHeight"
|
||||
/>
|
||||
</main>
|
||||
</template>
|
||||
<script>
|
||||
import { create1dState, create1dStateOneCell, create2dState, createBoard, conwayRules, evolve2d } from '../modules/automata.js'
|
||||
import { getRandomInt, sleep } from '../modules/common.js'
|
||||
import {mapGetters} from 'vuex'
|
||||
export default {
|
||||
name: 'Canvas',
|
||||
data() {
|
||||
return {
|
||||
canvas: null,
|
||||
ctx: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
cellProperties: 'getCellProperties',
|
||||
rules: 'get1dRules',
|
||||
drawing: 'isDrawing',
|
||||
canvasWidth: 'getCanvasWidth',
|
||||
canvasHeight: 'getCanvasHeight',
|
||||
refreshRate: 'getRefreshRate',
|
||||
initial1dState: 'getInitial1dState',
|
||||
drawingDirection: 'getDrawingDirection',
|
||||
lastBoard: 'getLastBoard'
|
||||
}),
|
||||
boardWidth: function() {
|
||||
return Math.floor(
|
||||
this.canvasWidth /
|
||||
this.cellProperties.size)
|
||||
},
|
||||
boardHeight: function() {
|
||||
return Math.floor(
|
||||
this.canvasHeight /
|
||||
this.cellProperties.size)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.canvas = this.$refs['canvas']
|
||||
this.ctx = this.canvas.getContext('2d')
|
||||
this.$store.commit('setCanvasWidth', this.canvas.parentElement.clientWidth)
|
||||
this.$store.commit('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) {
|
||||
const props = this.cellProperties
|
||||
board.map((row, y) => {
|
||||
const d = props.size
|
||||
return row.map(
|
||||
(cell, x) => {
|
||||
this.ctx.fillStyle = (
|
||||
() => {
|
||||
if (cell === 1) return props.liveColor
|
||||
return props.deadColor
|
||||
})()
|
||||
if (this.drawingDirection === "x")
|
||||
this.ctx.fillRect(y * d, x * d, d, d)
|
||||
else
|
||||
this.ctx.fillRect(x * d, y * d, d, d)
|
||||
return cell
|
||||
},
|
||||
)
|
||||
})
|
||||
},
|
||||
compute1dInitialState() {
|
||||
if(this.initial1dState === "onecell")
|
||||
return create1dStateOneCell(this.boardWidth)
|
||||
return create1dState(this.boardWidth, getRandomInt, [0, 2])
|
||||
},
|
||||
async draw1d() {
|
||||
const initialState = this.compute1dInitialState()
|
||||
const board = createBoard(
|
||||
initialState,
|
||||
this.rules,
|
||||
this.boardWidth
|
||||
)
|
||||
this.$store.commit('setLastBoard', board)
|
||||
this.drawCanvas(board)
|
||||
},
|
||||
async draw2d(board) {
|
||||
if (this.drawing === 0) return
|
||||
|
||||
const draw2dNext = async (b) => {
|
||||
if (this.drawing === 0) return
|
||||
const newBoard = evolve2d(b, conwayRules)
|
||||
this.drawCanvas(b, this.cellProperties)
|
||||
await sleep(this.refreshRate)
|
||||
draw2dNext(newBoard)
|
||||
}
|
||||
return draw2dNext(board)
|
||||
},
|
||||
async draw2dNew() {
|
||||
const initialState = create2dState(
|
||||
this.boardWidth,
|
||||
this.boardHeight,
|
||||
getRandomInt,
|
||||
[0, 2],
|
||||
);
|
||||
const board = evolve2d(initialState, conwayRules);
|
||||
this.$store.commit('setLastBoard', board)
|
||||
this.draw2d(board)
|
||||
},
|
||||
async draw2dLast() {
|
||||
console.log(this.lastBoard)
|
||||
this.draw2d(this.lastBoard)
|
||||
},
|
||||
stop() {
|
||||
this.$store.commit('setDrawingStatus', 0)
|
||||
},
|
||||
reset() {
|
||||
this.stop()
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
#mainContent {
|
||||
min-width: 70%;
|
||||
}
|
||||
</style>
|
||||
142
src/components/CanvasBoard.vue
Normal file
142
src/components/CanvasBoard.vue
Normal file
@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<main id="mainContent">
|
||||
<CanvasBoard
|
||||
id="canvas-board"
|
||||
ref="canvas-board"
|
||||
:width="canvasWidth"
|
||||
:height="canvasHeight"
|
||||
/>
|
||||
</main>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
create1dState,
|
||||
create1dStateOneCell,
|
||||
create2dState,
|
||||
createBoard,
|
||||
conwayRules,
|
||||
evolve2d,
|
||||
} from "../modules/automata.js";
|
||||
import { getRandomInt, sleep } from "../modules/common.js";
|
||||
import { mapGetters } from "vuex";
|
||||
export default {
|
||||
name: "CanvasBoard",
|
||||
data() {
|
||||
return {
|
||||
canvas: null,
|
||||
ctx: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
cellProperties: "getCellProperties",
|
||||
rules: "get1dRules",
|
||||
drawing: "isDrawing",
|
||||
canvasWidth: "getCanvasWidth",
|
||||
canvasHeight: "getCanvasHeight",
|
||||
refreshRate: "getRefreshRate",
|
||||
initial1dState: "getInitial1dState",
|
||||
drawingDirection: "getDrawingDirection",
|
||||
lastBoard: "getLastBoard",
|
||||
}),
|
||||
boardWidth: function () {
|
||||
return Math.floor(this.canvasWidth / this.cellProperties.size);
|
||||
},
|
||||
boardHeight: function () {
|
||||
return Math.floor(this.canvasHeight / this.cellProperties.size);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.canvas = this.$refs["canvas"];
|
||||
this.ctx = this.canvas.getContext("2d");
|
||||
this.$store.commit("setCanvasWidth", this.canvas.parentElement.clientWidth);
|
||||
this.$store.commit(
|
||||
"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) {
|
||||
const props = this.cellProperties;
|
||||
board.map((row, y) => {
|
||||
const d = props.size;
|
||||
return row.map((cell, x) => {
|
||||
this.ctx.fillStyle = (() => {
|
||||
if (cell === 1) return props.liveColor;
|
||||
return props.deadColor;
|
||||
})();
|
||||
if (this.drawingDirection === "x")
|
||||
this.ctx.fillRect(y * d, x * d, d, d);
|
||||
else this.ctx.fillRect(x * d, y * d, d, d);
|
||||
return cell;
|
||||
});
|
||||
});
|
||||
},
|
||||
compute1dInitialState() {
|
||||
if (this.initial1dState === "onecell")
|
||||
return create1dStateOneCell(this.boardWidth);
|
||||
return create1dState(this.boardWidth, getRandomInt, [0, 2]);
|
||||
},
|
||||
async draw1d() {
|
||||
const initialState = this.compute1dInitialState();
|
||||
const board = createBoard(initialState, this.rules, this.boardWidth);
|
||||
this.$store.commit("setLastBoard", board);
|
||||
this.drawCanvas(board);
|
||||
},
|
||||
async draw2d(board) {
|
||||
if (this.drawing === 0) return;
|
||||
|
||||
const draw2dNext = async (b) => {
|
||||
if (this.drawing === 0) return;
|
||||
const newBoard = evolve2d(b, conwayRules);
|
||||
this.drawCanvas(b, this.cellProperties);
|
||||
await sleep(this.refreshRate);
|
||||
draw2dNext(newBoard);
|
||||
};
|
||||
return draw2dNext(board);
|
||||
},
|
||||
async draw2dNew() {
|
||||
const initialState = create2dState(
|
||||
this.boardWidth,
|
||||
this.boardHeight,
|
||||
getRandomInt,
|
||||
[0, 2]
|
||||
);
|
||||
const board = evolve2d(initialState, conwayRules);
|
||||
this.$store.commit("setLastBoard", board);
|
||||
this.draw2d(board);
|
||||
},
|
||||
async draw2dLast() {
|
||||
console.log(this.lastBoard);
|
||||
this.draw2d(this.lastBoard);
|
||||
},
|
||||
stop() {
|
||||
this.$store.commit("setDrawingStatus", 0);
|
||||
},
|
||||
reset() {
|
||||
this.stop();
|
||||
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
#mainContent {
|
||||
min-width: 70%;
|
||||
}
|
||||
</style>
|
||||
@ -8,29 +8,28 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuCellProperties from './MenuCellProperties.vue'
|
||||
import MenuGeneralOptions from './MenuGeneralOptions.vue'
|
||||
import MenuElementaryCA from './MenuElementaryCA.vue'
|
||||
import Menu2dCA from './Menu2dCA.vue'
|
||||
import MenuCellProperties from "./MenuCellProperties.vue";
|
||||
import MenuGeneralOptions from "./MenuGeneralOptions.vue";
|
||||
import MenuElementaryCA from "./MenuElementaryCA.vue";
|
||||
import Menu2dCA from "./Menu2dCA.vue";
|
||||
export default {
|
||||
name: 'MainMenu',
|
||||
name: "MainMenu",
|
||||
components: {
|
||||
MenuCellProperties,
|
||||
MenuGeneralOptions,
|
||||
MenuElementaryCA,
|
||||
Menu2dCA
|
||||
Menu2dCA,
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#sidebar {
|
||||
width: 25%;
|
||||
padding: 0 10px;
|
||||
overflow-y: scroll;
|
||||
width: 25%;
|
||||
padding: 0 10px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
#sidebar::-webkit-scrollbar {
|
||||
display: none;
|
||||
@ -38,26 +37,26 @@ export default {
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
#sidebar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
#container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
#container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#mainContent {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
#mainContent {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
#sidebar {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,65 +2,56 @@
|
||||
<MenuRow row-title="2D Cellular Automata">
|
||||
<div class="form-field">
|
||||
<label>Start from last result</label>
|
||||
<input
|
||||
type="button"
|
||||
value="start"
|
||||
@click="startFromLast"
|
||||
>
|
||||
<input type="button" value="start" @click="startFromLast" />
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<input
|
||||
type="button"
|
||||
name="start2d"
|
||||
value="start"
|
||||
@click="draw2d"
|
||||
>
|
||||
<input type="button" name="start2d" value="start" @click="draw2d" />
|
||||
<input
|
||||
type="button"
|
||||
name="stop"
|
||||
class="stop"
|
||||
value="stop"
|
||||
@click="stop"
|
||||
>
|
||||
/>
|
||||
<input
|
||||
type="button"
|
||||
name="reset"
|
||||
class="reset"
|
||||
value="reset"
|
||||
@click="reset"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
</MenuRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuRow from './MenuRow.vue'
|
||||
import {mapGetters} from 'vuex'
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
import { mapGetters } from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'Menu2dCA',
|
||||
name: "Menu2dCA",
|
||||
components: {
|
||||
MenuRow
|
||||
MenuRow,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
lastBoard: 'getLastBoard',
|
||||
})
|
||||
lastBoard: "getLastBoard",
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
draw2d() {
|
||||
this.$root.$store.state.drawing = 1
|
||||
this.$root.$emit('draw2dNew')
|
||||
this.$root.$store.state.drawing = 1;
|
||||
this.$root.$emit("draw2dNew");
|
||||
},
|
||||
reset() {
|
||||
this.$root.$emit('reset')
|
||||
this.$root.$emit("reset");
|
||||
},
|
||||
stop() {
|
||||
this.$root.$emit('stop')
|
||||
this.$root.$emit("stop");
|
||||
},
|
||||
startFromLast() {
|
||||
this.$root.$emit('draw2dLast')
|
||||
}
|
||||
}
|
||||
}
|
||||
this.$root.$emit("draw2dLast");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
type="color"
|
||||
@value="cellProperties.liveColor"
|
||||
@input="updateCellProperties"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label for="dead">Dead cell color</label>
|
||||
@ -17,7 +17,7 @@
|
||||
type="color"
|
||||
:value="cellProperties.deadColor"
|
||||
@input="updateCellProperties"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>Cell size</label>
|
||||
@ -27,36 +27,36 @@
|
||||
min="1"
|
||||
:value="cellProperties.size"
|
||||
@input="updateCellProperties"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</MenuRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuRow from './MenuRow.vue'
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
export default {
|
||||
name: 'MainMenu',
|
||||
name: "MainMenu",
|
||||
components: {
|
||||
MenuRow
|
||||
MenuRow,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cellProperties: this.$store.state.cellProperties
|
||||
}
|
||||
cellProperties: this.$store.state.cellProperties,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getCellProperties(event) {
|
||||
const elem = event.target
|
||||
const prop = this.$store.state.cellProperties
|
||||
return prop[elem.name]
|
||||
const elem = event.target;
|
||||
const prop = this.$store.state.cellProperties;
|
||||
return prop[elem.name];
|
||||
},
|
||||
updateCellProperties(event) {
|
||||
const elem = event.target
|
||||
const prop = {'name' : elem.name, 'value' : elem.value}
|
||||
const elem = event.target;
|
||||
const prop = { name: elem.name, value: elem.value };
|
||||
//console.log(prop)
|
||||
this.$store.commit('setCellProperties', prop)
|
||||
}
|
||||
this.$store.commit("setCellProperties", prop);
|
||||
},
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -2,8 +2,9 @@
|
||||
<MenuRow row-title="Elementary Cellular Automata">
|
||||
<form>
|
||||
<div class="form-field">
|
||||
<label>Initial state presets
|
||||
<br>
|
||||
<label
|
||||
>Initial state presets
|
||||
<br />
|
||||
<select
|
||||
name="initial1dStates"
|
||||
value="initial1dStates"
|
||||
@ -13,7 +14,8 @@
|
||||
v-for="state in initial1dStates"
|
||||
:key="'preset1d' + state.id"
|
||||
:value="state.id"
|
||||
>{{ state.name }}
|
||||
>
|
||||
{{ state.name }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
@ -22,149 +24,198 @@
|
||||
<label>Rules</label>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>Rules presets
|
||||
<br>
|
||||
<select
|
||||
name="rules1d"
|
||||
value="rules"
|
||||
@input="update1dRules"
|
||||
>
|
||||
<label
|
||||
>Rules presets
|
||||
<br />
|
||||
<select name="rules1d" value="rules" @input="update1dRules">
|
||||
<option
|
||||
v-for="(rule, name) in presetRules"
|
||||
:key="'rule1d' + name"
|
||||
:value="name"
|
||||
>{{ name }}
|
||||
>
|
||||
{{ name }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<a
|
||||
style="cursor: pointer;"
|
||||
@click="copy1dRules"
|
||||
>copy rules</a>
|
||||
<a style="cursor: pointer" @click="copy1dRules">copy rules</a>
|
||||
</div>
|
||||
<div
|
||||
v-for="(rule, name) in rules"
|
||||
:key="'rule1d' + name"
|
||||
class="form-field"
|
||||
>
|
||||
<label>{{ name }}
|
||||
<label
|
||||
>{{ name }}
|
||||
<input
|
||||
:value="rule"
|
||||
type="checkbox"
|
||||
:name="name"
|
||||
:checked="rule"
|
||||
@input="update1dSingleRule"
|
||||
>
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
<div class="form-field">
|
||||
<input
|
||||
type="button"
|
||||
name="start"
|
||||
value="start"
|
||||
@click="draw1d"
|
||||
>
|
||||
<input type="button" name="start" value="start" @click="draw1d" />
|
||||
<input
|
||||
type="button"
|
||||
name="reset"
|
||||
class="reset"
|
||||
value="reset"
|
||||
@click="reset()"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
</MenuRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from 'vuex'
|
||||
import MenuRow from './MenuRow.vue'
|
||||
import { mapGetters } from "vuex";
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
export default {
|
||||
name: 'MenuElementaryCA',
|
||||
name: "MenuElementaryCA",
|
||||
components: {
|
||||
MenuRow
|
||||
MenuRow,
|
||||
},
|
||||
data() {
|
||||
// TODO: Why not a getter in the store?
|
||||
return {
|
||||
presetRules: {
|
||||
"rule 73" : {"100":0,"101":0,"110":1,"111":0,"011":1,"010":0,"001":0,"000":1},
|
||||
"rule 86" : {"100":1,"101":0,"110":0,"111":1,"011":0,"010":1,"001":0,"000":1},
|
||||
"rule 90" : {"100":1,"101":0,"110":1,"111":0,"011":0,"010":0,"001":1,"000":0},
|
||||
"rule 45?" : {"100":0,"101":0,"110":1,"111":0,"011":1,"010":0,"001":1,"000":1},
|
||||
"rule 54?" : {"100":1,"101":0,"110":1,"111":1,"011":0,"010":1,"001":1,"000":0},
|
||||
"unknown rule" : {"100":0,"101":0,"110":0,"111":1,"011":0,"010":0,"001":1,"000":1}
|
||||
"rule 73": {
|
||||
100: 0,
|
||||
101: 0,
|
||||
110: 1,
|
||||
111: 0,
|
||||
"011": 1,
|
||||
"010": 0,
|
||||
"001": 0,
|
||||
"000": 1,
|
||||
},
|
||||
"rule 86": {
|
||||
100: 1,
|
||||
101: 0,
|
||||
110: 0,
|
||||
111: 1,
|
||||
"011": 0,
|
||||
"010": 1,
|
||||
"001": 0,
|
||||
"000": 1,
|
||||
},
|
||||
"rule 90": {
|
||||
100: 1,
|
||||
101: 0,
|
||||
110: 1,
|
||||
111: 0,
|
||||
"011": 0,
|
||||
"010": 0,
|
||||
"001": 1,
|
||||
"000": 0,
|
||||
},
|
||||
"rule 45?": {
|
||||
100: 0,
|
||||
101: 0,
|
||||
110: 1,
|
||||
111: 0,
|
||||
"011": 1,
|
||||
"010": 0,
|
||||
"001": 1,
|
||||
"000": 1,
|
||||
},
|
||||
"rule 54?": {
|
||||
100: 1,
|
||||
101: 0,
|
||||
110: 1,
|
||||
111: 1,
|
||||
"011": 0,
|
||||
"010": 1,
|
||||
"001": 1,
|
||||
"000": 0,
|
||||
},
|
||||
"unknown rule": {
|
||||
100: 0,
|
||||
101: 0,
|
||||
110: 0,
|
||||
111: 1,
|
||||
"011": 0,
|
||||
"010": 0,
|
||||
"001": 1,
|
||||
"000": 1,
|
||||
},
|
||||
},
|
||||
initial1dStates: [
|
||||
{ id : "onecell",
|
||||
name : "One cell at center",
|
||||
description : "State with a single cell in the middle",
|
||||
{
|
||||
id: "onecell",
|
||||
name: "One cell at center",
|
||||
description: "State with a single cell in the middle",
|
||||
},
|
||||
{
|
||||
id : "random",
|
||||
name : "Random cell",
|
||||
description : "State populated with random cells",
|
||||
}
|
||||
]
|
||||
}
|
||||
id: "random",
|
||||
name: "Random cell",
|
||||
description: "State populated with random cells",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
initial1dState: 'getInitial1dState',
|
||||
rules: 'get1dRules'
|
||||
initial1dState: "getInitial1dState",
|
||||
rules: "get1dRules",
|
||||
}),
|
||||
rules1dFileName() {
|
||||
return Object.keys(this.rules).map(
|
||||
(index) => {
|
||||
return this.rules[index]
|
||||
}).join("_") + ".json"
|
||||
return (
|
||||
Object.keys(this.rules)
|
||||
.map((index) => {
|
||||
return this.rules[index];
|
||||
})
|
||||
.join("_") + ".json"
|
||||
);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
copy1dRules(){
|
||||
const rules = JSON.stringify(this.rules)
|
||||
navigator.clipboard.writeText(rules)
|
||||
copy1dRules() {
|
||||
const rules = JSON.stringify(this.rules);
|
||||
navigator.clipboard.writeText(rules);
|
||||
},
|
||||
isCurrentPreset(event) {
|
||||
const elem = event.target
|
||||
return this.initialState === elem.value
|
||||
const elem = event.target;
|
||||
return this.initialState === elem.value;
|
||||
},
|
||||
update1dSingleRule(event) {
|
||||
const elem = event.target
|
||||
const value = elem.checked ? 1 : 0
|
||||
const data = { 'rule' : elem.name, 'value' : value}
|
||||
this.$store.commit('update1dSingleRule', data)
|
||||
const elem = event.target;
|
||||
const value = elem.checked ? 1 : 0;
|
||||
const data = { rule: elem.name, value: value };
|
||||
this.$store.commit("update1dSingleRule", data);
|
||||
},
|
||||
update1dRules(event) {
|
||||
const elem = event.target
|
||||
const name = elem.value
|
||||
const rules = this.presetRules[name]
|
||||
const elem = event.target;
|
||||
const name = elem.value;
|
||||
const rules = this.presetRules[name];
|
||||
Object.keys(rules).map((index) => {
|
||||
const data = { 'rule' : index, 'value' : rules[index]}
|
||||
this.$store.commit('update1dSingleRule', data)
|
||||
})
|
||||
const data = { rule: index, value: rules[index] };
|
||||
this.$store.commit("update1dSingleRule", data);
|
||||
});
|
||||
},
|
||||
updateInitial1dState(event) {
|
||||
const elem = event.target
|
||||
this.$store.commit('setInitial1dState', elem.value)
|
||||
const elem = event.target;
|
||||
this.$store.commit("setInitial1dState", elem.value);
|
||||
},
|
||||
draw1d() {
|
||||
this.$root.$store.state.drawing = 1
|
||||
this.$root.$emit('draw1d')
|
||||
this.$root.$store.state.drawing = 1;
|
||||
this.$root.$emit("draw1d");
|
||||
},
|
||||
reset() {
|
||||
this.$root.$emit('reset')
|
||||
this.$root.$emit("reset");
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.menu-row a {
|
||||
.menu-row a {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
font-size: small;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
step="10"
|
||||
:value="canvasWidth"
|
||||
@input="updateCanvasWidth"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>Height</label>
|
||||
@ -24,7 +24,7 @@
|
||||
step="10"
|
||||
:value="canvasHeight"
|
||||
@input="updateCanvasHeight"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>Refresh Rate (ms)</label>
|
||||
@ -38,57 +38,58 @@
|
||||
step="100"
|
||||
:value="refreshRate"
|
||||
@input="updateRefreshRate"
|
||||
>
|
||||
/>
|
||||
</div>
|
||||
<div class="form-field">
|
||||
<label>Invert Drawing Direction
|
||||
<label
|
||||
>Invert Drawing Direction
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="drawingDirection === 'x'"
|
||||
:value="drawingDirection"
|
||||
@input="updateDrawingDirection"
|
||||
>
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
</form>
|
||||
</MenuRow>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuRow from './MenuRow.vue'
|
||||
import {mapGetters} from 'vuex'
|
||||
import MenuRow from "./MenuRow.vue";
|
||||
import { mapGetters } from "vuex";
|
||||
export default {
|
||||
name: 'MenuGeneralOptions',
|
||||
name: "MenuGeneralOptions",
|
||||
components: {
|
||||
MenuRow
|
||||
MenuRow,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
canvasWidth: 'getCanvasWidth',
|
||||
canvasHeight: 'getCanvasHeight',
|
||||
refreshRate: 'getRefreshRate',
|
||||
drawingDirection: 'getDrawingDirection'
|
||||
})
|
||||
canvasWidth: "getCanvasWidth",
|
||||
canvasHeight: "getCanvasHeight",
|
||||
refreshRate: "getRefreshRate",
|
||||
drawingDirection: "getDrawingDirection",
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
updateCanvasHeight: function(event) {
|
||||
const elem = event.target
|
||||
this.$store.commit('setCanvasHeight', elem.value)
|
||||
updateCanvasHeight: function (event) {
|
||||
const elem = event.target;
|
||||
this.$store.commit("setCanvasHeight", elem.value);
|
||||
},
|
||||
updateCanvasWidth: function(event) {
|
||||
const elem = event.target
|
||||
this.$store.commit('setCanvasWidth', elem.value)
|
||||
updateCanvasWidth: function (event) {
|
||||
const elem = event.target;
|
||||
this.$store.commit("setCanvasWidth", elem.value);
|
||||
},
|
||||
updateRefreshRate: function(event) {
|
||||
const elem = event.target
|
||||
this.$store.commit('setRefreshRate', elem.value)
|
||||
updateRefreshRate: function (event) {
|
||||
const elem = event.target;
|
||||
this.$store.commit("setRefreshRate", elem.value);
|
||||
},
|
||||
updateDrawingDirection: function(event) {
|
||||
const elem = event.target
|
||||
const value = elem.checked ? "x" : "y"
|
||||
this.$store.commit('setDrawingDirection', value)
|
||||
console.log(this.drawingDirection)
|
||||
}
|
||||
}
|
||||
}
|
||||
updateDrawingDirection: function (event) {
|
||||
const elem = event.target;
|
||||
const value = elem.checked ? "x" : "y";
|
||||
this.$store.commit("setDrawingDirection", value);
|
||||
console.log(this.drawingDirection);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,82 +1,75 @@
|
||||
<template>
|
||||
<div class="menu-row">
|
||||
<h2
|
||||
:id="rowTitle"
|
||||
@click="updateActiveMenu"
|
||||
>
|
||||
<h2 :id="rowTitle" @click="updateActiveMenu">
|
||||
{{ rowTitle }}
|
||||
</h2>
|
||||
<div
|
||||
v-if="activeMenu === rowTitle"
|
||||
class="menu-row-content"
|
||||
>
|
||||
<div v-if="activeMenu === rowTitle" class="menu-row-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from 'vuex'
|
||||
import { mapGetters } from "vuex";
|
||||
|
||||
export default {
|
||||
name: 'MenuRow',
|
||||
name: "MenuRow",
|
||||
props: {
|
||||
rowTitle: {
|
||||
type: String,
|
||||
default : ''
|
||||
}
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
activeMenu: 'getActiveMenu',
|
||||
})
|
||||
activeMenu: "getActiveMenu",
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
updateActiveMenu(event) {
|
||||
const elem = event.target
|
||||
const value = elem.id
|
||||
if (value == this.activeMenu)
|
||||
this.$store.commit('setActiveMenu', "")
|
||||
else
|
||||
this.$store.commit('setActiveMenu', value)
|
||||
const elem = event.target;
|
||||
const value = elem.id;
|
||||
if (value == this.activeMenu) this.$store.commit("setActiveMenu", "");
|
||||
else this.$store.commit("setActiveMenu", value);
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.menu-row h2 {
|
||||
font-size: medium;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border: 2px solid darkgrey;
|
||||
margin: 0 0 10px 0;
|
||||
font-size: medium;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border: 2px solid darkgrey;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
select {
|
||||
margin-top: 10px;
|
||||
padding: 5px;
|
||||
margin-top: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
|
||||
input[type="button"] {
|
||||
min-width: 60px;
|
||||
padding: 5px;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
min-width: 60px;
|
||||
padding: 5px;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
margin: 10px;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
margin: 10px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.menu-row {
|
||||
flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
label, .form-field label {
|
||||
margin-right: 10px;
|
||||
font-weight: bold;
|
||||
label,
|
||||
.form-field label {
|
||||
margin-right: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user