react-resizable-panels 0.0.11 → 0.0.13

package/src/PanelGroup.tsx

@@ -8,12 +8,11 @@ import {
   useRef,
   useState,
 } from "react";
-import useUniqueId from "./hooks/useUniqueId";
 
 import { PanelContext, PanelGroupContext } from "./PanelContexts";
 import { Direction, PanelData, ResizeEvent } from "./types";
 import { loadPanelLayout, savePanelGroupLayout } from "./utils/serialization";
-import { getMovement } from "./utils/coordinates";
+import { getDragOffset, getMovement } from "./utils/coordinates";
 import {
   adjustByDelta,
   getOffset,
@@ -22,6 +21,7 @@ import {
   panelsMapToSortedArray,
 } from "./utils/group";
 import { useWindowSplitterPanelGroupBehavior } from "./hooks/useWindowSplitterBehavior";
+import useUniqueId from "./hooks/useUniqueId";
 
 export type CommittedValues = {
   direction: Direction;
@@ -39,6 +39,7 @@ type Props = {
   className?: string;
   direction: Direction;
   height: number;
+  id?: string | null;
   width: number;
 };
 
@@ -52,9 +53,10 @@ export default function PanelGroup({
   className = "",
   direction,
   height,
+  id: idFromProps = null,
   width,
 }: Props) {
-  const groupId = useUniqueId();
+  const groupId = useUniqueId(idFromProps);
 
   const [activeHandleId, setActiveHandleId] = useState<string | null>(null);
   const [panels, setPanels] = useState<PanelDataMap>(new Map());
@@ -62,6 +64,8 @@ export default function PanelGroup({
   // 0-1 values representing the relative size of each panel.
   const [sizes, setSizes] = useState<number[]>([]);
 
+  const dragOffsetRef = useRef<number>(0);
+
   // Store committed values to avoid unnecessarily re-running memoization/effects functions.
   const committedValuesRef = useRef<CommittedValues>({
     direction,
@@ -200,7 +204,8 @@ export default function PanelGroup({
           event,
           handleId,
           { height, width },
-          direction
+          direction,
+          dragOffsetRef.current
         );
 
         const isHorizontal = direction === "horizontal";
@@ -243,7 +248,11 @@ export default function PanelGroup({
       groupId,
       registerPanel,
       registerResizeHandle,
-      startDragging: (id: string) => setActiveHandleId(id),
+      startDragging: (id: string, event: ResizeEvent) => {
+        setActiveHandleId(id);
+
+        dragOffsetRef.current = getDragOffset(event, id, direction);
+      },
       stopDragging: () => {
         setActiveHandleId(null);
       },
@@ -269,7 +278,13 @@ export default function PanelGroup({
   return (
     <PanelContext.Provider value={panelContext}>
       <PanelGroupContext.Provider value={panelGroupContext}>
-        <div className={className}>{children}</div>
+        <div
+          className={className}
+          data-panel-group-id={groupId}
+          style={{ height, position: "relative", width }}
+        >
+          {children}
+        </div>
       </PanelGroupContext.Provider>
     </PanelContext.Provider>
   );

package/src/PanelResizeHandle.tsx

@@ -6,8 +6,8 @@ import {
   useRef,
   useState,
 } from "react";
-
 import useUniqueId from "./hooks/useUniqueId";
+
 import { useWindowSplitterResizeHandlerBehavior } from "./hooks/useWindowSplitterBehavior";
 import { PanelContext, PanelGroupContext } from "./PanelContexts";
 import type { ResizeHandler, ResizeEvent } from "./types";
@@ -16,7 +16,7 @@ export default function PanelResizeHandle({
   children = null,
   className = "",
   disabled = false,
-  id: idProp = null,
+  id: idFromProps = null,
 }: {
   children?: ReactNode;
   className?: string;
@@ -33,8 +33,6 @@ export default function PanelResizeHandle({
     );
   }
 
-  const id = useUniqueId(idProp);
-
   const { activeHandleId } = panelContext;
   const {
     direction,
@@ -44,7 +42,8 @@ export default function PanelResizeHandle({
     stopDragging,
   } = panelGroupContext;
 
-  const isDragging = activeHandleId === id;
+  const resizeHandleId = useUniqueId(idFromProps);
+  const isDragging = activeHandleId === resizeHandleId;
 
   const [resizeHandler, setResizeHandler] = useState<ResizeHandler | null>(
     null
@@ -63,10 +62,10 @@ export default function PanelResizeHandle({
     if (disabled) {
       setResizeHandler(null);
     } else {
-      const resizeHandler = registerResizeHandle(id);
+      const resizeHandler = registerResizeHandle(resizeHandleId);
       setResizeHandler(() => resizeHandler);
     }
-  }, [disabled, id, registerResizeHandle]);
+  }, [disabled, resizeHandleId, registerResizeHandle]);
 
   useEffect(() => {
     if (disabled || resizeHandler == null || !isDragging) {
@@ -80,6 +79,7 @@ export default function PanelResizeHandle({
       resizeHandler(event);
     };
 
+    document.body.addEventListener("contextmenu", stopDraggingAndBlur);
     document.body.addEventListener("mouseleave", stopDraggingAndBlur);
     document.body.addEventListener("mousemove", onMove);
     document.body.addEventListener("touchmove", onMove);
@@ -88,6 +88,7 @@ export default function PanelResizeHandle({
     return () => {
       document.body.style.cursor = "";
 
+      document.body.removeEventListener("contextmenu", stopDraggingAndBlur);
       document.body.removeEventListener("mouseleave", stopDraggingAndBlur);
       document.body.removeEventListener("mousemove", onMove);
       document.body.removeEventListener("touchmove", onMove);
@@ -97,7 +98,7 @@ export default function PanelResizeHandle({
 
   useWindowSplitterResizeHandlerBehavior({
     disabled,
-    handleId: id,
+    handleId: resizeHandleId,
     resizeHandler,
   });
 
@@ -106,17 +107,18 @@ export default function PanelResizeHandle({
       className={className}
       data-panel-group-id={groupId}
       data-panel-resize-handle-enabled={!disabled}
-      data-panel-resize-handle-id={id}
-      onMouseDown={() => startDragging(id)}
+      data-panel-resize-handle-id={resizeHandleId}
+      onMouseDown={(event) => startDragging(resizeHandleId, event.nativeEvent)}
       onMouseUp={stopDraggingAndBlur}
       onTouchCancel={stopDraggingAndBlur}
       onTouchEnd={stopDraggingAndBlur}
-      onTouchStart={() => startDragging(id)}
+      onTouchStart={(event) => startDragging(resizeHandleId, event.nativeEvent)}
       ref={divElementRef}
       role="separator"
       style={{
         cursor: direction === "horizontal" ? "ew-resize" : "ns-resize",
         touchAction: "none",
+        userSelect: "none",
       }}
       tabIndex={0}
     >

package/src/hooks/useUniqueId.ts

@@ -1,9 +1,13 @@
-import { useRef } from "react";
+import { useId, useRef } from "react";
 
 let counter = 0;
 
-export default function useUniqueId(id: string | null = null): string {
-  const idRef = useRef<string | null>(id);
+export default function useUniqueId(
+  idFromParams: string | null = null
+): string {
+  const idFromUseId = typeof useId === "function" ? useId() : null;
+
+  const idRef = useRef<string | null>(idFromParams || idFromUseId || null);
   if (idRef.current === null) {
     idRef.current = "" + counter++;
   }

package/src/utils/coordinates.ts

@@ -11,15 +11,38 @@ export type Size = {
   width: number;
 };
 
-const element = document.createElement("div");
-element.getBoundingClientRect();
+export function getDragOffset(
+  event: ResizeEvent,
+  handleId: string,
+  direction: Direction,
+  initialOffset: number = 0
+): number {
+  const isHorizontal = direction === "horizontal";
+
+  let pointerOffset = 0;
+  if (isMouseEvent(event)) {
+    pointerOffset = isHorizontal ? event.clientX : event.clientY;
+  } else if (isTouchEvent(event)) {
+    const firstTouch = event.touches[0];
+    pointerOffset = isHorizontal ? firstTouch.screenX : firstTouch.screenY;
+  } else {
+    return 0;
+  }
+
+  const handleElement = getResizeHandle(handleId);
+  const rect = handleElement.getBoundingClientRect();
+  const elementOffset = isHorizontal ? rect.left : rect.top;
+
+  return pointerOffset - elementOffset - initialOffset;
+}
 
 // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
 export function getMovement(
   event: ResizeEvent,
   handleId: string,
   { height, width }: Size,
-  direction: Direction
+  direction: Direction,
+  initialOffset: number
 ): number {
   const isHorizontal = direction === "horizontal";
   const size = isHorizontal ? width : height;
@@ -51,19 +74,7 @@ export function getMovement(
         }
     }
   } else {
-    const handleElement = getResizeHandle(handleId)!;
-    const rect = handleElement.getBoundingClientRect();
-    const elementOffset = isHorizontal ? rect.left : rect.top;
-
-    let pointerOffset = 0;
-    if (isMouseMoveEvent(event)) {
-      pointerOffset = isHorizontal ? event.clientX : event.clientY;
-    } else {
-      const firstTouch = event.touches[0];
-      pointerOffset = isHorizontal ? firstTouch.screenX : firstTouch.screenY;
-    }
-
-    return pointerOffset - elementOffset;
+    return getDragOffset(event, handleId, direction, initialOffset);
   }
 }
 
@@ -71,10 +82,10 @@ export function isKeyDown(event: ResizeEvent): event is KeyboardEvent {
   return event.type === "keydown";
 }
 
-export function isMouseMoveEvent(event: ResizeEvent): event is MouseEvent {
-  return event.type === "mousemove";
+export function isMouseEvent(event: ResizeEvent): event is MouseEvent {
+  return event.type.startsWith("mouse");
 }
 
-export function isTouchMoveEvent(event: ResizeEvent): event is TouchEvent {
-  return event.type === "touchmove";
+export function isTouchEvent(event: ResizeEvent): event is TouchEvent {
+  return event.type.startsWith("touch");
 }