---
description: Component that displays the ID of whichever root temporal element is currently active based on canvas selection state.
---
# ef-active-root-temporal
## Attributes
- **canvas** (string) - Canvas element ID or selector to bind to
## Properties
- **activeRootTemporal** (TemporalMixinInterface & HTMLElement | null) - Currently active root temporal element
# ActiveRootTemporal
Displays the ID of the active root temporal element from a canvas.
> **Note**: The ActiveRootTemporal component is currently not exported from `@editframe/react`. This documentation describes the underlying `ef-active-root-temporal` HTML element. To use it in React, you'll need to use the HTML element directly or wait for official React component export.
## Import
When officially exported, usage will be:
```tsx
import { ActiveRootTemporal } from "@editframe/react";
```
## Basic Usage
Show the active root temporal ID:
```html
None
```
When you select an element in the canvas, the active root temporal ID displays.
```tsx
export const App = () => {
return (
{/* Header showing active timegroup */}
Active Timegroup:
{/* Canvas */}
);
};
```
## Canvas Binding
Bind to a canvas by ID or selector:
### By ID
```html
```
### By Selector
```html
```
### Nearest Ancestor
Omit canvas attribute to use nearest ancestor:
```html
```
### Auto-Detection
```tsx
export const AutoDetect = () => {
return (
{/* Will find nearest ef-canvas ancestor */}
Current Root:
);
};
```
## Active Root Temporal
The active root temporal is the topmost timegroup containing the selected element:
```html
Content
```
When `element-1` is selected, active root temporal is `root-1`.
## Display Content
### Default Content
Show ID of active root temporal:
```html
```
### Fallback Content
Provide fallback text for when no root is active:
```html
No selection
```
### With Hierarchy
```tsx
export const EditorLayout = () => {
return (
);
};
```
## Events
Listen for changes:
```javascript
const canvas = document.querySelector('ef-canvas');
canvas.addEventListener('activeroottemporalchange', (e) => {
const { activeRootTemporal } = e.detail;
console.log('Active root:', activeRootTemporal?.id);
});
```
The canvas fires this event, not ef-active-root-temporal.
The canvas fires `activeroottemporalchange` when the active root changes:
```typescript
interface ActiveRootTemporalChangeDetail {
id: string | null;
element: HTMLElement | null;
}
```
Listen to this event to track changes:
```tsx
useEffect(() => {
const canvas = document.getElementById("canvas");
if (!canvas) return;
const handleChange = (e: CustomEvent) => {
console.log("New active root:", e.detail.id);
};
canvas.addEventListener("activeroottemporalchange", handleChange);
return () => {
canvas.removeEventListener("activeroottemporalchange", handleChange);
};
}, []);
```
## Use Cases
### Timeline Scrubbing
Use active root temporal to determine which timeline to scrub:
```javascript
const activeRootDisplay = document.querySelector('ef-active-root-temporal');
const canvas = document.querySelector('ef-canvas');
canvas.addEventListener('activeroottemporalchange', (e) => {
const rootTemporal = e.detail.activeRootTemporal;
if (rootTemporal) {
// Update scrubber to control this timegroup
scrubber.target = rootTemporal.id;
}
});
```
### Playback Controls
Connect playback controls to active root:
```javascript
const canvas = document.querySelector('ef-canvas');
const controls = document.querySelector('ef-controls');
canvas.addEventListener('activeroottemporalchange', (e) => {
if (e.detail.activeRootTemporal) {
controls.target = e.detail.activeRootTemporal.id;
}
});
```
### Context Display
Show which composition is active:
```html
Active Composition:
None
```
- **Editor breadcrumbs**: Show current timegroup in navigation
- **Scene indicator**: Display active scene in multi-scene compositions
- **Context display**: Show editing context to users
- **Debug info**: Display active root for development
- **Status bar**: Show current focus in status/toolbar
## Multiple Canvases
Use separate instances for multiple canvases:
```html
NoneNone
```
Each instance tracks its own canvas independently.
```tsx
export const MultiCanvas = () => {
return (
{/* Canvas 1 */}
Canvas 1 Root:
{/* Canvas 2 */}
Canvas 2 Root:
);
};
```
## Selection Behavior
Active root temporal updates when:
- Element is selected in canvas
- Selection changes to different element
- Selection is cleared
Selection of nested elements always resolves to their root temporal ancestor.
## Finding Root Temporal
The canvas walks up the DOM tree from selected element to find the topmost timegroup:
```javascript
// Simplified algorithm
let current = selectedElement;
let rootTemporal = null;
while (current && current !== canvas) {
if (current.tagName === 'EF-TIMEGROUP') {
rootTemporal = current;
}
current = current.parentElement;
}
return rootTemporal;
```
## Null State
When no element is selected or selected element has no root temporal ancestor:
```javascript
const display = document.querySelector('ef-active-root-temporal');
console.log(display.activeRootTemporal); // null
// Text content shows fallback
console.log(display.textContent); // "None" (from slot content)
```
## Temporal Mixin Interface
Active root temporal is typed as `TemporalMixinInterface`:
```typescript
interface TemporalMixinInterface {
id: string;
durationMs: number;
currentTimeMs: number;
play(): void;
pause(): void;
// ... other temporal properties and methods
}
```
This ensures the element has timing capabilities.
## Canvas Property
Access the bound canvas element:
```javascript
const display = document.querySelector('ef-active-root-temporal');
// Canvas element reference (internal)
console.log(display.canvasElement); // EFCanvas instance
```
## With Selection Context
```tsx
export const SelectionAware = () => {
const [activeRoot, setActiveRoot] = useState(null);
useEffect(() => {
const canvas = document.getElementById("canvas");
if (!canvas) return;
const handleRootChange = (e: CustomEvent) => {
setActiveRoot(e.detail?.id || null);
};
canvas.addEventListener("activeroottemporalchange" as any, handleRootChange);
return () => {
canvas.removeEventListener("activeroottemporalchange" as any, handleRootChange);
};
}, []);
return (
);
};
```
## Future React Component
When officially exported, usage will be:
```tsx
import { ActiveRootTemporal } from "@editframe/react";
console.log(e.detail)}
/>
```
## Styling
Style the display element:
```css
ef-active-root-temporal {
display: inline-block;
font-family: monospace;
padding: 4px 8px;
background: #f5f5f5;
border: 1px solid #ddd;
border-radius: 4px;
}
```
## Reactive Updates
Display automatically updates when selection changes. No manual refresh needed.
## Disconnection
When disconnected, the element:
- Removes event listener from canvas
- Clears active root temporal reference
- Cleans up internal state
## Initialization
On connection, the element:
1. Finds canvas (by attribute, selector, or ancestor)
2. Reads initial active root temporal
3. Sets up event listener
4. Updates display
## Important Notes
- Canvas attribute can be ID or CSS selector
- Falls back to nearest ancestor canvas if not specified
- Only displays root temporal elements (top-level timegroups)
- Updates automatically - no manual refresh needed
- Shows element ID, not a friendly name
- Returns null when no root temporal is active
- Currently not exported from React package - use HTML element
- Canvas attribute can be ID or CSS selector
- Falls back to nearest ancestor canvas if not specified
- Only displays root temporal elements (top-level timegroups)
- Updates automatically - no manual refresh needed
- Shows element ID, not a friendly name
- Returns empty string when no root temporal is active