Skip to main content

Indicators

Selection indicators are the on-canvas chrome that surrounds the current selection — the selection frame, handles, and the floating panel that follows it. The drawing lives in @oh-just-another/state and the React surface in @oh-just-another/react-ui.

Overlay pass​

renderOverlay from @oh-just-another/state paints all interaction chrome — selection frames (oriented per shape rotation), resize/rotate handles, lasso, link highlights, peer cursors — onto a render target in one pass, styled by an OverlayStyle (start from DEFAULT_OVERLAY_STYLE). Handle geometry helpers (handlePosition, hitHandle, HANDLE_SIZE) are exported separately — see Handles.

import { renderOverlay, DEFAULT_OVERLAY_STYLE, type OverlayStyle } from "@oh-just-another/state";

Floating selection panel​

@oh-just-another/react-ui provides SelectionFloatingPanel, the panel that tracks the active selection bounds (via floating-ui, flipping sides when space runs out) and hosts the property quick actions. It reads the live selection from the diagram context; offset, placement, and edge insets are optional props.

import { SelectionFloatingPanel } from "@oh-just-another/react-ui";

function Overlay() {
  return <SelectionFloatingPanel />;
}

The full <Editor> from @oh-just-another/editor wires these indicators up by default; reach for the lower-level pieces above only when building a custom overlay or a headless rendering of the selection state.