refac: cleaning round for image cropping/resizing

web/src/components/ImageUploader.vue

@@ -357,16 +357,27 @@ function pointFromEvent(event: MouseEvent | TouchEvent): { x: number; y: number
 	return { x: mouseEvent.clientX, y: mouseEvent.clientY }
 }
 
+function bindPointerDrag(onMove: (event: MouseEvent | TouchEvent) => void, onEnd: () => void) {
+	window.addEventListener('mousemove', onMove)
+	window.addEventListener('mouseup', onEnd)
+	window.addEventListener('touchmove', onMove)
+	window.addEventListener('touchend', onEnd)
+}
+
+function unbindPointerDrag(onMove: (event: MouseEvent | TouchEvent) => void, onEnd: () => void) {
+	window.removeEventListener('mousemove', onMove)
+	window.removeEventListener('mouseup', onEnd)
+	window.removeEventListener('touchmove', onMove)
+	window.removeEventListener('touchend', onEnd)
+}
+
 let moveOrigin: { x: number; y: number; rect: CropRect } | null = null
 
 function onFrameDragStart(event: MouseEvent | TouchEvent) {
 	event.preventDefault()
 	const point = pointFromEvent(event)
 	moveOrigin = { x: point.x, y: point.y, rect: { ...rect.value } }
-	window.addEventListener('mousemove', onFrameDragMove)
-	window.addEventListener('mouseup', onFrameDragEnd)
-	window.addEventListener('touchmove', onFrameDragMove)
-	window.addEventListener('touchend', onFrameDragEnd)
+	bindPointerDrag(onFrameDragMove, onFrameDragEnd)
 }
 
 function onFrameDragMove(event: MouseEvent | TouchEvent) {
@@ -386,10 +397,7 @@ function onFrameDragMove(event: MouseEvent | TouchEvent) {
 
 function onFrameDragEnd() {
 	moveOrigin = null
-	window.removeEventListener('mousemove', onFrameDragMove)
-	window.removeEventListener('mouseup', onFrameDragEnd)
-	window.removeEventListener('touchmove', onFrameDragMove)
-	window.removeEventListener('touchend', onFrameDragEnd)
+	unbindPointerDrag(onFrameDragMove, onFrameDragEnd)
 }
 
 let resizeOrigin: {
@@ -411,10 +419,7 @@ function onHandleDragStart(event: MouseEvent | TouchEvent, corner: Corner) {
 		corner,
 		ratio: lockedRatioValue.value,
 	}
-	window.addEventListener('mousemove', onHandleDragMove)
-	window.addEventListener('mouseup', onHandleDragEnd)
-	window.addEventListener('touchmove', onHandleDragMove)
-	window.addEventListener('touchend', onHandleDragEnd)
+	bindPointerDrag(onHandleDragMove, onHandleDragEnd)
 }
 
 function onHandleDragMove(event: MouseEvent | TouchEvent) {
@@ -450,36 +455,33 @@ function onHandleDragMove(event: MouseEvent | TouchEvent) {
 
 function onHandleDragEnd() {
 	resizeOrigin = null
-	window.removeEventListener('mousemove', onHandleDragMove)
-	window.removeEventListener('mouseup', onHandleDragEnd)
-	window.removeEventListener('touchmove', onHandleDragMove)
-	window.removeEventListener('touchend', onHandleDragEnd)
+	unbindPointerDrag(onHandleDragMove, onHandleDragEnd)
+}
+
+const ARROW_KEY_DELTAS: Record<string, [number, number]> = {
+	ArrowRight: [1, 0],
+	ArrowLeft: [-1, 0],
+	ArrowUp: [0, -1],
+	ArrowDown: [0, 1],
 }
 
 function onFrameKeydown(event: KeyboardEvent) {
-	const step = 1
-	const lockedRatio = lockedRatioValue.value
-	if (event.key === 'ArrowRight') {
-		event.preventDefault()
-		rect.value = event.shiftKey
-			? resizeRect(rect.value, step, 0, boundsWidth.value, boundsHeight.value, lockedRatio)
-			: moveRect(rect.value, step, 0, boundsWidth.value, boundsHeight.value)
-	} else if (event.key === 'ArrowLeft') {
-		event.preventDefault()
-		rect.value = event.shiftKey
-			? resizeRect(rect.value, -step, 0, boundsWidth.value, boundsHeight.value, lockedRatio)
-			: moveRect(rect.value, -step, 0, boundsWidth.value, boundsHeight.value)
-	} else if (event.key === 'ArrowUp') {
-		event.preventDefault()
-		rect.value = event.shiftKey
-			? resizeRect(rect.value, 0, -step, boundsWidth.value, boundsHeight.value, lockedRatio)
-			: moveRect(rect.value, 0, -step, boundsWidth.value, boundsHeight.value)
-	} else if (event.key === 'ArrowDown') {
-		event.preventDefault()
-		rect.value = event.shiftKey
-			? resizeRect(rect.value, 0, step, boundsWidth.value, boundsHeight.value, lockedRatio)
-			: moveRect(rect.value, 0, step, boundsWidth.value, boundsHeight.value)
+	const delta = ARROW_KEY_DELTAS[event.key]
+	if (!delta) {
+		return
 	}
+	event.preventDefault()
+	const [dx, dy] = delta
+	rect.value = event.shiftKey
+		? resizeRect(
+				rect.value,
+				dx,
+				dy,
+				boundsWidth.value,
+				boundsHeight.value,
+				lockedRatioValue.value,
+			)
+		: moveRect(rect.value, dx, dy, boundsWidth.value, boundsHeight.value)
 }
 
 async function confirmCropUpload() {