From d8fb65be4d5926f3e210287c29fd95cf1e4ccc67 Mon Sep 17 00:00:00 2001
From: "duncan@dtail-design.nl" <duncan@dtail-design.nl>
Date: Fri, 29 Mar 2024 18:45:47 +0100
Subject: [PATCH] fix(resize): fix the position of the drag, and set a minimum
width/height
---
libs/shared/lib/components/Resizable.tsx | 20 ++++++++++++++------
1 file changed, 14 insertions(+), 6 deletions(-)
diff --git a/libs/shared/lib/components/Resizable.tsx b/libs/shared/lib/components/Resizable.tsx
index 2fd89d32a..8fb998b29 100644
--- a/libs/shared/lib/components/Resizable.tsx
+++ b/libs/shared/lib/components/Resizable.tsx
@@ -54,15 +54,23 @@ export const Resizable = ({
setDragging(false);
window.removeEventListener('mouseup', onMouseUp);
};
+
function onMouseMove(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
if (dragging) {
- if (horizontal && ref.current) {
+ if (ref.current) {
const rect = ref.current.getBoundingClientRect();
- setFirstSize(e.clientX);
- setSecondSize(rect.width - e.clientX);
- } else {
- setFirstSize(e.clientY);
- setSecondSize(window.innerHeight - e.clientY);
+ const relativeX = e.clientX - rect.left;
+ const relativeY = e.clientY - rect.top;
+ const minSizeX = 16;
+ const minSizeY = 28;
+
+ if (horizontal) {
+ setFirstSize(Math.max(minSizeX, relativeX));
+ setSecondSize(Math.max(minSizeX, rect.width - relativeX));
+ } else {
+ setFirstSize(Math.max(minSizeY, relativeY));
+ setSecondSize(Math.max(minSizeY, rect.height - relativeY));
+ }
}
}
}
--
GitLab