colorful painting

form/res-judicata/src/views/Apply.vue

@@ -20,7 +20,7 @@
         <label for="file">Nahrajte žalobu, kterou chcete podat</label>
       </div>
       <div class="columns">
-        <canvas id="content" class="column is-three-quarters"></canvas>
+        <canvas @mousemove="mouseMove" id="content" class="column is-three-quarters"></canvas>
         <div class="column" id="problems">
           <ICry v-on:icry-activated="iCryActivated" v-for="detection in ['accuser', 'court', 'date_and_place', 'intent', 'signature', 'topic']" v-bind:key="detection" v-bind:style="{ 'background-color': getColor(detection) }" class="icries" :title="translateCryTitle(detection)" notthatmuch>
             {{ getDescription(detection) }}</ICry>
@@ -66,8 +66,15 @@ export default {
   name: 'Apply',
   components: {ICry},
   props: {
-    "detections": Array,
-    "paintingColor": String,
+  },
+  data: function() {
+    return {
+      "paintingColor": "transparent",
+      "ctx": null,
+      "painting": false,
+      "lastcoord": null,
+      "beforelast": null, // TODO stupid babycode, use array instead
+    }
   },
   methods: {
     processForm: function () {
@@ -90,6 +97,7 @@ export default {
         canvas.width = width;
         canvas.height = height;
         const ctx = canvas.getContext('2d');
+        this.ctx = ctx;
         let offset = 0;
         for (const img of imgs) {
           ctx.drawImage(img, 0, offset);
@@ -138,6 +146,36 @@ export default {
         }
       }
     },
+    mouseMove(e) {
+      if (!this.ctx) {
+        return;
+      }
+      const canvas = document.getElementById("content");
+      const rect = canvas.getBoundingClientRect();
+      const scaleX = canvas.width / rect.width;
+      const scaleY = canvas.height / rect.height;
+      const x = (e.clientX - rect.left) * scaleX;
+      const y = (e.clientY - rect.top) * scaleY;
+      const a = 75;
+      if (e.buttons === 1) {
+        this.painting = true;
+        if (this.lastcoord && this.beforelast) {
+          console.log([x, y]);
+          this.ctx.lineWidth = a;
+          this.ctx.strokeStyle = this.paintingColor.replace("rgb", "rgba").replace(")", ",0.5)");
+          this.ctx.beginPath();
+          this.ctx.moveTo(...this.beforelast);
+          this.ctx.lineTo(x, y)
+          this.ctx.stroke();
+        }
+        this.beforelast = this.lastcoord;
+        this.lastcoord = [x, y];
+      } else {
+        this.painting = false;
+        this.lastcoord = null;
+        this.beforelast = null;
+      }
+    },
   },
 }
 </script>