deterministic colors

Author: seveibar

package.json

@@ -10,7 +10,7 @@
     "@semantic-release/git": "^9.0.0",
     "get-image-data": "^3.0.1",
     "material-survey": "^1.0.34",
-    "mmgc1-cpp": "^1.0.24",
+    "mmgc1-cpp": "^1.0.25",
     "moment": "^2.23.0",
     "react-full-screen": "^0.2.4",
     "react-hotkeys": "^2.0.0",

src/Annotator/reducers/general-reducer.js

@@ -1,26 +1,15 @@
 // @flow
-
 import type { MainLayoutState, Action } from "../../MainLayout/types"
 import { moveRegion } from "../../ImageCanvas/region-tools.js"
 import { getIn, setIn, updateIn } from "seamless-immutable"
 import moment from "moment"
 import isEqual from "lodash/isEqual"
 import getActiveImage from "./get-active-image"
 import { saveToHistory } from "./history-handler.js"
+import colors from "../../colors"
 
 const getRandomId = () => Math.random().toString().split(".")[1]
 
-const getRandomInt = (min, max) => {
-  return Math.floor(Math.random() * (max - min + 1)) + min
-}
-
-const getRandomColor = () => {
-  const h = getRandomInt(0, 360)
-  const s = 100
-  const l = 50
-  return `hsl(${h},${s}%,${l}%)`
-}
-
 export default (state: MainLayoutState, action: Action) => {
   // Throttle certain actions
   if (action.type === "MOUSE_MOVE") {
@@ -306,9 +295,14 @@ export default (state: MainLayoutState, action: Action) => {
         }
       }
 
-      let defaultRegion = undefined
-      if (activeImage) {
-        defaultRegion = activeImage.regions.slice(-1)[0].cls
+      let defaultRegionCls = undefined,
+        defaultRegionColor = "#333333"
+      if (activeImage && (activeImage.regions || []).length > 0) {
+        defaultRegionCls = activeImage.regions.slice(-1)[0].cls
+        const clsIndex = (state.regionClsList || []).indexOf(defaultRegionCls)
+        if (clsIndex !== -1) {
+          defaultRegionColor = colors[clsIndex % colors.length]
+        }
       }
 
       switch (state.selectedTool) {
@@ -320,9 +314,9 @@ export default (state: MainLayoutState, action: Action) => {
             y,
             highlighted: true,
             editingLabels: true,
-            color: getRandomColor(),
+            color: defaultRegionColor,
             id: getRandomId(),
-            cls: defaultRegion,
+            cls: defaultRegionCls,
           }
           break
         }
@@ -336,7 +330,8 @@ export default (state: MainLayoutState, action: Action) => {
             h: 0.01,
             highlighted: true,
             editingLabels: false,
-            color: getRandomColor(),
+            color: defaultRegionColor,
+            cls: defaultRegionCls,
             id: getRandomId(),
           }
           state = unselectRegions(state)
@@ -361,7 +356,8 @@ export default (state: MainLayoutState, action: Action) => {
             ],
             open: true,
             highlighted: true,
-            color: getRandomColor(),
+            color: defaultRegionColor,
+            defaultRegionCls: defaultRegionCls,
             id: getRandomId(),
           }
           state = setIn(state, ["mode"], {

src/ImageCanvas/index.js

@@ -384,12 +384,11 @@ export const ImageCanvas = ({
     topLeft: mat.clone().inverse().applyToPoint(0, 0),
     bottomRight: mat.clone().inverse().applyToPoint(iw, ih),
   }
-  
+
   const classPoints = useMemo(() => {
-    console.log("TODO this shouldn't be called on mouse moves")
-      return regions.filter(region => region.type === "point")
-  }
-  ,[regions])
+    // This shouldn't be called on mouse moves
+    return regions.filter((region) => region.type === "point")
+  }, [regions])
 
   return (
     <div
@@ -482,13 +481,14 @@ export const ImageCanvas = ({
         {...mouseEvents}
       >
         <>
-          {fullImageSegmentationMode && <ImageMask
-            imagePosition={imagePosition}
-            regionClsList={regionClsList}
-            imageSrc={imageSrc}
-            classPoints={classPoints
-            }
-          />}
+          {fullImageSegmentationMode && (
+            <ImageMask
+              imagePosition={imagePosition}
+              regionClsList={regionClsList}
+              imageSrc={imageSrc}
+              classPoints={classPoints}
+            />
+          )}
           <canvas className={classes.canvas} ref={canvasEl} />
           <VideoOrImageCanvasBackground
             videoPlaying={videoPlaying}

src/ImageMask/index.js

@@ -1,6 +1,7 @@
 // @flow
 
 import React, { useState, useEffect, useMemo, useRef } from "react"
+import { colorInts } from "../colors"
 
 import MMGC_INIT from "mmgc1-cpp"
 
@@ -60,20 +61,27 @@ export default ({
       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.setClassColor(0, 0xff0000ff)
-    mmgc.setClassColor(1, 0xffff00ff)
-    mmgc.setClassColor(2, 0xff00ffff)
     // mmgc.setVerboseMode(true)
     mmgc.clearClassPoints()
     for (const classPoint of classPoints) {
       if (!classPoint.cls) continue
-      if (classPoint.x < 0) continue
+      if (classPoint.x < 0 || classPoint.x >= 1) continue
+      if (classPoint.y < 0 || classPoint.y >= 1) continue
+      const clsIndex = regionClsList.indexOf(classPoint.cls)
+      if (clsIndex > colorInts.length) {
+        console.log("Too many classes to draw on mask!")
+        continue
+      }
+
       mmgc.addClassPoint(
-        regionClsList.indexOf(classPoint.cls),
+        clsIndex,
         Math.floor(classPoint.y * sampleImageData.height),
         Math.floor(classPoint.x * sampleImageData.width)
       )

src/colors.js

@@ -0,0 +1,26 @@
+// @flow
+
+import * as muiColors from "@material-ui/core/colors"
+
+export const colors = [
+  muiColors.red[500],
+  muiColors.blue[500],
+  muiColors.green[500],
+  muiColors.orange[800],
+  muiColors.brown[500],
+  muiColors.lightGreen[700],
+  muiColors.pink[500],
+  muiColors.purple[500],
+  muiColors.indigo[500],
+  muiColors.teal[500],
+  muiColors.lime[500],
+  muiColors.blueGrey[500],
+]
+
+export const colorInts: Array<number> = colors.map(
+  (c) => (parseInt(c.substr(1), 16) | 0xff000000) >>> 0
+)
+
+console.log(colorInts)
+
+export default colors

yarn.lock

@@ -10820,10 +10820,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.24:
-  version "1.0.24"
-  resolved "https://registry.yarnpkg.com/mmgc1-cpp/-/mmgc1-cpp-1.0.24.tgz#37354150355486a10f304aa72dc9716ad4032d0a"
-  integrity sha512-vj19i2gpa9rT+byptCX6Qqb2h8BpQqAAOXhVJXM527KKiU1YDG6fv83DQ9RSRPJTX7RGPYKtb0mwJkPm8pomIA==
+mmgc1-cpp@^1.0.25:
+  version "1.0.25"
+  resolved "https://registry.yarnpkg.com/mmgc1-cpp/-/mmgc1-cpp-1.0.25.tgz#f5c79f0c4aa45be8496e5d8b6889e3fee207f53b"
+  integrity sha512-IepiEIBW8MCc2WJsj1i68gdbZKdEcPeyE7iLtJComPQDHNOCJ3xKZk7gPsw5meSbqKhMOfa2B81jXuLEqwtiRA==
 
 moment@^2.23.0:
   version "2.24.0"