pinia-migration #2

Merged
gator merged 13 commits from pinia-migration into master 2022-12-02 18:22:54 +01:00
8 changed files with 310 additions and 324 deletions
Showing only changes of commit 3a2cbc9349 - Show all commits

View File

@ -9,138 +9,141 @@
</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",
canvasWidth: "getCanvasWidth",
canvasHeight: "getCanvasHeight",
refreshRate: "getRefreshRate",
initial1dState: "getInitial1dState",
drawingDirection: "getDrawingDirection",
canDraw: "getCanDraw",
lastBoard: "getLastBoard",
getDraw1d: "getDraw1d",
getDraw2d: "getDraw2d",
getDraw2dLast: "getDraw2dLast",
getReset: "getReset",
}),
boardWidth: function () {
return Math.floor(this.canvasWidth / this.cellProperties.size);
},
boardHeight: function () {
return Math.floor(this.canvasHeight / this.cellProperties.size);
},
},
watch: {
getDraw1d(value) {
if (value == true) this.draw1d();
},
getDraw2d(value) {
if (value == true) this.draw2dNew();
},
getDraw2dLast(value) {
if (value == true) this.draw2dLast();
},
getReset(value) {
if (value == true) this.reset();
},
},
mounted() {
this.canvas = Object.freeze(document.getElementById("canvas-board"));
this.ctx = this.canvas.getContext("2d");
this.$store.commit("setCanvasWidth", this.canvas.parentElement.clientWidth);
this.$store.commit(
"setCanvasHeight",
this.canvas.parentElement.clientHeight
);
},
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]);
},
draw1d() {
const initialState = this.compute1dInitialState();
const board = createBoard(
initialState,
this.rules.rules,
this.boardWidth
);
this.$store.commit("setLastBoard", Object.freeze(board));
this.drawCanvas(board);
this.$store.dispatch("stop");
},
draw2d(board) {
if (!this.canDraw) return;
const draw2dNext = async (b) => {
if (!this.canDraw) return;
const newBoard = evolve2d(b, conwayRules);
this.drawCanvas(b, this.cellProperties);
await sleep(this.refreshRate);
draw2dNext(newBoard);
import { mapActions, mapState, mapWritableState } from 'pinia'
import { globalStore } from "../stores/index.js";
import {
create1dState,
create1dStateOneCell,
create2dState,
createBoard,
conwayRules,
evolve2d,
} from "../modules/automata.js";
import { getRandomInt, sleep } from "../modules/common.js";
export default {
name: "CanvasBoard",
data() {
return {
canvas: null,
ctx: null,
};
return draw2dNext(board);
},
draw2dNew() {
const initialState = create2dState(
this.boardWidth,
this.boardHeight,
getRandomInt,
[0, 2]
);
const board = evolve2d(initialState, conwayRules);
this.$store.commit("setLastBoard", Object.freeze(board));
this.draw2d(board);
computed: {
...mapState(globalStore, {
cellProperties: "cellProperties",
rules: "rules1d",
refreshRate: "refreshRate",
initial1dState: "initial1dState",
drawingDirection: "drawingDirection",
canDraw: "canDraw",
getDraw1d: "draw1d",
getDraw2d: "draw2d",
getDraw2dLast: "draw2dLast",
}),
...mapWritableState(globalStore, {
lastBoard: "lastBoard",
canvasWidth: "canvasWidth",
canvasHeight: "canvasHeight",
getReset: "reset",
}),
boardWidth: function () {
return Math.floor(this.canvasWidth / this.cellProperties.size);
},
boardHeight: function () {
return Math.floor(this.canvasHeight / this.cellProperties.size);
},
},
async draw2dLast() {
this.draw2d(this.lastBoard);
watch: {
getDraw1d(value) {
if (value == true) this.draw1d();
},
getDraw2d(value) {
if (value == true) this.draw2dNew();
},
getDraw2dLast(value) {
if (value == true) this.draw2dLast();
},
getReset(value) {
if (value == true) this.reset();
},
},
reset() {
this.$store.dispatch("stop");
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.$store.commit("toggleReset", 0);
mounted() {
this.canvas = Object.freeze(document.getElementById("canvas-board"));
this.ctx = this.canvas.getContext("2d");
this.canvasWidth = this.canvas.parentElement.clientWidth
this.canvasHeight = this.canvas.parentElement.clientHeight
},
},
};
methods: {
...mapActions(globalStore, ["toggleStop"]),
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]);
},
draw1d() {
const initialState = this.compute1dInitialState();
const board = createBoard(
initialState,
this.rules.rules,
this.boardWidth
);
this.lastBoard = Object.freeze(board)
this.drawCanvas(board);
this.toggleStop()
},
draw2d(board) {
if (!this.canDraw) return;
const draw2dNext = async (b) => {
if (!this.canDraw) return;
const newBoard = evolve2d(b, conwayRules);
this.drawCanvas(b, this.cellProperties);
await sleep(this.refreshRate);
draw2dNext(newBoard);
};
return draw2dNext(board);
},
draw2dNew() {
const initialState = create2dState(
this.boardWidth,
this.boardHeight,
getRandomInt,
[0, 2]
);
const board = evolve2d(initialState, conwayRules);
this.lastBoard = Object.freeze(board)
this.draw2d(board);
},
async draw2dLast() {
if (this.lastBoard != undefined)
this.draw2d(this.lastBoard);
},
reset() {
this.toggleStop()
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.getReset = 0
},
},
};
</script>
<style>
#mainContent {
min-width: 70%;
}
#mainContent {
min-width: 70%;
}
</style>

View File

@ -8,55 +8,55 @@
</template>
<script>
import MenuCellProperties from "./MenuCellProperties.vue";
import MenuGeneralOptions from "./MenuGeneralOptions.vue";
import MenuElementaryCA from "./MenuElementaryCA.vue";
import Menu2dCA from "./Menu2dCA.vue";
export default {
name: "MainMenu",
components: {
MenuCellProperties,
MenuGeneralOptions,
MenuElementaryCA,
Menu2dCA,
},
};
import MenuCellProperties from "./MenuCellProperties.vue";
import MenuGeneralOptions from "./MenuGeneralOptions.vue";
import MenuElementaryCA from "./MenuElementaryCA.vue";
import Menu2dCA from "./Menu2dCA.vue";
export default {
name: "MainMenu",
components: {
MenuCellProperties,
MenuGeneralOptions,
MenuElementaryCA,
Menu2dCA,
},
};
</script>
<style>
#sidebar {
width: 25%;
padding: 0 10px;
overflow-y: scroll;
}
/* Hide scrollbar for Chrome, Safari and Opera */
#sidebar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
#sidebar {
-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;
}
#mainContent {
flex: 1;
width: 100%;
}
#sidebar {
flex: 1;
padding: 0;
width: 100%;
width: 25%;
padding: 0 10px;
overflow-y: scroll;
}
/* Hide scrollbar for Chrome, Safari and Opera */
#sidebar::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
#sidebar {
-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;
}
#mainContent {
flex: 1;
width: 100%;
}
#sidebar {
flex: 1;
padding: 0;
width: 100%;
}
}
}
</style>

View File

@ -2,55 +2,40 @@
<MenuRow row-title="2D Cellular Automata">
<div class="form-field">
<label>Start from last result</label>
<input type="button" value="start" @click="draw2dLast" />
<input type="button" value="start" @click="toggleDraw2dLast()" />
</div>
<div class="form-field">
<input type="button" name="start2d" value="start" @click="draw2d" />
<input type="button" name="start2d" value="start" @click="toggleDraw2d()" />
<input
type="button"
name="stop"
class="stop"
value="stop"
@click="stop"
@click="toggleStop()"
/>
<input
type="button"
name="reset"
class="reset"
value="reset"
@click="reset"
@click="toggleReset()"
/>
</div>
</MenuRow>
</template>
<script>
import MenuRow from "./MenuRow.vue";
import { mapGetters } from "vuex";
import { mapActions } from "pinia";
import MenuRow from "./MenuRow.vue";
import { globalStore } from "../stores/index.js";
export default {
name: "Menu2dCA",
components: {
MenuRow,
},
computed: {
...mapGetters({
lastBoard: "getLastBoard",
}),
},
methods: {
draw2d() {
this.$store.dispatch("draw2d");
export default {
name: "Menu2dCA",
components: {
MenuRow,
},
draw2dLast() {
this.$store.dispatch("draw2dLast");
methods: {
...mapActions(globalStore, ["toggleDraw2d", "toggleDraw2dLast", "toggleReset", "toggleStop"]),
},
reset() {
this.$store.dispatch("reset");
},
stop() {
this.$store.dispatch("stop");
},
},
};
};
</script>

View File

@ -34,29 +34,27 @@
</template>
<script>
import MenuRow from "./MenuRow.vue";
export default {
name: "MainMenu",
components: {
MenuRow,
},
data() {
return {
cellProperties: this.$store.state.cellProperties,
};
},
methods: {
getCellProperties(event) {
const elem = event.target;
const prop = this.$store.state.cellProperties;
return prop[elem.name];
import { mapWritableState } from 'pinia'
import { globalStore } from "../stores/index.js";
import MenuRow from "./MenuRow.vue";
export default {
name: "MainMenu",
components: {
MenuRow,
},
updateCellProperties(event) {
const elem = event.target;
const prop = { name: elem.name, value: elem.value };
//console.log(prop)
this.$store.commit("setCellProperties", prop);
computed: {
...mapWritableState(globalStore, ["cellProperties"])
},
},
};
methods: {
getCellProperties(event) {
const elem = event.target;
const prop = this.cellProperties;
return prop[elem.name];
},
updateCellProperties(event) {
const elem = event.target;
this.cellProperties[elem.name] = elem.value;
},
},
};
</script>

View File

@ -63,20 +63,20 @@
</div>
</form>
<div class="form-field">
<input type="button" name="start" value="start" @click="draw1d" />
<input type="button" name="start" value="start" @click="toggleDraw1d()" />
<input
type="button"
name="reset"
class="reset"
value="reset"
@click="reset"
@click="toggleReset"
/>
</div>
</MenuRow>
</template>
<script>
import { mapActions, mapState, mapWritableState } from 'pinia'
import { mapActions, mapWritableState } from 'pinia'
import { presetRules, initialStates } from "./preset.js"
import { globalStore } from "../stores/index.js";
import MenuRow from "./MenuRow.vue";
@ -95,14 +95,11 @@
...mapWritableState(
globalStore, {
initialState: "initial1dState",
}
),
...mapState(
globalStore, {
rules: "rules1d"
}
),
rules1dFileName() {
// TODO: broken
return (
Object.keys(this.rules)
.map((index) => {
@ -113,7 +110,7 @@
},
},
methods: {
...mapActions(globalStore, ["draw1d", "reset"]),
...mapActions(globalStore, ["toggleDraw1d", "toggleReset"]),
copyRules() {
const rules = JSON.stringify(this.rules);
navigator.clipboard.writeText(rules);

View File

@ -56,40 +56,43 @@
</template>
<script>
import MenuRow from "./MenuRow.vue";
import { mapGetters } from "vuex";
export default {
name: "MenuGeneralOptions",
components: {
MenuRow,
},
computed: {
...mapGetters({
canvasWidth: "getCanvasWidth",
canvasHeight: "getCanvasHeight",
refreshRate: "getRefreshRate",
drawingDirection: "getDrawingDirection",
}),
},
methods: {
updateCanvasHeight: function (event) {
const elem = event.target;
this.$store.commit("setCanvasHeight", elem.value);
import { mapWritableState } from 'pinia'
import { globalStore } from "../stores/index.js";
import MenuRow from "./MenuRow.vue";
export default {
name: "MenuGeneralOptions",
components: {
MenuRow,
},
updateCanvasWidth: function (event) {
const elem = event.target;
this.$store.commit("setCanvasWidth", elem.value);
computed: {
...mapWritableState(
globalStore,
[
"canvasWidth",
"canvasHeight",
"refreshRate",
"drawingDirection"
]
),
},
updateRefreshRate: function (event) {
const elem = event.target;
this.$store.commit("setRefreshRate", elem.value);
methods: {
updateCanvasHeight: function (event) {
const elem = event.target;
this.canvasHeight = elem.value
},
updateCanvasWidth: function (event) {
const elem = event.target;
this.canvasWidth = elem.value
},
updateRefreshRate: function (event) {
const elem = event.target;
this.refreshRate = elem.value;
},
updateDrawingDirection: function (event) {
const elem = event.target;
const value = elem.checked ? "x" : "y";
this.drawingDirection = value
},
},
updateDrawingDirection: function (event) {
const elem = event.target;
const value = elem.checked ? "x" : "y";
this.$store.commit("setDrawingDirection", value);
console.log(this.drawingDirection);
},
},
};
};
</script>

View File

@ -10,66 +10,66 @@
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "MenuRow",
props: {
rowTitle: {
type: String,
default: "",
import { mapWritableState } from 'pinia'
import { globalStore } from "../stores/index.js";
export default {
name: "MenuRow",
props: {
rowTitle: {
type: String,
default: "",
},
},
},
computed: {
...mapGetters({
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);
computed: {
// TODO: should be passed as a props/slot, not in a store
...mapWritableState(globalStore, ["activeMenu"])
},
},
};
methods: {
updateActiveMenu(event) {
const elem = event.target;
const value = elem.id;
if (value == this.activeMenu) this.activeMenu = ""
else this.activeMenu = value
},
},
};
</script>
<style>
.menu-row h2 {
font-size: medium;
padding: 10px;
cursor: pointer;
border: 2px solid darkgrey;
margin: 0 0 10px 0;
}
.menu-row h2 {
font-size: medium;
padding: 10px;
cursor: pointer;
border: 2px solid darkgrey;
margin: 0 0 10px 0;
}
select {
margin-top: 10px;
padding: 5px;
}
select {
margin-top: 10px;
padding: 5px;
}
input[type="button"] {
min-width: 60px;
padding: 5px;
font-weight: bold;
margin-right: 10px;
}
input[type="button"] {
min-width: 60px;
padding: 5px;
font-weight: bold;
margin-right: 10px;
}
.form-field {
display: flex;
margin: 10px;
justify-content: space-between;
}
.form-field {
display: flex;
margin: 10px;
justify-content: space-between;
}
.menu-row {
flex: 1;
}
.menu-row {
flex: 1;
}
label,
.form-field label {
margin-right: 10px;
font-weight: bold;
}
label,
.form-field label {
margin-right: 10px;
font-weight: bold;
}
</style>

View File

@ -38,22 +38,22 @@ export const globalStore = defineStore("globalStore", {
}
},
actions: {
draw1d() {
toggleDraw1d() {
this.draw1d = true;
},
draw2d() {
toggleDraw2d() {
this.canDraw = true;
this.draw2d = true;
},
draw2dLast() {
toggleDraw2dLast() {
this.canDraw = true;
this.draw2dLast = true;
},
reset() {
this.stop();
toggleReset() {
this.toggleStop();
this.reset = true;
},
stop() {
toggleStop() {
this.draw1d = false;
this.draw2d = false;
this.draw2dLast = false;