ef-overlay-layer / ef-overlay-item
Coordinate-mapped overlay system for placing UI over composition elements.
ef-overlay-layer is a transparent position: absolute; inset: 0 container that runs a RAF loop to keep its children positioned over canvas elements. ef-overlay-item positions its slotted content at the bounds of a target element, accounting for pan/zoom transforms.
Use this to place transform handles, labels, or any UI precisely over elements in the composition.
| Attribute | React prop | Type | Default | Description |
|---|---|---|---|---|
element-id | elementId | string | — | ID (matched against `data-element-id`/`data-timegroup-id`) of the target element this overlay item tracks. |
<div style="position: relative;">
<ef-pan-zoom id="pz">
<ef-timegroup id="root" mode="fixed" duration="5s" class="w-[1920px] h-[1080px]">
<ef-text id="my-text" class="absolute text-white text-6xl" style="top:200px;left:300px">
Hello
</ef-text>
</ef-timegroup>
</ef-pan-zoom>
<ef-overlay-layer>
<ef-overlay-item element-id="my-text">
<ef-transform-handles enable-resize enable-rotation></ef-transform-handles>
</ef-overlay-item>
</ef-overlay-layer>
</div>ef-overlay-layer reads panZoomTransformContext from an ancestor ef-pan-zoom automatically. When used as a sibling of ef-pan-zoom (rather than a child), it reads the transform directly from the sibling element.
ef-overlay-item positioning:
The element-id attribute resolves to a DOM element by id. On each RAF tick the layer calls updatePosition() on every item, which reads the target's getBoundingClientRect() relative to the layer and applies left / top / width / height styles.
Events:
| Event | Detail | Description |
|---|---|---|
position-changed | {
x: number;
y: number;
width: number;
height: number;
rotation: number;
} | Fires when the tracked target's position/size/rotation changes by more than 0.01px. |
Slots
ef-overlay-layer:
| Slot | Description |
|---|---|
| (default) | One or more `ef-overlay-item` (or `ef-transform-handles`) elements. |
ef-overlay-item:
| Slot | Description |
|---|---|
| (default) | Content to position over the tracked target element. |