# React Image Annotate (SwitchOn Fork)

[![npm version](https://badge.fury.io/js/react-image-annotate-switchon1.svg)](https://badge.fury.io/js/react-image-annotate-switchon1)

A powerful image/video annotation tool for React. Forked from [UniversalDataTool/react-image-annotate](https://github.com/UniversalDataTool/react-image-annotate) with additional features and security fixes.

## Features

- Simple input/output format
- Bounding Box, Point and Polygon Annotation
- Zooming, Scaling, Panning
- Multiple Images
- Cursor Crosshair
- Classification sidebar with hotkeys
- Configurable overlapping boundary for regions

![Screenshot of Annotator](https://user-images.githubusercontent.com/1910070/51199716-83c72080-18c5-11e9-837c-c3a89c8caef4.png)

## Installation

```bash
npm install react-image-annotate-switchon1
```

## Usage

```javascript
import React from "react";
import ReactImageAnnotate from "react-image-annotate-switchon1";

const App = () => (
  <ReactImageAnnotate
    labelImages
    regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
    regionTagList={["tag1", "tag2", "tag3"]}
    images={[
      {
        src: "https://placekitten.com/408/287",
        name: "Image 1",
        regions: []
      }
    ]}
  />
);

export default App;
```

To get the proper fonts, make sure to import the Inter UI or Roboto font:

```css
@import url("https://rsms.me/inter/inter.css");
```

## Props

| 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 region edit form                                              |               |
| `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`       |

## Development

### Prerequisites

- Node.js >= 16
- npm >= 8

### Setup

```bash
git clone https://github.com/switchontech/react-image-annotate-switchon.git
cd react-image-annotate-switchon
npm install --legacy-peer-deps
```

### Scripts

| Command              | Description                          |
| -------------------- | ------------------------------------ |
| `npm start`          | Start the development server         |
| `npm run build`      | Build the library for publishing     |
| `npm run storybook`  | Launch Storybook for component dev   |
| `npm run prettier`   | Format source files with Prettier    |
| `npm run dist`       | Build and publish to npm             |

### Branch Strategy

- `master` — stable release branch
- `develop` — active development branch

### Icons

Consult these icon repositories:

- [Material Icons](https://material.io/tools/icons/)
- [Font Awesome Icons](https://fontawesome.com/icons?d=gallery&m=free)

## License

ISC