store is added, draw mode is working

Author: canozsoy

package-lock.json

@@ -13,7 +13,8 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^2.0.6",
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

package.json

@@ -1,12 +1,9 @@
 <template>
     <div id="content">
         <toolbar-component
-            :penThickness="penThickness"
-            @thickness-change="thicknessChange"
             @clear-canvas="clearCanvas"
         />
         <canvas-component
-            :penThickness="penThickness"
             ref="canvasComponent"
         />
     </div>
@@ -18,11 +15,6 @@ import CanvasComponent from "@/components/content_components/CanvasComponent.vue
 
 export default {
     name: "ContentComponent",
-    data: function () {
-        return {
-            penThickness: "1"
-        }
-    },
     components: {
         ToolbarComponent,
         CanvasComponent
@@ -31,9 +23,6 @@ export default {
         clearCanvas() {
             this.$refs.canvasComponent.clearCanvas();
         },
-        thicknessChange(value) {
-            this.penThickness = value;
-        }
     }
 }
 </script>

src/components/ContentComponent.vue

@@ -8,14 +8,10 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
+
 export default {
     name: "CanvasComponent",
-    props: {
-        penThickness: {
-            type: String,
-            required: true
-        }
-    },
     data: function () {
         return {
             canvas: "",
@@ -24,6 +20,9 @@ export default {
             prevY: 0
         }
     },
+    computed: {
+        ...mapGetters(["getThickness", "getDrawMode"]),
+    },
     mounted: function () {
         const canvas = this.$el.querySelector("canvas");
         this.canvas = canvas;
@@ -38,15 +37,17 @@ export default {
             this.prevY = event.offsetY;
         },
         draw(event) {
-            this.drawLine(this.prevX, this.prevY, event.offsetX, event.offsetY);
+            if (this.getDrawMode) {
+                this.drawLine(this.prevX, this.prevY, event.offsetX, event.offsetY);
+            }
             this.prevX = event.offsetX;
             this.prevY = event.offsetY;
         },
         drawLine(x1, y1, x2, y2) {
             const ctx = this.ctx;
             ctx.beginPath();
             ctx.strokeStyle = "#000";
-            ctx.lineWidth = this.penThickness;
+            ctx.lineWidth = this.getThickness;
             ctx.moveTo(x1, y1);
             ctx.lineTo(x2, y2);
             ctx.stroke();

src/components/content_components/CanvasComponent.vue

@@ -1,7 +1,10 @@
 <template>
     <div id="toolbar">
         <div>
-            <div id="drawMode">Draw Mode: Off</div>
+            <div
+                id="drawMode"
+                @click="callDrawModeFunc"
+            >Draw Mode: {{drawMode}}</div>
             <div id="drawModeInfo">
                 <font-awesome-icon icon="info-circle" />
                 Press d to switch
@@ -19,34 +22,47 @@
         >
             <font-awesome-icon icon="times" /> Clear
         </div>
-        <custom-range-input
-            :penThickness="penThickness"
-            @thickness-change="thicknessChange"
-        />
+        <custom-range-input />
     </div>
 </template>
 
 <script>
 import CustomRangeInput from "@/components/helper_components/CustomRangeInput.vue";
+import { mapActions, mapGetters } from "vuex";
 
 export default {
     name: "ToolbarComponent",
-    props: {
-        penThickness: {
-            type: String,
-            required: true
-        }
-    },
     components: {
         CustomRangeInput
     },
+    computed: {
+        ...mapGetters(["getDrawMode"]),
+        drawMode: function () {
+            return this.getDrawMode ? "On" : "Off";
+        }
+    },
+    created: function () {
+        window.addEventListener("keyup", this.drawKeyListener);
+    },
     methods: {
+        ...mapActions(["changeThickness", "changeDrawMode"]),
         clearCanvas() {
             this.$emit("clear-canvas");
         },
         thicknessChange(value) {
-            this.$emit("thickness-change", value)
+            this.changeThickness(value);
+        },
+        callDrawModeFunc() {
+            this.changeDrawMode(!this.getDrawMode);
+        },
+        drawKeyListener(event) {
+            if (event.key.toLowerCase() === "d") {
+                this.callDrawModeFunc();
+            }
         }
+    },
+    beforeDestroy: function() {
+        window.removeEventListener("keyup", this.drawKeyListener);
     }
 }
 </script>

src/components/content_components/ToolbarComponent.vue

@@ -8,32 +8,35 @@
             v-model="rangeInput.value"
             @change="thicknessChange"
         />
-        <p>{{rangeInput.value}}</p>
+        <p>{{rangeInput.value}} px</p>
     </div>
 </template>
 
 <script>
+import { mapGetters, mapActions } from "vuex";
+
 export default {
     name: "CustomRangeInput",
-    props: {
-        penThickness: {
-            type: String,
-            required: true
-        }
-    },
     data: function () {
         return {
             rangeInput: {
                 step: "1",
                 min: "1",
                 max: "10",
-                value: this.penThickness
+                value: "3"
             }
         }
     },
+    created: function() {
+        this.changeThickness(this.rangeInput.value);
+    },
+    computed: {
+        ...mapGetters(["getThickness"]),
+    },
     methods: {
+        ...mapActions(["changeThickness"]),
         thicknessChange() {
-            this.$emit("thickness-change", this.rangeInput.value);
+            this.changeThickness(this.rangeInput.value);
         }
     }
 }

src/components/helper_components/CustomRangeInput.vue

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import App from './App.vue';
+import store from "@/store";
 import "@/assets/global.scss";
 
 // Import font awesome
@@ -11,10 +12,9 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 library.add(faInfoCircle, faPencilAlt, faEraser, faTimes);
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 
-
-
 Vue.config.productionTip = false
 
 new Vue({
+  store,
   render: h => h(App),
 }).$mount('#app')

src/main.js

@@ -0,0 +1,11 @@
+import Vuex from "vuex";
+import Vue from "vue";
+import drawing from "@/store/modules/drawing";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+    modules: {
+        drawing
+    }
+})

src/store/index.js

@@ -0,0 +1,42 @@
+const state = {
+    color: null,
+    thickness: null,
+    drawMode: true
+}
+
+const getters = {
+    getColor: state => state.color,
+    getThickness: state => state.thickness,
+    getDrawMode: state => state.drawMode
+}
+
+const actions = {
+    changeColor({ commit }, color) {
+        commit("setColor", color);
+    },
+    changeThickness({ commit }, thickness) {
+        commit("setThickness", thickness);
+    },
+    changeDrawMode({ commit }, drawMode) {
+        commit("setDrawMode", drawMode);
+    }
+}
+
+const mutations = {
+    setColor(state, payload) {
+        state.color = payload;
+    },
+    setThickness(state, payload) {
+        state.thickness = payload;
+    },
+    setDrawMode(state, payload) {
+        state.drawMode = payload;
+    }
+}
+
+export default {
+    state,
+    getters,
+    actions,
+    mutations
+}