adapted components to pinia
This commit is contained in:
parent
f318350149
commit
3a2cbc9349
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue