BoardKitFrontend
useViewport
Pan, zoom, and viewport control
useViewport provides viewport state and functions for panning, zooming, and fitting content.
Signature
function useViewport(): UseViewportResult;Return Type
interface UseViewportResult {
viewport: ViewportState;
panTo: (x: number, y: number) => void;
zoomTo: (zoom: number) => void;
fitToContent: () => void;
resetZoom: () => void;
}
interface ViewportState {
offset: Point;
zoom: number;
}| Property | Description |
|---|---|
viewport | Current viewport state (offset and zoom level) |
panTo | Pan the viewport to a specific offset |
zoomTo | Set the zoom level (clamped to 0.1 - 5.0) |
fitToContent | Auto-zoom and pan to fit all elements in view |
resetZoom | Reset to zoom 1.0 at offset (0, 0) |
Zoom Limits
const MIN_ZOOM = 0.1; // 10%
const MAX_ZOOM = 5.0; // 500%Usage
import { useViewport } from '@hfu.digital/boardkit-react';
function ViewportControls() {
const { viewport, zoomTo, fitToContent, resetZoom } = useViewport();
return (
<div>
<span>{Math.round(viewport.zoom * 100)}%</span>
<button onClick={() => zoomTo(viewport.zoom - 0.1)}>-</button>
<button onClick={() => zoomTo(viewport.zoom + 0.1)}>+</button>
<button onClick={fitToContent}>Fit</button>
<button onClick={resetZoom}>Reset</button>
</div>
);
}Viewport Utilities
The engine module exports additional viewport utilities:
import { screenToWorld, worldToScreen, zoomToPoint } from '@hfu.digital/boardkit-react';
// Convert screen coordinates to world coordinates
const worldPos = screenToWorld({ x: mouseX, y: mouseY }, viewport);
// Convert world coordinates to screen coordinates
const screenPos = worldToScreen({ x: elementX, y: elementY }, viewport);
// Zoom centered on a specific point (e.g., mouse position)
const newViewport = zoomToPoint(viewport, mousePosition, zoomDelta);