checkpoint, refactoring regions

Author: seveibar

.gitignore

@@ -24,3 +24,7 @@ yarn-error.log*
 storybook-static
 
 dist
+
+secret.*
+secret.story.*
+*.secret.*

package.json

@@ -72,6 +72,7 @@
     "babel-preset-react-app": "^7.0.0",
     "gh-pages": "^2.0.1",
     "prettier": "^2.0.5",
+    "raw.macro": "^0.3.0",
     "react-github-btn": "^1.1.1",
     "react-scripts": "^2.1.8"
   },

src/Annotator/index.js

@@ -41,6 +41,7 @@ type Props = {
   videoSrc?: string,
   keyframes?: Object,
   videoName?: string,
+  fullImageSegmentationMode?: boolean,
 }
 
 export const Annotator = ({
@@ -50,15 +51,21 @@ export const Annotator = ({
   showPointDistances,
   pointDistancePrecision,
   showTags = true,
-  enabledTools = ["select", "create-point", "create-box", "create-polygon"],
+  enabledTools = [
+    "select",
+    "create-point",
+    "create-box",
+    "create-polygon",
+    "create-expanding-line",
+  ],
   selectedTool = "select",
   regionTagList = [],
   regionClsList = [],
   imageTagList = [],
   imageClsList = [],
   keyframes = {},
   taskDescription,
-  fullImageSegmentationMode,
+  fullImageSegmentationMode = false,
   RegionEditLabel,
   videoSrc,
   videoTime = 0,

src/Annotator/reducers/general-reducer.js

@@ -291,14 +291,37 @@ export default (state: MainLayoutState, action: Action) => {
       if (!activeImage) return state
       const { x, y } = action
 
-      let newRegion
       if (state.allowedArea) {
+        // TODO clamp x/y instead of giving up
+        // TODO or image bounds
         const aa = state.allowedArea
         if (x < aa.x || x > aa.x + aa.w || y < aa.y || y > aa.y + aa.h) {
           return state
         }
       }
 
+      if (state.mode) {
+        switch (state.mode.mode) {
+          case "DRAW_POLYGON": {
+            const [polygon, regionIndex] = getRegion(state.mode.regionId)
+            if (!polygon) break
+            return setIn(
+              state,
+              [...pathToActiveImage, "regions", regionIndex],
+              { ...polygon, points: polygon.points.concat([[x, y]]) }
+            )
+          }
+          case "DRAW_EXPANDING_LINE": {
+            const [expandingLine, regionIndex] = getRegion(state.mode.regionId)
+            if (!expandingLine) break
+            return state
+          }
+          default:
+            break
+        }
+      }
+
+      let newRegion
       let defaultRegionCls = undefined,
         defaultRegionColor = "#ff0000"
       if (activeImage && (activeImage.regions || []).length > 0) {
@@ -369,24 +392,26 @@ export default (state: MainLayoutState, action: Action) => {
           })
           break
         }
-        default:
-          break
-      }
-
-      if (state.mode) {
-        switch (state.mode.mode) {
-          case "DRAW_POLYGON": {
-            const [polygon, regionIndex] = getRegion(state.mode.regionId)
-            if (!polygon) break
-            return setIn(
-              state,
-              [...pathToActiveImage, "regions", regionIndex],
-              { ...polygon, points: polygon.points.concat([[x, y]]) }
-            )
+        case "create-expanding-line": {
+          state = saveToHistory(state, "Create Expanding Line")
+          newRegion = {
+            type: "expanding-line",
+            unfinished: true,
+            points: [{ x, y, angle: null, width: null }],
+            open: true,
+            highlighted: true,
+            color: defaultRegionColor,
+            defaultRegionCls: defaultRegionCls,
+            id: getRandomId(),
           }
-          default:
-            break
+          state = setIn(state, ["mode"], {
+            mode: "DRAW_EXPANDING_LINE",
+            regionId: newRegion.id,
+          })
+          break
         }
+        default:
+          break
       }
 
       const regions = [...(getIn(state, pathToActiveImage).regions || [])]

src/FullImageSegmentationAnnotator/index.story.js

@@ -11,7 +11,7 @@ import hard3 from "./hard3.story.jpg"
 
 import FullImageSegmentationAnnotator from "./"
 
-storiesOf("FullImageSegmentationAnnotator", module)
+storiesOf("FullImageSegmentationAnnotator.Basic", module)
   .add("Orange 2 Class", () => (
     <div style={{ width: "100vw", height: "100vh" }}>
       <FullImageSegmentationAnnotator

src/HighlightBox/index.js

@@ -56,6 +56,29 @@ export const HighlightBox = ({
   pbox: { x: number, y: number, w: number, h: number },
 }) => {
   const classes = useStyles()
+
+  const styleCoords =
+    r.type === "point"
+      ? {
+          left: pbox.x + pbox.w / 2 - 30,
+          top: pbox.y + pbox.h / 2 - 30,
+          width: 60,
+          height: 60,
+        }
+      : {
+          left: pbox.x - 5,
+          top: pbox.y - 5,
+          width: pbox.w + 10,
+          height: pbox.h + 10,
+        }
+
+  const pathD =
+    r.type === "point"
+      ? `M5,5 L${styleCoords.width - 5} 5L${styleCoords.width - 5} ${
+          styleCoords.height - 5
+        }L5 ${styleCoords.height - 5}Z`
+      : `M5,5 L${pbox.w + 5},5 L${pbox.w + 5},${pbox.h + 5} L5,${pbox.h + 5} Z`
+
   return (
     <svg
       key={r.id}
@@ -97,17 +120,10 @@ export const HighlightBox = ({
                   : undefined,
             }),
         position: "absolute",
-        left: pbox.x - 5,
-        top: pbox.y - 5,
-        width: pbox.w + 10,
-        height: pbox.h + 10,
+        ...styleCoords,
       }}
     >
-      <path
-        d={`M5,5 L${pbox.w + 5},5 L${pbox.w + 5},${pbox.h + 5} L5,${
-          pbox.h + 5
-        } Z`}
-      />
+      <path d={pathD} />
     </svg>
   )
 }

src/IconTools/index.js

@@ -6,6 +6,7 @@ import {
   faArrowsAlt,
   faMousePointer,
   faExpandArrowsAlt,
+  faGripLines,
   faTag,
   faPaintBrush,
   faCrosshairs,
@@ -37,7 +38,13 @@ type Props = {
   onClickTool: (string) => any,
 }
 
-const defaultTools = ["select", "create-point", "create-box", "create-polygon"]
+const defaultTools = [
+  "select",
+  "create-point",
+  "create-box",
+  "create-polygon",
+  "create-expanding-line",
+]
 
 export const IconTools = ({
   showTags,
@@ -103,6 +110,11 @@ export const IconTools = ({
           name="Add Polygon"
           icon={<FontAwesomeIcon size="xs" fixedWidth icon={faDrawPolygon} />}
         />
+        <SmallToolButton
+          id="create-expanding-line"
+          name="Add Expanding Line"
+          icon={<FontAwesomeIcon size="xs" fixedWidth icon={faGripLines} />}
+        />
         {/* <SmallToolButton
           id="create-pixel"
           name="Add Pixel Region"

src/ImageCanvas/index.js

@@ -19,6 +19,7 @@ import ImageMask from "../ImageMask"
 import RegionSelectAndTransformBoxes from "../RegionSelectAndTransformBoxes"
 import VideoOrImageCanvasBackground from "../VideoOrImageCanvasBackground"
 import useEventCallback from "use-event-callback"
+import RegionShapes from "../RegionShapes"
 
 const useStyles = makeStyles(styles)
 
@@ -490,7 +491,16 @@ export const ImageCanvas = ({
               classPoints={classPoints}
             />
           )}
-          <canvas className={classes.canvas} ref={canvasEl} />
+          <canvas
+            style={{ opacity: 0.25 }}
+            className={classes.canvas}
+            ref={canvasEl}
+          />
+          <RegionShapes
+            mat={mat}
+            imagePosition={imagePosition}
+            regions={regions}
+          />
           <VideoOrImageCanvasBackground
             videoPlaying={videoPlaying}
             imagePosition={imagePosition}

src/ImageCanvas/use-mouse.js

@@ -33,7 +33,7 @@ export default ({
     // NOTE: We're mutating mat here
     mat.translate(mx, my).scaleU(scale)
     if (mat.a > 2) mat.scaleU(2 / mat.a)
-    if (mat.a < 0.1) mat.scaleU(0.1 / mat.a)
+    if (mat.a < 0.05) mat.scaleU(0.05 / mat.a)
     mat.translate(-mx, -my)
 
     changeMat(mat.clone())
@@ -127,7 +127,7 @@ export default ({
             (zoomEnd.x - zoomStart.x) / iw,
             (zoomEnd.y - zoomStart.y) / ih
           )
-          if (scale < 0.1) scale = 0.1
+          if (scale < 0.05) scale = 0.05
           if (scale > 10) scale = 10
 
           const newMat = getDefaultMat()