<ElementOverlay />

Pins HTML over a diagram element inside a <Paper>, following the element as it moves, resizes, or rotates, and tracking paper pan and zoom. Reach for it to attach floating toolbars, badges, labels, or action buttons to a node.

It builds on Overlay, turning the element's live bounding box into a coordinate, and works in two modes:

• Inside renderElement: omit cell — the element is taken from context. Passing cell there is ambiguous, so the overlay renders nothing and logs a warning.
• Outside renderElement: pass cell (a dia.Cell or its id). Pass null to unmount.

position picks the anchor point on the element's box; origin picks which point of the overlay lines up with it (see OverlayPosition).

Example

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

// Inside renderElement: the overlay binds to the rendered element.
function RenderElement() {
  return (
    <ElementOverlay position="top-right" origin="bottom-left" dx={4}>
      <button>Delete</button>
    </ElementOverlay>
    // Your element rendering here...
  );
}

// Outside renderElement: name the element by id (or pass the cell).
<GraphProvider>
  <Paper renderElement={RenderElement}>
    <ElementOverlay cell="node-1" position="top-right">
      <span>Selected</span>
    </ElementOverlay>
  </Paper>
</GraphProvider>

Props

cell?

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

Element the overlay attaches to — a dia.Cell instance or a cell id. Required when used outside renderElement; pass null to unmount the overlay. Inside renderElement, omit this prop: the element is taken from context. Passing cell there is ambiguous, so the overlay renders nothing and logs a warning.

---

children

readonly children: ReactNode;

Overlay content rendered over the element.

---

className?

readonly optional className?: string;

CSS class name applied to the overlay container.

---

dx?

readonly optional dx?: number;

Horizontal pixel offset from the computed position.

Default

0

---

dy?

readonly optional dy?: number;

Vertical pixel offset from the computed position.

Default

0

---

origin?

readonly optional origin?: OverlayPosition;

Which point of the overlay aligns to the attachment point.

Default

'top-left'

---

position?

readonly optional position?: OverlayPosition;

Where on the element's bbox the overlay attaches.

Default

'top-left'

---

rotateWithElement?

readonly optional rotateWithElement?: boolean;

When true, the overlay rotates together with the element. When false, the overlay stays upright and positions against the axis-aligned rotated bounding box.

Default

false

---

scaleWithPaper?

readonly optional scaleWithPaper?: boolean;

When true, the overlay scales together with the paper (zoom).

Default

false

---

style?

readonly optional style?: CSSProperties;

Inline styles applied to the overlay container.