Type Definitions#
#TimelineEvent
interface TimelineEvent {
id: number;
startTime: number;
endTime: number;
duration: number;
title: string;
description: string;
color: string;
readonly?: boolean;
customData?: Record<string, any>;
media?: {
images?: Array<{
src: string;
fit?: "cover" | "contain" | "stretch";
opacity?: number;
}>;
waveform?: {
data: Float32Array | number[];
color?: string;
backgroundColor?: string;
opacity?: number;
};
};
}#TimelineConfig (Key Fields)
interface TimelineConfig {
canvasHeight?: number;
timelineHeight: number;
trackHeight: number;
trackMargin: number;
firstTrackTopMargin: number;
secondWidth: number;
startTime: number;
endTime: number;
startPaddingTime: number;
endPaddingTime: number;
autoFitOnInit: boolean;
minAutoFitZoom: number;
maxAutoFitZoom: number;
timeUnit: string;
timeFormat: string;
snapInterval: number;
snapToSeconds: boolean;
secondPrecisionZoomThreshold: number;
enableTimeIndicator: boolean;
enableEventResize: boolean;
enableEventSplit: boolean;
enableContextMenu: boolean;
minEventDuration: number;
resizeHandleWidth: number;
debug: boolean;
enablePerformanceMonitor: boolean;
autoAddTrack: boolean;
autoRemoveEmptyLastTrack: boolean;
readOnly: boolean;
showEventDurationLabel: boolean;
eventTextStyle: EventTextStyle;
eventBlockStyle: EventBlockStyle;
colors: TimelineColors;
contextMenuItems: ContextMenuItem[];
contextMenuStyle: ContextMenuStyle;
contextMenuHtml?: string | HTMLElement;
// callbacks...
}#LoadDataFormat
interface LoadDataFormat {
timeIndicatorPosition?: number;
tracks: Array<{
events: Array<{
startTime?: number;
endTime?: number;
duration?: number;
title: string;
description?: string;
color?: string;
readonly?: boolean;
customData?: Record<string, any>;
media?: {
images?: Array<{
src: string;
fit?: "cover" | "contain" | "stretch";
opacity?: number;
}>;
waveform?: {
data: Float32Array | number[];
color?: string;
backgroundColor?: string;
opacity?: number;
};
};
}>;
}>;
}