From a85fb268de9028f08535c3d52868162f721d5b23 Mon Sep 17 00:00:00 2001
From: Matt Kane <m@mk.gg>
Date: Sat, 9 Apr 2022 11:06:32 +0100
Subject: [PATCH] Add eraser tool with Lyra

---
 .gitignore                    |  3 ++-
 example/App.tsx               |  4 ++++
 example/style.css             |  5 ++++-
 src/index.ts                  |  1 +
 src/tools/eraser/useEraser.ts | 35 +++++++++++++++++++++++++++++++++++
 5 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 src/tools/eraser/useEraser.ts

diff --git a/.gitignore b/.gitignore
index 2a4db25..4bb3d81 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 node_modules
 .cache
 dist
-public
\ No newline at end of file
+public
+.DS_Store
diff --git a/example/App.tsx b/example/App.tsx
index cd9e4b3..367d69b 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -6,6 +6,7 @@ import {
   Artboard,
   ArtboardRef,
   useShadingBrush,
+  useEraser,
   useWatercolor,
   ToolHandlers,
 } from "../src/";
@@ -14,6 +15,7 @@ import {
   FaPencilAlt,
   FaPaintBrush,
   FaMarker,
+  FaEraser,
   FaSprayCan,
   FaDownload,
   FaTrash,
@@ -41,6 +43,7 @@ export function App(): JSX.Element {
   const marker = useMarker({ color, strokeWidth });
   const watercolor = useWatercolor({ color, strokeWidth });
   const airbrush = useAirbrush({ color, strokeWidth });
+  const eraser = useEraser({ strokeWidth });
   const shading = useShadingBrush({
     color,
     spreadFactor: (1 / 45) * strokeWidth,
@@ -52,6 +55,7 @@ export function App(): JSX.Element {
     [brush, FaPaintBrush],
     [marker, FaMarker],
     [airbrush, FaSprayCan],
+    [eraser, FaEraser],
   ];
   const [currentTool, setCurrentTool] = useState(0);
 
diff --git a/example/style.css b/example/style.css
index 6529ec4..376b16b 100644
--- a/example/style.css
+++ b/example/style.css
@@ -97,12 +97,15 @@ label span {
   display: inline-flex;
   cursor: pointer;
   border: none;
-  place-items: center;
+  align-items: center;
+  justify-content: center;
   width: 32px;
   height: 32px;
   margin: 3px;
 }
 
+
+
 @media screen and (max-width: 500px) {
   main {
     grid-template-columns: 1fr 1fr;
diff --git a/src/index.ts b/src/index.ts
index bc4d944..55607bb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,6 +3,7 @@ export * from "./tools/marker/useMarker";
 export * from "./tools/airbrush/useAirbrush";
 export * from "./tools/shading/useShadingBrush";
 export * from "./tools/watercolor/useWatercolor";
+export * from "./tools/eraser/useEraser";
 export * from "./components/Artboard";
 export * from "./utils/pointUtils";
 export * from "./history";
diff --git a/src/tools/eraser/useEraser.ts b/src/tools/eraser/useEraser.ts
new file mode 100644
index 0000000..45d8fb1
--- /dev/null
+++ b/src/tools/eraser/useEraser.ts
@@ -0,0 +1,35 @@
+import { useCallback } from "react";
+import { ToolHandlers } from "../../components/Artboard";
+import { Point } from "../../utils/pointUtils";
+import { circleCursor } from "../../utils/cursors";
+export interface UseEraserProps {
+  color?: string;
+  strokeWidth?: number;
+}
+
+export function useEraser({ strokeWidth = 25 }: UseEraserProps): ToolHandlers {
+  const startStroke = useCallback(
+    (point: Point, context: CanvasRenderingContext2D) => {
+      context.globalCompositeOperation = "source-over";
+
+      context.lineWidth = strokeWidth;
+      context.strokeStyle = "#ffffff";
+      context.lineJoin = context.lineCap = "round";
+      context.moveTo(point[0], point[1]);
+      context.beginPath();
+    },
+    [strokeWidth]
+  );
+
+  const continueStroke = useCallback(
+    (point: Point, context: CanvasRenderingContext2D) => {
+      context.lineTo(point[0], point[1]);
+      context.stroke();
+    },
+    []
+  );
+
+  const cursor = circleCursor(strokeWidth);
+
+  return { name: "Eraser", startStroke, continueStroke, cursor };
+}