Skip to content

Commit 22124c7

Browse files
yasenytskyolehyasenytskyoleh
committed
removed dependencis with react v.17 dependency
fixed re-export types
1 parent 2feb5cc commit 22124c7

File tree

26 files changed

+413
-360
lines changed

26 files changed

+413
-360
lines changed

‎README.md

+39-32
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
# React Image Annotate
22

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

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

7-
## Sponsors
9+
Implemented features in fork:
810

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

1114
## Features
1215

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

2124
## Usage
2225

23-
`npm install react-image-annotate`
26+
`npm i @idapgroup/react-image-annotate`
2427

2528
```javascript
2629
import React from "react";
27-
import ReactImageAnnotate from "react-image-annotate";
30+
import ReactImageAnnotate from "@idapgroup/react-image-annotate";
2831

2932
const App = () => (
3033
<ReactImageAnnotate
@@ -56,42 +59,46 @@ following line added to a css file should suffice.
5659

5760
All of the following properties can be defined on the Annotator...
5861

59-
| Prop | Type (\* = required) | Description | Default |
60-
| ------------------------ | ------------------------------------------------ | --------------------------------------------------------------------------------------- | ------------- |
61-
| `taskDescription` | \*`string` | Markdown description for what to do in the image. | |
62-
| `allowedArea` | `{ x: number, y: number, w: number, h: number }` | Area that is available for annotation. | Entire image. |
63-
| `regionTagList` | `Array<string>` | Allowed "tags" (mutually inclusive classifications) for regions. | |
64-
| `regionClsList` | `Array<string>` | Allowed "classes" (mutually exclusive classifications) for regions. | |
65-
| `imageTagList` | `Array<string>` | Allowed tags for entire image. | |
66-
| `imageClsList` | `Array<string>` | Allowed classes for entire image. | |
67-
| `enabledTools` | `Array<string>` | Tools allowed to be used. e.g. "select", "create-point", "create-box", "create-polygon" | Everything. |
68-
| `showTags` | `boolean` | Show tags and allow tags on regions. | `true` |
69-
| `selectedImage` | `string` | URL of initially selected image. | |
70-
| `images` | `Array<Image>` | Array of images to load into annotator | |
71-
| `showPointDistances` | `boolean` | Show distances between points. | `false` |
72-
| `pointDistancePrecision` | `number` | Precision on displayed points (e.g. 3 => 0.123) | |
73-
| `onExit` | `MainLayoutState => any` | Called when "Save" is called. | |
74-
| `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)) | |
75-
| `allowComments` | `boolean` | Show a textarea to add comments on each annotation. | `false` |
76-
| `hidePrev` | `boolean` | Hide `Previous Image` button from the header bar. | `false` |
77-
| `hideNext` | `boolean` | Hide `Next Image` button from the header bar. | `false` |
78-
| `hideClone` | `boolean` | Hide `Clone` button from the header bar. | `false` |
79-
| `hideSettings` | `boolean` | Hide `Settings` button from the header bar. | `false` |
80-
| `hideFullScreen` | `boolean` | Hide `FullScreen/Window` button from the header bar. | `false` |
81-
| `hideSave` | `boolean` | Hide `Save` button from the header bar. | `false` |
62+
| Prop | Type (\* = required) | Description | Default |
63+
|--------------------------|--------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------|
64+
| `taskDescription` | \*`string` | Markdown description for what to do in the image. | |
65+
| `allowedArea` | `{ x: number, y: number, w: number, h: number }` | Area that is available for annotation. | Entire image. |
66+
| `regionTagList` | `Array<string>` | Allowed "tags" (mutually inclusive classifications) for regions. | |
67+
| `regionClsList` | `Array<string>` | Allowed "classes" (mutually exclusive classifications) for regions. | |
68+
| `imageTagList` | `Array<string>` | Allowed tags for entire image. | |
69+
| `imageClsList` | `Array<string>` | Allowed classes for entire image. | |
70+
| `enabledTools` | `Array<string>` | Tools allowed to be used. e.g. "select", "create-point", "create-box", "create-polygon" | Everything. |
71+
| `showTags` | `boolean` | Show tags and allow tags on regions. | `true` |
72+
| `selectedImage` | `string` | URL of initially selected image. | |
73+
| `images` | `Array<Image>` | Array of images to load into annotator | |
74+
| `showPointDistances` | `boolean` | Show distances between points. | `false` |
75+
| `pointDistancePrecision` | `number` | Precision on displayed points (e.g. 3 => 0.123) | |
76+
| `onExit` | `MainLayoutState => any` | Called when "Save" is called. | |
77+
| `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)) | |
78+
| `allowComments` | `boolean` | Show a textarea to add comments on each annotation. | `false` |
79+
| `hidePrev` | `boolean` | Hide `Previous Image` button from the header bar. | `false` |
80+
| `hideNext` | `boolean` | Hide `Next Image` button from the header bar. | `false` |
81+
| `hideClone` | `boolean` | Hide `Clone` button from the header bar. | `false` |
82+
| `hideSettings` | `boolean` | Hide `Settings` button from the header bar. | `false` |
83+
| `hideFullScreen` | `boolean` | Hide `FullScreen/Window` button from the header bar. | `false` |
84+
| `hideSave` | `boolean` | Hide `Save` button from the header bar. | `false` |
8285

8386
## Developers
8487

8588
### Development
8689

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

8993
1. `yarn install`
90-
2. `yarn storybook`
94+
2. `yarn add react react-dom`
95+
3. For production build need remove `react` and `react-dom` from `peerDependencies` in `package.json` and
96+
run `yarn install` again - it fix the issue with `react` and `react-dom` versions.
9197

9298
A browser tab will automatically open with the project components.
9399

94-
See more details in the [contributing guidelines](https://github.com/waoai/react-image-annotate/wiki/Setup-for-Development).
100+
See more details in
101+
the [contributing guidelines](https://github.com/waoai/react-image-annotate/wiki/Setup-for-Development).
95102

96103
### Icons
97104

‎package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@idapgroup/react-image-annotate",
3-
"version": "2.0.0",
3+
"version": "2.0.4",
44
"type": "module",
55
"main": "dist/react-image-annotate.js",
66
"types": "dist/lib.d.ts",
@@ -21,8 +21,6 @@
2121
"lodash": "^4.17.21",
2222
"moment": "^2.30.0",
2323
"monaco-editor": "^0.47.0",
24-
"react": "^18.0.0",
25-
"react-dom": "^18.0.0",
2624
"react-full-screen": "^1.1.1",
2725
"react-hotkeys": "^2.0.0",
2826
"react-markdown": "^9.0.0",
@@ -45,13 +43,15 @@
4543
"@types/react-dom": "^18.2.22",
4644
"@types/react-select": "^5.0.1",
4745
"@types/react-syntax-highlighter": "^15.5.11",
46+
"@types/rollup-plugin-peer-deps-external": "^2.2.5",
4847
"@types/seamless-immutable": "^7.1.4",
4948
"@vitejs/plugin-react": "^4.2.1",
5049
"cpy-cli": "^5.0.0",
5150
"cross-env": "^7.0.3",
5251
"gh-pages": "^2.0.1",
5352
"prettier": "^2.5.1",
5453
"react-github-btn": "^1.1.1",
54+
"rollup-plugin-peer-deps-external": "^2.2.4",
5555
"typescript": "^5.2.2",
5656
"vite": "^5.2.7",
5757
"vite-plugin-dts": "^3.8.1",
@@ -68,7 +68,7 @@
6868
"url": "https://github.com/idapgroup/react-image-annotate"
6969
},
7070
"scripts": {
71-
"start": "vite",
71+
"start": "vite --force",
7272
"build": "tsc && vite build",
7373
"prettier": "prettier --write \"src/**/*.js\"",
7474
"prettier:test": "prettier --check \"src/**/*.js\""

‎src/Annotator/index.tsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
// @flow
22

3-
import { Action, Image, MainLayoutState, ToolEnum } from "../MainLayout/types";
3+
import {
4+
Action,
5+
AnnotatorToolEnum,
6+
Image,
7+
MainLayoutState,
8+
} from "../MainLayout/types";
49
import { ComponentType, FunctionComponent, useEffect, useReducer } from "react";
510
import Immutable, { ImmutableObject } from "seamless-immutable";
611

@@ -20,10 +25,11 @@ export type AnnotatorProps = {
2025
taskDescription?: string;
2126
allowedArea?: { x: number; y: number; w: number; h: number };
2227
regionTagList?: Array<string>;
28+
regionTagSingleSelection?: boolean;
2329
regionClsList?: Array<string | { id: string; label: string }>;
2430
imageTagList?: Array<string>;
2531
imageClsList?: Array<string>;
26-
enabledTools?: Array<ToolEnum>;
32+
enabledTools?: Array<AnnotatorToolEnum>;
2733
selectedTool?: String;
2834
showTags?: boolean;
2935
selectedImage?: string | number;
@@ -69,6 +75,7 @@ export const Annotator = ({
6975
"show-mask",
7076
],
7177
selectedTool = "select",
78+
regionTagSingleSelection = false,
7279
regionTagList = [],
7380
regionClsList = [],
7481
imageTagList = [],
@@ -126,6 +133,7 @@ export const Annotator = ({
126133
labelImages: imageClsList.length > 0 || imageTagList.length > 0,
127134
regionClsList,
128135
regionTagList,
136+
regionTagSingleSelection,
129137
imageClsList,
130138
imageTagList,
131139
currentVideoTime: videoTime,

‎src/Annotator/reducers/general-reducer.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -986,7 +986,7 @@ export default <T extends ImmutableObject<MainLayoutState>>(
986986
case "help": {
987987
return state;
988988
}
989-
case "fullscreen": {
989+
case "full-screen": {
990990
return Immutable(state).setIn(["fullScreen"], true) as T;
991991
}
992992
case "exit fullscreen":

‎src/ClassSelectionMenu/index.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ export const ClassSelectionMenu = ({
9898
>
9999
{regionClsList.map((item, index) => (
100100
<LabelContainer
101+
key={typeof item === "object" ? item.id : item}
101102
className={classnames({
102103
selected: getRegionValue(item) === selectedCls,
103104
})}

‎src/DemoSite/Editor.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@ export const examples: Record<string, () => Omit<AnnotatorProps, "onExit">> = {
4444
FULL: () => ({
4545
taskDescription:
4646
"Annotate each image according to this _markdown_ specification.",
47-
regionTagList: ["has-bun"],
47+
regionTagList: ["has-bun", "has-sausage"],
48+
regionTagSingleSelection: true,
4849
regionClsList: [
4950
{ id: "1", label: "hotdog" },
5051
{ id: "2", label: "not-hotdog" },
@@ -231,6 +232,7 @@ const Editor = ({ onOpenAnnotator, lastOutput }: any) => {
231232
taskDescription?: string, // markdown
232233
regionTagList?: Array<string>,
233234
regionClsList?: Array<string>,
235+
regionTagSingleSelection?: boolean,
234236
imageTagList?: Array<string>,
235237
imageClsList?: Array<string>,
236238
// all tools are enabled by default

‎src/ImageCanvas/index.tsx

+8-2
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import useExcludePattern from "../hooks/use-exclude-pattern";
2828
import { useRafState } from "react-use";
2929
import PointDistances from "../PointDistances";
3030
import RegionTags from "../RegionTags";
31-
import RegionLabel from "../RegionLabel";
31+
import RegionLabel, { RegionLabelProps } from "../RegionLabel";
3232
import ImageMask from "../ImageMask";
3333
import RegionSelectAndTransformBoxes from "../RegionSelectAndTransformBoxes";
3434
import VideoOrImageCanvasBackground from "../VideoOrImageCanvasBackground";
@@ -87,8 +87,12 @@ type Props = {
8787
pointDistancePrecision?: number;
8888
regionClsList?: Array<string> | Array<{ id: string; label: string }>;
8989
regionTagList?: Array<string>;
90+
regionTagSingleSelection?: boolean;
9091
allowedArea?: { x: number; y: number; w: number; h: number };
91-
RegionEditLabel?: ComponentType<any> | FunctionComponent<any> | null;
92+
RegionEditLabel?:
93+
| ComponentType<RegionLabelProps>
94+
| FunctionComponent<RegionLabelProps>
95+
| null;
9296
videoPlaying?: boolean;
9397
zoomOnAllowedArea?: boolean;
9498
fullImageSegmentationMode?: boolean;
@@ -158,6 +162,7 @@ export const ImageCanvas = ({
158162
pointDistancePrecision = 0,
159163
regionClsList,
160164
regionTagList,
165+
regionTagSingleSelection,
161166
showCrosshairs,
162167
showHighlightBox = true,
163168
showPointDistances,
@@ -447,6 +452,7 @@ export const ImageCanvas = ({
447452
mouseEvents={mouseEvents}
448453
regionClsList={regionClsList}
449454
regionTagList={regionTagList}
455+
regionTagSingleSelection={regionTagSingleSelection}
450456
onBeginRegionEdit={onBeginRegionEdit}
451457
onChangeRegion={onChangeRegion}
452458
onCloseRegionEdit={onCloseRegionEdit}

‎src/MainLayout/icon-dictionary.tsx

+5-7
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
44
import {
55
faChartLine,
6+
faCompress,
67
faCrosshairs,
78
faDrawPolygon,
89
faEdit,
910
faExpand,
1011
faGripLines,
1112
faHandPaper,
12-
faHandPointer,
1313
faMask,
1414
faMousePointer,
1515
faSearch,
@@ -77,12 +77,10 @@ export const iconDictionary: Record<
7777
<FontAwesomeIcon style={faStyle} size="xs" fixedWidth icon={faExpand} />
7878
),
7979
"full-screen": () => (
80-
<FontAwesomeIcon
81-
style={faStyle}
82-
size="xs"
83-
fixedWidth
84-
icon={faHandPointer}
85-
/>
80+
<FontAwesomeIcon style={faStyle} size="xs" fixedWidth icon={faExpand} />
81+
),
82+
window: () => (
83+
<FontAwesomeIcon style={faStyle} size="xs" fixedWidth icon={faCompress} />
8684
),
8785
};
8886

0 commit comments

Comments
 (0)