usePaperScrollerViewport()

Read the whole viewport

function usePaperScrollerViewport(paperId?): PaperScrollerViewport;

Tracks a paper's <PaperScroller> zoom and visible area, re-rendering the component whenever either changes. Always returns a viewport object — before a scroller is registered it is a neutral default (zoom: 1, zooming disabled, empty visibleArea), so you never have to null-check.

Re-renders on paper scale / translate and scroller scroll. To read a single derived value (and re-render only when that changes), pass a selector — see the other overloads. To imperatively change the zoom or pan, use usePaperScroller.

Parameters

Parameter	Type	Description
paperId?	string	Paper id, or omit to use the current <Paper> context (falling back to the default paper).

Returns

The current PaperScrollerViewport.

Example

import { usePaperScrollerViewport } from '@joint/react-plus';

// Mount inside a <PaperScroller> to show the live zoom level.
function ZoomIndicator() {
  const { zoom } = usePaperScrollerViewport();
  return <span>{Math.round(zoom * 100)}%</span>;
}

Select a derived value

function usePaperScrollerViewport<Selected>(selector, isEqual?): Selected;

Subscribes to a single derived value of the nearest paper's viewport. The component re-renders only when the selected value changes, compared with isEqual (defaults to Object.is) — so reading zoom will not re-render when the user merely pans.

Type Parameters

Type Parameter	Description
Selected	the selector's return type.

Parameters

Parameter	Type	Description
selector	ViewportSelector<Selected>	Derives a value from the PaperScrollerViewport.
isEqual?	ViewportIsEqual<Selected>	Equality test used to short-circuit re-renders.

Returns

Selected

The selected value.

Example

import { usePaperScrollerViewport } from '@joint/react-plus';

// Re-renders only when the zoom changes, not on every pan.
function ZoomPercent() {
  const zoom = usePaperScrollerViewport((viewport) => viewport.zoom);
  return <span>{Math.round(zoom * 100)}%</span>;
}

Select a value by paper id

function usePaperScrollerViewport<Selected>(
  paperId,
  selector,
  isEqual?,
): Selected;

Subscribes to a single derived value of a specific paper's viewport, addressed by id — useful when several papers are mounted. Re-renders only when the selected value changes (per isEqual, default Object.is).

Type Parameters

Type Parameter	Description
Selected	the selector's return type.

Parameters

Parameter	Type	Description
paperId	string	Id of the paper to read.
selector	ViewportSelector<Selected>	Derives a value from the PaperScrollerViewport.
isEqual?	ViewportIsEqual<Selected>	Equality test used to short-circuit re-renders.

Returns

Selected

The selected value.

Example

import { usePaperScrollerViewport } from '@joint/react-plus';

// Disable the button at the max zoom level.
function ZoomInButton() {
  const canZoomIn = usePaperScrollerViewport('main', (viewport) => viewport.canZoomIn);
  return <button disabled={!canZoomIn}>Zoom in</button>;
}

Returns

canZoomIn

readonly canZoomIn: boolean;

Whether the scroller can zoom in further (below maxZoom).

---

canZoomOut

readonly canZoomOut: boolean;

Whether the scroller can zoom out further (above minZoom).

---

visibleArea

readonly visibleArea: Rect;

Visible area in graph coordinates, as a g.Rect (keeps geometry helpers).

---

zoom

readonly zoom: number;

Current zoom level (1 = 100%).