Support RTL mode for mouse drag inertia effect

Compared to LTR were the "scrollLeft" value is >= 0, for RTL it's <= 0 which was not handled and thus on applying the inertia effect, "scrollLeft" was always set to 0 due to preventing negative values
This commit is contained in:
schroda
2024-12-09 16:11:51 +01:00
parent 1387a016c7
commit 9c5382ebd7

View File

@@ -31,6 +31,7 @@ export const useMouseDragScroll = (
) => { ) => {
const [isDragging, setIsDragging] = useState(false); const [isDragging, setIsDragging] = useState(false);
const elementStyle = useRef<CSSStyleDeclaration>();
const previousClickPosX = useRef<Positions>([0, 0, 0]); const previousClickPosX = useRef<Positions>([0, 0, 0]);
const previousClickPosY = useRef<Positions>([0, 0, 0]); const previousClickPosY = useRef<Positions>([0, 0, 0]);
const previousClickTime = useRef<ClickTimes>([0, 0, 0]); const previousClickTime = useRef<ClickTimes>([0, 0, 0]);
@@ -44,6 +45,11 @@ export const useMouseDragScroll = (
return () => {}; return () => {};
} }
if (!elementStyle.current) {
elementStyle.current = getComputedStyle(element);
}
const isRTL = elementStyle.current.direction;
const handleScrollX = scrollDirection !== ScrollDirection.Y; const handleScrollX = scrollDirection !== ScrollDirection.Y;
const handleScrollY = scrollDirection !== ScrollDirection.X; const handleScrollY = scrollDirection !== ScrollDirection.X;
@@ -103,7 +109,7 @@ export const useMouseDragScroll = (
element.scrollHeight - element.clientHeight, element.scrollHeight - element.clientHeight,
]; ];
const newScrollPos = [ const newScrollPos = [
Math.min(maxScrollPos[X], Math.max(0, scrollAtT0.current[X] - delta[X])), Math.min(maxScrollPos[X], Math.max(isRTL ? -maxScrollPos[X] : 0, scrollAtT0.current[X] - delta[X])),
Math.min(maxScrollPos[Y], Math.max(0, scrollAtT0.current[Y] - delta[Y])), Math.min(maxScrollPos[Y], Math.max(0, scrollAtT0.current[Y] - delta[Y])),
]; ];