Labyricorn/voicebox
1
0
Fork 0
mirror of https://github.com/jamiepine/voicebox.git synced 2026-10-03 09:05:17 -07:00
Code Issues Packages Projects Releases Wiki Activity

Refactor StoryTrackEditor to account for time ruler height during drag operations

Browse Source 
- Introduced a constant for TIME_RULER_HEIGHT to improve code readability.
- Updated drag position calculations to subtract the time ruler height, ensuring accurate positioning of clips relative to the tracks area.
This commit is contained in:
Jamie Pine
2026-01-29 15:31:23 -08:00
parent fa7ac88abc
commit bb6cea24ba
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/components/StoriesTab/StoryTrackEditor.tsx
+5 -2
View File
@@ -111,6 +111,7 @@ interface StoryTrackEditorProps {
} }
const TRACK_HEIGHT = 48; const TRACK_HEIGHT = 48;
const TIME_RULER_HEIGHT = 24; // h-6 = 1.5rem = 24px
const MIN_PIXELS_PER_SECOND = 10; const MIN_PIXELS_PER_SECOND = 10;
const MAX_PIXELS_PER_SECOND = 200; const MAX_PIXELS_PER_SECOND = 200;
const DEFAULT_PIXELS_PER_SECOND = 50; const DEFAULT_PIXELS_PER_SECOND = 50;
@@ -589,7 +590,8 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
}); });
setDragPosition({ setDragPosition({
x: rect.left - tracksRef.current.getBoundingClientRect().left + tracksRef.current.scrollLeft, x: rect.left - tracksRef.current.getBoundingClientRect().left + tracksRef.current.scrollLeft,
y: rect.top - tracksRef.current.getBoundingClientRect().top, // Subtract ruler height since clips are positioned relative to tracks area, not the scrollable container
y: rect.top - tracksRef.current.getBoundingClientRect().top - TIME_RULER_HEIGHT,
}); });
setDraggingItem(item.id); setDraggingItem(item.id);
}; };
@@ -600,7 +602,8 @@ export function StoryTrackEditor({ storyId, items }: StoryTrackEditorProps) {
const rect = tracksRef.current.getBoundingClientRect(); const rect = tracksRef.current.getBoundingClientRect();
const x = e.clientX - rect.left + tracksRef.current.scrollLeft - dragOffset.x; const x = e.clientX - rect.left + tracksRef.current.scrollLeft - dragOffset.x;
const y = e.clientY - rect.top - dragOffset.y; // Subtract ruler height since clips are positioned relative to tracks area
const y = e.clientY - rect.top - dragOffset.y - TIME_RULER_HEIGHT;
setDragPosition({ x: Math.max(0, x), y }); setDragPosition({ x: Math.max(0, x), y });
}, },