Skip to main content

​
Overview

The ResizeHandle type represents the four corner handles used for resizing bounding box annotations. Each handle corresponds to a corner of the rectangle and determines the resize behavior.

​
Type Definition

types.ts
export type ResizeHandle = "nw" | "ne" | "sw" | "se"

​
Values

​
nw
string
North-West (top-left corner) - Adjusts both top and left edges
​
ne
string
North-East (top-right corner) - Adjusts top and right edges
​
sw
string
South-West (bottom-left corner) - Adjusts bottom and left edges
​
se
string
South-East (bottom-right corner) - Adjusts both bottom and right edges

​
Usage

The ResizeHandle type is used when initiating a resize operation on an annotation:
App.tsx
const startResizeAnnotation = (
  event: MouseEvent<HTMLElement>,
  annotation: AnnotationBox,
  handle: ResizeHandle
) => {
  // ... setup resize operation
  setAnnotationTransform({
    id: annotation.id,
    type: "resize",
    handle,
    startPointer: point,
    startBox: annotation,
  })
}

​
Resize Behavior

Each handle modifies different edges of the bounding box:
HandleModifies EdgesCursor Style
nwTop + Leftnwse-resize
neTop + Rightnesw-resize
swBottom + Leftnesw-resize
seBottom + Rightnwse-resize

​
Constraints

When resizing, the following constraints are enforced:
  • Minimum box size (MIN_BOX_SIZE = 8px)
  • Canvas boundaries (cannot resize beyond image edges)
  • Opposite corners remain fixed (only the selected corner moves)

​
Visual Representation

  nw ----------- ne
  |               |
  |   Annotation  |
  |               |
  sw ----------- se

Build docs developers (and LLMs) love

Get started for freeTalk to us