Support resizing multiple panels at once

packages/react-resizable-panels-website/playwright.config.ts

@@ -23,7 +23,7 @@ if (process.env.DEBUG) {
     headless: false,
 
     launchOptions: {
-      slowMo: DEBUG ? 250 : undefined,
+      slowMo: DEBUG ? 50 : undefined,
     },
   };
 }

packages/react-resizable-panels-website/root.css

@@ -16,6 +16,8 @@
   --color-link: #dcadff;
   --color-panel-background: #192230;
   --color-panel-background-alternate: #202124;
+  --color-resize-bar-drag: #39414d;
+  --color-resize-bar-hover: #39414d66;
   --color-solid-resize-bar: #39414d;
   --color-scroll-thumb: #39414d;
   --color-warning-background: #7400cc;

packages/react-resizable-panels-website/src/components/ResizeHandle.module.css

@@ -1,62 +1,18 @@
-.ResizeHandleOuter {
-  flex: 0 0 1.75rem;
+.ResizeHandle {
+  flex: 0 0 0.25rem;
   display: flex;
   justify-content: stretch;
   align-items: stretch;
-  padding: 0.5rem;
   outline: none;
-
-  --background-color: transparent;
+  transition: background-color 0.2s linear;
 }
-.ResizeHandleOuter[data-resize-handle-active],
-.ResizeHandleInner[data-collapsed] {
-  --background-color: var(--color-solid-resize-bar);
+.ResizeHandle[data-resize-handle-active="keyboard"],
+.ResizeHandle[data-resize-handle-active="pointer"] {
+  background-color: var(--color-resize-bar-drag);
 }
 
 @media (max-width: 500px) {
-  .ResizeHandleOuter {
-    flex: 0 0 2.5rem;
+  .ResizeHandle {
+    flex: 0 0 1rem;
   }
 }
-
-.ResizeHandleInner {
-  flex: 1;
-  border-radius: 0.75rem;
-  background-color: var(--background-color);
-  transition: background-color 0.2s linear;
-  position: relative;
-}
-
-.ResizeHandleInner::after {
-  height: 1rem;
-  width: 1rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1rem;
-  color: var(--color-solid-resize-bar);
-  position: absolute;
-  left: calc(50% - 0.5rem);
-  top: calc(50% - 0.5rem);
-}
-
-.HorizontalIcon,
-.VerticalIcon {
-  color: var(--color-solid-resize-bar);
-  position: absolute;
-  left: calc(50% - 0.5rem);
-  top: calc(50% - 0.5rem);
-}
-
-.ResizeHandleOuter[data-panel-group-direction="horizontal"] .HorizontalIcon,
-.ResizeHandleOuter[data-panel-group-direction="vertical"] .VerticalIcon {
-  display: block;
-}
-.ResizeHandleOuter[data-panel-group-direction="vertical"] .HorizontalIcon,
-.ResizeHandleOuter[data-panel-group-direction="horizontal"] .VerticalIcon {
-  display: none;
-}
-.ResizeHandleOuter[data-resize-handle-active] .HorizontalIcon,
-.ResizeHandleOuter[data-resize-handle-active] .VerticalIcon {
-  display: none;
-}

packages/react-resizable-panels-website/src/components/ResizeHandle.tsx

@@ -1,6 +1,5 @@
 import { PanelResizeHandle } from "react-resizable-panels";
 
-import Icon from "./Icon";
 import styles from "./ResizeHandle.module.css";
 
 export function ResizeHandle({
@@ -14,16 +13,8 @@ export function ResizeHandle({
 }) {
   return (
     <PanelResizeHandle
-      className={[styles.ResizeHandleOuter, className].join(" ")}
+      className={[styles.ResizeHandle, className].join(" ")}
       id={id}
-    >
-      <div
-        className={styles.ResizeHandleInner}
-        data-collapsed={collapsed || undefined}
-      >
-        <Icon className={styles.HorizontalIcon} type="resize-horizontal" />
-        <Icon className={styles.VerticalIcon} type="resize-vertical" />
-      </div>
-    </PanelResizeHandle>
+    />
   );
 }

packages/react-resizable-panels-website/src/components/VisibleCursor.module.css

@@ -0,0 +1,19 @@
+.VisibleCursor {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 2rem;
+  height: 2rem;
+  border: 2px dotted #ffffffaa;
+  border-radius: 1rem;
+  margin-left: -1rem;
+  margin-top: -1rem;
+  transition: background-color 250ms;
+}
+.VisibleCursor[data-state="down"] {
+  background-color: #ff000066;
+}
+.VisibleCursor[data-state="up"] {
+  background-color: #00000066;
+}

packages/react-resizable-panels-website/src/components/VisibleCursor.tsx

@@ -0,0 +1,39 @@
+import { useLayoutEffect } from "react";
+import styles from "./VisibleCursor.module.css";
+
+export function VisibleCursor() {
+  useLayoutEffect(() => {
+    const element = document.createElement("div");
+    element.classList.add(styles.VisibleCursor!);
+    element.setAttribute("data-state", "up");
+
+    document.body.appendChild(element);
+
+    const onMouseDown = () => {
+      element.setAttribute("data-state", "down");
+    };
+
+    const onMouseMove = (event: MouseEvent) => {
+      element.style.left = event.pageX + "px";
+      element.style.top = event.pageY + "px";
+    };
+
+    const onMouseUp = () => {
+      element.setAttribute("data-state", "up");
+    };
+
+    document.addEventListener("mousedown", onMouseDown, true);
+    document.addEventListener("mousemove", onMouseMove, true);
+    document.addEventListener("mouseup", onMouseUp, true);
+
+    return () => {
+      document.body.removeChild(element);
+
+      document.removeEventListener("mousedown", onMouseDown, true);
+      document.removeEventListener("mousemove", onMouseMove, true);
+      document.removeEventListener("mouseup", onMouseUp, true);
+    };
+  });
+
+  return null;
+}

packages/react-resizable-panels-website/src/routes/EndToEndTesting/index.tsx

@@ -21,6 +21,7 @@ import { urlPanelGroupToPanelGroup, urlToUrlData } from "../../utils/UrlData";
 import DebugLog, { ImperativeDebugLogHandle } from "../examples/DebugLog";
 import "./styles.css";
 import styles from "./styles.module.css";
+import { VisibleCursor } from "../../components/VisibleCursor";
 
 // Special route that can be configured via URL parameters.
 
@@ -296,6 +297,7 @@ export default function Page() {
   return (
     <ErrorBoundary>
       <EndToEndTesting />
+      <VisibleCursor />
     </ErrorBoundary>
   );
 }

packages/react-resizable-panels-website/src/routes/examples/Nested.tsx

@@ -10,7 +10,12 @@ export default function NestedRoute() {
     <Example
       code={CODE}
       exampleNode={<Content />}
-      headerNode={<p>This example shows nested groups.</p>}
+      headerNode={
+        <p>
+          This example shows nested groups. Click near the intersection of two
+          groups to resize in multiple directions at once.
+        </p>
+      }
       title="Nested groups"
     />
   );