color fixes, fix box creation

Author: seveibar

src/Annotator/reducers/general-reducer.js

@@ -103,6 +103,10 @@ export default (state: MainLayoutState, action: Action) => {
       const oldRegion = activeImage.regions[regionIndex]
       if (oldRegion.cls !== action.region.cls) {
         state = saveToHistory(state, "Change Region Classification")
+        const clsIndex = state.regionClsList.indexOf(action.region.cls)
+        if (clsIndex !== -1) {
+          action.region.color = colors[clsIndex % colors.length]
+        }
       }
       if (!isEqual(oldRegion.tags, action.region.tags)) {
         state = saveToHistory(state, "Change Region Tags")
@@ -296,7 +300,7 @@ export default (state: MainLayoutState, action: Action) => {
       }
 
       let defaultRegionCls = undefined,
-        defaultRegionColor = "#333333"
+        defaultRegionColor = "#ff0000"
       if (activeImage && (activeImage.regions || []).length > 0) {
         defaultRegionCls = activeImage.regions.slice(-1)[0].cls
         const clsIndex = (state.regionClsList || []).indexOf(defaultRegionCls)
@@ -334,7 +338,6 @@ export default (state: MainLayoutState, action: Action) => {
             cls: defaultRegionCls,
             id: getRandomId(),
           }
-          state = unselectRegions(state)
           state = setIn(state, ["mode"], {
             mode: "RESIZE_BOX",
             editLabelEditorAfter: true,
@@ -382,16 +385,14 @@ export default (state: MainLayoutState, action: Action) => {
             )
           }
           default:
-            return state
+            break
         }
       }
 
-      const regions = [...(activeImage.regions || [])]
-        .map((r) => ({
-          ...r,
-          editingLabels: false,
-          highlighted: false,
-        }))
+      const regions = [...(getIn(state, pathToActiveImage).regions || [])]
+        .map((r) =>
+          setIn(r, ["editingLabels"], false).setIn(["highlighted"], false)
+        )
         .concat(newRegion ? [newRegion] : [])
 
       return setIn(state, [...pathToActiveImage, "regions"], regions)

src/ImageCanvas/index.js

@@ -353,6 +353,8 @@ export const ImageCanvas = ({
           context.restore()
           break
         }
+        default:
+          break
       }
     }
     context.restore()
@@ -386,7 +388,6 @@ export const ImageCanvas = ({
   }
 
   const classPoints = useMemo(() => {
-    // This shouldn't be called on mouse moves
     return regions.filter((region) => region.type === "point")
   }, [regions])
 

src/RegionSelectAndTransformBoxes/index.js

@@ -4,7 +4,6 @@ import React, { Fragment, memo } from "react"
 import HighlightBox from "../HighlightBox"
 import { styled } from "@material-ui/core/styles"
 import PreventScrollToParents from "../PreventScrollToParents"
-import { shallowEqualObjects } from "shallow-equal"
 
 const TransformGrabber = styled("div")({
   width: 8,
@@ -22,7 +21,7 @@ const boxCursorMap = [
 
 const arePropsEqual = (prev, next) => {
   return (
-    shallowEqualObjects(prev.region, next.region) &&
+    prev.region === next.region &&
     prev.dragWithPrimary === next.dragWithPrimary &&
     prev.createWithPrimary === next.createWithPrimary &&
     prev.zoomWithPrimary === next.zoomWithPrimary &&