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

View File

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

View File

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