Skip to main content
Version: 4.3

CellInteractivity

type CellInteractivity = 
| boolean
| dia.CellView.InteractivityOptions
| CellInteractivityCallback;

Controls which pointer interactions (moving, linking, label dragging, …) are enabled on cells. Accepts a boolean to switch everything on or off, an InteractivityOptions object to toggle individual interactions, or a function that returns either form per cell from a CellInteractivityParams context. Pass it to the interactive prop of <Paper>. By default, label dragging (labelMove) and moving links (linkMove) stay disabled; link endpoints (arrowheadMove) remain draggable.

Example

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>;

Stay in the know

Be where thousands of diagramming enthusiasts meet

Star us on GitHub