<Selection />

Adds interactive multi-cell selection to a <Paper>. With a <Diagram interactions> ancestor, Shift-drag a rubber-band region to select cells (or start one imperatively via useSelection's startSelectionRegion), then move, resize, rotate, clone, or remove them as a group using the handles on the selection wrapper.

Drop it inside <Paper> and it registers itself as the paper's selection feature. A <Diagram interactions> ancestor detects it automatically, so no manual ref wiring is needed. Tune the wrapper rectangle and its handles with the wrapper prop, the per-cell frame boxes with frames, and reach any remaining ui.Selection option through the options escape hatch. See SelectionProps for every supported prop.

Read or drive the selection from anywhere below <Diagram> with useSelection, and compose the built-in handles with getSelectionDefaultHandle.

Type Parameters

Type Parameter	Default type	Description
Model extends Cell<Attributes<Selectors>, ModelSetOptions>	Cell<Attributes<Selectors>, ModelSetOptions>	The selected cell model inferred from the frames prop, used to type the per-cell frames callbacks. Defaults to dia.Cell.

See

• Selection
• selection

Example

import { Paper, Diagram, Selection, useSelection } from '@joint/react-plus';

function MyDiagram() {
  return (
    <Diagram initialCells={cells} interactions>
      <Paper renderElement={RenderElement}>
        <Selection />
      </Paper>
    </Diagram>
  );
}

// Start a rubber-band region from a toolbar button:
function SelectAreaButton() {
  const { startSelectionRegion } = useSelection();
  return <button onClick={() => startSelectionRegion()}>Select area</button>;
}

Props

allowTranslate?

readonly optional allowTranslate?: boolean;

Allow dragging a selected cell to move the whole selection.

Default

true

---

frames?

readonly optional frames?: 
  | boolean
  | SelectionFramesOptions<Model>
| SelectionFrameList<any>;

Frame list rendered around each selected cell. By default the jj-is-selected CSS class is toggled on selected cells even when no boxes are drawn (opt out via the options form's cellClassName: ''): style via CSS to react to selection.

• undefined / false: class only, no HTML boxes.
• true: class + HTML overlay box on every selected cell (shouldRender: () => true).
• Options object: forwarded to SelectionFrameList's constructor; default shouldRender: () => true. Override shouldRender to gate boxes per cell, pass style for per-cell inline styling, etc.

ui.SelectionFrameList instance passthrough is also accepted as an escape hatch for fully custom frame lists.

---

options?

readonly optional options?: Partial<Options>;

Raw ui.Selection.Options passthrough for fields not exposed as dedicated props (attributes, cid, className, el, events, id, tagName, theme, and any future additions).

Avoid overriding joint-react-plus-controlled options (paper, graph, model, collection).

---

translateConnectedLinks?

readonly optional translateConnectedLinks?: ConnectedLinksTranslation;

Which links also move when the selected elements are dragged: 'none', 'subgraph' (only links between selected elements), or 'all'.

Default

'all'

---

wrapper?

readonly optional wrapper?: 
  | boolean
  | SelectionWrapperOptions
| SelectionWrapper<Element>;

Selection wrapper: the HTML overlay rectangle that hosts handles and a bbox outline around the selected cells.

• undefined / true: default SelectionWrapper.
• false: no wrapper. Hides the bbox AND drops all handles (handles render inside the wrapper).
• Options object: forwarded to SelectionWrapper's constructor (margin, visibility, usePaperScale, …). Also accepts handles / groups here, since they live on the wrapper.

ui.SelectionWrapper instance passthrough is also accepted as an escape hatch.