Skip to content

feat(bounding-box): add bounding box highlight support#739

Merged
Nefaris merged 8 commits intobox:masterfrom
dlasecki-box:bounding-box-highlight-support
Mar 23, 2026
Merged

feat(bounding-box): add bounding box highlight support#739
Nefaris merged 8 commits intobox:masterfrom
dlasecki-box:bounding-box-highlight-support

Conversation

@dlasecki-box
Copy link
Copy Markdown
Contributor

@dlasecki-box dlasecki-box commented Mar 19, 2026

This PR adds the ability to display and interact with bounding box highlights on documents. Bounding boxes are rectangular overlays that can be used to highlight specific regions of interest (e.g., detected text regions, search results, AI predictions).

Key features:

  • View Mode Switching: Introduces a new viewMode option to the annotator interface that toggles between annotations (default) and boundingBoxes modes. These modes are mutually exclusive - when in bounding boxes mode, traditional annotation tools are hidden, and vice versa.
  • Bounding Box Rendering: Display rectangular highlights with coordinates on specific pages
  • Selection & Navigation: Click to select bounding boxes, with built-in prev/next navigation
  • Auto-scroll: Automatically scrolls to the selected bounding box
Screenshot 2026-03-17 at 13 12 51

Possible usage on the client side:

// Set bounding boxes 
annotator.setBoundingBoxHighlights([                                                                                                                                                                                                             
    {                                                                                                                                                                                                                                              
      id: 'box-1',                                                                                                                                                                                                                                 
      x: 100,                                                                                                                                                                                                                                      
      y: 200,                                                                                                                                                                                                                                      
      width: 300,                                                                                                                                                                                                                                  
      height: 50,                                                                                                                                                                                                                                  
      pageNumber: 1                                                                                                                                                                                                                                
    },                                                                                                                                                                                                                                             
    {                                                                                                                                                                                                                                              
      id: 'box-2',                                                                                                                                                                                                                                 
      x: 150,                                                                                                                                                                                                                                      
      y: 400,                                                                                                                                                                                                                                      
      width: 250,                                                                                                                                                                                                                                  
      height: 75,                                                                                                                                                                                                                                  
      pageNumber: 2                                                                                                                                                                                                                                
    }                                                                                                                                                                                                                                              
  ]);  

// Switch to bounding boxes view mode                                                                                                                                                                                                            
annotator.setViewMode('boundingBoxes');
                                                                                                                                                                                                                                                   
// Programmatically select and scroll to a bounding box                                                                                                                                                                                          
annotator.selectBoundingBoxHighlight('box-1');         

@dlasecki-box dlasecki-box requested a review from a team as a code owner March 19, 2026 08:34
@dlasecki-box dlasecki-box changed the title Add bounding box highlight support feat(bounding-box): add bounding box highlight support Mar 19, 2026
Copy link
Copy Markdown

@Lindar90 Lindar90 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1 major note regarding cleaning up the selected bbox Highlight

permissions: {},
rotation: 0,
scale: 1,
viewMode: 'annotations' as ViewMode,
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor:
Let's use enum: ViewMode.Annotations

Lindar90
Lindar90 previously approved these changes Mar 19, 2026
Copy link
Copy Markdown

@Lindar90 Lindar90 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@Nefaris Nefaris merged commit 681f3c4 into box:master Mar 23, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants