Xiaohan-Tian
1056 lines
38 KiB
TypeScript
1056 lines
38 KiB
TypeScript
import React, { useState, useEffect, useRef, useCallback, useLayoutEffect } from 'react';
|
|
import './MainContent.css';
|
|
import { createPortal } from 'react-dom';
|
|
import { useProjectStore } from '../stores/projectStore';
|
|
import { KGCore } from '../core/KGCore';
|
|
import { KGTrack } from '../core/track/KGTrack';
|
|
import { KGRegion } from '../core/region/KGRegion';
|
|
import { KGMidiRegion } from '../core/region/KGMidiRegion';
|
|
import { KGAudioRegion } from '../core/region/KGAudioRegion';
|
|
import TrackInfoPanel from './track/TrackInfoPanel';
|
|
import TrackGridPanel from './track/TrackGridPanel';
|
|
import PianoRoll from './piano-roll/PianoRoll';
|
|
import type { RegionClickOptions, RegionUI } from './interfaces';
|
|
import { DEBUG_MODE, BAR_NUMBERS_CONSTANTS, TOOLBAR_CONSTANTS } from '../constants';
|
|
import { useRegionOperations } from '../hooks/useRegionOperations';
|
|
import { regionDeleteManager } from '../util/regionDeleteUtil';
|
|
import { KGMainContentState } from '../core/state/KGMainContentState';
|
|
import { ChangeLoopSettingsCommand } from '../core/commands';
|
|
|
|
interface MainContentProps {
|
|
onTrackClick?: () => void;
|
|
}
|
|
|
|
const MainContent: React.FC<MainContentProps> = ({
|
|
onTrackClick = () => { } // Default to empty function if not provided
|
|
}) => {
|
|
const {
|
|
tracks,
|
|
maxBars,
|
|
barWidthMultiplier,
|
|
reorderTracks,
|
|
updateTrack,
|
|
updateTrackProperties,
|
|
timeSignature,
|
|
setPlayheadPosition,
|
|
playheadPosition,
|
|
isPlaying,
|
|
autoScrollEnabled,
|
|
setAutoScrollEnabled,
|
|
clearAllSelections,
|
|
setSelectedTrack,
|
|
selectedRegionIds,
|
|
showPianoRoll,
|
|
activeRegionId,
|
|
setShowPianoRoll,
|
|
setActiveRegionId,
|
|
pianoRollMode,
|
|
openMidiPianoRoll,
|
|
openSpectrogramViewer,
|
|
openHybridMode,
|
|
hybridAudioRegionId,
|
|
addTrack,
|
|
addAudioTrack,
|
|
projectName,
|
|
savedProjectName,
|
|
requestPianoRollScroll,
|
|
mainContentScrollRequest,
|
|
} = useProjectStore();
|
|
|
|
// State to store regions
|
|
const [regions, setRegions] = useState<RegionUI[]>([]);
|
|
|
|
// Drag state for track grid highlighting
|
|
const [draggedTrackIndex, setDraggedTrackIndex] = useState<number | null>(null);
|
|
const [dragOverTrackIndex, setDragOverTrackIndex] = useState<number | null>(null);
|
|
|
|
// Piano roll state is now managed by the store - removed local state
|
|
|
|
// Region selection state
|
|
const [selectedRegionId, setSelectedRegionId] = useState<string | null>(null);
|
|
|
|
// Use the region operations hook
|
|
const { deleteSelectedRegions } = useRegionOperations({
|
|
tracks,
|
|
updateTrack,
|
|
setRegions,
|
|
selectedRegionId,
|
|
setSelectedRegionId,
|
|
showPianoRoll,
|
|
setShowPianoRoll,
|
|
activeRegionId,
|
|
setActiveRegionId
|
|
});
|
|
|
|
// Register the delete function with the global manager
|
|
useEffect(() => {
|
|
regionDeleteManager.registerDeleteCallback(deleteSelectedRegions);
|
|
|
|
// Cleanup on unmount
|
|
return () => {
|
|
regionDeleteManager.unregisterDeleteCallback();
|
|
};
|
|
}, [deleteSelectedRegions]);
|
|
|
|
// Refs to track pending updates for verification
|
|
const pendingUpdates = useRef<Map<string, { trackId: string, regionId: string, startBeat: number, length: number }>>(new Map());
|
|
const preventEmptyMainContentDeselectRef = useRef(false);
|
|
|
|
// Refs for auto-scroll during playback
|
|
const mainContentRef = useRef<HTMLDivElement | null>(null);
|
|
const expectedScrollLeftRef = useRef<number>(-1);
|
|
const isPlayingRef = useRef(false);
|
|
const previousBarWidthMultiplierRef = useRef(barWidthMultiplier);
|
|
|
|
// Refs for bar numbers and loop range drag functionality
|
|
const barNumbersRef = useRef<HTMLDivElement | null>(null);
|
|
const isLoopDraggingRef = useRef(false);
|
|
const loopDragStartBarRef = useRef<number | null>(null);
|
|
const loopDragStartXRef = useRef<number | null>(null);
|
|
const loopDragOriginalSettingsRef = useRef<{ isLooping: boolean; loopingRange: [number, number] } | null>(null);
|
|
|
|
// Sync isPlayingRef for use inside scroll event closure
|
|
useEffect(() => {
|
|
isPlayingRef.current = isPlaying;
|
|
}, [isPlaying]);
|
|
|
|
useLayoutEffect(() => {
|
|
const previousMultiplier = previousBarWidthMultiplierRef.current;
|
|
if (previousMultiplier === barWidthMultiplier) return;
|
|
|
|
previousBarWidthMultiplierRef.current = barWidthMultiplier;
|
|
|
|
const container = mainContentRef.current;
|
|
if (!container) return;
|
|
|
|
const infoWidth = parseInt(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--track-info-panel-width')
|
|
) || 200;
|
|
const visibleMusicWidth = Math.max(0, container.clientWidth - infoWidth);
|
|
const previousBarWidth = TOOLBAR_CONSTANTS.BASE_BAR_WIDTH * previousMultiplier;
|
|
const nextBarWidth = TOOLBAR_CONSTANTS.BASE_BAR_WIDTH * barWidthMultiplier;
|
|
|
|
if (visibleMusicWidth === 0 || previousBarWidth === 0 || nextBarWidth === 0) return;
|
|
|
|
const centerPixelBeforeZoom = container.scrollLeft + visibleMusicWidth / 2;
|
|
const anchorBeat = (centerPixelBeforeZoom / previousBarWidth) * timeSignature.numerator;
|
|
const targetPixel = (anchorBeat / timeSignature.numerator) * nextBarWidth;
|
|
const targetScrollLeft = targetPixel - visibleMusicWidth / 2;
|
|
const clampedScrollLeft = Math.max(
|
|
0,
|
|
Math.min(targetScrollLeft, container.scrollWidth - container.clientWidth)
|
|
);
|
|
|
|
expectedScrollLeftRef.current = clampedScrollLeft;
|
|
container.scrollLeft = clampedScrollLeft;
|
|
}, [barWidthMultiplier, timeSignature]);
|
|
|
|
// Detect manual horizontal scroll during playback
|
|
useEffect(() => {
|
|
const container = mainContentRef.current;
|
|
if (!container) return;
|
|
|
|
const handleScroll = () => {
|
|
if (!isPlayingRef.current) return;
|
|
if (Math.abs(container.scrollLeft - expectedScrollLeftRef.current) < 1) return;
|
|
useProjectStore.getState().setAutoScrollEnabled(false);
|
|
};
|
|
|
|
container.addEventListener('scroll', handleScroll);
|
|
return () => container.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
// Auto-scroll to keep playhead centered during playback
|
|
useEffect(() => {
|
|
if (!isPlaying || !autoScrollEnabled) return;
|
|
|
|
const container = mainContentRef.current;
|
|
if (!container) return;
|
|
|
|
const beatsPerBar = timeSignature.numerator;
|
|
const barPosition = playheadPosition / beatsPerBar;
|
|
const barWidth = parseInt(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--track-grid-bar-width')
|
|
) || 40;
|
|
const playheadPixel = barPosition * barWidth;
|
|
|
|
// Center the playhead in the visible grid area (excluding the sticky info panel)
|
|
const infoWidth = parseInt(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--track-info-panel-width')
|
|
) || 200;
|
|
const targetScrollLeft = playheadPixel - (container.clientWidth - infoWidth) / 2;
|
|
const clampedScrollLeft = Math.max(
|
|
0,
|
|
Math.min(targetScrollLeft, container.scrollWidth - container.clientWidth)
|
|
);
|
|
|
|
expectedScrollLeftRef.current = clampedScrollLeft;
|
|
container.scrollLeft = clampedScrollLeft;
|
|
}, [playheadPosition, isPlaying, autoScrollEnabled, timeSignature]);
|
|
|
|
// Handle scroll requests from piano roll header clicks
|
|
useEffect(() => {
|
|
if (mainContentScrollRequest === null) return;
|
|
|
|
const container = mainContentRef.current;
|
|
if (!container) return;
|
|
|
|
const beatsPerBar = timeSignature.numerator;
|
|
const barPosition = mainContentScrollRequest / beatsPerBar;
|
|
const barWidth = parseInt(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--track-grid-bar-width')
|
|
) || 40;
|
|
const playheadPixel = barPosition * barWidth;
|
|
|
|
// Center the playhead in the visible grid area (excluding the sticky info panel)
|
|
const infoWidth = parseInt(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--track-info-panel-width')
|
|
) || 200;
|
|
const targetScrollLeft = playheadPixel - (container.clientWidth - infoWidth) / 2;
|
|
const clampedScrollLeft = Math.max(
|
|
0,
|
|
Math.min(targetScrollLeft, container.scrollWidth - container.clientWidth)
|
|
);
|
|
|
|
container.scrollLeft = clampedScrollLeft;
|
|
|
|
// Clear the request after handling
|
|
useProjectStore.setState({ mainContentScrollRequest: null });
|
|
}, [mainContentScrollRequest, timeSignature]);
|
|
|
|
// Effect to verify track updates
|
|
useEffect(() => {
|
|
// Check for pending updates
|
|
if (pendingUpdates.current.size > 0) {
|
|
// Create a copy of the pending updates
|
|
const updates = new Map(pendingUpdates.current);
|
|
|
|
// Clear pending updates
|
|
pendingUpdates.current.clear();
|
|
|
|
// Check each update
|
|
updates.forEach((update, key) => {
|
|
const { trackId, regionId, startBeat, length } = update;
|
|
|
|
// Find the track
|
|
const track = tracks.find(t => t.getId().toString() === trackId);
|
|
if (track) {
|
|
// Find the region
|
|
const regions = track.getRegions();
|
|
const region = regions.find(r => r.getId() === regionId);
|
|
|
|
if (region && DEBUG_MODE.MAIN_CONTENT) {
|
|
console.log(`Verification - Region ${regionId} in track ${trackId}:`);
|
|
console.log(` Expected: startBeat=${startBeat}, length=${length}`);
|
|
console.log(` Actual: startBeat=${region.getStartFromBeat()}, length=${region.getLength()}, trackId=${region.getTrackId()}, trackIndex=${region.getTrackIndex()}`);
|
|
|
|
// Check if the update was successful
|
|
const success = region.getStartFromBeat() === startBeat && region.getLength() === length && region.getTrackId() === trackId;
|
|
console.log(` Update successful: ${success}`);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}, [tracks]);
|
|
|
|
// Effect to update regions when tracks change
|
|
useEffect(() => {
|
|
// Create a new array of RegionUI objects based on the current tracks
|
|
const updatedRegions: RegionUI[] = [];
|
|
|
|
// Iterate through all tracks
|
|
tracks.forEach(track => {
|
|
const trackId = track.getId().toString();
|
|
const trackIndex = track.getTrackIndex();
|
|
|
|
// Iterate through all regions in the track
|
|
track.getRegions().forEach(region => {
|
|
if (region instanceof KGMidiRegion || region instanceof KGAudioRegion) {
|
|
// Calculate bar number and length from beats
|
|
const beatsPerBar = timeSignature.numerator;
|
|
const barNumber = (region.getStartFromBeat() / beatsPerBar) + 1;
|
|
const length = region.getLength() / beatsPerBar;
|
|
|
|
// Create a RegionUI object
|
|
updatedRegions.push({
|
|
id: region.getId(),
|
|
trackId,
|
|
trackIndex,
|
|
barNumber,
|
|
length,
|
|
name: region.getName()
|
|
});
|
|
}
|
|
});
|
|
});
|
|
|
|
// Update the regions state
|
|
setRegions(updatedRegions);
|
|
}, [tracks, timeSignature]);
|
|
|
|
// Handle track name edit
|
|
const handleTrackNameEdit = (track: KGTrack, newName: string) => {
|
|
// Use the command pattern to update track name with undo support
|
|
updateTrackProperties(track.getId(), { name: newName });
|
|
};
|
|
|
|
// Handle track reordering
|
|
const handleTracksReordered = (fromIndex: number, toIndex: number) => {
|
|
// Reorder tracks in the store - this will also update trackIndex in each KGTrack
|
|
reorderTracks(fromIndex, toIndex);
|
|
|
|
// Update regions to match the new track order
|
|
setRegions(prevRegions => {
|
|
return prevRegions.map(region => {
|
|
// If the region belongs to the dragged track, update its trackIndex
|
|
if (region.trackIndex === fromIndex) {
|
|
return { ...region, trackIndex: toIndex };
|
|
}
|
|
// If the region belongs to a track that was shifted due to the drag operation
|
|
else if (
|
|
(fromIndex < toIndex &&
|
|
region.trackIndex > fromIndex &&
|
|
region.trackIndex <= toIndex)
|
|
) {
|
|
// Shift up by 1
|
|
return { ...region, trackIndex: region.trackIndex - 1 };
|
|
}
|
|
else if (
|
|
(fromIndex > toIndex &&
|
|
region.trackIndex < fromIndex &&
|
|
region.trackIndex >= toIndex)
|
|
) {
|
|
// Shift down by 1
|
|
return { ...region, trackIndex: region.trackIndex + 1 };
|
|
}
|
|
// Otherwise leave it unchanged
|
|
return region;
|
|
});
|
|
});
|
|
|
|
// Update the grid drag state to match
|
|
setDraggedTrackIndex(null);
|
|
setDragOverTrackIndex(null);
|
|
};
|
|
|
|
// Handle region creation from TrackGridPanel
|
|
const handleRegionCreated = (trackIndex: number, regionUI: RegionUI, midiRegion: KGMidiRegion) => {
|
|
// Note: The region model is already created by the CreateRegionCommand
|
|
// We just need to update the UI state and handle selection
|
|
|
|
// Get the track for store updates
|
|
const track = tracks[trackIndex];
|
|
|
|
// Update the track in the store to reflect the command changes
|
|
updateTrack(track);
|
|
|
|
// Select the track that contains the new region
|
|
setSelectedTrack(track.getId().toString());
|
|
|
|
// Add the new region to the UI state and select it immediately
|
|
setRegions(prevRegions => {
|
|
const updatedRegions = [...prevRegions, regionUI];
|
|
|
|
// Select the region using the updated regions array
|
|
selectRegion(regionUI.id, { shiftKey: false }, updatedRegions);
|
|
|
|
// Manually trigger selection sync to ensure UI updates immediately
|
|
const { syncSelectionFromCore } = useProjectStore.getState();
|
|
syncSelectionFromCore();
|
|
|
|
// If piano roll is visible, set this region as the active region
|
|
if (showPianoRoll) {
|
|
setActiveRegionId(regionUI.id);
|
|
|
|
if (DEBUG_MODE.MAIN_CONTENT) {
|
|
console.log(`Newly created region ${regionUI.id} set as active region in piano roll`);
|
|
}
|
|
}
|
|
|
|
return updatedRegions;
|
|
});
|
|
};
|
|
|
|
// Handle regions dropped from K.G.One panel (external drag-and-drop)
|
|
const handleExternalDropComplete = (trackIndex: number, regionUI: RegionUI) => {
|
|
const track = tracks[trackIndex];
|
|
if (!track) return;
|
|
updateTrack(track);
|
|
setSelectedTrack(track.getId().toString());
|
|
|
|
// Sync maxBars from core model — ImportAudioCommand may have expanded it
|
|
const coreMaxBars = KGCore.instance().getCurrentProject().getMaxBars();
|
|
if (coreMaxBars > maxBars) {
|
|
useProjectStore.setState({ maxBars: coreMaxBars });
|
|
document.documentElement.style.setProperty('--max-number-of-bars', coreMaxBars.toString());
|
|
}
|
|
|
|
setRegions(prev => {
|
|
const updated = [...prev, regionUI];
|
|
selectRegion(regionUI.id, { shiftKey: false }, updated);
|
|
return updated;
|
|
});
|
|
};
|
|
|
|
// Handle region updates (resize, move, etc.)
|
|
const handleRegionUpdated = (
|
|
regionId: string,
|
|
updates: Partial<RegionUI>,
|
|
expectedModelUpdates?: { startBeat: number, length: number }
|
|
) => {
|
|
if (DEBUG_MODE.MAIN_CONTENT) {
|
|
console.log(`Updating region ${regionId} with:`, updates);
|
|
}
|
|
|
|
// Select the region when it's being updated (resize or move)
|
|
selectRegion(regionId);
|
|
|
|
// Find the region to determine which track to select
|
|
const updatedRegion = regions.find(r => r.id === regionId);
|
|
if (updatedRegion) {
|
|
// Use the updated trackId if available, otherwise use the existing trackId
|
|
const trackId = updates.trackId || updatedRegion.trackId;
|
|
const track = tracks.find(t => t.getId().toString() === trackId);
|
|
if (track) {
|
|
setSelectedTrack(track.getId().toString());
|
|
}
|
|
}
|
|
|
|
// Update the region in the UI state
|
|
setRegions(prevRegions => {
|
|
return prevRegions.map(region => {
|
|
if (region.id === regionId) {
|
|
return { ...region, ...updates };
|
|
}
|
|
return region;
|
|
});
|
|
});
|
|
|
|
// Find the region that was updated
|
|
const region = regions.find(r => r.id === regionId);
|
|
if (!region) return;
|
|
|
|
// Check if the track ID is being updated (region moved to different track)
|
|
if (updates.trackId && updates.trackId !== region.trackId) {
|
|
if (DEBUG_MODE.MAIN_CONTENT) {
|
|
console.log(`Region ${regionId} moved from track ${region.trackId} to track ${updates.trackId}`);
|
|
}
|
|
|
|
// Get the original track
|
|
const originalTrack = tracks.find(t => t.getId().toString() === region.trackId);
|
|
|
|
// Get the target track
|
|
const targetTrack = tracks.find(t => t.getId().toString() === updates.trackId);
|
|
|
|
if (originalTrack && targetTrack) {
|
|
// Select the target track that now contains the region
|
|
setSelectedTrack(targetTrack.getId().toString());
|
|
|
|
// Update both tracks in the store
|
|
updateTrack(originalTrack);
|
|
updateTrack(targetTrack);
|
|
|
|
// Add to pending updates for verification
|
|
if (expectedModelUpdates) {
|
|
const key = `${updates.trackId}-${regionId}-${Date.now()}`;
|
|
pendingUpdates.current.set(key, {
|
|
trackId: updates.trackId,
|
|
regionId,
|
|
startBeat: expectedModelUpdates.startBeat,
|
|
length: expectedModelUpdates.length
|
|
});
|
|
}
|
|
}
|
|
} else {
|
|
// Find the track that contains this region
|
|
const track = tracks.find(t => t.getId().toString() === region.trackId);
|
|
if (track) {
|
|
// Log the track's regions before updating the store
|
|
const trackRegions = track.getRegions();
|
|
const midiRegion = trackRegions.find(r => r.getId() === regionId) as KGMidiRegion | undefined;
|
|
|
|
if (midiRegion) {
|
|
// If we have expected model updates, use those
|
|
if (expectedModelUpdates) {
|
|
if (DEBUG_MODE.MAIN_CONTENT) {
|
|
console.log(`MainContent - Expected model updates: startBeat=${expectedModelUpdates.startBeat}, length=${expectedModelUpdates.length}`);
|
|
}
|
|
|
|
// Add to pending updates for verification
|
|
const key = `${track.getId()}-${regionId}-${Date.now()}`;
|
|
pendingUpdates.current.set(key, {
|
|
trackId: track.getId().toString(),
|
|
regionId,
|
|
startBeat: expectedModelUpdates.startBeat,
|
|
length: expectedModelUpdates.length
|
|
});
|
|
} else {
|
|
// Otherwise use the current values (for backward compatibility)
|
|
const startBeat = midiRegion.getStartFromBeat();
|
|
const length = midiRegion.getLength();
|
|
|
|
if (DEBUG_MODE.MAIN_CONTENT) {
|
|
console.log(`MainContent - Region before store update: startBeat=${startBeat}, length=${length}`);
|
|
}
|
|
|
|
// Add to pending updates for verification
|
|
const key = `${track.getId()}-${regionId}-${Date.now()}`;
|
|
pendingUpdates.current.set(key, {
|
|
trackId: track.getId().toString(),
|
|
regionId,
|
|
startBeat,
|
|
length
|
|
});
|
|
}
|
|
}
|
|
|
|
// Update the track in the store to persist changes
|
|
updateTrack(track);
|
|
}
|
|
}
|
|
|
|
// Keep the active piano roll region in sync when that same region is updated.
|
|
// Do not switch the editor to an unrelated region from generic move/resize updates.
|
|
if (showPianoRoll && activeRegionId === regionId) {
|
|
setActiveRegionId(regionId);
|
|
|
|
if (DEBUG_MODE.MAIN_CONTENT) {
|
|
console.log(`Updated region ${regionId} set as active region in piano roll`);
|
|
}
|
|
}
|
|
};
|
|
|
|
// Helper function to select a region (clears previous selections)
|
|
const applyRegionSelection = (orderedSelectionIds: string[]) => {
|
|
const core = KGCore.instance();
|
|
|
|
tracks.forEach(projectTrack => {
|
|
projectTrack.getRegions().forEach(projectRegion => projectRegion.deselect());
|
|
});
|
|
|
|
clearAllSelections();
|
|
|
|
const selectedRegions: KGRegion[] = orderedSelectionIds
|
|
.map(selectedId => {
|
|
for (const projectTrack of tracks) {
|
|
const selectedRegion = projectTrack.getRegions().find(r => r.getId() === selectedId);
|
|
if (selectedRegion) {
|
|
selectedRegion.select();
|
|
return selectedRegion as KGRegion;
|
|
}
|
|
}
|
|
return null;
|
|
})
|
|
.filter((selectedRegion): selectedRegion is KGRegion => selectedRegion !== null);
|
|
|
|
if (selectedRegions.length > 0) {
|
|
core.addSelectedItems(selectedRegions);
|
|
}
|
|
|
|
const lastSelectedRegionId = selectedRegions.length > 0
|
|
? selectedRegions[selectedRegions.length - 1].getId()
|
|
: null;
|
|
|
|
setSelectedRegionId(lastSelectedRegionId);
|
|
|
|
if (DEBUG_MODE.MAIN_CONTENT) {
|
|
console.log(`Selected regions: ${selectedRegions.map(selectedRegion => selectedRegion.getId()).join(', ')}`);
|
|
}
|
|
|
|
if (!showPianoRoll) {
|
|
return;
|
|
}
|
|
|
|
if (!lastSelectedRegionId) {
|
|
setShowPianoRoll(false);
|
|
setActiveRegionId(null);
|
|
return;
|
|
}
|
|
|
|
const lastSelectedRegion = selectedRegions[selectedRegions.length - 1];
|
|
if (lastSelectedRegion instanceof KGAudioRegion) {
|
|
openSpectrogramViewer(lastSelectedRegionId);
|
|
} else if (lastSelectedRegion instanceof KGMidiRegion) {
|
|
openMidiPianoRoll(lastSelectedRegionId);
|
|
}
|
|
};
|
|
|
|
const selectRegion = (
|
|
regionId: string,
|
|
options: RegionClickOptions = { shiftKey: false },
|
|
regionsToSearch?: RegionUI[]
|
|
) => {
|
|
const regionsToUse = regionsToSearch || regions;
|
|
const region = regionsToUse.find(r => r.id === regionId);
|
|
if (!region) {
|
|
if (DEBUG_MODE.MAIN_CONTENT) {
|
|
console.log(`Region not found in UI state: ${regionId}`);
|
|
}
|
|
return;
|
|
}
|
|
|
|
const track = tracks.find(t => t.getId().toString() === region.trackId);
|
|
if (!track) {
|
|
if (DEBUG_MODE.MAIN_CONTENT) {
|
|
console.log(`Track not found for region: ${regionId}`);
|
|
}
|
|
return;
|
|
}
|
|
|
|
const coreRegion = track.getRegions().find(r => r.getId() === regionId);
|
|
if (!coreRegion) {
|
|
if (DEBUG_MODE.MAIN_CONTENT) {
|
|
console.log(`Region not found in track model: ${regionId}`);
|
|
}
|
|
return;
|
|
}
|
|
|
|
const orderedSelection = options.shiftKey
|
|
? (selectedRegionIds.includes(regionId)
|
|
? selectedRegionIds.filter(id => id !== regionId)
|
|
: [...selectedRegionIds, regionId])
|
|
: [regionId];
|
|
|
|
applyRegionSelection(orderedSelection);
|
|
};
|
|
|
|
const handleRegionLassoSelection = (regionIds: string[], options: RegionClickOptions = { shiftKey: false }) => {
|
|
const orderedRegionIds = regionIds.filter(regionId => regions.some(region => region.id === regionId));
|
|
const orderedSelection = options.shiftKey
|
|
? orderedRegionIds.reduce<string[]>((nextSelection, regionId) => {
|
|
if (nextSelection.includes(regionId)) {
|
|
return nextSelection.filter(id => id !== regionId);
|
|
}
|
|
return [...nextSelection, regionId];
|
|
}, [...selectedRegionIds])
|
|
: orderedRegionIds;
|
|
|
|
applyRegionSelection(orderedSelection);
|
|
};
|
|
|
|
const handleEmptyMainContentClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
if (e.target !== e.currentTarget) {
|
|
return;
|
|
}
|
|
|
|
if (preventEmptyMainContentDeselectRef.current) {
|
|
preventEmptyMainContentDeselectRef.current = false;
|
|
return;
|
|
}
|
|
|
|
handleRegionLassoSelection([], { shiftKey: false });
|
|
};
|
|
|
|
const handleRegionLassoCommit = () => {
|
|
preventEmptyMainContentDeselectRef.current = true;
|
|
};
|
|
|
|
// Handle region single click: selection only (no piano roll opening)
|
|
const handleRegionClick = (regionId: string, options: RegionClickOptions = { shiftKey: false }) => {
|
|
if (DEBUG_MODE.MAIN_CONTENT) {
|
|
console.log(`Region clicked in MainContent (selection only): ${regionId}`);
|
|
}
|
|
|
|
// Select the region
|
|
selectRegion(regionId, options);
|
|
|
|
// Also select the containing track
|
|
const region = regions.find(r => r.id === regionId);
|
|
if (!region) return;
|
|
const track = tracks.find(t => t.getId().toString() === region.trackId);
|
|
if (!track) return;
|
|
setSelectedTrack(track.getId().toString());
|
|
|
|
};
|
|
|
|
// Handle explicit pencil action: select region and open piano roll
|
|
const handleOpenPianoRoll = (regionId: string) => {
|
|
// Don't open piano roll for audio regions
|
|
const project = KGCore.instance().getCurrentProject();
|
|
for (const track of project.getTracks()) {
|
|
const region = track.getRegions().find(r => r.getId() === regionId);
|
|
if (region && region.getCurrentType() === 'KGAudioRegion') {
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (DEBUG_MODE.MAIN_CONTENT) {
|
|
console.log(`Open piano roll via pencil for region: ${regionId}`);
|
|
}
|
|
|
|
// Reuse selection logic
|
|
handleRegionClick(regionId, { shiftKey: false });
|
|
|
|
// Activate and show piano roll in midi-edit mode
|
|
openMidiPianoRoll(regionId);
|
|
};
|
|
|
|
// Handle spectrogram viewer open
|
|
const handleOpenSpectrogram = (regionId: string) => {
|
|
handleRegionClick(regionId, { shiftKey: false });
|
|
openSpectrogramViewer(regionId);
|
|
};
|
|
|
|
// Handle hybrid mode open (+ button clicked on opposite-type region)
|
|
const handleOpenHybrid = (regionId: string) => {
|
|
if (pianoRollMode === 'midi-edit' && activeRegionId) {
|
|
openHybridMode(activeRegionId, regionId);
|
|
} else if (pianoRollMode === 'spectrogram' && activeRegionId) {
|
|
openHybridMode(regionId, activeRegionId);
|
|
}
|
|
};
|
|
|
|
// + button is visible only when piano roll is open and mode is not hybrid
|
|
const showHybridButtonForAudio = showPianoRoll && pianoRollMode === 'midi-edit';
|
|
const showHybridButtonForMidi = showPianoRoll && pianoRollMode === 'spectrogram';
|
|
|
|
// Handle piano roll close
|
|
const handlePianoRollClose = () => {
|
|
setShowPianoRoll(false);
|
|
setActiveRegionId(null);
|
|
};
|
|
|
|
/**
|
|
* Add keyboard event listener for region deletion
|
|
* Handles Backspace (Windows) and Delete (Mac) keys to delete selected regions
|
|
* Only processes deletion when not in the piano roll (piano roll has its own delete handler)
|
|
*/
|
|
useEffect(() => {
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
// Skip if user is typing in an input field (including ChatBox)
|
|
const target = event.target as HTMLElement;
|
|
if (target && (
|
|
target.tagName === 'INPUT' ||
|
|
target.tagName === 'TEXTAREA' ||
|
|
target.contentEditable === 'true' ||
|
|
target.hasAttribute('data-chatbox-input') ||
|
|
target.closest('.chatbox-input')
|
|
)) {
|
|
return;
|
|
}
|
|
|
|
// Handle delete key for selected regions (Backspace on Windows, Delete on Mac)
|
|
if (event.key === 'Backspace' || event.key === 'Delete') {
|
|
// Only handle if we're not in the piano roll (piano roll has its own delete handler)
|
|
const isInPianoRoll = document.querySelector('.piano-roll')?.contains(event.target as Node);
|
|
const isPianoRollOpen = showPianoRoll;
|
|
|
|
if (!isInPianoRoll && !isPianoRollOpen) {
|
|
const deleted = deleteSelectedRegions();
|
|
if (deleted) {
|
|
// Prevent default behavior only if regions were actually deleted
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// Add event listener
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
|
|
// Remove event listener on cleanup
|
|
return () => {
|
|
window.removeEventListener('keydown', handleKeyDown);
|
|
};
|
|
}, [deleteSelectedRegions, showPianoRoll]); // Dependencies for the effect
|
|
|
|
// Utility function to calculate playhead position from mouse coordinates (bar-level snapping)
|
|
const calculatePlayheadFromMouse = useCallback((clientX: number): number | null => {
|
|
if (!barNumbersRef.current) return null;
|
|
|
|
const rect = barNumbersRef.current.getBoundingClientRect();
|
|
const relativeX = clientX - rect.left;
|
|
|
|
// Calculate the width of each bar
|
|
const barWidth = parseInt(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--track-grid-bar-width')
|
|
) || 40;
|
|
|
|
// Find the closest bar start; honor snapping toggle
|
|
const snap = KGMainContentState.instance().isSnappingEnabled();
|
|
const barIndex = snap ? Math.round(relativeX / barWidth) : relativeX / barWidth;
|
|
|
|
// Ensure we don't go below 0
|
|
const clampedBarIndex = Math.max(0, barIndex);
|
|
|
|
// Calculate destination beat position (start of the bar)
|
|
const beatsPerBar = timeSignature.numerator;
|
|
const destinationBeatPosition = clampedBarIndex * beatsPerBar;
|
|
|
|
return destinationBeatPosition;
|
|
}, [timeSignature]);
|
|
|
|
// Utility function to calculate bar index from mouse coordinates (for loop range selection)
|
|
const calculateBarIndexFromMouse = useCallback((clientX: number): number | null => {
|
|
if (!barNumbersRef.current) return null;
|
|
|
|
const rect = barNumbersRef.current.getBoundingClientRect();
|
|
const relativeX = clientX - rect.left;
|
|
|
|
// Calculate the width of each bar
|
|
const barWidth = parseInt(
|
|
getComputedStyle(document.documentElement).getPropertyValue('--track-grid-bar-width')
|
|
) || 40;
|
|
|
|
// Calculate bar index (using Math.floor for exact bar boundaries)
|
|
const barIndex = Math.floor(relativeX / barWidth);
|
|
|
|
// Clamp to valid range [0, maxBars - 1]
|
|
return Math.max(0, Math.min(barIndex, maxBars - 1));
|
|
}, [maxBars]);
|
|
|
|
// Handle mouse down to start dragging (for loop range selection)
|
|
const handleBarNumbersMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
// Only handle left mouse button
|
|
if (e.button !== 0) return;
|
|
|
|
// Calculate starting bar index
|
|
const startBarIndex = calculateBarIndexFromMouse(e.clientX);
|
|
if (startBarIndex === null) return;
|
|
|
|
// Always start loop drag tracking
|
|
isLoopDraggingRef.current = true;
|
|
loopDragStartBarRef.current = startBarIndex;
|
|
loopDragStartXRef.current = e.clientX;
|
|
|
|
// Capture original loop settings for undo/redo
|
|
loopDragOriginalSettingsRef.current = {
|
|
isLooping,
|
|
loopingRange: [...loopingRange] as [number, number]
|
|
};
|
|
|
|
if (DEBUG_MODE.MAIN_CONTENT) {
|
|
console.log(`Bar numbers mouse down - Start bar: ${startBarIndex} (displayed as bar ${startBarIndex + 1})`);
|
|
}
|
|
|
|
// Prevent text selection during drag
|
|
e.preventDefault();
|
|
};
|
|
|
|
// Global mouse move and mouse up handlers for loop range drag functionality
|
|
useEffect(() => {
|
|
const handleMouseMove = (e: MouseEvent) => {
|
|
if (!isLoopDraggingRef.current) return;
|
|
if (loopDragStartBarRef.current === null || loopDragStartXRef.current === null) return;
|
|
|
|
// Calculate distance moved
|
|
const distanceMoved = Math.abs(e.clientX - loopDragStartXRef.current);
|
|
|
|
// Only update if moved beyond threshold
|
|
if (distanceMoved < BAR_NUMBERS_CONSTANTS.DRAG_THRESHOLD) return;
|
|
|
|
// Calculate current bar index
|
|
const currentBarIndex = calculateBarIndexFromMouse(e.clientX);
|
|
if (currentBarIndex === null) return;
|
|
|
|
// Create loop range [min, max] regardless of drag direction
|
|
const startBar = loopDragStartBarRef.current;
|
|
const loopStart = Math.min(startBar, currentBarIndex);
|
|
const loopEnd = Math.max(startBar, currentBarIndex);
|
|
const newLoopRange: [number, number] = [loopStart, loopEnd];
|
|
|
|
// Update project model
|
|
const core = KGCore.instance();
|
|
const project = core.getCurrentProject();
|
|
project.setLoopingRange(newLoopRange);
|
|
project.setIsLooping(true); // Enable looping immediately during drag for real-time visual feedback
|
|
|
|
// Update store to trigger UI re-render
|
|
useProjectStore.setState({ loopingRange: newLoopRange, isLooping: true });
|
|
|
|
if (DEBUG_MODE.MAIN_CONTENT) {
|
|
console.log(`Loop range drag - Range: [${loopStart}, ${loopEnd}] (bars ${loopStart + 1}-${loopEnd + 1})`);
|
|
}
|
|
};
|
|
|
|
const handleMouseUp = (e: MouseEvent) => {
|
|
if (isLoopDraggingRef.current) {
|
|
if (loopDragStartXRef.current !== null) {
|
|
const distanceMoved = Math.abs(e.clientX - loopDragStartXRef.current);
|
|
|
|
// If dragged beyond threshold, execute command for undo/redo support
|
|
if (distanceMoved >= BAR_NUMBERS_CONSTANTS.DRAG_THRESHOLD) {
|
|
const core = KGCore.instance();
|
|
const currentIsLooping = core.getCurrentProject().getIsLooping();
|
|
const currentLoopingRange = core.getCurrentProject().getLoopingRange();
|
|
|
|
// Only execute command if settings actually changed from original
|
|
if (loopDragOriginalSettingsRef.current) {
|
|
const originalSettings = loopDragOriginalSettingsRef.current;
|
|
const settingsChanged =
|
|
originalSettings.isLooping !== currentIsLooping ||
|
|
originalSettings.loopingRange[0] !== currentLoopingRange[0] ||
|
|
originalSettings.loopingRange[1] !== currentLoopingRange[1];
|
|
|
|
if (settingsChanged) {
|
|
// Stop playback if currently playing (get fresh state from store)
|
|
const { isPlaying: currentIsPlaying, stopPlaying: currentStopPlaying } = useProjectStore.getState();
|
|
if (currentIsPlaying) {
|
|
currentStopPlaying();
|
|
}
|
|
|
|
// Revert to original state first (since we updated in real-time)
|
|
core.getCurrentProject().setIsLooping(originalSettings.isLooping);
|
|
core.getCurrentProject().setLoopingRange(originalSettings.loopingRange);
|
|
|
|
// Now execute command to apply new settings with undo support
|
|
const command = new ChangeLoopSettingsCommand({
|
|
isLooping: currentIsLooping,
|
|
loopingRange: currentLoopingRange
|
|
});
|
|
core.executeCommand(command);
|
|
|
|
if (DEBUG_MODE.MAIN_CONTENT) {
|
|
console.log('Loop range drag ended - Command executed for undo/redo');
|
|
}
|
|
}
|
|
}
|
|
} else {
|
|
// Single click (moved < threshold) - set playhead position
|
|
const clickPosition = calculatePlayheadFromMouse(e.clientX);
|
|
if (clickPosition !== null) {
|
|
setPlayheadPosition(clickPosition);
|
|
requestPianoRollScroll(clickPosition);
|
|
|
|
if (DEBUG_MODE.MAIN_CONTENT) {
|
|
console.log(`Single click on bar numbers - Set playhead to: ${clickPosition}`);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Reset drag state
|
|
isLoopDraggingRef.current = false;
|
|
loopDragStartBarRef.current = null;
|
|
loopDragStartXRef.current = null;
|
|
loopDragOriginalSettingsRef.current = null;
|
|
}
|
|
};
|
|
|
|
// Add global event listeners for drag functionality
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
|
|
// Cleanup event listeners on unmount
|
|
return () => {
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
}, [calculateBarIndexFromMouse, calculatePlayheadFromMouse, setPlayheadPosition, requestPianoRollScroll]);
|
|
|
|
const { showInstrumentSelection, isLooping, loopingRange } = useProjectStore();
|
|
|
|
// Helper function to check if a bar (0-indexed) is in the loop range
|
|
const isBarInLoopRange = (barIndex: number): boolean => {
|
|
if (!isLooping) return false;
|
|
// Loop range is [startBar, endBar] (0-indexed)
|
|
// We want to highlight bars from startBar to endBar inclusive
|
|
return barIndex >= loopingRange[0] && barIndex <= loopingRange[1];
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`main-content${showInstrumentSelection ? ' has-left-instrument' : ''}`}
|
|
ref={mainContentRef}
|
|
onClick={handleEmptyMainContentClick}
|
|
>
|
|
<div className="main-content-wrapper" onClick={handleEmptyMainContentClick}>
|
|
{/* Top-left spacer */}
|
|
<div className="top-left-spacer">
|
|
<button className="add-track-btn" onClick={() => addTrack()}>+ MIDI</button>
|
|
<button className="add-track-btn" onClick={() => addAudioTrack()}>+ Audio</button>
|
|
</div>
|
|
|
|
{/* Bar numbers at the top */}
|
|
<div
|
|
className="bar-numbers"
|
|
ref={barNumbersRef}
|
|
onMouseDown={handleBarNumbersMouseDown}
|
|
>
|
|
{Array.from({ length: maxBars }, (_, i) => (
|
|
<div
|
|
key={i}
|
|
className={`bar-number-cell${isBarInLoopRange(i) ? ' looped' : ''}`}
|
|
>
|
|
{i + 1}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="main-content-body" onClick={handleEmptyMainContentClick}>
|
|
{/* Fixed left panel with track info */}
|
|
<TrackInfoPanel
|
|
tracks={tracks}
|
|
onTrackClick={onTrackClick}
|
|
onTrackNameEdit={handleTrackNameEdit}
|
|
onTracksReordered={handleTracksReordered}
|
|
/>
|
|
|
|
{/* Scrollable grid area */}
|
|
<TrackGridPanel
|
|
tracks={tracks}
|
|
regions={regions}
|
|
maxBars={maxBars}
|
|
timeSignature={timeSignature}
|
|
draggedTrackIndex={draggedTrackIndex}
|
|
dragOverTrackIndex={dragOverTrackIndex}
|
|
selectedRegionId={selectedRegionId}
|
|
projectName={projectName}
|
|
onRegionCreated={handleRegionCreated}
|
|
onRegionUpdated={handleRegionUpdated}
|
|
onRegionClick={handleRegionClick}
|
|
onRegionLassoSelection={handleRegionLassoSelection}
|
|
onRegionLassoCommit={handleRegionLassoCommit}
|
|
onOpenPianoRoll={handleOpenPianoRoll}
|
|
onOpenSpectrogram={handleOpenSpectrogram}
|
|
showHybridButtonForAudio={showHybridButtonForAudio}
|
|
showHybridButtonForMidi={showHybridButtonForMidi}
|
|
onOpenHybrid={handleOpenHybrid}
|
|
onExternalDropComplete={handleExternalDropComplete}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Piano Roll / Spectrogram Viewer - render using portal */}
|
|
{showPianoRoll && createPortal(
|
|
<PianoRoll
|
|
onClose={handlePianoRollClose}
|
|
regionId={activeRegionId}
|
|
mode={pianoRollMode}
|
|
audioRegion={(() => {
|
|
// spectrogram mode: audio region IS the activeRegionId
|
|
// hybrid mode: audio region is hybridAudioRegionId
|
|
const audioId = pianoRollMode === 'spectrogram' ? activeRegionId
|
|
: pianoRollMode === 'hybrid' ? hybridAudioRegionId
|
|
: null;
|
|
if (!audioId) return undefined;
|
|
for (const track of tracks) {
|
|
const region = track.getRegions().find(r => r.getId() === audioId);
|
|
if (region && region.getCurrentType() === 'KGAudioRegion') {
|
|
return region as unknown as KGAudioRegion;
|
|
}
|
|
}
|
|
return undefined;
|
|
})()}
|
|
trackId={(() => {
|
|
const audioId = pianoRollMode === 'spectrogram' ? activeRegionId
|
|
: pianoRollMode === 'hybrid' ? hybridAudioRegionId
|
|
: null;
|
|
if (!audioId) return undefined;
|
|
for (const track of tracks) {
|
|
if (track.getRegions().some(r => r.getId() === audioId)) {
|
|
return track.getId().toString();
|
|
}
|
|
}
|
|
return undefined;
|
|
})()}
|
|
projectName={savedProjectName}
|
|
/>,
|
|
document.body
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MainContent;
|