Overview
The SelectionManager tracks which timeline elements are currently selected by the user. It maintains a list of element references and notifies subscribers when the selection changes.
Selection format
Selected elements are represented as references:
type ElementRef = {
trackId: string; // ID of the track containing the element
elementId: string; // ID of the element
}
Methods
getSelectedElements()
Returns the currently selected elements.
getSelectedElements(): ElementRef[]
ElementRef[] - Array of selected element references
Example
const editor = EditorCore.getInstance();
const selected = editor.selection.getSelectedElements();
console.log(`${selected.length} elements selected`);
setSelectedElements()
Sets the current selection to the specified elements.
setSelectedElements({ elements }: { elements: ElementRef[] }): void
Array of element references to select
const editor = EditorCore.getInstance();
// Select specific elements
editor.selection.setSelectedElements({
elements: [
{ trackId: 'track-1', elementId: 'element-1' },
{ trackId: 'track-2', elementId: 'element-2' }
]
});
Setting elements triggers a notification to all subscribers.
clearSelection()
Clears all selected elements.
Example
const editor = EditorCore.getInstance();
editor.selection.clearSelection();
subscribe()
Subscribes to selection changes.
subscribe(listener: () => void): () => void
Function called when selection changes
() => void - Unsubscribe function
Example
const editor = EditorCore.getInstance();
const unsubscribe = editor.selection.subscribe(() => {
const selected = editor.selection.getSelectedElements();
console.log('Selection changed:', selected);
});
// Later, to unsubscribe:
unsubscribe();
If using the useEditor() hook in React, subscriptions are handled automatically.
Usage patterns
Select all elements
const editor = EditorCore.getInstance();
const tracks = editor.timeline.getTracks();
const allElements: ElementRef[] = [];
for (const track of tracks) {
for (const element of track.elements) {
allElements.push({
trackId: track.id,
elementId: element.id
});
}
}
editor.selection.setSelectedElements({ elements: allElements });
Get selected element data
const editor = EditorCore.getInstance();
const selected = editor.selection.getSelectedElements();
const elementsWithTracks = editor.timeline.getElementsWithTracks();
for (const { trackId, elementId } of selected) {
const item = elementsWithTracks.find(
item => item.track.id === trackId && item.element.id === elementId
);
if (item) {
console.log('Selected element:', item.element);
console.log('On track:', item.track);
}
}
Delete selected elements
const editor = EditorCore.getInstance();
const selected = editor.selection.getSelectedElements();
if (selected.length > 0) {
editor.timeline.deleteElements({ refs: selected });
editor.selection.clearSelection();
}
Toggle selection
function toggleElementSelection(ref: ElementRef) {
const editor = EditorCore.getInstance();
const selected = editor.selection.getSelectedElements();
const index = selected.findIndex(
s => s.trackId === ref.trackId && s.elementId === ref.elementId
);
if (index >= 0) {
// Remove from selection
selected.splice(index, 1);
} else {
// Add to selection
selected.push(ref);
}
editor.selection.setSelectedElements({ elements: selected });
}
Integration with actions
Many actions operate on selected elements:
import { invokeAction } from '@/lib/actions';
// Delete selected
invokeAction('delete-selected');
// Duplicate selected
invokeAction('duplicate-selected');
// Copy selected
invokeAction('copy-selected');
// Mute/unmute selected
invokeAction('toggle-elements-muted-selected');
// Show/hide selected
invokeAction('toggle-elements-visibility-selected');
React integration
In React components, use the useEditor() hook to automatically react to selection changes:
import { useEditor } from '@/hooks/use-editor';
function SelectionInfo() {
const editor = useEditor();
const selected = editor.selection.getSelectedElements();
return (
<div>
{selected.length} element(s) selected
</div>
);
}
See also