react-resizable-panels 1.0.9 → 2.0.0

package/src/utils/cursor.ts

@@ -1,54 +1,84 @@
-type CursorState =
-  | "horizontal"
-  | "horizontal-max"
-  | "horizontal-min"
-  | "vertical"
-  | "vertical-max"
-  | "vertical-min";
-
-let currentState: CursorState | null = null;
-let element: HTMLStyleElement | null = null;
-
-export function getCursorStyle(state: CursorState): string {
+import {
+  EXCEEDED_HORIZONTAL_MAX,
+  EXCEEDED_HORIZONTAL_MIN,
+  EXCEEDED_VERTICAL_MAX,
+  EXCEEDED_VERTICAL_MIN,
+} from "../PanelResizeHandleRegistry";
+
+type CursorState = "horizontal" | "intersection" | "vertical";
+
+let currentCursorStyle: string | null = null;
+let styleElement: HTMLStyleElement | null = null;
+
+export function getCursorStyle(
+  state: CursorState,
+  constraintFlags: number
+): string {
+  if (constraintFlags) {
+    const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
+    const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
+    const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
+    const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
+
+    if (horizontalMin) {
+      if (verticalMin) {
+        return "se-resize";
+      } else if (verticalMax) {
+        return "ne-resize";
+      } else {
+        return "e-resize";
+      }
+    } else if (horizontalMax) {
+      if (verticalMin) {
+        return "sw-resize";
+      } else if (verticalMax) {
+        return "nw-resize";
+      } else {
+        return "w-resize";
+      }
+    } else if (verticalMin) {
+      return "s-resize";
+    } else if (verticalMax) {
+      return "n-resize";
+    }
+  }
+
   switch (state) {
     case "horizontal":
       return "ew-resize";
-    case "horizontal-max":
-      return "w-resize";
-    case "horizontal-min":
-      return "e-resize";
+    case "intersection":
+      return "move";
     case "vertical":
       return "ns-resize";
-    case "vertical-max":
-      return "n-resize";
-    case "vertical-min":
-      return "s-resize";
   }
 }
 
 export function resetGlobalCursorStyle() {
-  if (element !== null) {
-    document.head.removeChild(element);
+  if (styleElement !== null) {
+    document.head.removeChild(styleElement);
 
-    currentState = null;
-    element = null;
+    currentCursorStyle = null;
+    styleElement = null;
   }
 }
 
-export function setGlobalCursorStyle(state: CursorState) {
-  if (currentState === state) {
+export function setGlobalCursorStyle(
+  state: CursorState,
+  constraintFlags: number
+) {
+  const style = getCursorStyle(state, constraintFlags);
+
+  if (currentCursorStyle === style) {
     return;
   }
 
-  currentState = state;
-
-  const style = getCursorStyle(state);
+  currentCursorStyle = style;
 
-  if (element === null) {
-    element = document.createElement("style");
+  if (styleElement === null) {
+    styleElement = document.createElement("style");
 
-    document.head.appendChild(element);
+    document.head.appendChild(styleElement);
   }
 
-  element.innerHTML = `*{cursor: ${style}!important;}`;
+  styleElement.innerHTML = `*{cursor: ${style}!important;}`;
 }

package/src/utils/events/getResizeEventCoordinates.ts

@@ -0,0 +1,24 @@
+import { ResizeEvent } from "../../types";
+import { isMouseEvent, isTouchEvent } from ".";
+
+export function getResizeEventCoordinates(event: ResizeEvent) {
+  if (isMouseEvent(event)) {
+    return {
+      x: event.pageX,
+      y: event.pageY,
+    };
+  } else if (isTouchEvent(event)) {
+    const touch = event.touches[0];
+    if (touch && touch.pageX && touch.pageY) {
+      return {
+        x: touch.pageX,
+        y: touch.pageY,
+      };
+    }
+  }
+
+  return {
+    x: Infinity,
+    y: Infinity,
+  };
+}

package/src/utils/events/getResizeEventCursorPosition.ts

@@ -0,0 +1,14 @@
+import { ResizeEvent } from "../../PanelGroupContext";
+import { Direction } from "../../types";
+import { getResizeEventCoordinates } from "./getResizeEventCoordinates";
+
+export function getResizeEventCursorPosition(
+  direction: Direction,
+  event: ResizeEvent
+): number {
+  const isHorizontal = direction === "horizontal";
+
+  const { x, y } = getResizeEventCoordinates(event);
+
+  return isHorizontal ? x : y;
+}

package/src/utils/{events.ts → events/index.ts}

@@ -1,4 +1,4 @@
-import { ResizeEvent } from "../PanelGroupContext";
+import { ResizeEvent } from "../../PanelGroupContext";
 
 export function isKeyDown(event: ResizeEvent): event is KeyboardEvent {
   return event.type === "keydown";

package/src/utils/getInputType.ts

@@ -0,0 +1,5 @@
+export function getInputType(): "coarse" | "fine" | undefined {
+  if (typeof matchMedia === "function") {
+    return matchMedia("(pointer:coarse)").matches ? "coarse" : "fine";
+  }
+}

package/src/utils/getResizeEventCursorPosition.ts

@@ -1,21 +0,0 @@
-import { ResizeEvent } from "../PanelGroupContext";
-import { Direction } from "../types";
-import { assert } from "./assert";
-import { isMouseEvent, isTouchEvent } from "./events";
-
-export function getResizeEventCursorPosition(
-  direction: Direction,
-  event: ResizeEvent
-): number {
-  const isHorizontal = direction === "horizontal";
-
-  if (isMouseEvent(event)) {
-    return isHorizontal ? event.clientX : event.clientY;
-  } else if (isTouchEvent(event)) {
-    const firstTouch = event.touches[0];
-    assert(firstTouch);
-    return isHorizontal ? firstTouch.screenX : firstTouch.screenY;
-  } else {
-    throw Error(`Unsupported event type "${event.type}"`);
-  }
-}