Skip to main content
Version: 4.3

SelectionHandle

A selection handle: the React-facing handle config. Mirrors the relevant ui.Selection.Handle fields with React-friendly types (content as a node, contextual events, group in place of native position).

Properties

className?

readonly optional className?: string;

Extra CSS class on the handle button.


content?

readonly optional content?: ReactNode;

Handle button content. A string is used as raw HTML; a React node is pre-rendered and serialized to static HTML, handle content is presentational, so static markup is enough. No live re-render inside.


events?

readonly optional events?: SelectionHandleEvents;

Pointer / context-menu callbacks. See SelectionHandleEvents; each receives { event, x, y, collection, paper, graph }.


group?

readonly optional group?: string;

Group this handle belongs to: the key into groups (the built-in groups are named by compass position: 'n', 'ne', 'e', …). Renamed from the native position.


hideOnDrag?

readonly optional hideOnDrag?: boolean;

Hide this handle while dragging.


icon?

readonly optional icon?: string;

Background-image icon URL for the handle button.


name?

readonly optional name?: string;

Handle id, unique within this selection: the namespace for events. Auto-generated (handle-<index>) when omitted or when it collides with an earlier handle. Provide your own when you need a stable, meaningful id.


title?

readonly optional title?: string;

Tooltip text set as the title attribute on the handle button.

Stay in the know

Be where thousands of diagramming enthusiasts meet

Star us on GitHub