ef-overlay-layer / ef-overlay-item

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.

<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: