From 25f39b464690c5c92a1d7d2933c9333c928e7400 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Mon, 18 Jan 2021 21:59:04 +0000 Subject: [PATCH] Update example --- .eslintrc.json | 42 ++++---- example/App.tsx | 93 +++++++++++------ example/style.css | 26 ++++- package.json | 5 +- src/index.ts | 1 + yarn.lock | 255 ++++++++++++++++++++++++++++++++++++++++++---- 6 files changed, 348 insertions(+), 74 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index f38f8bc..ff27666 100644 --- a/.eslintrc.json +++ b/.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" - ] -} \ No newline at end of file + "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"] +} diff --git a/example/App.tsx b/example/App.tsx index f8b06d9..387708f 100644 --- a/example/App.tsx +++ b/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(); 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)", }} > -
+

- react-artboard + react-artboard

- - - -
- {tools.map((tool, index) => ( - +
+
+
+ {tools.map(([tool, Icon], index) => ( + ))}
- - +
+ + + + +