<Snaplines />

Shows alignment guides while you drag or resize elements, snapping them to the edges and centers of nearby elements (and optionally to the paper grid) for tidy, aligned layouts. Mount it inside a <Paper>; see SnaplinesProps for the available options, including the options escape hatch for native ui.Snaplines settings that have no dedicated prop.

Other components such as <Stencil> automatically detect and reuse the active snaplines instance.

To turn snaplines off, conditionally render the component, unmounting removes the instance entirely: {shouldSnap && <Snaplines />}.

See

Snaplines

Example

import { GraphProvider, Paper, Snaplines } from '@joint/react-plus';

function MyDiagram() {
  return (
    <GraphProvider initialCells={cells}>
      <Paper renderElement={RenderElement}>
        <Snaplines
          distance={10}
          usePaperGrid
          canSnap={({ model }) => !model.get('locked')}
          isSnapTarget={({ model, targetModel }) =>
            targetModel.get('type') !== 'decoration' &&
            targetModel.get('lane') === model.get('lane')
          }
        />
      </Paper>
    </GraphProvider>
  );
}

Props

additionalSnapPoints?

readonly optional additionalSnapPoints?: (params) => PlainPoint[];

Provide extra snap points (beyond the element's bbox) for the current move/resize gesture.

Parameters

Parameter	Type
params	SnaplinesAdditionalSnapPointsParams

Returns

PlainPoint[]

---

canSnap?

readonly optional canSnap?: (params) => boolean;

Predicate deciding whether the dragged element may snap: return true to allow snapping.

Parameters

Parameter	Type
params	SnaplinesCanSnapParams

Returns

boolean

---

distance?

readonly optional distance?: number;

Snap radius in pixels: how close an edge must get before it snaps.

Default

10

---

isSnapTarget?

readonly optional isSnapTarget?: (params) => boolean;

Predicate deciding whether a candidate element may act as a snap target: return true to include it.

Parameters

Parameter	Type
params	SnaplinesIsSnapTargetParams

Returns

boolean

---

options?

readonly optional options?: Partial<Options>;

Raw ui.Snaplines.Options passthrough for anything joint-react-plus doesn't expose as a dedicated prop (mvc internals like theme, events, attributes, tagName, etc.). Use this for the array forms of native filter (string[] of cell types / dia.Cell[] to exclude as snap targets); the dedicated isSnapTarget prop covers the predicate form.

Avoid overriding joint-react-plus-controlled options (paper).

---

usePaperGrid?

readonly optional usePaperGrid?: boolean;

Snap to the paper grid in addition to other elements.

Default

false