Added comment box option when creating a new area/point/polygon

src/Annotator/index.js

@@ -90,6 +90,7 @@ export const Annotator = ({
   hideHeaderText,
   hideNext,
   hidePrev,
+  allowComments,
 }: Props) => {
   if (typeof selectedImage === "string") {
     selectedImage = (images || []).findIndex((img) => img.src === selectedImage)
@@ -125,6 +126,7 @@ export const Annotator = ({
       history: [],
       videoName,
       keypointDefinitions,
+      allowComments,
       ...(annotationType === "image"
         ? {
             selectedImage,

src/Annotator/index.story.js

@@ -52,6 +52,37 @@ storiesOf("Annotator", module)
       ]}
     />
   ))
+  .add("Basic - Allow Comments", () => (
+    <Annotator
+      onExit={actionAddon("onExit")}
+      middlewares={middlewares}
+      labelImages
+      regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
+      regionTagList={["tag1", "tag2", "tag3"]}
+      imageClsList={["Alpha", "Beta", "Charlie", "Delta"]}
+      imageTagList={["tag1", "tag2", "tag3"]}
+      images={[
+        {
+          src: exampleImage,
+          name: "Seve's Desk",
+          regions: testRegions,
+        },
+        {
+          src: "https://loremflickr.com/100/100/cars?lock=1",
+          name: "Frame 0036",
+        },
+        {
+          src: "https://loremflickr.com/100/100/cars?lock=2",
+          name: "Frame 0037",
+        },
+        {
+          src: "https://loremflickr.com/100/100/cars?lock=3",
+          name: "Frame 0038",
+        },
+      ]}
+      allowComments
+    />
+  ))
   .add("Fixed Size Container", () => (
     <div style={{ width: 500, height: 500 }}>
       <Annotator

src/Annotator/reducers/general-reducer.js

@@ -138,6 +138,9 @@ export default (state: MainLayoutState, action: Action) => {
       if (!isEqual(oldRegion.tags, action.region.tags)) {
         state = saveToHistory(state, "Change Region Tags")
       }
+      if (!isEqual(oldRegion.comment, action.region.comment)) {
+        state = saveToHistory(state, "Change Region Comment")
+      }
       return setIn(
         state,
         [...pathToActiveImage, "regions", regionIndex],

src/DemoSite/Editor.js

@@ -59,6 +59,7 @@ export const examples = {
         name: "bianchi-oltre-xr4",
       },
     ],
+    allowComments: true,
   }),
   "Simple Segmentation": () => ({
     taskDescription:

src/ImageCanvas/index.js

@@ -66,7 +66,7 @@ type Props = {
   fullImageSegmentationMode?: boolean,
   autoSegmentationOptions?: Object,
   modifyingAllowedArea?: boolean,
-
+  allowComments?: Boolean,
   onChangeRegion: (Region) => any,
   onBeginRegionEdit: (Region) => any,
   onCloseRegionEdit: (Region) => any,
@@ -139,6 +139,7 @@ export const ImageCanvas = ({
   zoomOnAllowedArea = true,
   modifyingAllowedArea = false,
   keypointDefinitions,
+  allowComments,
 }: Props) => {
   const classes = useStyles()
 
@@ -388,6 +389,7 @@ export const ImageCanvas = ({
             imageSrc={imageSrc}
             RegionEditLabel={RegionEditLabel}
             onRegionClassAdded={onRegionClassAdded}
+            allowComments={allowComments}
           />
         </PreventScrollToParents>
       )}
@@ -402,6 +404,7 @@ export const ImageCanvas = ({
             editing
             region={highlightedRegion}
             imageSrc={imageSrc}
+            allowComments={allowComments}
           />
         </div>
       )}

src/MainLayout/index.js

@@ -186,6 +186,7 @@ export const MainLayout = ({
       onChangeVideoTime={action("CHANGE_VIDEO_TIME", "newTime")}
       onChangeVideoPlaying={action("CHANGE_VIDEO_PLAYING", "isPlaying")}
       onRegionClassAdded={onRegionClassAdded}
+      allowComments={state.allowComments}
     />
   )
 

src/RegionLabel/index.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { useState, memo } from "react"
+import React, { useRef, memo } from "react"
 import Paper from "@material-ui/core/Paper"
 import { makeStyles } from "@material-ui/core/styles"
 import styles from "./styles"
@@ -10,7 +10,7 @@ import IconButton from "@material-ui/core/IconButton"
 import Button from "@material-ui/core/Button"
 import TrashIcon from "@material-ui/icons/Delete"
 import CheckIcon from "@material-ui/icons/Check"
-import UndoIcon from "@material-ui/icons/Undo"
+import TextField from "@material-ui/core/TextField"
 import Select from "react-select"
 import CreatableSelect from "react-select/creatable"
 
@@ -30,6 +30,7 @@ type Props = {
   onClose: (Region) => null,
   onOpen: (Region) => null,
   onRegionClassAdded: () => {},
+  allowComments?: boolean,
 }
 
 export const RegionLabel = ({
@@ -42,8 +43,16 @@ export const RegionLabel = ({
   onClose,
   onOpen,
   onRegionClassAdded,
+  allowComments,
 }: Props) => {
   const classes = useStyles()
+  const commentInputRef = useRef(null)
+  const onCommentInputClick = (_) => {
+    // The TextField wraps the <input> tag with two divs
+    const commentInput = commentInputRef.current.children[0].children[0]
+
+    if (commentInput) return commentInput.focus()
+  }
 
   return (
     <Paper
@@ -142,6 +151,22 @@ export const RegionLabel = ({
               />
             </div>
           )}
+          {allowComments && (
+            <TextField
+              InputProps={{
+                className: classes.commentBox,
+              }}
+              fullWidth
+              multiline
+              rows={3}
+              ref={commentInputRef}
+              onClick={onCommentInputClick}
+              value={region.comment || ""}
+              onChange={(event) =>
+                onChange({ ...(region: any), comment: event.target.value })
+              }
+            />
+          )}
           {onClose && (
             <div style={{ marginTop: 4, display: "flex" }}>
               <div style={{ flexGrow: 1 }} />

src/RegionLabel/styles.js

@@ -44,4 +44,8 @@ export default {
       },
     },
   },
+  commentBox: {
+    fontWeight: 400,
+    fontSize: 13,
+  },
 }

src/RegionTags/index.js

@@ -27,6 +27,7 @@ export const RegionTags = ({
   imageSrc,
   RegionEditLabel,
   onRegionClassAdded,
+  allowComments,
 }) => {
   const RegionLabel =
     RegionEditLabel != null ? RegionEditLabel : DefaultRegionLabel
@@ -118,6 +119,7 @@ export const RegionTags = ({
               regions={regions}
               imageSrc={imageSrc}
               onRegionClassAdded={onRegionClassAdded}
+              allowComments={allowComments}
             />
           </div>
         </div>