administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-09 12:45:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

account for initial click position on handlebar when dragging

Browse Source
This commit is contained in:
Josh Hawkins 2024-03-08 10:00:51 -06:00
parent dfab850b61
commit c2e3e4c09e
1 changed files with 15 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/hooks/use-handle-dragging.ts
View File

@ -35,6 +35,7 @@ function useDraggableHandler({
setIsDragging, setIsDragging,
}: DragHandlerProps) { }: DragHandlerProps) {
const [clientYPosition, setClientYPosition] = useState<number | null>(null); const [clientYPosition, setClientYPosition] = useState<number | null>(null);
const [initialClickAdjustment, setInitialClickAdjustment] = useState(0);
const draggingAtTopEdge = useMemo(() => { const draggingAtTopEdge = useMemo(() => {
if (clientYPosition && timelineRef.current) { if (clientYPosition && timelineRef.current) {
@ -81,8 +82,13 @@ function useDraggableHandler({
e.stopPropagation(); e.stopPropagation();
getClientYPosition(e); getClientYPosition(e);
setIsDragging(true); setIsDragging(true);
if (scrollTimeRef.current && clientYPosition) {
const handlebarRect = scrollTimeRef.current.getBoundingClientRect();
setInitialClickAdjustment(clientYPosition - handlebarRect.top);
}
}, },
[setIsDragging, getClientYPosition], [setIsDragging, getClientYPosition, scrollTimeRef, clientYPosition],
); );
const handleMouseUp = useCallback( const handleMouseUp = useCallback(
@ -93,6 +99,7 @@ function useDraggableHandler({
e.stopPropagation(); e.stopPropagation();
if (isDragging) { if (isDragging) {
setIsDragging(false); setIsDragging(false);
setInitialClickAdjustment(0);
} }
}, },
[isDragging, setIsDragging], [isDragging, setIsDragging],
@ -184,11 +191,17 @@ function useDraggableHandler({
const parentScrollTop = getCumulativeScrollTop(timelineRef.current); const parentScrollTop = getCumulativeScrollTop(timelineRef.current);
const newHandlePosition = Math.min( const newHandlePosition = Math.min(
// end of timeline
segmentHeight * (timelineDuration / segmentDuration) - segmentHeight * (timelineDuration / segmentDuration) -
segmentHeight * 2, segmentHeight * 2,
Math.max( Math.max(
// start of timeline
segmentHeight + scrolled, segmentHeight + scrolled,
clientYPosition - timelineTop + parentScrollTop, // current Y position
clientYPosition -
timelineTop +
parentScrollTop -
initialClickAdjustment,
), ),
); );