From 38f66a90903d3466258978c9cba015fbd2d4b2ac Mon Sep 17 00:00:00 2001
From: Gator <gator@ariona.fr>
Date: Mon, 10 Jan 2022 14:16:34 +0100
Subject: [PATCH] general option component (canvas size)

---
 src/components/Canvas.vue             | 12 ++++-----
 src/components/MenuGeneralOptions.vue | 35 ++++++++++++++++++---------
 src/store/index.js                    | 17 +++++++++++++
 3 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/src/components/Canvas.vue b/src/components/Canvas.vue
index 050bbb6..361c436 100644
--- a/src/components/Canvas.vue
+++ b/src/components/Canvas.vue
@@ -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()
diff --git a/src/components/MenuGeneralOptions.vue b/src/components/MenuGeneralOptions.vue
index 8039b00..f7f76d7 100644
--- a/src/components/MenuGeneralOptions.vue
+++ b/src/components/MenuGeneralOptions.vue
@@ -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>    
@@ -33,11 +27,28 @@
 </template>
 
 <script>
-  import MenuRow from './MenuRow.vue'
-  export default {
+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>
diff --git a/src/store/index.js b/src/store/index.js
index 11e67d3..d3dd52d 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -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: {