redact and crop on touchscreen

app/javascript/template_builder/documents_editor_crop.vue

@@ -42,6 +42,7 @@
           class="absolute w-5 h-5 -ml-2.5 -mt-2.5 rounded-full bg-white border-2 border-neutral-600 cursor-move shadow"
           :style="{ left: `${corner.x * 100}%`, top: `${corner.y * 100}%` }"
           @mousedown.prevent="onCornerMousedown(cornerIndex)"
+          @touchstart.prevent="onCornerTouchstart(cornerIndex)"
         />
       </div>
     </div>
@@ -218,6 +219,9 @@ export default {
   beforeUnmount () {
     window.removeEventListener('mousemove', this.onMousemove)
     window.removeEventListener('mouseup', this.onMouseup)
+    window.removeEventListener('touchmove', this.onTouchmove)
+    window.removeEventListener('touchend', this.onTouchend)
+    window.removeEventListener('touchcancel', this.onTouchend)
   },
   methods: {
     transformPoint (point, rotate, flipH, flipV) {
@@ -276,27 +280,48 @@ export default {
         y: Math.min(Math.max((event.clientY - rect.top) / rect.height, 0), 1)
       }
     },
-    onCornerMousedown (index) {
+    startCornerDrag (index) {
       this.draggingIndex = index
       this.cornersTouched = true
+    },
+    dragCorner (point) {
+      if (this.draggingIndex === null) {
+        return
+      }
+
+      this.corners[this.draggingIndex] = this.inverseTransformPoint(this.pagePoint(point), this.rotate, this.flipH, this.flipV)
+    },
+    onCornerMousedown (index) {
+      this.startCornerDrag(index)
 
       window.addEventListener('mousemove', this.onMousemove)
       window.addEventListener('mouseup', this.onMouseup, { once: true })
     },
     onMousemove (event) {
-      if (this.draggingIndex === null) {
-        return
-      }
-
-      const point = this.inverseTransformPoint(this.pagePoint(event), this.rotate, this.flipH, this.flipV)
-
-      this.corners[this.draggingIndex] = point
+      this.dragCorner(event)
     },
     onMouseup () {
       window.removeEventListener('mousemove', this.onMousemove)
 
       this.draggingIndex = null
     },
+    onCornerTouchstart (index) {
+      this.startCornerDrag(index)
+
+      window.addEventListener('touchmove', this.onTouchmove, { passive: false })
+      window.addEventListener('touchend', this.onTouchend)
+      window.addEventListener('touchcancel', this.onTouchend)
+    },
+    onTouchmove (event) {
+      this.dragCorner(event.touches[0])
+    },
+    onTouchend () {
+      window.removeEventListener('touchmove', this.onTouchmove)
+      window.removeEventListener('touchend', this.onTouchend)
+      window.removeEventListener('touchcancel', this.onTouchend)
+
+      this.draggingIndex = null
+    },
     submit (scan) {
       this.isProcessing = scan ? 'scan' : 'crop'
 

app/javascript/template_builder/documents_editor_redact.vue

@@ -6,6 +6,7 @@
         class="relative mx-auto select-none cursor-crosshair"
         :style="pageStyle"
         @mousedown.prevent="onMousedown"
+        @touchstart.prevent="onTouchstart"
       >
         <img
           :src="imageUrl"
@@ -251,6 +252,9 @@ export default {
   beforeUnmount () {
     window.removeEventListener('mousemove', this.onMousemove)
     window.removeEventListener('mouseup', this.onMouseup)
+    window.removeEventListener('touchmove', this.onTouchmove)
+    window.removeEventListener('touchend', this.onTouchend)
+    window.removeEventListener('touchcancel', this.onTouchend)
   },
   methods: {
     inverseRotatePoint (point, rotate) {
@@ -357,27 +361,61 @@ export default {
         y: Math.min(Math.max((event.clientY - rect.top) / rect.height, 0), 1)
       }
     },
+    startMarquee (point) {
+      const start = this.pagePoint(point)
+
+      this.marquee = { x1: start.x, y1: start.y, x2: start.x, y2: start.y }
+    },
+    updateMarquee (point) {
+      if (!this.marquee) {
+        return
+      }
+
+      const next = this.pagePoint(point)
+
+      this.marquee.x2 = next.x
+      this.marquee.y2 = next.y
+    },
     onMousedown (event) {
       if (event.button !== 0 || (!this.imagePage && !this.textNodes)) {
         return
       }
 
-      const point = this.pagePoint(event)
-
-      this.marquee = { x1: point.x, y1: point.y, x2: point.x, y2: point.y }
+      this.startMarquee(event)
 
       window.addEventListener('mousemove', this.onMousemove)
       window.addEventListener('mouseup', this.onMouseup, { once: true })
     },
     onMousemove (event) {
-      const point = this.pagePoint(event)
-
-      this.marquee.x2 = point.x
-      this.marquee.y2 = point.y
+      this.updateMarquee(event)
     },
     onMouseup () {
       window.removeEventListener('mousemove', this.onMousemove)
 
+      this.finishMarquee()
+    },
+    onTouchstart (event) {
+      if (!this.imagePage && !this.textNodes) {
+        return
+      }
+
+      this.startMarquee(event.touches[0])
+
+      window.addEventListener('touchmove', this.onTouchmove, { passive: false })
+      window.addEventListener('touchend', this.onTouchend)
+      window.addEventListener('touchcancel', this.onTouchend)
+    },
+    onTouchmove (event) {
+      this.updateMarquee(event.touches[0])
+    },
+    onTouchend () {
+      window.removeEventListener('touchmove', this.onTouchmove)
+      window.removeEventListener('touchend', this.onTouchend)
+      window.removeEventListener('touchcancel', this.onTouchend)
+
+      this.finishMarquee()
+    },
+    finishMarquee () {
       if (!this.marquee) {
         return
       }