# Overlay
URL: https://pro.rv-grid.com/api/overlay/
Source: src/content/docs/api/overlay.md
## Module Extensions

### `HTMLRevoGridElementEventMap` (Extended from `global`)

```ts
interface HTMLRevoGridElementEventMap {
  overlaynode: OverlayRegisterEvent;
  overlayclearnode: OverlayUnRegisterEvent
}
```

## Plugin API

### `OverlayPlugin`

`OverlayPlugin`, a plugin for RevoGrid that manages overlay content
within the grid environment. It provides mechanisms to render, position, and update overlay elements
dynamically based on grid events and interactions.

**Key Features**:
- **Dynamic Overlay Management**: Utilizes virtual nodes (`VNode`) to manage overlay content, allowing
  for flexible rendering and updating of overlay elements as grid data or layout changes.
- **Position and Size Calculations**: Calculates and sets the position and height of overlay elements
  relative to grid scroll and dimension changes, ensuring overlays are correctly aligned with grid content.
- **Event Handling**: Listens for and responds to various grid events such as scroll, node updates,
  and dimension changes, refreshing overlay content and adjusting positions as needed.
- **Debounced Refreshing**: Integrates debouncing to optimize performance by reducing unnecessary
  updates during rapid event sequences.

**Usage**:
- Integrate this plugin into a RevoGrid instance to enable advanced overlay management, enhancing
  the ability to display additional, context-sensitive information or controls over grid content.

### Example
```typescript
import { OverlayPlugin } from '@revolist/revogrid-pro'

const grid = document.createElement('revo-grid');
grid.plugins = [OverlayPlugin];
```

The `OverlayPlugin` is essential for applications that require dynamic and context-aware overlay
content within RevoGrid, providing a robust solution for managing additional grid features or
information layers.

#### Dependencies

- **Event integration** `overlay-producer`: Renders overlay nodes emitted through overlay registration events.

```ts
class OverlayPlugin {
  destroy();
}
```

---

### `OverlayRegisterEvent`

```ts
export type OverlayRegisterEvent = {
  nodeId: string;
  vnode: ReturnType<typeof h>;
};
```

---

### `OverlayUnRegisterEvent`

```ts
export type OverlayUnRegisterEvent = {
  nodeIds: string[];
};
```
