Update example

.eslintrc.json

@@ -1,22 +1,22 @@
 {
-    "rules": {},
-    "env": {
-        "es6": true,
-        "browser": true
-    },
-    "parserOptions": {
-        "ecmaVersion": 2018,
-        "sourceType": "module",
-        "ecmaFeatures": {
-            "jsx": true
-        }
-    },
-    "extends": [
-        "eslint:recommended",
-        "plugin:prettier/recommended",
-        "plugin:react-hooks/recommended"
-    ],
-    "plugins": [
-        "react"
-    ]
-}
+  "rules": {},
+  "parser": "@typescript-eslint/parser",
+  "env": {
+    "es6": true,
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "plugins": ["react", "@typescript-eslint", "react-hooks"]
+}

example/App.tsx

@@ -6,22 +6,47 @@ import {
   Artboard,
   ArtboardRef,
   useShadingBrush,
+  useWatercolor,
+  ToolHandlers,
 } from "../src/";
+
+import {
+  FaPencilAlt,
+  FaPaintBrush,
+  FaMarker,
+  FaSprayCan,
+  FaDownload,
+  FaTrash,
+  FaUndo,
+  FaRedo,
+  FaGithub,
+} from "react-icons/fa";
+
+import { IoMdWater } from "react-icons/io";
+
 import { useHistory } from "../src/history";
 import "./style.css";
-export function App() {
-  const [color, setColor] = useState("#333333");
+import type { IconType } from "react-icons/lib";
+export function App(): JSX.Element {
+  const [color, setColor] = useState("#531B93");
   const [strokeWidth, setStrokeWidth] = useState(40);
   const [artboardRef, setArtboardRef] = useState<ArtboardRef | null>();
   const brush = useBrush({ color, strokeWidth });
   const marker = useMarker({ color, strokeWidth });
+  const watercolor = useWatercolor({ color, strokeWidth });
   const airbrush = useAirbrush({ color, strokeWidth });
   const shading = useShadingBrush({
     color,
     spreadFactor: (1 / 45) * strokeWidth,
     distanceThreshold: 100,
   });
-  const tools = [shading, brush, marker, airbrush];
+  const tools: Array<[ToolHandlers, IconType]> = [
+    [shading, FaPencilAlt],
+    [watercolor, IoMdWater],
+    [brush, FaPaintBrush],
+    [marker, FaMarker],
+    [airbrush, FaSprayCan],
+  ];
   const [currentTool, setCurrentTool] = useState(0);
 
   const { undo, redo, history, canUndo, canRedo } = useHistory();
@@ -36,18 +61,10 @@ export function App() {
         maxWidth: "calc(100vw - 20px)",
       }}
     >
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "center",
-          marginBottom: 5,
-          overflow: "scroll",
-        }}
-      >
+      <div className="toolbar" style={{ justifyContent: "flex-start" }}>
         <h1>
           <a href="https://github.com/ascorbic/react-artboard">
-            react-artboard
+            react-artboard <FaGithub />
           </a>
         </h1>
         <label>
@@ -69,30 +86,40 @@ export function App() {
           />
           <span>{strokeWidth}</span>
         </label>
-        <button onClick={undo} disabled={!canUndo}>
-          Undo
-        </button>
-        <button onClick={redo} disabled={!canRedo}>
-          Redo
-        </button>
-
-        <div style={{ display: "flex" }}>
-          {tools.map((tool, index) => (
-            <label key={tool.name} style={{ cursor: "pointer" }}>
-              <input
-                type="radio"
-                checked={index === currentTool}
-                onChange={() => setCurrentTool(index)}
-              />{" "}
-              {tool.name}{" "}
-            </label>
+      </div>
+      <div className="toolbar">
+        <div className="toolbarSection">
+          {tools.map(([tool, Icon], index) => (
+            <button
+              aria-label={tool.name}
+              key={tool.name}
+              title={tool.name}
+              style={{
+                backgroundColor: currentTool === index ? "#aaaaff" : "#eeeeee",
+              }}
+              onClick={() => setCurrentTool(index)}
+            >
+              {<Icon title={tool.name} />}
+            </button>
           ))}
         </div>
-        <button onClick={() => artboardRef?.download()}>Download</button>
-        <button onClick={() => artboardRef?.clear()}>Clear</button>
+        <div className="toolbarSection">
+          <button onClick={undo} disabled={!canUndo}>
+            <FaUndo title="Undo" />
+          </button>
+          <button onClick={redo} disabled={!canRedo}>
+            <FaRedo title="Redo" />
+          </button>
+          <button onClick={() => artboardRef?.download()}>
+            <FaDownload title="Download" />
+          </button>
+          <button onClick={() => artboardRef?.clear()}>
+            <FaTrash title="Clear" />
+          </button>
+        </div>
       </div>
       <Artboard
-        tool={tools[currentTool]}
+        tool={tools[currentTool][0]}
         ref={setArtboardRef}
         history={history}
         style={{ border: "1px gray solid", flex: 1 }}

example/style.css

@@ -7,7 +7,7 @@ label {
   display: flex;
   align-items: center;
   flex-direction: row;
-  margin: 0 20px;
+  font-size: 12px;
 }
 
 input {
@@ -24,5 +24,27 @@ a:visited {
 }
 
 label span {
-  width: 40px;
+  width: 20px;
+}
+
+.toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.toolbarSection {
+  display: flex;
+  justify-content: center;
+}
+
+.toolbar button {
+  font-size: 2em;
+  cursor: pointer;
+  border: none;
+  display: flex;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  margin: 3px;
 }

package.json

@@ -23,7 +23,9 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/tinycolor2": "^1.4.2",
-    "eslint": "^7.17.0",
+    "@typescript-eslint/eslint-plugin": "^4.13.0",
+    "@typescript-eslint/parser": "^4.13.0",
+    "eslint": "^7.18.0",
     "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-prettier": "^3.3.1",
     "eslint-plugin-react": "^7.22.0",
@@ -32,6 +34,7 @@
     "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-icons": "^4.1.0",
     "typescript": "^4.1.3"
   },
   "dependencies": {

src/index.ts

@@ -2,6 +2,7 @@ export * from "./tools/brush/useBrush";
 export * from "./tools/marker/useMarker";
 export * from "./tools/airbrush/useAirbrush";
 export * from "./tools/shading/useShadingBrush";
+export * from "./tools/watercolor/useWatercolor";
 export * from "./components/Artboard";
 export * from "./utils/pointUtils";
 export { circleCursor } from "./utils/cursors";