96 lines
2.4 KiB
Vue
96 lines
2.4 KiB
Vue
<template>
|
|
<MenuRow row-title="General Options">
|
|
<form>
|
|
<div class="form-field">
|
|
<label>Canvas Resolution</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>Width</label>
|
|
<input
|
|
id="canvasWidth"
|
|
name="canvasWidth"
|
|
type="number"
|
|
step="10"
|
|
:value="canvasWidth"
|
|
@input="updateCanvasWidth"
|
|
/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>Height</label>
|
|
<input
|
|
id="canvasHeight"
|
|
name="canvasHeight"
|
|
type="number"
|
|
step="10"
|
|
:value="canvasHeight"
|
|
@input="updateCanvasHeight"
|
|
/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>Refresh Rate (ms)</label>
|
|
</div>
|
|
<div class="form-field">
|
|
<input
|
|
id="refreshRate"
|
|
name="refreshRate"
|
|
type="number"
|
|
min="100"
|
|
step="100"
|
|
:value="refreshRate"
|
|
@input="updateRefreshRate"
|
|
/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label
|
|
>Invert Drawing Direction
|
|
<input
|
|
type="checkbox"
|
|
:checked="drawingDirection === 'x'"
|
|
:value="drawingDirection"
|
|
@input="updateDrawingDirection"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</form>
|
|
</MenuRow>
|
|
</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);
|
|
},
|
|
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);
|
|
},
|
|
updateDrawingDirection: function (event) {
|
|
const elem = event.target;
|
|
const value = elem.checked ? "x" : "y";
|
|
this.$store.commit("setDrawingDirection", value);
|
|
console.log(this.drawingDirection);
|
|
},
|
|
},
|
|
};
|
|
</script>
|