Xiaohan-Tian
1232 lines
40 KiB
TypeScript
1232 lines
40 KiB
TypeScript
import React from 'react';
|
|
import './Toolbar.css';
|
|
import { saveProject } from '../util/saveUtil';
|
|
import { KGProjectStorage } from '../core/io/KGProjectStorage';
|
|
import { isValidProjectName, isReservedProjectName, RESERVED_PROJECT_NAME } from '../util/projectNameUtil';
|
|
import { KGCore } from '../core/KGCore';
|
|
import { useProjectStore } from '../stores/projectStore';
|
|
import { DEBUG_MODE } from '../constants/uiConstants';
|
|
import { TIME_CONSTANTS } from '../constants/coreConstants';
|
|
import { parseTimeSignature, getTimeSignatureErrorMessage } from '../util/timeUtil';
|
|
import {
|
|
FaUndo, FaRedo, FaMousePointer, FaStepBackward,
|
|
FaPlay, FaPause, FaComments, FaSync,
|
|
FaFolderOpen, FaSave, FaDownload, FaUpload, FaPlus,
|
|
FaCog, FaMagnet, FaCut, FaCircle, FaCompress
|
|
} from 'react-icons/fa';
|
|
import { KGProject, type KeySignature } from '../core/KGProject';
|
|
import { KGMidiInput } from '../core/midi-input/KGMidiInput';
|
|
import { KGMidiRegion } from '../core/region/KGMidiRegion';
|
|
import { KGAudioTrack } from '../core/track/KGAudioTrack';
|
|
import { plainToInstance } from 'class-transformer';
|
|
import { FaPencil, FaCopy, FaPaste, FaTrash, FaWandMagicSparkles, FaListUl } from 'react-icons/fa6';
|
|
import { KGMainContentState } from '../core/state/KGMainContentState';
|
|
import { regionDeleteManager } from '../util/regionDeleteUtil';
|
|
import { handleCopyOperation, handlePasteOperation } from '../util/copyPasteUtil';
|
|
import { convertProjectToMidi, convertMidiToProject } from '../util/midiUtil';
|
|
import { KGOfflineRenderer } from '../core/audio-interface/KGOfflineRenderer';
|
|
import KGDropdown from './common/KGDropdown';
|
|
import FloatingPopup from './common/FloatingPopup';
|
|
import FileImportModal from './common/FileImportModal';
|
|
import LoadingOverlay from './common/LoadingOverlay';
|
|
import OpenProjectModal from './common/OpenProjectModal';
|
|
import KeySignaturePickerPopup from './KeySignaturePickerPopup';
|
|
import { clearChatHistoryAndUI } from '../util/chatUtil';
|
|
import PianoIcon from './common/icons/PianoIcon';
|
|
import MetronomeIcon from './common/icons/MetronomeIcon';
|
|
import { mergeSelectedMidiRegions, splitSelectedRegionAtPlayhead } from '../util/regionEditUtil';
|
|
import { showAlert, showChoice, showConfirm, showPrompt, showTimeSigPrompt } from '../util/dialogUtil';
|
|
|
|
const Toolbar: React.FC = () => {
|
|
const {
|
|
projectName, setProjectName,
|
|
savedProjectName, setSavedProjectName,
|
|
bpm, timeSignature, keySignature, setStatus,
|
|
isPlaying, isPreparingPlayback, startPlaying, stopTransport, setPlayheadPosition,
|
|
currentTime, setBpm, setTimeSignature, setKeySignature,
|
|
maxBars, setMaxBars,
|
|
barWidthMultiplier, setBarWidthMultiplier,
|
|
isLooping, toggleLoop,
|
|
canUndo, canRedo, undoDescription, redoDescription, undo, redo,
|
|
toggleChatBox, toggleSettings, toggleKGOnePanel, toggleEventListPanel, activateSidePanel, showKGOnePanel, showEventListPanel, showChatBox, showSettings, cleanupProjectState, toggleMetronome, isMetronomeEnabled,
|
|
isRecording, startRecording, stopRecording,
|
|
// Piano roll state/actions
|
|
showPianoRoll, setShowPianoRoll, activeRegionId, setActiveRegionId,
|
|
// Selection state
|
|
selectedRegionIds, selectedTrackId,
|
|
// Playhead and refresh
|
|
playheadPosition, refreshProjectState,
|
|
requestMainContentScroll, requestPianoRollScroll
|
|
} = useProjectStore();
|
|
|
|
// State for main content tools
|
|
const [activeMainTool, setActiveMainTool] = React.useState<'pointer' | 'pencil'>('pointer');
|
|
const [isSnapping, setIsSnapping] = React.useState(true);
|
|
|
|
// 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);
|
|
|
|
// State for zoom slider popup
|
|
const [showZoomSlider, setShowZoomSlider] = React.useState(false);
|
|
const zoomSliderRef = React.useRef<HTMLDivElement>(null);
|
|
|
|
// 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;
|
|
const handleClickOutside = (e: MouseEvent) => {
|
|
if (zoomSliderRef.current && !zoomSliderRef.current.contains(e.target as Node)) {
|
|
setShowZoomSlider(false);
|
|
}
|
|
};
|
|
document.addEventListener('mousedown', handleClickOutside);
|
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
}, [showZoomSlider]);
|
|
|
|
// 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;
|
|
|
|
const handleProjectNameClick = async () => {
|
|
const newName = await showPrompt("Enter project name:", projectName);
|
|
if (!newName) return;
|
|
if (!isValidProjectName(newName)) {
|
|
await showAlert("Invalid project name. Only letters, numbers, spaces, hyphens, underscores, periods, and parentheses are allowed.");
|
|
return;
|
|
}
|
|
if (isReservedProjectName(newName)) {
|
|
await showAlert(`"${RESERVED_PROJECT_NAME}" is a reserved project name. Please choose a different name.`);
|
|
return;
|
|
}
|
|
|
|
// If the name hasn't changed from the saved state, just save without prompting
|
|
if (newName === savedProjectName) {
|
|
setProjectName(newName);
|
|
await saveProject(newName, savedProjectName, setStatus, (finalName) => {
|
|
setSavedProjectName(finalName);
|
|
if (finalName !== newName) setProjectName(finalName);
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Untitled Project is ephemeral — no existing save to preserve, so rename directly
|
|
if (savedProjectName === RESERVED_PROJECT_NAME) {
|
|
const storage = KGProjectStorage.getInstance();
|
|
const exists = await storage.exists(newName);
|
|
if (exists) {
|
|
const confirmed = await showConfirm(
|
|
`Project "${newName}" already exists. Do you want to overwrite it?`
|
|
);
|
|
if (!confirmed) return;
|
|
setProjectName(newName);
|
|
await saveProject(newName, savedProjectName, setStatus, (finalName) => {
|
|
setSavedProjectName(finalName);
|
|
if (finalName !== newName) setProjectName(finalName);
|
|
}, true /* forceOverwrite */);
|
|
return;
|
|
}
|
|
setProjectName(newName);
|
|
await saveProject(newName, savedProjectName, setStatus, (finalName) => {
|
|
setSavedProjectName(finalName);
|
|
if (finalName !== newName) setProjectName(finalName);
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Ask whether the user wants to rename or save as a copy
|
|
const choice = await showChoice(
|
|
"Would you like to rename this project, or save it as a new copy?",
|
|
[
|
|
{ label: 'Save as Copy', value: 'saveas' },
|
|
{ label: 'Rename', value: 'rename' },
|
|
]
|
|
);
|
|
if (!choice) return;
|
|
|
|
if (choice === 'rename') {
|
|
// Conflict check: only relevant when targeting a different OPFS folder
|
|
const storage = KGProjectStorage.getInstance();
|
|
const exists = await storage.exists(newName);
|
|
if (exists) {
|
|
const confirmed = await showConfirm(
|
|
`Project "${newName}" already exists. Do you want to overwrite it?`
|
|
);
|
|
if (!confirmed) return;
|
|
setProjectName(newName);
|
|
await saveProject(newName, savedProjectName, setStatus, (finalName) => {
|
|
setSavedProjectName(finalName);
|
|
if (finalName !== newName) setProjectName(finalName);
|
|
}, true /* forceOverwrite */);
|
|
return;
|
|
}
|
|
setProjectName(newName);
|
|
await saveProject(newName, savedProjectName, setStatus, (finalName) => {
|
|
setSavedProjectName(finalName);
|
|
if (finalName !== newName) setProjectName(finalName);
|
|
});
|
|
} else {
|
|
// Save as Copy: save current state under a unique new name, then switch to it
|
|
const storage = KGProjectStorage.getInstance();
|
|
const finalName = await storage.resolveUniqueName(newName);
|
|
try {
|
|
await storage.saveAs(savedProjectName, finalName, KGCore.instance().getCurrentProject());
|
|
setProjectName(finalName);
|
|
setSavedProjectName(finalName);
|
|
setStatus(`Saved as "${finalName}"`);
|
|
} catch (error) {
|
|
console.error('Error saving project as copy:', error);
|
|
await showAlert(`An error occurred while saving: ${error}`);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Common project loading logic extracted for reuse
|
|
const loadProjectFromData = async (project: KGProject, sourceDescription: string, savedName?: string) => {
|
|
try {
|
|
// Clean up UI state first
|
|
cleanupProjectState();
|
|
|
|
// Automatically clear chat history when loading a project
|
|
clearChatHistoryAndUI();
|
|
|
|
// Load the project using the store's loadProject method
|
|
const { loadProject: storeLoadProject } = useProjectStore.getState();
|
|
await storeLoadProject(project, savedName);
|
|
|
|
// Clean up orphan media files (only on open, not on save)
|
|
if (savedName) {
|
|
const storage = KGProjectStorage.getInstance();
|
|
await storage.cleanupOrphanMedia(savedName, project);
|
|
}
|
|
|
|
// Update status to indicate project loaded
|
|
setStatus(`${sourceDescription} loaded successfully`);
|
|
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log(`project loaded successfully from ${sourceDescription}`);
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error(`Error loading project from ${sourceDescription}:`, error);
|
|
setStatus(`Failed to load project: ${error}`);
|
|
await showAlert(`An error occurred while loading the project: ${error}`);
|
|
}
|
|
};
|
|
|
|
// Core logic for creating a new project (no confirmation dialog)
|
|
const createNewProject = () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("creating new project");
|
|
}
|
|
|
|
cleanupProjectState();
|
|
clearChatHistoryAndUI();
|
|
|
|
const newProject = new KGProject();
|
|
const { loadProject: storeLoadProject } = useProjectStore.getState();
|
|
storeLoadProject(newProject);
|
|
|
|
setStatus(`New project "${newProject.getName()}" created`);
|
|
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("new project created successfully");
|
|
}
|
|
};
|
|
|
|
// Handler functions for file operations
|
|
const handleNewProject = async () => {
|
|
const confirmed = await showConfirm("Are you sure you want to create a new project? Any unsaved changes will be lost.");
|
|
if (confirmed) {
|
|
createNewProject();
|
|
}
|
|
};
|
|
|
|
const handleLoadProject = () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("user clicked load button");
|
|
}
|
|
setShowOpenProject(true);
|
|
};
|
|
|
|
const handleOpenProjectSelect = async (projectNameToLoad: string) => {
|
|
setIsOpeningProject(true);
|
|
|
|
try {
|
|
const storage = KGProjectStorage.getInstance();
|
|
const loadedProject = await storage.load(projectNameToLoad);
|
|
|
|
if (!loadedProject) {
|
|
await showAlert(`Project "${projectNameToLoad}" not found.`);
|
|
return;
|
|
}
|
|
|
|
await loadProjectFromData(loadedProject, `Project "${projectNameToLoad}"`, projectNameToLoad);
|
|
} catch (error) {
|
|
console.error("Error loading project:", error);
|
|
await showAlert(`An error occurred while loading the project: ${error}`);
|
|
} finally {
|
|
setIsOpeningProject(false);
|
|
}
|
|
};
|
|
|
|
const handleConfirmOpenProject = async () => {
|
|
const confirmed = await showConfirm(
|
|
'Open this project? Any unsaved changes in the current project will be lost.'
|
|
);
|
|
return confirmed;
|
|
};
|
|
|
|
const handleSaveProject = async () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("user clicked save button");
|
|
}
|
|
|
|
await saveProject(projectName, savedProjectName, setStatus, (finalName) => {
|
|
setSavedProjectName(finalName);
|
|
if (finalName !== projectName) {
|
|
setProjectName(finalName);
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleExportProject = (exportType: string) => {
|
|
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") {
|
|
handleExportMIDI();
|
|
} else if (exportType === "Export to WAV") {
|
|
handleBounceToWav();
|
|
} else if (exportType === "Export to MP3") {
|
|
handleBounceToMp3();
|
|
}
|
|
|
|
setShowExportDropdown(false);
|
|
};
|
|
|
|
const handleExportKGStudio = async () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("exporting to KGStudio file");
|
|
}
|
|
|
|
try {
|
|
// First save the current project to OPFS so the export reflects the latest state
|
|
const storage = KGProjectStorage.getInstance();
|
|
await storage.save(projectName, KGCore.instance().getCurrentProject(), true);
|
|
|
|
// Bundle the project folder into a zip
|
|
const blob = await storage.exportAsZip(projectName);
|
|
|
|
// Trigger download
|
|
const url = URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = `${projectName}.kgstudio`;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
URL.revokeObjectURL(url);
|
|
|
|
setStatus(`Project "${projectName}" exported as KGStudio file`);
|
|
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("KGStudio export completed successfully");
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error("Error exporting KGStudio file:", error);
|
|
setStatus(`Error exporting project: ${error}`);
|
|
await showAlert(`Failed to export project: ${error}`);
|
|
}
|
|
};
|
|
|
|
const handleExportMIDI = async () => {
|
|
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}`);
|
|
await showAlert(`Failed to export project as MIDI: ${error}`);
|
|
}
|
|
};
|
|
|
|
const handleBounceToWav = async () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("bouncing to WAV");
|
|
}
|
|
|
|
try {
|
|
const currentProject = KGCore.instance().getCurrentProject();
|
|
await KGOfflineRenderer.instance().bounceToWav(currentProject, projectName);
|
|
setStatus(`Project "${projectName}" exported as WAV file`);
|
|
} catch (error) {
|
|
console.error("Error bouncing to WAV:", error);
|
|
setStatus(`Error exporting WAV: ${error}`);
|
|
await showAlert(`Failed to export project as WAV: ${error}`);
|
|
}
|
|
};
|
|
|
|
const handleBounceToMp3 = async () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("bouncing to MP3");
|
|
}
|
|
|
|
try {
|
|
const currentProject = KGCore.instance().getCurrentProject();
|
|
await KGOfflineRenderer.instance().bounceToMp3(currentProject, projectName);
|
|
setStatus(`Project "${projectName}" exported as MP3 file`);
|
|
} catch (error) {
|
|
console.error("Error bouncing to MP3:", error);
|
|
setStatus(`Error exporting MP3: ${error}`);
|
|
await showAlert(`Failed to export project as MP3: ${error}`);
|
|
}
|
|
};
|
|
|
|
const handleImportProject = () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("user clicked import button");
|
|
}
|
|
setShowImportModal(true);
|
|
};
|
|
|
|
const handleFileImport = async (file: File) => {
|
|
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
|
|
await handleKGStudioFileImport(file);
|
|
} else if (fileExtension === '.json') {
|
|
// Handle legacy KGStudio JSON import
|
|
await handleKGStudioJSONImport(file);
|
|
} else if (fileExtension === '.mid' || fileExtension === '.midi') {
|
|
// Handle MIDI import
|
|
await handleMIDIImport(file);
|
|
} else {
|
|
throw new Error(`Unsupported file type: ${fileExtension}`);
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error("Error importing file:", error);
|
|
setStatus(`Failed to import file: ${error}`);
|
|
await showAlert(`Failed to import project file: ${error}`);
|
|
}
|
|
};
|
|
|
|
const handleKGStudioFileImport = async (file: File) => {
|
|
const storage = KGProjectStorage.getInstance();
|
|
|
|
try {
|
|
const projectName = await storage.importFromZip(file);
|
|
|
|
// Load the project from OPFS (this runs the upgrader)
|
|
const loaded = await storage.load(projectName);
|
|
if (!loaded) {
|
|
throw new Error('Failed to load imported project');
|
|
}
|
|
|
|
await loadProjectFromData(loaded, `KGStudio file "${file.name}"`, projectName);
|
|
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("KGStudio file imported successfully:", projectName);
|
|
}
|
|
} catch (error) {
|
|
await showAlert(`The .kgstudio file is corrupted or invalid: ${error}`);
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
const handleKGStudioJSONImport = async (file: File) => {
|
|
try {
|
|
const fileContent = await file.text();
|
|
const projectData = JSON.parse(fileContent);
|
|
|
|
// Deserialize and handle potential array return
|
|
const deserializedResult = plainToInstance(KGProject, projectData);
|
|
const project = Array.isArray(deserializedResult)
|
|
? deserializedResult[0] || null
|
|
: deserializedResult;
|
|
|
|
if (!project) {
|
|
throw new Error("Failed to deserialize project data");
|
|
}
|
|
|
|
// Use the project's name for the OPFS folder, auto-rename if it already exists
|
|
const storage = KGProjectStorage.getInstance();
|
|
const importedName = await storage.resolveUniqueName(project.getName() || 'Imported Project');
|
|
|
|
// Save to OPFS as a proper folder-based project
|
|
project.setName(importedName);
|
|
await storage.save(importedName, project, false);
|
|
|
|
// Load back from OPFS so the upgrader runs
|
|
const loaded = await storage.load(importedName);
|
|
if (!loaded) {
|
|
throw new Error('Failed to load imported project from storage');
|
|
}
|
|
|
|
await loadProjectFromData(loaded, `JSON file "${file.name}"`, importedName);
|
|
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("KGStudio JSON project imported and saved to OPFS:", importedName);
|
|
}
|
|
|
|
} catch (error) {
|
|
throw new Error(`Invalid KGStudio JSON file: ${error}`);
|
|
}
|
|
};
|
|
|
|
const handleMIDIImport = async (file: File) => {
|
|
try {
|
|
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);
|
|
setStatus(`Failed to import MIDI file: ${errorMessage}`);
|
|
throw new Error(`Invalid MIDI file: ${errorMessage}`);
|
|
}
|
|
};
|
|
|
|
// Handler functions for playback control
|
|
const handlePlayClick = async () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("Play button clicked");
|
|
}
|
|
try {
|
|
await startPlaying();
|
|
} catch (error) {
|
|
console.error("Failed to start playback:", error);
|
|
setStatus("Playback failed to start");
|
|
}
|
|
};
|
|
|
|
const handlePauseClick = async () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("Pause button clicked");
|
|
}
|
|
try {
|
|
await stopTransport();
|
|
if (isRecording) {
|
|
setStatus("Recording stopped — notes committed");
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to stop playback:", error);
|
|
setStatus("Failed to stop playback");
|
|
}
|
|
};
|
|
|
|
const handleBackToBeginningClick = () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("Back to beginning button clicked");
|
|
}
|
|
setPlayheadPosition(0);
|
|
requestMainContentScroll(0);
|
|
requestPianoRollScroll(0);
|
|
};
|
|
|
|
const handleLoopToggle = () => {
|
|
toggleLoop();
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("Loop toggle clicked");
|
|
}
|
|
};
|
|
|
|
// Prompt to change max bars when clicking on current-time display
|
|
const handleCurrentTimeClick = async () => {
|
|
const MIN_BARS = 16;
|
|
const newMaxBarsStr = await showPrompt(`Enter new max bars (>= ${MIN_BARS}):`, String(maxBars ?? 32));
|
|
if (newMaxBarsStr === null) {
|
|
return; // cancelled
|
|
}
|
|
const parsed = parseInt(newMaxBarsStr.trim(), 10);
|
|
if (isNaN(parsed)) {
|
|
await showAlert('Invalid input. Please enter a valid number.');
|
|
return;
|
|
}
|
|
if (parsed < MIN_BARS) {
|
|
await showAlert(`Invalid value. Please enter a number >= ${MIN_BARS}.`);
|
|
return;
|
|
}
|
|
setMaxBars(parsed);
|
|
setStatus(`Max bars changed to ${parsed}`);
|
|
};
|
|
|
|
const handleBpmClick = async () => {
|
|
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}`);
|
|
}
|
|
};
|
|
|
|
const handleTimeSignatureClick = async () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("Time signature clicked, current:", `${timeSignature.numerator}/${timeSignature.denominator}`);
|
|
}
|
|
|
|
const result = await showTimeSigPrompt('Set the time signature:', timeSignature);
|
|
if (result === null) return;
|
|
|
|
const newTimeSignature = parseTimeSignature(`${result.numerator}/${result.denominator}`);
|
|
if (newTimeSignature === null) {
|
|
await showAlert(getTimeSignatureErrorMessage());
|
|
return;
|
|
}
|
|
|
|
setTimeSignature(newTimeSignature);
|
|
setStatus(`Time signature changed to ${newTimeSignature.numerator}/${newTimeSignature.denominator}`);
|
|
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log(`Time signature updated to ${newTimeSignature.numerator}/${newTimeSignature.denominator}`);
|
|
}
|
|
};
|
|
|
|
const handleKeySignatureChange = (newKeySignature: string) => {
|
|
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);
|
|
};
|
|
|
|
// Handle main content tool selection
|
|
const handleMainToolSelect = (tool: 'pointer' | 'pencil') => {
|
|
setActiveMainTool(tool);
|
|
KGMainContentState.instance().setActiveTool(tool);
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log(`Selected main content tool: ${tool}`);
|
|
}
|
|
};
|
|
|
|
// Handle snapping toggle
|
|
const handleSnappingToggle = () => {
|
|
const newValue = !isSnapping;
|
|
setIsSnapping(newValue);
|
|
KGMainContentState.instance().setSnapping(newValue);
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log(`Snapping ${newValue ? 'enabled' : 'disabled'}`);
|
|
}
|
|
};
|
|
|
|
// Handle copy button click
|
|
const handleCopyClick = () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("Copy button clicked");
|
|
}
|
|
|
|
const copied = handleCopyOperation();
|
|
|
|
if (copied) {
|
|
setStatus("Items copied to clipboard");
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("Items copied successfully");
|
|
}
|
|
} else {
|
|
setStatus("No items selected to copy");
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("No items were selected for copying");
|
|
}
|
|
}
|
|
};
|
|
|
|
// Handle paste button click
|
|
const handlePasteClick = () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("Paste button clicked");
|
|
}
|
|
|
|
const pasted = handlePasteOperation();
|
|
|
|
if (pasted) {
|
|
setStatus("Items pasted from clipboard");
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("Items pasted successfully");
|
|
}
|
|
} else {
|
|
setStatus("Cannot paste - no valid clipboard content or context");
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("Paste operation failed or no valid context");
|
|
}
|
|
}
|
|
};
|
|
|
|
// Handle delete button click
|
|
const handleDeleteClick = () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("Delete button clicked");
|
|
}
|
|
|
|
const deleted = regionDeleteManager.deleteSelectedRegions();
|
|
|
|
if (deleted) {
|
|
setStatus("Selected regions deleted");
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("Regions deleted successfully");
|
|
}
|
|
} else {
|
|
setStatus("No regions selected for deletion");
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("No regions were selected for deletion");
|
|
}
|
|
}
|
|
};
|
|
|
|
// Handle split region button click
|
|
const handleSplitClick = async () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("Split button clicked");
|
|
}
|
|
|
|
const status = await splitSelectedRegionAtPlayhead({
|
|
selectedRegionIds,
|
|
playheadPosition,
|
|
refreshProjectState,
|
|
});
|
|
if (!status) {
|
|
return;
|
|
}
|
|
|
|
setStatus(status);
|
|
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log(`Split selected region at beat ${playheadPosition}`);
|
|
}
|
|
};
|
|
|
|
const handleMergeClick = async () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log('Merge button clicked');
|
|
}
|
|
|
|
const status = await mergeSelectedMidiRegions({
|
|
selectedRegionIds,
|
|
refreshProjectState,
|
|
});
|
|
if (!status) {
|
|
return;
|
|
}
|
|
|
|
setStatus(status);
|
|
};
|
|
|
|
// Handle undo button click
|
|
const handleUndoClick = async () => {
|
|
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}`);
|
|
}
|
|
};
|
|
|
|
// Handle redo button click
|
|
const handleRedoClick = async () => {
|
|
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}`);
|
|
}
|
|
};
|
|
|
|
// Handle chat button click
|
|
const handleChatClick = () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("Chat button clicked");
|
|
}
|
|
|
|
if (showSettings) {
|
|
activateSidePanel('chat');
|
|
} else {
|
|
toggleChatBox();
|
|
}
|
|
setStatus("Chat toggled");
|
|
};
|
|
|
|
// Handle settings button click
|
|
const handleSettingsClick = () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("Settings button clicked");
|
|
}
|
|
|
|
toggleSettings();
|
|
setStatus("Settings toggled");
|
|
};
|
|
|
|
// K.G.One panel toggle
|
|
const handleKGOneClick = () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("K.G.One button clicked");
|
|
}
|
|
|
|
if (showSettings) {
|
|
activateSidePanel('kgone');
|
|
return;
|
|
}
|
|
|
|
toggleKGOnePanel();
|
|
};
|
|
|
|
const handleEventListClick = () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log("Event List button clicked");
|
|
}
|
|
|
|
if (showSettings) {
|
|
activateSidePanel('eventList');
|
|
return;
|
|
}
|
|
|
|
toggleEventListPanel();
|
|
};
|
|
|
|
// Handle Piano button click: open piano roll if closed, targeting active or selected region
|
|
const handlePianoButtonClick = async () => {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log('Piano button clicked');
|
|
}
|
|
// Only open if not already open
|
|
if (showPianoRoll) {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log('Piano roll already open; no action');
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Prefer current active region; otherwise, first selected region
|
|
const candidateRegionId = activeRegionId || lastSelectedRegionId;
|
|
|
|
if (!candidateRegionId) {
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log('No active or selected region; piano roll will not open');
|
|
}
|
|
await showAlert('Please select a MIDI region to open the Piano Roll.');
|
|
return;
|
|
}
|
|
|
|
setActiveRegionId(candidateRegionId);
|
|
setShowPianoRoll(true);
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log(`Opening piano roll for region ${candidateRegionId}`);
|
|
}
|
|
};
|
|
|
|
const handleMetronomeToggle = () => {
|
|
toggleMetronome();
|
|
if (DEBUG_MODE.TOOLBAR) {
|
|
console.log('Metronome toggled');
|
|
}
|
|
};
|
|
|
|
const handleRecordClick = async () => {
|
|
if (isRecording) {
|
|
await stopRecording();
|
|
setStatus("Recording stopped");
|
|
return;
|
|
}
|
|
|
|
const selectedTrack = useProjectStore.getState().tracks.find(track => track.getId().toString() === selectedTrackId) ?? null;
|
|
if (selectedTrack instanceof KGAudioTrack) {
|
|
await startRecording();
|
|
setStatus("Audio recording started...");
|
|
return;
|
|
}
|
|
|
|
// Require an active or selected MIDI region
|
|
const candidateId = activeRegionId ?? lastSelectedRegionId;
|
|
if (!candidateId) {
|
|
await showAlert("Please open a MIDI region in the Piano Roll before starting recording.");
|
|
return;
|
|
}
|
|
const tracks = KGCore.instance().getCurrentProject().getTracks();
|
|
let isMidi = false;
|
|
for (const track of tracks) {
|
|
const region = track.getRegions().find(r => r.getId() === candidateId);
|
|
if (region) { isMidi = region instanceof KGMidiRegion; break; }
|
|
}
|
|
if (!isMidi) {
|
|
await showAlert("Please select a MIDI region before starting recording.");
|
|
return;
|
|
}
|
|
|
|
// Require at least one connected MIDI device
|
|
if (KGMidiInput.instance().getConnectedInputCount() === 0) {
|
|
await showAlert("No MIDI device detected. Please connect a MIDI keyboard and try again.");
|
|
return;
|
|
}
|
|
|
|
// Ensure the piano roll is open showing the target region
|
|
if (!activeRegionId) {
|
|
setActiveRegionId(candidateId);
|
|
setShowPianoRoll(true);
|
|
}
|
|
|
|
await startRecording();
|
|
setStatus("Recording started...");
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="toolbar">
|
|
<div className="toolbar-left">
|
|
<div className="logo-container">
|
|
<img src={`${import.meta.env.BASE_URL}logo.png`} alt="DAW Logo" className="logo" />
|
|
</div>
|
|
<div
|
|
className="project-name"
|
|
onClick={handleProjectNameClick}
|
|
>
|
|
{projectName}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="toolbar-center">
|
|
<button title="New" onClick={handleNewProject}><FaPlus /></button>
|
|
<button title="Load" onClick={handleLoadProject}><FaFolderOpen /></button>
|
|
<button title="Save" onClick={handleSaveProject}><FaSave /></button>
|
|
<div style={{ position: 'relative', display: 'inline-block' }}>
|
|
<button
|
|
title="Export"
|
|
onClick={() => setShowExportDropdown(!showExportDropdown)}
|
|
style={{ display: 'flex', alignItems: 'center', gap: '4px' }}
|
|
>
|
|
<FaDownload />
|
|
</button>
|
|
<div style={{ position: 'absolute', top: '100%', left: 0, zIndex: 10000 }}>
|
|
<KGDropdown
|
|
options={exportOptions}
|
|
value={exportOptions[0]}
|
|
onChange={handleExportProject}
|
|
label="Export"
|
|
hideButton={true}
|
|
isOpen={showExportDropdown}
|
|
onToggle={setShowExportDropdown}
|
|
className="export-dropdown"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button title="Import" onClick={handleImportProject}><FaUpload /></button>
|
|
<button
|
|
title="Settings"
|
|
className={`tool-button ${showSettings ? 'active' : ''}`}
|
|
onClick={handleSettingsClick}
|
|
>
|
|
<FaCog />
|
|
</button>
|
|
<div className="toolbar-separator"></div>
|
|
<button title="Undo" onClick={handleUndoClick}><FaUndo /></button>
|
|
<button title="Redo" onClick={handleRedoClick}><FaRedo /></button>
|
|
<div className="toolbar-separator"></div>
|
|
<button
|
|
title="Select"
|
|
className={`tool-button ${activeMainTool === 'pointer' ? 'active' : ''}`}
|
|
onClick={() => handleMainToolSelect('pointer')}
|
|
>
|
|
<FaMousePointer />
|
|
</button>
|
|
<button
|
|
title="Pencil"
|
|
className={`tool-button ${activeMainTool === 'pencil' ? 'active' : ''}`}
|
|
onClick={() => handleMainToolSelect('pencil')}
|
|
>
|
|
<FaPencil />
|
|
</button>
|
|
<button
|
|
title="Split Region at Playhead"
|
|
onClick={handleSplitClick}
|
|
>
|
|
<FaCut />
|
|
</button>
|
|
<button
|
|
title="Merge Selected MIDI Regions"
|
|
onClick={handleMergeClick}
|
|
>
|
|
<FaCompress />
|
|
</button>
|
|
<button
|
|
title="Snap to Grid"
|
|
className={`tool-button ${isSnapping ? 'active' : ''}`}
|
|
onClick={handleSnappingToggle}
|
|
>
|
|
<FaMagnet />
|
|
</button>
|
|
<div className="toolbar-separator"></div>
|
|
<button title="Copy" onClick={handleCopyClick}><FaCopy /></button>
|
|
<button title="Paste" onClick={handlePasteClick}><FaPaste /></button>
|
|
<button title="Delete" onClick={handleDeleteClick}><FaTrash /></button>
|
|
<div className="toolbar-separator"></div>
|
|
<button title="Back to beginning" className="button-back-to-beginning" onClick={handleBackToBeginningClick}><FaStepBackward /></button>
|
|
{!isPlaying ? (
|
|
<button title="Play" className="button-play" onClick={handlePlayClick} disabled={isPreparingPlayback}><FaPlay /></button>
|
|
) : (
|
|
<button title="Pause" className="tool-button button-pause active" onClick={handlePauseClick}><FaPause /></button>
|
|
)}
|
|
<button
|
|
title={isRecording ? "Stop Recording" : "Record"}
|
|
className={`tool-button record-button ${isRecording ? 'active' : ''}`}
|
|
onClick={handleRecordClick}
|
|
>
|
|
<FaCircle />
|
|
</button>
|
|
<button
|
|
title="Loop"
|
|
className={`tool-button ${isLooping ? 'active' : ''}`}
|
|
onClick={handleLoopToggle}
|
|
>
|
|
<FaSync />
|
|
</button>
|
|
<div className="toolbar-separator"></div>
|
|
<button
|
|
title="Metronome"
|
|
className={`tool-button ${isMetronomeEnabled ? 'active' : ''}`}
|
|
onClick={handleMetronomeToggle}
|
|
>
|
|
<MetronomeIcon />
|
|
</button>
|
|
<button title="Piano" onClick={handlePianoButtonClick}><PianoIcon /></button>
|
|
{/* <button title="Record"><FaCircle className="record-btn" /></button>
|
|
<button title="Metronome">🎵</button> */}
|
|
</div>
|
|
|
|
<div className="toolbar-right">
|
|
<div className="transport-control">
|
|
<div className="transport-item" style={{ position: 'relative' }} ref={zoomSliderRef}>
|
|
<span
|
|
className='current-zoom'
|
|
onClick={() => setShowZoomSlider(!showZoomSlider)}
|
|
style={{ cursor: 'pointer' }}
|
|
>
|
|
{barWidthMultiplier}x
|
|
</span>
|
|
{showZoomSlider && (
|
|
<div className="zoom-slider-popup">
|
|
<input
|
|
type="range"
|
|
min="1"
|
|
max="8"
|
|
step="1"
|
|
value={barWidthMultiplier}
|
|
onChange={(e) => setBarWidthMultiplier(parseInt(e.target.value))}
|
|
/>
|
|
<span className="zoom-slider-label">{barWidthMultiplier}x</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="transport-item">
|
|
<span className='current-time' onClick={handleCurrentTimeClick} style={{ cursor: 'pointer' }}>{currentTime}</span>
|
|
</div>
|
|
<div className="transport-item">
|
|
<span className='current-bpm' onClick={handleBpmClick} style={{ cursor: 'pointer' }}>{bpm}</span>
|
|
</div>
|
|
<div className="transport-item">
|
|
<span className='current-time-signature' onClick={handleTimeSignatureClick} style={{ cursor: 'pointer' }}>{timeSignature.numerator + "/" + timeSignature.denominator}</span>
|
|
</div>
|
|
<div className="transport-item" style={{ position: 'relative' }}>
|
|
<FloatingPopup
|
|
isOpen={showKeySignatureDropdown}
|
|
onClose={() => setShowKeySignatureDropdown(false)}
|
|
placement="bottom"
|
|
className="key-signature-popup-anchor"
|
|
contentClassName="key-signature-popup-surface"
|
|
panelClassName="key-signature-popup-panel"
|
|
arrowClassName="key-signature-popup-arrow"
|
|
trigger={(
|
|
<button
|
|
type="button"
|
|
className='current-key-signature'
|
|
onClick={() => setShowKeySignatureDropdown((current) => !current)}
|
|
aria-haspopup="dialog"
|
|
aria-expanded={showKeySignatureDropdown}
|
|
aria-label={`Choose key signature, current ${keySignature}`}
|
|
>
|
|
{keySignature}
|
|
</button>
|
|
)}
|
|
>
|
|
<KeySignaturePickerPopup value={keySignature} onChange={handleKeySignatureChange} />
|
|
</FloatingPopup>
|
|
</div>
|
|
</div>
|
|
<button
|
|
title="K.G.One Music Generator"
|
|
onClick={handleKGOneClick}
|
|
className={!showSettings && showKGOnePanel ? 'active' : ''}
|
|
>
|
|
<FaWandMagicSparkles />
|
|
</button>
|
|
<button
|
|
title="Chat"
|
|
onClick={handleChatClick}
|
|
className={!showSettings && showChatBox ? 'active' : ''}
|
|
>
|
|
<FaComments />
|
|
</button>
|
|
<button
|
|
title="Event List Editor"
|
|
onClick={handleEventListClick}
|
|
className={!showSettings && showEventListPanel ? 'active' : ''}
|
|
>
|
|
<FaListUl />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<FileImportModal
|
|
isVisible={showImportModal}
|
|
onClose={() => setShowImportModal(false)}
|
|
onFileImport={handleFileImport}
|
|
acceptedTypes={['.kgstudio', '.json', '.mid', '.midi']}
|
|
title="Import Project"
|
|
description="Drag and drop your project file here"
|
|
/>
|
|
|
|
<LoadingOverlay
|
|
visible={isOpeningProject}
|
|
message="Opening project..."
|
|
/>
|
|
|
|
{showOpenProject && (
|
|
<OpenProjectModal
|
|
onClose={() => setShowOpenProject(false)}
|
|
onConfirmOpenProject={handleConfirmOpenProject}
|
|
onOpenProject={handleOpenProjectSelect}
|
|
currentProjectName={savedProjectName}
|
|
onCreateNewProject={createNewProject}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Toolbar;
|