83 lines
2.0 KiB
Vue
83 lines
2.0 KiB
Vue
<script setup>
|
|
import { globalStore } from "../stores/index.js";
|
|
import MenuRow from "./MenuRow.vue";
|
|
|
|
const store = globalStore();
|
|
|
|
const updateCanvasHeight = (event) => {
|
|
const elem = event.target;
|
|
store.renderer.resize(store.renderer.width, elem.value);
|
|
};
|
|
|
|
const updateCanvasWidth = (event) => {
|
|
const elem = event.target;
|
|
store.renderer.resize(elem.value, store.renderer.height);
|
|
};
|
|
|
|
const updateRefreshRate = (event) => {
|
|
const elem = event.target;
|
|
store.renderer.refreshRate = elem.value;
|
|
};
|
|
|
|
const updateDrawingDirection = (event) => {
|
|
const elem = event.target;
|
|
const value = elem.checked ? "x" : "y";
|
|
store.drawingDirection = value;
|
|
};
|
|
</script>
|
|
|
|
<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="store.renderer.width"
|
|
@input="updateCanvasWidth"
|
|
/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>Height</label>
|
|
<input
|
|
id="canvasHeight"
|
|
name="canvasHeight"
|
|
type="number"
|
|
step="10"
|
|
:value="store.renderer.height"
|
|
@input="updateCanvasHeight"
|
|
/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label>Refresh Rate (ms)</label>
|
|
<input
|
|
id="refreshRate"
|
|
name="refreshRate"
|
|
type="number"
|
|
min="100"
|
|
step="100"
|
|
:value="store.renderer.refreshRate"
|
|
@input="updateRefreshRate"
|
|
/>
|
|
</div>
|
|
<div class="form-field">
|
|
<label
|
|
>Invert Drawing Direction
|
|
<input
|
|
type="checkbox"
|
|
:checked="store.drawingDirection === 'x'"
|
|
:value="store.drawingDirection"
|
|
@input="updateDrawingDirection"
|
|
/>
|
|
</label>
|
|
</div>
|
|
</form>
|
|
</MenuRow>
|
|
</template>
|