allow selection of size by mouse

src/App.vue

@@ -4,7 +4,7 @@
       <Sidebar ref="sidebar" @loadImage="loadImage" @guideSize="guideSize"/>
     </div>
     <div id="canvas-wrap">
-      <Canvas ref="canvas"/>
+      <Canvas ref="canvas" @params="setParams"/>
     </div>
   </div>
 </template>
@@ -25,6 +25,9 @@ export default {
     guideSize: function (size) {
       this.$refs.canvas.slice = size;
     },
+    setParams: function (coords) {
+      this.$refs.sidebar.setParams(coords);
+    },
   },
 };
 </script>

src/components/Canvas.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="canvas-container">
-    <canvas ref="canvas" id="canvas"></canvas>
+    <canvas ref="canvas" id="canvas" @mousedown="onMouse" @mousemove="onMouse" oncontextmenu="return false;"></canvas>
   </div>
 </template>
 
@@ -15,6 +15,7 @@ export default {
       image: null,
       imageLoaded: false,
       slice: [0, 0],
+      ratio: 1,
     };
   },
   computed: {},
@@ -53,10 +54,10 @@ export default {
         0, 0, image.width, image.height,
         0, 0, dims.width, dims.height);
 
-      let ratio = dims.width / image.width;
+      this.ratio = dims.width / image.width;
 
-      let sliceX = parseInt(this.slice[0]) * ratio;
+      let sliceX = parseInt(this.slice[0]) * this.ratio;
-      let sliceY = parseInt(this.slice[1]) * ratio;
+      let sliceY = parseInt(this.slice[1]) * this.ratio;
 
       if (sliceX > 0 && sliceY > 0) {
         for (let x = 0; x < dims.width; x += sliceX) {
@@ -83,6 +84,27 @@ export default {
       canvas.height = canvasContainer.offsetHeight - 10;
       this.refresh();
     },
+    onMouse: function (ev) {
+      if (ev.buttons === 0) {
+        return;
+      }
+      ev.preventDefault();
+
+      const type = {
+        1: "size",
+        2: "offset",
+      }[ev.buttons];
+
+      if (type !== undefined) {
+        const coords = {
+          "type": type,
+          "x": Math.round((ev.x - ev.target.offsetLeft) / this.ratio),
+          "y": Math.round((ev.y - ev.target.offsetTop) / this.ratio),
+        };
+        this.$emit("params", coords);
+      }
+      return false;
+    },
   },
 };
 </script>

src/components/Sidebar.vue

@@ -9,16 +9,16 @@
     <hr>
     <div>
       <label for="slice_x">Slice X: </label>
-      <input class="spinBox" id="slice_x" v-model.number="guideSizeX" type="number" min="2" max="1024" step="1"
+      <input class="spinBox" id="slice_x" v-model.number="guideSizeX" type="number" min="2" :max="imageSize[0]/2"
-             value="64">
+             step="1" value="64">
     </div>
     <div>
       <label for="slice_x">No X remainder: {{noXremainder}}</label>
     </div>
     <div>
       <label for="slice_y">Slice Y: </label>
-      <input class="spinBox" id="slice_y" v-model.number="guideSizeY" type="number" min="2" max="1024" step="1"
+      <input class="spinBox" id="slice_y" v-model.number="guideSizeY" type="number" min="2" :max="imageSize[1]/2"
-             value="64">
+             step="1" value="64">
     </div>
     <div>
       <label for="slice_x">No Y remainder: {{noYremainder}}</label>
@@ -160,6 +160,15 @@ export default {
       let url = URL.createObjectURL(e.target.files[0]);
       this.$emit("loadImage", url);
     },
+    setParams (coords) {
+      switch (coords.type) {
+        case "size":
+          this.lockSize = false;
+          this.guideSizeX = coords.x;
+          this.guideSizeY = coords.y;
+          break;
+      }
+    },
   },
   mounted: function () {
     this.$bus.$on("imageLoaded", (image) => {