feat(eraser): select eraser if a pens eraser is used (#101)

Author: DaAnda97

src/Canvas/index.tsx

@@ -32,7 +32,7 @@ function getCanvasWithViewBox(canvas: HTMLDivElement) {
 export interface CanvasProps {
   paths: CanvasPath[];
   isDrawing: boolean;
-  onPointerDown: (point: Point) => void;
+  onPointerDown: (point: Point, isEraser: boolean) => void;
   onPointerMove: (point: Point) => void;
   onPointerUp: () => void;
   className?: string;
@@ -115,9 +115,10 @@ export const Canvas = React.forwardRef<CanvasRef, CanvasProps>((props, ref) => {
 
     if (event.pointerType === 'mouse' && event.button !== 0) return;
 
+    const isEraser = event.pointerType === 'pen' && ((event.buttons & 32) === 32);
     const point = getCoordinates(event);
 
-    onPointerDown(point);
+    onPointerDown(point, isEraser);
   };
 
   const handlePointerMove = (

src/ReactSketchCanvas/index.tsx

@@ -189,14 +189,16 @@ export const ReactSketchCanvas = React.forwardRef<
     },
   }));
 
-  const handlePointerDown = (point: Point): void => {
+  const handlePointerDown = (point: Point, isEraser: boolean): void => {
     setIsDrawing(true);
     setUndoStack([]);
 
+    const isDraw = !isEraser && drawMode;
+
     let stroke: CanvasPath = {
-      drawMode: drawMode,
-      strokeColor: drawMode ? strokeColor : '#000000', // Eraser using mask
-      strokeWidth: drawMode ? strokeWidth : eraserWidth,
+      drawMode: isDraw,
+      strokeColor: isDraw ? strokeColor : '#000000', // Eraser using mask
+      strokeWidth: isDraw ? strokeWidth : eraserWidth,
       paths: [point],
     };