diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 54c7ad1..669866a 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -21,6 +21,6 @@ ### Before submitting the PR, please make sure you do the following -- [ ] Read the [Contributing Guidelines](https://github.com/dansreis/react-image-annotator/blob/main/CONTRIBUTING.md). +- [ ] Read the [Contributing Guidelines](https://github.com/dansreis/react-canvas-annotator/blob/main/CONTRIBUTING.md). - [ ] Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate. - [ ] Provide a description in this PR that addresses **what** the PR is solving, or reference the issue that it solves (e.g. `fixes #123`). \ No newline at end of file diff --git a/README.md b/README.md index 455d448..ab3a104 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,15 @@
-react-image-annotator +react-canvas-annotator
-# react-image-annotator +# react-canvas-annotator > Image Annotator Component for React Applications -[![NPM](https://img.shields.io/npm/v/@dansreis/react-image-annotator)](https://www.npmjs.com/package/@dansreis/react-image-annotator) -[![npm](https://img.shields.io/npm/dm/@dansreis/react-image-annotator)](https://www.npmjs.com/package/@dansreis/react-image-annotator) -[![Build Status](https://github.com/dansreis/react-image-annotator/actions/workflows/main.yml/badge.svg)](https://github.com/dansreis/react-image-annotator/actions) -![Github All Contributors](https://img.shields.io/github/all-contributors/dansreis/react-image-annotator) +[![NPM](https://img.shields.io/npm/v/@dansreis/react-canvas-annotator)](https://www.npmjs.com/package/@dansreis/react-canvas-annotator) +[![npm](https://img.shields.io/npm/dm/@dansreis/react-canvas-annotator)](https://www.npmjs.com/package/@dansreis/react-canvas-annotator) +[![Build Status](https://github.com/dansreis/react-canvas-annotator/actions/workflows/main.yml/badge.svg)](https://github.com/dansreis/react-canvas-annotator/actions) +![Github All Contributors](https://img.shields.io/github/all-contributors/dansreis/react-canvas-annotator) ## Features @@ -20,72 +20,48 @@ - [ ] image zoom and drag - [ ] Categorize annotations with colors and label -![Screenshot of Annotator](https://user-images.githubusercontent.com/1910070/51199716-83c72080-18c5-11e9-837c-c3a89c8caef4.png) +![Screenshot of Annotator](docs/annotations-board.png) ## Usage -`npm install @dansreis/react-image-annotator` +`npm install @dansreis/react-canvas-annotator` ```javascript import React from "react"; -import ReactImageAnnotate from "react-image-annotate"; +import Board from "react-canvas-annotator"; const App = () => ( - +
+ +
); export default App; ``` -To get the proper fonts, make sure to import the Inter UI or Roboto font, the -following line added to a css file should suffice. - -```css -@import url("https://rsms.me/inter/inter.css"); -``` - ## Props All of the following properties can be defined on the Annotator... | Prop | Type (\* = required) | Description | Default | | ------------------------ | ------------------------------------------------ | --------------------------------------------------------------------------------------- | ------------- | -| `taskDescription` | \*`string` | Markdown description for what to do in the image. | | -| `allowedArea` | `{ x: number, y: number, w: number, h: number }` | Area that is available for annotation. | Entire image. | -| `regionTagList` | `Array` | Allowed "tags" (mutually inclusive classifications) for regions. | | -| `regionClsList` | `Array` | Allowed "classes" (mutually exclusive classifications) for regions. -| `regionColorList` | `Array` | Custom color list for regions. Default colors are used if not specified. -| `preselectCls` | `string` | Put in the class that should be preselected when creating a new Box/Polygon etc. | | -| `imageTagList` | `Array` | Allowed tags for entire image. | | -| `imageClsList` | `Array` | Allowed classes for entire image. | | -| `enabledTools` | `Array` | Tools allowed to be used. e.g. "select", "create-point", "create-box", "create-polygon" | Everything. | -| `showTags` | `boolean` | Show tags and allow tags on regions. | `true` | -| `selectedImage` | `string` | URL of initially selected image. | | -| `images` | `Array` | Array of images to load into annotator | | -| `showPointDistances` | `boolean` | Show distances between points. | `false` | -| `pointDistancePrecision` | `number` | Precision on displayed points (e.g. 3 => 0.123) | | -| `onExit` | `MainLayoutState => any` | Called when "Save" is called. | | -| `RegionEditLabel` | `Node` | React Node overriding the form to update the region (see [`RegionLabel`](https://github.com/waoai/react-image-annotate/blob/master/src/RegionLabel/index.js)) | | -| `enabledRegionProps` | `boolean` | Which properties to show in region edit popup ("class", "tags", "name", "comment") | [`class`, `name`] | -| `hidePrev` | `boolean` | Hide `Previous Image` button from the header bar. | `false` | -| `hideNext` | `boolean` | Hide `Next Image` button from the header bar. | `false` | -| `hideClone` | `boolean` | Hide `Clone` button from the header bar. | `false` | -| `hideSettings` | `boolean` | Hide `Settings` button from the header bar. | `false` | -| `hideFullScreen` | `boolean` | Hide `FullScreen/Window` button from the header bar. | `false` | -| `hideSave` | `boolean` | Hide `Save` button from the header bar. | `false` | -| `userReducer` | `(state, action) => state` | User defined reducer that receives every event triggered within the annotator. See demo site for example. | | +| `TODO1` | \*`string` | Markdown description for what to do in the image. | | +| `TODO2` | `{ x: number, y: number }` | Area that is available for annotation. | Entire image. | + ## Developers @@ -96,13 +72,22 @@ To begin developing run the following commands in the cloned repo. 1. `npm install` 2. `npm start` -Then navigate to http://localhost:5173/ and start testing. +Then navigate to http://localhost:6006/ and start testing. -See more details in the [contributing guidelines](https://github.com/waoai/react-image-annotate/wiki/Setup-for-Development). +See more details in the [contributing guidelines](https://github.com/dansreis/react-canvas-annotator/blob/main/CONTRIBUTING.md). ### Icons Consult these icon repositories: -- [Material Icons](https://material.io/tools/icons/) -- [Font Awesome Icons](https://fontawesome.com/icons?d=gallery&m=free) +- [Styled Components](https://material.io/tools/icons/) +- [FabricJS](https://github.com/fabricjs/fabric.js) + +## Donations +Buy Me A Coffee + +## License + +MIT © [Daniel Reis](https://github.com/dansreis) + +Feel free to collaborate. diff --git a/docs/annotations-board.png b/docs/annotations-board.png new file mode 100644 index 0000000..aa071ee Binary files /dev/null and b/docs/annotations-board.png differ diff --git a/docs/logo.svg b/docs/logo.svg new file mode 100644 index 0000000..68daed8 --- /dev/null +++ b/docs/logo.svg @@ -0,0 +1,144 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/example/package-lock.json b/example/package-lock.json index adcda02..65c28c1 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -9,8 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-image-annotator": "../" + "react-canvas-annotator": "../", + "react-dom": "^18.2.0" }, "devDependencies": { "@types/react": "^18.2.66", @@ -26,32 +26,35 @@ } }, "..": { - "name": "@dansreis/react-image-annotator", - "version": "0.0.1", + "name": "@dansreis/react-canvas-annotator", + "version": "0.0.3", "license": "MIT", "dependencies": { "fabric": "^5.3.0", - "fabricjs-react": "^1.2.2" + "fabricjs-react": "^1.2.2", + "react-icons": "^5.0.1", + "styled-components": "^6.1.8" }, "devDependencies": { - "@chromatic-com/storybook": "^1.2.25", - "@storybook/addon-essentials": "^8.0.4", - "@storybook/addon-interactions": "^8.0.4", - "@storybook/addon-links": "^8.0.4", - "@storybook/addon-onboarding": "^8.0.4", - "@storybook/addon-themes": "^8.0.4", - "@storybook/blocks": "^8.0.4", - "@storybook/manager-api": "^8.0.4", - "@storybook/react": "^8.0.4", - "@storybook/react-vite": "^8.0.4", - "@storybook/test": "^8.0.4", - "@storybook/theming": "^8.0.4", + "@chromatic-com/storybook": "^1.2.26", + "@storybook/addon-essentials": "^8.0.5", + "@storybook/addon-interactions": "^8.0.5", + "@storybook/addon-links": "^8.0.5", + "@storybook/addon-mdx-gfm": "^8.0.5", + "@storybook/addon-onboarding": "^8.0.5", + "@storybook/addon-themes": "^8.0.5", + "@storybook/blocks": "^8.0.5", + "@storybook/manager-api": "^8.0.5", + "@storybook/react": "^8.0.5", + "@storybook/react-vite": "^8.0.5", + "@storybook/test": "^8.0.5", + "@storybook/theming": "^8.0.5", "@testing-library/jest-dom": "^6.4.2", "@testing-library/react": "^14.2.2", "@types/fabric": "^5.3.7", - "@types/react": "^18.2.67", - "@typescript-eslint/eslint-plugin": "^7.3.1", - "@typescript-eslint/parser": "^7.3.1", + "@types/react": "^18.2.74", + "@typescript-eslint/eslint-plugin": "^7.5.0", + "@typescript-eslint/parser": "^7.5.0", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-prettier": "^5.1.3", @@ -59,15 +62,16 @@ "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", "eslint-plugin-storybook": "^0.8.0", + "gh-pages": "^6.1.1", "husky": "^9.0.11", "jsdom": "^24.0.0", "lint-staged": "^15.2.2", "prettier": "^3.2.5", "react": "^18.2.0", - "storybook": "^8.0.4", + "storybook": "^8.0.5", "typescript": "^5.4.3", - "vite": "^5.2.3", - "vite-plugin-dts": "^3.7.3", + "vite": "^5.2.8", + "vite-plugin-dts": "^3.8.1", "vitest": "^1.4.0" }, "peerDependencies": { @@ -2862,6 +2866,10 @@ "node": ">=0.10.0" } }, + "node_modules/react-canvas-annotator": { + "resolved": "..", + "link": true + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -2874,10 +2882,6 @@ "react": "^18.2.0" } }, - "node_modules/react-image-annotator": { - "resolved": "..", - "link": true - }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", diff --git a/example/package.json b/example/package.json index 4b86a1b..71b2294 100644 --- a/example/package.json +++ b/example/package.json @@ -12,7 +12,7 @@ "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", - "react-image-annotator": "../" + "react-canvas-annotator": "../" }, "devDependencies": { "@types/react": "^18.2.66", diff --git a/example/public/annotations-board.png b/example/public/annotations-board.png new file mode 100644 index 0000000..aa071ee Binary files /dev/null and b/example/public/annotations-board.png differ diff --git a/example/src/App.tsx b/example/src/App.tsx index 3992065..a16ef86 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -1,12 +1,11 @@ -import { Button, Header } from "react-image-annotator"; +import { Board } from "react-canvas-annotator"; import "./App.css"; function App() { return ( <> -