Merge pull request 'Add touch support to pathfinding canvas' (#7) from bugfix/touchbugfix into main

Reviewed-on: #7

src/app/pages/algorithms/pathfinding/pathfinding.component.ts

@@ -79,6 +79,20 @@ export class PathfindingComponent implements AfterViewInit {
     el.addEventListener('mousemove', (e) => this.onMouseMove(e));
     el.addEventListener('mouseup', () => this.onMouseUp());
     el.addEventListener('mouseleave', () => this.onMouseUp());
+
+    el.addEventListener('touchstart', (e) => {
+      if(e.cancelable) e.preventDefault();
+      this.onMouseDown(e as never);
+    }, { passive: false });
+
+    el.addEventListener('touchmove', (e) => {
+      if(e.cancelable) e.preventDefault();
+      this.onMouseMove(e as never);
+    }, { passive: false });
+
+    el.addEventListener('touchend', () => {
+      this.onMouseUp();
+    });
   }
 
   applyGridSize(skipReset?: boolean): void {
@@ -497,10 +511,26 @@ export class PathfindingComponent implements AfterViewInit {
   }
 
   // Mouse -> grid cell
-  private getGridPosition(event: MouseEvent): GridPos | null {
+  private getGridPosition(event: MouseEvent | TouchEvent): GridPos | null {
-    const rect = this.canvas.nativeElement.getBoundingClientRect();
+    const canvas = this.canvas.nativeElement;
-    const x = event.clientX - rect.left;
+    const rect = canvas.getBoundingClientRect();
-    const y = event.clientY - rect.top;
+
+    let clientX, clientY;
+    if (event instanceof MouseEvent) {
+      clientX = event.clientX;
+      clientY = event.clientY;
+    } else if (event instanceof TouchEvent && event.touches.length > 0) {
+      clientX = event.touches[0].clientX;
+      clientY = event.touches[0].clientY;
+    } else {
+      return null;
+    }
+
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+
+    const x = (clientX - rect.left) * scaleX;
+    const y = (clientY - rect.top) * scaleY;
 
     const col = Math.floor(x / this.nodeSize);
     const row = Math.floor(y / this.nodeSize);