import { GraphProvider, Paper } from '@joint/react';
import type { CellInteractivity } from '@joint/react';
// Lock cells flagged as readonly; leave the rest interactive.
const interactive: CellInteractivity = ({ model }) => !model.get('readonly');
<GraphProvider>
<Paper interactive={interactive} renderElement={() => <rect width={80} height={40} />} />
</GraphProvider>;
Controls which pointer interactions (moving, linking, label dragging, …) are enabled on cells. Accepts a boolean to switch everything on or off, an
InteractivityOptionsobject to toggle individual interactions, or a function that returns either form per cell from a CellInteractivityParams context. Pass it to theinteractiveprop of<Paper>. By default, label dragging (labelMove) and moving links (linkMove) stay disabled; link endpoints (arrowheadMove) remain draggable.