BMatesConfiguration
Data Configuration
This is the data configuration that serves as the foundation for the editor.
type SongDataType<T extends string = string> = {
id: string;
start: number;
long?: number;
src: string;
user: string;
group: number;
instrument: T;
mute?: boolean;
lock?: boolean;
[key: string]: any;
};
type TrackDataType<T extends string = string> = {
id: string;
name: string;
mute?: boolean;
group: number;
songs: SongDataType<T>[];
};
By providing values to the data props of the <BMates /> component,
you can set the initial data for the editor.
The import and export functionalities also operate based on this type.
const data: TrackDataType[] = [];
<BMates
//...
data={data}
/>;
style
This is the style configuration that serves as the foundation for the editor.
type EditorStyleType = {
theme: {
background: string;
lineColor: string;
strokeLineColor: string;
};
timeline: {
gapHeight: number;
gapWidth: number;
timeDivde: number; // 5 or 10
height: number; // 45 or 60;
textY: number;
};
playhead: {
color: string;
width: number;
height: number;
};
timeIndicator: {
fill: string;
font: string;
top: number;
};
sidebar: {
width: number;
mobileWidth: number;
mobileViewport: number;
};
wave: {
height: number;
borderRadius: number;
margin: number;
padding: number;
disableAlpha: number;
snapping: string;
background: string;
fill: string;
border: string;
predictionFill: string;
selectedBorderColor: string;
};
context: {
menuWidth: number;
menuPadding: number;
itemHeight: number;
itemPadding: number;
};
};
By providing values to the style props of the <BMates /> component,
you can set the overall design of the editor.
The values passed will override the default values to apply styles.
const style: EditorStyleType = {};
<BMates
//...
style={style}
/>;