fix PageLayout resize not only if mouse is on resize gap

Author: niklaskerkhoff

src/components/layout/page-layout/PageLayout.tsx

@@ -25,6 +25,7 @@ interface PageSidebarProps {
   split: number;
   resizeHandleSize: number;
   islandGap: number;
+  onResizeStart: () => void;
   onResizeSplit: (delta: number) => void;
 }
 
@@ -45,6 +46,10 @@ export function PageLayout({
     rightWidth,
     leftSplit,
     rightSplit,
+    startResizeLeftSidebar,
+    startResizeRightSidebar,
+    startResizeLeftSidebarSplit,
+    startResizeRightSidebarSplit,
     resizeLeftSidebar,
     resizeRightSidebar,
     resizeLeftSidebarSplit,
@@ -92,11 +97,13 @@ export function PageLayout({
               split={leftSplit}
               resizeHandleSize={RESIZE_HANDLE_SIZE}
               islandGap={ISLAND_GAP}
+              onResizeStart={startResizeLeftSidebarSplit}
               onResizeSplit={resizeLeftSidebarSplit}
             />
 
             <ResizeHandle
               orientation="vertical"
+              onResizeStart={startResizeLeftSidebar}
               onResize={resizeLeftSidebar}
               size={RESIZE_HANDLE_SIZE}
               gapSize={ISLAND_GAP}
@@ -137,6 +144,7 @@ export function PageLayout({
           >
             <ResizeHandle
               orientation="vertical"
+              onResizeStart={startResizeRightSidebar}
               onResize={resizeRightSidebar}
               size={RESIZE_HANDLE_SIZE}
               gapSize={ISLAND_GAP}
@@ -153,6 +161,7 @@ export function PageLayout({
               split={rightSplit}
               resizeHandleSize={RESIZE_HANDLE_SIZE}
               islandGap={ISLAND_GAP}
+              onResizeStart={startResizeRightSidebarSplit}
               onResizeSplit={resizeRightSidebarSplit}
             />
           </Box>
@@ -170,6 +179,7 @@ function PageSidebar({
   split,
   resizeHandleSize,
   islandGap,
+  onResizeStart,
   onResizeSplit,
 }: PageSidebarProps) {
   const hasTopContent = hasContent(topContent);
@@ -198,6 +208,7 @@ function PageSidebar({
 
         <ResizeHandle
           orientation="horizontal"
+          onResizeStart={onResizeStart}
           onResize={onResizeSplit}
           size={resizeHandleSize}
           gapSize={islandGap}

src/components/layout/page-layout/ResizeHandle.tsx

@@ -3,6 +3,7 @@ import { PointerEvent, useRef } from "react";
 
 interface ResizeHandleProps {
   orientation: "horizontal" | "vertical";
+  onResizeStart: () => void;
   onResize: (delta: number) => void;
   size: number;
   gapSize: number;
@@ -13,6 +14,7 @@ interface ResizeHandleProps {
 
 export function ResizeHandle({
   orientation,
+  onResizeStart,
   onResize,
   size,
   gapSize,
@@ -30,6 +32,7 @@ export function ResizeHandle({
     event.preventDefault();
 
     startPositionRef.current = getPointerPosition(event);
+    onResizeStart();
     event.currentTarget.setPointerCapture(event.pointerId);
 
     document.body.style.cursor = cursor;
@@ -43,7 +46,6 @@ export function ResizeHandle({
 
     const currentPosition = getPointerPosition(event);
     const movement = currentPosition - startPositionRef.current;
-    startPositionRef.current = currentPosition;
 
     onResize(invertDelta ? -movement : movement);
   };

src/components/layout/page-layout/useResize.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 const DEFAULT_SIDEBAR_WIDTH = 300;
 const DEFAULT_SIDEBAR_SPLIT = 50;
@@ -28,6 +28,10 @@ export function useResize({
   const [leftSplit, setLeftSplit] = useState(DEFAULT_SIDEBAR_SPLIT);
   const [rightSplit, setRightSplit] = useState(DEFAULT_SIDEBAR_SPLIT);
   const [storageLoaded, setStorageLoaded] = useState(false);
+  const leftWidthAtDragStart = useRef(leftWidth);
+  const rightWidthAtDragStart = useRef(rightWidth);
+  const leftSplitAtDragStart = useRef(leftSplit);
+  const rightSplitAtDragStart = useRef(rightSplit);
 
   useEffect(() => {
     // eslint-disable-next-line react-hooks/set-state-in-effect
@@ -83,50 +87,64 @@ export function useResize({
   };
 
   const resizeLeftSidebar = (delta: number) => {
-    setLeftWidth((currentWidth) => {
-      const maximumWidth = getMaximumSidebarWidth(rightWidth, hasRightSidebar);
+    const maximumWidth = getMaximumSidebarWidth(rightWidth, hasRightSidebar);
 
-      return Math.min(
+    setLeftWidth(
+      clamp(
+        leftWidthAtDragStart.current + delta,
+        MIN_SIDEBAR_WIDTH,
         maximumWidth,
-        Math.max(MIN_SIDEBAR_WIDTH, currentWidth + delta),
-      );
-    });
+      ),
+    );
   };
 
   const resizeRightSidebar = (delta: number) => {
-    setRightWidth((currentWidth) => {
-      const maximumWidth = getMaximumSidebarWidth(leftWidth, hasLeftSidebar);
+    const maximumWidth = getMaximumSidebarWidth(leftWidth, hasLeftSidebar);
 
-      return Math.min(
+    setRightWidth(
+      clamp(
+        rightWidthAtDragStart.current + delta,
+        MIN_SIDEBAR_WIDTH,
         maximumWidth,
-        Math.max(MIN_SIDEBAR_WIDTH, currentWidth + delta),
-      );
-    });
+      ),
+    );
   };
 
-  const getResizedSplit = (currentSplit: number, delta: number) => {
+  const getResizedSplit = (splitAtDragStart: number, delta: number) => {
     const availableHeight = window.innerHeight - islandGap * 3;
 
     if (availableHeight <= 0) {
-      return currentSplit;
+      return splitAtDragStart;
     }
 
-    return clamp(currentSplit + (delta / availableHeight) * 100, 0, 100);
+    return clamp(splitAtDragStart + (delta / availableHeight) * 100, 0, 100);
   };
 
   const resizeLeftSidebarSplit = (delta: number) => {
-    setLeftSplit((currentSplit) => getResizedSplit(currentSplit, delta));
+    setLeftSplit(getResizedSplit(leftSplitAtDragStart.current, delta));
   };
 
   const resizeRightSidebarSplit = (delta: number) => {
-    setRightSplit((currentSplit) => getResizedSplit(currentSplit, delta));
+    setRightSplit(getResizedSplit(rightSplitAtDragStart.current, delta));
   };
 
   return {
     leftWidth,
     rightWidth,
     leftSplit,
     rightSplit,
+    startResizeLeftSidebar: () => {
+      leftWidthAtDragStart.current = leftWidth;
+    },
+    startResizeRightSidebar: () => {
+      rightWidthAtDragStart.current = rightWidth;
+    },
+    startResizeLeftSidebarSplit: () => {
+      leftSplitAtDragStart.current = leftSplit;
+    },
+    startResizeRightSidebarSplit: () => {
+      rightSplitAtDragStart.current = rightSplit;
+    },
     resizeLeftSidebar,
     resizeRightSidebar,
     resizeLeftSidebarSplit,