Viewport

The viewport module enables interactive zoom and pan of visualizers and axes. This module requires the use of an Input context. See the Interactive Spectrogram demo for guidance.

Components

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

Functions

function useContext(): Context

Types

enum ZoomDirection {
  in = "in",
  out = "out",
}

type Context = {
  state: State
  resetView: () => void
  scroll: (dx: number, dy: number) => void
  scrollTo: (scroll: Scroll) => void
  zoom: (dx: number, dy: number) => void
  zoomArea: (rect: Rect.Rect) => void
  zoomPoint: (point: Vector2.Vector2, zoomDirection?: ZoomDirection) => void
  zoomScroll: (dx: number, dy: number) => void
}

type ProviderProps = {
  children: React.ReactNode
}

type State = {
  scroll: Vector2.Vector2
  zoom: Vector2.Vector2
}

type TransformProps = {
  children: React.ReactNode
  fn: (state: State) => State
}