+
setScopeTab('region')}
>
Region
setScopeTab('track')}
>
@@ -65,15 +65,15 @@ const ListEventPanel: React.FC = ({ isVisible }) => {
-
+
{scopeTab === 'region' ? (
-
);
};
-export default ListEventPanel;
+export default EventListPanel;
diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
index 1abddae..34f83be 100644
--- a/src/components/Toolbar.tsx
+++ b/src/components/Toolbar.tsx
@@ -49,7 +49,7 @@ const Toolbar: React.FC = () => {
barWidthMultiplier, setBarWidthMultiplier,
isLooping, toggleLoop,
canUndo, canRedo, undoDescription, redoDescription, undo, redo,
- toggleChatBox, toggleSettings, toggleKGOnePanel, toggleListEventPanel, showKGOnePanel, showListEventPanel, showChatBox, showSettings, cleanupProjectState, toggleMetronome, isMetronomeEnabled,
+ toggleChatBox, toggleSettings, toggleKGOnePanel, toggleEventListPanel, showKGOnePanel, showEventListPanel, showChatBox, showSettings, cleanupProjectState, toggleMetronome, isMetronomeEnabled,
isRecording, startRecording, stopRecording,
// Piano roll state/actions
showPianoRoll, setShowPianoRoll, activeRegionId, setActiveRegionId,
@@ -66,10 +66,10 @@ const Toolbar: React.FC = () => {
// State for key signature dropdown
const [showKeySignatureDropdown, setShowKeySignatureDropdown] = React.useState(false);
-
+
// State for export dropdown
const [showExportDropdown, setShowExportDropdown] = React.useState(false);
-
+
// State for import modal
const [showImportModal, setShowImportModal] = React.useState(false);
@@ -80,7 +80,7 @@ const Toolbar: React.FC = () => {
// State for open project modal
const [showOpenProject, setShowOpenProject] = React.useState(false);
const [isOpeningProject, setIsOpeningProject] = React.useState(false);
-
+
// Close zoom slider on click outside
React.useEffect(() => {
if (!showZoomSlider) return;
@@ -95,7 +95,7 @@ const Toolbar: React.FC = () => {
// Key signature options
const keySignatureOptions = Object.keys(KEY_SIGNATURE_MAP) as KeySignature[];
-
+
// Export options
const exportOptions = ["Export to KGStudio file", "Export to MIDI file", "Export to WAV", "Export to MP3"];
const lastSelectedRegionId = selectedRegionIds[selectedRegionIds.length - 1] ?? null;
@@ -252,7 +252,7 @@ const Toolbar: React.FC = () => {
if (DEBUG_MODE.TOOLBAR) {
console.log("user selected export option:", exportType);
}
-
+
if (exportType === "Export to KGStudio file") {
handleExportKGStudio();
} else if (exportType === "Export to MIDI file") {
@@ -262,7 +262,7 @@ const Toolbar: React.FC = () => {
} else if (exportType === "Export to MP3") {
handleBounceToMp3();
}
-
+
setShowExportDropdown(false);
};
@@ -306,37 +306,37 @@ const Toolbar: React.FC = () => {
if (DEBUG_MODE.TOOLBAR) {
console.log("exporting to MIDI file");
}
-
+
try {
// Get the current project from KGCore
const currentProject = KGCore.instance().getCurrentProject();
-
+
// Convert project to MIDI format
const midiData = convertProjectToMidi(currentProject);
-
+
// Create a downloadable blob
const blob = new Blob([midiData.buffer as ArrayBuffer], { type: 'audio/midi' });
-
+
// Create a temporary download link
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `${projectName}.mid`;
-
+
// Trigger download
document.body.appendChild(link);
link.click();
-
+
// Cleanup
document.body.removeChild(link);
URL.revokeObjectURL(url);
-
+
setStatus(`Project "${projectName}" exported as MIDI file`);
-
+
if (DEBUG_MODE.TOOLBAR) {
console.log("MIDI export completed successfully");
}
-
+
} catch (error) {
console.error("Error exporting MIDI:", error);
setStatus(`Error exporting MIDI: ${error}`);
@@ -387,10 +387,10 @@ const Toolbar: React.FC = () => {
if (DEBUG_MODE.TOOLBAR) {
console.log("file selected for import:", file.name);
}
-
+
// Get file extension
const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
-
+
try {
if (fileExtension === '.kgstudio') {
// Handle KGStudio bundle import
@@ -404,7 +404,7 @@ const Toolbar: React.FC = () => {
} else {
throw new Error(`Unsupported file type: ${fileExtension}`);
}
-
+
} catch (error) {
console.error("Error importing file:", error);
setStatus(`Failed to import file: ${error}`);
@@ -480,35 +480,35 @@ const Toolbar: React.FC = () => {
if (DEBUG_MODE.TOOLBAR) {
console.log("Starting MIDI file import:", file.name);
}
-
+
// Show loading status
setStatus(`Importing MIDI file "${file.name}"...`);
-
+
// Read the MIDI file as binary data
const arrayBuffer = await file.arrayBuffer();
const midiData = new Uint8Array(arrayBuffer);
-
+
if (DEBUG_MODE.TOOLBAR) {
console.log("MIDI file read successfully, size:", midiData.length, "bytes");
}
-
+
// Get current project to append MIDI tracks to it
const currentProject = KGCore.instance().getCurrentProject();
-
+
// Convert MIDI data and append to current project
const updatedProject = convertMidiToProject(midiData, currentProject);
-
+
if (DEBUG_MODE.TOOLBAR) {
console.log("MIDI conversion successful, tracks added to existing project");
}
-
+
// Load the updated project using common loading logic
await loadProjectFromData(updatedProject, `MIDI file "${file.name}"`);
-
+
if (DEBUG_MODE.TOOLBAR) {
console.log("MIDI file imported successfully:", file.name);
}
-
+
} catch (error) {
console.error("Error importing MIDI file:", error);
const errorMessage = error instanceof Error ? error.message : String(error);
@@ -585,33 +585,33 @@ const Toolbar: React.FC = () => {
if (DEBUG_MODE.TOOLBAR) {
console.log("BPM clicked, current BPM:", bpm);
}
-
+
const newBpmStr = await showPrompt(`Enter new BPM (${TIME_CONSTANTS.MIN_BPM}-${TIME_CONSTANTS.MAX_BPM}):`, bpm.toString());
-
+
// Check if user cancelled
if (newBpmStr === null) {
return;
}
-
+
// Validate input
const newBpm = parseInt(newBpmStr.trim());
-
+
// Check if it's a valid number
if (isNaN(newBpm)) {
await showAlert("Invalid input. Please enter a valid number.");
return;
}
-
+
// Check if it's within valid range
if (newBpm <= TIME_CONSTANTS.MIN_BPM || newBpm >= TIME_CONSTANTS.MAX_BPM) {
await showAlert(`Invalid BPM. Please enter a value between ${TIME_CONSTANTS.MIN_BPM} and ${TIME_CONSTANTS.MAX_BPM}.`);
return;
}
-
+
// Update BPM
setBpm(newBpm);
setStatus(`BPM changed to ${newBpm}`);
-
+
if (DEBUG_MODE.TOOLBAR) {
console.log(`BPM updated from ${bpm} to ${newBpm}`);
}
@@ -643,7 +643,7 @@ const Toolbar: React.FC = () => {
if (DEBUG_MODE.TOOLBAR) {
console.log("Key signature changed from", keySignature, "to", newKeySignature);
}
-
+
setKeySignature(newKeySignature as KeySignature);
setStatus(`Key signature changed to ${newKeySignature}`);
setShowKeySignatureDropdown(false);
@@ -673,9 +673,9 @@ const Toolbar: React.FC = () => {
if (DEBUG_MODE.TOOLBAR) {
console.log("Copy button clicked");
}
-
+
const copied = handleCopyOperation();
-
+
if (copied) {
setStatus("Items copied to clipboard");
if (DEBUG_MODE.TOOLBAR) {
@@ -694,9 +694,9 @@ const Toolbar: React.FC = () => {
if (DEBUG_MODE.TOOLBAR) {
console.log("Paste button clicked");
}
-
+
const pasted = handlePasteOperation();
-
+
if (pasted) {
setStatus("Items pasted from clipboard");
if (DEBUG_MODE.TOOLBAR) {
@@ -715,9 +715,9 @@ const Toolbar: React.FC = () => {
if (DEBUG_MODE.TOOLBAR) {
console.log("Delete button clicked");
}
-
+
const deleted = regionDeleteManager.deleteSelectedRegions();
-
+
if (deleted) {
setStatus("Selected regions deleted");
if (DEBUG_MODE.TOOLBAR) {
@@ -875,16 +875,16 @@ const Toolbar: React.FC = () => {
if (DEBUG_MODE.TOOLBAR) {
console.log("Undo button clicked");
}
-
+
if (!canUndo) {
await showAlert("Nothing to undo");
return;
}
-
+
undo();
const description = undoDescription || "action";
setStatus(`Undid: ${description}`);
-
+
if (DEBUG_MODE.TOOLBAR) {
console.log(`Undo successful: ${description}`);
}
@@ -895,16 +895,16 @@ const Toolbar: React.FC = () => {
if (DEBUG_MODE.TOOLBAR) {
console.log("Redo button clicked");
}
-
+
if (!canRedo) {
await showAlert("Nothing to redo");
return;
}
-
+
redo();
const description = redoDescription || "action";
setStatus(`Redid: ${description}`);
-
+
if (DEBUG_MODE.TOOLBAR) {
console.log(`Redo successful: ${description}`);
}
@@ -915,7 +915,7 @@ const Toolbar: React.FC = () => {
if (DEBUG_MODE.TOOLBAR) {
console.log("Chat button clicked");
}
-
+
toggleChatBox();
setStatus("Chat toggled");
};
@@ -925,7 +925,7 @@ const Toolbar: React.FC = () => {
if (DEBUG_MODE.TOOLBAR) {
console.log("Settings button clicked");
}
-
+
toggleSettings();
setStatus("Settings toggled");
};
@@ -940,11 +940,11 @@ const Toolbar: React.FC = () => {
toggleKGOnePanel();
};
- const handleListEventClick = () => {
+ const handleEventListClick = () => {
if (DEBUG_MODE.TOOLBAR) {
- console.log("List Event button clicked");
+ console.log("Event List button clicked");
}
- toggleListEventPanel();
+ toggleEventListPanel();
};
// Handle Piano button click: open piano roll if closed, targeting active or selected region
@@ -1039,226 +1039,226 @@ const Toolbar: React.FC = () => {
-
{projectName}
