feat: added track level list event tab
This commit is contained in:
Xiaohan-Tian
@@ -45,6 +45,35 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list-event-scope-tabs {
|
||||
display: flex;
|
||||
background-color: #2d2d2d;
|
||||
border-bottom: 1px solid #3a3a3a;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.list-event-scope-tab {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
color: #999;
|
||||
border: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
padding: 8px 4px;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.list-event-scope-tab:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.list-event-scope-tab.active {
|
||||
color: #e0e0e0;
|
||||
border-bottom-color: #5a9fd4;
|
||||
}
|
||||
|
||||
.list-event-tab {
|
||||
flex: 1;
|
||||
background-color: #1e1e1e;
|
||||
@@ -55,7 +84,7 @@
|
||||
font-weight: 500;
|
||||
min-height: 20px;
|
||||
padding: 5px 6px;
|
||||
cursor: default;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,11 +1,14 @@
|
||||
import React from 'react';
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||
import ListEventPanel from './ListEventPanel';
|
||||
import { KGMidiControllerEvent } from '../core/midi/KGMidiControllerEvent';
|
||||
import { KGMidiNote } from '../core/midi/KGMidiNote';
|
||||
import { KGMidiPitchBend } from '../core/midi/KGMidiPitchBend';
|
||||
import { KGRegion } from '../core/region/KGRegion';
|
||||
import { KGAudioRegion } from '../core/region/KGAudioRegion';
|
||||
import { KGAudioTrack } from '../core/track/KGAudioTrack';
|
||||
import { KGTrackAutomationPoint } from '../core/track/KGTrackAutomationPoint';
|
||||
import {
|
||||
createMockMidiControllerEvent,
|
||||
createMockMidiNote,
|
||||
@@ -14,7 +17,14 @@ import {
|
||||
createMockMidiTrack,
|
||||
} from '../test/utils/mock-data';
|
||||
|
||||
const region = createMockMidiRegion({
|
||||
const clickDropdownOption = (label: string) => {
|
||||
const option = Array.from(document.querySelectorAll('.quant-option'))
|
||||
.find(element => element.textContent?.trim() === label);
|
||||
expect(option).toBeTruthy();
|
||||
fireEvent.click(option!);
|
||||
};
|
||||
|
||||
const midiRegion = createMockMidiRegion({
|
||||
id: 'region-1',
|
||||
trackId: '1',
|
||||
trackIndex: 0,
|
||||
@@ -25,37 +35,64 @@ const region = createMockMidiRegion({
|
||||
index === 11 ? [createMockMidiControllerEvent({ id: 'cc11-1', beat: 0.75, value: 100 })] : []
|
||||
)),
|
||||
});
|
||||
const track = createMockMidiTrack({ id: 1, regions: [region] });
|
||||
const secondMidiRegion = createMockMidiRegion({
|
||||
id: 'region-2',
|
||||
trackId: '1',
|
||||
trackIndex: 0,
|
||||
name: 'Second Region',
|
||||
startFromBeat: 12,
|
||||
length: 8,
|
||||
});
|
||||
const midiTrack = createMockMidiTrack({ id: 1, volume: -6, regions: [midiRegion, secondMidiRegion] });
|
||||
midiTrack.setTrackIndex(0);
|
||||
midiTrack.setVolumeAutomation([
|
||||
new KGTrackAutomationPoint('vol-1', 2, -6),
|
||||
]);
|
||||
midiTrack.setPanAutomation([
|
||||
new KGTrackAutomationPoint('pan-1', 1, -0.5),
|
||||
new KGTrackAutomationPoint('pan-2', 6, 0.25),
|
||||
]);
|
||||
|
||||
const audioRegion = new KGAudioRegion('audio-region-1', '2', 1, 'Audio Clip', 8, 4);
|
||||
const audioTrack = new KGAudioTrack('Audio Track', 2, -3);
|
||||
audioTrack.setTrackIndex(1);
|
||||
audioTrack.setRegions([audioRegion]);
|
||||
|
||||
type MockStoreState = {
|
||||
tracks: typeof track[];
|
||||
tracks: Array<typeof midiTrack | typeof audioTrack>;
|
||||
activeRegionId: string | null;
|
||||
selectedRegionIds: string[];
|
||||
selectedTrackId: string | null;
|
||||
timeSignature: { numerator: number; denominator: number };
|
||||
selectedNoteIds: string[];
|
||||
selectedPitchBendIds: string[];
|
||||
selectedControllerEventIds: string[];
|
||||
selectedTrackAutomationPointIds: string[];
|
||||
playheadPosition: number;
|
||||
updateTrack: ReturnType<typeof vi.fn>;
|
||||
refreshProjectState: ReturnType<typeof vi.fn>;
|
||||
bumpAutomationRedrawVersion: ReturnType<typeof vi.fn>;
|
||||
bumpTrackAutomationRedrawVersion: ReturnType<typeof vi.fn>;
|
||||
};
|
||||
|
||||
const storeState: MockStoreState = {
|
||||
tracks: [track],
|
||||
tracks: [midiTrack, audioTrack],
|
||||
activeRegionId: 'region-1',
|
||||
selectedRegionIds: ['region-1'],
|
||||
selectedTrackId: '1',
|
||||
timeSignature: { numerator: 4, denominator: 4 },
|
||||
selectedNoteIds: [],
|
||||
selectedPitchBendIds: [],
|
||||
selectedControllerEventIds: [],
|
||||
selectedTrackAutomationPointIds: [],
|
||||
playheadPosition: 4,
|
||||
updateTrack: vi.fn().mockResolvedValue(undefined),
|
||||
refreshProjectState: vi.fn(),
|
||||
bumpAutomationRedrawVersion: vi.fn(),
|
||||
bumpTrackAutomationRedrawVersion: vi.fn(),
|
||||
};
|
||||
|
||||
let selectedItems: Array<KGRegion | KGMidiNote | KGMidiPitchBend | KGMidiControllerEvent> = [];
|
||||
let selectedItems: Array<KGRegion | KGMidiNote | KGMidiPitchBend | KGMidiControllerEvent | KGTrackAutomationPoint> = [];
|
||||
|
||||
const syncStoreSelectionFromCore = () => {
|
||||
storeState.selectedRegionIds = selectedItems
|
||||
@@ -70,91 +107,273 @@ const syncStoreSelectionFromCore = () => {
|
||||
storeState.selectedControllerEventIds = selectedItems
|
||||
.filter(item => item instanceof KGMidiControllerEvent)
|
||||
.map(item => item.getId());
|
||||
storeState.selectedTrackAutomationPointIds = selectedItems
|
||||
.filter(item => item instanceof KGTrackAutomationPoint)
|
||||
.map(item => item.getId());
|
||||
};
|
||||
|
||||
vi.mock('../stores/projectStore', () => ({
|
||||
useProjectStore: () => storeState,
|
||||
}));
|
||||
|
||||
vi.mock('../util/dialogUtil', () => ({
|
||||
showAlert: vi.fn().mockResolvedValue(undefined),
|
||||
}));
|
||||
|
||||
vi.mock('../core/KGCore', () => ({
|
||||
KGCore: {
|
||||
instance: vi.fn(() => ({
|
||||
getSelectedItems: () => selectedItems,
|
||||
addSelectedItem: (item: typeof selectedItems[number]) => {
|
||||
selectedItems = selectedItems.filter(candidate => candidate.getId() !== item.getId());
|
||||
selectedItems.push(item);
|
||||
syncStoreSelectionFromCore();
|
||||
},
|
||||
addSelectedItems: (items: typeof selectedItems) => {
|
||||
const nextIds = new Set(items.map(item => item.getId()));
|
||||
selectedItems = [...selectedItems.filter(item => !nextIds.has(item.getId())), ...items];
|
||||
syncStoreSelectionFromCore();
|
||||
},
|
||||
removeSelectedItem: (item: typeof selectedItems[number]) => {
|
||||
selectedItems = selectedItems.filter(candidate => candidate.getId() !== item.getId());
|
||||
syncStoreSelectionFromCore();
|
||||
},
|
||||
removeSelectedItems: (items: typeof selectedItems) => {
|
||||
const removedIds = new Set(items.map(item => item.getId()));
|
||||
selectedItems = selectedItems.filter(item => !removedIds.has(item.getId()));
|
||||
syncStoreSelectionFromCore();
|
||||
},
|
||||
clearSelectedItems: () => {
|
||||
selectedItems = [];
|
||||
syncStoreSelectionFromCore();
|
||||
},
|
||||
executeCommand: (command: { execute: () => void }) => {
|
||||
command.execute();
|
||||
syncStoreSelectionFromCore();
|
||||
},
|
||||
getCurrentProject: () => ({
|
||||
getTracks: () => storeState.tracks,
|
||||
}),
|
||||
})),
|
||||
},
|
||||
}));
|
||||
|
||||
describe('ListEventPanel', () => {
|
||||
beforeEach(() => {
|
||||
selectedItems = [region];
|
||||
region.select();
|
||||
region.getNotes().forEach(note => note.deselect());
|
||||
region.getPitchBends().forEach(pitchBend => pitchBend.deselect());
|
||||
region.getControllerEventsByType().forEach(events => events.forEach(controllerEvent => controllerEvent.deselect()));
|
||||
selectedItems = [midiRegion];
|
||||
midiRegion.select();
|
||||
secondMidiRegion.deselect();
|
||||
audioRegion.deselect();
|
||||
|
||||
midiRegion.setStartFromBeat(4);
|
||||
midiRegion.setLength(4);
|
||||
secondMidiRegion.setStartFromBeat(12);
|
||||
secondMidiRegion.setLength(8);
|
||||
midiTrack.setRegions([midiRegion, secondMidiRegion]);
|
||||
|
||||
midiTrack.setVolumeAutomation([new KGTrackAutomationPoint('vol-1', 2, -6)]);
|
||||
midiTrack.setPanAutomation([
|
||||
new KGTrackAutomationPoint('pan-1', 1, -0.5),
|
||||
new KGTrackAutomationPoint('pan-2', 6, 0.25),
|
||||
]);
|
||||
|
||||
midiRegion.getNotes().forEach(note => note.deselect());
|
||||
midiRegion.getPitchBends().forEach(pitchBend => pitchBend.deselect());
|
||||
midiRegion.getControllerEventsByType().forEach(events => events.forEach(controllerEvent => controllerEvent.deselect()));
|
||||
midiTrack.getVolumeAutomation().forEach(point => point.deselect());
|
||||
midiTrack.getPanAutomation().forEach(point => point.deselect());
|
||||
|
||||
storeState.activeRegionId = 'region-1';
|
||||
storeState.selectedRegionIds = ['region-1'];
|
||||
storeState.selectedTrackId = '1';
|
||||
storeState.selectedNoteIds = [];
|
||||
storeState.selectedPitchBendIds = [];
|
||||
storeState.selectedControllerEventIds = [];
|
||||
storeState.selectedTrackAutomationPointIds = [];
|
||||
storeState.playheadPosition = 4;
|
||||
storeState.updateTrack.mockClear();
|
||||
storeState.refreshProjectState.mockClear();
|
||||
storeState.bumpAutomationRedrawVersion.mockClear();
|
||||
storeState.bumpTrackAutomationRedrawVersion.mockClear();
|
||||
});
|
||||
|
||||
it('renders note and pitch bend rows and toggles them independently', () => {
|
||||
it('defaults to Region tab and preserves existing event rows', () => {
|
||||
render(<ListEventPanel isVisible={true} />);
|
||||
|
||||
expect(screen.getByRole('button', { name: 'Note' })).toBeInTheDocument();
|
||||
expect(screen.getByTitle('Delete visible selected rows')).toBeDisabled();
|
||||
expect(screen.getByRole('button', { name: 'Region' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'Track' })).toBeInTheDocument();
|
||||
expect(screen.getByText('Pitch Bend')).toBeInTheDocument();
|
||||
expect(screen.getAllByText('Note').length).toBeGreaterThan(0);
|
||||
expect(screen.getByText('Raw 12288 | 0.500 | 1.00 st')).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Pitch Bends' }));
|
||||
expect(screen.queryByText('Pitch Bend')).not.toBeInTheDocument();
|
||||
expect(screen.getByText('C4')).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Notes' }));
|
||||
expect(screen.queryByText('C4')).not.toBeInTheDocument();
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Pitch Bends' }));
|
||||
expect(screen.getByText('Pitch Bend')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('keeps the region selected while selecting rows', () => {
|
||||
const { rerender } = render(<ListEventPanel isVisible={true} />);
|
||||
it('switches to Track tab and lists selected track regions', () => {
|
||||
render(<ListEventPanel isVisible={true} />);
|
||||
|
||||
fireEvent.click(screen.getByText('C4').closest('tr')!);
|
||||
rerender(<ListEventPanel isVisible={true} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Track' }));
|
||||
|
||||
expect(storeState.selectedRegionIds).toEqual(['region-1']);
|
||||
expect(storeState.selectedNoteIds).toEqual(['note-1']);
|
||||
expect(screen.queryByText('Please select a MIDI region, or open one in the Piano Roll, to view its event list.')).not.toBeInTheDocument();
|
||||
expect(screen.getByText('C4').closest('tr')).toHaveClass('selected');
|
||||
expect(screen.getByRole('button', { name: 'Regions' })).toBeInTheDocument();
|
||||
expect(screen.getByText('Second Region')).toBeInTheDocument();
|
||||
expect(screen.getAllByText('MIDI')).toHaveLength(2);
|
||||
expect(screen.getByText('-6.0dB')).toBeInTheDocument();
|
||||
expect(screen.getByText('-32')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('supports additive row selection without dropping the owning region', () => {
|
||||
it('toggles track filters independently', () => {
|
||||
render(<ListEventPanel isVisible={true} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Track' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Regions' }));
|
||||
|
||||
expect(screen.queryByText('Second Region')).not.toBeInTheDocument();
|
||||
expect(screen.getByText('-6.0dB')).toBeInTheDocument();
|
||||
expect(screen.getByText('-32')).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Volume' }));
|
||||
|
||||
expect(screen.queryByText('-6.0dB')).not.toBeInTheDocument();
|
||||
expect(screen.getByText('-32')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows track empty state when no track is selected', () => {
|
||||
storeState.selectedTrackId = null;
|
||||
|
||||
render(<ListEventPanel isVisible={true} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Track' }));
|
||||
|
||||
expect(screen.getByText('Please select a track to view regions and track automation.')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('syncs Track Regions row selection to selectedRegionIds', () => {
|
||||
const { rerender } = render(<ListEventPanel isVisible={true} />);
|
||||
|
||||
fireEvent.click(screen.getByText('C4').closest('tr')!);
|
||||
rerender(<ListEventPanel isVisible={true} />);
|
||||
fireEvent.click(screen.getByText('Pitch Bend').closest('tr')!, { shiftKey: true });
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Track' }));
|
||||
fireEvent.click(screen.getByText('Second Region').closest('tr')!);
|
||||
rerender(<ListEventPanel isVisible={true} />);
|
||||
|
||||
expect(storeState.selectedRegionIds).toEqual(['region-1']);
|
||||
expect(storeState.selectedNoteIds).toEqual(['note-1']);
|
||||
expect(storeState.selectedPitchBendIds).toEqual(['bend-1']);
|
||||
expect(screen.getByText('C4').closest('tr')).toHaveClass('selected');
|
||||
expect(screen.getByText('Raw 12288 | 0.500 | 1.00 st').closest('tr')).toHaveClass('selected');
|
||||
expect(storeState.selectedRegionIds).toEqual(['region-2']);
|
||||
expect(screen.getByText('Second Region').closest('tr')).toHaveClass('selected');
|
||||
});
|
||||
|
||||
it('syncs Track Volume row selection to selectedTrackAutomationPointIds', () => {
|
||||
const { rerender } = render(<ListEventPanel isVisible={true} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Track' }));
|
||||
fireEvent.click(screen.getByText('-6.0dB').closest('tr')!);
|
||||
rerender(<ListEventPanel isVisible={true} />);
|
||||
|
||||
expect(storeState.selectedTrackAutomationPointIds).toEqual(['vol-1']);
|
||||
expect(screen.getByText('-6.0dB').closest('tr')).toHaveClass('selected');
|
||||
});
|
||||
|
||||
it('syncs Track Pan row selection to selectedTrackAutomationPointIds', () => {
|
||||
const { rerender } = render(<ListEventPanel isVisible={true} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Track' }));
|
||||
fireEvent.click(screen.getByText('-32').closest('tr')!);
|
||||
rerender(<ListEventPanel isVisible={true} />);
|
||||
|
||||
expect(storeState.selectedTrackAutomationPointIds).toEqual(['pan-1']);
|
||||
});
|
||||
|
||||
it('hides MIDI Region add option for audio tracks', () => {
|
||||
storeState.selectedTrackId = '2';
|
||||
|
||||
render(<ListEventPanel isVisible={true} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Track' }));
|
||||
fireEvent.click(screen.getAllByRole('button', { name: 'Volume' })[1]);
|
||||
|
||||
expect(screen.queryByText('MIDI Region')).not.toBeInTheDocument();
|
||||
expect(
|
||||
Array.from(document.querySelectorAll('.quant-option')).some(element => element.textContent?.trim() === 'Pan')
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
it('creates a 1-bar MIDI region at the playhead from the Track tab', async () => {
|
||||
render(<ListEventPanel isVisible={true} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Track' }));
|
||||
fireEvent.click(screen.getByTitle('Add MIDI region at playhead'));
|
||||
|
||||
await waitFor(() => expect(midiTrack.getRegions()).toHaveLength(3));
|
||||
|
||||
const createdRegion = midiTrack.getRegions()[2];
|
||||
expect(createdRegion.getStartFromBeat()).toBe(4);
|
||||
expect(createdRegion.getLength()).toBe(4);
|
||||
});
|
||||
|
||||
it('creates a volume automation point using the track base volume', async () => {
|
||||
render(<ListEventPanel isVisible={true} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Track' }));
|
||||
fireEvent.click(screen.getByTitle('Add MIDI region at playhead'));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'MIDI Region' }));
|
||||
clickDropdownOption('Volume');
|
||||
fireEvent.click(screen.getByTitle('Add volume automation point at playhead'));
|
||||
|
||||
await waitFor(() => expect(midiTrack.getVolumeAutomation()).toHaveLength(2));
|
||||
|
||||
const createdPoint = midiTrack.getVolumeAutomation().find(point => point.getBeat() === 4);
|
||||
expect(createdPoint?.getValue()).toBe(-6);
|
||||
});
|
||||
|
||||
it('creates a pan automation point using the nearest earlier pan value or zero', async () => {
|
||||
render(<ListEventPanel isVisible={true} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Track' }));
|
||||
fireEvent.click(screen.getByTitle('Add MIDI region at playhead'));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'MIDI Region' }));
|
||||
clickDropdownOption('Pan');
|
||||
fireEvent.click(screen.getByTitle('Add pan automation point at playhead'));
|
||||
|
||||
await waitFor(() => expect(midiTrack.getPanAutomation()).toHaveLength(3));
|
||||
|
||||
const createdPoint = midiTrack.getPanAutomation().find(point => point.getBeat() === 4);
|
||||
expect(createdPoint?.getValue()).toBe(-0.5);
|
||||
});
|
||||
|
||||
it('deletes selected track automation points from the Track tab', async () => {
|
||||
const { rerender } = render(<ListEventPanel isVisible={true} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Track' }));
|
||||
fireEvent.click(screen.getByText('-6.0dB').closest('tr')!);
|
||||
rerender(<ListEventPanel isVisible={true} />);
|
||||
fireEvent.click(screen.getByTitle('Delete visible selected rows'));
|
||||
|
||||
await waitFor(() => expect(midiTrack.getVolumeAutomation()).toHaveLength(0));
|
||||
});
|
||||
|
||||
it('edits track region position and length inline', async () => {
|
||||
render(<ListEventPanel isVisible={true} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Track' }));
|
||||
fireEvent.doubleClick(screen.getByText('4 1 0'));
|
||||
const positionInput = screen.getByDisplayValue('4 1 0');
|
||||
fireEvent.change(positionInput, { target: { value: '3 1 0' } });
|
||||
fireEvent.keyDown(positionInput, { key: 'Enter' });
|
||||
|
||||
await waitFor(() => expect(secondMidiRegion.getStartFromBeat()).toBe(8));
|
||||
|
||||
fireEvent.doubleClick(screen.getByText('8 0'));
|
||||
const lengthInput = screen.getByDisplayValue('8 0');
|
||||
fireEvent.change(lengthInput, { target: { value: '4 0' } });
|
||||
fireEvent.keyDown(lengthInput, { key: 'Enter' });
|
||||
|
||||
await waitFor(() => expect(secondMidiRegion.getLength()).toBe(4));
|
||||
});
|
||||
|
||||
it('edits track automation position and value inline', async () => {
|
||||
render(<ListEventPanel isVisible={true} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Track' }));
|
||||
fireEvent.doubleClick(screen.getByText('1 3 0'));
|
||||
const positionInput = screen.getByDisplayValue('1 3 0');
|
||||
fireEvent.change(positionInput, { target: { value: '2 1 0' } });
|
||||
fireEvent.keyDown(positionInput, { key: 'Enter' });
|
||||
|
||||
await waitFor(() => expect(midiTrack.getVolumeAutomation()[0].getBeat()).toBe(4));
|
||||
|
||||
fireEvent.doubleClick(screen.getByText('-6.0dB'));
|
||||
const valueInput = screen.getByDisplayValue('-6.0dB');
|
||||
fireEvent.change(valueInput, { target: { value: '-3' } });
|
||||
fireEvent.keyDown(valueInput, { key: 'Enter' });
|
||||
|
||||
await waitFor(() => expect(midiTrack.getVolumeAutomation()[0].getValue()).toBe(-3));
|
||||
});
|
||||
});
|
||||
|
||||
+35
-1163
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,800 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { FaPlus, FaTrash } from 'react-icons/fa';
|
||||
import KGDropdown from '../common/KGDropdown';
|
||||
import { useProjectStore } from '../../stores/projectStore';
|
||||
import { KGCore } from '../../core/KGCore';
|
||||
import { KGAudioRegion } from '../../core/region/KGAudioRegion';
|
||||
import { KGRegion } from '../../core/region/KGRegion';
|
||||
import { KGTrackAutomationPoint, type TrackAutomationType } from '../../core/track/KGTrackAutomationPoint';
|
||||
import { KGMidiTrack } from '../../core/track/KGMidiTrack';
|
||||
import { KGAudioTrack } from '../../core/track/KGAudioTrack';
|
||||
import {
|
||||
CreateRegionCommand,
|
||||
CreateTrackAutomationPointsCommand,
|
||||
DeleteMultipleRegionsCommand,
|
||||
DeleteTrackAutomationPointsCommand,
|
||||
MoveRegionCommand,
|
||||
ResizeRegionCommand,
|
||||
UpdateTrackAutomationPointsCommand,
|
||||
} from '../../core/commands';
|
||||
import {
|
||||
formatMidiEventLength,
|
||||
formatMidiEventPosition,
|
||||
MIDI_EVENT_TICKS_PER_BEAT,
|
||||
parseMidiEventLengthDelta,
|
||||
parseMidiEventLength,
|
||||
parseMidiEventPositionDelta,
|
||||
parseMidiEventPosition,
|
||||
} from '../../util/midiUtil';
|
||||
import { isModifierKeyPressed } from '../../util/osUtil';
|
||||
import { showAlert } from '../../util/dialogUtil';
|
||||
import { AUDIO_INTERFACE_CONSTANTS } from '../../constants/coreConstants';
|
||||
|
||||
interface TrackListEventTabProps {
|
||||
selectedTrack: KGMidiTrack | KGAudioTrack | null;
|
||||
}
|
||||
|
||||
type AddTrackItemType = 'midi-region' | 'volume' | 'pan';
|
||||
type TrackEditableColumn = 'position' | 'val' | 'length';
|
||||
|
||||
interface TrackRegionRowData {
|
||||
id: string;
|
||||
type: 'region';
|
||||
region: KGRegion;
|
||||
absoluteStartBeat: number;
|
||||
durationBeats: number;
|
||||
statusLabel: 'MIDI' | 'Audio';
|
||||
}
|
||||
|
||||
interface TrackAutomationRowData {
|
||||
id: string;
|
||||
type: 'automation';
|
||||
automationType: TrackAutomationType;
|
||||
point: KGTrackAutomationPoint;
|
||||
absoluteBeat: number;
|
||||
}
|
||||
|
||||
type TrackRowData = TrackRegionRowData | TrackAutomationRowData;
|
||||
|
||||
interface TrackEditingCell {
|
||||
rowId: string;
|
||||
column: TrackEditableColumn;
|
||||
value: string;
|
||||
}
|
||||
|
||||
const formatTrackAutomationValue = (automationType: TrackAutomationType, value: number): string => {
|
||||
if (automationType === 'volume') {
|
||||
if (value <= AUDIO_INTERFACE_CONSTANTS.MIN_TRACK_VOLUME_DB) {
|
||||
return '−∞';
|
||||
}
|
||||
|
||||
return `${value >= 0 ? '+' : ''}${value.toFixed(1)}dB`;
|
||||
}
|
||||
|
||||
const logicPanValue = value <= 0 ? Math.round(value * 64) : Math.round(value * 63);
|
||||
return `${logicPanValue >= 0 ? '+' : ''}${logicPanValue}`;
|
||||
};
|
||||
|
||||
const formatTrackAutomationInfo = (automationType: TrackAutomationType, value: number): string => {
|
||||
return automationType === 'volume' ? `Raw ${value.toFixed(3)} dB` : `Raw ${value.toFixed(3)}`;
|
||||
};
|
||||
|
||||
const parseTrackAutomationValueInput = (
|
||||
automationType: TrackAutomationType,
|
||||
raw: string
|
||||
): { value: number } | { error: string } => {
|
||||
const trimmed = raw.trim().replace(/db$/i, '');
|
||||
|
||||
if (automationType === 'volume') {
|
||||
if (trimmed === '−∞' || trimmed.toLowerCase() === '-inf' || trimmed.toLowerCase() === '-infinity') {
|
||||
return { value: AUDIO_INTERFACE_CONSTANTS.MIN_TRACK_VOLUME_DB };
|
||||
}
|
||||
|
||||
const parsed = Number(trimmed);
|
||||
if (!Number.isFinite(parsed)) {
|
||||
return { error: `Volume must be a number between ${AUDIO_INTERFACE_CONSTANTS.MIN_TRACK_VOLUME_DB} and ${AUDIO_INTERFACE_CONSTANTS.MAX_TRACK_VOLUME_DB}.` };
|
||||
}
|
||||
if (parsed < AUDIO_INTERFACE_CONSTANTS.MIN_TRACK_VOLUME_DB || parsed > AUDIO_INTERFACE_CONSTANTS.MAX_TRACK_VOLUME_DB) {
|
||||
return { error: `Volume must be between ${AUDIO_INTERFACE_CONSTANTS.MIN_TRACK_VOLUME_DB} and ${AUDIO_INTERFACE_CONSTANTS.MAX_TRACK_VOLUME_DB}.` };
|
||||
}
|
||||
return { value: parsed };
|
||||
}
|
||||
|
||||
if (!/^[+-]?\d+$/.test(trimmed)) {
|
||||
return { error: 'Pan must be an integer between -64 and +63.' };
|
||||
}
|
||||
|
||||
const parsed = parseInt(trimmed, 10);
|
||||
if (parsed < -64 || parsed > 63) {
|
||||
return { error: 'Pan must be between -64 and +63.' };
|
||||
}
|
||||
|
||||
const normalized = parsed <= 0 ? parsed / 64 : parsed / 63;
|
||||
return { value: Math.max(-1, Math.min(1, normalized)) };
|
||||
};
|
||||
|
||||
const findPreviousPanValue = (points: KGTrackAutomationPoint[], beat: number): number => {
|
||||
const previousPoint = [...points].filter(point => point.getBeat() <= beat).sort((a, b) => b.getBeat() - a.getBeat())[0];
|
||||
return previousPoint?.getValue() ?? 0;
|
||||
};
|
||||
|
||||
const TrackListEventTab: React.FC<TrackListEventTabProps> = ({ selectedTrack }) => {
|
||||
const {
|
||||
tracks,
|
||||
playheadPosition,
|
||||
timeSignature,
|
||||
selectedRegionIds,
|
||||
selectedTrackAutomationPointIds,
|
||||
updateTrack,
|
||||
refreshProjectState,
|
||||
bumpTrackAutomationRedrawVersion,
|
||||
} = useProjectStore();
|
||||
|
||||
const [showRegions, setShowRegions] = useState(true);
|
||||
const [showVolume, setShowVolume] = useState(true);
|
||||
const [showPan, setShowPan] = useState(true);
|
||||
const [addTrackItemType, setAddTrackItemType] = useState<AddTrackItemType>('midi-region');
|
||||
const [editingCell, setEditingCell] = useState<TrackEditingCell | null>(null);
|
||||
const rangeAnchorRowIdRef = useRef<string | null>(null);
|
||||
const editInputRef = useRef<HTMLInputElement | null>(null);
|
||||
const suppressBlurCommitRef = useRef(false);
|
||||
const pendingSingleClickSelectionRef = useRef<number | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedTrack instanceof KGAudioTrack && addTrackItemType === 'midi-region') {
|
||||
setAddTrackItemType('volume');
|
||||
}
|
||||
}, [selectedTrack, addTrackItemType]);
|
||||
|
||||
useEffect(() => {
|
||||
if (editingCell) {
|
||||
editInputRef.current?.focus();
|
||||
editInputRef.current?.select();
|
||||
}
|
||||
}, [editingCell?.rowId, editingCell?.column]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (pendingSingleClickSelectionRef.current !== null) {
|
||||
window.clearTimeout(pendingSingleClickSelectionRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
const availableAddOptions = useMemo(() => {
|
||||
const options: Array<{ label: string; value: AddTrackItemType }> = [];
|
||||
if (selectedTrack instanceof KGMidiTrack) {
|
||||
options.push({ label: 'MIDI Region', value: 'midi-region' });
|
||||
}
|
||||
options.push({ label: 'Volume', value: 'volume' });
|
||||
options.push({ label: 'Pan', value: 'pan' });
|
||||
return options;
|
||||
}, [selectedTrack]);
|
||||
|
||||
const liveSelectedTrack = useMemo(() => {
|
||||
if (!selectedTrack) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const matchedTrack = tracks.find(track => track.getId() === selectedTrack.getId()) ?? null;
|
||||
return matchedTrack instanceof KGMidiTrack || matchedTrack instanceof KGAudioTrack
|
||||
? matchedTrack
|
||||
: selectedTrack;
|
||||
}, [selectedTrack, tracks]);
|
||||
|
||||
const trackRows: TrackRowData[] = useMemo(() => {
|
||||
if (!liveSelectedTrack) return [];
|
||||
|
||||
const regionRows: TrackRegionRowData[] = showRegions
|
||||
? liveSelectedTrack.getRegions().map(region => ({
|
||||
id: region.getId(),
|
||||
type: 'region',
|
||||
region,
|
||||
absoluteStartBeat: region.getStartFromBeat(),
|
||||
durationBeats: region.getLength(),
|
||||
statusLabel: region instanceof KGAudioRegion ? 'Audio' : 'MIDI',
|
||||
}))
|
||||
: [];
|
||||
|
||||
const volumeRows: TrackAutomationRowData[] = showVolume
|
||||
? liveSelectedTrack.getAutomationPoints('volume').map(point => ({
|
||||
id: point.getId(),
|
||||
type: 'automation',
|
||||
automationType: 'volume',
|
||||
point,
|
||||
absoluteBeat: point.getBeat(),
|
||||
}))
|
||||
: [];
|
||||
|
||||
const panRows: TrackAutomationRowData[] = showPan
|
||||
? liveSelectedTrack.getAutomationPoints('pan').map(point => ({
|
||||
id: point.getId(),
|
||||
type: 'automation',
|
||||
automationType: 'pan',
|
||||
point,
|
||||
absoluteBeat: point.getBeat(),
|
||||
}))
|
||||
: [];
|
||||
|
||||
return [...regionRows, ...volumeRows, ...panRows].sort((a, b) => {
|
||||
const beatA = a.type === 'region' ? a.absoluteStartBeat : a.absoluteBeat;
|
||||
const beatB = b.type === 'region' ? b.absoluteStartBeat : b.absoluteBeat;
|
||||
if (beatA !== beatB) return beatA - beatB;
|
||||
if (a.type !== b.type) return a.type === 'region' ? -1 : 1;
|
||||
if (a.type === 'automation' && b.type === 'automation' && a.automationType !== b.automationType) {
|
||||
return a.automationType.localeCompare(b.automationType);
|
||||
}
|
||||
return a.id.localeCompare(b.id);
|
||||
});
|
||||
}, [liveSelectedTrack, showPan, showRegions, showVolume, tracks]);
|
||||
|
||||
const selectedRowIdSet = new Set([...selectedRegionIds, ...selectedTrackAutomationPointIds]);
|
||||
const visibleSelectedRows = trackRows.filter(row => selectedRowIdSet.has(row.id));
|
||||
|
||||
const clearPendingSingleClickSelection = () => {
|
||||
if (pendingSingleClickSelectionRef.current !== null) {
|
||||
window.clearTimeout(pendingSingleClickSelectionRef.current);
|
||||
pendingSingleClickSelectionRef.current = null;
|
||||
}
|
||||
};
|
||||
|
||||
const commitTrackRegionSelection = (nextSelectedIds: Set<string>) => {
|
||||
if (!liveSelectedTrack) return;
|
||||
|
||||
const core = KGCore.instance();
|
||||
const selectedRegions = liveSelectedTrack.getRegions().filter(region => nextSelectedIds.has(region.getId()));
|
||||
const previouslySelectedRegions = core.getSelectedItems().filter(item => item instanceof KGRegion);
|
||||
|
||||
liveSelectedTrack.getRegions().forEach(region => {
|
||||
if (nextSelectedIds.has(region.getId())) region.select();
|
||||
else region.deselect();
|
||||
});
|
||||
|
||||
if (previouslySelectedRegions.length > 0) {
|
||||
core.removeSelectedItems(previouslySelectedRegions);
|
||||
}
|
||||
if (selectedRegions.length > 0) {
|
||||
core.addSelectedItems(selectedRegions);
|
||||
}
|
||||
|
||||
void updateTrack(liveSelectedTrack);
|
||||
};
|
||||
|
||||
const commitTrackAutomationSelection = (nextSelectedIds: Set<string>) => {
|
||||
if (!liveSelectedTrack) return;
|
||||
|
||||
const core = KGCore.instance();
|
||||
const points = [
|
||||
...liveSelectedTrack.getAutomationPoints('volume'),
|
||||
...liveSelectedTrack.getAutomationPoints('pan'),
|
||||
];
|
||||
const selectedPoints = points.filter(point => nextSelectedIds.has(point.getId()));
|
||||
const previouslySelectedPoints = core.getSelectedItems().filter(item => item instanceof KGTrackAutomationPoint);
|
||||
|
||||
points.forEach(point => {
|
||||
if (nextSelectedIds.has(point.getId())) point.select();
|
||||
else point.deselect();
|
||||
});
|
||||
|
||||
if (previouslySelectedPoints.length > 0) {
|
||||
core.removeSelectedItems(previouslySelectedPoints);
|
||||
}
|
||||
if (selectedPoints.length > 0) {
|
||||
core.addSelectedItems(selectedPoints);
|
||||
}
|
||||
|
||||
void updateTrack(liveSelectedTrack);
|
||||
};
|
||||
|
||||
const commitSelection = (nextSelectedIds: Set<string>) => {
|
||||
commitTrackRegionSelection(nextSelectedIds);
|
||||
commitTrackAutomationSelection(nextSelectedIds);
|
||||
};
|
||||
|
||||
const startEditingCell = (rowId: string, column: TrackEditableColumn, value: string) => {
|
||||
clearPendingSingleClickSelection();
|
||||
setEditingCell({ rowId, column, value });
|
||||
};
|
||||
|
||||
const cancelEditingCell = () => {
|
||||
setEditingCell(null);
|
||||
};
|
||||
|
||||
const commitEditingCell = async () => {
|
||||
if (!editingCell || !liveSelectedTrack) return;
|
||||
|
||||
const row = trackRows.find(candidate => candidate.id === editingCell.rowId);
|
||||
if (!row) {
|
||||
setEditingCell(null);
|
||||
return;
|
||||
}
|
||||
|
||||
const trimmedValue = editingCell.value.trim();
|
||||
const isDeltaEdit = trimmedValue.startsWith('+') || trimmedValue.startsWith('-');
|
||||
|
||||
if (row.type === 'region') {
|
||||
const targetRows: TrackRegionRowData[] = selectedRowIdSet.has(row.id) && selectedRegionIds.length > 1
|
||||
? trackRows.filter((candidate): candidate is TrackRegionRowData => candidate.type === 'region' && selectedRowIdSet.has(candidate.id))
|
||||
: [row];
|
||||
|
||||
if (editingCell.column === 'position') {
|
||||
if (isDeltaEdit) {
|
||||
const parsed = parseMidiEventPositionDelta(trimmedValue, timeSignature, MIDI_EVENT_TICKS_PER_BEAT);
|
||||
if ('error' in parsed) {
|
||||
await showAlert(parsed.error);
|
||||
return;
|
||||
}
|
||||
|
||||
for (const targetRow of targetRows) {
|
||||
if (targetRow.region.getStartFromBeat() + parsed.deltaBeats < 0) {
|
||||
await showAlert('Position delta would move one or more regions before the start of the project.');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
targetRows.forEach(targetRow => {
|
||||
KGCore.instance().executeCommand(new MoveRegionCommand(
|
||||
targetRow.region.getId(),
|
||||
targetRow.region.getStartFromBeat() + parsed.deltaBeats,
|
||||
targetRow.region.getTrackId(),
|
||||
targetRow.region.getTrackIndex()
|
||||
));
|
||||
});
|
||||
} else {
|
||||
const parsed = parseMidiEventPosition(trimmedValue, timeSignature, MIDI_EVENT_TICKS_PER_BEAT);
|
||||
if ('error' in parsed) {
|
||||
await showAlert(parsed.error);
|
||||
return;
|
||||
}
|
||||
if (parsed.absoluteBeat < 0) {
|
||||
await showAlert('Position cannot be earlier than the start of the project.');
|
||||
return;
|
||||
}
|
||||
|
||||
targetRows.forEach(targetRow => {
|
||||
KGCore.instance().executeCommand(new MoveRegionCommand(
|
||||
targetRow.region.getId(),
|
||||
parsed.absoluteBeat,
|
||||
targetRow.region.getTrackId(),
|
||||
targetRow.region.getTrackIndex()
|
||||
));
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (editingCell.column === 'length') {
|
||||
if (isDeltaEdit) {
|
||||
const parsed = parseMidiEventLengthDelta(trimmedValue, MIDI_EVENT_TICKS_PER_BEAT);
|
||||
if ('error' in parsed) {
|
||||
await showAlert(parsed.error);
|
||||
return;
|
||||
}
|
||||
|
||||
for (const targetRow of targetRows) {
|
||||
if (targetRow.region.getLength() + parsed.deltaBeats <= 0) {
|
||||
await showAlert('Length delta would make one or more regions non-positive in duration.');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
targetRows.forEach(targetRow => {
|
||||
KGCore.instance().executeCommand(new ResizeRegionCommand(
|
||||
targetRow.region.getId(),
|
||||
targetRow.region.getStartFromBeat(),
|
||||
targetRow.region.getLength() + parsed.deltaBeats
|
||||
));
|
||||
});
|
||||
} else {
|
||||
const parsed = parseMidiEventLength(trimmedValue, MIDI_EVENT_TICKS_PER_BEAT);
|
||||
if ('error' in parsed) {
|
||||
await showAlert(parsed.error);
|
||||
return;
|
||||
}
|
||||
if (parsed.duration <= 0) {
|
||||
await showAlert('Length must be positive.');
|
||||
return;
|
||||
}
|
||||
|
||||
targetRows.forEach(targetRow => {
|
||||
KGCore.instance().executeCommand(new ResizeRegionCommand(
|
||||
targetRow.region.getId(),
|
||||
targetRow.region.getStartFromBeat(),
|
||||
parsed.duration
|
||||
));
|
||||
});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const automationType = row.automationType;
|
||||
const targetRows: TrackAutomationRowData[] = selectedRowIdSet.has(row.id) && selectedTrackAutomationPointIds.length > 1
|
||||
? trackRows.filter((candidate): candidate is TrackAutomationRowData => (
|
||||
candidate.type === 'automation'
|
||||
&& candidate.automationType === automationType
|
||||
&& selectedRowIdSet.has(candidate.id)
|
||||
))
|
||||
: [row];
|
||||
|
||||
const snapshots = targetRows.map(targetRow => ({
|
||||
pointId: targetRow.point.getId(),
|
||||
beat: targetRow.point.getBeat(),
|
||||
value: targetRow.point.getValue(),
|
||||
}));
|
||||
const updates: Array<{ pointId: string; beat?: number; value?: number }> = [];
|
||||
|
||||
if (editingCell.column === 'position') {
|
||||
if (isDeltaEdit) {
|
||||
const parsed = parseMidiEventPositionDelta(trimmedValue, timeSignature, MIDI_EVENT_TICKS_PER_BEAT);
|
||||
if ('error' in parsed) {
|
||||
await showAlert(parsed.error);
|
||||
return;
|
||||
}
|
||||
|
||||
for (const targetRow of targetRows) {
|
||||
const nextBeat = targetRow.point.getBeat() + parsed.deltaBeats;
|
||||
if (nextBeat < 0) {
|
||||
await showAlert('Position delta would move one or more automation points before the start of the project.');
|
||||
return;
|
||||
}
|
||||
updates.push({ pointId: targetRow.point.getId(), beat: nextBeat });
|
||||
}
|
||||
} else {
|
||||
const parsed = parseMidiEventPosition(trimmedValue, timeSignature, MIDI_EVENT_TICKS_PER_BEAT);
|
||||
if ('error' in parsed) {
|
||||
await showAlert(parsed.error);
|
||||
return;
|
||||
}
|
||||
if (parsed.absoluteBeat < 0) {
|
||||
await showAlert('Position cannot be earlier than the start of the project.');
|
||||
return;
|
||||
}
|
||||
|
||||
for (const targetRow of targetRows) {
|
||||
updates.push({ pointId: targetRow.point.getId(), beat: parsed.absoluteBeat });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (editingCell.column === 'val') {
|
||||
const parsed = parseTrackAutomationValueInput(automationType, trimmedValue);
|
||||
if ('error' in parsed) {
|
||||
await showAlert(parsed.error);
|
||||
return;
|
||||
}
|
||||
for (const targetRow of targetRows) {
|
||||
updates.push({ pointId: targetRow.point.getId(), value: parsed.value });
|
||||
}
|
||||
}
|
||||
|
||||
if (updates.length > 0) {
|
||||
KGCore.instance().executeCommand(new UpdateTrackAutomationPointsCommand(
|
||||
liveSelectedTrack.getId(),
|
||||
automationType,
|
||||
snapshots,
|
||||
updates
|
||||
));
|
||||
bumpTrackAutomationRedrawVersion();
|
||||
}
|
||||
}
|
||||
|
||||
await updateTrack(liveSelectedTrack);
|
||||
refreshProjectState();
|
||||
setEditingCell(null);
|
||||
};
|
||||
|
||||
const handleRowClick = (rowId: string, rowIndex: number, event: React.MouseEvent<HTMLTableRowElement>) => {
|
||||
event.stopPropagation();
|
||||
if (editingCell) return;
|
||||
|
||||
const isModifierPressed = isModifierKeyPressed(event);
|
||||
const nextSelectedIds = new Set(selectedRowIdSet);
|
||||
const isAlreadySelected = selectedRowIdSet.has(rowId);
|
||||
const hasMultiSelection = selectedRowIdSet.size > 1;
|
||||
|
||||
if (event.shiftKey) {
|
||||
clearPendingSingleClickSelection();
|
||||
const anchorIndex = trackRows.findIndex(row => row.id === rangeAnchorRowIdRef.current);
|
||||
const rangeStartIndex = anchorIndex >= 0 ? Math.min(anchorIndex, rowIndex) : rowIndex;
|
||||
const rangeEndIndex = anchorIndex >= 0 ? Math.max(anchorIndex, rowIndex) : rowIndex;
|
||||
|
||||
if (!isModifierPressed) {
|
||||
nextSelectedIds.clear();
|
||||
}
|
||||
|
||||
for (let index = rangeStartIndex; index <= rangeEndIndex; index += 1) {
|
||||
nextSelectedIds.add(trackRows[index].id);
|
||||
}
|
||||
} else if (isModifierPressed) {
|
||||
clearPendingSingleClickSelection();
|
||||
if (nextSelectedIds.has(rowId)) nextSelectedIds.delete(rowId);
|
||||
else nextSelectedIds.add(rowId);
|
||||
rangeAnchorRowIdRef.current = rowId;
|
||||
} else {
|
||||
if (isAlreadySelected && hasMultiSelection) {
|
||||
clearPendingSingleClickSelection();
|
||||
pendingSingleClickSelectionRef.current = window.setTimeout(() => {
|
||||
const delayedSelection = new Set<string>([rowId]);
|
||||
rangeAnchorRowIdRef.current = rowId;
|
||||
commitSelection(delayedSelection);
|
||||
pendingSingleClickSelectionRef.current = null;
|
||||
}, 220);
|
||||
return;
|
||||
}
|
||||
|
||||
clearPendingSingleClickSelection();
|
||||
nextSelectedIds.clear();
|
||||
nextSelectedIds.add(rowId);
|
||||
rangeAnchorRowIdRef.current = rowId;
|
||||
}
|
||||
|
||||
if (event.shiftKey && rangeAnchorRowIdRef.current === null) {
|
||||
rangeAnchorRowIdRef.current = rowId;
|
||||
}
|
||||
|
||||
commitSelection(nextSelectedIds);
|
||||
};
|
||||
|
||||
const handleTableBackgroundMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
|
||||
event.stopPropagation();
|
||||
if (event.target !== event.currentTarget) return;
|
||||
clearPendingSingleClickSelection();
|
||||
rangeAnchorRowIdRef.current = null;
|
||||
commitSelection(new Set());
|
||||
};
|
||||
|
||||
const handleEditInputKeyDown = async (event: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
event.stopPropagation();
|
||||
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
await commitEditingCell();
|
||||
}
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
suppressBlurCommitRef.current = true;
|
||||
cancelEditingCell();
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditInputBlur = () => {
|
||||
if (suppressBlurCommitRef.current) {
|
||||
suppressBlurCommitRef.current = false;
|
||||
return;
|
||||
}
|
||||
|
||||
void commitEditingCell();
|
||||
};
|
||||
|
||||
const handleAddTrackItem = async (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
event.stopPropagation();
|
||||
if (!liveSelectedTrack) return;
|
||||
|
||||
if (addTrackItemType === 'midi-region') {
|
||||
if (!(liveSelectedTrack instanceof KGMidiTrack)) return;
|
||||
|
||||
const command = new CreateRegionCommand(
|
||||
liveSelectedTrack.getId().toString(),
|
||||
liveSelectedTrack.getTrackIndex(),
|
||||
playheadPosition,
|
||||
timeSignature.numerator
|
||||
);
|
||||
KGCore.instance().executeCommand(command);
|
||||
const createdRegion = command.getCreatedRegion();
|
||||
if (createdRegion) {
|
||||
KGCore.instance().clearSelectedItems();
|
||||
createdRegion.select();
|
||||
KGCore.instance().addSelectedItem(createdRegion);
|
||||
rangeAnchorRowIdRef.current = createdRegion.getId();
|
||||
}
|
||||
} else {
|
||||
const automationType: TrackAutomationType = addTrackItemType;
|
||||
const value = automationType === 'volume'
|
||||
? liveSelectedTrack.getVolume()
|
||||
: findPreviousPanValue(liveSelectedTrack.getPanAutomation(), playheadPosition);
|
||||
|
||||
const command = new CreateTrackAutomationPointsCommand(
|
||||
liveSelectedTrack.getId(),
|
||||
automationType,
|
||||
[{ beat: playheadPosition, value }]
|
||||
);
|
||||
KGCore.instance().executeCommand(command);
|
||||
const createdPointId = command.getCreatedPointIds()[0];
|
||||
const createdPoint = createdPointId
|
||||
? liveSelectedTrack.getAutomationPoints(automationType).find(point => point.getId() === createdPointId) ?? null
|
||||
: null;
|
||||
if (createdPoint) {
|
||||
KGCore.instance().clearSelectedItems();
|
||||
createdPoint.select();
|
||||
KGCore.instance().addSelectedItem(createdPoint);
|
||||
rangeAnchorRowIdRef.current = createdPoint.getId();
|
||||
}
|
||||
bumpTrackAutomationRedrawVersion();
|
||||
}
|
||||
|
||||
await updateTrack(liveSelectedTrack);
|
||||
refreshProjectState();
|
||||
};
|
||||
|
||||
const handleDeleteSelectedRows = async (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
event.stopPropagation();
|
||||
if (!liveSelectedTrack || visibleSelectedRows.length === 0) return;
|
||||
|
||||
const regionIds = visibleSelectedRows
|
||||
.filter((row): row is TrackRegionRowData => row.type === 'region')
|
||||
.map(row => row.region.getId());
|
||||
const volumePointIds = visibleSelectedRows
|
||||
.filter((row): row is TrackAutomationRowData => row.type === 'automation' && row.automationType === 'volume')
|
||||
.map(row => row.point.getId());
|
||||
const panPointIds = visibleSelectedRows
|
||||
.filter((row): row is TrackAutomationRowData => row.type === 'automation' && row.automationType === 'pan')
|
||||
.map(row => row.point.getId());
|
||||
|
||||
if (regionIds.length > 0) {
|
||||
KGCore.instance().executeCommand(new DeleteMultipleRegionsCommand(
|
||||
regionIds
|
||||
));
|
||||
}
|
||||
if (volumePointIds.length > 0) {
|
||||
KGCore.instance().executeCommand(new DeleteTrackAutomationPointsCommand(
|
||||
liveSelectedTrack.getId(),
|
||||
'volume',
|
||||
volumePointIds
|
||||
));
|
||||
}
|
||||
if (panPointIds.length > 0) {
|
||||
KGCore.instance().executeCommand(new DeleteTrackAutomationPointsCommand(
|
||||
liveSelectedTrack.getId(),
|
||||
'pan',
|
||||
panPointIds
|
||||
));
|
||||
}
|
||||
if (volumePointIds.length > 0 || panPointIds.length > 0) {
|
||||
bumpTrackAutomationRedrawVersion();
|
||||
}
|
||||
|
||||
rangeAnchorRowIdRef.current = null;
|
||||
await updateTrack(liveSelectedTrack);
|
||||
refreshProjectState();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="list-event-tabs" role="tablist" aria-label="Track list modes">
|
||||
<button className={`list-event-tab${showRegions ? ' active' : ''}`} aria-pressed={showRegions} type="button" onClick={() => setShowRegions(value => !value)}>Regions</button>
|
||||
<button className={`list-event-tab${showVolume ? ' active' : ''}`} aria-pressed={showVolume} type="button" onClick={() => setShowVolume(value => !value)}>Volume</button>
|
||||
<button className={`list-event-tab${showPan ? ' active' : ''}`} aria-pressed={showPan} type="button" onClick={() => setShowPan(value => !value)}>Pan</button>
|
||||
</div>
|
||||
|
||||
{!liveSelectedTrack ? (
|
||||
<div className="list-event-empty-state">
|
||||
Please select a track to view regions and track automation.
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="list-event-toolbar">
|
||||
<div className="list-event-toolbar-group">
|
||||
<button
|
||||
className="list-event-add-button"
|
||||
title={addTrackItemType === 'midi-region' ? 'Add MIDI region at playhead' : addTrackItemType === 'volume' ? 'Add volume automation point at playhead' : 'Add pan automation point at playhead'}
|
||||
type="button"
|
||||
onClick={handleAddTrackItem}
|
||||
>
|
||||
<FaPlus />
|
||||
</button>
|
||||
<KGDropdown
|
||||
options={availableAddOptions}
|
||||
value={addTrackItemType}
|
||||
onChange={(value) => setAddTrackItemType(value as AddTrackItemType)}
|
||||
label="Add"
|
||||
buttonClassName="list-event-type-button"
|
||||
showValueAsLabel
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="list-event-toolbar-group list-event-toolbar-group-right">
|
||||
<button
|
||||
className="list-event-delete-button"
|
||||
title="Delete visible selected rows"
|
||||
type="button"
|
||||
onClick={handleDeleteSelectedRows}
|
||||
disabled={visibleSelectedRows.length === 0}
|
||||
>
|
||||
<FaTrash />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="list-event-table-shell" onMouseDown={handleTableBackgroundMouseDown}>
|
||||
<table className="list-event-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Position</th>
|
||||
<th>Status</th>
|
||||
<th>Val</th>
|
||||
<th>Length/Info</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{trackRows.map((row, index) => {
|
||||
const positionText = formatMidiEventPosition(row.type === 'region' ? row.absoluteStartBeat : row.absoluteBeat, timeSignature, MIDI_EVENT_TICKS_PER_BEAT);
|
||||
const statusText = row.type === 'region' ? row.statusLabel : row.automationType === 'volume' ? 'Volume' : 'Pan';
|
||||
const valText = row.type === 'region' ? row.region.getName() : formatTrackAutomationValue(row.automationType, row.point.getValue());
|
||||
const infoText = row.type === 'region' ? formatMidiEventLength(row.durationBeats, MIDI_EVENT_TICKS_PER_BEAT) : formatTrackAutomationInfo(row.automationType, row.point.getValue());
|
||||
const isEditingPosition = editingCell?.rowId === row.id && editingCell.column === 'position';
|
||||
const isEditingVal = editingCell?.rowId === row.id && editingCell.column === 'val';
|
||||
const isEditingLength = editingCell?.rowId === row.id && editingCell.column === 'length';
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={row.id}
|
||||
className={selectedRowIdSet.has(row.id) ? 'selected' : ''}
|
||||
onClick={(event) => handleRowClick(row.id, index, event)}
|
||||
onDoubleClick={(event) => {
|
||||
event.stopPropagation();
|
||||
clearPendingSingleClickSelection();
|
||||
}}
|
||||
>
|
||||
<td title={positionText} onDoubleClick={(event) => { event.stopPropagation(); startEditingCell(row.id, 'position', positionText); }}>
|
||||
{isEditingPosition ? (
|
||||
<input
|
||||
ref={editInputRef}
|
||||
className="list-event-cell-input"
|
||||
value={editingCell.value}
|
||||
onChange={(event) => setEditingCell({ ...editingCell, value: event.target.value })}
|
||||
onBlur={handleEditInputBlur}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onDoubleClick={(event) => event.stopPropagation()}
|
||||
onKeyDown={(event) => { void handleEditInputKeyDown(event); }}
|
||||
/>
|
||||
) : positionText}
|
||||
</td>
|
||||
<td title={statusText}>{statusText}</td>
|
||||
<td title={valText} onDoubleClick={(event) => {
|
||||
if (row.type === 'region') return;
|
||||
event.stopPropagation();
|
||||
startEditingCell(row.id, 'val', valText);
|
||||
}}>
|
||||
{isEditingVal ? (
|
||||
<input
|
||||
ref={editInputRef}
|
||||
className="list-event-cell-input"
|
||||
value={editingCell.value}
|
||||
onChange={(event) => setEditingCell({ ...editingCell, value: event.target.value })}
|
||||
onBlur={handleEditInputBlur}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onDoubleClick={(event) => event.stopPropagation()}
|
||||
onKeyDown={(event) => { void handleEditInputKeyDown(event); }}
|
||||
/>
|
||||
) : valText}
|
||||
</td>
|
||||
<td title={infoText} onDoubleClick={(event) => {
|
||||
if (row.type !== 'region') return;
|
||||
event.stopPropagation();
|
||||
startEditingCell(row.id, 'length', infoText);
|
||||
}}>
|
||||
{isEditingLength ? (
|
||||
<input
|
||||
ref={editInputRef}
|
||||
className="list-event-cell-input"
|
||||
value={editingCell.value}
|
||||
onChange={(event) => setEditingCell({ ...editingCell, value: event.target.value })}
|
||||
onBlur={handleEditInputBlur}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
onDoubleClick={(event) => event.stopPropagation()}
|
||||
onKeyDown={(event) => { void handleEditInputKeyDown(event); }}
|
||||
/>
|
||||
) : infoText}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TrackListEventTab;
|
||||
Reference in New Issue
Block a user