Note

The note module enables interactive annotations, selection, modification, and filtering. This module requires Axis, Input, and Plane contexts. See the Basic Annotation demo for guidance.

Components

function Provider(props: ProviderProps): JSX.Element
function Transform(props: TransformProps): JSX.Element

Functions

function selectionMode(event: React.MouseEvent): SelectionMode
function useContext<T = Properties>(): Context<T>

Types

enum SelectionMode {
  add = "add",
  invert = "invert",
  replace = "replace",
  subtract = "subtract",
}

type AnnotationProps<T = Properties> = {
  children?: (props: AnnotationProps<T>) => JSX.Element
  dimensions: Vector2.Vector2
  region: Region<T>
  selected?: boolean
  svgProps?: R.SVGProps<SVGSVGElement>
  viewerId?: string
}

type Context<T = Properties> = {
  canCreate: boolean
  regions: RegionState<T>
  selection: SelectionState
  transformedRegions: RegionState<T>
  transformedSelection: SelectionState
  canDelete: (region: Region<T>) => boolean
  canRead: (region: Region<T>) => boolean
  canUpdate: (region: Region<T>) => boolean
  create: (
    region: Region<T>,
    options?: {
      autoSelect?: boolean
    },
  ) => void
  deleteSelection: () => void
  deselect: () => void
  moveSelection: (dx: number, dy: number) => void
  render?: (props: AnnotationProps<T>) => JSX.Element
  selectArea: (rect: Rect.Rect, selectionMode?: SelectionMode) => void
  selectId: (id: string, selectionMode?: SelectionMode) => void
  selectPoint: (pt: Vector2.Vector2, selectionMode?: SelectionMode) => void
  setRectX: (region: Region<T>, dx: number) => void
  setRectX1: (region: Region<T>, dx: number) => void
  setRectX2: (region: Region<T>, dx: number) => void
  setRectY: (region: Region<T>, dy: number) => void
  setRectY1: (region: Region<T>, dy: number) => void
  setRectY2: (region: Region<T>, dy: number) => void
  setRegions: R.Dispatch<R.SetStateAction<RegionState<T>>>
  setSelection: R.Dispatch<R.SetStateAction<SelectionState>>
  updateRegion: (id: string, fn: R.SetStateAction<Region<T>>) => void
  updateRegionProperties: (
    id: string,
    fn: R.SetStateAction<undefined | T>,
  ) => void
  updateSelectedRegions: (fn: R.SetStateAction<Region<T>>) => void
}

type Properties = Record<string, unknown>

type ProviderProps = {
  canCreate?: Context["canCreate"]
  canDelete?: Context["canDelete"]
  canRead?: Context["canRead"]
  canUpdate?: Context["canUpdate"]
  children: React.ReactNode
  initRegions?: InitialState<Context["regions"]>
  initSelection?: InitialState<Context["selection"]>
  render?: Context["render"]
}

type Region<T = Properties> = {
  id: string
  x: number
  y: number
  width: number
  height: number
  xunit: string
  yunit: string
  properties?: T
}

type RegionState<T = Properties> = Map<Region["id"], Region<T>>

type SelectionState = Set<Region["id"]>

type TransformProps = {
  children: React.ReactNode
  fn: (regionState: RegionState) => RegionState
}