major improvements to accuracy and performance

Author: seveibar

package.json

@@ -11,7 +11,7 @@
     "color-alpha": "^1.0.4",
     "get-image-data": "^3.0.1",
     "material-survey": "^1.0.34",
-    "mmgc1-cpp": "^1.0.26",
+    "mmgc1-cpp": "^1.0.35",
     "moment": "^2.23.0",
     "react-full-screen": "^0.2.4",
     "react-hotkeys": "^2.0.0",

src/Annotator/reducers/convert-expanding-line-to-polygon.js

@@ -5,7 +5,6 @@ function clamp(num, min, max) {
 }
 
 export default (expandingLine) => {
-  console.log({ expandingLine })
   const expandingWidth = expandingLine.expandingWidth || 0.005
   const pointPairs = expandingLine.points.map(({ x, y, angle, width }, i) => {
     if (!angle) {

src/Annotator/reducers/general-reducer.js

@@ -480,7 +480,7 @@ export default (state: MainLayoutState, action: Action) => {
             open: true,
             highlighted: true,
             color: defaultRegionColor,
-            defaultRegionCls: defaultRegionCls,
+            cls: defaultRegionCls,
             id: getRandomId(),
           }
           state = setIn(state, ["mode"], {
@@ -498,7 +498,7 @@ export default (state: MainLayoutState, action: Action) => {
             open: true,
             highlighted: true,
             color: defaultRegionColor,
-            defaultRegionCls: defaultRegionCls,
+            cls: defaultRegionCls,
             id: getRandomId(),
           }
           state = setIn(state, ["mode"], {
@@ -693,6 +693,8 @@ export default (state: MainLayoutState, action: Action) => {
       const { mode } = state
       if (mode) {
         switch (mode.mode) {
+          case "DRAW_EXPANDING_LINE":
+          case "SET_EXPANDING_LINE_WIDTH":
           case "DRAW_POLYGON": {
             const { regionId } = mode
             return modifyRegion(regionId, null)

src/ImageMask/index.js

@@ -6,7 +6,7 @@ import { useDebounce } from "react-use"
 
 import MMGC_INIT from "mmgc1-cpp"
 
-export default ({
+export const ImageMask = ({
   classPoints,
   regionClsList,
   imageSrc,
@@ -51,23 +51,34 @@ export default ({
       if (!sampleImageData) return
       if (classPoints.filter((cp) => cp.cls).length < 3) return
       if (!mmgc.setImageSize) return
-      // NEEDS DEBOUNCE
       const context = canvasRef.getContext("2d")
 
       if (!superPixelsGenerated.current) {
         superPixelsGenerated.current = "processing"
+        mmgc.setMaxClusters(10000)
         mmgc.setImageSize(sampleImageData.width, sampleImageData.height)
+        mmgc.setClassColor(0, 0)
+        for (let i = 0; i < colorInts.length; i++) {
+          mmgc.setClassColor(i + 1, colorInts[i])
+        }
         const imageAddress = mmgc.getImageAddr()
         mmgc.HEAPU8.set(sampleImageData.data, imageAddress)
         mmgc.computeSuperPixels()
-        for (let i = 0; i < colorInts.length; i++) {
-          mmgc.setClassColor(i, colorInts[i])
-        }
         superPixelsGenerated.current = "done"
       }
       if (superPixelsGenerated.current !== "done") return
 
       // mmgc.setVerboseMode(true)
+      if (
+        !["bg", "background", "nothing"].includes(
+          regionClsList[0].toLowerCase()
+        )
+      ) {
+        console.log(
+          `first region cls must be "bg" or "background" or "nothing"`
+        )
+        return
+      }
       mmgc.clearClassPoints()
       for (const classPoint of classPoints) {
         if (!classPoint.cls) continue
@@ -100,17 +111,10 @@ export default ({
       )
 
       context.clearRect(0, 0, sampleImageData.width, sampleImageData.height)
-      context.globalAlpha = 0.25
       context.putImageData(maskImageData, 0, 0)
-      context.globalAlpha = 1
     },
     1000,
-    [
-      canvasRef,
-      sampleImageData,
-      JSON.stringify(classPoints.map((c) => [c.x, c.y, c.cls])),
-      hide,
-    ]
+    [canvasRef, sampleImageData, classPoints, hide]
   )
 
   const style = useMemo(() => {
@@ -146,3 +150,5 @@ export default ({
     />
   )
 }
+
+export default ImageMask

src/RegionSelectAndTransformBoxes/index.js

@@ -169,13 +169,16 @@ export const RegionSelectAndTransformBox = memo(
   arePropsEqual
 )
 
-export const RegionSelectAndTransformBoxes = (props) => {
-  return props.regions
-    .filter((r) => r.visible || r.visible === undefined)
-    .filter((r) => !r.locked)
-    .map((r, i) => {
-      return <RegionSelectAndTransformBox key={r.id} {...props} region={r} />
-    })
-}
+export const RegionSelectAndTransformBoxes = memo(
+  (props) => {
+    return props.regions
+      .filter((r) => r.visible || r.visible === undefined)
+      .filter((r) => !r.locked)
+      .map((r, i) => {
+        return <RegionSelectAndTransformBox key={r.id} {...props} region={r} />
+      })
+  },
+  (n, p) => n.regions === p.regions
+)
 
 export default RegionSelectAndTransformBoxes

src/RegionShapes/index.js

@@ -107,64 +107,23 @@ const RegionComponents = {
         />
       </>
     )
-    return (
-      <polyline
-        points={points
-          .map(({ x, y }) => [x * iw, y * ih])
-          .map((a) => a.join(" "))
-          .join(" ")}
-        strokeWidth={2}
-        stroke={colorAlpha(region.color, 0.75)}
-        fill={colorAlpha(region.color, 0.25)}
-      />
-    )
   }),
   pixel: () => null,
 }
 
-export const RegionShapes = ({ mat, imagePosition, regions = [] }) => {
-  // for (const region of regions.filter(
-  //   (r) => r.visible || r.visible === undefined
-  // )) {
-  //   switch (region.type) {
-  //     case "box": {
-  //       context.save()
-  //
-  //       context.shadowColor = "black"
-  //       context.shadowBlur = 4
-  //       context.strokeStyle = region.color
-  //       context.strokeRect(
-  //         region.x * iw,
-  //         region.y * ih,
-  //         region.w * iw,
-  //         region.h * ih
-  //       )
-  //
-  //       context.restore()
-  //       break
-  //     }
-  //     case "polygon": {
-  //       context.save()
-  //
-  //       context.shadowColor = "black"
-  //       context.shadowBlur = 4
-  //       context.strokeStyle = region.color
-  //
-  //       context.beginPath()
-  //       context.moveTo(region.points[0][0] * iw, region.points[0][1] * ih)
-  //       for (const point of region.points) {
-  //         context.lineTo(point[0] * iw, point[1] * ih)
-  //       }
-  //       if (!region.open) context.closePath()
-  //       context.stroke()
-  //       context.restore()
-  //       break
-  //     }
-  //     default:
-  //       break
-  //   }
-  // }
+export const WrappedRegionList = memo(
+  ({ regions, iw, ih }) => {
+    return regions
+      .filter((r) => r.visible !== false)
+      .map((r) => {
+        const Component = RegionComponents[r.type]
+        return <Component key={r.regionId} region={r} iw={iw} ih={ih} />
+      })
+  },
+  (n, p) => n.regions === p.regions && n.iw === p.iw && n.ih === p.ih
+)
 
+export const RegionShapes = ({ mat, imagePosition, regions = [] }) => {
   const iw = imagePosition.bottomRight.x - imagePosition.topLeft.x
   const ih = imagePosition.bottomRight.y - imagePosition.topLeft.y
   return (
@@ -181,12 +140,7 @@ export const RegionShapes = ({ mat, imagePosition, regions = [] }) => {
         height: ih,
       }}
     >
-      {regions
-        .filter((r) => r.visible !== false)
-        .map((r) => {
-          const Component = RegionComponents[r.type]
-          return <Component key={r.regionId} region={r} iw={iw} ih={ih} />
-        })}
+      <WrappedRegionList regions={regions} iw={iw} ih={ih} />
     </svg>
   )
 }

yarn.lock

@@ -10841,10 +10841,10 @@ mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.0, mkdirp@
   dependencies:
     minimist "0.0.8"
 
-mmgc1-cpp@^1.0.26:
-  version "1.0.26"
-  resolved "https://registry.yarnpkg.com/mmgc1-cpp/-/mmgc1-cpp-1.0.26.tgz#0ee55745673eb5cedeee1393a7b698533458442d"
-  integrity sha512-BdekMtXha86jFACURppLJaxMWIjxDWI4oSbBRGvQ5YnD3Hy7GuP3OCmuNy2XzqrOD79FwBaCWihqDBzgTGulJA==
+mmgc1-cpp@^1.0.35:
+  version "1.0.35"
+  resolved "https://registry.yarnpkg.com/mmgc1-cpp/-/mmgc1-cpp-1.0.35.tgz#654140c7e942dc32587cfe6cdc388a453ffa7d16"
+  integrity sha512-GVXtpvdQdzd6mNPJe/QqQEAuwUROA3jP5TUiHtbuK27ZfEAM77yyjp5LxzwtvfZ2vq0b0B07SkcpmphEGXsI8g==
 
 moment@^2.23.0:
   version "2.24.0"