general option component (canvas size)

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()

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>

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: {