[WIP] Feat/custom region form

README.md

@@ -61,6 +61,7 @@ All of the following properties can be defined on the 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)) | |
 
 ## Developers
 

src/Annotator/index.js

@@ -1,6 +1,7 @@
 // @flow
 
 import React, { useReducer, useEffect } from "react"
+import type { Node } from "react"
 import MainLayout from "../MainLayout"
 import type {
  ToolEnum,
@@ -33,6 +34,7 @@ type Props = {
  images?: Array<Image>,
  showPointDistances?: boolean,
  pointDistancePrecision?: number,
+ RegionEditLabel?: Node,
  onExit: MainLayoutState => any,
  videoTime?: number,
  videoSrc?: string,
@@ -54,6 +56,7 @@ export const Annotator = ({
  imageClsList = [],
  keyframes = {},
  taskDescription,
+ RegionEditLabel,
  videoSrc,
  videoTime = 0,
  videoName,
@@ -123,6 +126,7 @@ export const Annotator = ({
  return (
  <SettingsProvider>
  <MainLayout
+ RegionEditLabel={RegionEditLabel}
  alwaysShowNextButton={Boolean(onNextImage)}
  alwaysShowPrevButton={Boolean(onPrevImage)}
  state={state}

src/ImageCanvas/index.js

@@ -7,6 +7,7 @@ import React, {
  useLayoutEffect,
  useEffect
 } from "react"
+import type { Node } from "react"
 import { Matrix } from "transformation-matrix-js"
 import getImageData from "get-image-data"
 import Crosshairs from "../Crosshairs"
@@ -59,6 +60,7 @@ type Props = {
  regionClsList?: Array<string>,
  regionTagList?: Array<string>,
  allowedArea?: { x: number, y: number, w: number, h: number },
+ RegionEditLabel?: Node,
  videoPlaying?: boolean,
 
  onChangeRegion: Region => any,
@@ -99,6 +101,7 @@ export default ({
  showCrosshairs,
  showPointDistances,
  allowedArea,
+ RegionEditLabel = null,
  videoPlaying = false,
 
  onImageOrVideoLoaded,
@@ -212,7 +215,12 @@ export default ({
  const { x, y, w, h } = allowedArea
  context.save()
  context.globalAlpha = 0.25
- const outer = [[0, 0], [iw, 0], [iw, ih], [0, ih]]
+ const outer = [
+ [0, 0],
+ [iw, 0],
+ [iw, ih],
+ [0, ih]
+ ]
  const inner = [
  [x * iw, y * ih],
  [x * iw + w * iw, y * ih],
@@ -442,9 +450,12 @@ export default ({
  onCloseRegionEdit={onCloseRegionEdit}
  onDeleteRegion={onDeleteRegion}
  layoutParams={layoutParams}
+ imageSrc={imageSrc}
+ RegionEditLabel={RegionEditLabel}
  />
  </PreventScrollToParents>
  )}
+
  {zoomWithPrimary && zoomBox !== null && (
  <div
  key="zoomBox"

src/MainLayout/index.js

@@ -1,6 +1,7 @@
 // @flow
 
 import React, { useState, useRef } from "react"
+import type { Node } from "react"
 import Grid from "@material-ui/core/Grid"
 import { makeStyles } from "@material-ui/core/styles"
 import Sidebar from "../Sidebar"
@@ -21,6 +22,11 @@ const useStyles = makeStyles(styles)
 
 type Props = {
  state: MainLayoutState,
+ RegionEditLabel?: Node,
+ dispatch: Action => any
+}
+
+export const MainLayout = ({ state, dispatch, RegionEditLabel }: Props) => {
  dispatch: Action => any,
  alwaysShowNextButton: boolean,
  alwaysShowPrevButton: boolean
@@ -176,6 +182,8 @@ export default ({ state, dispatch, alwaysShowNextButton = false, alwaysShowPrevB
  )}
  onSelectRegion={action("SELECT_REGION", "region")}
  onBeginMovePoint={action("BEGIN_MOVE_POINT", "point")}
+ onImageLoaded={action("IMAGE_LOADED", "image")}
+ RegionEditLabel={RegionEditLabel}
  onImageOrVideoLoaded={action(
  "IMAGE_OR_VIDEO_LOADED",
  "metadata"

src/MainLayout/types.js

@@ -7,6 +7,8 @@ import type {
  Point
 } from "../ImageCanvas/region-tools.js"
 
+import type { Node } from "react"
+
 export type ToolEnum =
  | "select"
  | "pan"

src/RegionTags/index.js

@@ -2,7 +2,7 @@
 
 import React from "react"
 import Paper from "@material-ui/core/Paper"
-import RegionLabel from "../RegionLabel"
+import DefaultRegionLabel from "../RegionLabel"
 import LockIcon from "@material-ui/icons/Lock"
 
 const copyWithout = (obj, ...args) => {
@@ -23,8 +23,12 @@ export const RegionTags = ({
  onChangeRegion,
  onCloseRegionEdit,
  onDeleteRegion,
- layoutParams
+ layoutParams,
+ imageSrc,
+ RegionEditLabel
 }) => {
+ const RegionLabel =
+ RegionEditLabel != null ? RegionEditLabel : DefaultRegionLabel
  return regions
  .filter(r => r.visible || r.visible === undefined)
  .map(region => {
@@ -109,6 +113,8 @@ export const RegionTags = ({
  onDelete={onDeleteRegion}
  editing={region.editingLabels}
  region={region}
+ regions={regions}
+ imageSrc={imageSrc}
  />
  </div>
  </div>