administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 20:25:26 +03:00
Code Issues Actions 2 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,
}: DragHandlerProps) {
const [clientYPosition, setClientYPosition] = useState<number | null>(null);
const [initialClickAdjustment, setInitialClickAdjustment] = useState(0);
const draggingAtTopEdge = useMemo(() => {
if (clientYPosition && timelineRef.current) {
@ -81,8 +82,13 @@ function useDraggableHandler({
e.stopPropagation();
getClientYPosition(e);
setIsDragging(true);
if (scrollTimeRef.current && clientYPosition) {
const handlebarRect = scrollTimeRef.current.getBoundingClientRect();
setInitialClickAdjustment(clientYPosition - handlebarRect.top);
}
},
[setIsDragging, getClientYPosition],
[setIsDragging, getClientYPosition, scrollTimeRef, clientYPosition],
);
const handleMouseUp = useCallback(
@ -93,6 +99,7 @@ function useDraggableHandler({
e.stopPropagation();
if (isDragging) {
setIsDragging(false);
setInitialClickAdjustment(0);
}
},
[isDragging, setIsDragging],
@ -184,11 +191,17 @@ function useDraggableHandler({
const parentScrollTop = getCumulativeScrollTop(timelineRef.current);
const newHandlePosition = Math.min(
// end of timeline
segmentHeight * (timelineDuration / segmentDuration) -
segmentHeight * 2,
Math.max(
// start of timeline
segmentHeight + scrolled,
clientYPosition - timelineTop + parentScrollTop,
// current Y position
clientYPosition -
timelineTop +
parentScrollTop -
initialClickAdjustment,
),
);