Shows all temporal elements in the target composition as a collapsible, selectable tree. Fires hierarchy-select when an element is clicked and hierarchy-reorder when elements are dragged to a new position.
<ef-hierarchy target="root" show-header header="Layers"
style="display: block; width: 240px;"></ef-hierarchy>
Each row is rendered by an internal ef-hierarchy-item:
ef-hierarchy-item::part(row):hover { background: rgba(255, 255, 255, 0.05); }
ef-hierarchy-item::part(label) { font-size: 0.75rem; }
Attributes
| Attribute | React prop | Type | Default | Description |
|---|
header | header | string | "" | Header text shown above the tree (when `show-header`). |
show-header | showHeader | boolean | false | Whether to show the header row. |
target | target | string | "" | ID of the target element this component controls or reads from. |
CSS Parts
| Part | Description |
|---|
header | The optional header above the tree items. This part appears when the `show-header` attribute is set. |
list | The outer container that holds the hierarchy tree. |
CSS Custom Properties
| Property | Default | Description |
|---|
--hierarchy-bg | var(--ef-color-bg) | Background color of the tree container. |
--hierarchy-border | var(--ef-color-border) | Border color (header divider). |
--hierarchy-drop-indicator | var(--ef-color-primary) | Color of the drag-and-drop reorder indicator line. |
--hierarchy-hover-bg | var(--ef-color-border-subtle) | Row background color on hover. |
--hierarchy-selected-bg | var(--ef-color-primary-subtle, rgba(110,168,254,0.18)) | Row background color when selected. |
--hierarchy-text | var(--ef-color-text) | Text color. |
Events
| Event | Detail | Description |
|---|
hierarchy-highlight | { element: Element | null } | Fires when the highlighted element changes, for example when the user hovers over it in `ef-canvas`. This event fires through {@link EFHierarchyElement#setHighlighted}. |
hierarchy-reorder | { sourceId: string; targetId: string; position: "before" | "after" | "inside" } | Fires when the user drags a row to a new position. |
hierarchy-select | { elementId: string | null } | Fires when the user clicks an element row, or when a script calls {@link EFHierarchyElement#select} directly. |
Methods
| Method | Description |
|---|
select(elementId: string | null): void | Select an element by its ID. Pass `null` instead to clear the selection. |
getSelectedElementId(): string | null | Returns the ID of the first selected element. Returns `null` if nothing is selected. |
getHighlightedElement(): Element | null | Returns the element currently highlighted through {@link setHighlighted}. Returns `null` if no element is highlighted. |
setHighlighted(el: Element | null): void | Sets the element that is highlighted from outside this element. For
example, code can call this when the user hovers over the element in
`ef-canvas`. This method also dispatches the `hierarchy-highlight`
event. |