From a87bfef4f6967fe6f5cc384f979c69e10e0673b2 Mon Sep 17 00:00:00 2001
From: Thibaud <thibaud.gasser@gmx.com>
Date: Sun, 2 Feb 2025 12:01:19 +0100
Subject: [PATCH] handle touch events

---
 bezier-2.ts | 34 ++++++++++++++++++++++++++++++++--
 spline.ts   | 39 +++++++++++++++++++++++++++++++++++++--
 2 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/bezier-2.ts b/bezier-2.ts
index 1c5aaed..05dad7d 100644
--- a/bezier-2.ts
+++ b/bezier-2.ts
@@ -35,7 +35,17 @@ function init() {
     const bezier = cubicBezier(...points);
     drawCurve(ctx, bezier);
 
-    canvas.onmousedown = (evt) => {
+    canvas.ontouchstart = (evt: TouchEvent) => {
+        console.assert(evt.touches.length === 1, "Multiple touch points are not supported");
+        const { clientX, clientY } = evt.touches[0];
+        for (const p of points) {
+            if (Math.abs(p.x - clientX) < 10 && Math.abs(p.y - clientY) < 10) {
+                selection = points.indexOf(p);
+            }
+        }
+    };
+
+    canvas.onmousedown = (evt: MouseEvent) => {
         const { clientX, clientY } = evt;
         for (const p of points) {
             if (Math.abs(p.x - clientX) < 10 && Math.abs(p.y - clientY) < 10) {
@@ -44,7 +54,22 @@ function init() {
         }
     };
 
-    canvas.onmousemove = (evt) => {
+    canvas.ontouchmove = (evt: TouchEvent) => {
+        console.assert(evt.touches.length === 1, "Multiple touch points are not supported");
+        const { clientX, clientY } = evt.touches[0];
+        if (selection !== undefined) {
+            points[selection].x = clientX;
+            points[selection].y = clientY;
+            // redraw
+            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+            const bezier = cubicBezier(...points);
+            drawCurve(ctx, bezier);
+            drawPoints(ctx, points);
+        }
+    };
+
+
+    canvas.onmousemove = (evt: MouseEvent) => {
         if (selection !== undefined) {
             points[selection].x = evt.clientX;
             points[selection].y = evt.clientY;
@@ -56,6 +81,11 @@ function init() {
         }
     };
 
+    canvas.ontouchend = () => {
+        selection = undefined;
+    };
+
+
     canvas.onmouseup = () => {
         selection = undefined;
     };
diff --git a/spline.ts b/spline.ts
index a5ffe82..a72265f 100644
--- a/spline.ts
+++ b/spline.ts
@@ -60,7 +60,8 @@ function init() {
         ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
         draw(ctx, points);
     };
-    canvas.onmousedown = (evt) => {
+
+    canvas.onmousedown = (evt: MouseEvent) => {
         const { clientX, clientY } = evt;
         for (const p of points) {
             if (Math.abs(p.x - clientX) < 10 && Math.abs(p.y - clientY) < 10) {
@@ -76,7 +77,24 @@ function init() {
         }
     };
 
-    canvas.onmousemove = (evt) => {
+    canvas.ontouchstart = (evt: TouchEvent) => {
+        console.assert(evt.touches.length === 1, "Multiple touch points are not supported");
+        const { clientX, clientY } = evt.touches[0];
+        for (const p of points) {
+            if (Math.abs(p.x - clientX) < 10 && Math.abs(p.y - clientY) < 10) {
+                selection = points.indexOf(p);
+            }
+        }
+        if (selection === undefined) {
+            points.push({ x: clientX, y: clientY });
+            // redraw
+            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+            draw(ctx, points);
+
+        }
+    };
+
+    canvas.onmousemove = (evt: MouseEvent) => {
         if (selection !== undefined) {
             points[selection].x = evt.clientX;
             points[selection].y = evt.clientY;
@@ -86,9 +104,26 @@ function init() {
         }
     };
 
+    canvas.ontouchmove = (evt: TouchEvent) => {
+        console.assert(evt.touches.length === 1, "Multiple touch points are not supported");
+        const { clientX, clientY } = evt.touches[0];
+        if (selection !== undefined) {
+            points[selection].x = clientX;
+            points[selection].y = clientY;
+            // redraw
+            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+            draw(ctx, points);
+        }
+    };
+
     canvas.onmouseup = () => {
         selection = undefined;
     };
+
+    canvas.ontouchend = () => {
+        selection = undefined;
+    };
 }
 
 init();
+