feat: add snap-to-grid toggle for track grid regions and playhead

This commit is contained in:
Xiaohan-Tian
2026-04-10 20:57:34 -07:00
parent 1670679c61
commit d94b53dcf5
6 changed files with 54 additions and 18 deletions
+13 -9
View File
@@ -268,20 +268,23 @@ const TrackGridItem: React.FC<TrackGridItemProps> = ({
// If the mouse was moved and we have current values, calculate the new values
if (mouseMoved.current && currentResizeWidth.current !== null && currentResizeLeft.current !== null) {
const snap = KGMainContentState.instance().isSnappingEnabled();
if (resizeAction === 'end') {
// End resize: round length to nearest bar
newLength = Math.max(REGION_CONSTANTS.MIN_REGION_LENGTH, Math.round(currentResizeWidth.current / barWidth));
// End resize: snap length to nearest bar, or use raw value
const rawLength = currentResizeWidth.current / barWidth;
newLength = Math.max(REGION_CONSTANTS.MIN_REGION_LENGTH, snap ? Math.round(rawLength) : rawLength);
} else if (resizeAction === 'start') {
// Start resize: round bar number and adjust length accordingly
// Start resize: snap bar number, or use raw value
const rawBarNumber = currentResizeLeft.current / barWidth + 1;
newBarNumber = Math.max(1, Math.round(rawBarNumber));
newBarNumber = Math.max(1, snap ? Math.round(rawBarNumber) : rawBarNumber);
// Calculate the difference from the initial position
const barDiff = initialBarNumberRef.current! - newBarNumber;
// Adjust length to maintain the end position
newLength = initialLengthRef.current! + barDiff;
// Ensure minimum length
if (newLength < REGION_CONSTANTS.MIN_REGION_LENGTH) {
newLength = REGION_CONSTANTS.MIN_REGION_LENGTH;
@@ -434,9 +437,10 @@ const TrackGridItem: React.FC<TrackGridItemProps> = ({
// If the mouse was moved, calculate the final position
if (mouseMoved.current && currentDragLeft.current !== null && currentDragTop.current !== null) {
// Calculate the new bar number and round to nearest integer
// Calculate the new bar number; snap to nearest integer when snapping is on
const snap = KGMainContentState.instance().isSnappingEnabled();
const rawBarNumber = (currentDragLeft.current / barWidth) + 1;
finalBarNumber = Math.max(1, Math.round(rawBarNumber));
finalBarNumber = Math.max(1, snap ? Math.round(rawBarNumber) : rawBarNumber);
// Calculate the closest track based on vertical position
if (allTracks && allTracks.length > 0 && gridContainerRef.current) {