From e6aac849fd515bf02fa1abb32c91d128cd4e7edb Mon Sep 17 00:00:00 2001 From: "factman60@gmail.com" Date: Sun, 26 May 2024 04:38:40 +0100 Subject: [PATCH 1/2] Enhance mouseXY function to support touch events --- web_app/src/lib/utils.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/web_app/src/lib/utils.ts b/web_app/src/lib/utils.ts index 8a6ebb0..25ed336 100644 --- a/web_app/src/lib/utils.ts +++ b/web_app/src/lib/utils.ts @@ -180,8 +180,18 @@ export function downloadImage(uri: string, name: string) { } export function mouseXY(ev: SyntheticEvent) { - const mouseEvent = ev.nativeEvent as MouseEvent - return { x: mouseEvent.offsetX, y: mouseEvent.offsetY } + const mouseEvent = ev.nativeEvent as MouseEvent + // Handle mask drawing coordinate on mobile/tablet devices + if ('touches' in ev) { + const rect = (ev.target as HTMLCanvasElement).getBoundingClientRect(); + const touches = ev.touches as (Touch & { target: HTMLCanvasElement })[] + const touch = touches[0] + return { + x: (touch.clientX - rect.x) / rect.width * touch.target.offsetWidth, + y: (touch.clientY - rect.y) / rect.height * touch.target.offsetHeight, + } + } + return {x: mouseEvent.offsetX, y: mouseEvent.offsetY} } export function drawLines( From cca45c8bbe52f5e214bab4517b156cc520fbc035 Mon Sep 17 00:00:00 2001 From: "factman60@gmail.com" Date: Sun, 26 May 2024 04:41:36 +0100 Subject: [PATCH 2/2] Add touch event handlers for canvas --- web_app/src/components/Editor.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/web_app/src/components/Editor.tsx b/web_app/src/components/Editor.tsx index 5bd4ef7..3cb2376 100644 --- a/web_app/src/components/Editor.tsx +++ b/web_app/src/components/Editor.tsx @@ -800,6 +800,9 @@ export default function Editor(props: EditorProps) { onMouseDown={onMouseDown} onMouseUp={onCanvasMouseUp} onMouseMove={onMouseDrag} + onTouchStart={onMouseDown} + onTouchEnd={onCanvasMouseUp} + onTouchMove={onMouseDrag} ref={(r) => { if (r && !context) { const ctx = r.getContext("2d")