Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added typescript and update old dependencies to React v.18 #237

Open
wants to merge 21 commits into
base: master
Choose a base branch
from
Open

Added typescript and update old dependencies to React v.18 #237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
fb72cbf
added ts and vite
yasenytskyoleh Apr 5, 2024
f529b2c
update types
yasenytskyoleh Apr 9, 2024
aef1c19
Merge remote-tracking branch 'origin/feature/typescript'
yasenytskyoleh Apr 10, 2024
a9ceb31
finished update typescript
yasenytskyoleh Apr 11, 2024
8781aa4
Merge remote-tracking branch 'origin/feature/typescript'
yasenytskyoleh Apr 11, 2024
116dba1
extend region classlist prop to array object
yasenytskyoleh Apr 12, 2024
9749868
update tpyse and config
yasenytskyoleh Apr 15, 2024
bc6ae80
Merge remote-tracking branch 'origin/feature/region-classlist'
yasenytskyoleh Apr 15, 2024
b209688
remove dependency with old react
yasenytskyoleh Apr 15, 2024
2feb5cc
Merge remote-tracking branch 'origin/feature/fix-react-instances'
yasenytskyoleh Apr 15, 2024
22124c7
removed dependencis with react v.17 dependency
yasenytskyoleh Apr 16, 2024
28dec45
fixed re-export types
yasenytskyoleh Apr 17, 2024
c2244cc
fixed save action
yasenytskyoleh Apr 17, 2024
f9fa0c3
extend region selector with config allowed actions
yasenytskyoleh Apr 22, 2024
842424c
Merge remote-tracking branch 'origin/feature/extend-region-actions'
yasenytskyoleh Apr 22, 2024
736d78b
fixed package.json
yasenytskyoleh Apr 22, 2024
ce8f0f8
Merge remote-tracking branch 'origin/feature/extend-region-actions'
yasenytskyoleh Apr 22, 2024
dce4729
removed log
yasenytskyoleh Apr 22, 2024
4f4cffe
Merge remote-tracking branch 'origin/feature/extend-region-actions'
yasenytskyoleh Apr 22, 2024
0f66300
fixed broken restore from history, scroll for sidebars
yasenytskyoleh May 2, 2024
d35c761
Merge remote-tracking branch 'origin/feature/broken-history'
yasenytskyoleh May 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions .babelrc
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,4 @@ dist
secret.*
secret.story.*
*.secret.*
.idea
7 changes: 7 additions & 0 deletions .idea/.gitignore
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

60 changes: 60 additions & 0 deletions .idea/codeStyles/Project.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions .idea/codeStyles/codeStyleConfig.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions .idea/inspectionProfiles/Project_Default.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions .idea/misc.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 8 additions & 0 deletions .idea/modules.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 7 additions & 0 deletions .idea/prettier.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 16 additions & 0 deletions .idea/react-image-annotate.iml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions .idea/vcs.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 4 additions & 0 deletions .npmignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.idea
.github
node_modules
src
2 changes: 1 addition & 1 deletion .prettierrc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"semi": false
"semi": true
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why change this?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I accidentally changed it, i will fix it

}
2 changes: 0 additions & 2 deletions .storybook/addons.js
View file
Open in desktop

This file was deleted.

16 changes: 0 additions & 16 deletions .storybook/config.js
View file
Open in desktop

This file was deleted.

73 changes: 41 additions & 32 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
# React Image Annotate

[![npm version](https://badge.fury.io/js/react-image-annotate.svg)](https://badge.fury.io/js/react-image-annotate)
[![npm version](https://img.shields.io/npm/v/@idapgroup/react-image-annotate.svg)](https://www.npmjs.com/package/@idapgroup/react-image-annotate)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can basically remove the README changes here


The best image/video annotation tool ever. [Check out the demo here](https://universaldatatool.github.io/react-image-annotate/). Or the [code sandbox here](https://codesandbox.io/s/react-image-annotate-example-38tsc?file=/src/App.js:0-403).
Fork of react-image-annotate - The best image/video annotation tool
ever. [Check out the demo here](https://universaldatatool.github.io/react-image-annotate/). Or
the [code sandbox here](https://codesandbox.io/s/react-image-annotate-example-38tsc?file=/src/App.js:0-403).

## Sponsors
Implemented features in fork:

[![wao.ai sponsorship image](https://s3.amazonaws.com/asset.workaround.online/sponsorship-banner-1.png)](https://wao.ai)
- added typescript
- updated react to v.18

## Features

Expand All @@ -20,11 +23,11 @@ The best image/video annotation tool ever. [Check out the demo here](https://uni

## Usage

`npm install react-image-annotate`
`npm i @idapgroup/react-image-annotate`

```javascript
import React from "react";
import ReactImageAnnotate from "react-image-annotate";
import ReactImageAnnotate from "@idapgroup/react-image-annotate";

const App = () => (
<ReactImageAnnotate
Expand Down Expand Up @@ -56,42 +59,48 @@ following line added to a css file should suffice.

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<string>` | Allowed "tags" (mutually inclusive classifications) for regions. | |
| `regionClsList` | `Array<string>` | Allowed "classes" (mutually exclusive classifications) for regions. | |
| `imageTagList` | `Array<string>` | Allowed tags for entire image. | |
| `imageClsList` | `Array<string>` | Allowed classes for entire image. | |
| `enabledTools` | `Array<string>` | 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<Image>` | 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)) | |
| `allowComments` | `boolean` | Show a textarea to add comments on each annotation. | `false` |
| `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` |
| 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<string>` | Allowed "tags" (mutually inclusive classifications) for regions. | |
| `regionClsList` | `Array<string>` | Allowed "classes" (mutually exclusive classifications) for regions. | |
| `regionTagSingleSelection` | `boolean` | Allowed select only one tag for image. | |
| `regionAllowedActions` | `{remove?:boolean, lock?:boolean, visibility?: boolean` | Allowed actions for region in regions list. | Everything. |
| `imageTagList` | `Array<string>` | Allowed tags for entire image. | |
| `imageClsList` | `Array<string>` | Allowed classes for entire image. | |
| `enabledTools` | `Array<string>` | 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<Image>` | 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)) | |
| `allowComments` | `boolean` | Show a textarea to add comments on each annotation. | `false` |
| `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` |

## Developers

### Development

This project uses [react-storybook](https://storybook.js.org/). To begin developing run the following commands in the cloned repo.
This project uses [react-storybook](https://storybook.js.org/). To begin developing run the following commands in the
cloned repo.

1. `yarn install`
2. `yarn storybook`
2. `yarn add react react-dom`
3. For production build need remove `react` and `react-dom` packages and
run `yarn build` - it fix the issue with `react` and `react-dom` versions in your project.

A browser tab will automatically open with the project components.

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/waoai/react-image-annotate/wiki/Setup-for-Development).

### Icons

Expand Down
Loading