<Overlay />

Renders an HTML overlay positioned at arbitrary local (graph) coordinates inside a <Paper>.

To anchor content to an element's bounding box instead of a fixed coordinate, reach for ElementOverlay. See OverlayProps for the full list of options.

Example

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

// Center a floating badge over graph point (100, 50).
<GraphProvider>
  <Paper>
    <Overlay x={100} y={50} origin="center">
      <span className="badge">New</span>
    </Overlay>
  </Paper>
</GraphProvider>

Props

angle?

readonly optional angle?: number;

Rotation angle in degrees applied to the overlay content.

Default

0

---

children

readonly children: ReactNode;

Overlay content rendered into the paper's HTML 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 sits at (x, y).

Default

'top-left'

---

scaleWithPaper?

readonly optional scaleWithPaper?: boolean;

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

Default

false

---

wheelTransparent?

readonly optional wheelTransparent?: boolean;

How a wheel over the overlay is handled. By default the overlay consumes it, so scrolling over the overlay never moves the canvas behind it (the normal popup behaviour). Set true to instead forward the wheel to the paper, so it keeps driving the canvas (zoom / pan) as if the overlay were not there — useful for a non-interactive overlay laid over the canvas.

Independent of this flag, a wheel whose target is inside a scrollable region (native <textarea> or an element marked data-jj-scrollable with actual overflow) is always let through so the region scrolls natively.

Default

false

---

x

readonly x: number;

Local (graph) x coordinate.

---

y

readonly y: number;

Local (graph) y coordinate.