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.
| 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. |
<ef-hierarchy target="root" show-header header="Layers"
style="display: block; width: 240px;"></ef-hierarchy>
| Event | Detail | Description |
|---|
hierarchy-highlight | { element: Element | null } | Fires when the highlighted element changes (e.g. hovering it in `ef-canvas`), via {@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 {@link EFHierarchyElement#select} is called programmatically. |
| Method | Description |
|---|
select(elementId: string | null): void | Programmatically select an element by ID (or clear with `null`). |
getSelectedElementId(): string | null | The first currently-selected element's id, or `null` if nothing is selected. |
getHighlightedElement(): Element | null | The element currently highlighted via {@link setHighlighted}, or `null`. |
setHighlighted(el: Element | null): void | Sets the element highlighted from outside `ef-hierarchy` (e.g. hovering it in `ef-canvas`) and dispatches `hierarchy-highlight`. |
| Property | Default | Description |
|---|
--hierarchy-bg | — | Background color of the tree container. |
--hierarchy-border | — | Border color (header divider). |
--hierarchy-drop-indicator | — | Color of the drag-and-drop reorder indicator line. |
--hierarchy-hover-bg | — | Row background color on hover. |
--hierarchy-selected-bg | — | Row background color when selected. |
--hierarchy-text | — | Text color. |
Each row is rendered by an internal ef-hierarchy-item:
| Property | Default | Description |
|---|
--hierarchy-drop-indicator | #3b82f6 | Color of the drag-and-drop reorder indicator line. |
--hierarchy-indent | 0.75rem | Indent width per nesting level. |
--hierarchy-item-font-size | 0.75rem | Row label font size. |
--hierarchy-item-height | 1.5rem | Row height. |
--hierarchy-item-padding-left | 0.5rem | Row left padding. |
| Part | Description |
|---|
header | Optional header above the tree items (when `show-header`). |
list | Outer container wrapping the hierarchy tree. |
Each row is rendered by an internal ef-hierarchy-item, which exposes its own parts:
| Part | Description |
|---|
badge | Element-type badge span. |
children | Wrapper around nested child items. |
label | Element name text span. |
row | Item row container (receives `data-focused` and `data-selected` attributes). |
ef-hierarchy-item::part(row):hover { background: rgba(255, 255, 255, 0.05); }
ef-hierarchy-item::part(label) { font-size: 0.75rem; }