Skip to main content
Version: 4.3

HaloProps

Props for the Halo component: the officially supported Halo options. Pass-through props inherit native types via indexed access (ui.Halo.Options['name']), so any type-level change in JointJS propagates automatically. Anything not listed here is reachable via the options escape hatch.

Properties

cell?

readonly optional cell?: ID | Cell<Attributes<Selectors>, ModelSetOptions> | null;

Cell to attach the halo to: accepts a dia.Cell instance or a cell id. Required when used outside renderElement. Inside renderElement the cell is taken from CellIdContext; passing cell there is ambiguous, so it is ignored (a console warning is logged and the halo is disabled). Pass null to disable the halo explicitly.


groups?

readonly optional groups?: object;

Named handle groups keyed by group name: each entry positions and aligns the handles assigned to it (position, alignment, gap, className).

Index Signature

[groupName: string]: HandleGroup

Default

JointJS default group layout

handles?

readonly optional handles?: HaloHandles;

Halo handles. Pass an array to fully override the defaults, or a function (defaultHandles) => HaloHandle[] to transform the cell-type defaults (e.g. element vs link). The function form receives the handles this component would apply by default for the current cell type (element: remove, clone, fork, link, unlink, rotate; link: remove, direction), useful for filtering / tweaking individual handles without re-listing them all. Compose individual built-in handles with getHaloDefaultHandle.

Each handle accepts a title: a button tooltip set as the title attribute on the handle (mapped to the native attrs). Built-in handles carry a default title; pass your own to override.

A handle's events callbacks receive contextual params ({ event, x, y, model, paper, graph }) => void instead of native positional (evt, x, y) arguments.

Default

The built-in handles for the cell type (element or link).

options?

readonly optional options?: Partial<Options>;

Raw ui.Halo.Options passthrough for anything joint-react-plus doesn't expose as a dedicated prop: bbox, loopLinkPreferredSide, loopLinkWidth, clone, magnet, the pie* fields (irrelevant for the overlay type), plus mvc internals.

Element / link creation is configured per handle via the handle's makeElement / makeLink (see HaloHandle); a global native makeElement / makeLink can still be passed here.

Avoid overriding joint-react-plus-controlled options (cellView). Future improvement: expose magnet as a dedicated prop once its signature is reviewed for the React-context world (needs a port-linking demo to validate).


rotateAngleGrid?

readonly optional rotateAngleGrid?: number;

Snap rotation to multiples of this angle (degrees) when using the rotate handle.

Default

15

Stay in the know

Be where thousands of diagramming enthusiasts meet

Star us on GitHub