refactor: split MainContent into focused hooks and fix audio debug build
This commit is contained in:
Xiaohan-Tian
+152
-1868
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,135 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { FaPlus } from 'react-icons/fa';
|
||||
import GlobalChordLane from './GlobalChordLane';
|
||||
import GlobalKeySignatureLane from './GlobalKeySignatureLane';
|
||||
import GlobalMarkerLane from './GlobalMarkerLane';
|
||||
import GlobalTempoLane from './GlobalTempoLane';
|
||||
|
||||
interface GlobalTrackDefinition {
|
||||
id: 'marker' | 'tempo' | 'signature' | 'chord';
|
||||
label: string;
|
||||
}
|
||||
|
||||
const GLOBAL_TRACKS: GlobalTrackDefinition[] = [
|
||||
{ id: 'marker', label: 'Marker' },
|
||||
{ id: 'tempo', label: 'Tempo' },
|
||||
{ id: 'signature', label: 'Key Signature' },
|
||||
{ id: 'chord', label: 'Chord' },
|
||||
];
|
||||
|
||||
interface MainContentGlobalTracksSectionProps {
|
||||
visible: boolean;
|
||||
onAddMarker: () => void;
|
||||
onAddTempo: () => void;
|
||||
onAddKeySignature: () => void;
|
||||
onAddChord: () => void;
|
||||
markerLaneProps: React.ComponentProps<typeof GlobalMarkerLane>;
|
||||
tempoLaneProps: React.ComponentProps<typeof GlobalTempoLane>;
|
||||
keySignatureLaneProps: React.ComponentProps<typeof GlobalKeySignatureLane>;
|
||||
chordLaneProps: React.ComponentProps<typeof GlobalChordLane>;
|
||||
}
|
||||
|
||||
const MainContentGlobalTracksSection: React.FC<MainContentGlobalTracksSectionProps> = ({
|
||||
visible,
|
||||
onAddMarker,
|
||||
onAddTempo,
|
||||
onAddKeySignature,
|
||||
onAddChord,
|
||||
markerLaneProps,
|
||||
tempoLaneProps,
|
||||
keySignatureLaneProps,
|
||||
chordLaneProps,
|
||||
}) => {
|
||||
const [shouldRender, setShouldRender] = useState(visible);
|
||||
const [isAnimated, setIsAnimated] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!visible) {
|
||||
setIsAnimated(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setShouldRender(true);
|
||||
}, [visible]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!shouldRender || !visible || isAnimated) {
|
||||
return;
|
||||
}
|
||||
|
||||
const frame = requestAnimationFrame(() => {
|
||||
setIsAnimated(true);
|
||||
});
|
||||
|
||||
return () => cancelAnimationFrame(frame);
|
||||
}, [isAnimated, shouldRender, visible]);
|
||||
|
||||
if (!shouldRender) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="global-tracks-section"
|
||||
aria-label="Global tracks"
|
||||
aria-hidden={!visible}
|
||||
style={{ ['--global-track-count' as string]: String(GLOBAL_TRACKS.length) }}
|
||||
>
|
||||
<div
|
||||
className={`global-tracks-info-shell${isAnimated ? ' expanded' : ' collapsed'}`}
|
||||
onTransitionEnd={() => {
|
||||
if (!visible) {
|
||||
setShouldRender(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="global-tracks-info">
|
||||
{GLOBAL_TRACKS.map(track => (
|
||||
<div key={track.id} className="global-track-info-row">
|
||||
<span className="global-track-name">{track.label}</span>
|
||||
<button
|
||||
type="button"
|
||||
className="global-track-add-button"
|
||||
aria-label={`Add ${track.label} global track item`}
|
||||
title={`Add ${track.label} global track item`}
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (track.id === 'marker') {
|
||||
onAddMarker();
|
||||
return;
|
||||
}
|
||||
|
||||
if (track.id === 'tempo') {
|
||||
onAddTempo();
|
||||
return;
|
||||
}
|
||||
|
||||
if (track.id === 'signature') {
|
||||
onAddKeySignature();
|
||||
return;
|
||||
}
|
||||
|
||||
onAddChord();
|
||||
}}
|
||||
>
|
||||
<FaPlus />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className={`global-tracks-grid-shell${isAnimated ? ' expanded' : ' collapsed'}`}>
|
||||
<div className="global-tracks-grid" aria-hidden="true">
|
||||
<GlobalMarkerLane {...markerLaneProps} />
|
||||
<GlobalTempoLane {...tempoLaneProps} />
|
||||
<GlobalKeySignatureLane {...keySignatureLaneProps} />
|
||||
<GlobalChordLane {...chordLaneProps} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainContentGlobalTracksSection;
|
||||
@@ -58,7 +58,7 @@ const PianoRollHeader: React.FC<PianoRollHeaderProps> = ({
|
||||
<div
|
||||
className="piano-roll-title"
|
||||
onClick={onTitleClick}
|
||||
title="Click to rename region"
|
||||
title={title}
|
||||
>
|
||||
{title}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,654 @@
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import type { KeySignature } from '../core/KGProject';
|
||||
import { KGCore } from '../core/KGCore';
|
||||
import { GlobalTrackType, KGGlobalTrack } from '../core/global-track';
|
||||
import { KGRegion } from '../core/region/KGRegion';
|
||||
import { KGChordRegion } from '../core/region/KGChordRegion';
|
||||
import { KGKeySignatureRegion } from '../core/region/KGKeySignatureRegion';
|
||||
import { KGTempoRegion } from '../core/region/KGTempoRegion';
|
||||
import { KGMarkerRegion } from '../core/region/KGMarkerRegion';
|
||||
import {
|
||||
CreateChordRegionCommand,
|
||||
CreateGlobalMarkerRegionCommand,
|
||||
CreateKeySignatureRegionCommand,
|
||||
CreateTempoRegionCommand,
|
||||
DeleteKeySignatureRegionCommand,
|
||||
DeleteMultipleGlobalRegionsCommand,
|
||||
DeleteMultipleKeySignatureRegionsCommand,
|
||||
DeleteMultipleTempoRegionsCommand,
|
||||
DeleteTempoRegionCommand,
|
||||
InsertChordRegionAtBeatCommand,
|
||||
MoveGlobalRegionCommand,
|
||||
ResizeGlobalRegionCommand,
|
||||
ResizeKeySignatureRegionCommand,
|
||||
ResizeTempoRegionCommand,
|
||||
UpdateChordRegionCommand,
|
||||
UpdateGlobalRegionTextCommand,
|
||||
UpdateKeySignatureRegionCommand,
|
||||
UpdateTempoRegionCommand,
|
||||
} from '../core/commands';
|
||||
import type { RegionClickOptions } from '../components/interfaces';
|
||||
import { TIME_CONSTANTS } from '../constants/coreConstants';
|
||||
import {
|
||||
DEFAULT_MARKER_REGION_NAME,
|
||||
getSortedKeySignatureRegions,
|
||||
getSortedTempoRegions,
|
||||
} from '../util/globalTrackUtil';
|
||||
import type MainContentGlobalTracksSection from '../components/global-track/MainContentGlobalTracksSection';
|
||||
|
||||
interface UseMainContentGlobalTracksParams {
|
||||
globalTracks: KGGlobalTrack[];
|
||||
selectedRegionIds: string[];
|
||||
timeSignature: { numerator: number; denominator: number };
|
||||
barWidthMultiplier: number;
|
||||
maxBars: number;
|
||||
playheadPosition: number;
|
||||
refreshProjectState: () => void;
|
||||
bumpAudioWaveformRedrawVersion: () => void;
|
||||
findProjectRegionById: (regionId: string) => KGRegion | null;
|
||||
isGlobalRegionId: (regionId: string) => boolean;
|
||||
selectGlobalRegion: (regionId: string, options?: RegionClickOptions) => void;
|
||||
}
|
||||
|
||||
type GlobalTracksSectionProps = React.ComponentProps<typeof MainContentGlobalTracksSection>;
|
||||
type MarkerLaneProps = GlobalTracksSectionProps['markerLaneProps'];
|
||||
type TempoLaneProps = GlobalTracksSectionProps['tempoLaneProps'];
|
||||
type KeySignatureLaneProps = GlobalTracksSectionProps['keySignatureLaneProps'];
|
||||
type ChordLaneProps = GlobalTracksSectionProps['chordLaneProps'];
|
||||
|
||||
const DEFAULT_REGION_CLICK_OPTIONS: RegionClickOptions = {
|
||||
shiftKey: false,
|
||||
metaKey: false,
|
||||
ctrlKey: false,
|
||||
};
|
||||
|
||||
export interface UseMainContentGlobalTracksResult {
|
||||
deleteSelectedGlobalRegions: () => boolean;
|
||||
editingRegionIds: string[];
|
||||
sectionProps: Omit<GlobalTracksSectionProps, 'visible'>;
|
||||
}
|
||||
|
||||
export function useMainContentGlobalTracks({
|
||||
globalTracks,
|
||||
selectedRegionIds,
|
||||
timeSignature,
|
||||
barWidthMultiplier,
|
||||
maxBars,
|
||||
playheadPosition,
|
||||
refreshProjectState,
|
||||
bumpAudioWaveformRedrawVersion,
|
||||
findProjectRegionById,
|
||||
isGlobalRegionId,
|
||||
selectGlobalRegion,
|
||||
}: UseMainContentGlobalTracksParams): UseMainContentGlobalTracksResult {
|
||||
const [editingGlobalRegionId, setEditingGlobalRegionId] = useState<string | null>(null);
|
||||
const [editingGlobalRegionText, setEditingGlobalRegionText] = useState('');
|
||||
const [editingKeySignatureRegionId, setEditingKeySignatureRegionId] = useState<string | null>(null);
|
||||
const [editingTempoRegionId, setEditingTempoRegionId] = useState<string | null>(null);
|
||||
const [editingTempoText, setEditingTempoText] = useState('');
|
||||
const [editingChordRegionId, setEditingChordRegionId] = useState<string | null>(null);
|
||||
|
||||
const markerTrack = useMemo(
|
||||
() => globalTracks.find(track => track.getType() === GlobalTrackType.Marker) ?? null,
|
||||
[globalTracks]
|
||||
);
|
||||
const markerRegions = useMemo(
|
||||
() => (markerTrack?.getRegions() ?? []).filter((region): region is KGMarkerRegion => region instanceof KGMarkerRegion),
|
||||
[markerTrack]
|
||||
);
|
||||
const signatureTrack = useMemo(
|
||||
() => globalTracks.find(track => track.getType() === GlobalTrackType.Signature) ?? null,
|
||||
[globalTracks]
|
||||
);
|
||||
const signatureRegions = useMemo(
|
||||
() => (signatureTrack ? getSortedKeySignatureRegions(signatureTrack, timeSignature.numerator) : []),
|
||||
[signatureTrack, timeSignature.numerator]
|
||||
);
|
||||
const tempoTrack = useMemo(
|
||||
() => globalTracks.find(track => track.getType() === GlobalTrackType.Tempo) ?? null,
|
||||
[globalTracks]
|
||||
);
|
||||
const tempoRegions = useMemo(
|
||||
() => (tempoTrack ? getSortedTempoRegions(tempoTrack, timeSignature.numerator) : []),
|
||||
[tempoTrack, timeSignature.numerator]
|
||||
);
|
||||
const chordTrack = useMemo(
|
||||
() => globalTracks.find(track => track.getType() === GlobalTrackType.Chord) ?? null,
|
||||
[globalTracks]
|
||||
);
|
||||
const chordRegions = useMemo(
|
||||
() => (chordTrack?.getRegions() ?? []).filter((region): region is KGChordRegion => region instanceof KGChordRegion),
|
||||
[chordTrack]
|
||||
);
|
||||
|
||||
const beginEditingGlobalRegion = useCallback((regionId: string) => {
|
||||
const region = findProjectRegionById(regionId);
|
||||
if (!(region instanceof KGMarkerRegion)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setEditingGlobalRegionId(regionId);
|
||||
setEditingGlobalRegionText(region.getName());
|
||||
}, [findProjectRegionById]);
|
||||
|
||||
const beginEditingKeySignatureRegion = useCallback((regionId: string) => {
|
||||
const region = findProjectRegionById(regionId);
|
||||
if (region instanceof KGKeySignatureRegion) {
|
||||
setEditingKeySignatureRegionId(regionId);
|
||||
}
|
||||
}, [findProjectRegionById]);
|
||||
|
||||
const beginEditingTempoRegion = useCallback((regionId: string) => {
|
||||
const region = findProjectRegionById(regionId);
|
||||
if (!(region instanceof KGTempoRegion)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setEditingTempoRegionId(regionId);
|
||||
setEditingTempoText(region.getBpm().toString());
|
||||
}, [findProjectRegionById]);
|
||||
|
||||
const beginEditingChordRegion = useCallback((regionId: string) => {
|
||||
const region = findProjectRegionById(regionId);
|
||||
if (region instanceof KGChordRegion) {
|
||||
setEditingChordRegionId(regionId);
|
||||
}
|
||||
}, [findProjectRegionById]);
|
||||
|
||||
const commitGlobalRegionEdit = useCallback((regionId: string) => {
|
||||
const region = findProjectRegionById(regionId);
|
||||
if (!(region instanceof KGMarkerRegion)) {
|
||||
setEditingGlobalRegionId(null);
|
||||
setEditingGlobalRegionText('');
|
||||
return;
|
||||
}
|
||||
|
||||
const trimmedText = editingGlobalRegionText.replace(/\r?\n/g, ' ').trim();
|
||||
setEditingGlobalRegionId(null);
|
||||
setEditingGlobalRegionText('');
|
||||
|
||||
if (!trimmedText || trimmedText === region.getName()) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
KGCore.instance().executeCommand(new UpdateGlobalRegionTextCommand(regionId, trimmedText));
|
||||
refreshProjectState();
|
||||
} catch (error) {
|
||||
console.error('Error updating marker text:', error);
|
||||
}
|
||||
}, [editingGlobalRegionText, findProjectRegionById, refreshProjectState]);
|
||||
|
||||
const createMarkerAtBeat = useCallback((requestedStartBeat: number) => {
|
||||
const normalizedStartBeat = Math.max(0, Math.round(requestedStartBeat));
|
||||
const occupiedRegion = markerRegions.find(region => region.getStartFromBeat() === normalizedStartBeat);
|
||||
if (occupiedRegion) {
|
||||
selectGlobalRegion(occupiedRegion.getId(), DEFAULT_REGION_CLICK_OPTIONS);
|
||||
beginEditingGlobalRegion(occupiedRegion.getId());
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const command = new CreateGlobalMarkerRegionCommand(
|
||||
normalizedStartBeat,
|
||||
timeSignature.numerator,
|
||||
DEFAULT_MARKER_REGION_NAME
|
||||
);
|
||||
KGCore.instance().executeCommand(command);
|
||||
refreshProjectState();
|
||||
|
||||
const createdRegion = command.getCreatedRegion();
|
||||
if (!createdRegion) {
|
||||
return;
|
||||
}
|
||||
|
||||
selectGlobalRegion(createdRegion.getId(), DEFAULT_REGION_CLICK_OPTIONS);
|
||||
setEditingGlobalRegionId(createdRegion.getId());
|
||||
setEditingGlobalRegionText(createdRegion.getName());
|
||||
} catch (error) {
|
||||
console.error('Error creating marker region:', error);
|
||||
}
|
||||
}, [beginEditingGlobalRegion, markerRegions, refreshProjectState, selectGlobalRegion, timeSignature.numerator]);
|
||||
|
||||
const createMarkerAtPlayheadBar = useCallback(() => {
|
||||
const beatsPerBar = timeSignature.numerator;
|
||||
const startBeat = Math.floor(playheadPosition / beatsPerBar) * beatsPerBar;
|
||||
createMarkerAtBeat(startBeat);
|
||||
}, [createMarkerAtBeat, playheadPosition, timeSignature.numerator]);
|
||||
|
||||
const moveGlobalMarkerRegion = useCallback((regionId: string, startBeat: number) => {
|
||||
try {
|
||||
KGCore.instance().executeCommand(new MoveGlobalRegionCommand(regionId, Math.round(startBeat)));
|
||||
refreshProjectState();
|
||||
} catch (error) {
|
||||
console.error('Error moving marker region:', error);
|
||||
}
|
||||
}, [refreshProjectState]);
|
||||
|
||||
const resizeGlobalMarkerRegion = useCallback((regionId: string, edge: 'start' | 'end', beat: number) => {
|
||||
try {
|
||||
KGCore.instance().executeCommand(new ResizeGlobalRegionCommand(regionId, edge, Math.round(beat)));
|
||||
refreshProjectState();
|
||||
} catch (error) {
|
||||
console.error('Error resizing marker region:', error);
|
||||
}
|
||||
}, [refreshProjectState]);
|
||||
|
||||
const createKeySignatureAtBar = useCallback((requestedStartBar: number) => {
|
||||
const normalizedStartBar = Math.max(0, Math.min(requestedStartBar, maxBars - 1));
|
||||
const existingRegionAtStart = signatureRegions.find(region => region.getStartBar() === normalizedStartBar);
|
||||
if (existingRegionAtStart) {
|
||||
selectGlobalRegion(existingRegionAtStart.getId(), DEFAULT_REGION_CLICK_OPTIONS);
|
||||
beginEditingKeySignatureRegion(existingRegionAtStart.getId());
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const command = new CreateKeySignatureRegionCommand(normalizedStartBar);
|
||||
KGCore.instance().executeCommand(command);
|
||||
refreshProjectState();
|
||||
|
||||
const createdRegion = command.getCreatedRegion();
|
||||
if (!createdRegion) {
|
||||
return;
|
||||
}
|
||||
|
||||
selectGlobalRegion(createdRegion.getId(), DEFAULT_REGION_CLICK_OPTIONS);
|
||||
setEditingKeySignatureRegionId(createdRegion.getId());
|
||||
} catch (error) {
|
||||
console.error('Error creating key signature region:', error);
|
||||
}
|
||||
}, [beginEditingKeySignatureRegion, maxBars, refreshProjectState, selectGlobalRegion, signatureRegions]);
|
||||
|
||||
const createKeySignatureAtPlayheadBar = useCallback(() => {
|
||||
const beatsPerBar = timeSignature.numerator;
|
||||
const startBar = Math.floor(playheadPosition / beatsPerBar);
|
||||
createKeySignatureAtBar(startBar);
|
||||
}, [createKeySignatureAtBar, playheadPosition, timeSignature.numerator]);
|
||||
|
||||
const resizeKeySignatureRegion = useCallback((regionId: string, edge: 'start' | 'end', bar: number) => {
|
||||
try {
|
||||
KGCore.instance().executeCommand(new ResizeKeySignatureRegionCommand(regionId, edge, Math.round(bar)));
|
||||
refreshProjectState();
|
||||
} catch (error) {
|
||||
console.error('Error resizing key signature region:', error);
|
||||
}
|
||||
}, [refreshProjectState]);
|
||||
|
||||
const updateKeySignatureRegion = useCallback((regionId: string, keySignature: KeySignature) => {
|
||||
try {
|
||||
KGCore.instance().executeCommand(new UpdateKeySignatureRegionCommand(regionId, keySignature));
|
||||
setEditingKeySignatureRegionId(null);
|
||||
refreshProjectState();
|
||||
} catch (error) {
|
||||
console.error('Error updating key signature region:', error);
|
||||
}
|
||||
}, [refreshProjectState]);
|
||||
|
||||
const commitTempoRegionEdit = useCallback((regionId: string) => {
|
||||
const region = findProjectRegionById(regionId);
|
||||
if (!(region instanceof KGTempoRegion)) {
|
||||
setEditingTempoRegionId(null);
|
||||
setEditingTempoText('');
|
||||
return;
|
||||
}
|
||||
|
||||
const trimmed = editingTempoText.trim();
|
||||
setEditingTempoRegionId(null);
|
||||
setEditingTempoText('');
|
||||
|
||||
if (!trimmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextBpm = parseInt(trimmed, 10);
|
||||
if (Number.isNaN(nextBpm)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (nextBpm <= TIME_CONSTANTS.MIN_BPM || nextBpm >= TIME_CONSTANTS.MAX_BPM || nextBpm === region.getBpm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
KGCore.instance().executeCommand(new UpdateTempoRegionCommand(regionId, nextBpm));
|
||||
bumpAudioWaveformRedrawVersion();
|
||||
refreshProjectState();
|
||||
} catch (error) {
|
||||
console.error('Error updating tempo region:', error);
|
||||
}
|
||||
}, [bumpAudioWaveformRedrawVersion, editingTempoText, findProjectRegionById, refreshProjectState]);
|
||||
|
||||
const createTempoAtBar = useCallback((requestedStartBar: number) => {
|
||||
const normalizedStartBar = Math.max(0, Math.min(requestedStartBar, maxBars - 1));
|
||||
const existingRegionAtStart = tempoRegions.find(region => region.getStartBar() === normalizedStartBar);
|
||||
if (existingRegionAtStart) {
|
||||
selectGlobalRegion(existingRegionAtStart.getId(), DEFAULT_REGION_CLICK_OPTIONS);
|
||||
beginEditingTempoRegion(existingRegionAtStart.getId());
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const command = new CreateTempoRegionCommand(normalizedStartBar);
|
||||
KGCore.instance().executeCommand(command);
|
||||
bumpAudioWaveformRedrawVersion();
|
||||
refreshProjectState();
|
||||
|
||||
const createdRegion = command.getCreatedRegion();
|
||||
if (!createdRegion) {
|
||||
return;
|
||||
}
|
||||
|
||||
selectGlobalRegion(createdRegion.getId(), DEFAULT_REGION_CLICK_OPTIONS);
|
||||
setEditingTempoRegionId(createdRegion.getId());
|
||||
setEditingTempoText(createdRegion.getBpm().toString());
|
||||
} catch (error) {
|
||||
console.error('Error creating tempo region:', error);
|
||||
}
|
||||
}, [beginEditingTempoRegion, bumpAudioWaveformRedrawVersion, maxBars, refreshProjectState, selectGlobalRegion, tempoRegions]);
|
||||
|
||||
const createTempoAtPlayheadBar = useCallback(() => {
|
||||
const beatsPerBar = timeSignature.numerator;
|
||||
const startBar = Math.floor(playheadPosition / beatsPerBar);
|
||||
createTempoAtBar(startBar);
|
||||
}, [createTempoAtBar, playheadPosition, timeSignature.numerator]);
|
||||
|
||||
const resizeTempoRegion = useCallback((regionId: string, edge: 'start' | 'end', bar: number) => {
|
||||
try {
|
||||
KGCore.instance().executeCommand(new ResizeTempoRegionCommand(regionId, edge, Math.round(bar)));
|
||||
bumpAudioWaveformRedrawVersion();
|
||||
refreshProjectState();
|
||||
} catch (error) {
|
||||
console.error('Error resizing tempo region:', error);
|
||||
}
|
||||
}, [bumpAudioWaveformRedrawVersion, refreshProjectState]);
|
||||
|
||||
const createChordAtBeat = useCallback((requestedStartBeat: number) => {
|
||||
const normalizedStartBeat = Math.max(0, Math.round(requestedStartBeat));
|
||||
const occupiedRegion = chordRegions.find(region => (
|
||||
normalizedStartBeat >= region.getStartFromBeat()
|
||||
&& normalizedStartBeat < region.getStartFromBeat() + region.getLength()
|
||||
));
|
||||
if (occupiedRegion) {
|
||||
selectGlobalRegion(occupiedRegion.getId(), DEFAULT_REGION_CLICK_OPTIONS);
|
||||
beginEditingChordRegion(occupiedRegion.getId());
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const command = new CreateChordRegionCommand(normalizedStartBeat, timeSignature.numerator, 'C');
|
||||
KGCore.instance().executeCommand(command);
|
||||
refreshProjectState();
|
||||
|
||||
const createdRegion = command.getCreatedRegion();
|
||||
if (!createdRegion) {
|
||||
return;
|
||||
}
|
||||
|
||||
selectGlobalRegion(createdRegion.getId(), DEFAULT_REGION_CLICK_OPTIONS);
|
||||
setEditingChordRegionId(createdRegion.getId());
|
||||
} catch (error) {
|
||||
console.error('Error creating chord region:', error);
|
||||
}
|
||||
}, [beginEditingChordRegion, chordRegions, refreshProjectState, selectGlobalRegion, timeSignature.numerator]);
|
||||
|
||||
const createChordAtExactBeat = useCallback((requestedStartBeat: number) => {
|
||||
const normalizedStartBeat = Math.max(0, Math.round(requestedStartBeat));
|
||||
const occupiedRegion = chordRegions.find(region => (
|
||||
normalizedStartBeat > region.getStartFromBeat()
|
||||
&& normalizedStartBeat < region.getStartFromBeat() + region.getLength()
|
||||
));
|
||||
|
||||
try {
|
||||
const command = occupiedRegion
|
||||
? new InsertChordRegionAtBeatCommand(normalizedStartBeat, 'C')
|
||||
: new CreateChordRegionCommand(normalizedStartBeat, timeSignature.numerator, 'C');
|
||||
|
||||
KGCore.instance().executeCommand(command);
|
||||
refreshProjectState();
|
||||
|
||||
const createdRegion = command.getCreatedRegion();
|
||||
if (!createdRegion) {
|
||||
if (occupiedRegion) {
|
||||
selectGlobalRegion(occupiedRegion.getId(), DEFAULT_REGION_CLICK_OPTIONS);
|
||||
beginEditingChordRegion(occupiedRegion.getId());
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
selectGlobalRegion(createdRegion.getId(), DEFAULT_REGION_CLICK_OPTIONS);
|
||||
setEditingChordRegionId(createdRegion.getId());
|
||||
return createdRegion;
|
||||
} catch (error) {
|
||||
console.error('Error creating chord region at exact beat:', error);
|
||||
if (occupiedRegion) {
|
||||
selectGlobalRegion(occupiedRegion.getId(), DEFAULT_REGION_CLICK_OPTIONS);
|
||||
beginEditingChordRegion(occupiedRegion.getId());
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}, [beginEditingChordRegion, chordRegions, refreshProjectState, selectGlobalRegion, timeSignature.numerator]);
|
||||
|
||||
const createChordAtPlayheadBeat = useCallback(() => {
|
||||
createChordAtExactBeat(playheadPosition);
|
||||
}, [createChordAtExactBeat, playheadPosition]);
|
||||
|
||||
const navigateChordPopupByBar = useCallback((currentRegionId: string, direction: 'forward' | 'backward') => {
|
||||
const currentRegion = chordRegions.find(region => region.getId() === currentRegionId);
|
||||
if (!currentRegion) {
|
||||
return;
|
||||
}
|
||||
|
||||
const beatsPerBar = timeSignature.numerator;
|
||||
const currentStartBeat = currentRegion.getStartFromBeat();
|
||||
const currentBarBeat = Math.floor(currentStartBeat / beatsPerBar) * beatsPerBar;
|
||||
const targetBarBeat = direction === 'forward'
|
||||
? currentBarBeat + beatsPerBar
|
||||
: currentBarBeat - beatsPerBar;
|
||||
const songEndBeat = maxBars * beatsPerBar;
|
||||
if (targetBarBeat < 0 || targetBarBeat >= songEndBeat) {
|
||||
return;
|
||||
}
|
||||
|
||||
const sortedRegions = [...chordRegions].sort((left, right) => left.getStartFromBeat() - right.getStartFromBeat());
|
||||
const targetRegion = direction === 'forward'
|
||||
? sortedRegions.find(region => region.getStartFromBeat() > currentStartBeat && region.getStartFromBeat() <= targetBarBeat)
|
||||
: [...sortedRegions].reverse().find(region => region.getStartFromBeat() < currentStartBeat);
|
||||
|
||||
if (targetRegion) {
|
||||
selectGlobalRegion(targetRegion.getId(), DEFAULT_REGION_CLICK_OPTIONS);
|
||||
setEditingChordRegionId(targetRegion.getId());
|
||||
return;
|
||||
}
|
||||
|
||||
if (direction === 'forward') {
|
||||
createChordAtExactBeat(targetBarBeat);
|
||||
}
|
||||
}, [chordRegions, createChordAtExactBeat, maxBars, selectGlobalRegion, timeSignature.numerator]);
|
||||
|
||||
const moveGlobalChordRegion = useCallback((regionId: string, startBeat: number) => {
|
||||
try {
|
||||
KGCore.instance().executeCommand(new MoveGlobalRegionCommand(regionId, Math.round(startBeat)));
|
||||
refreshProjectState();
|
||||
} catch (error) {
|
||||
console.error('Error moving chord region:', error);
|
||||
}
|
||||
}, [refreshProjectState]);
|
||||
|
||||
const resizeGlobalChordRegion = useCallback((regionId: string, edge: 'start' | 'end', beat: number) => {
|
||||
try {
|
||||
KGCore.instance().executeCommand(new ResizeGlobalRegionCommand(regionId, edge, Math.round(beat)));
|
||||
refreshProjectState();
|
||||
} catch (error) {
|
||||
console.error('Error resizing chord region:', error);
|
||||
}
|
||||
}, [refreshProjectState]);
|
||||
|
||||
const updateChordRegion = useCallback((regionId: string, symbol: string) => {
|
||||
const region = findProjectRegionById(regionId);
|
||||
if (!(region instanceof KGChordRegion) || region.getSymbol() === symbol) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
KGCore.instance().executeCommand(new UpdateChordRegionCommand(regionId, symbol));
|
||||
refreshProjectState();
|
||||
} catch (error) {
|
||||
console.error('Error updating chord region:', error);
|
||||
}
|
||||
}, [findProjectRegionById, refreshProjectState]);
|
||||
|
||||
const deleteSelectedGlobalRegions = useCallback((): boolean => {
|
||||
const selectedGlobalRegionIds = selectedRegionIds.filter(regionId => isGlobalRegionId(regionId));
|
||||
if (selectedGlobalRegionIds.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
const signatureRegionIds = selectedGlobalRegionIds.filter(regionId => findProjectRegionById(regionId) instanceof KGKeySignatureRegion);
|
||||
const tempoRegionIds = selectedGlobalRegionIds.filter(regionId => findProjectRegionById(regionId) instanceof KGTempoRegion);
|
||||
const markerRegionIds = selectedGlobalRegionIds.filter(regionId => findProjectRegionById(regionId) instanceof KGMarkerRegion);
|
||||
|
||||
if (signatureRegionIds.length > 0 && markerRegionIds.length === 0 && tempoRegionIds.length === 0) {
|
||||
KGCore.instance().executeCommand(
|
||||
signatureRegionIds.length === 1
|
||||
? new DeleteKeySignatureRegionCommand(signatureRegionIds[0])
|
||||
: new DeleteMultipleKeySignatureRegionsCommand(signatureRegionIds)
|
||||
);
|
||||
} else if (tempoRegionIds.length > 0 && markerRegionIds.length === 0 && signatureRegionIds.length === 0) {
|
||||
KGCore.instance().executeCommand(
|
||||
tempoRegionIds.length === 1
|
||||
? new DeleteTempoRegionCommand(tempoRegionIds[0])
|
||||
: new DeleteMultipleTempoRegionsCommand(tempoRegionIds)
|
||||
);
|
||||
bumpAudioWaveformRedrawVersion();
|
||||
} else if (markerRegionIds.length > 0 && signatureRegionIds.length === 0) {
|
||||
KGCore.instance().executeCommand(new DeleteMultipleGlobalRegionsCommand(markerRegionIds));
|
||||
} else {
|
||||
KGCore.instance().executeCommand(new DeleteMultipleGlobalRegionsCommand(selectedGlobalRegionIds));
|
||||
}
|
||||
|
||||
if (editingGlobalRegionId && selectedGlobalRegionIds.includes(editingGlobalRegionId)) {
|
||||
setEditingGlobalRegionId(null);
|
||||
setEditingGlobalRegionText('');
|
||||
}
|
||||
if (editingKeySignatureRegionId && selectedGlobalRegionIds.includes(editingKeySignatureRegionId)) {
|
||||
setEditingKeySignatureRegionId(null);
|
||||
}
|
||||
if (editingTempoRegionId && selectedGlobalRegionIds.includes(editingTempoRegionId)) {
|
||||
setEditingTempoRegionId(null);
|
||||
setEditingTempoText('');
|
||||
}
|
||||
if (editingChordRegionId && selectedGlobalRegionIds.includes(editingChordRegionId)) {
|
||||
setEditingChordRegionId(null);
|
||||
}
|
||||
refreshProjectState();
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Error deleting global marker regions:', error);
|
||||
return false;
|
||||
}
|
||||
}, [
|
||||
bumpAudioWaveformRedrawVersion,
|
||||
editingChordRegionId,
|
||||
editingGlobalRegionId,
|
||||
editingKeySignatureRegionId,
|
||||
editingTempoRegionId,
|
||||
findProjectRegionById,
|
||||
isGlobalRegionId,
|
||||
refreshProjectState,
|
||||
selectedRegionIds,
|
||||
]);
|
||||
|
||||
const markerLaneProps: MarkerLaneProps = {
|
||||
markerRegions,
|
||||
maxBars,
|
||||
barWidthMultiplier,
|
||||
timeSignature,
|
||||
selectedRegionIds,
|
||||
editingRegionId: editingGlobalRegionId,
|
||||
editingText: editingGlobalRegionText,
|
||||
onEditingTextChange: setEditingGlobalRegionText,
|
||||
onCommitEdit: commitGlobalRegionEdit,
|
||||
onCancelEdit: () => {
|
||||
setEditingGlobalRegionId(null);
|
||||
setEditingGlobalRegionText('');
|
||||
},
|
||||
onBeginEdit: beginEditingGlobalRegion,
|
||||
onSelectRegion: selectGlobalRegion,
|
||||
onCreateAtBeat: createMarkerAtBeat,
|
||||
onMoveRegion: moveGlobalMarkerRegion,
|
||||
onResizeRegion: resizeGlobalMarkerRegion,
|
||||
};
|
||||
|
||||
const tempoLaneProps: TempoLaneProps = {
|
||||
tempoRegions,
|
||||
maxBars,
|
||||
barWidthMultiplier,
|
||||
selectedRegionIds,
|
||||
editingRegionId: editingTempoRegionId,
|
||||
editingText: editingTempoText,
|
||||
onEditingTextChange: setEditingTempoText,
|
||||
onCommitEdit: commitTempoRegionEdit,
|
||||
onCancelEdit: () => {
|
||||
setEditingTempoRegionId(null);
|
||||
setEditingTempoText('');
|
||||
},
|
||||
onBeginEdit: beginEditingTempoRegion,
|
||||
onSelectRegion: selectGlobalRegion,
|
||||
onCreateAtBar: createTempoAtBar,
|
||||
onResizeRegion: resizeTempoRegion,
|
||||
};
|
||||
|
||||
const keySignatureLaneProps: KeySignatureLaneProps = {
|
||||
signatureRegions,
|
||||
maxBars,
|
||||
barWidthMultiplier,
|
||||
timeSignature,
|
||||
selectedRegionIds,
|
||||
pickerRegionId: editingKeySignatureRegionId,
|
||||
onClosePicker: () => setEditingKeySignatureRegionId(null),
|
||||
onSelectRegion: selectGlobalRegion,
|
||||
onCreateAtBar: createKeySignatureAtBar,
|
||||
onResizeRegion: resizeKeySignatureRegion,
|
||||
onChangeKeySignature: updateKeySignatureRegion,
|
||||
onOpenPicker: beginEditingKeySignatureRegion,
|
||||
};
|
||||
|
||||
const chordLaneProps: ChordLaneProps = {
|
||||
chordRegions,
|
||||
maxBars,
|
||||
barWidthMultiplier,
|
||||
timeSignature,
|
||||
selectedRegionIds,
|
||||
popupRegionId: editingChordRegionId,
|
||||
onClosePopup: () => setEditingChordRegionId(null),
|
||||
onSelectRegion: selectGlobalRegion,
|
||||
onCreateAtBeat: createChordAtBeat,
|
||||
onMoveRegion: moveGlobalChordRegion,
|
||||
onResizeRegion: resizeGlobalChordRegion,
|
||||
onChangeChord: updateChordRegion,
|
||||
onOpenPopup: beginEditingChordRegion,
|
||||
onTabNavigate: navigateChordPopupByBar,
|
||||
};
|
||||
|
||||
return {
|
||||
deleteSelectedGlobalRegions,
|
||||
editingRegionIds: [
|
||||
editingGlobalRegionId,
|
||||
editingTempoRegionId,
|
||||
editingKeySignatureRegionId,
|
||||
editingChordRegionId,
|
||||
].filter((regionId): regionId is string => Boolean(regionId)),
|
||||
sectionProps: {
|
||||
onAddMarker: createMarkerAtPlayheadBar,
|
||||
onAddTempo: createTempoAtPlayheadBar,
|
||||
onAddKeySignature: createKeySignatureAtPlayheadBar,
|
||||
onAddChord: createChordAtPlayheadBeat,
|
||||
markerLaneProps,
|
||||
tempoLaneProps,
|
||||
keySignatureLaneProps,
|
||||
chordLaneProps,
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,765 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { KGCore } from '../core/KGCore';
|
||||
import { KGGlobalTrack } from '../core/global-track';
|
||||
import { KGTrack } from '../core/track/KGTrack';
|
||||
import { KGRegion } from '../core/region/KGRegion';
|
||||
import { KGGlobalRegion } from '../core/region/KGGlobalRegion';
|
||||
import { KGChordRegion } from '../core/region/KGChordRegion';
|
||||
import { KGKeySignatureRegion } from '../core/region/KGKeySignatureRegion';
|
||||
import { KGTempoRegion } from '../core/region/KGTempoRegion';
|
||||
import { KGMidiRegion } from '../core/region/KGMidiRegion';
|
||||
import { KGAudioRegion } from '../core/region/KGAudioRegion';
|
||||
import { KGMarkerRegion } from '../core/region/KGMarkerRegion';
|
||||
import type { RegionClickOptions, RegionUI } from '../components/interfaces';
|
||||
import { DEBUG_MODE } from '../constants';
|
||||
import { useProjectStore } from '../stores/projectStore';
|
||||
import { useRegionOperations } from './useRegionOperations';
|
||||
import { getAudioRegionDisplayLengthBeats } from '../util/globalTrackUtil';
|
||||
|
||||
const DEFAULT_REGION_CLICK_OPTIONS: RegionClickOptions = {
|
||||
shiftKey: false,
|
||||
metaKey: false,
|
||||
ctrlKey: false,
|
||||
};
|
||||
|
||||
interface UseMainContentRegionsParams {
|
||||
tracks: KGTrack[];
|
||||
globalTracks: KGGlobalTrack[];
|
||||
timeSignature: { numerator: number; denominator: number };
|
||||
selectedRegionIds: string[];
|
||||
clearAllSelections: () => void;
|
||||
setSelectedTrack: (trackId: string) => void;
|
||||
showPianoRoll: boolean;
|
||||
activeRegionId: string | null;
|
||||
setShowPianoRoll: (show: boolean) => void;
|
||||
setActiveRegionId: (regionId: string | null) => void;
|
||||
openMidiPianoRoll: (regionId: string) => void;
|
||||
openSpectrogramViewer: (regionId: string) => void;
|
||||
openHybridMode: (midiRegionId: string, audioRegionId: string) => void;
|
||||
pianoRollMode: 'midi-edit' | 'spectrogram' | 'hybrid';
|
||||
updateTrack: (track: KGTrack) => void;
|
||||
maxBars: number;
|
||||
}
|
||||
|
||||
interface MainContentSelectionState {
|
||||
selectedRegionId: string | null;
|
||||
findProjectRegionById: (regionId: string) => KGRegion | null;
|
||||
isGlobalRegionId: (regionId: string) => boolean;
|
||||
selectGlobalRegion: (regionId: string, options?: RegionClickOptions) => void;
|
||||
}
|
||||
|
||||
export interface UseMainContentRegionsResult {
|
||||
regions: RegionUI[];
|
||||
deleteSelectedRegions: () => boolean;
|
||||
selection: MainContentSelectionState;
|
||||
handleRegionCreated: (trackIndex: number, regionUI: RegionUI, midiRegion: KGMidiRegion) => void;
|
||||
handleExternalDropComplete: (trackIndex: number, regionUI: RegionUI) => void;
|
||||
handleRegionUpdated: (
|
||||
regionId: string,
|
||||
updates: Partial<RegionUI>,
|
||||
expectedModelUpdates?: { startBeat: number; length: number }
|
||||
) => void;
|
||||
handleRegionClick: (regionId: string, options?: RegionClickOptions) => void;
|
||||
handleRegionLassoSelection: (regionIds: string[], options?: RegionClickOptions) => void;
|
||||
handleRegionLassoCommit: () => void;
|
||||
handleEmptyMainContentClick: (event: React.MouseEvent<HTMLDivElement>) => void;
|
||||
handleOpenPianoRoll: (regionId: string) => void;
|
||||
handleOpenSpectrogram: (regionId: string) => void;
|
||||
handleOpenHybrid: (regionId: string) => void;
|
||||
}
|
||||
|
||||
export function useMainContentRegions({
|
||||
tracks,
|
||||
globalTracks,
|
||||
timeSignature,
|
||||
selectedRegionIds,
|
||||
clearAllSelections,
|
||||
setSelectedTrack,
|
||||
showPianoRoll,
|
||||
activeRegionId,
|
||||
setShowPianoRoll,
|
||||
setActiveRegionId,
|
||||
openMidiPianoRoll,
|
||||
openSpectrogramViewer,
|
||||
openHybridMode,
|
||||
pianoRollMode,
|
||||
updateTrack,
|
||||
maxBars,
|
||||
}: UseMainContentRegionsParams): UseMainContentRegionsResult {
|
||||
const [regions, setRegions] = useState<RegionUI[]>([]);
|
||||
const [selectedRegionId, setSelectedRegionId] = useState<string | null>(null);
|
||||
const pendingUpdates = useRef<Map<string, { trackId: string; regionId: string; startBeat: number; length: number }>>(new Map());
|
||||
const preventEmptyMainContentDeselectRef = useRef(false);
|
||||
const pendingAutoSelectionRegionIdRef = useRef<string | null>(null);
|
||||
|
||||
const { deleteSelectedRegions } = useRegionOperations({
|
||||
tracks,
|
||||
updateTrack,
|
||||
setRegions,
|
||||
selectedRegionId,
|
||||
setSelectedRegionId,
|
||||
showPianoRoll,
|
||||
setShowPianoRoll,
|
||||
activeRegionId,
|
||||
setActiveRegionId,
|
||||
});
|
||||
|
||||
const findProjectRegionById = useCallback((regionId: string): KGRegion | null => {
|
||||
for (const track of tracks) {
|
||||
const region = track.getRegions().find(candidate => candidate.getId() === regionId);
|
||||
if (region) {
|
||||
return region;
|
||||
}
|
||||
}
|
||||
|
||||
for (const globalTrack of globalTracks) {
|
||||
const region = globalTrack.getRegions().find(candidate => candidate.getId() === regionId);
|
||||
if (region) {
|
||||
return region;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}, [globalTracks, tracks]);
|
||||
|
||||
const isGlobalRegionId = useCallback((regionId: string) => {
|
||||
const region = findProjectRegionById(regionId);
|
||||
return region instanceof KGGlobalRegion;
|
||||
}, [findProjectRegionById]);
|
||||
|
||||
useEffect(() => {
|
||||
if (pendingUpdates.current.size === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const updates = new Map(pendingUpdates.current);
|
||||
pendingUpdates.current.clear();
|
||||
|
||||
updates.forEach(update => {
|
||||
const { trackId, regionId, startBeat, length } = update;
|
||||
const track = tracks.find(candidate => candidate.getId().toString() === trackId);
|
||||
if (!track) {
|
||||
return;
|
||||
}
|
||||
|
||||
const region = track.getRegions().find(candidate => candidate.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()}`);
|
||||
const success = region.getStartFromBeat() === startBeat && region.getLength() === length && region.getTrackId() === trackId;
|
||||
console.log(` Update successful: ${success}`);
|
||||
}
|
||||
});
|
||||
}, [tracks]);
|
||||
|
||||
useEffect(() => {
|
||||
const updatedRegions: RegionUI[] = [];
|
||||
|
||||
tracks.forEach(track => {
|
||||
const trackId = track.getId().toString();
|
||||
const trackIndex = track.getTrackIndex();
|
||||
|
||||
track.getRegions().forEach(region => {
|
||||
if (region instanceof KGMidiRegion || region instanceof KGAudioRegion) {
|
||||
const beatsPerBar = timeSignature.numerator;
|
||||
const barNumber = (region.getStartFromBeat() / beatsPerBar) + 1;
|
||||
const lengthBeats = region instanceof KGAudioRegion
|
||||
? getAudioRegionDisplayLengthBeats(KGCore.instance().getCurrentProject(), region)
|
||||
: region.getLength();
|
||||
const length = lengthBeats / beatsPerBar;
|
||||
|
||||
updatedRegions.push({
|
||||
id: region.getId(),
|
||||
trackId,
|
||||
trackIndex,
|
||||
barNumber,
|
||||
length,
|
||||
name: region.getName(),
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
setRegions(updatedRegions);
|
||||
}, [globalTracks, timeSignature, tracks]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!showPianoRoll || !activeRegionId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const activeRegionStillExists = tracks.some(track =>
|
||||
track.getRegions().some(region => region.getId() === activeRegionId)
|
||||
);
|
||||
|
||||
if (!activeRegionStillExists) {
|
||||
setShowPianoRoll(false);
|
||||
setActiveRegionId(null);
|
||||
}
|
||||
}, [tracks, showPianoRoll, activeRegionId, setShowPianoRoll, setActiveRegionId]);
|
||||
|
||||
const applyRegionSelection = useCallback((orderedSelectionIds: string[]) => {
|
||||
const core = KGCore.instance();
|
||||
const allRegions = [
|
||||
...tracks.flatMap(projectTrack => projectTrack.getRegions()),
|
||||
...globalTracks.flatMap(globalTrack => globalTrack.getRegions()),
|
||||
];
|
||||
|
||||
allRegions.forEach(projectRegion => projectRegion.deselect());
|
||||
clearAllSelections();
|
||||
|
||||
const selectedRegions: KGRegion[] = orderedSelectionIds
|
||||
.map(selectedId => allRegions.find(region => region.getId() === selectedId) ?? null)
|
||||
.filter((selectedRegion): selectedRegion is KGRegion => selectedRegion !== null);
|
||||
|
||||
selectedRegions.forEach(selectedRegion => selectedRegion.select());
|
||||
|
||||
if (selectedRegions.length > 0) {
|
||||
core.addSelectedItems(selectedRegions);
|
||||
}
|
||||
|
||||
const lastSelectedRegion = selectedRegions.length > 0
|
||||
? selectedRegions[selectedRegions.length - 1]
|
||||
: null;
|
||||
const lastSelectedRegionId = lastSelectedRegion?.getId() ?? null;
|
||||
|
||||
setSelectedRegionId(lastSelectedRegionId);
|
||||
if (lastSelectedRegionId && lastSelectedRegion && !(lastSelectedRegion instanceof KGGlobalRegion)) {
|
||||
setActiveRegionId(lastSelectedRegionId);
|
||||
}
|
||||
|
||||
if (DEBUG_MODE.MAIN_CONTENT) {
|
||||
console.log(`Selected regions: ${selectedRegions.map(selectedRegion => selectedRegion.getId()).join(', ')}`);
|
||||
}
|
||||
|
||||
if (!showPianoRoll || !lastSelectedRegionId || !lastSelectedRegion || lastSelectedRegion instanceof KGGlobalRegion) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (lastSelectedRegion instanceof KGAudioRegion) {
|
||||
openSpectrogramViewer(lastSelectedRegionId);
|
||||
} else if (lastSelectedRegion instanceof KGMidiRegion) {
|
||||
openMidiPianoRoll(lastSelectedRegionId);
|
||||
}
|
||||
}, [
|
||||
clearAllSelections,
|
||||
globalTracks,
|
||||
openMidiPianoRoll,
|
||||
openSpectrogramViewer,
|
||||
setActiveRegionId,
|
||||
showPianoRoll,
|
||||
tracks,
|
||||
]);
|
||||
|
||||
const isAdditiveSelection = useCallback((options: RegionClickOptions) => options.metaKey || options.ctrlKey, []);
|
||||
|
||||
const getOrderedTrackRegionIds = useCallback((trackId: string) => (
|
||||
regions
|
||||
.filter(region => region.trackId === trackId)
|
||||
.sort((left, right) => {
|
||||
if (left.barNumber !== right.barNumber) {
|
||||
return left.barNumber - right.barNumber;
|
||||
}
|
||||
|
||||
if (left.length !== right.length) {
|
||||
return left.length - right.length;
|
||||
}
|
||||
|
||||
return left.id.localeCompare(right.id);
|
||||
})
|
||||
.map(region => region.id)
|
||||
), [regions]);
|
||||
|
||||
const getOrderedGlobalRegionIds = useCallback((regionType: 'marker' | 'tempo' | 'signature' | 'chord') => (
|
||||
globalTracks
|
||||
.flatMap(globalTrack => globalTrack.getRegions())
|
||||
.filter((region): region is KGGlobalRegion => {
|
||||
if (regionType === 'tempo') {
|
||||
return region instanceof KGTempoRegion;
|
||||
}
|
||||
|
||||
if (regionType === 'signature') {
|
||||
return region instanceof KGKeySignatureRegion;
|
||||
}
|
||||
|
||||
if (regionType === 'chord') {
|
||||
return region instanceof KGChordRegion;
|
||||
}
|
||||
|
||||
return region instanceof KGMarkerRegion;
|
||||
})
|
||||
.sort((left, right) => {
|
||||
const leftStart = left instanceof KGTempoRegion || left instanceof KGKeySignatureRegion
|
||||
? left.getStartBar()
|
||||
: Math.round(left.getStartFromBeat() / timeSignature.numerator);
|
||||
const rightStart = right instanceof KGTempoRegion || right instanceof KGKeySignatureRegion
|
||||
? right.getStartBar()
|
||||
: Math.round(right.getStartFromBeat() / timeSignature.numerator);
|
||||
|
||||
if (leftStart !== rightStart) {
|
||||
return leftStart - rightStart;
|
||||
}
|
||||
|
||||
const leftLength = left instanceof KGTempoRegion || left instanceof KGKeySignatureRegion
|
||||
? left.getLengthBars()
|
||||
: left.getLength();
|
||||
const rightLength = right instanceof KGTempoRegion || right instanceof KGKeySignatureRegion
|
||||
? right.getLengthBars()
|
||||
: right.getLength();
|
||||
|
||||
if (leftLength !== rightLength) {
|
||||
return leftLength - rightLength;
|
||||
}
|
||||
|
||||
return left.getId().localeCompare(right.getId());
|
||||
})
|
||||
.map(region => region.getId())
|
||||
), [globalTracks, timeSignature.numerator]);
|
||||
|
||||
const appendPrimarySelection = useCallback((orderedIds: string[], primaryRegionId: string) => {
|
||||
const deduped = orderedIds.filter(id => id !== primaryRegionId);
|
||||
return [...deduped, primaryRegionId];
|
||||
}, []);
|
||||
|
||||
const buildSameTrackRangeSelection = useCallback((
|
||||
existingRegularSelectionIds: string[],
|
||||
anchorRegionId: string,
|
||||
targetRegionId: string,
|
||||
orderedTrackRegionIds: string[]
|
||||
) => {
|
||||
const anchorIndex = orderedTrackRegionIds.indexOf(anchorRegionId);
|
||||
const targetIndex = orderedTrackRegionIds.indexOf(targetRegionId);
|
||||
if (anchorIndex === -1 || targetIndex === -1) {
|
||||
return [targetRegionId];
|
||||
}
|
||||
|
||||
const [startIndex, endIndex] = anchorIndex <= targetIndex
|
||||
? [anchorIndex, targetIndex]
|
||||
: [targetIndex, anchorIndex];
|
||||
const rangeIds = orderedTrackRegionIds.slice(startIndex, endIndex + 1);
|
||||
const rangeIdSet = new Set(rangeIds);
|
||||
const preservedOtherTrackIds = existingRegularSelectionIds.filter(selectedId => !rangeIdSet.has(selectedId));
|
||||
return appendPrimarySelection([...preservedOtherTrackIds, ...rangeIds], targetRegionId);
|
||||
}, [appendPrimarySelection]);
|
||||
|
||||
const buildSameLaneRangeSelection = useCallback((
|
||||
existingGlobalSelectionIds: string[],
|
||||
anchorRegionId: string,
|
||||
targetRegionId: string,
|
||||
orderedLaneRegionIds: string[]
|
||||
) => {
|
||||
const anchorIndex = orderedLaneRegionIds.indexOf(anchorRegionId);
|
||||
const targetIndex = orderedLaneRegionIds.indexOf(targetRegionId);
|
||||
if (anchorIndex === -1 || targetIndex === -1) {
|
||||
return [targetRegionId];
|
||||
}
|
||||
|
||||
const [startIndex, endIndex] = anchorIndex <= targetIndex
|
||||
? [anchorIndex, targetIndex]
|
||||
: [targetIndex, anchorIndex];
|
||||
const rangeIds = orderedLaneRegionIds.slice(startIndex, endIndex + 1);
|
||||
const laneIdSet = new Set(orderedLaneRegionIds);
|
||||
const preservedOtherLaneIds = existingGlobalSelectionIds.filter(selectedId => !laneIdSet.has(selectedId));
|
||||
return appendPrimarySelection([...preservedOtherLaneIds, ...rangeIds], targetRegionId);
|
||||
}, [appendPrimarySelection]);
|
||||
|
||||
const getGlobalRegionLaneType = useCallback((region: KGGlobalRegion): 'marker' | 'tempo' | 'signature' | 'chord' => {
|
||||
if (region instanceof KGTempoRegion) {
|
||||
return 'tempo';
|
||||
}
|
||||
|
||||
if (region instanceof KGKeySignatureRegion) {
|
||||
return 'signature';
|
||||
}
|
||||
|
||||
if (region instanceof KGChordRegion) {
|
||||
return 'chord';
|
||||
}
|
||||
|
||||
return 'marker';
|
||||
}, []);
|
||||
|
||||
const selectRegion = useCallback((
|
||||
regionId: string,
|
||||
options: RegionClickOptions = DEFAULT_REGION_CLICK_OPTIONS,
|
||||
regionsToSearch?: RegionUI[]
|
||||
) => {
|
||||
const regionsToUse = regionsToSearch || regions;
|
||||
const region = regionsToUse.find(candidate => candidate.id === regionId);
|
||||
if (!region) {
|
||||
if (DEBUG_MODE.MAIN_CONTENT) {
|
||||
console.log(`Region not found in UI state: ${regionId}`);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const track = tracks.find(candidate => candidate.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(candidate => candidate.getId() === regionId);
|
||||
if (!coreRegion) {
|
||||
if (DEBUG_MODE.MAIN_CONTENT) {
|
||||
console.log(`Region not found in track model: ${regionId}`);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const regularSelectedRegionIds = selectedRegionIds.filter(selectedId => !isGlobalRegionId(selectedId));
|
||||
const additiveSelection = isAdditiveSelection(options);
|
||||
let orderedSelection: string[];
|
||||
|
||||
if (additiveSelection) {
|
||||
orderedSelection = regularSelectedRegionIds.includes(regionId)
|
||||
? regularSelectedRegionIds.filter(id => id !== regionId)
|
||||
: appendPrimarySelection([...regularSelectedRegionIds, regionId], regionId);
|
||||
} else if (options.shiftKey) {
|
||||
const sameTrackSelectedIds = regularSelectedRegionIds.filter(selectedId => {
|
||||
const selectedRegion = regionsToUse.find(candidate => candidate.id === selectedId);
|
||||
return selectedRegion?.trackId === region.trackId;
|
||||
});
|
||||
const anchorRegionId = [...sameTrackSelectedIds].reverse().find(selectedId => selectedId !== regionId) ?? null;
|
||||
|
||||
if (!anchorRegionId) {
|
||||
orderedSelection = [regionId];
|
||||
} else {
|
||||
orderedSelection = buildSameTrackRangeSelection(
|
||||
regularSelectedRegionIds,
|
||||
anchorRegionId,
|
||||
regionId,
|
||||
getOrderedTrackRegionIds(region.trackId)
|
||||
);
|
||||
}
|
||||
} else {
|
||||
orderedSelection = [regionId];
|
||||
}
|
||||
|
||||
applyRegionSelection(orderedSelection);
|
||||
}, [
|
||||
appendPrimarySelection,
|
||||
applyRegionSelection,
|
||||
buildSameTrackRangeSelection,
|
||||
getOrderedTrackRegionIds,
|
||||
isAdditiveSelection,
|
||||
isGlobalRegionId,
|
||||
regions,
|
||||
selectedRegionIds,
|
||||
tracks,
|
||||
]);
|
||||
|
||||
const selectGlobalRegion = useCallback((regionId: string, options: RegionClickOptions = DEFAULT_REGION_CLICK_OPTIONS) => {
|
||||
const globalSelectedRegionIds = selectedRegionIds.filter(selectedId => isGlobalRegionId(selectedId));
|
||||
const globalRegion = findProjectRegionById(regionId);
|
||||
if (!(globalRegion instanceof KGGlobalRegion)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const targetLaneType = getGlobalRegionLaneType(globalRegion);
|
||||
const sameLaneSelectedRegionIds = globalSelectedRegionIds.filter(selectedId => {
|
||||
const selectedRegion = findProjectRegionById(selectedId);
|
||||
return selectedRegion instanceof KGGlobalRegion && getGlobalRegionLaneType(selectedRegion) === targetLaneType;
|
||||
});
|
||||
|
||||
const additiveSelection = isAdditiveSelection(options);
|
||||
let orderedSelection: string[];
|
||||
|
||||
if (additiveSelection) {
|
||||
orderedSelection = sameLaneSelectedRegionIds.includes(regionId)
|
||||
? sameLaneSelectedRegionIds.filter(id => id !== regionId)
|
||||
: appendPrimarySelection([...sameLaneSelectedRegionIds, regionId], regionId);
|
||||
} else if (options.shiftKey) {
|
||||
const orderedLaneRegionIds = getOrderedGlobalRegionIds(targetLaneType);
|
||||
const laneRegionIdSet = new Set(orderedLaneRegionIds);
|
||||
const sameLaneSelectedIds = sameLaneSelectedRegionIds.filter(selectedId => laneRegionIdSet.has(selectedId));
|
||||
const anchorRegionId = [...sameLaneSelectedIds].reverse().find(selectedId => selectedId !== regionId) ?? null;
|
||||
|
||||
if (!anchorRegionId) {
|
||||
orderedSelection = [regionId];
|
||||
} else {
|
||||
orderedSelection = buildSameLaneRangeSelection(
|
||||
sameLaneSelectedRegionIds,
|
||||
anchorRegionId,
|
||||
regionId,
|
||||
orderedLaneRegionIds
|
||||
);
|
||||
}
|
||||
} else {
|
||||
orderedSelection = [regionId];
|
||||
}
|
||||
|
||||
applyRegionSelection(orderedSelection);
|
||||
}, [
|
||||
appendPrimarySelection,
|
||||
applyRegionSelection,
|
||||
buildSameLaneRangeSelection,
|
||||
findProjectRegionById,
|
||||
getGlobalRegionLaneType,
|
||||
getOrderedGlobalRegionIds,
|
||||
isAdditiveSelection,
|
||||
isGlobalRegionId,
|
||||
selectedRegionIds,
|
||||
]);
|
||||
|
||||
const handleRegionLassoSelection = useCallback((regionIds: string[], options: RegionClickOptions = DEFAULT_REGION_CLICK_OPTIONS) => {
|
||||
const orderedRegionIds = regionIds.filter(regionId => regions.some(region => region.id === regionId));
|
||||
const regularSelectedRegionIds = selectedRegionIds.filter(selectedId => !isGlobalRegionId(selectedId));
|
||||
const additiveSelection = isAdditiveSelection(options);
|
||||
const orderedSelection = additiveSelection
|
||||
? orderedRegionIds.reduce<string[]>((nextSelection, regionId) => {
|
||||
if (nextSelection.includes(regionId)) {
|
||||
return nextSelection.filter(id => id !== regionId);
|
||||
}
|
||||
return appendPrimarySelection([...nextSelection, regionId], regionId);
|
||||
}, [...regularSelectedRegionIds])
|
||||
: orderedRegionIds;
|
||||
|
||||
applyRegionSelection(orderedSelection);
|
||||
}, [appendPrimarySelection, applyRegionSelection, isAdditiveSelection, isGlobalRegionId, regions, selectedRegionIds]);
|
||||
|
||||
const handleEmptyMainContentClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (event.target !== event.currentTarget) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (preventEmptyMainContentDeselectRef.current) {
|
||||
preventEmptyMainContentDeselectRef.current = false;
|
||||
return;
|
||||
}
|
||||
|
||||
handleRegionLassoSelection([], DEFAULT_REGION_CLICK_OPTIONS);
|
||||
}, [handleRegionLassoSelection]);
|
||||
|
||||
const handleRegionLassoCommit = useCallback(() => {
|
||||
preventEmptyMainContentDeselectRef.current = true;
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const pendingRegionId = pendingAutoSelectionRegionIdRef.current;
|
||||
if (!pendingRegionId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const regionExists = regions.some(region => region.id === pendingRegionId);
|
||||
if (!regionExists) {
|
||||
return;
|
||||
}
|
||||
|
||||
pendingAutoSelectionRegionIdRef.current = null;
|
||||
selectRegion(pendingRegionId, DEFAULT_REGION_CLICK_OPTIONS, regions);
|
||||
}, [regions, selectRegion]);
|
||||
|
||||
const handleRegionCreated = useCallback((trackIndex: number, regionUI: RegionUI) => {
|
||||
const track = tracks[trackIndex];
|
||||
updateTrack(track);
|
||||
setSelectedTrack(track.getId().toString());
|
||||
|
||||
pendingAutoSelectionRegionIdRef.current = regionUI.id;
|
||||
setRegions(previousRegions => [...previousRegions, regionUI]);
|
||||
}, [setSelectedTrack, tracks, updateTrack]);
|
||||
|
||||
const handleExternalDropComplete = useCallback((trackIndex: number, regionUI: RegionUI) => {
|
||||
const track = tracks[trackIndex];
|
||||
if (!track) {
|
||||
return;
|
||||
}
|
||||
|
||||
updateTrack(track);
|
||||
setSelectedTrack(track.getId().toString());
|
||||
|
||||
const coreMaxBars = KGCore.instance().getCurrentProject().getMaxBars();
|
||||
if (coreMaxBars > maxBars) {
|
||||
useProjectStore.setState({ maxBars: coreMaxBars });
|
||||
document.documentElement.style.setProperty('--max-number-of-bars', coreMaxBars.toString());
|
||||
}
|
||||
|
||||
pendingAutoSelectionRegionIdRef.current = regionUI.id;
|
||||
setRegions(previousRegions => [...previousRegions, regionUI]);
|
||||
}, [maxBars, setSelectedTrack, tracks, updateTrack]);
|
||||
|
||||
const handleRegionUpdated = useCallback((
|
||||
regionId: string,
|
||||
updates: Partial<RegionUI>,
|
||||
expectedModelUpdates?: { startBeat: number; length: number }
|
||||
) => {
|
||||
if (DEBUG_MODE.MAIN_CONTENT) {
|
||||
console.log(`Updating region ${regionId} with:`, updates);
|
||||
}
|
||||
|
||||
selectRegion(regionId);
|
||||
|
||||
const updatedRegion = regions.find(region => region.id === regionId);
|
||||
if (updatedRegion) {
|
||||
const trackId = updates.trackId || updatedRegion.trackId;
|
||||
const track = tracks.find(candidate => candidate.getId().toString() === trackId);
|
||||
if (track) {
|
||||
setSelectedTrack(track.getId().toString());
|
||||
}
|
||||
}
|
||||
|
||||
setRegions(previousRegions => previousRegions.map(region => (
|
||||
region.id === regionId ? { ...region, ...updates } : region
|
||||
)));
|
||||
|
||||
const region = regions.find(candidate => candidate.id === regionId);
|
||||
if (!region) {
|
||||
return;
|
||||
}
|
||||
|
||||
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}`);
|
||||
}
|
||||
|
||||
const originalTrack = tracks.find(candidate => candidate.getId().toString() === region.trackId);
|
||||
const targetTrack = tracks.find(candidate => candidate.getId().toString() === updates.trackId);
|
||||
|
||||
if (originalTrack && targetTrack) {
|
||||
setSelectedTrack(targetTrack.getId().toString());
|
||||
updateTrack(originalTrack);
|
||||
updateTrack(targetTrack);
|
||||
|
||||
if (expectedModelUpdates) {
|
||||
const key = `${updates.trackId}-${regionId}-${Date.now()}`;
|
||||
pendingUpdates.current.set(key, {
|
||||
trackId: updates.trackId,
|
||||
regionId,
|
||||
startBeat: expectedModelUpdates.startBeat,
|
||||
length: expectedModelUpdates.length,
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const track = tracks.find(candidate => candidate.getId().toString() === region.trackId);
|
||||
if (track) {
|
||||
const trackRegions = track.getRegions();
|
||||
const midiRegion = trackRegions.find(candidate => candidate.getId() === regionId) as KGMidiRegion | undefined;
|
||||
|
||||
if (midiRegion) {
|
||||
if (expectedModelUpdates) {
|
||||
if (DEBUG_MODE.MAIN_CONTENT) {
|
||||
console.log(`MainContent - Expected model updates: startBeat=${expectedModelUpdates.startBeat}, length=${expectedModelUpdates.length}`);
|
||||
}
|
||||
|
||||
const key = `${track.getId()}-${regionId}-${Date.now()}`;
|
||||
pendingUpdates.current.set(key, {
|
||||
trackId: track.getId().toString(),
|
||||
regionId,
|
||||
startBeat: expectedModelUpdates.startBeat,
|
||||
length: expectedModelUpdates.length,
|
||||
});
|
||||
} else {
|
||||
const startBeat = midiRegion.getStartFromBeat();
|
||||
const length = midiRegion.getLength();
|
||||
|
||||
if (DEBUG_MODE.MAIN_CONTENT) {
|
||||
console.log(`MainContent - Region before store update: startBeat=${startBeat}, length=${length}`);
|
||||
}
|
||||
|
||||
const key = `${track.getId()}-${regionId}-${Date.now()}`;
|
||||
pendingUpdates.current.set(key, {
|
||||
trackId: track.getId().toString(),
|
||||
regionId,
|
||||
startBeat,
|
||||
length,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
updateTrack(track);
|
||||
}
|
||||
}
|
||||
|
||||
if (showPianoRoll && activeRegionId === regionId) {
|
||||
setActiveRegionId(regionId);
|
||||
|
||||
if (DEBUG_MODE.MAIN_CONTENT) {
|
||||
console.log(`Updated region ${regionId} set as active region in piano roll`);
|
||||
}
|
||||
}
|
||||
}, [
|
||||
activeRegionId,
|
||||
regions,
|
||||
selectRegion,
|
||||
setActiveRegionId,
|
||||
setSelectedTrack,
|
||||
showPianoRoll,
|
||||
tracks,
|
||||
updateTrack,
|
||||
]);
|
||||
|
||||
const handleRegionClick = useCallback((regionId: string, options: RegionClickOptions = DEFAULT_REGION_CLICK_OPTIONS) => {
|
||||
if (DEBUG_MODE.MAIN_CONTENT) {
|
||||
console.log(`Region clicked in MainContent (selection only): ${regionId}`);
|
||||
}
|
||||
|
||||
selectRegion(regionId, options);
|
||||
|
||||
const region = regions.find(candidate => candidate.id === regionId);
|
||||
if (!region) {
|
||||
return;
|
||||
}
|
||||
|
||||
const track = tracks.find(candidate => candidate.getId().toString() === region.trackId);
|
||||
if (!track) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSelectedTrack(track.getId().toString());
|
||||
}, [regions, selectRegion, setSelectedTrack, tracks]);
|
||||
|
||||
const handleOpenPianoRoll = useCallback((regionId: string) => {
|
||||
const project = KGCore.instance().getCurrentProject();
|
||||
for (const track of project.getTracks()) {
|
||||
const region = track.getRegions().find(candidate => candidate.getId() === regionId);
|
||||
if (region && region.getCurrentType() === 'KGAudioRegion') {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (DEBUG_MODE.MAIN_CONTENT) {
|
||||
console.log(`Open piano roll via pencil for region: ${regionId}`);
|
||||
}
|
||||
|
||||
handleRegionClick(regionId, DEFAULT_REGION_CLICK_OPTIONS);
|
||||
openMidiPianoRoll(regionId);
|
||||
}, [handleRegionClick, openMidiPianoRoll]);
|
||||
|
||||
const handleOpenSpectrogram = useCallback((regionId: string) => {
|
||||
handleRegionClick(regionId, DEFAULT_REGION_CLICK_OPTIONS);
|
||||
openSpectrogramViewer(regionId);
|
||||
}, [handleRegionClick, openSpectrogramViewer]);
|
||||
|
||||
const handleOpenHybrid = useCallback((regionId: string) => {
|
||||
if (pianoRollMode === 'midi-edit' && activeRegionId) {
|
||||
openHybridMode(activeRegionId, regionId);
|
||||
} else if (pianoRollMode === 'spectrogram' && activeRegionId) {
|
||||
openHybridMode(regionId, activeRegionId);
|
||||
}
|
||||
}, [activeRegionId, openHybridMode, pianoRollMode]);
|
||||
|
||||
return {
|
||||
regions,
|
||||
deleteSelectedRegions,
|
||||
selection: {
|
||||
selectedRegionId,
|
||||
findProjectRegionById,
|
||||
isGlobalRegionId,
|
||||
selectGlobalRegion,
|
||||
},
|
||||
handleRegionCreated,
|
||||
handleExternalDropComplete,
|
||||
handleRegionUpdated,
|
||||
handleRegionClick,
|
||||
handleRegionLassoSelection,
|
||||
handleRegionLassoCommit,
|
||||
handleEmptyMainContentClick,
|
||||
handleOpenPianoRoll,
|
||||
handleOpenSpectrogram,
|
||||
handleOpenHybrid,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,383 @@
|
||||
import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
|
||||
import { KGGlobalRegion } from '../core/region/KGGlobalRegion';
|
||||
import { KGKeySignatureRegion } from '../core/region/KGKeySignatureRegion';
|
||||
import { KGTempoRegion } from '../core/region/KGTempoRegion';
|
||||
import { KGMainContentState } from '../core/state/KGMainContentState';
|
||||
import { BAR_NUMBERS_CONSTANTS, DEBUG_MODE, TOOLBAR_CONSTANTS } from '../constants';
|
||||
import { ChangeLoopSettingsCommand } from '../core/commands';
|
||||
import { KGCore } from '../core/KGCore';
|
||||
import { useProjectStore } from '../stores/projectStore';
|
||||
|
||||
interface UseMainContentViewportParams {
|
||||
barWidthMultiplier: number;
|
||||
timeSignature: { numerator: number; denominator: number };
|
||||
isPlaying: boolean;
|
||||
autoScrollEnabled: boolean;
|
||||
playheadPosition: number;
|
||||
mainContentScrollRequest: number | null;
|
||||
maxBars: number;
|
||||
isLooping: boolean;
|
||||
loopingRange: [number, number];
|
||||
setPlayheadPosition: (beatPosition: number) => void;
|
||||
requestPianoRollScroll: (beatPosition: number) => void;
|
||||
editingRegionIds: string[];
|
||||
findProjectRegionById: (regionId: string) => KGGlobalRegion | import('../core/region/KGRegion').KGRegion | null;
|
||||
}
|
||||
|
||||
export interface UseMainContentViewportResult {
|
||||
mainContentRef: React.RefObject<HTMLDivElement | null>;
|
||||
barNumbersRef: React.RefObject<HTMLDivElement | null>;
|
||||
handleBarNumbersMouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;
|
||||
isBarInLoopRange: (barIndex: number) => boolean;
|
||||
}
|
||||
|
||||
export function useMainContentViewport({
|
||||
barWidthMultiplier,
|
||||
timeSignature,
|
||||
isPlaying,
|
||||
autoScrollEnabled,
|
||||
playheadPosition,
|
||||
mainContentScrollRequest,
|
||||
maxBars,
|
||||
isLooping,
|
||||
loopingRange,
|
||||
setPlayheadPosition,
|
||||
requestPianoRollScroll,
|
||||
editingRegionIds,
|
||||
findProjectRegionById,
|
||||
}: UseMainContentViewportParams): UseMainContentViewportResult {
|
||||
const mainContentRef = useRef<HTMLDivElement | null>(null);
|
||||
const expectedScrollLeftRef = useRef<number>(-1);
|
||||
const isPlayingRef = useRef(false);
|
||||
const previousBarWidthMultiplierRef = useRef(barWidthMultiplier);
|
||||
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);
|
||||
|
||||
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'),
|
||||
10
|
||||
) || 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]);
|
||||
|
||||
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);
|
||||
}, []);
|
||||
|
||||
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'),
|
||||
10
|
||||
) || 40;
|
||||
const playheadPixel = barPosition * barWidth;
|
||||
const infoWidth = parseInt(
|
||||
getComputedStyle(document.documentElement).getPropertyValue('--track-info-panel-width'),
|
||||
10
|
||||
) || 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;
|
||||
}, [autoScrollEnabled, isPlaying, playheadPosition, timeSignature]);
|
||||
|
||||
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'),
|
||||
10
|
||||
) || 40;
|
||||
const playheadPixel = barPosition * barWidth;
|
||||
const infoWidth = parseInt(
|
||||
getComputedStyle(document.documentElement).getPropertyValue('--track-info-panel-width'),
|
||||
10
|
||||
) || 200;
|
||||
const targetScrollLeft = playheadPixel - (container.clientWidth - infoWidth) / 2;
|
||||
const clampedScrollLeft = Math.max(0, Math.min(targetScrollLeft, container.scrollWidth - container.clientWidth));
|
||||
|
||||
container.scrollLeft = clampedScrollLeft;
|
||||
useProjectStore.setState({ mainContentScrollRequest: null });
|
||||
}, [mainContentScrollRequest, timeSignature]);
|
||||
|
||||
useEffect(() => {
|
||||
const editingRegionId = editingRegionIds[0] ?? null;
|
||||
if (!editingRegionId) {
|
||||
return;
|
||||
}
|
||||
|
||||
const container = mainContentRef.current;
|
||||
if (!container) {
|
||||
return;
|
||||
}
|
||||
|
||||
const editingRegion = findProjectRegionById(editingRegionId);
|
||||
if (!(editingRegion instanceof KGGlobalRegion)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const barWidth = TOOLBAR_CONSTANTS.BASE_BAR_WIDTH * barWidthMultiplier;
|
||||
const leftInset = (parseInt(
|
||||
getComputedStyle(document.documentElement).getPropertyValue('--track-info-panel-width'),
|
||||
10
|
||||
) || 200) + 12;
|
||||
const regionStartBeat = editingRegion instanceof KGTempoRegion || editingRegion instanceof KGKeySignatureRegion
|
||||
? editingRegion.getStartBar() * timeSignature.numerator
|
||||
: editingRegion.getStartFromBeat();
|
||||
const regionStartPixel = (regionStartBeat / timeSignature.numerator) * barWidth;
|
||||
const minimumVisiblePixel = container.scrollLeft + leftInset;
|
||||
|
||||
if (regionStartPixel >= minimumVisiblePixel) {
|
||||
return;
|
||||
}
|
||||
|
||||
const targetScrollLeft = Math.max(0, regionStartPixel - leftInset);
|
||||
requestAnimationFrame(() => {
|
||||
if (mainContentRef.current) {
|
||||
mainContentRef.current.scrollLeft = targetScrollLeft;
|
||||
}
|
||||
});
|
||||
}, [barWidthMultiplier, editingRegionIds, findProjectRegionById, timeSignature.numerator]);
|
||||
|
||||
const calculatePlayheadFromMouse = useCallback((clientX: number): number | null => {
|
||||
if (!barNumbersRef.current) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const rect = barNumbersRef.current.getBoundingClientRect();
|
||||
const relativeX = clientX - rect.left;
|
||||
const barWidth = parseInt(
|
||||
getComputedStyle(document.documentElement).getPropertyValue('--track-grid-bar-width'),
|
||||
10
|
||||
) || 40;
|
||||
const snap = KGMainContentState.instance().isSnappingEnabled();
|
||||
const barIndex = snap ? Math.round(relativeX / barWidth) : relativeX / barWidth;
|
||||
const clampedBarIndex = Math.max(0, barIndex);
|
||||
return clampedBarIndex * timeSignature.numerator;
|
||||
}, [timeSignature]);
|
||||
|
||||
const calculateBarIndexFromMouse = useCallback((clientX: number): number | null => {
|
||||
if (!barNumbersRef.current) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const rect = barNumbersRef.current.getBoundingClientRect();
|
||||
const relativeX = clientX - rect.left;
|
||||
const barWidth = parseInt(
|
||||
getComputedStyle(document.documentElement).getPropertyValue('--track-grid-bar-width'),
|
||||
10
|
||||
) || 40;
|
||||
const barIndex = Math.floor(relativeX / barWidth);
|
||||
return Math.max(0, Math.min(barIndex, maxBars - 1));
|
||||
}, [maxBars]);
|
||||
|
||||
const handleBarNumbersMouseDown = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (event.button !== 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const startBarIndex = calculateBarIndexFromMouse(event.clientX);
|
||||
if (startBarIndex === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
isLoopDraggingRef.current = true;
|
||||
loopDragStartBarRef.current = startBarIndex;
|
||||
loopDragStartXRef.current = event.clientX;
|
||||
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})`);
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
}, [calculateBarIndexFromMouse, isLooping, loopingRange]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleMouseMove = (event: MouseEvent) => {
|
||||
if (!isLoopDraggingRef.current) {
|
||||
return;
|
||||
}
|
||||
if (loopDragStartBarRef.current === null || loopDragStartXRef.current === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const distanceMoved = Math.abs(event.clientX - loopDragStartXRef.current);
|
||||
if (distanceMoved < BAR_NUMBERS_CONSTANTS.DRAG_THRESHOLD) {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentBarIndex = calculateBarIndexFromMouse(event.clientX);
|
||||
if (currentBarIndex === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const startBar = loopDragStartBarRef.current;
|
||||
const loopStart = Math.min(startBar, currentBarIndex);
|
||||
const loopEnd = Math.max(startBar, currentBarIndex);
|
||||
const newLoopRange: [number, number] = [loopStart, loopEnd];
|
||||
|
||||
const project = KGCore.instance().getCurrentProject();
|
||||
project.setLoopingRange(newLoopRange);
|
||||
project.setIsLooping(true);
|
||||
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 = (event: MouseEvent) => {
|
||||
if (!isLoopDraggingRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (loopDragStartXRef.current !== null) {
|
||||
const distanceMoved = Math.abs(event.clientX - loopDragStartXRef.current);
|
||||
|
||||
if (distanceMoved >= BAR_NUMBERS_CONSTANTS.DRAG_THRESHOLD) {
|
||||
const core = KGCore.instance();
|
||||
const currentIsLooping = core.getCurrentProject().getIsLooping();
|
||||
const currentLoopingRange = core.getCurrentProject().getLoopingRange();
|
||||
|
||||
if (loopDragOriginalSettingsRef.current) {
|
||||
const originalSettings = loopDragOriginalSettingsRef.current;
|
||||
const settingsChanged =
|
||||
originalSettings.isLooping !== currentIsLooping ||
|
||||
originalSettings.loopingRange[0] !== currentLoopingRange[0] ||
|
||||
originalSettings.loopingRange[1] !== currentLoopingRange[1];
|
||||
|
||||
if (settingsChanged) {
|
||||
const { isPlaying: currentIsPlaying, stopPlaying } = useProjectStore.getState();
|
||||
if (currentIsPlaying) {
|
||||
stopPlaying();
|
||||
}
|
||||
|
||||
core.getCurrentProject().setIsLooping(originalSettings.isLooping);
|
||||
core.getCurrentProject().setLoopingRange(originalSettings.loopingRange);
|
||||
core.executeCommand(new ChangeLoopSettingsCommand({
|
||||
isLooping: currentIsLooping,
|
||||
loopingRange: currentLoopingRange,
|
||||
}));
|
||||
|
||||
if (DEBUG_MODE.MAIN_CONTENT) {
|
||||
console.log('Loop range drag ended - Command executed for undo/redo');
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const clickPosition = calculatePlayheadFromMouse(event.clientX);
|
||||
if (clickPosition !== null) {
|
||||
setPlayheadPosition(clickPosition);
|
||||
requestPianoRollScroll(clickPosition);
|
||||
|
||||
if (DEBUG_MODE.MAIN_CONTENT) {
|
||||
console.log(`Single click on bar numbers - Set playhead to: ${clickPosition}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
isLoopDraggingRef.current = false;
|
||||
loopDragStartBarRef.current = null;
|
||||
loopDragStartXRef.current = null;
|
||||
loopDragOriginalSettingsRef.current = null;
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
}, [calculateBarIndexFromMouse, calculatePlayheadFromMouse, requestPianoRollScroll, setPlayheadPosition]);
|
||||
|
||||
const isBarInLoopRange = useCallback((barIndex: number) => {
|
||||
if (!isLooping) {
|
||||
return false;
|
||||
}
|
||||
return barIndex >= loopingRange[0] && barIndex <= loopingRange[1];
|
||||
}, [isLooping, loopingRange]);
|
||||
|
||||
return {
|
||||
mainContentRef,
|
||||
barNumbersRef,
|
||||
handleBarNumbersMouseDown,
|
||||
isBarInLoopRange,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user