optimizations and minor fixes for selections and highlight boxes

seveibar · seveibar · commit c76ac02cd0ef · 2020-06-10T23:55:22.000-04:00
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "react-use": "^13.27.0",
     "react-use-measure": "^2.0.0",
     "seamless-immutable": "^7.1.4",
+    "shallow-equal": "^1.2.1",
     "storybook": "^5.3.14",
     "transformation-matrix-js": "^2.7.6",
     "use-event-callback": "^0.1.0",
diff --git a/src/Annotator/reducers/general-reducer.js b/src/Annotator/reducers/general-reducer.js
@@ -370,10 +370,6 @@ export default (state: MainLayoutState, action: Action) => {
           break
       }
 
-      if (newRegion) {
-        state = unselectRegions(state)
-      }
-
       if (state.mode) {
         switch (state.mode.mode) {
           case "DRAW_POLYGON": {
@@ -394,6 +390,7 @@ export default (state: MainLayoutState, action: Action) => {
         .map((r) => ({
           ...r,
           editingLabels: false,
+          highlighted: false,
         }))
         .concat(newRegion ? [newRegion] : [])
 
diff --git a/src/ImageCanvas/index.js b/src/ImageCanvas/index.js
@@ -414,7 +414,7 @@ export const ImageCanvas = ({
       {showCrosshairs && (
         <Crosshairs key="crossHairs" mousePosition={mousePosition} />
       )}
-      {imageLoaded && (
+      {imageLoaded && !dragging && (
         <RegionSelectAndTransformBoxes
           key="regionSelectAndTransformBoxes"
           regions={regions}
@@ -433,7 +433,7 @@ export const ImageCanvas = ({
           showHighlightBox={showHighlightBox}
         />
       )}
-      {imageLoaded && showTags && (
+      {imageLoaded && showTags && !dragging && (
         <PreventScrollToParents key="regionTags">
           <RegionTags
             regions={regions}
diff --git a/src/RegionSelectAndTransformBoxes/index.js b/src/RegionSelectAndTransformBoxes/index.js
@@ -1,9 +1,10 @@
 // @flow weak
 
-import React, { Fragment } from "react"
+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,
@@ -19,148 +20,160 @@ const boxCursorMap = [
   ["sw-resize", "s-resize", "se-resize"],
 ]
 
-export const RegionSelectAndTransformBoxes = ({
-  regions,
-  mouseEvents,
-  projectRegionBox,
-  dragWithPrimary,
-  createWithPrimary,
-  zoomWithPrimary,
-  onBeginMovePoint,
-  onSelectRegion,
-  layoutParams,
-  mat,
-  onBeginBoxTransform,
-  onBeginMovePolygonPoint,
-  onAddPolygonPoint,
-  showHighlightBox,
-}) => {
-  return regions
-    .filter((r) => r.visible || r.visible === undefined)
-    .filter((r) => !r.locked)
-    .map((r, i) => {
-      const pbox = projectRegionBox(r)
-      const { iw, ih } = layoutParams.current
-      return (
-        <Fragment key={r.id}>
-          <PreventScrollToParents>
-            {showHighlightBox && (
-              <HighlightBox
-                region={r}
-                mouseEvents={mouseEvents}
-                dragWithPrimary={dragWithPrimary}
-                createWithPrimary={createWithPrimary}
-                zoomWithPrimary={zoomWithPrimary}
-                onBeginMovePoint={onBeginMovePoint}
-                onSelectRegion={onSelectRegion}
-                pbox={pbox}
+const arePropsEqual = (prev, next) => {
+  return (
+    shallowEqualObjects(prev.region, next.region) &&
+    prev.dragWithPrimary === next.dragWithPrimary &&
+    prev.createWithPrimary === next.createWithPrimary &&
+    prev.zoomWithPrimary === next.zoomWithPrimary &&
+    prev.layoutParams.current.iw === next.layoutParams.current.iw &&
+    prev.layoutParams.current.ih === next.layoutParams.current.ih &&
+    prev.mat === next.mat
+  )
+}
+
+export const RegionSelectAndTransformBox = memo(
+  ({
+    region: r,
+    mouseEvents,
+    projectRegionBox,
+    dragWithPrimary,
+    createWithPrimary,
+    zoomWithPrimary,
+    onBeginMovePoint,
+    onSelectRegion,
+    layoutParams,
+    mat,
+    onBeginBoxTransform,
+    onBeginMovePolygonPoint,
+    onAddPolygonPoint,
+    showHighlightBox,
+  }) => {
+    const pbox = projectRegionBox(r)
+    const { iw, ih } = layoutParams.current
+    return (
+      <Fragment>
+        <PreventScrollToParents>
+          {showHighlightBox && (
+            <HighlightBox
+              region={r}
+              mouseEvents={mouseEvents}
+              dragWithPrimary={dragWithPrimary}
+              createWithPrimary={createWithPrimary}
+              zoomWithPrimary={zoomWithPrimary}
+              onBeginMovePoint={onBeginMovePoint}
+              onSelectRegion={onSelectRegion}
+              pbox={pbox}
+            />
+          )}
+          {r.type === "box" &&
+            !dragWithPrimary &&
+            !zoomWithPrimary &&
+            !r.locked &&
+            r.highlighted &&
+            mat.a < 1.2 &&
+            [
+              [0, 0],
+              [0.5, 0],
+              [1, 0],
+              [1, 0.5],
+              [1, 1],
+              [0.5, 1],
+              [0, 1],
+              [0, 0.5],
+              [0.5, 0.5],
+            ].map(([px, py], i) => (
+              <TransformGrabber
+                key={i}
+                {...mouseEvents}
+                onMouseDown={(e) => {
+                  if (e.button === 0)
+                    return onBeginBoxTransform(r, [px * 2 - 1, py * 2 - 1])
+                  mouseEvents.onMouseDown(e)
+                }}
+                style={{
+                  left: pbox.x - 4 - 2 + pbox.w * px,
+                  top: pbox.y - 4 - 2 + pbox.h * py,
+                  cursor: boxCursorMap[py * 2][px * 2],
+                  borderRadius: px === 0.5 && py === 0.5 ? 4 : undefined,
+                }}
               />
-            )}
-            {r.type === "box" &&
-              !dragWithPrimary &&
-              !zoomWithPrimary &&
-              !r.locked &&
-              r.highlighted &&
-              mat.a < 1.2 &&
-              [
-                [0, 0],
-                [0.5, 0],
-                [1, 0],
-                [1, 0.5],
-                [1, 1],
-                [0.5, 1],
-                [0, 1],
-                [0, 0.5],
-                [0.5, 0.5],
-              ].map(([px, py], i) => (
+            ))}
+          {r.type === "polygon" &&
+            !dragWithPrimary &&
+            !zoomWithPrimary &&
+            !r.locked &&
+            r.highlighted &&
+            r.points.map(([px, py], i) => {
+              const proj = mat
+                .clone()
+                .inverse()
+                .applyToPoint(px * iw, py * ih)
+              return (
                 <TransformGrabber
                   key={i}
                   {...mouseEvents}
                   onMouseDown={(e) => {
-                    if (e.button === 0)
-                      return onBeginBoxTransform(r, [px * 2 - 1, py * 2 - 1])
+                    if (e.button === 0 && (!r.open || i === 0))
+                      return onBeginMovePolygonPoint(r, i)
                     mouseEvents.onMouseDown(e)
                   }}
                   style={{
-                    left: pbox.x - 4 - 2 + pbox.w * px,
-                    top: pbox.y - 4 - 2 + pbox.h * py,
-                    cursor: boxCursorMap[py * 2][px * 2],
-                    borderRadius: px === 0.5 && py === 0.5 ? 4 : undefined,
+                    cursor: !r.open ? "move" : i === 0 ? "pointer" : undefined,
+                    pointerEvents:
+                      r.open && i === r.points.length - 1 ? "none" : undefined,
+                    left: proj.x - 4,
+                    top: proj.y - 4,
                   }}
                 />
-              ))}
-            {r.type === "polygon" &&
-              !dragWithPrimary &&
-              !zoomWithPrimary &&
-              !r.locked &&
-              r.highlighted &&
-              r.points.map(([px, py], i) => {
+              )
+            })}
+          {r.type === "polygon" &&
+            r.highlighted &&
+            !dragWithPrimary &&
+            !zoomWithPrimary &&
+            !r.locked &&
+            !r.open &&
+            r.points.length > 1 &&
+            r.points
+              .map((p1, i) => [p1, r.points[(i + 1) % r.points.length]])
+              .map(([p1, p2]) => [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2])
+              .map((pa, i) => {
                 const proj = mat
                   .clone()
                   .inverse()
-                  .applyToPoint(px * iw, py * ih)
+                  .applyToPoint(pa[0] * iw, pa[1] * ih)
                 return (
                   <TransformGrabber
                     key={i}
                     {...mouseEvents}
                     onMouseDown={(e) => {
-                      if (e.button === 0 && (!r.open || i === 0))
-                        return onBeginMovePolygonPoint(r, i)
+                      if (e.button === 0) return onAddPolygonPoint(r, pa, i + 1)
                       mouseEvents.onMouseDown(e)
                     }}
                     style={{
-                      cursor: !r.open
-                        ? "move"
-                        : i === 0
-                        ? "pointer"
-                        : undefined,
-                      pointerEvents:
-                        r.open && i === r.points.length - 1
-                          ? "none"
-                          : undefined,
+                      cursor: "copy",
                       left: proj.x - 4,
                       top: proj.y - 4,
+                      border: "2px dotted #fff",
+                      opacity: 0.5,
                     }}
                   />
                 )
               })}
-            {r.type === "polygon" &&
-              r.highlighted &&
-              !dragWithPrimary &&
-              !zoomWithPrimary &&
-              !r.locked &&
-              !r.open &&
-              r.points.length > 1 &&
-              r.points
-                .map((p1, i) => [p1, r.points[(i + 1) % r.points.length]])
-                .map(([p1, p2]) => [(p1[0] + p2[0]) / 2, (p1[1] + p2[1]) / 2])
-                .map((pa, i) => {
-                  const proj = mat
-                    .clone()
-                    .inverse()
-                    .applyToPoint(pa[0] * iw, pa[1] * ih)
-                  return (
-                    <TransformGrabber
-                      key={i}
-                      {...mouseEvents}
-                      onMouseDown={(e) => {
-                        if (e.button === 0)
-                          return onAddPolygonPoint(r, pa, i + 1)
-                        mouseEvents.onMouseDown(e)
-                      }}
-                      style={{
-                        cursor: "copy",
-                        left: proj.x - 4,
-                        top: proj.y - 4,
-                        border: "2px dotted #fff",
-                        opacity: 0.5,
-                      }}
-                    />
-                  )
-                })}
-          </PreventScrollToParents>
-        </Fragment>
-      )
+        </PreventScrollToParents>
+      </Fragment>
+    )
+  },
+  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} />
     })
 }
 
diff --git a/src/colors.js b/src/colors.js
@@ -21,6 +21,4 @@ export const colorInts: Array<number> = colors.map(
   (c) => (parseInt(c.substr(1), 16) | 0xff000000) >>> 0
 )
 
-console.log(colorInts)
-
 export default colors
diff --git a/yarn.lock b/yarn.lock
@@ -14545,6 +14545,11 @@ shallow-equal@^1.1.0:
   resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.0.tgz#fd828d2029ff4e19569db7e19e535e94e2d1f5cc"
   integrity sha512-Z21pVxR4cXsfwpMKMhCEIO1PCi5sp7KEp+CmOpBQ+E8GpHwKOw2sEzk7sgblM3d/j4z4gakoWEoPcjK0VJQogA==
 
+shallow-equal@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
+  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
+
 shallowequal@1.1.0, shallowequal@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,4 @@ export const colorInts: Array<number> = colors.map(`
`21`	`21`	`(c) => (parseInt(c.substr(1), 16) \| 0xff000000) >>> 0`
`22`	`22`	`)`
`23`	`23`
`24`		`-console.log(colorInts)`
`25`		`-`
`26`	`24`	`export default colors`