Feature: Modify Allowed Area

src/Annotator/index.js

@@ -22,7 +22,7 @@ import useEventCallback from "use-event-callback"
 import makeImmutable, { without } from "seamless-immutable"
 
 type Props = {
-  taskDescription: string,
+  taskDescription?: string,
   allowedArea?: { x: number, y: number, w: number, h: number },
   regionTagList?: Array<string>,
   regionClsList?: Array<string>,
@@ -68,7 +68,7 @@ export const Annotator = ({
   imageTagList = [],
   imageClsList = [],
   keyframes = {},
-  taskDescription,
+  taskDescription = "",
   fullImageSegmentationMode = false,
   RegionEditLabel,
   videoSrc,

src/Annotator/index.story.js

@@ -14,16 +14,18 @@ import Annotator from "./"
 
 import { testRegions } from "../ImageCanvas/index.story"
 
+const middlewares = [
+  (store) => (next) => (action) => {
+    actionAddon(action.type)(action)
+    return next(action)
+  },
+]
+
 storiesOf("Annotator", module)
   .add("Basic", () => (
     <Annotator
       onExit={actionAddon("onExit")}
-      middlewares={[
-        (store) => (next) => (action) => {
-          actionAddon(action.type)(action)
-          return next(action)
-        },
-      ]}
+      middlewares={middlewares}
       labelImages
       regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
       regionTagList={["tag1", "tag2", "tag3"]}
@@ -112,12 +114,7 @@ storiesOf("Annotator", module)
   .add("Annotator w/o No Region Labels or Image Labels", () => (
     <Annotator
       onExit={actionAddon("onExit")}
-      middlewares={[
-        (store) => (next) => (action) => {
-          actionAddon(action.type)(action)
-          return next(action)
-        },
-      ]}
+      middlewares={middlewares}
       images={[
         {
           src: exampleImage,
@@ -132,12 +129,7 @@ storiesOf("Annotator", module)
       onExit={actionAddon("onExit")}
       enabledTools={[]}
       showTags={false}
-      middlewares={[
-        (store) => (next) => (action) => {
-          actionAddon(action.type)(action)
-          return next(action)
-        },
-      ]}
+      middlewares={middlewares}
       images={[
         {
           src: exampleImage,
@@ -195,12 +187,7 @@ storiesOf("Annotator", module)
   .add("Car Annotation", () => (
     <Annotator
       onExit={actionAddon("onExit")}
-      middlewares={[
-        (store) => (next) => (action) => {
-          actionAddon(action.type)(action)
-          return next(action)
-        },
-      ]}
+      middlewares={middlewares}
       labelImages
       regionClsList={["Car", "Sign", "Construction Barrier"]}
       regionTagList={["Moving", "Stopped", "Obstacle"]}
@@ -650,18 +637,30 @@ storiesOf("Annotator", module)
   .add("CORs Error (Pixel Segmentation)", () => (
     <Annotator
       onExit={actionAddon("onExit")}
-      middlewares={[
-        (store) => (next) => (action) => {
-          actionAddon(action.type)(action)
-          return next(action)
+      middlewares={middlewares}
+      labelImages
+      fullImageSegmentationMode
+      regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
+      images={[
+        {
+          src: "https://placebear.com/200/300",
+          name: "Frame 0036",
         },
       ]}
+    />
+  ))
+  .add("Modify Allowed Area", () => (
+    <Annotator
+      onExit={actionAddon("onExit")}
+      middlewares={middlewares}
       labelImages
       fullImageSegmentationMode
+      allowedArea={{ x: 0, y: 0.6, w: 0.3, h: 0.3 }}
+      enabledTools={["modify-allowed-area"]}
       regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
       images={[
         {
-          src: "https://placebear.com/200/300",
+          src: exampleImage,
           name: "Frame 0036",
         },
       ]}

src/Annotator/reducers/general-reducer.js

@@ -16,6 +16,7 @@ const getRandomId = () => Math.random().toString().split(".")[1]
 export default (state: MainLayoutState, action: Action) => {
   if (
     state.allowedArea &&
+    state.selectedTool !== "modify-allowed-area" &&
     ["MOUSE_DOWN", "MOUSE_UP", "MOUSE_MOVE"].includes(action.type)
   ) {
     const aa = state.allowedArea
@@ -241,6 +242,17 @@ export default (state: MainLayoutState, action: Action) => {
         }
         case "MOVE_REGION": {
           const { regionId } = state.mode
+          if (regionId === "$$allowed_area") {
+            const {
+              allowedArea: { w, h },
+            } = state
+            return setIn(state, ["allowedArea"], {
+              x: x - w / 2,
+              y: y - h / 2,
+              w,
+              h,
+            })
+          }
           const regionIndex = getRegionIndex(regionId)
           if (regionIndex === null) return state
           return setIn(
@@ -255,9 +267,6 @@ export default (state: MainLayoutState, action: Action) => {
             freedom: [xFree, yFree],
             original: { x: ox, y: oy, w: ow, h: oh },
           } = state.mode
-          const regionIndex = getRegionIndex(regionId)
-          if (regionIndex === null) return state
-          const box = activeImage.regions[regionIndex]
 
           const dx = xFree === 0 ? ox : xFree === -1 ? Math.min(ox + ow, x) : ox
           const dw =
@@ -282,6 +291,19 @@ export default (state: MainLayoutState, action: Action) => {
             state = setIn(state, ["mode", "freedom"], [xFree, yFree * -1])
           }
 
+          if (regionId === "$$allowed_area") {
+            return setIn(state, ["allowedArea"], {
+              x: dx,
+              w: dw,
+              y: dy,
+              h: dh,
+            })
+          }
+
+          const regionIndex = getRegionIndex(regionId)
+          if (regionIndex === null) return state
+          const box = activeImage.regions[regionIndex]
+
           return setIn(state, [...pathToActiveImage, "regions", regionIndex], {
             ...box,
             x: dx,
@@ -699,6 +721,9 @@ export default (state: MainLayoutState, action: Action) => {
       } else if (action.selectedTool === "show-mask") {
         return setIn(state, ["showMask"], !state.showMask)
       }
+      if (action.selectedTool === "modify-allowed-area" && !state.allowedArea) {
+        state = setIn(state, ["allowedArea"], { x: 0, y: 0, w: 1, h: 1 })
+      }
       state = setIn(state, ["mode"], null)
       return setIn(state, ["selectedTool"], action.selectedTool)
     }

src/ImageCanvas/index.js

@@ -57,6 +57,7 @@ type Props = {
   zoomOnAllowedArea?: boolean,
   fullImageSegmentationMode?: boolean,
   autoSegmentationOptions?: Object,
+  modifyingAllowedArea?: boolean,
 
   onChangeRegion: (Region) => any,
   onBeginRegionEdit: (Region) => any,
@@ -126,6 +127,7 @@ export const ImageCanvas = ({
   onChangeVideoPlaying,
   onRegionClassAdded,
   zoomOnAllowedArea = true,
+  modifyingAllowedArea = false,
 }: Props) => {
   const classes = useStyles()
 
@@ -325,7 +327,24 @@ export const ImageCanvas = ({
       {imageLoaded && !dragging && (
         <RegionSelectAndTransformBoxes
           key="regionSelectAndTransformBoxes"
-          regions={regions}
+          regions={
+            !modifyingAllowedArea || !allowedArea
+              ? regions
+              : [
+                  {
+                    type: "box",
+                    id: "$$allowed_area",
+                    cls: "allowed_area",
+                    highlighted: true,
+                    x: allowedArea.x,
+                    y: allowedArea.y,
+                    w: allowedArea.w,
+                    h: allowedArea.h,
+                    visible: true,
+                    color: "#ff0",
+                  },
+                ]
+          }
           mouseEvents={mouseEvents}
           projectRegionBox={projectRegionBox}
           dragWithPrimary={dragWithPrimary}

src/ImageCanvas/index.story.js

@@ -148,3 +148,13 @@ storiesOf("ImageCanvas", module)
       {...events}
     />
   ))
+  .add("Modify Allowed Area", () => (
+    <ImageCanvas
+      showTags
+      regions={[]}
+      imageSrc={exampleImage}
+      modifyingAllowedArea
+      allowedArea={{ x: 0.6, y: 0.6, w: 0.2, h: 0.2 }}
+      {...events}
+    />
+  ))

src/MainLayout/icon-dictionary.js

@@ -15,6 +15,7 @@ import {
   faHandPaper,
   faSearch,
   faMask,
+  faEdit,
 } from "@fortawesome/free-solid-svg-icons"
 import FullscreenIcon from "@material-ui/icons/Fullscreen"
 
@@ -63,6 +64,9 @@ export const iconDictionary = {
   "show-mask": () => (
     <FontAwesomeIcon style={faStyle} size="xs" fixedWidth icon={faMask} />
   ),
+  "modify-allowed-area": () => (
+    <FontAwesomeIcon style={faStyle} size="xs" fixedWidth icon={faEdit} />
+  ),
   window: FullscreenIcon,
 }