fix: Handle rect selection properly. #1597

h2oai · Sep 27, 2022 · aa11368 · aa11368
1 parent 0955de2
commit aa11368
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/ui/src/image_annotator.tsx b/ui/src/image_annotator.tsx
@@ -154,6 +154,7 @@ export const XImageAnnotator = ({ model }: { model: ImageAnnotator }) => {
       })
     }, [getCurrentTagColor]),
     onMouseDown = (e: React.MouseEvent) => {
+      console.log('mousedown')
       if (e.button !== 0) return // Ignore right-click.
       const canvas = canvasRef.current
       if (!canvas) return
@@ -212,8 +213,7 @@ export const XImageAnnotator = ({ model }: { model: ImageAnnotator }) => {
       switch (activeShape) {
         case 'rect': {
           // TODO: Fix rect selection.
-          const newRect = rectRef.current?.onClick(e, cursor_x, cursor_y, drawnShapes, drawnShapes, activeTag, start)
-          if (newRect) setDrawnShapes([newRect, ...drawnShapes])
+          rectRef.current?.onClick(e, cursor_x, cursor_y, setDrawnShapes, activeTag, start)
           break
         }
         case 'polygon': {

diff --git a/ui/src/image_annotator_rect.ts b/ui/src/image_annotator_rect.ts
@@ -52,17 +52,18 @@ export class RectAnnotator {
     }
   }
 
-  onClick = (e: React.MouseEvent, cursor_x: U, cursor_y: U, newShapes: DrawnShape[], drawnShapes: DrawnShape[], tag: S, start?: Position) => {
+  onClick = (e: React.MouseEvent, cursor_x: U, cursor_y: U, setDrawnShapes: (value: React.SetStateAction<DrawnShape[]>) => void, tag: S, start?: Position) => {
     let newRect = null
     if (start && !this.resizedCorner) {
       const rect = this.createRect(start.x, cursor_x, start.y, cursor_y)
       if (rect) newRect = ({ shape: { rect: rect }, tag })
     }
 
     if (!this.resizedCorner && !start?.dragging && e.type !== 'mouseleave') {
-      newShapes.forEach(shape => shape.isFocused = false)
-      const intersecting = drawnShapes.find(shape => isIntersectingRect(cursor_x, cursor_y, shape.shape.rect))
-      if (intersecting) intersecting.isFocused = true
+      setDrawnShapes(drawnShapes => drawnShapes.map(s => {
+        s.isFocused = isIntersectingRect(cursor_x, cursor_y, s.shape.rect)
+        return s
+      }))
     }
 
     this.resizedCorner = undefined