general option component (canvas size)

This commit is contained in:
Ali Gator 2022-01-10 14:16:34 +01:00
parent 74a1b311b7
commit 38f66a9090
3 changed files with 46 additions and 18 deletions

View File

@ -3,8 +3,8 @@
<canvas
id="canvas"
ref="canvas"
width="500"
height="500"
:width="canvasWidth"
:height="canvasHeight"
/>
</main>
</template>
@ -24,13 +24,13 @@ export default {
...mapGetters({
cellProperties: 'getCellProperties',
rules: 'getRuleSet1d',
drawing: 'isDrawing'
drawing: 'isDrawing',
canvasWidth: 'getCanvasWidth',
canvasHeight: 'getCanvasHeight'
})
},
mounted() {
this.canvas = this.$refs['canvas']
this.canvas.width = 1280
this.canvas.height = 720
this.ctx = this.canvas.getContext('2d')
this.$root.$on('draw1d', () => { this.draw1d() })
this.$root.$on('draw2d', () => { this.draw2d() })
@ -88,7 +88,7 @@ export default {
return draw2dNext(board)
},
stop() {
this.$root.$store.state.drawing = 0
this.$store.commit('setDrawingStatus', 0)
},
reset() {
this.stop()

View File

@ -9,7 +9,8 @@
id="canvasWidth"
name="canvasWidth"
type="number"
value="1280"
:value="canvasWidth"
@input="updateCanvasWidth"
>
</div>
<div class="form-field">
@ -17,15 +18,8 @@
id="canvasHeight"
name="canvasHeight"
type="number"
value="1024"
>
</div>
<div class="form-field">
<input
id="canvasRefresh"
type="button"
name="canvasRefresh"
value="refresh"
:value="canvasHeight"
@input="updateCanvasHeight"
>
</div>
</form>
@ -34,10 +28,27 @@
<script>
import MenuRow from './MenuRow.vue'
import {mapGetters} from 'vuex'
export default {
name: 'MenuGeneralOptions',
components: {
MenuRow
},
computed: {
...mapGetters({
canvasWidth: 'getCanvasWidth',
canvasHeight: 'getCanvasHeight'
})
},
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)
}
}
}
</script>

View File

@ -21,6 +21,8 @@ export default new Vuex.Store({
liveColor: '#000000',
deadColor: '#AA78E8',
},
canvasWidth: 1280,
canvasHeight: 720,
},
mutations: {
update1dRules(state, data) {
@ -29,6 +31,15 @@ export default new Vuex.Store({
setCellProperties(state, data) {
state.cellProperties[data.name] = data.value
},
setDrawingStatus(state, data) {
state.drawing = data
},
setCanvasWidth(state, data) {
state.canvasWidth = data;
},
setCanvasHeight(state, data) {
state.canvasHeight = data;
}
},
getters: {
getCellProperties(state) {
@ -42,6 +53,12 @@ export default new Vuex.Store({
},
isDrawing(state) {
return state.drawing
},
getCanvasWidth(state) {
return state.canvasWidth
},
getCanvasHeight(state) {
return state.canvasHeight
}
},
actions: {