fix: enable drawing on mobile devices

Author: Oskar Widmark

src/App.tsx

@@ -454,14 +454,18 @@ class App extends React.Component<Props> {
             <canvas
               className="App-canvas"
               ref={this.canvasController.canvasRef}
-              onMouseDown={(event) =>
+              onPointerDown={(event) =>
                 this.startDrawOnCanvas(event.clientX, event.clientY)
               }
-              onMouseMove={(event) =>
+              onPointerMove={(event) =>
                 this.drawOnCanvas(event.clientX, event.clientY)
               }
-              onMouseUp={this.canvasController.endDraw}
-              onMouseLeave={this.canvasController.endDraw}
+              onPointerUp={this.canvasController.endDraw}
+              onPointerLeave={(event) => {
+                this.drawOnCanvas(event.clientX, event.clientY);
+                this.canvasController.endDraw();
+              }}
+              style={{ touchAction: 'none' }}
             />
           </div>
           <SideDrawer isOpen={this.state.areSettingsOpen}>

src/AppWithSound.tsx

@@ -20,17 +20,16 @@ export function AppWithSound(): React.ReactElement {
 
   const isPortrait = useIsPortrait();
 
-  if (isPortrait) {
-    return <RotationRequest />;
-  }
-
   return (
-    <App
-      playSound={play}
-      stopSounds={stop}
-      soundType={soundType}
-      setSoundType={setSoundType}
-      setVolume={setVolume}
-    />
+    <>
+      {isPortrait && <RotationRequest />}
+      <App
+        playSound={play}
+        stopSounds={stop}
+        soundType={soundType}
+        setSoundType={setSoundType}
+        setVolume={setVolume}
+      />
+    </>
   );
 }

src/canvas-controller.ts

@@ -222,6 +222,14 @@ export class CanvasController {
     this.drawAll(arr);
   };
 
+  indexInBounds = (i: number) => {
+    return i >= 0 && i < this.context.columnNbr;
+  };
+
+  boundDrawHeight = (y: number) => {
+    return Math.min(Math.max(y, 0), this.context.columnNbr - 1);
+  };
+
   getDrawData = (mouseX: number, mouseY: number): DrawData[] => {
     if (!this.isDrawing) return [];
 
@@ -254,25 +262,29 @@ export class CanvasController {
       let curHeight = this.prevDrawHeight;
       for (
         let i = this.prevDrawIndex + indexIncr;
-        i !== colIndex;
+        i !== colIndex && this.indexInBounds(i);
         i += indexIncr
       ) {
         curHeight +=
           (colHeight - this.prevDrawHeight) /
           Math.abs(colIndex - this.prevDrawIndex);
+        curHeight = this.boundDrawHeight(curHeight);
         drawData.push({
           index: i,
           value: Math.floor(curHeight),
         });
       }
     }
 
-    drawData.push({
-      index: colIndex,
-      value: colHeight,
-    });
-    this.prevDrawIndex = colIndex;
-    this.prevDrawHeight = colHeight;
+    if (this.indexInBounds(colIndex)) {
+      drawData.push({
+        index: colIndex,
+        value: this.boundDrawHeight(colHeight),
+      });
+      this.prevDrawIndex = colIndex;
+      this.prevDrawHeight = colHeight;
+    }
+
     return drawData;
   };
 
@@ -433,6 +445,7 @@ export class CanvasController {
   };
 
   endDraw = () => {
+    console.log('endDraw');
     this.isDrawing = false;
     this.prevDrawIndex = null;
     this.prevDrawHeight = null;