checkpoint, new fullsegmentation component and fix for default

highligh box

Author: seveibar

src/FullImageSegmentationAnnotator/index.js

@@ -0,0 +1,7 @@
+// @flow
+import React from "react"
+import Annotator from "../Annotator"
+
+export default ({ onExit, images }) => {
+  return <Annotator images={images} onExit={onExit} />
+}

src/FullImageSegmentationAnnotator/index.story.js

@@ -0,0 +1,23 @@
+// @flow
+
+import React from "react"
+
+import { storiesOf } from "@storybook/react"
+import { action } from "@storybook/addon-actions"
+import exampleImage from "../ImageCanvas/seves_desk.story.jpg"
+
+import FullImageSegmentationAnnotator from "./"
+
+storiesOf("FullImageSegmentationAnnotator", module).add("Basic", () => (
+  <div style={{ width: "100vw", height: "100vh" }}>
+    <FullImageSegmentationAnnotator
+      images={[
+        {
+          name: "Seve's Desk",
+          src: exampleImage,
+        },
+      ]}
+      onExit={action("onExit")}
+    />
+  </div>
+))

src/ImageCanvas/index.js

@@ -1,40 +1,21 @@
 // @flow weak
 
-import React, {
-  Fragment,
-  useRef,
-  useState,
-  useLayoutEffect,
-  useEffect,
-} from "react"
+import React, { useRef, useState, useLayoutEffect } from "react"
 import type { Node } from "react"
 import { Matrix } from "transformation-matrix-js"
-import getImageData from "get-image-data"
 import Crosshairs from "../Crosshairs"
-import type {
-  Region,
-  PixelRegion,
-  Point,
-  Polygon,
-  Box,
-} from "./region-tools.js"
-import { getEnclosingBox } from "./region-tools.js"
+import type { Region, Point, Polygon, Box } from "./region-tools.js"
 import { makeStyles } from "@material-ui/core/styles"
 import styles from "./styles"
-import classnames from "classnames"
-import RegionLabel from "../RegionLabel"
-import LockIcon from "@material-ui/icons/Lock"
-import Paper from "@material-ui/core/Paper"
-import HighlightBox from "../HighlightBox"
 import PreventScrollToParents from "../PreventScrollToParents"
 import useWindowSize from "../hooks/use-window-size.js"
 import useMouse from "./use-mouse"
 import useProjectRegionBox from "./use-project-box"
-import useLoadImage from "../hooks/use-load-image"
 import useExcludePattern from "../hooks/use-exclude-pattern"
 import { useRafState } from "react-use"
 import PointDistances from "../PointDistances"
 import RegionTags from "../RegionTags"
+import ImageMask from "../ImageMask"
 import RegionSelectAndTransformBoxes from "../RegionSelectAndTransformBoxes"
 import VideoOrImageCanvasBackground from "../VideoOrImageCanvasBackground"
 import useEventCallback from "use-event-callback"
@@ -63,6 +44,8 @@ type Props = {
   allowedArea?: { x: number, y: number, w: number, h: number },
   RegionEditLabel?: Node,
   videoPlaying?: boolean,
+  mask?: ImageData,
+  maskVersion?: any,
 
   onChangeRegion: (Region) => any,
   onBeginRegionEdit: (Region) => any,
@@ -100,11 +83,13 @@ export default ({
   regionClsList,
   regionTagList,
   showCrosshairs,
-  showHighlightBox,
+  showHighlightBox = true,
   showPointDistances,
   allowedArea,
   RegionEditLabel = null,
   videoPlaying = false,
+  mask,
+  maskVersion,
 
   onImageOrVideoLoaded,
   onChangeRegion,
@@ -474,6 +459,7 @@ export default ({
         {...mouseEvents}
       >
         <>
+          {mask && <ImageMask maskVersion={maskVersion} imageData={mask} />}
           <canvas className={classes.canvas} ref={canvasEl} />
           <VideoOrImageCanvasBackground
             videoPlaying={videoPlaying}

src/ImageMask/index.js

@@ -0,0 +1,24 @@
+// @flow
+
+import React, { useState, useEffect, useMemo } from "react"
+
+export default ({ imageData, maskVersion, opacity = 0.5 }) => {
+  const [canvasRef, setCanvasRef] = useState(null)
+
+  useEffect(() => {
+    if (!canvasRef) return
+    const context = canvasRef.getContext("2d")
+    context.putImageData(imageData, 0, 0)
+  }, [canvasRef, imageData, maskVersion])
+
+  const style = useMemo(() => ({ opacity }), [opacity])
+
+  return (
+    <canvas
+      style={style}
+      width={imageData.width}
+      height={imageData.height}
+      ref={setCanvasRef}
+    />
+  )
+}

src/ImageMask/index.story.js

@@ -0,0 +1,42 @@
+// @flow
+
+import React, { useState, useEffect, useReducer } from "react"
+
+import { storiesOf } from "@storybook/react"
+import { action } from "@storybook/addon-actions"
+
+import ImageMask from "./"
+
+const [width, height] = [200, 200]
+
+const uint8Array = new Uint8ClampedArray(4 * width * width)
+
+for (let ri = 0; ri < width; ri++) {
+  for (let ci = 0; ci < height; ci++) {
+    uint8Array[(ri * width + ci) * 4 + 0] = Math.floor(Math.random() * 256)
+    uint8Array[(ri * width + ci) * 4 + 1] = Math.floor(Math.random() * 256)
+    uint8Array[(ri * width + ci) * 4 + 2] = Math.floor(Math.random() * 256)
+    uint8Array[(ri * width + ci) * 4 + 3] = 255
+  }
+}
+
+const imageData = new ImageData(uint8Array, width, width)
+
+storiesOf("ImageMask", module)
+  .add("Basic", () => <ImageMask imageData={imageData} />)
+  .add("Changing", () => {
+    const [version, incVersion] = useReducer((state) => state + 1, 0)
+
+    // Notice how you don't need to allocate new memory
+    useEffect(() => {
+      setInterval(() => {
+        for (let i = 0; i < uint8Array.length; i++) {
+          if (i % 4 !== 3) {
+            uint8Array[i] = Math.floor(Math.random() * 256)
+          }
+        }
+        incVersion()
+      }, 500)
+    }, [])
+    return <ImageMask maskVersion={version} imageData={imageData} />
+  })