react-resizable-panels 0.0.9 → 0.0.11

package/src/PanelResizeHandle.tsx

@@ -1,4 +1,11 @@
-import { ReactNode, useContext, useEffect, useState } from "react";
+import {
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 
 import useUniqueId from "./hooks/useUniqueId";
 import { useWindowSplitterResizeHandlerBehavior } from "./hooks/useWindowSplitterBehavior";
@@ -16,6 +23,8 @@ export default function PanelResizeHandle({
   disabled?: boolean;
   id?: string | null;
 }) {
+  const divElementRef = useRef<HTMLDivElement>(null);
+
   const panelContext = useContext(PanelContext);
   const panelGroupContext = useContext(PanelGroupContext);
   if (panelContext === null || panelGroupContext === null) {
@@ -41,6 +50,15 @@ export default function PanelResizeHandle({
     null
   );
 
+  const stopDraggingAndBlur = useCallback(() => {
+    // Clicking on the drag handle shouldn't leave it focused;
+    // That would cause the PanelGroup to think it was still active.
+    const div = divElementRef.current!;
+    div.blur();
+
+    stopDragging();
+  }, [stopDragging]);
+
   useEffect(() => {
     if (disabled) {
       setResizeHandler(null);
@@ -62,20 +80,20 @@ export default function PanelResizeHandle({
       resizeHandler(event);
     };
 
-    document.body.addEventListener("mouseleave", stopDragging);
+    document.body.addEventListener("mouseleave", stopDraggingAndBlur);
     document.body.addEventListener("mousemove", onMove);
     document.body.addEventListener("touchmove", onMove);
-    document.body.addEventListener("mouseup", stopDragging);
+    document.body.addEventListener("mouseup", stopDraggingAndBlur);
 
     return () => {
       document.body.style.cursor = "";
 
-      document.body.removeEventListener("mouseleave", stopDragging);
+      document.body.removeEventListener("mouseleave", stopDraggingAndBlur);
       document.body.removeEventListener("mousemove", onMove);
       document.body.removeEventListener("touchmove", onMove);
-      document.body.removeEventListener("mouseup", stopDragging);
+      document.body.removeEventListener("mouseup", stopDraggingAndBlur);
     };
-  }, [direction, disabled, isDragging, resizeHandler, stopDragging]);
+  }, [direction, disabled, isDragging, resizeHandler, stopDraggingAndBlur]);
 
   useWindowSplitterResizeHandlerBehavior({
     disabled,
@@ -90,10 +108,11 @@ export default function PanelResizeHandle({
       data-panel-resize-handle-enabled={!disabled}
       data-panel-resize-handle-id={id}
       onMouseDown={() => startDragging(id)}
-      onMouseUp={stopDragging}
-      onTouchCancel={stopDragging}
-      onTouchEnd={stopDragging}
+      onMouseUp={stopDraggingAndBlur}
+      onTouchCancel={stopDraggingAndBlur}
+      onTouchEnd={stopDraggingAndBlur}
       onTouchStart={() => startDragging(id)}
+      ref={divElementRef}
       role="separator"
       style={{
         cursor: direction === "horizontal" ? "ew-resize" : "ns-resize",

package/src/utils/coordinates.ts

@@ -1,107 +1,69 @@
 import { Direction, ResizeEvent } from "../types";
+import { getResizeHandle } from "./group";
 
 export type Coordinates = {
-  screenX: number;
-  screenY: number;
+  movement: number;
+  offset: number;
 };
 
-export type Dimensions = {
+export type Size = {
   height: number;
   width: number;
 };
 
-export type Movement = {
-  movementX: number;
-  movementY: number;
-};
-
 const element = document.createElement("div");
 element.getBoundingClientRect();
 
 // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
-export function getUpdatedCoordinates(
+export function getMovement(
   event: ResizeEvent,
-  prevCoordinates: Coordinates,
-  dimensions: Dimensions,
+  handleId: string,
+  { height, width }: Size,
   direction: Direction
-): Coordinates & Movement {
-  const { screenX: prevScreenX, screenY: prevScreenY } = prevCoordinates;
-  const { height, width } = dimensions;
-
-  const getMovementBetween = (current: number, prev: number) =>
-    prev === 0 ? 0 : current - prev;
+): number {
+  const isHorizontal = direction === "horizontal";
+  const size = isHorizontal ? width : height;
 
   if (isKeyDown(event)) {
-    let movementX = 0;
-    let movementY = 0;
-
-    const size = direction === "horizontal" ? width : height;
     const denominator = event.shiftKey ? 10 : 100;
     const delta = size / denominator;
 
     switch (event.key) {
       case "ArrowDown":
-        movementY = delta;
-        break;
+        return delta;
       case "ArrowLeft":
-        movementX = -delta;
-        break;
+        return -delta;
       case "ArrowRight":
-        movementX = delta;
-        break;
+        return delta;
       case "ArrowUp":
-        movementY = -delta;
-        break;
+        return -delta;
       case "End":
-        if (direction === "horizontal") {
-          movementX = size;
+        if (isHorizontal) {
+          return size;
         } else {
-          movementY = size;
+          return size;
         }
-        break;
       case "Home":
-        if (direction === "horizontal") {
-          movementX = -size;
+        if (isHorizontal) {
+          return -size;
         } else {
-          movementY = -size;
+          return -size;
         }
-        break;
     }
+  } else {
+    const handleElement = getResizeHandle(handleId)!;
+    const rect = handleElement.getBoundingClientRect();
+    const elementOffset = isHorizontal ? rect.left : rect.top;
 
-    // Estimate screen X/Y to be the center of the resize handle.
-    // Otherwise the first mouse/touch event after a keyboard event will appear to "jump"
-    let screenX = 0;
-    let screenY = 0;
-    if (document.activeElement) {
-      const rect = document.activeElement.getBoundingClientRect();
-      screenX = rect.left + rect.width / 2;
-      screenY = rect.top + rect.height / 2;
+    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 {
-      movementX,
-      movementY,
-      screenX,
-      screenY,
-    };
-  } else if (isTouchMoveEvent(event)) {
-    const firstTouch = event.touches[0];
-
-    return {
-      movementX: getMovementBetween(firstTouch.screenX, prevScreenX),
-      movementY: getMovementBetween(firstTouch.screenY, prevScreenY),
-      screenX: firstTouch.screenX,
-      screenY: firstTouch.screenY,
-    };
-  } else if (isMouseMoveEvent(event)) {
-    return {
-      movementX: getMovementBetween(event.screenX, prevScreenX),
-      movementY: getMovementBetween(event.screenY, prevScreenY),
-      screenX: event.screenX,
-      screenY: event.screenY,
-    };
-  } else {
-    throw Error(`Unsupported event type: "${(event as any).type}"`);
+    return pointerOffset - elementOffset;
   }
 }