linting and formating. renamed canvas component

src/components/MenuGeneralOptions.vue

@@ -13,7 +13,7 @@
           step="10"
           :value="canvasWidth"
           @input="updateCanvasWidth"
-        >
+        />
       </div>
       <div class="form-field">
         <label>Height</label>
@@ -24,7 +24,7 @@
           step="10"
           :value="canvasHeight"
           @input="updateCanvasHeight"
-        >
+        />
       </div>
       <div class="form-field">
         <label>Refresh Rate (ms)</label>
@@ -38,57 +38,58 @@
           step="100"
           :value="refreshRate"
           @input="updateRefreshRate"
-        >
+        />
       </div>
       <div class="form-field">
-        <label>Invert Drawing Direction
+        <label
+          >Invert Drawing Direction
           <input
             type="checkbox"
             :checked="drawingDirection === 'x'"
             :value="drawingDirection"
             @input="updateDrawingDirection"
-          >
+          />
         </label>
       </div>
-    </form>    
+    </form>
   </MenuRow>
 </template>
 
 <script>
-import MenuRow from './MenuRow.vue'
-import {mapGetters} from 'vuex'
+import MenuRow from "./MenuRow.vue";
+import { mapGetters } from "vuex";
 export default {
-  name: 'MenuGeneralOptions',
+  name: "MenuGeneralOptions",
   components: {
-    MenuRow
+    MenuRow,
   },
   computed: {
     ...mapGetters({
-      canvasWidth: 'getCanvasWidth',
-      canvasHeight: 'getCanvasHeight',
-      refreshRate: 'getRefreshRate',
-      drawingDirection: 'getDrawingDirection'
-    })
+      canvasWidth: "getCanvasWidth",
+      canvasHeight: "getCanvasHeight",
+      refreshRate: "getRefreshRate",
+      drawingDirection: "getDrawingDirection",
+    }),
   },
   methods: {
-    updateCanvasHeight: function(event) {
-      const elem = event.target
-      this.$store.commit('setCanvasHeight', elem.value)
+    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)
+    updateCanvasWidth: function (event) {
+      const elem = event.target;
+      this.$store.commit("setCanvasWidth", elem.value);
     },
-    updateRefreshRate: function(event) {
-      const elem = event.target
-      this.$store.commit('setRefreshRate', elem.value)
+    updateRefreshRate: function (event) {
+      const elem = event.target;
+      this.$store.commit("setRefreshRate", elem.value);
     },
-    updateDrawingDirection: function(event) {
-      const elem = event.target
-      const value = elem.checked ? "x" : "y"
-      this.$store.commit('setDrawingDirection', value)
-      console.log(this.drawingDirection)
-    }
-  }
-}
+    updateDrawingDirection: function (event) {
+      const elem = event.target;
+      const value = elem.checked ? "x" : "y";
+      this.$store.commit("setDrawingDirection", value);
+      console.log(this.drawingDirection);
+    },
+  },
+};
 </script>