Camera

Camera control, modes, centering, and viewport manipulation.

Import

import { GraphCanvas, useCameraControls, useCenterGraph } from 'reagraph';

CameraMode

Set via cameraMode on GraphCanvas:

GraphCanvas Camera Props

useCameraControls Hook

Access camera controls imperatively from inside the Three.js context:

const {
  controls,
  resetControls,
  zoomIn,
  zoomOut,
  dollyIn,
  dollyOut,
  panLeft,
  panRight,
  panUp,
  panDown,
  freeze,
  unFreeze,
} = useCameraControls();

useCenterGraph Hook

Center or fit nodes into the viewport:

const {
  centerNodes,
  centerNodesById,
  fitNodesInViewById,
  isCentered,
} = useCenterGraph({ animated: true, layoutType });

Options

interface CenterNodesParams {
  animated?: boolean;
  centerOnlyIfNodesNotInView?: boolean;
}

interface FitNodesParams {
  animated?: boolean;
  fitOnlyIfNodesNotInView?: boolean;
}

Using Ref (Outside Three.js Context)

For camera control outside the canvas, use the GraphCanvasRef:

const ref = useRef<GraphCanvasRef>(null);

<GraphCanvas ref={ref} nodes={nodes} edges={edges} />

<button onClick={() => ref.current?.centerGraph()}>Center</button>
<button onClick={() => ref.current?.zoomIn()}>Zoom In</button>
<button onClick={() => ref.current?.fitNodesInView(['1', '2'])}>Fit Nodes</button>

2D Mode

<GraphCanvas
  nodes={nodes}
  edges={edges}
  cameraMode="pan"
  layoutType="forceDirected2d"
/>

3D Mode

<GraphCanvas
  nodes={nodes}
  edges={edges}
  cameraMode="orbit"
  layoutType="forceDirected3d"
/>

Orthographic Mode

<GraphCanvas
  nodes={nodes}
  edges={edges}
  cameraMode="orthographic"
  minZoom={0.5}
  maxZoom={50}
/>

Notes

• useCameraControls and useCenterGraph must be used inside the Three.js context (child of GraphCanvas)
• For external control, use the GraphCanvasRef methods instead
• cameraMode="orbit" is recommended for 3D layouts
• cameraMode="pan" is recommended for 2D layouts