96 lines
2.3 KiB
Vue
96 lines
2.3 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 { mapWritableState } from "pinia";
|
|
import { globalStore } from "../stores/index.js";
|
|
import MenuRow from "./MenuRow.vue";
|
|
export default {
|
|
name: "MenuGeneralOptions",
|
|
components: {
|
|
MenuRow,
|
|
},
|
|
computed: {
|
|
...mapWritableState(globalStore, [
|
|
"canvasWidth",
|
|
"canvasHeight",
|
|
"refreshRate",
|
|
"drawingDirection",
|
|
]),
|
|
},
|
|
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;
|
|
},
|
|
},
|
|
};
|
|
</script>
|