@searpent/react-image-annotate 2.0.0

package/.babelrc

@@ -0,0 +1,6 @@
+{
+    "presets": [
+        [ "react-app", { "absoluteRuntime": false } ]
+    ],
+    "plugins": ["@babel/plugin-proposal-optional-chaining"]
+}

package/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

package/.flowconfig

@@ -0,0 +1,2 @@
+[options]
+esproposal.optional_chaining=enable

package/.github/workflows/release-on-master.yml

@@ -0,0 +1,32 @@
+name: Release
+on:
+  push:
+    branches:
+      - master
+jobs:
+  release:
+    if: "!contains(github.event.head_commit.message, 'skip ci')"
+    name: Release
+    runs-on: ubuntu-18.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Install dependencies
+        run: npm install
+      - name: Build Package
+        run: npm run build
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.RELEASE_GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release
+      - name: Publish github pages
+        run: |
+          git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/waoai/react-image-annotate.git
+          npm run gh-pages -- -u "github-actions-bot <support+actions@github.com>"
+        env:
+          GITHUB_TOKEN: ${{ secrets.RELEASE_GITHUB_TOKEN }}

package/.github/workflows/test.yml

@@ -0,0 +1,16 @@
+name: Test
+on: ["push", "pull_request"]
+jobs:
+  test:
+    if: "!contains(github.event.head_commit.message, 'skip ci')"
+    name: Test
+    runs-on: ubuntu-18.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v1
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: Run Prettier Test
+        run: npx prettier --check "src/**/*.js"

package/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "semi": false
+}

package/.releaserc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  branch: "master",
+  plugins: [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    ["@semantic-release/npm", { npmPublish: false }],
+    ["@semantic-release/npm", { npmPublish: true, pkgRoot: "dist" }],
+    "@semantic-release/github",
+    [
+      "@semantic-release/git",
+      {
+        assets: ["package.json"],
+        message:
+          "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}",
+      },
+    ],
+  ],
+}

package/.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

package/.storybook/config.js

@@ -0,0 +1,16 @@
+// @flow
+
+import React from "react"
+import Theme from "../src/Theme"
+import { configure, addDecorator } from "@storybook/react"
+import { action } from "@storybook/addon-actions"
+import SettingsProvider from "../src/SettingsProvider"
+
+addDecorator(storyFn => <Theme>{storyFn()}</Theme>)
+// addDecorator(storyFn => <SettingsProvider>{storyFn()}</SettingsProvider>)
+
+function loadStories() {
+  require("../src/stories")
+}
+
+configure(loadStories, module)

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 WorkAround Online Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,101 @@
+# React Image Annotate (Searpent fork)
+
+[![npm version](https://badge.fury.io/js/react-image-annotate.svg)](https://badge.fury.io/js/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
+
+[![wao.ai sponsorship image](https://s3.amazonaws.com/asset.workaround.online/sponsorship-banner-1.png)](https://wao.ai)
+
+## Features
+
+- Simple input/output format
+- Bounding Box, Point and Polygon Annotation
+- Zooming, Scaling, Panning
+- Multiple Images
+- Cursor Crosshair
+
+![Screenshot of Annotator](https://user-images.githubusercontent.com/1910070/51199716-83c72080-18c5-11e9-837c-c3a89c8caef4.png)
+
+## Usage
+
+`npm install react-image-annotate`
+
+```javascript
+import React from "react";
+import ReactImageAnnotate from "react-image-annotate";
+
+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, 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<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`       |
+
+## Developers
+
+### Development
+
+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`
+
+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).
+
+### Icons
+
+Consult these icon repositories:
+
+- [Material Icons](https://material.io/tools/icons/)
+- [Font Awesome Icons](https://fontawesome.com/icons?d=gallery&m=free)

package/package.json

@@ -0,0 +1,93 @@
+{
+  "name": "@searpent/react-image-annotate",
+  "version": "2.0.0",
+  "dependencies": {
+    "@emotion/react": "^11.7.0",
+    "@emotion/styled": "^11.6.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.12",
+    "@fortawesome/free-solid-svg-icons": "^5.6.3",
+    "@fortawesome/react-fontawesome": "^0.1.3",
+    "@mui/icons-material": "^5.2.1",
+    "@mui/material": "^5.2.3",
+    "@mui/styles": "^5.2.3",
+    "@semantic-release/git": "^9.0.0",
+    "autoseg": "^0.0.12",
+    "clamp": "^1.0.1",
+    "color-alpha": "^1.0.4",
+    "get-image-data": "^3.0.1",
+    "material-survey": "^2.1.0",
+    "mmgc1-cpp": "^1.0.50",
+    "moment": "^2.23.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-full-screen": "^0.3.1",
+    "react-hotkeys": "^2.0.0",
+    "react-json-view": "^1.19.1",
+    "react-markdown": "^4.0.6",
+    "react-material-workspace-layout": "^1.0.10",
+    "react-monaco-editor": "^0.25.1",
+    "react-remove-scroll": "^2.0.4",
+    "react-select": "^3.0.8",
+    "react-syntax-highlighter": "^12.2.1",
+    "react-use": "^13.27.0",
+    "react-use-measure": "^2.0.0",
+    "seamless-immutable": "^7.1.4",
+    "shallow-equal": "^1.2.1",
+    "storybook": "^5.3.14",
+    "styled-components": "^5.2.1",
+    "transformation-matrix-js": "^2.7.6",
+    "use-event-callback": "^0.1.0",
+    "use-key-hook": "^1.3.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "homepage": "/react-image-annotate",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/UniversalDataTool/react-image-annotate.git"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 9090 -s public",
+    "build": "npm run build:babel && cp ./package.json ./dist/package.json && cp ./README.md ./dist/README.md",
+    "dist": "npm run build && cd dist && npm publish",
+    "build:babel": "NODE_ENV=production babel ./src --ignore \"src/**/*.story.js\" --out-dir=./dist && rm dist/index.js && cp dist/lib.js dist/index.js",
+    "build-storybook": "build-storybook",
+    "build:gh-pages": "CI=false react-scripts build && mkdir build/demo && cp build/index.html build/demo/index.html",
+    "gh-pages": "npm run build:gh-pages && gh-pages -d build",
+    "prettier": "prettier --write \"src/**/*.js\"",
+    "prettier:test": "prettier --check \"src/**/*.js\""
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/plugin-proposal-optional-chaining": "^7.11.0",
+    "@storybook/addon-actions": "^5.3.14",
+    "@storybook/addon-links": "^5.3.14",
+    "@storybook/addons": "^5.3.14",
+    "@storybook/react": "^5.3.14",
+    "babel-loader": "^8.0.5",
+    "babel-preset-react-app": "^7.0.0",
+    "gh-pages": "^2.0.1",
+    "prettier": "^2.5.1",
+    "raw.macro": "^0.3.0",
+    "react-github-btn": "^1.1.1",
+    "react-scripts": "^3.4.1"
+  },
+  "prettier": {
+    "semi": false
+  }
+}

package/public/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React Image Annotation</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/src/Annotator/dab-keyframes.story.json

@@ -0,0 +1 @@
+{"0":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.4746317908870222,"y":0.17626206226677932},"sternum":{"x":0.49229824456114357,"y":0.2736238514041595},"leftShoulder":{"x":0.4540209282672138,"y":0.2893273657811563},"leftHand":{"x":0.4487209921649774,"y":0.2694362475702937},"rightShoulder":{"x":0.5370532605355844,"y":0.27885835619649174},"leftElbow":{"x":0.41397696660587197,"y":0.3699387395830733},"rightElbow":{"x":0.5906415033470862,"y":0.364704234790741},"rightHand":{"x":0.6542407365739231,"y":0.4002988673786005}},"highlighted":true,"editingLabels":false,"id":"9442418802498487"}]},"479":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.4673470463145521,"y":0.19100168229192332},"sternum":{"x":0.49229824456114357,"y":0.2736238514041595},"leftShoulder":{"x":0.45402092826721374,"y":0.2893273657811563},"leftHand":{"x":0.4404478609960767,"y":0.3051551630931666},"rightShoulder":{"x":0.5370532605355844,"y":0.27885835619649174},"leftElbow":{"x":0.4328309749571659,"y":0.4222888613021013},"rightElbow":{"x":0.5874898343303621,"y":0.3913183287097443},"rightHand":{"x":0.6415204525487472,"y":0.44683362315624264}},"highlighted":true,"editingLabels":false,"id":"9442418802498487"}]},"716":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.4746317908870222,"y":0.17626206226677932},"sternum":{"x":0.49229824456114357,"y":0.2736238514041595},"leftShoulder":{"x":0.4540209282672138,"y":0.2893273657811563},"leftHand":{"x":0.4363544745930924,"y":0.3228281964520828},"rightShoulder":{"x":0.5370532605355844,"y":0.27885835619649174},"leftElbow":{"x":0.4251657205994822,"y":0.4170492827140638},"rightElbow":{"x":0.585930449033987,"y":0.4044864712124663},"rightHand":{"x":0.6389298100563513,"y":0.4411280047587922}},"highlighted":true,"editingLabels":false,"id":"9442418802498487"}]},"1095":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.4746317908870221,"y":0.17626206226677932},"sternum":{"x":0.49229824456114357,"y":0.2736238514041595},"leftShoulder":{"x":0.45402092826721374,"y":0.2893273657811563},"leftHand":{"x":0.44737492639237225,"y":0.476382614412626},"rightShoulder":{"x":0.5370532605355844,"y":0.27885835619649174},"leftElbow":{"x":0.4251657205994822,"y":0.4170492827140638},"rightElbow":{"x":0.5655850955624976,"y":0.42795303711459537},"rightHand":{"x":0.5894808372714573,"y":0.5232999966249137}},"highlighted":true,"editingLabels":false,"id":"9442418802498487"}]},"1118":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.4976149858125678,"y":0.17778527206277028},"sternum":{"x":0.49229824456114357,"y":0.2736238514041595},"leftShoulder":{"x":0.45402092826721374,"y":0.2893273657811563},"leftHand":{"x":0.4455200023009997,"y":0.4826821239054704},"rightShoulder":{"x":0.5370532605355844,"y":0.27885835619649174},"leftElbow":{"x":0.42592776068568866,"y":0.42512094920834825},"rightElbow":{"x":0.5672683442310021,"y":0.42601155864067825},"rightHand":{"x":0.5935719393363946,"y":0.5165015944201626}},"highlighted":true,"editingLabels":true,"id":"9442418802498487"}]},"1368":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.5017798209688135,"y":0.17963630990999058},"sternum":{"x":0.49229824456114357,"y":0.2736238514041595},"leftShoulder":{"x":0.45402092826721374,"y":0.28932736578115625},"leftHand":{"x":0.48879738488820257,"y":0.356707045987093},"rightShoulder":{"x":0.5370532605355843,"y":0.27885835619649174},"leftElbow":{"x":0.4251806625619568,"y":0.4172075506845399},"rightElbow":{"x":0.564526723209169,"y":0.4061013580655783},"rightHand":{"x":0.5498343845048111,"y":0.4866834521414889}},"highlighted":true,"editingLabels":true,"id":"9442418802498487"}]},"1373":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.5018631176719384,"y":0.179673330666935},"sternum":{"x":0.49229824456114357,"y":0.2736238514041595},"leftShoulder":{"x":0.4540209282672138,"y":0.2893273657811563},"leftHand":{"x":0.4893538356154567,"y":0.35528212616454297},"rightShoulder":{"x":0.5370532605355844,"y":0.27885835619649174},"leftElbow":{"x":0.4251657205994822,"y":0.4170492827140638},"rightElbow":{"x":0.585930449033987,"y":0.4044864712124663},"rightHand":{"x":0.5483298762505795,"y":0.4889846449138738}},"highlighted":true,"editingLabels":false,"id":"9442418802498487"}]},"1625":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.5018631176719384,"y":0.179673330666935},"sternum":{"x":0.49229824456114357,"y":0.2736238514041595},"leftShoulder":{"x":0.4540209282672138,"y":0.2893273657811563},"leftHand":{"x":0.4893538356154567,"y":0.35528212616454297},"rightShoulder":{"x":0.5454579431886196,"y":0.28828477914079875},"leftElbow":{"x":0.4251657205994822,"y":0.4170492827140638},"rightElbow":{"x":0.5775664698606539,"y":0.4049712346052037},"rightHand":{"x":0.5085707949521467,"y":0.4088800509647476}},"highlighted":true,"editingLabels":true,"id":"9442418802498487"}]},"1794":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.5018631176719384,"y":0.179673330666935},"sternum":{"x":0.49229824456114357,"y":0.2736238514041595},"leftShoulder":{"x":0.4540209282672138,"y":0.2893273657811563},"leftHand":{"x":0.4893538356154567,"y":0.35528212616454297},"rightShoulder":{"x":0.5370532605355844,"y":0.27885835619649174},"leftElbow":{"x":0.4251657205994822,"y":0.4170492827140638},"rightElbow":{"x":0.5719572933515534,"y":0.4052963338646188},"rightHand":{"x":0.5071732824961516,"y":0.40718439246878346}},"highlighted":true,"editingLabels":false,"id":"9442418802498487"}]},"2235":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.5018631176719384,"y":0.17967333066693503},"sternum":{"x":0.49229824456114357,"y":0.2736238514041595},"leftShoulder":{"x":0.4540209282672138,"y":0.2893273657811563},"leftHand":{"x":0.48980642347488146,"y":0.3397084520431372},"rightShoulder":{"x":0.5370532605355844,"y":0.27885835619649174},"leftElbow":{"x":0.4257163155055763,"y":0.41564655218944524},"rightElbow":{"x":0.5719572933515534,"y":0.4052963338646188},"rightHand":{"x":0.5067367749125811,"y":0.4064483881453737}},"highlighted":true,"editingLabels":true,"id":"9442418802498487"}]},"2623":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.5018631176719384,"y":0.17967333066693503},"sternum":{"x":0.49229824456114357,"y":0.2736238514041595},"leftShoulder":{"x":0.45402092826721374,"y":0.28932736578115636},"leftHand":{"x":0.4872300656474055,"y":0.34559726993451106},"rightShoulder":{"x":0.5370532605355844,"y":0.27885835619649174},"leftElbow":{"x":0.42620073914177703,"y":0.4144124037913681},"rightElbow":{"x":0.5719572933515534,"y":0.4052963338646187},"rightHand":{"x":0.5089450816218464,"y":0.40579407504633214}},"highlighted":true,"editingLabels":true,"id":"9442418802498487"}]},"2864":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.5018631176719384,"y":0.17967333066693503},"sternum":{"x":0.49229824456114357,"y":0.2736238514041595},"leftShoulder":{"x":0.4540209282672138,"y":0.28932736578115636},"leftHand":{"x":0.49311888353877925,"y":0.37176979389617243},"rightShoulder":{"x":0.5370532605355844,"y":0.27885835619649174},"leftElbow":{"x":0.42650163114261314,"y":0.41364583223483053},"rightElbow":{"x":0.5719572933515534,"y":0.4052963338646188},"rightHand":{"x":0.5048965193215269,"y":0.43196659900799356}},"highlighted":true,"editingLabels":false,"id":"9442418802498487"}]},"3001":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.5018631176719384,"y":0.179673330666935},"sternum":{"x":0.49229824456114357,"y":0.2736238514041595},"leftShoulder":{"x":0.4540209282672138,"y":0.2893273657811563},"leftHand":{"x":0.4747072291917559,"y":0.48474464491387376},"rightShoulder":{"x":0.5370532605355844,"y":0.27885835619649174},"leftElbow":{"x":0.4251657205994822,"y":0.4170492827140638},"rightElbow":{"x":0.5719572933515534,"y":0.4052963338646188},"rightHand":{"x":0.5262084056623442,"y":0.515722796174378}},"highlighted":true,"editingLabels":false,"id":"9442418802498487"}]},"3011":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.5018631176719384,"y":0.179673330666935},"sternum":{"x":0.49229824456114357,"y":0.2736238514041595},"leftShoulder":{"x":0.4540209282672138,"y":0.2893273657811563},"leftHand":{"x":0.4820773499924534,"y":0.48104008143610855},"rightShoulder":{"x":0.5370532605355844,"y":0.27885835619649174},"leftElbow":{"x":0.4252973252321734,"y":0.41426597685380695},"rightElbow":{"x":0.5725414114822169,"y":0.40306213118302386},"rightHand":{"x":0.5317642509509198,"y":0.517027301883393}},"highlighted":true,"editingLabels":true,"id":"9442418802498487"}]},"3091":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.5018631176719384,"y":0.179673330666935},"sternum":{"x":0.49229824456114357,"y":0.2736238514041595},"leftShoulder":{"x":0.4540209282672138,"y":0.2893273657811563},"leftHand":{"x":0.44306393146210193,"y":0.5274963114680574},"rightShoulder":{"x":0.5370532605355844,"y":0.27885835619649174},"leftElbow":{"x":0.42635016229370254,"y":0.39199952997175247},"rightElbow":{"x":0.5762984362544342,"y":0.41626308463099676},"rightHand":{"x":0.576666487372645,"y":0.5418911996469712}},"highlighted":true,"editingLabels":true,"id":"9442418802498487"}]},"3301":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.5018631176719384,"y":0.179673330666935},"sternum":{"x":0.49229824456114357,"y":0.2736238514041595},"leftShoulder":{"x":0.4540209282672138,"y":0.2893273657811563},"leftHand":{"x":0.4105282826954702,"y":0.3656471031771597},"rightShoulder":{"x":0.5370532605355844,"y":0.27885835619649174},"leftElbow":{"x":0.4291138595802166,"y":0.3335501069063595},"rightElbow":{"x":0.5894808372714573,"y":0.3382702534167713},"rightHand":{"x":0.6601060294334938,"y":0.40435230456253646}},"highlighted":true,"editingLabels":false,"id":"9442418802498487"}]},"3537":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.4307069090274806,"y":0.2278188250731353},"sternum":{"x":0.47318822762118673,"y":0.2957889348230651},"leftShoulder":{"x":0.44823045294738434,"y":0.29295684691681806},"leftHand":{"x":0.4774363594805573,"y":0.22970688367730002},"rightShoulder":{"x":0.5257588593808981,"y":0.25613970413560605},"leftElbow":{"x":0.4052181178712569,"y":0.3061732571459711},"rightElbow":{"x":0.5931979526484066,"y":0.26746805576059435},"rightHand":{"x":0.6786916063182402,"y":0.2419792646043707}},"highlighted":true,"editingLabels":false,"id":"9442418802498487"}]},"4306":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.45490878631628445,"y":0.20669718671199733},"sternum":{"x":0.4775885689464238,"y":0.2942243690185364},"leftShoulder":{"x":0.44427014575467094,"y":0.28669858369870316},"leftHand":{"x":0.4769963253480336,"y":0.2516108049407023},"rightShoulder":{"x":0.5257588593808981,"y":0.25613970413560605},"leftElbow":{"x":0.41049852746154136,"y":0.34606968516145387},"rightElbow":{"x":0.5999667042505391,"y":0.2735681705235042},"rightHand":{"x":0.6762419117855385,"y":0.24400117278228467}},"highlighted":true,"editingLabels":true,"id":"9442418802498487"}]},"4465":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.45991281556065355,"y":0.2023300339169116},"sternum":{"x":0.4784983924454,"y":0.29390087621890043},"leftShoulder":{"x":0.4434513046055924,"y":0.2854046125001592},"leftHand":{"x":0.476905342998136,"y":0.25613970413560605},"rightShoulder":{"x":0.5257588593808981,"y":0.25613970413560605},"leftElbow":{"x":0.4115903156603128,"y":0.3543187515521714},"rightElbow":{"x":0.5990391339550412,"y":0.30428519854180636},"rightHand":{"x":0.6686022931522351,"y":0.30239713993764167}},"highlighted":true,"editingLabels":false,"id":"9442418802498487"}]},"4810":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.4980040473937477,"y":0.18459443390996827},"sternum":{"x":0.49527667313378676,"y":0.28906389439882496},"leftShoulder":{"x":0.4547879807463942,"y":0.2854046125001592},"leftHand":{"x":0.46466173276607,"y":0.3488485223537189},"rightShoulder":{"x":0.5398163377954923,"y":0.28032461323598334},"leftElbow":{"x":0.42746166225743537,"y":0.39543309702281276},"rightElbow":{"x":0.5844822636231334,"y":0.3969339197196268},"rightHand":{"x":0.6469935239337719,"y":0.42242271087585054}},"highlighted":true,"editingLabels":true,"id":"9442418802498487"}]},"4869":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.504518200084045,"y":0.18156138927109972},"sternum":{"x":0.4981460022949891,"y":0.28823670040640625},"leftShoulder":{"x":0.4567267166661256,"y":0.2854046125001592},"leftHand":{"x":0.46256789797276016,"y":0.36470307387507733},"rightShoulder":{"x":0.5422203703359592,"y":0.2844605831980768},"leftElbow":{"x":0.4301758925450592,"y":0.4024642459583717},"rightElbow":{"x":0.5809845735527162,"y":0.38358365991672455},"rightHand":{"x":0.6484236668202246,"y":0.42323289060418356}},"highlighted":true,"editingLabels":false,"id":"9442418802498487"}]},"5352":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.509297348425837,"y":0.19005765298984095},"sternum":{"x":0.5023941341543596,"y":0.2891807297084886},"leftShoulder":{"x":0.45885078259581086,"y":0.2920128176147357},"leftHand":{"x":0.41849352993179006,"y":0.4968671761666076},"rightShoulder":{"x":0.5459374857129086,"y":0.29106878831265337},"leftElbow":{"x":0.4434513046055924,"y":0.40624036316670115},"rightElbow":{"x":0.5639920461152337,"y":0.427009007812513},"rightHand":{"x":0.5751433922460815,"y":0.5563410221977962}},"highlighted":true,"editingLabels":false,"id":"9442418802498487"}]},"5643":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.4938978704356184,"y":0.19194571159400564},"sternum":{"x":0.5023941341543596,"y":0.2891807297084886},"leftShoulder":{"x":0.45885078259581086,"y":0.2920128176147357},"leftHand":{"x":0.4434513046055924,"y":0.3014531106355593},"rightShoulder":{"x":0.5459374857129086,"y":0.29106878831265337},"leftElbow":{"x":0.43229995847474456,"y":0.3448784585313478},"rightElbow":{"x":0.5639920461152337,"y":0.427009007812513},"rightHand":{"x":0.562930013150391,"y":0.5676693738227845}},"highlighted":true,"editingLabels":false,"id":"9442418802498487"}]},"5957":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.49389787043561834,"y":0.19194571159400564},"sternum":{"x":0.5023941341543596,"y":0.2891807297084886},"leftShoulder":{"x":0.4588507825958108,"y":0.29201281761473563},"leftHand":{"x":0.45938179907823223,"y":0.2183785320523117},"rightShoulder":{"x":0.5459374857129085,"y":0.29106878831265337},"leftElbow":{"x":0.41477641455484077,"y":0.3175016087709594},"rightElbow":{"x":0.5639920461152337,"y":0.42700900781251294},"rightHand":{"x":0.5868257548593507,"y":0.5553969928957139}},"highlighted":true,"editingLabels":true,"id":"9442418802498487"}]},"6182":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.4938978704356184,"y":0.19194571159400564},"sternum":{"x":0.5023941341543596,"y":0.2891807297084886},"leftShoulder":{"x":0.45885078259581086,"y":0.2920128176147357},"leftHand":{"x":0.4370365444267241,"y":0.27512838513550697},"rightShoulder":{"x":0.5459374857129086,"y":0.29106878831265337},"leftElbow":{"x":0.41660051697537204,"y":0.3458765353125571},"rightElbow":{"x":0.5639920461152337,"y":0.427009007812513},"rightHand":{"x":0.5993932064495242,"y":0.5457884600719732}},"highlighted":true,"editingLabels":true,"id":"9442418802498487"}]},"6219":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.4938978704356184,"y":0.19194571159400564},"sternum":{"x":0.5023941341543596,"y":0.2891807297084886},"leftShoulder":{"x":0.45885078259581086,"y":0.2920128176147357},"leftHand":{"x":0.4333619914395872,"y":0.2844605831980768},"rightShoulder":{"x":0.5459374857129086,"y":0.29106878831265337},"leftElbow":{"x":0.41690048048452605,"y":0.350542634343842},"rightElbow":{"x":0.5639920461152337,"y":0.427009007812513},"rightHand":{"x":0.6012305895492022,"y":0.5461532388538225}},"highlighted":true,"editingLabels":false,"id":"9442418802498487"}]},"6222":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.4938978704356184,"y":0.19194571159400564},"sternum":{"x":0.5023941341543596,"y":0.2891807297084886},"leftShoulder":{"x":0.45885078259581086,"y":0.2920128176147357},"leftHand":{"x":0.4333619914395872,"y":0.2844605831980768},"rightShoulder":{"x":0.5459374857129086,"y":0.29106878831265337},"leftElbow":{"x":0.41690048048452605,"y":0.350542634343842},"rightElbow":{"x":0.5639920461152337,"y":0.427009007812513},"rightHand":{"x":0.6070043811913611,"y":0.5440686412707255}},"highlighted":true,"editingLabels":false,"id":"9442418802498487"}]},"6594":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.4938978704356184,"y":0.19194571159400564},"sternum":{"x":0.5023941341543596,"y":0.2891807297084886},"leftShoulder":{"x":0.45885078259581086,"y":0.2920128176147357},"leftHand":{"x":0.4121213321427341,"y":0.3288299603959477},"rightShoulder":{"x":0.5459374857129086,"y":0.29106878831265337},"leftElbow":{"x":0.41690048048452605,"y":0.350542634343842},"rightElbow":{"x":0.5708952603867109,"y":0.43456124222917186},"rightHand":{"x":0.5985081174726199,"y":0.5563410221977962}},"highlighted":true,"editingLabels":false,"id":"9442418802498487"}]},"6901":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.46681602983213083,"y":0.18533750647942915},"sternum":{"x":0.4869946561641412,"y":0.290124759010571},"leftShoulder":{"x":0.45885078259581086,"y":0.2920128176147357},"leftHand":{"x":0.46150586500791746,"y":0.22970688367730002},"rightShoulder":{"x":0.5459374857129086,"y":0.29106878831265337},"leftElbow":{"x":0.40628015083609953,"y":0.3118374329584653},"rightElbow":{"x":0.5512476505371218,"y":0.4364493008333366},"rightHand":{"x":0.5544337494316498,"y":0.5789977254477728}},"highlighted":true,"editingLabels":false,"id":"9442418802498487"}]},"7267":{"regions":[{"type":"keypoints","keypointsDefinitionId":"human","points":{"head":{"x":0.4439823210880137,"y":0.21932256135439407},"sternum":{"x":0.47637432651571476,"y":0.2891807297084886},"leftShoulder":{"x":0.4370791068165365,"y":0.30522922784388873},"leftHand":{"x":0.46150586500791746,"y":0.22970688367730002},"rightShoulder":{"x":0.5193866615918421,"y":0.2778523780835004},"leftElbow":{"x":0.3945977882228303,"y":0.30994937435430053},"rightElbow":{"x":0.550185617572279,"y":0.43078512502084254},"rightHand":{"x":0.561336963703127,"y":0.5657813152186197}},"highlighted":true,"editingLabels":false,"id":"9442418802498487"}]}}

package/src/Annotator/index.js

@@ -0,0 +1,206 @@
+// @flow
+
+import type {
+  Action,
+  Image,
+  MainLayoutState,
+  Mode,
+  ToolEnum,
+} from "../MainLayout/types"
+import React, { useEffect, useReducer } from "react"
+import makeImmutable, { without } from "seamless-immutable"
+
+import type { KeypointsDefinition } from "../ImageCanvas/region-tools"
+import MainLayout from "../MainLayout"
+import type { Node } from "react"
+import SettingsProvider from "../SettingsProvider"
+import combineReducers from "./reducers/combine-reducers.js"
+import generalReducer from "./reducers/general-reducer.js"
+import getFromLocalStorage from "../utils/get-from-local-storage"
+import historyHandler from "./reducers/history-handler.js"
+import imageReducer from "./reducers/image-reducer.js"
+import useEventCallback from "use-event-callback"
+import videoReducer from "./reducers/video-reducer.js"
+
+type Props = {
+  taskDescription?: string,
+  allowedArea?: { x: number, y: number, w: number, h: number },
+  regionTagList?: Array<string>,
+  regionClsList?: Array<string>,
+  imageTagList?: Array<string>,
+  imageClsList?: Array<string>,
+  enabledTools?: Array<string>,
+  selectedTool?: String,
+  showTags?: boolean,
+  selectedImage?: string | number,
+  images?: Array<Image>,
+  showPointDistances?: boolean,
+  pointDistancePrecision?: number,
+  RegionEditLabel?: Node,
+  onExit: (MainLayoutState) => any,
+  videoTime?: number,
+  videoSrc?: string,
+  keyframes?: Object,
+  videoName?: string,
+  keypointDefinitions: KeypointsDefinition,
+  fullImageSegmentationMode?: boolean,
+  autoSegmentationOptions?:
+    | {| type: "simple" |}
+    | {| type: "autoseg", maxClusters?: number, slicWeightFactor?: number |},
+  hideHeader?: boolean,
+  hideHeaderText?: boolean,
+  hideNext?: boolean,
+  hidePrev?: boolean,
+  hideClone?: boolean,
+  hideSettings?: boolean,
+  hideFullScreen?: boolean,
+  hideSave?: boolean,
+}
+
+export const Annotator = ({
+  images,
+  allowedArea,
+  selectedImage = images && images.length > 0 ? 0 : undefined,
+  showPointDistances,
+  pointDistancePrecision,
+  showTags = getFromLocalStorage("showTags", true),
+  enabledTools = [
+    "select",
+    "create-point",
+    "create-box",
+    "create-polygon",
+    "create-line",
+    "create-expanding-line",
+    "show-mask",
+  ],
+  selectedTool = "select",
+  regionTagList = [],
+  regionClsList = [],
+  imageTagList = [],
+  imageClsList = [],
+  keyframes = {},
+  taskDescription = "",
+  fullImageSegmentationMode = false,
+  RegionEditLabel,
+  videoSrc,
+  videoTime = 0,
+  videoName,
+  onExit,
+  onNextImage,
+  onPrevImage,
+  keypointDefinitions,
+  autoSegmentationOptions = { type: "autoseg" },
+  hideHeader,
+  hideHeaderText,
+  hideNext,
+  hidePrev,
+  hideClone,
+  hideSettings,
+  hideFullScreen,
+  hideSave,
+  allowComments,
+}: Props) => {
+  if (typeof selectedImage === "string") {
+    selectedImage = (images || []).findIndex((img) => img.src === selectedImage)
+    if (selectedImage === -1) selectedImage = undefined
+  }
+  const annotationType = images ? "image" : "video"
+  const [state, dispatchToReducer] = useReducer(
+    historyHandler(
+      combineReducers(
+        annotationType === "image" ? imageReducer : videoReducer,
+        generalReducer
+      )
+    ),
+    makeImmutable({
+      annotationType,
+      showTags,
+      allowedArea,
+      showPointDistances,
+      pointDistancePrecision,
+      selectedTool,
+      fullImageSegmentationMode: fullImageSegmentationMode,
+      autoSegmentationOptions,
+      mode: null,
+      taskDescription,
+      showMask: true,
+      labelImages: imageClsList.length > 0 || imageTagList.length > 0,
+      regionClsList,
+      regionTagList,
+      imageClsList,
+      imageTagList,
+      currentVideoTime: videoTime,
+      enabledTools,
+      history: [],
+      videoName,
+      keypointDefinitions,
+      allowComments,
+      ...(annotationType === "image"
+        ? {
+            selectedImage,
+            images,
+            selectedImageFrameTime:
+              images && images.length > 0 ? images[0].frameTime : undefined,
+          }
+        : {
+            videoSrc,
+            keyframes,
+          }),
+    })
+  )
+
+  const dispatch = useEventCallback((action: Action) => {
+    if (action.type === "HEADER_BUTTON_CLICKED") {
+      if (["Exit", "Done", "Save", "Complete"].includes(action.buttonName)) {
+        return onExit(without(state, "history"))
+      } else if (action.buttonName === "Next" && onNextImage) {
+        return onNextImage(without(state, "history"))
+      } else if (action.buttonName === "Prev" && onPrevImage) {
+        return onPrevImage(without(state, "history"))
+      }
+    }
+    dispatchToReducer(action)
+  })
+
+  const onRegionClassAdded = useEventCallback((cls) => {
+    dispatchToReducer({
+      type: "ON_CLS_ADDED",
+      cls: cls,
+    })
+  })
+
+  useEffect(() => {
+    if (selectedImage === undefined) return
+    dispatchToReducer({
+      type: "SELECT_IMAGE",
+      imageIndex: selectedImage,
+      image: state.images[selectedImage],
+    })
+  }, [selectedImage, state.images])
+
+  if (!images && !videoSrc)
+    return 'Missing required prop "images" or "videoSrc"'
+
+  return (
+    <SettingsProvider>
+      <MainLayout
+        RegionEditLabel={RegionEditLabel}
+        alwaysShowNextButton={Boolean(onNextImage)}
+        alwaysShowPrevButton={Boolean(onPrevImage)}
+        state={state}
+        dispatch={dispatch}
+        onRegionClassAdded={onRegionClassAdded}
+        hideHeader={hideHeader}
+        hideHeaderText={hideHeaderText}
+        hideNext={hideNext}
+        hidePrev={hidePrev}
+        hideClone={hideClone}
+        hideSettings={hideSettings}
+        hideFullScreen={hideFullScreen}
+        hideSave={hideSave}
+      />
+    </SettingsProvider>
+  )
+}
+
+export default Annotator