@window-splitter/state 1.0.2 → 1.1.1--canary.9d2f98a.0

package/src/index.ts

@@ -257,6 +257,7 @@ interface ApplyDeltaEvent {
   type: "applyDelta";
   delta: number;
   handleId: string;
+  panelId: string;
 }
 
 interface SetOrientationEvent {
@@ -278,6 +279,7 @@ interface CollapsePanelEvent extends ControlledCollapseToggle {
   type: "collapsePanel";
   /** The panel to collapse */
   panelId: string;
+  resolve?: () => void;
 }
 
 interface ExpandPanelEvent extends ControlledCollapseToggle {
@@ -285,6 +287,7 @@ interface ExpandPanelEvent extends ControlledCollapseToggle {
   type: "expandPanel";
   /** The panel to expand */
   panelId: string;
+  resolve?: () => void;
 }
 
 interface SetPanelPixelSizeEvent {
@@ -317,6 +320,11 @@ export interface GroupMachineContextValue {
    * How to save the persisted state
    */
   autosaveStrategy?: "localStorage" | "cookie";
+  /**
+   * The amount to move the drag handle when shift is held down.
+   * @default 15px
+   */
+  shiftAmount?: number;
 }
 
 interface LockGroupEvent {
@@ -735,6 +743,25 @@ function getHandleForPanelId(
 ) {
   const panelIndex = context.items.findIndex((item) => item.id === panelId);
 
+  // When in controlled collapse mode we defer to the controlled state to know if we need to update.
+  // The confirmation comes along as an expand/collapse event.
+  // The default behavior is to find the closes handle and use that to collapse, if we're dragging some other
+  // handle though we want to use that instead. This will results in a smoother visual experience.
+  if (context.activeDragHandleId) {
+    const handleIndex = getPanelHandleIndex(
+      context,
+      context.activeDragHandleId
+    );
+    const item = context.items[handleIndex];
+
+    if (item && isPanelHandle(item)) {
+      return {
+        item,
+        direction: handleIndex > panelIndex ? (1 as const) : (-1 as const),
+      };
+    }
+  }
+
   invariant(panelIndex !== -1, `Expected panel before: ${panelId}`);
 
   let item = context.items[panelIndex + 1];
@@ -752,6 +779,37 @@ function getHandleForPanelId(
   throw new Error(`Cant find handle for panel: ${panelId}`);
 }
 
+function getHandleForPanelIdWithAvailableSpace(
+  context: GroupMachineContextValue,
+  panelId: string
+) {
+  const panelIndex = context.items.findIndex((item) => item.id === panelId);
+
+  invariant(panelIndex !== -1, `Expected panel before: ${panelId}`);
+
+  let item = context.items[panelIndex + 1];
+
+  if (
+    item &&
+    isPanelHandle(item) &&
+    findPanelWithSpace(context, context.items, panelIndex + 1, 1, "add")
+  ) {
+    return { item, direction: 1 as const };
+  }
+
+  item = context.items[panelIndex - 1];
+
+  if (
+    item &&
+    isPanelHandle(item) &&
+    findPanelWithSpace(context, context.items, panelIndex - 1, -1, "add")
+  ) {
+    return { item, direction: -1 as const };
+  }
+
+  return getHandleForPanelId(context, panelId);
+}
+
 /** Given the specified order props and default order of the items, order the items */
 function sortWithOrder(items: Array<Item>) {
   const defaultPlacement: Record<string, number> = {};
@@ -799,8 +857,8 @@ function panelHasSpace(
     `panelHasSpace only works with number values: ${item.id} ${item.currentValue}`
   );
 
-  if (item.collapsible && !item.collapsed) {
-    return true;
+  if (item.collapsible) {
+    return !item.collapsed;
   }
 
   if (adjustment === "add") {
@@ -1098,6 +1156,7 @@ function updateLayout(
     | (DragHandleEvent & {
         controlled?: boolean;
         disregardCollapseBuffer?: never;
+        panelId?: string;
         isVirtual?: boolean;
       })
     | {
@@ -1105,6 +1164,7 @@ function updateLayout(
         value: MoveMoveEvent;
         handleId: string;
         controlled?: boolean;
+        panelId: string;
         disregardCollapseBuffer?: boolean;
         isVirtual?: boolean;
       }
@@ -1119,7 +1179,7 @@ function updateLayout(
       : dragEvent.value.deltaY;
 
   if (dragEvent.value.shiftKey) {
-    moveAmount *= 15;
+    moveAmount *= context.shiftAmount ?? 15;
   }
 
   if (moveAmount === 0) {
@@ -1147,7 +1207,26 @@ function updateLayout(
 
   invariant(isPanelData(panelBefore), `Expected panel before: ${handle.id}`);
 
-  const panelAfter = newItems[handleIndex - moveDirection];
+  /** The panel that gets bigger */
+  const panelAfter =
+    dragEvent.type === "collapsePanel"
+      ? // If we have the panel id just use that
+        newItems.find(
+          (item) =>
+            item.id === dragEvent.panelId &&
+            panelBefore.id !== dragEvent.panelId
+        ) ||
+        // otherwise fallback to the next panel with space
+        findPanelWithSpace(
+          context,
+          newItems,
+          handleIndex - moveDirection,
+          moveDirection * -1,
+          "add",
+          dragEvent.disregardCollapseBuffer
+        ) ||
+        newItems[handleIndex - moveDirection]
+      : newItems[handleIndex - moveDirection];
 
   invariant(
     panelAfter && isPanelData(panelAfter),
@@ -1165,7 +1244,7 @@ function updateLayout(
   const newDragOvershoot = context.dragOvershoot.add(moveAmount);
 
   // Don't let the panel expand until the threshold is reached
-  if (!dragEvent.disregardCollapseBuffer) {
+  if (!dragEvent.disregardCollapseBuffer && !dragEvent.controlled) {
     const isInLeftBuffer = newDragOvershoot.lt(0) && moveDirection > 0;
     const isInLeftOvershoot = newDragOvershoot.gt(0) && moveDirection > 0;
     const isInRightBuffer = newDragOvershoot.gt(0) && moveDirection < 0;
@@ -1199,6 +1278,7 @@ function updateLayout(
   // Don't let the panel collapse until the threshold is reached
   if (
     !dragEvent.disregardCollapseBuffer &&
+    !dragEvent.controlled &&
     panelBefore.collapsible &&
     panelBefore.currentValue.value.eq(
       getUnitPixelValue(context, panelBefore.min)
@@ -1282,7 +1362,10 @@ function updateLayout(
           .minus(Math.abs(moveAmount))
       );
 
-    if (panelBeforeNewValue.lt(panelBefore.min.value)) {
+    if (
+      panelBeforeNewValue.lt(panelBefore.min.value) &&
+      !panelBefore.collapsible
+    ) {
       // TODO this should probably distribute the space between the panels?
       return { dragOvershoot: newDragOvershoot };
     }
@@ -1323,7 +1406,7 @@ function updateLayout(
     panelBefore.collapsed = true;
     panelBeforeNewValue = getUnitPixelValue(context, panelBefore.collapsedSize);
     // Add the extra space created to the before panel
-    panelAfterNewValue = panelAfterNewValue.add(
+    panelAfterNewValue = panelAfter.currentValue.value.add(
       panelBeforePreviousValue.minus(panelBeforeNewValue)
     );
 
@@ -1427,6 +1510,7 @@ function iterativelyUpdateLayout({
   controlled,
   disregardCollapseBuffer,
   isVirtual,
+  panelId,
 }: {
   context: GroupMachineContextValue;
   handleId: string;
@@ -1439,6 +1523,7 @@ function iterativelyUpdateLayout({
    * no on* callbacks will be called
    */
   isVirtual?: boolean;
+  panelId: string;
 }) {
   let newContext: Partial<GroupMachineContextValue> = context;
 
@@ -1454,6 +1539,7 @@ function iterativelyUpdateLayout({
         controlled,
         disregardCollapseBuffer,
         isVirtual,
+        panelId,
         value: dragHandlePayload({
           delta: direction,
           orientation: context.orientation,
@@ -1560,6 +1646,7 @@ function handleOverflow(context: GroupMachineContextValue) {
         handleId: handleId.item.id,
         delta: sizeChange,
         direction: (handleId.direction * -1) as -1 | 1,
+        panelId: collapsiblePanel.id,
         context: {
           ...newContext,
           // act like its the old size so the space is distributed correctly
@@ -1595,6 +1682,7 @@ function setCookie(name: string, jsonData: unknown) {
 interface AnimationActorOutput {
   panelId: string;
   action: "expand" | "collapse";
+  resolve?: () => void;
 }
 
 function getDeltaForEvent(
@@ -1620,11 +1708,20 @@ function animationActor(
   abortController: AbortController
 ) {
   const panel = getPanelWithId(context, event.panelId);
-  const handle = getHandleForPanelId(context, event.panelId);
-
+  const handle = getHandleForPanelIdWithAvailableSpace(context, event.panelId);
   let direction = new Big(handle.direction);
   const fullDelta = getDeltaForEvent(context, event);
 
+  const contextCopy = { ...context, items: prepareItems(context) };
+  const finalLayout = iterativelyUpdateLayout({
+    context: contextCopy,
+    panelId: event.panelId,
+    handleId: handle.item.id,
+    delta: fullDelta,
+    direction: handle.direction,
+    isVirtual: true,
+  });
+
   return new Promise<AnimationActorOutput | undefined>((resolve, reject) => {
     abortController.signal.addEventListener("abort", () => {
       reject(new Error("Operation was canceled"));
@@ -1652,6 +1749,7 @@ function animationActor(
         type: "applyDelta",
         handleId: handle.item.id,
         delta: delta.toNumber(),
+        panelId: panel.id,
       });
 
       appliedDelta = appliedDelta.add(
@@ -1665,8 +1763,21 @@ function animationActor(
       );
 
       if (e.eq(1)) {
+        // If we're controlled expanding to a value that breaks the layout we might get negative values
+        // In this case we need to use a valid layout like `iterativelyUpdateLayout`'s return value
+        // Ideally we figure out some way to not do this but disregardCollapseBuffer is needed for animations
+        if (
+          context.items.find(
+            (i) =>
+              isPanelData(i) &&
+              i.currentValue.value.round(undefined, Big.roundHalfEven).lt(0)
+          )
+        ) {
+          assign(context, finalLayout);
+        }
+
         const action = event.type === "expandPanel" ? "expand" : "collapse";
-        resolve({ panelId: panel.id, action });
+        resolve({ panelId: panel.id, action, resolve: event.resolve });
         return false;
       }
 
@@ -1689,6 +1800,7 @@ export interface GroupMachineInput {
   groupId: string;
   items?: Item[];
   autosaveStrategy?: "localStorage" | "cookie";
+  shiftAmount?: number;
 }
 
 export type State = "idle" | "dragging" | "togglingCollapse";
@@ -1712,6 +1824,7 @@ export function groupMachine(
     dragOvershoot: new Big(0),
     groupId: input.groupId || `group-${groupId++}`,
     autosaveStrategy: input.autosaveStrategy,
+    shiftAmount: input.shiftAmount ?? 15,
   };
 
   const actions = {
@@ -1799,6 +1912,7 @@ export function groupMachine(
           : handle.direction;
 
       const newContext = updateLayout(context, {
+        panelId: event.panelId,
         handleId: handle.item.id,
         type: "dragHandle",
         controlled: event.controlled,
@@ -1843,15 +1957,20 @@ export function groupMachine(
     },
     cannotExpandPanel: (event: GroupMachineEvent) => {
       isEvent(event, ["expandPanel"]);
-      const delta = getDeltaForEvent(context, event);
-      const handle = getHandleForPanelId(context, event.panelId);
       const pixelItems = prepareItems(context);
-
       let interimContext = { ...context, items: pixelItems };
+
+      const delta = getDeltaForEvent(context, event);
+      const handle = getHandleForPanelIdWithAvailableSpace(
+        interimContext,
+        event.panelId
+      );
+
       interimContext = {
         ...interimContext,
         ...iterativelyUpdateLayout({
           context: interimContext,
+          panelId: event.panelId,
           handleId: handle.item.id,
           controlled: event.controlled,
           delta: delta,
@@ -1900,6 +2019,8 @@ export function groupMachine(
     }
 
     state.current = to;
+
+    onUpdate?.(context);
   }
 
   function send(event: GroupMachineEvent) {
@@ -2110,11 +2231,13 @@ export function groupMachine(
           const delta = isBigger
             ? newSize.minus(current)
             : current.minus(newSize);
+          panel.sizeBeforeCollapse = newSize.toNumber();
 
           Object.assign(
             context,
             iterativelyUpdateLayout({
               context,
+              panelId: event.panelId,
               direction: (handle.direction * (isBigger ? 1 : -1)) as -1 | 1,
               handleId: handle.item.id,
               delta,
@@ -2139,6 +2262,9 @@ export function groupMachine(
                 (output) => {
                   actions.onAnimationEnd(output);
                   transition("idle");
+                  if (event.resolve) {
+                    requestAnimationFrame(event.resolve);
+                  }
                 }
               );
             }
@@ -2159,6 +2285,9 @@ export function groupMachine(
                 (output) => {
                   actions.onAnimationEnd(output);
                   transition("idle");
+                  if (event.resolve) {
+                    requestAnimationFrame(event.resolve);
+                  }
                 }
               );
             }
@@ -2191,6 +2320,7 @@ export function groupMachine(
           assign(
             context,
             updateLayout(context, {
+              panelId: event.panelId,
               handleId: event.handleId,
               type: "collapsePanel",
               disregardCollapseBuffer: true,

package/src/machine.test.ts

@@ -485,6 +485,283 @@ describe("constraints", () => {
     );
   });
 
+  test("sibling collapsible panels work", async () => {
+    const onCollapseChange = (isCollapsed: boolean) => {
+      if (isCollapsed) {
+        actor.send({
+          type: "collapsePanel",
+          panelId: "panel-1",
+          controlled: true,
+        });
+      } else {
+        actor.send({
+          type: "expandPanel",
+          panelId: "panel-1",
+          controlled: true,
+        });
+      }
+    };
+
+    const actor = createActor({
+      groupId: "group",
+      items: [
+        initializePanel({
+          id: "panel-1",
+          default: "200px",
+          min: "100px",
+          collapsible: true,
+          collapsed: false,
+          onCollapseChange: { current: onCollapseChange },
+        }),
+        initializePanelHandleData({ id: "resizer-1", size: "10px" }),
+        initializePanel({
+          id: "panel-2",
+          default: "200px",
+          min: "100px",
+          collapsible: true,
+        }),
+        initializePanelHandleData({ id: "resizer-2", size: "10px" }),
+        initializePanel({
+          id: "panel-3",
+          min: "200px",
+          collapsible: true,
+          collapsedSize: "60px",
+        }),
+      ],
+    });
+
+    initializeSizes(actor, { width: 800, height: 200 });
+
+    capturePixelValues(actor, () => {
+      // First collapse both panels
+      expect(buildTemplate(actor.value)).toMatchInlineSnapshot(
+        `"200px 10px 200px 10px 380px"`
+      );
+      dragHandle(actor, { id: "resizer-2", delta: -410 });
+      expect(buildTemplate(actor.value)).toMatchInlineSnapshot(
+        `"0px 10px 0px 10px 780px"`
+      );
+    });
+
+    actor.send({
+      type: "expandPanel",
+      panelId: "panel-1",
+      controlled: true,
+    });
+    await waitForIdle(actor);
+
+    capturePixelValues(actor, () => {
+      expect(buildTemplate(actor.value)).toMatchInlineSnapshot(
+        `"100px 10px 0px 10px 680px"`
+      );
+    });
+  });
+
+  test("controlled collapse complex drags", async () => {
+    const onCollapseChange = (panelId: string) => (isCollapsed: boolean) => {
+      if (isCollapsed) {
+        actor.send({
+          type: "collapsePanel",
+          panelId,
+          controlled: true,
+        });
+      } else {
+        actor.send({ type: "expandPanel", panelId, controlled: true });
+      }
+    };
+
+    const onChange1 = onCollapseChange("panel-1");
+    const onChange2 = onCollapseChange("panel-2");
+    const onChange3 = onCollapseChange("panel-3");
+
+    const actor = createActor({
+      groupId: "group",
+      items: [
+        initializePanel({
+          id: "panel-1",
+          default: "200px",
+          min: "100px",
+          collapsible: true,
+          collapsed: false,
+          onCollapseChange: { current: onChange1 },
+        }),
+        initializePanelHandleData({ id: "resizer-1", size: "10px" }),
+        initializePanel({
+          id: "panel-2",
+          default: "200px",
+          min: "100px",
+          collapsible: true,
+          onCollapseChange: { current: onChange2 },
+        }),
+        initializePanelHandleData({ id: "resizer-2", size: "10px" }),
+        initializePanel({
+          id: "panel-3",
+          min: "100px",
+          collapsible: true,
+          onCollapseChange: { current: onChange3 },
+        }),
+      ],
+    });
+
+    initializeSizes(actor, { width: 800, height: 200 });
+
+    // Collapse middle panel from the left
+    capturePixelValues(actor, () => {
+      expect(buildTemplate(actor.value)).toMatchInlineSnapshot(
+        `"200px 10px 200px 10px 380px"`
+      );
+      dragHandle(actor, { id: "resizer-1", delta: 200 });
+      expect(buildTemplate(actor.value)).toMatchInlineSnapshot(
+        `"450px 10px 0px 10px 330px"`
+      );
+      dragHandle(actor, { id: "resizer-1", delta: -200 });
+      expect(buildTemplate(actor.value)).toMatchInlineSnapshot(
+        `"249px 10px 201px 10px 330px"`
+      );
+    });
+
+    // Collapse middle panel from the right
+    capturePixelValues(actor, () => {
+      dragHandle(actor, { id: "resizer-2", delta: -200 });
+      expect(buildTemplate(actor.value)).toMatchInlineSnapshot(
+        `"200px 10px 0px 10px 580px"`
+      );
+      dragHandle(actor, { id: "resizer-2", delta: 200 });
+      expect(buildTemplate(actor.value)).toMatchInlineSnapshot(
+        `"200px 10px 201px 10px 379px"`
+      );
+    });
+
+    // Collapse the left panel
+    capturePixelValues(actor, () => {
+      dragHandle(actor, { id: "resizer-1", delta: -200 });
+      expect(buildTemplate(actor.value)).toMatchInlineSnapshot(
+        `"0px 10px 401px 10px 379px"`
+      );
+      dragHandle(actor, { id: "resizer-1", delta: 200 });
+      expect(buildTemplate(actor.value)).toMatchInlineSnapshot(
+        `"150px 10px 251px 10px 379px"`
+      );
+    });
+
+    // Collapse the right panel
+    capturePixelValues(actor, () => {
+      dragHandle(actor, { id: "resizer-2", delta: 600 });
+      expect(buildTemplate(actor.value)).toMatchInlineSnapshot(
+        `"150px 10px 630px 10px 0px"`
+      );
+      dragHandle(actor, { id: "resizer-2", delta: -600 });
+      expect(buildTemplate(actor.value)).toMatchInlineSnapshot(
+        `"150px 10px 300px 10px 330px"`
+      );
+    });
+
+    // Sweep the left handle to the right
+    capturePixelValues(actor, () => {
+      dragHandle(actor, { id: "resizer-1", delta: 1000 });
+      expect(buildTemplate(actor.value)).toMatchInlineSnapshot(
+        `"780px 10px 0px 10px 0px"`
+      );
+    });
+
+    // Sweep the right handle to the left
+    capturePixelValues(actor, () => {
+      dragHandle(actor, { id: "resizer-2", delta: -1000 });
+      expect(buildTemplate(actor.value)).toMatchInlineSnapshot(
+        `"0px 10px 0px 10px 780px"`
+      );
+    });
+  });
+
+  test("controlled collapse events", async () => {
+    const onCollapseChange = (panelId: string) => (isCollapsed: boolean) => {
+      if (isCollapsed) {
+        actor.send({
+          type: "collapsePanel",
+          panelId,
+          controlled: true,
+        });
+      } else {
+        actor.send({ type: "expandPanel", panelId, controlled: true });
+      }
+    };
+
+    const onChange1 = onCollapseChange("panel-1");
+    const onChange2 = onCollapseChange("panel-2");
+    const onChange3 = onCollapseChange("panel-3");
+
+    const actor = createActor({
+      groupId: "group",
+      items: [
+        initializePanel({
+          id: "panel-1",
+          default: "200px",
+          min: "100px",
+          collapsible: true,
+          collapsed: false,
+          onCollapseChange: { current: onChange1 },
+        }),
+        initializePanelHandleData({ id: "resizer-1", size: "10px" }),
+        initializePanel({
+          id: "panel-2",
+          default: "200px",
+          min: "100px",
+          collapsible: true,
+          collapsed: false,
+          onCollapseChange: { current: onChange2 },
+        }),
+        initializePanelHandleData({ id: "resizer-2", size: "10px" }),
+        initializePanel({
+          id: "panel-3",
+          min: "100px",
+          collapsible: true,
+          collapsed: false,
+          onCollapseChange: { current: onChange3 },
+        }),
+      ],
+    });
+
+    initializeSizes(actor, { width: 800, height: 200 });
+
+    capturePixelValues(actor, () => {
+      expect(buildTemplate(actor.value)).toMatchInlineSnapshot(
+        `"200px 10px 200px 10px 380px"`
+      );
+    });
+
+    actor.send({ type: "collapsePanel", panelId: "panel-2", controlled: true });
+    await waitForIdle(actor);
+    capturePixelValues(actor, () => {
+      expect(buildTemplate(actor.value)).toMatchInlineSnapshot(
+        `"200px 10px 0px 10px 580px"`
+      );
+    });
+
+    actor.send({ type: "collapsePanel", panelId: "panel-3", controlled: true });
+    await waitForIdle(actor);
+    capturePixelValues(actor, () => {
+      expect(buildTemplate(actor.value)).toMatchInlineSnapshot(
+        `"780px 10px 0px 10px 0px"`
+      );
+    });
+
+    actor.send({ type: "expandPanel", panelId: "panel-2", controlled: true });
+    await waitForIdle(actor);
+    capturePixelValues(actor, () => {
+      expect(buildTemplate(actor.value)).toMatchInlineSnapshot(
+        `"580px 10px 200px 10px 0px"`
+      );
+    });
+
+    actor.send({ type: "expandPanel", panelId: "panel-3", controlled: true });
+    await waitForIdle(actor);
+    capturePixelValues(actor, () => {
+      expect(buildTemplate(actor.value)).toMatchInlineSnapshot(
+        `"100px 10px 0px 10px 680px"`
+      );
+    });
+  });
+
   test("panel can have a min", () => {
     const actor = createActor({ groupId: "group" });