Xiaohan-Tian
861 lines
28 KiB
TypeScript
861 lines
28 KiB
TypeScript
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
|
import { KGCore } from '../../core/KGCore';
|
|
import { CreateMidiEventsCommand } from '../../core/commands/note/CreateMidiEventsCommand';
|
|
import { UpdateControllerEventPropertiesCommand } from '../../core/commands/note/UpdateControllerEventPropertiesCommand';
|
|
import { UpdatePitchBendPropertiesCommand } from '../../core/commands/note/UpdatePitchBendPropertiesCommand';
|
|
import { KGMidiControllerEvent } from '../../core/midi/KGMidiControllerEvent';
|
|
import { KGMidiPitchBend } from '../../core/midi/KGMidiPitchBend';
|
|
import { KGPianoRollState } from '../../core/state/KGPianoRollState';
|
|
import { KGMidiRegion } from '../../core/region/KGMidiRegion';
|
|
import {
|
|
MIDI_PITCH_BEND_MAX,
|
|
MIDI_PITCH_BEND_MIN,
|
|
clampMidiControllerValue,
|
|
clampMidiPitchBendValue,
|
|
midiPitchBendToSignedValue,
|
|
} from '../../util/midiUtil';
|
|
import { isModifierKeyPressed } from '../../util/osUtil';
|
|
import { useProjectStore } from '../../stores/projectStore';
|
|
import { PIANO_ROLL_CONSTANTS } from '../../constants';
|
|
import { getSnappedBeatPosition } from './pianoRollSnap';
|
|
import {
|
|
getAutomationInterpolationMode,
|
|
getControllerNumberForAutomationType,
|
|
PIANO_ROLL_AUTOMATION_OPTIONS,
|
|
type PianoRollAutomationType,
|
|
} from './pianoRollAutomation';
|
|
|
|
interface AutomationPoint {
|
|
id: string;
|
|
kind: 'pitch-bend' | 'controller';
|
|
controller: number | null;
|
|
relativeBeat: number;
|
|
absoluteBeat: number;
|
|
value: number;
|
|
label: string;
|
|
}
|
|
|
|
interface PianoRollAutomationLaneProps {
|
|
activeRegion: KGMidiRegion | null;
|
|
automationType: PianoRollAutomationType;
|
|
maxBars: number;
|
|
timeSignature: { numerator: number; denominator: number };
|
|
bpm?: number;
|
|
redrawVersion?: number;
|
|
horizontalScrollLeft?: number;
|
|
onHorizontalWheel?: (delta: number) => void;
|
|
}
|
|
|
|
interface SelectionBoxState {
|
|
startX: number;
|
|
startY: number;
|
|
endX: number;
|
|
endY: number;
|
|
}
|
|
|
|
interface PreviewPoint {
|
|
absoluteBeat: number;
|
|
value: number;
|
|
}
|
|
|
|
const AUTOMATION_COLOR = '#87CEFA';
|
|
const SELECTED_POINT_COLOR = '#FFFFFF';
|
|
const LANE_PADDING_Y = 16;
|
|
const MIN_LANE_HEIGHT = 160;
|
|
const POINT_RADIUS = 5;
|
|
|
|
const PianoRollAutomationLane: React.FC<PianoRollAutomationLaneProps> = ({
|
|
activeRegion,
|
|
automationType,
|
|
maxBars,
|
|
timeSignature,
|
|
redrawVersion = 0,
|
|
horizontalScrollLeft = 0,
|
|
onHorizontalWheel,
|
|
}) => {
|
|
const laneRef = useRef<HTMLDivElement | null>(null);
|
|
const isLassoSelectingRef = useRef(false);
|
|
const lassoShiftKeyRef = useRef(false);
|
|
const [isModifierPressed, setIsModifierPressed] = useState(false);
|
|
const selectionBoxRef = useRef<SelectionBoxState>({ startX: 0, startY: 0, endX: 0, endY: 0 });
|
|
const [selectionBoxRenderTick, setSelectionBoxRenderTick] = useState(0);
|
|
const preventBackgroundClearRef = useRef(false);
|
|
const dragStateRef = useRef<{
|
|
primaryPointId: string;
|
|
originAbsoluteBeat: number;
|
|
originValue: number;
|
|
originClientX: number;
|
|
originClientY: number;
|
|
selectedPoints: AutomationPoint[];
|
|
minDeltaValue: number;
|
|
maxDeltaValue: number;
|
|
hasMoved: boolean;
|
|
} | null>(null);
|
|
const [previewPoints, setPreviewPoints] = useState<Record<string, PreviewPoint>>({});
|
|
const previewPointsRef = useRef<Record<string, PreviewPoint>>({});
|
|
const [laneHeight, setLaneHeight] = useState(MIN_LANE_HEIGHT);
|
|
const beatWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--region-grid-beat-width')) || 40;
|
|
const keyWidth = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--region-piano-key-width')) || 60;
|
|
|
|
const {
|
|
tracks,
|
|
updateTrack,
|
|
refreshProjectState,
|
|
bumpAutomationRedrawVersion,
|
|
selectedPitchBendIds,
|
|
selectedControllerEventIds,
|
|
} = useProjectStore();
|
|
|
|
useEffect(() => {
|
|
const element = laneRef.current;
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
const updateHeight = () => {
|
|
setLaneHeight(Math.max(Math.round(element.clientHeight), MIN_LANE_HEIGHT));
|
|
};
|
|
|
|
updateHeight();
|
|
|
|
const observer = new ResizeObserver(() => {
|
|
updateHeight();
|
|
});
|
|
observer.observe(element);
|
|
|
|
return () => {
|
|
observer.disconnect();
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const element = laneRef.current;
|
|
if (!element) {
|
|
return;
|
|
}
|
|
|
|
const handleWheel = (event: WheelEvent) => {
|
|
const horizontalDelta = Math.abs(event.deltaX) > 0 ? event.deltaX : (event.shiftKey ? event.deltaY : 0);
|
|
if (horizontalDelta === 0) {
|
|
return;
|
|
}
|
|
|
|
event.preventDefault();
|
|
onHorizontalWheel?.(horizontalDelta);
|
|
};
|
|
|
|
element.addEventListener('wheel', handleWheel, { passive: false });
|
|
return () => {
|
|
element.removeEventListener('wheel', handleWheel);
|
|
};
|
|
}, [onHorizontalWheel]);
|
|
|
|
useEffect(() => {
|
|
const isTypingTarget = (target: EventTarget | null): boolean => {
|
|
if (!(target instanceof HTMLElement)) {
|
|
return false;
|
|
}
|
|
|
|
return (
|
|
target.tagName === 'INPUT' ||
|
|
target.tagName === 'TEXTAREA' ||
|
|
target.contentEditable === 'true' ||
|
|
target.hasAttribute('data-chatbox-input') ||
|
|
target.closest('.chatbox-input') !== null
|
|
);
|
|
};
|
|
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (isTypingTarget(event.target)) {
|
|
return;
|
|
}
|
|
|
|
if (isModifierKeyPressed(event)) {
|
|
setIsModifierPressed(true);
|
|
}
|
|
};
|
|
|
|
const handleKeyUp = (event: KeyboardEvent) => {
|
|
if (isTypingTarget(event.target)) {
|
|
return;
|
|
}
|
|
|
|
if (!isModifierKeyPressed(event)) {
|
|
setIsModifierPressed(false);
|
|
}
|
|
};
|
|
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
window.addEventListener('keyup', handleKeyUp);
|
|
|
|
return () => {
|
|
window.removeEventListener('keydown', handleKeyDown);
|
|
window.removeEventListener('keyup', handleKeyUp);
|
|
};
|
|
}, []);
|
|
|
|
const points = useMemo<AutomationPoint[]>(() => {
|
|
if (!activeRegion) {
|
|
return [];
|
|
}
|
|
|
|
const regionStartBeat = activeRegion.getStartFromBeat();
|
|
if (automationType === 'pitch-bend') {
|
|
return activeRegion.getPitchBends().map((pitchBend) => ({
|
|
id: pitchBend.getId(),
|
|
kind: 'pitch-bend' as const,
|
|
controller: null,
|
|
relativeBeat: pitchBend.getBeat(),
|
|
absoluteBeat: regionStartBeat + pitchBend.getBeat(),
|
|
value: pitchBend.getValue(),
|
|
label: `${midiPitchBendToSignedValue(pitchBend.getValue())}`,
|
|
}));
|
|
}
|
|
|
|
const controller = getControllerNumberForAutomationType(automationType);
|
|
if (controller === null) {
|
|
return [];
|
|
}
|
|
|
|
return activeRegion.getControllerEvents(controller).map((event) => ({
|
|
id: event.getId(),
|
|
kind: 'controller' as const,
|
|
controller,
|
|
relativeBeat: event.getBeat(),
|
|
absoluteBeat: regionStartBeat + event.getBeat(),
|
|
value: event.getValue(),
|
|
label: `${event.getValue()}`,
|
|
}));
|
|
}, [activeRegion, automationType, redrawVersion]);
|
|
|
|
const selectedPointIds = automationType === 'pitch-bend'
|
|
? selectedPitchBendIds
|
|
: selectedControllerEventIds.filter(id => points.some(point => point.id === id));
|
|
const selectedPointIdSet = new Set(selectedPointIds);
|
|
const pointMap = new Map(points.map(point => [point.id, point]));
|
|
const parentTrack = activeRegion
|
|
? tracks.find(track => track.getId().toString() === activeRegion.getTrackId()) ?? null
|
|
: null;
|
|
|
|
const selectedOption = PIANO_ROLL_AUTOMATION_OPTIONS.find(option => option.value === automationType);
|
|
const laneLabel = selectedOption?.label ?? automationType;
|
|
const interpolationMode = getAutomationInterpolationMode(automationType);
|
|
const totalBeats = maxBars * timeSignature.numerator;
|
|
const totalWidth = 'calc(var(--max-number-of-bars) * var(--region-grid-bar-width) + var(--region-piano-key-width))';
|
|
const minValue = automationType === 'pitch-bend' ? MIDI_PITCH_BEND_MIN : 0;
|
|
const maxValue = automationType === 'pitch-bend' ? MIDI_PITCH_BEND_MAX : 127;
|
|
|
|
const toY = (value: number): number => {
|
|
const usableHeight = laneHeight - LANE_PADDING_Y * 2;
|
|
const normalized = (value - minValue) / (maxValue - minValue);
|
|
return laneHeight - LANE_PADDING_Y - normalized * usableHeight;
|
|
};
|
|
|
|
const toValue = (y: number): number => {
|
|
const usableHeight = laneHeight - LANE_PADDING_Y * 2;
|
|
const clampedY = Math.min(laneHeight - LANE_PADDING_Y, Math.max(LANE_PADDING_Y, y));
|
|
const normalized = (laneHeight - LANE_PADDING_Y - clampedY) / usableHeight;
|
|
const rawValue = minValue + normalized * (maxValue - minValue);
|
|
return automationType === 'pitch-bend'
|
|
? clampMidiPitchBendValue(Math.round(rawValue))
|
|
: clampMidiControllerValue(Math.round(rawValue));
|
|
};
|
|
|
|
const getPointLabel = (value: number): string => (
|
|
automationType === 'pitch-bend' ? `${midiPitchBendToSignedValue(value)}` : `${value}`
|
|
);
|
|
|
|
const renderedPoints = points.map(point => {
|
|
const preview = previewPoints[point.id];
|
|
const absoluteBeat = preview?.absoluteBeat ?? point.absoluteBeat;
|
|
const value = preview?.value ?? point.value;
|
|
|
|
return {
|
|
...point,
|
|
absoluteBeat,
|
|
value,
|
|
label: getPointLabel(value),
|
|
x: absoluteBeat * beatWidth + keyWidth,
|
|
y: toY(value),
|
|
isSelected: selectedPointIdSet.has(point.id),
|
|
};
|
|
});
|
|
const renderedPointsSorted = [...renderedPoints].sort((leftPoint, rightPoint) => {
|
|
if (leftPoint.absoluteBeat !== rightPoint.absoluteBeat) {
|
|
return leftPoint.absoluteBeat - rightPoint.absoluteBeat;
|
|
}
|
|
|
|
return leftPoint.id.localeCompare(rightPoint.id);
|
|
});
|
|
|
|
const polylinePoints = (() => {
|
|
if (interpolationMode === 'step' || renderedPointsSorted.length === 0) {
|
|
return '';
|
|
}
|
|
|
|
const linePoints = [...renderedPointsSorted];
|
|
const lastPoint = linePoints[linePoints.length - 1];
|
|
linePoints.push({
|
|
...lastPoint,
|
|
id: `${lastPoint.id}-tail`,
|
|
x: beatWidth * totalBeats + keyWidth,
|
|
});
|
|
|
|
return linePoints.map(point => `${point.x},${point.y}`).join(' ');
|
|
})();
|
|
|
|
const stepSegments = (() => {
|
|
if (interpolationMode !== 'step' || renderedPointsSorted.length === 0) {
|
|
return [];
|
|
}
|
|
|
|
return renderedPointsSorted.map((point, index) => ({
|
|
id: `${point.id}-step`,
|
|
x1: point.x,
|
|
y1: point.y,
|
|
x2: index < renderedPointsSorted.length - 1 ? renderedPointsSorted[index + 1].x : beatWidth * totalBeats + keyWidth,
|
|
}));
|
|
})();
|
|
|
|
const commitSelection = async (nextSelectedIds: Set<string>) => {
|
|
if (!activeRegion || !parentTrack) return;
|
|
|
|
activeRegion.getNotes().forEach(note => note.deselect());
|
|
activeRegion.getPitchBends().forEach(pitchBend => {
|
|
if (nextSelectedIds.has(pitchBend.getId())) pitchBend.select();
|
|
else pitchBend.deselect();
|
|
});
|
|
activeRegion.getControllerEventsByType().forEach(events => {
|
|
events.forEach(controllerEvent => {
|
|
if (nextSelectedIds.has(controllerEvent.getId())) controllerEvent.select();
|
|
else controllerEvent.deselect();
|
|
});
|
|
});
|
|
|
|
const selectedEvents: Array<KGMidiPitchBend | KGMidiControllerEvent> = [];
|
|
activeRegion.getPitchBends().forEach(pitchBend => {
|
|
if (nextSelectedIds.has(pitchBend.getId())) {
|
|
selectedEvents.push(pitchBend);
|
|
}
|
|
});
|
|
activeRegion.getControllerEventsByType().forEach(events => {
|
|
events.forEach(controllerEvent => {
|
|
if (nextSelectedIds.has(controllerEvent.getId())) {
|
|
selectedEvents.push(controllerEvent);
|
|
}
|
|
});
|
|
});
|
|
|
|
const core = KGCore.instance();
|
|
core.clearSelectedItems();
|
|
if (selectedEvents.length > 0) {
|
|
core.addSelectedItems(selectedEvents);
|
|
}
|
|
|
|
await updateTrack(parentTrack);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (!activeRegion || !parentTrack) {
|
|
return;
|
|
}
|
|
|
|
const visiblePointIds = new Set(points.map(point => point.id));
|
|
const hiddenSelection = automationType === 'pitch-bend'
|
|
? selectedControllerEventIds.length > 0
|
|
: selectedPitchBendIds.length > 0 || selectedControllerEventIds.some(id => !visiblePointIds.has(id));
|
|
|
|
if (!hiddenSelection) {
|
|
return;
|
|
}
|
|
|
|
activeRegion.getPitchBends().forEach(pitchBend => {
|
|
if (!visiblePointIds.has(pitchBend.getId())) {
|
|
pitchBend.deselect();
|
|
}
|
|
});
|
|
activeRegion.getControllerEventsByType().forEach(events => {
|
|
events.forEach(controllerEvent => {
|
|
if (!visiblePointIds.has(controllerEvent.getId())) {
|
|
controllerEvent.deselect();
|
|
}
|
|
});
|
|
});
|
|
|
|
const core = KGCore.instance();
|
|
const visibleSelectedItems = core.getSelectedItems().filter(item => visiblePointIds.has(item.getId()));
|
|
core.clearSelectedItems();
|
|
if (visibleSelectedItems.length > 0) {
|
|
core.addSelectedItems(visibleSelectedItems);
|
|
}
|
|
|
|
void updateTrack(parentTrack);
|
|
}, [activeRegion, automationType, parentTrack, points, selectedControllerEventIds, selectedPitchBendIds, updateTrack]);
|
|
|
|
const getLaneCoordinates = (clientX: number, clientY: number) => {
|
|
if (!laneRef.current) {
|
|
return null;
|
|
}
|
|
|
|
const rect = laneRef.current.getBoundingClientRect();
|
|
return {
|
|
x: clientX - rect.left + horizontalScrollLeft,
|
|
y: clientY - rect.top,
|
|
};
|
|
};
|
|
|
|
const buildPreviewFromDrag = (clientX: number, clientY: number): Record<string, PreviewPoint> => {
|
|
const dragState = dragStateRef.current;
|
|
const coordinates = getLaneCoordinates(clientX, clientY);
|
|
if (!dragState || !coordinates) {
|
|
return {};
|
|
}
|
|
|
|
const rawAbsoluteBeat = (coordinates.x - keyWidth) / beatWidth;
|
|
const snappedAbsoluteBeat = KGPianoRollState.instance().getCurrentSnap() === 'NO SNAP'
|
|
? rawAbsoluteBeat
|
|
: getSnappedBeatPosition(rawAbsoluteBeat, KGPianoRollState.instance().getCurrentSnap());
|
|
const beatDelta = snappedAbsoluteBeat - dragState.originAbsoluteBeat;
|
|
const rawDeltaValue = toValue(coordinates.y) - dragState.originValue;
|
|
const valueDelta = Math.min(dragState.maxDeltaValue, Math.max(dragState.minDeltaValue, rawDeltaValue));
|
|
|
|
const nextPreview: Record<string, PreviewPoint> = {};
|
|
dragState.selectedPoints.forEach(point => {
|
|
nextPreview[point.id] = {
|
|
absoluteBeat: point.absoluteBeat + beatDelta,
|
|
value: point.value + valueDelta,
|
|
};
|
|
});
|
|
|
|
return nextPreview;
|
|
};
|
|
|
|
const applyPreviewPoints = (nextPreview: Record<string, PreviewPoint>) => {
|
|
previewPointsRef.current = nextPreview;
|
|
setPreviewPoints(nextPreview);
|
|
};
|
|
|
|
const handleDragMove = (event: MouseEvent) => {
|
|
if (!dragStateRef.current) {
|
|
return;
|
|
}
|
|
|
|
const dragState = dragStateRef.current;
|
|
const movedX = Math.abs(event.clientX - dragState.originClientX);
|
|
const movedY = Math.abs(event.clientY - dragState.originClientY);
|
|
if (movedX >= PIANO_ROLL_CONSTANTS.DRAG_THRESHOLD || movedY >= PIANO_ROLL_CONSTANTS.DRAG_THRESHOLD) {
|
|
dragState.hasMoved = true;
|
|
}
|
|
|
|
applyPreviewPoints(buildPreviewFromDrag(event.clientX, event.clientY));
|
|
};
|
|
|
|
const cleanupDragListeners = () => {
|
|
document.removeEventListener('mousemove', handleDragMove);
|
|
document.removeEventListener('mouseup', handleDragEnd);
|
|
};
|
|
|
|
const handleDragEnd = async () => {
|
|
const dragState = dragStateRef.current;
|
|
cleanupDragListeners();
|
|
|
|
if (!dragState || !activeRegion || !parentTrack) {
|
|
dragStateRef.current = null;
|
|
applyPreviewPoints({});
|
|
return;
|
|
}
|
|
|
|
const pendingPreview = Object.keys(previewPointsRef.current).length > 0 ? previewPointsRef.current : buildPreviewFromDrag(
|
|
dragState.originClientX,
|
|
dragState.originClientY,
|
|
);
|
|
|
|
if (dragState.hasMoved && Object.keys(pendingPreview).length > 0) {
|
|
if (automationType === 'pitch-bend') {
|
|
const snapshots = dragState.selectedPoints.map(point => ({
|
|
pitchBendId: point.id,
|
|
beat: point.relativeBeat,
|
|
value: point.value,
|
|
}));
|
|
const updates = dragState.selectedPoints.map(point => {
|
|
const preview = pendingPreview[point.id];
|
|
return {
|
|
pitchBendId: point.id,
|
|
beat: preview.absoluteBeat - activeRegion.getStartFromBeat(),
|
|
value: preview.value,
|
|
};
|
|
});
|
|
KGCore.instance().executeCommand(new UpdatePitchBendPropertiesCommand(activeRegion.getId(), snapshots, updates));
|
|
} else {
|
|
const controller = getControllerNumberForAutomationType(automationType);
|
|
if (controller !== null) {
|
|
const snapshots = dragState.selectedPoints.map(point => ({
|
|
controllerEventId: point.id,
|
|
controller,
|
|
beat: point.relativeBeat,
|
|
value: point.value,
|
|
}));
|
|
const updates = dragState.selectedPoints.map(point => {
|
|
const preview = pendingPreview[point.id];
|
|
return {
|
|
controllerEventId: point.id,
|
|
controller,
|
|
beat: preview.absoluteBeat - activeRegion.getStartFromBeat(),
|
|
value: preview.value,
|
|
};
|
|
});
|
|
KGCore.instance().executeCommand(new UpdateControllerEventPropertiesCommand(activeRegion.getId(), snapshots, updates));
|
|
}
|
|
}
|
|
|
|
bumpAutomationRedrawVersion();
|
|
await updateTrack(parentTrack);
|
|
refreshProjectState();
|
|
preventBackgroundClearRef.current = true;
|
|
}
|
|
|
|
dragStateRef.current = null;
|
|
applyPreviewPoints({});
|
|
};
|
|
|
|
const handlePointMouseDown = async (pointId: string, event: React.MouseEvent<SVGCircleElement>) => {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
if (!activeRegion) {
|
|
return;
|
|
}
|
|
|
|
const point = pointMap.get(pointId);
|
|
if (!point) {
|
|
return;
|
|
}
|
|
|
|
let nextSelection = new Set(selectedPointIdSet);
|
|
if (event.shiftKey) {
|
|
if (nextSelection.has(pointId)) {
|
|
nextSelection.delete(pointId);
|
|
await commitSelection(nextSelection);
|
|
preventBackgroundClearRef.current = true;
|
|
return;
|
|
}
|
|
|
|
nextSelection.add(pointId);
|
|
} else if (!nextSelection.has(pointId)) {
|
|
nextSelection = new Set([pointId]);
|
|
}
|
|
|
|
await commitSelection(nextSelection);
|
|
|
|
const dragSelectedPoints = points.filter(candidate => nextSelection.has(candidate.id));
|
|
const minDeltaValue = dragSelectedPoints.reduce((currentMin, candidate) => (
|
|
Math.max(currentMin, minValue - candidate.value)
|
|
), Number.NEGATIVE_INFINITY);
|
|
const maxDeltaValue = dragSelectedPoints.reduce((currentMax, candidate) => (
|
|
Math.min(currentMax, maxValue - candidate.value)
|
|
), Number.POSITIVE_INFINITY);
|
|
|
|
dragStateRef.current = {
|
|
primaryPointId: pointId,
|
|
originAbsoluteBeat: point.absoluteBeat,
|
|
originValue: point.value,
|
|
originClientX: event.clientX,
|
|
originClientY: event.clientY,
|
|
selectedPoints: dragSelectedPoints,
|
|
minDeltaValue,
|
|
maxDeltaValue,
|
|
hasMoved: false,
|
|
};
|
|
|
|
applyPreviewPoints({});
|
|
document.addEventListener('mousemove', handleDragMove);
|
|
document.addEventListener('mouseup', handleDragEnd);
|
|
preventBackgroundClearRef.current = true;
|
|
};
|
|
|
|
const handleLassoMouseMove = (event: MouseEvent) => {
|
|
if (!isLassoSelectingRef.current || !laneRef.current) {
|
|
return;
|
|
}
|
|
|
|
const rect = laneRef.current.getBoundingClientRect();
|
|
selectionBoxRef.current = {
|
|
...selectionBoxRef.current,
|
|
endX: event.clientX - rect.left,
|
|
endY: event.clientY - rect.top,
|
|
};
|
|
setSelectionBoxRenderTick(tick => tick + 1);
|
|
};
|
|
|
|
const cleanupLassoListeners = () => {
|
|
document.removeEventListener('mousemove', handleLassoMouseMove);
|
|
document.removeEventListener('mouseup', handleLassoMouseUp);
|
|
};
|
|
|
|
const handleLassoMouseUp = async () => {
|
|
cleanupLassoListeners();
|
|
|
|
if (!isLassoSelectingRef.current) {
|
|
return;
|
|
}
|
|
|
|
const { startX, startY, endX, endY } = selectionBoxRef.current;
|
|
const left = Math.min(startX, endX);
|
|
const right = Math.max(startX, endX);
|
|
const top = Math.min(startY, endY);
|
|
const bottom = Math.max(startY, endY);
|
|
const isClick = (right - left < PIANO_ROLL_CONSTANTS.DRAG_THRESHOLD)
|
|
&& (bottom - top < PIANO_ROLL_CONSTANTS.DRAG_THRESHOLD);
|
|
|
|
isLassoSelectingRef.current = false;
|
|
setSelectionBoxRenderTick(tick => tick + 1);
|
|
|
|
if (isClick) {
|
|
return;
|
|
}
|
|
|
|
let nextSelection = lassoShiftKeyRef.current ? new Set(selectedPointIdSet) : new Set<string>();
|
|
|
|
renderedPointsSorted.forEach(point => {
|
|
const isIntersecting = (
|
|
point.x + POINT_RADIUS >= left &&
|
|
point.x - POINT_RADIUS <= right &&
|
|
point.y + POINT_RADIUS >= top &&
|
|
point.y - POINT_RADIUS <= bottom
|
|
);
|
|
|
|
if (!isIntersecting) {
|
|
return;
|
|
}
|
|
|
|
if (lassoShiftKeyRef.current && nextSelection.has(point.id)) {
|
|
nextSelection.delete(point.id);
|
|
} else {
|
|
nextSelection.add(point.id);
|
|
}
|
|
});
|
|
|
|
await commitSelection(nextSelection);
|
|
preventBackgroundClearRef.current = true;
|
|
};
|
|
|
|
const handleBackgroundMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
|
|
if (isPointTarget(event.target) || dragStateRef.current) {
|
|
return;
|
|
}
|
|
|
|
if (KGPianoRollState.instance().getActiveTool() === 'pencil' || isModifierKeyPressed(event)) {
|
|
return;
|
|
}
|
|
|
|
const rect = event.currentTarget.getBoundingClientRect();
|
|
selectionBoxRef.current = {
|
|
startX: event.clientX - rect.left,
|
|
startY: event.clientY - rect.top,
|
|
endX: event.clientX - rect.left,
|
|
endY: event.clientY - rect.top,
|
|
};
|
|
lassoShiftKeyRef.current = event.shiftKey;
|
|
isLassoSelectingRef.current = true;
|
|
setSelectionBoxRenderTick(tick => tick + 1);
|
|
document.addEventListener('mousemove', handleLassoMouseMove);
|
|
document.addEventListener('mouseup', handleLassoMouseUp);
|
|
};
|
|
|
|
const handleCreatePoint = async (clientX: number, clientY: number) => {
|
|
if (!activeRegion || !parentTrack) {
|
|
return;
|
|
}
|
|
|
|
const coordinates = getLaneCoordinates(clientX, clientY);
|
|
if (!coordinates) {
|
|
return;
|
|
}
|
|
|
|
const rawAbsoluteBeat = (coordinates.x - keyWidth) / beatWidth;
|
|
const currentSnap = KGPianoRollState.instance().getCurrentSnap();
|
|
const absoluteBeat = currentSnap === 'NO SNAP'
|
|
? rawAbsoluteBeat
|
|
: getSnappedBeatPosition(rawAbsoluteBeat, currentSnap);
|
|
const relativeBeat = absoluteBeat - activeRegion.getStartFromBeat();
|
|
const value = toValue(coordinates.y);
|
|
|
|
if (automationType === 'pitch-bend') {
|
|
const command = new CreateMidiEventsCommand([], [{
|
|
regionId: activeRegion.getId(),
|
|
beat: relativeBeat,
|
|
value,
|
|
}]);
|
|
KGCore.instance().executeCommand(command);
|
|
const createdPitchBend = command.getCreatedPitchBends()[0]?.pitchBend;
|
|
if (createdPitchBend) {
|
|
await commitSelection(new Set([createdPitchBend.getId()]));
|
|
}
|
|
} else {
|
|
const controller = getControllerNumberForAutomationType(automationType);
|
|
if (controller === null) {
|
|
return;
|
|
}
|
|
|
|
const command = new CreateMidiEventsCommand([], [], [{
|
|
regionId: activeRegion.getId(),
|
|
controller,
|
|
beat: relativeBeat,
|
|
value,
|
|
}]);
|
|
KGCore.instance().executeCommand(command);
|
|
const createdControllerEvent = command.getCreatedControllerEvents()[0]?.controllerEvent;
|
|
if (createdControllerEvent) {
|
|
await commitSelection(new Set([createdControllerEvent.getId()]));
|
|
}
|
|
}
|
|
|
|
bumpAutomationRedrawVersion();
|
|
await updateTrack(parentTrack);
|
|
refreshProjectState();
|
|
preventBackgroundClearRef.current = true;
|
|
};
|
|
|
|
const handleBackgroundClick = async (event: React.MouseEvent<HTMLDivElement>) => {
|
|
if (isPointTarget(event.target)) {
|
|
return;
|
|
}
|
|
|
|
if (preventBackgroundClearRef.current) {
|
|
preventBackgroundClearRef.current = false;
|
|
return;
|
|
}
|
|
|
|
if (KGPianoRollState.instance().getActiveTool() === 'pencil' || isModifierKeyPressed(event)) {
|
|
if (event.detail > 1) {
|
|
return;
|
|
}
|
|
await handleCreatePoint(event.clientX, event.clientY);
|
|
return;
|
|
}
|
|
|
|
if (isLassoSelectingRef.current) {
|
|
return;
|
|
}
|
|
|
|
await commitSelection(new Set());
|
|
};
|
|
|
|
const handleBackgroundDoubleClick = async (event: React.MouseEvent<HTMLDivElement>) => {
|
|
if (isPointTarget(event.target)) {
|
|
return;
|
|
}
|
|
|
|
await handleCreatePoint(event.clientX, event.clientY);
|
|
};
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
cleanupDragListeners();
|
|
cleanupLassoListeners();
|
|
};
|
|
}, []);
|
|
|
|
const selectionBoxStyle = {
|
|
left: `${Math.min(selectionBoxRef.current.startX, selectionBoxRef.current.endX)}px`,
|
|
top: `${Math.min(selectionBoxRef.current.startY, selectionBoxRef.current.endY)}px`,
|
|
width: `${Math.abs(selectionBoxRef.current.endX - selectionBoxRef.current.startX)}px`,
|
|
height: `${Math.abs(selectionBoxRef.current.endY - selectionBoxRef.current.startY)}px`,
|
|
};
|
|
|
|
const isPointTarget = (target: EventTarget | null): boolean => (
|
|
target instanceof Element && target.closest('.piano-roll-automation-point') !== null
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className="piano-roll-automation-lane"
|
|
data-testid="piano-roll-automation-lane"
|
|
aria-label={`${laneLabel} automation lane`}
|
|
ref={laneRef}
|
|
>
|
|
<div className="piano-roll-automation-track" style={{ width: totalWidth }}>
|
|
<div className="piano-roll-automation-gutter" />
|
|
<div className="piano-roll-automation-lane-label">{laneLabel}</div>
|
|
<div
|
|
className={`piano-roll-automation-scroll-layer ${isModifierPressed ? 'pencil-cursor' : ''}`}
|
|
style={{ transform: `translateX(-${horizontalScrollLeft}px)` }}
|
|
onMouseDown={handleBackgroundMouseDown}
|
|
onClick={(event) => { void handleBackgroundClick(event); }}
|
|
onDoubleClick={(event) => { void handleBackgroundDoubleClick(event); }}
|
|
>
|
|
<div className="piano-roll-automation-grid" />
|
|
<svg
|
|
className="piano-roll-automation-svg"
|
|
width="100%"
|
|
height={laneHeight}
|
|
viewBox={`0 0 ${beatWidth * totalBeats + keyWidth} ${laneHeight}`}
|
|
preserveAspectRatio="none"
|
|
>
|
|
{interpolationMode === 'linear' && renderedPoints.length > 0 && (
|
|
<polyline
|
|
className="piano-roll-automation-line"
|
|
fill="none"
|
|
stroke={AUTOMATION_COLOR}
|
|
strokeWidth="2"
|
|
points={polylinePoints}
|
|
/>
|
|
)}
|
|
{interpolationMode === 'step' && stepSegments.map(segment => (
|
|
<line
|
|
key={segment.id}
|
|
className="piano-roll-automation-line"
|
|
x1={segment.x1}
|
|
y1={segment.y1}
|
|
x2={segment.x2}
|
|
y2={segment.y1}
|
|
stroke={AUTOMATION_COLOR}
|
|
strokeWidth="2"
|
|
/>
|
|
))}
|
|
{renderedPoints.map(point => {
|
|
const labelY = Math.max(14, Math.min(laneHeight - 6, point.y - 10));
|
|
|
|
return (
|
|
<g key={point.id}>
|
|
<circle
|
|
className={`piano-roll-automation-point${point.isSelected ? ' selected' : ''}`}
|
|
cx={point.x}
|
|
cy={point.y}
|
|
r={POINT_RADIUS}
|
|
fill={point.isSelected ? SELECTED_POINT_COLOR : AUTOMATION_COLOR}
|
|
stroke={point.isSelected ? SELECTED_POINT_COLOR : '#1d2428'}
|
|
strokeWidth={point.isSelected ? 3 : 2}
|
|
onMouseDown={(event) => { void handlePointMouseDown(point.id, event); }}
|
|
/>
|
|
<text
|
|
className="piano-roll-automation-value"
|
|
x={point.x + 6}
|
|
y={labelY}
|
|
fill={point.isSelected ? SELECTED_POINT_COLOR : AUTOMATION_COLOR}
|
|
>
|
|
{point.label}
|
|
</text>
|
|
</g>
|
|
);
|
|
})}
|
|
</svg>
|
|
{isLassoSelectingRef.current && (
|
|
<div
|
|
key={selectionBoxRenderTick}
|
|
className="piano-roll-automation-selection-box"
|
|
style={selectionBoxStyle}
|
|
/>
|
|
)}
|
|
</div>
|
|
{renderedPointsSorted.length === 0 && (
|
|
<div className="piano-roll-automation-empty-state">
|
|
No {laneLabel} events in this region
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PianoRollAutomationLane;
|