Account for Flex gap when calculating pointer-move delta %

Author: bvaughn

integrations/vite/tests/pointer-interactions.spec.tsx

@@ -150,9 +150,9 @@ test.describe("pointer interactions", () => {
     });
 
     await expect(page.getByText('"onLayoutCount": 2')).toBeVisible();
-    await expect(page.getByText('"left": 84')).toBeVisible();
+    await expect(page.getByText('"left": 87')).toBeVisible();
     await expect(page.getByText('"center": 5')).toBeVisible();
-    await expect(page.getByText('"right": 11')).toBeVisible();
+    await expect(page.getByText('"right": 8')).toBeVisible();
 
     await page.mouse.move(x - 500, y);
 
@@ -169,4 +169,26 @@ test.describe("pointer interactions", () => {
     await expect(page.getByText('"center": 33')).toBeVisible();
     await expect(page.getByText('"right": 33')).toBeVisible();
   });
+
+  test("drag should measure delta using the available group size (minus flex gap)", async ({
+    page
+  }) => {
+    await goToUrl(
+      page,
+      <Group className="gap-20">
+        <Panel defaultSize="10%" id="left" minSize="5%" />
+        <Separator />
+        <Panel id="right" minSize="5%" />
+      </Group>
+    );
+
+    await expect(page.getByText('"onLayoutCount": 1')).toBeVisible();
+    await expect(page.getByText('"left": 10')).toBeVisible();
+
+    await resizeHelper(page, ["left", "right"], 800, 0);
+
+    // The new layout would be ~91% and 9% if not for flex-gap
+    await expect(page.getByText('"onLayoutCount": 2')).toBeVisible();
+    await expect(page.getByText('"left": 95')).toBeVisible();
+  });
 });

integrations/vite/tests/utils/serializer/types.ts

@@ -6,18 +6,21 @@ export type Config = {
 };
 
 export type GroupJson = {
-  type: "Group";
   children: (PanelJson | SeparatorJson)[];
+  className?: string;
   props: object;
+  type: "Group";
 };
 
 export type PanelJson = {
   children?: GroupJson | undefined;
-  type: "Panel";
+  className?: string;
   props: object;
+  type: "Panel";
 };
 
 export type SeparatorJson = {
-  type: "Separator";
+  className?: string;
   props: object;
+  type: "Separator";
 };

lib/global/dom/calculateHitRegions.ts

@@ -2,11 +2,13 @@ import { sortByElementOffset } from "../../components/group/sortByElementOffset"
 import type { RegisteredGroup } from "../../components/group/types";
 import type { RegisteredPanel } from "../../components/panel/types";
 import type { RegisteredSeparator } from "../../components/separator/types";
+import { calculateAvailableGroupSize } from "./calculateAvailableGroupSize";
 
 type PanelsTuple = [panel: RegisteredPanel, panel: RegisteredPanel];
 
 export type HitRegion = {
   group: RegisteredGroup;
+  groupSize: number;
   panels: PanelsTuple;
   rect: DOMRect;
   separator: RegisteredSeparator | undefined;
@@ -46,6 +48,7 @@ export function calculateHitRegions(group: RegisteredGroup) {
 
         hitRegions.push({
           group,
+          groupSize: calculateAvailableGroupSize({ group }),
           panels: [prevPanel, panelData],
           separator: prevSeparator,
           rect:

lib/global/utils/updateActiveHitRegion.ts

@@ -34,16 +34,17 @@ export function updateActiveHitRegions({
   // Note that HitRegions are frozen once a drag has started
   // Modify the Group layouts for all matching HitRegions though
   hitRegions.forEach((current) => {
-    const { disableCursor, element, orientation, panels } = current.group;
+    const { group, groupSize } = current;
+    const { disableCursor, orientation, panels } = group;
 
     let deltaAsPercentage = 0;
     if (pointerDownAtPoint) {
       if (orientation === "horizontal") {
         deltaAsPercentage =
-          ((event.clientX - pointerDownAtPoint.x) / element.offsetWidth) * 100;
+          ((event.clientX - pointerDownAtPoint.x) / groupSize) * 100;
       } else {
         deltaAsPercentage =
-          ((event.clientY - pointerDownAtPoint.y) / element.offsetHeight) * 100;
+          ((event.clientY - pointerDownAtPoint.y) / groupSize) * 100;
       }
     } else {
       if (orientation === "horizontal") {
@@ -53,13 +54,13 @@ export function updateActiveHitRegions({
       }
     }
 
-    const initialLayout = initialLayoutMap.get(current.group);
+    const initialLayout = initialLayoutMap.get(group);
 
     const {
       derivedPanelConstraints,
       layout: prevLayout,
       separatorToPanels
-    } = mountedGroups.get(current.group) ?? {};
+    } = mountedGroups.get(group) ?? {};
     if (
       derivedPanelConstraints &&
       initialLayout &&