github/OpenHands
1
1
Fork 0
mirror of https://github.com/All-Hands-AI/OpenHands.git synced 2026-01-09 14:57:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

Bug fix drag resize (#3307)

Browse Source 
* Fix issue where mouse drag fails on first attempt

* Detach event correctly

* Use old variable names

---------

Co-authored-by: Tim O'Farrell <tofarr@Tims-MacBook-Pro-2.local>
Co-authored-by: tobitege <tobitege@gmx.de>
This commit is contained in:
tofarr
2024-08-09 09:31:29 -06:00
committed by GitHub
parent d2a8ff0918
commit f8c815279d
1 changed files with 45 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
frontend/src/components/Resizable.tsx
View File

@@ -25,49 +25,58 @@ export function Container({
orientation,
initialSize,
}: ContainerProps): JSX.Element {
const [firstSize, setFirstSize] = useState<number | undefined>(initialSize);
const [dividerPosition, setDividerPosition] = useState<undefined | number>(
undefined,
);
const [firstSize, setFirstSize] = useState<number>(initialSize);
const [dividerPosition, setDividerPosition] = useState<number | null>(null);
const firstRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (firstRef.current !== null) {
if (orientation === Orientation.HORIZONTAL) {
firstRef.current.style.width = `${firstSize}px`;
} else {
firstRef.current.style.height = `${firstSize}px`;
}
if (dividerPosition == null || !firstRef.current) {
return undefined;
}
}, [firstSize, orientation]);
const onMouseMove = (e: MouseEvent) => {
e.preventDefault();
if (firstSize && dividerPosition) {
if (orientation === Orientation.HORIZONTAL) {
const newLeftWidth = firstSize + e.clientX - dividerPosition;
setDividerPosition(e.clientX);
setFirstSize(newLeftWidth);
} else {
const newTopHeight = firstSize + e.clientY - dividerPosition;
setDividerPosition(e.clientY);
setFirstSize(newTopHeight);
const getFirstSizeFromEvent = (e: MouseEvent) => {
const position =
orientation === Orientation.HORIZONTAL ? e.clientX : e.clientY;
return firstSize + position - dividerPosition;
};
const onMouseMove = (e: MouseEvent) => {
e.preventDefault();
const newFirstSize = getFirstSizeFromEvent(e);
const { current } = firstRef;
if (current) {
if (orientation === Orientation.HORIZONTAL) {
current.style.width = `${newFirstSize}px`;
} else {
current.style.height = `${newFirstSize}px`;
}
}
}
};
const onMouseUp = () => {
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("mouseup", onMouseUp);
};
};
const onMouseUp = (e: MouseEvent) => {
e.preventDefault();
setFirstSize(getFirstSizeFromEvent(e));
setDividerPosition(null);
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("mouseup", onMouseUp);
};
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("mouseup", onMouseUp);
return () => {
document.removeEventListener("mousemove", onMouseMove);
document.removeEventListener("mouseup", onMouseUp);
};
}, [dividerPosition, firstSize, orientation]);
const onMouseDown = (e: React.MouseEvent) => {
e.preventDefault();
setDividerPosition(
orientation === Orientation.HORIZONTAL ? e.clientX : e.clientY,
);
document.addEventListener("mousemove", onMouseMove);
document.addEventListener("mouseup", onMouseUp);
const position =
orientation === Orientation.HORIZONTAL ? e.clientX : e.clientY;
setDividerPosition(position);
};
const getStyleForFirst = () => {
if (orientation === Orientation.HORIZONTAL) {
return { width: `${firstSize}px` };
}
return { height: `${firstSize}px` };
};
return (
@@ -77,7 +86,7 @@ export function Container({
className,
)}
>
<div ref={firstRef} className={firstClassName}>
<div ref={firstRef} className={firstClassName} style={getStyleForFirst()}>
{firstChild}
</div>
<div