feat: implemented global tempo (bpm) track
This commit is contained in:
Xiaohan-Tian
@@ -0,0 +1,375 @@
|
||||
import React, { useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { KGTempoRegion } from '../../core/region/KGTempoRegion';
|
||||
import type { RegionClickOptions } from '../interfaces';
|
||||
import { isModifierKeyPressed } from '../../util/osUtil';
|
||||
import { TIME_CONSTANTS, TOOLBAR_CONSTANTS } from '../../constants';
|
||||
|
||||
interface GlobalTempoLaneProps {
|
||||
tempoRegions: KGTempoRegion[];
|
||||
maxBars: number;
|
||||
barWidthMultiplier: number;
|
||||
selectedRegionIds: string[];
|
||||
editingRegionId: string | null;
|
||||
editingText: string;
|
||||
onEditingTextChange: (value: string) => void;
|
||||
onCommitEdit: (regionId: string) => void;
|
||||
onCancelEdit: () => void;
|
||||
onBeginEdit: (regionId: string) => void;
|
||||
onSelectRegion: (regionId: string, options?: RegionClickOptions) => void;
|
||||
onCreateAtBar: (startBar: number) => void;
|
||||
onResizeRegion: (regionId: string, edge: 'start' | 'end', bar: number) => void;
|
||||
}
|
||||
|
||||
type ResizeEdge = 'start' | 'end' | null;
|
||||
|
||||
const REGION_EDGE_HITBOX_PX = 8;
|
||||
const DRAG_THRESHOLD_PX = 4;
|
||||
|
||||
const GlobalTempoLane: React.FC<GlobalTempoLaneProps> = ({
|
||||
tempoRegions,
|
||||
maxBars,
|
||||
barWidthMultiplier,
|
||||
selectedRegionIds,
|
||||
editingRegionId,
|
||||
editingText,
|
||||
onEditingTextChange,
|
||||
onCommitEdit,
|
||||
onCancelEdit,
|
||||
onBeginEdit,
|
||||
onSelectRegion,
|
||||
onCreateAtBar,
|
||||
onResizeRegion,
|
||||
}) => {
|
||||
const laneRef = useRef<HTMLDivElement | null>(null);
|
||||
const [previewBars, setPreviewBars] = useState<Record<string, { startBar: number; lengthBars: number }>>({});
|
||||
const [hoverEdges, setHoverEdges] = useState<Record<string, ResizeEdge>>({});
|
||||
const [isModifierPressed, setIsModifierPressed] = useState(false);
|
||||
const interactionRef = useRef<{
|
||||
mode: 'resize' | null;
|
||||
regionId: string;
|
||||
resizeEdge: ResizeEdge;
|
||||
initialMouseX: number;
|
||||
moved: boolean;
|
||||
} | null>(null);
|
||||
|
||||
const barWidth = useMemo(
|
||||
() => TOOLBAR_CONSTANTS.BASE_BAR_WIDTH * barWidthMultiplier,
|
||||
[barWidthMultiplier]
|
||||
);
|
||||
|
||||
const regionOrder = useMemo(
|
||||
() => tempoRegions.map(region => region.getId()),
|
||||
[tempoRegions]
|
||||
);
|
||||
|
||||
const getRegionIndex = (regionId: string) => regionOrder.findIndex(candidateId => candidateId === regionId);
|
||||
const canResizeEdge = (regionId: string, edge: 'start' | 'end') => {
|
||||
const regionIndex = getRegionIndex(regionId);
|
||||
if (regionIndex === -1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (edge === 'start') {
|
||||
return regionIndex > 0;
|
||||
}
|
||||
|
||||
return regionIndex < tempoRegions.length - 1;
|
||||
};
|
||||
|
||||
const getRenderedBarState = (region: KGTempoRegion) => (
|
||||
previewBars[region.getId()] ?? {
|
||||
startBar: region.getStartBar(),
|
||||
lengthBars: region.getLengthBars(),
|
||||
}
|
||||
);
|
||||
|
||||
const getResizeEdgeFromMouseEvent = (event: React.MouseEvent<HTMLDivElement, MouseEvent>): ResizeEdge => {
|
||||
const rect = event.currentTarget.getBoundingClientRect();
|
||||
const offsetX = event.clientX - rect.left;
|
||||
|
||||
if (offsetX <= REGION_EDGE_HITBOX_PX) {
|
||||
return 'start';
|
||||
}
|
||||
|
||||
if (rect.width - offsetX <= REGION_EDGE_HITBOX_PX) {
|
||||
return 'end';
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const getBarFromClientX = (clientX: number) => {
|
||||
if (!laneRef.current) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const rect = laneRef.current.getBoundingClientRect();
|
||||
const relativeX = clientX - rect.left;
|
||||
return Math.max(0, Math.min(maxBars, Math.round(relativeX / barWidth)));
|
||||
};
|
||||
|
||||
const getCreateBarFromClientX = (clientX: number) => {
|
||||
if (!laneRef.current) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
const rect = laneRef.current.getBoundingClientRect();
|
||||
const relativeX = clientX - rect.left;
|
||||
return Math.max(0, Math.min(maxBars - 1, Math.floor(relativeX / barWidth)));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (isModifierKeyPressed(event)) {
|
||||
setIsModifierPressed(true);
|
||||
}
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
onCancelEdit();
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyUp = (event: KeyboardEvent) => {
|
||||
if (!isModifierKeyPressed(event)) {
|
||||
setIsModifierPressed(false);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
window.addEventListener('keyup', handleKeyUp);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
window.removeEventListener('keyup', handleKeyUp);
|
||||
};
|
||||
}, [onCancelEdit]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleMouseMove = (event: MouseEvent) => {
|
||||
if (!interactionRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const interaction = interactionRef.current;
|
||||
const deltaX = event.clientX - interaction.initialMouseX;
|
||||
if (Math.abs(deltaX) >= DRAG_THRESHOLD_PX) {
|
||||
interaction.moved = true;
|
||||
}
|
||||
|
||||
if (interaction.mode !== 'resize' || !interaction.resizeEdge) {
|
||||
return;
|
||||
}
|
||||
|
||||
const targetRegion = tempoRegions.find(region => region.getId() === interaction.regionId);
|
||||
if (!targetRegion) {
|
||||
return;
|
||||
}
|
||||
|
||||
const targetIndex = getRegionIndex(interaction.regionId);
|
||||
const desiredBoundaryBar = getBarFromClientX(event.clientX);
|
||||
|
||||
if (interaction.resizeEdge === 'start' && targetIndex > 0) {
|
||||
const previousRegion = tempoRegions[targetIndex - 1];
|
||||
const targetEndBar = targetRegion.getEndBar();
|
||||
const clampedBoundaryBar = Math.max(
|
||||
previousRegion.getStartBar() + 1,
|
||||
Math.min(desiredBoundaryBar, targetEndBar - 1)
|
||||
);
|
||||
|
||||
setPreviewBars({
|
||||
[previousRegion.getId()]: {
|
||||
startBar: previousRegion.getStartBar(),
|
||||
lengthBars: clampedBoundaryBar - previousRegion.getStartBar(),
|
||||
},
|
||||
[targetRegion.getId()]: {
|
||||
startBar: clampedBoundaryBar,
|
||||
lengthBars: targetEndBar - clampedBoundaryBar,
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (interaction.resizeEdge === 'end' && targetIndex < tempoRegions.length - 1) {
|
||||
const nextRegion = tempoRegions[targetIndex + 1];
|
||||
const nextEndBar = nextRegion.getEndBar();
|
||||
const clampedBoundaryBar = Math.max(
|
||||
targetRegion.getStartBar() + 1,
|
||||
Math.min(desiredBoundaryBar, nextEndBar - 1)
|
||||
);
|
||||
|
||||
setPreviewBars({
|
||||
[targetRegion.getId()]: {
|
||||
startBar: targetRegion.getStartBar(),
|
||||
lengthBars: clampedBoundaryBar - targetRegion.getStartBar(),
|
||||
},
|
||||
[nextRegion.getId()]: {
|
||||
startBar: clampedBoundaryBar,
|
||||
lengthBars: nextEndBar - clampedBoundaryBar,
|
||||
},
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleMouseUp = (event: MouseEvent) => {
|
||||
if (!interactionRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
const interaction = interactionRef.current;
|
||||
interactionRef.current = null;
|
||||
const resizeEdge = interaction.resizeEdge;
|
||||
const shouldResize = interaction.moved && resizeEdge !== null;
|
||||
setPreviewBars({});
|
||||
|
||||
if (!shouldResize) {
|
||||
onSelectRegion(interaction.regionId, { shiftKey: event.shiftKey });
|
||||
return;
|
||||
}
|
||||
|
||||
onResizeRegion(interaction.regionId, resizeEdge, getBarFromClientX(event.clientX));
|
||||
};
|
||||
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mouseup', handleMouseUp);
|
||||
return () => {
|
||||
window.removeEventListener('mousemove', handleMouseMove);
|
||||
window.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
}, [getBarFromClientX, onResizeRegion, onSelectRegion, tempoRegions]);
|
||||
|
||||
const handleLaneMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (event.button !== 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!(event.target instanceof HTMLElement) || event.target.closest('.global-tempo-region')) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isModifierKeyPressed(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
onCreateAtBar(getCreateBarFromClientX(event.clientX));
|
||||
};
|
||||
|
||||
const handleLaneDoubleClick = (event: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (!(event.target instanceof HTMLElement) || event.target.closest('.global-tempo-region')) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
onCreateAtBar(getCreateBarFromClientX(event.clientX));
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={laneRef}
|
||||
className={`global-marker-lane global-tempo-lane${isModifierPressed ? ' pencil-cursor' : ''}`}
|
||||
onMouseDown={handleLaneMouseDown}
|
||||
onDoubleClick={handleLaneDoubleClick}
|
||||
>
|
||||
{tempoRegions.map(region => {
|
||||
const rendered = getRenderedBarState(region);
|
||||
const isSelected = selectedRegionIds.includes(region.getId());
|
||||
const isEditing = editingRegionId === region.getId();
|
||||
const left = rendered.startBar * barWidth;
|
||||
const clampedEndBar = Math.max(rendered.startBar, Math.min(rendered.startBar + rendered.lengthBars, maxBars));
|
||||
const widthBars = Math.max(0, clampedEndBar - rendered.startBar);
|
||||
const width = Math.max(barWidth, widthBars * barWidth);
|
||||
|
||||
if (rendered.startBar >= maxBars || widthBars <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={region.getId()}
|
||||
className={`global-marker-region global-tempo-region${isSelected ? ' selected' : ''}`}
|
||||
style={{
|
||||
left: `${left}px`,
|
||||
width: `${width}px`,
|
||||
cursor: isEditing ? 'text' : hoverEdges[region.getId()] ? 'col-resize' : 'pointer',
|
||||
}}
|
||||
onMouseEnter={() => setHoverEdges(prev => ({ ...prev, [region.getId()]: null }))}
|
||||
onMouseMove={(event) => {
|
||||
if (isEditing) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextEdge = getResizeEdgeFromMouseEvent(event);
|
||||
const normalizedEdge = nextEdge && canResizeEdge(region.getId(), nextEdge) ? nextEdge : null;
|
||||
setHoverEdges(prev => ({ ...prev, [region.getId()]: normalizedEdge }));
|
||||
}}
|
||||
onMouseLeave={() => setHoverEdges(prev => ({ ...prev, [region.getId()]: null }))}
|
||||
onMouseDown={(event) => {
|
||||
if (event.button !== 0 || isEditing) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextEdge = getResizeEdgeFromMouseEvent(event);
|
||||
const normalizedEdge = nextEdge && canResizeEdge(region.getId(), nextEdge) ? nextEdge : null;
|
||||
if (!normalizedEdge) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
interactionRef.current = {
|
||||
mode: 'resize',
|
||||
regionId: region.getId(),
|
||||
resizeEdge: normalizedEdge,
|
||||
initialMouseX: event.clientX,
|
||||
moved: false,
|
||||
};
|
||||
}}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
onSelectRegion(region.getId(), { shiftKey: event.shiftKey });
|
||||
}}
|
||||
onDoubleClick={(event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
onSelectRegion(region.getId(), { shiftKey: false });
|
||||
onBeginEdit(region.getId());
|
||||
}}
|
||||
>
|
||||
{isEditing ? (
|
||||
<input
|
||||
className="global-marker-input"
|
||||
value={editingText}
|
||||
inputMode="numeric"
|
||||
pattern="[0-9]*"
|
||||
onChange={(event) => {
|
||||
const digitsOnly = event.target.value.replace(/\D+/g, '');
|
||||
onEditingTextChange(digitsOnly);
|
||||
}}
|
||||
onBlur={() => onCommitEdit(region.getId())}
|
||||
onMouseDown={(event) => {
|
||||
event.stopPropagation();
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
onCommitEdit(region.getId());
|
||||
} else if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
onCancelEdit();
|
||||
}
|
||||
}}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<span className="global-marker-label">{region.getDisplayName()}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GlobalTempoLane;
|
||||
Reference in New Issue
Block a user