diff --git a/static/js/editor/canvas-coords.js b/static/js/editor/canvas-coords.js index 6fdac6f3f..4bf780c8f 100644 --- a/static/js/editor/canvas-coords.js +++ b/static/js/editor/canvas-coords.js @@ -12,8 +12,8 @@ export function canvasCoords(e, canvas) { const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; - const clientX = e.touches ? e.touches[0].clientX : e.clientX; - const clientY = e.touches ? e.touches[0].clientY : e.clientY; + const clientX = e.touches && e.touches.length ? e.touches[0].clientX : e.clientX; + const clientY = e.touches && e.touches.length ? e.touches[0].clientY : e.clientY; return { x: (clientX - rect.left) * scaleX, y: (clientY - rect.top) * scaleY, diff --git a/tests/test_canvas_coords_empty_touches_js.py b/tests/test_canvas_coords_empty_touches_js.py new file mode 100644 index 000000000..67597f7b4 --- /dev/null +++ b/tests/test_canvas_coords_empty_touches_js.py @@ -0,0 +1,51 @@ +"""Pin canvasCoords (static/js/editor/canvas-coords.js) against an empty +touch list. Driven through `node --input-type=module` (same approach as +tests/test_markdown_table_row_js.py); skips when `node` is missing. + +Regression: a touch event whose `touches` list is present but EMPTY (a +real mobile race — the finger is already lifted when the handler runs) +made `e.touches[0].clientX` throw \"Cannot read properties of undefined\". +The guard falls back to the event's own clientX/clientY in that case. +""" +import json +import shutil +import subprocess +from pathlib import Path + +import pytest + +_REPO = Path(__file__).resolve().parent.parent +_MOD = _REPO / "static" / "js" / "editor" / "canvas-coords.js" +_HAS_NODE = shutil.which("node") is not None + +_CANVAS = "{width:800,height:600,getBoundingClientRect:()=>({width:400,height:300,left:100,top:50})}" + + +def _coords(event_js): + js = f""" + import {{ canvasCoords }} from '{_MOD.as_posix()}'; + const canvas = {_CANVAS}; + console.log(JSON.stringify(canvasCoords({event_js}, canvas))); + """ + proc = subprocess.run( + ["node", "--input-type=module"], + input=js, capture_output=True, text=True, cwd=str(_REPO), timeout=30, + ) + assert proc.returncode == 0, proc.stderr + return json.loads(proc.stdout.strip()) + + +@pytest.mark.skipif(not _HAS_NODE, reason="node binary not on PATH") +def test_empty_touch_list_falls_back_to_client_xy(): + # scaleX = 800/400 = 2; (200-100)*2 = 200, (100-50)*2 = 100 + assert _coords("{touches:[],clientX:200,clientY:100}") == {"x": 200, "y": 100} + + +@pytest.mark.skipif(not _HAS_NODE, reason="node binary not on PATH") +def test_mouse_event_unaffected(): + assert _coords("{clientX:200,clientY:100}") == {"x": 200, "y": 100} + + +@pytest.mark.skipif(not _HAS_NODE, reason="node binary not on PATH") +def test_touch_with_finger_still_used(): + assert _coords("{touches:[{clientX:200,clientY:100}]}") == {"x": 200, "y": 100}