@window-splitter/state 0.3.2 → 0.4.0

package/src/index.ts

@@ -65,6 +65,13 @@ export interface Constraints<T extends ParsedUnit | Unit = ParsedUnit> {
   defaultCollapsed?: boolean;
   /** The size of the panel once collapsed */
   collapsedSize?: T;
+  /**
+   * By default the layout will be stored in percentage values while at rest.
+   * This makes scaling the layout easier when the container is resized.
+   * However you might have a panel you want to stay at a static size when
+   * the container is resized.
+   */
+  isStaticAtRest?: boolean;
 }
 
 interface Order {
@@ -228,6 +235,7 @@ interface SetSizeEvent {
   /** Set the size of the whole group */
   type: "setSize";
   size: Rect;
+  handleOverflow?: boolean;
 }
 
 interface SetActualItemsSizeEvent {
@@ -406,23 +414,24 @@ type OnResizeSize = {
 
 export type OnResizeCallback = (size: OnResizeSize) => void;
 
-interface InitializePanelOptions {
+type InitializePanelOptions = {
   min?: Unit;
   max?: Unit;
   default?: Unit;
-  collapsible?: boolean;
-  collapsed?: boolean;
   collapsedSize?: Unit;
-  onCollapseChange?: {
-    current: ((isCollapsed: boolean) => void) | null | undefined;
-  };
-  onResize?: {
-    current: OnResizeCallback | null | undefined;
-  };
-  collapseAnimation?: PanelData["collapseAnimation"];
-  defaultCollapsed?: boolean;
   id?: string;
-}
+} & Partial<
+  Pick<
+    PanelData,
+    | "isStaticAtRest"
+    | "collapseAnimation"
+    | "defaultCollapsed"
+    | "onResize"
+    | "collapsible"
+    | "collapsed"
+    | "onCollapseChange"
+  >
+>;
 
 type InitializePanelOptionsWithId = InitializePanelOptions & { id: string };
 
@@ -468,6 +477,7 @@ export function initializePanel(
     id: item.id,
     collapseAnimation: item.collapseAnimation,
     default: item.default ? parseUnit(item.default) : undefined,
+    isStaticAtRest: item.isStaticAtRest,
   } satisfies Omit<PanelData, "id" | "currentValue"> & { id?: string };
 
   return { ...data, currentValue: makePixelUnit(-1) } satisfies Omit<
@@ -686,10 +696,7 @@ function panelHasSpace(
     );
   }
 
-  return (
-    item.currentValue.value.gt(getUnitPixelValue(context, item.min)) &&
-    item.currentValue.value.lte(getUnitPixelValue(context, item.max))
-  );
+  return item.currentValue.value.gt(getUnitPixelValue(context, item.min));
 }
 
 /** Search in a `direction` for a panel that still has space to expand. */
@@ -726,11 +733,9 @@ function getStaticWidth(context: GroupMachineContextValue) {
   for (const item of context.items) {
     if (isPanelHandle(item)) {
       width = width.add(item.size.value);
-    } else if (
-      isPanelData(item) &&
-      item.collapsed &&
-      item.currentValue.type === "pixel"
-    ) {
+    } else if (item.collapsed && item.currentValue.type === "pixel") {
+      width = width.add(item.currentValue.value);
+    } else if (item.isStaticAtRest) {
       width = width.add(item.currentValue.value);
     }
   }
@@ -805,6 +810,11 @@ export function buildTemplate(context: GroupMachineContextValue) {
           item.currentValue.type === "pixel" &&
           item.currentValue.value.toNumber() !== -1
         ) {
+          if (item.isStaticAtRest) {
+            const max = item.max === "1fr" ? "100%" : formatUnit(item.max);
+            return `clamp(${min}, ${formatUnit(item.currentValue)}, ${max})`;
+          }
+
           return formatUnit(item.currentValue);
         } else if (item.currentValue.type === "percent") {
           const max = item.max === "1fr" ? "100%" : formatUnit(item.max);
@@ -919,18 +929,18 @@ function createUnrestrainedPanel(_: GroupMachineContextValue, data: PanelData) {
  */
 
 /** Converts the items to pixels */
-export function prepareItems(context: GroupMachineContextValue) {
+export function prepareItems(context: GroupMachineContextValue): Item[] {
   const staticWidth = getStaticWidth(context);
   const newItems = [];
 
   for (const item of context.items) {
     if (!item || !isPanelData(item)) {
-      newItems.push(item);
+      newItems.push({ ...item });
       continue;
     }
 
     if (item.currentValue.type === "pixel") {
-      newItems.push(item);
+      newItems.push({ ...item });
       continue;
     }
 
@@ -1031,6 +1041,10 @@ function updateLayout(
 
     const isInDragBugger =
       newDragOvershoot.abs().lt(COLLAPSE_THRESHOLD) &&
+      // Let the panel expand at it's min size
+      !panelAfter.currentValue.value
+        .add(newDragOvershoot.abs())
+        .gte(panelAfter.min.value) &&
       panelAfter.collapsible &&
       panelAfter.collapsed &&
       (isInLeftOvershoot || isInRightOvershoot);
@@ -1048,9 +1062,11 @@ function updateLayout(
 
   // Don't let the panel collapse until the threshold is reached
   if (
+    !dragEvent.disregardCollapseBuffer &&
     panelBefore.collapsible &&
-    panelBefore.currentValue.value ===
+    panelBefore.currentValue.value.eq(
       getUnitPixelValue(context, panelBefore.min)
+    )
   ) {
     const potentialNewValue = panelBefore.currentValue.value.sub(
       newDragOvershoot.abs()
@@ -1116,8 +1132,6 @@ function updateLayout(
             .add(Math.abs(moveAmount))
         );
 
-    panelAfter.collapsed = false;
-
     if (extra.gt(0)) {
       panelAfterNewValue = panelAfterNewValue.add(extra);
     }
@@ -1131,6 +1145,13 @@ function updateLayout(
           .minus(Math.abs(moveAmount))
       );
 
+    if (panelBeforeNewValue.lt(panelBefore.min.value)) {
+      // TODO this should probably distribute the space between the panels?
+      return { dragOvershoot: newDragOvershoot };
+    }
+
+    panelAfter.collapsed = false;
+
     if (
       panelAfter.onCollapseChange?.current &&
       !panelAfter.collapseIsControlled &&
@@ -1140,9 +1161,9 @@ function updateLayout(
     }
   }
 
-  const panelBeforeIsAboutToCollapse =
-    panelBefore.currentValue.value ===
-    getUnitPixelValue(context, panelBefore.min);
+  const panelBeforeIsAboutToCollapse = panelBefore.currentValue.value.eq(
+    getUnitPixelValue(context, panelBefore.min)
+  );
 
   // If the panel was expanded and now is at it's min size, collapse it
   if (
@@ -1187,8 +1208,11 @@ function updateLayout(
   );
 
   if (!leftoverSpace.eq(0)) {
-    panelBefore.currentValue.value =
-      panelBefore.currentValue.value.add(leftoverSpace);
+    panelBefore.currentValue.value = clampUnit(
+      context,
+      panelBefore,
+      panelBefore.currentValue.value.add(leftoverSpace)
+    );
   }
 
   return { items: newItems };
@@ -1215,7 +1239,7 @@ function commitLayout(context: GroupMachineContextValue) {
   const staticWidth = getStaticWidth({ ...context, items: newItems });
 
   newItems.forEach((item, index) => {
-    if (item.type !== "panel" || item.collapsed) {
+    if (item.type !== "panel" || item.collapsed || item.isStaticAtRest) {
       return;
     }
 
@@ -1334,6 +1358,81 @@ function applyDeltaInBothDirections(
   }
 }
 
+/**
+ * A layout might overflow at small screen sizes.
+ * This function tries to fix that by:
+ *
+ * 1. It will try to collapse a panel if it can.
+ */
+function handleOverflow(context: GroupMachineContextValue) {
+  // If we haven't measured yet we can't do anything
+  if (
+    context.items.some((i) => isPanelData(i) && i.currentValue.value.eq(-1))
+  ) {
+    return context;
+  }
+
+  const groupSize = new Big(getGroupSize(context));
+  const nonStaticWidth = groupSize.sub(getStaticWidth(context).toNumber());
+  const pixelItems = context.items.map((i) => {
+    if (isPanelHandle(i)) return i.size.value;
+    if (i.collapsed) return getUnitPixelValue(context, i.currentValue);
+
+    const pixel =
+      (i.currentValue.type === "pixel" && i.currentValue.value) ||
+      i.currentValue.value.mul(nonStaticWidth);
+
+    return clampUnit(context, i, pixel);
+  });
+  const totalSize = pixelItems.reduce((acc, i) => acc.add(i), new Big(0));
+  const overflow = totalSize.abs().sub(groupSize);
+
+  if (overflow.eq(0) || groupSize.eq(0)) {
+    return context;
+  }
+
+  let newContext = { ...context, items: prepareItems(context) };
+
+  const collapsiblePanel = newContext.items.find((i): i is PanelData =>
+    Boolean(isPanelData(i) && i.collapsible)
+  );
+
+  if (collapsiblePanel) {
+    const collapsiblePanelIndex = newContext.items.findIndex(
+      (i) => i.id === collapsiblePanel.id
+    );
+    const handleId = getHandleForPanelId(newContext, collapsiblePanel.id);
+    const sizeChange = collapsiblePanel.currentValue.value.sub(
+      getUnitPixelValue(newContext, collapsiblePanel.collapsedSize)
+    );
+
+    // Try to collapse the panel
+    newContext = {
+      ...newContext,
+      ...iterativelyUpdateLayout({
+        handleId: handleId.item.id,
+        delta: sizeChange,
+        direction: (handleId.direction * -1) as -1 | 1,
+        context: {
+          ...newContext,
+          // act like its the old size so the space is distributed correctly
+          size: { width: totalSize.toNumber(), height: totalSize.toNumber() },
+        },
+      }),
+    };
+
+    // Then remove all the overflow
+    applyDeltaInBothDirections(
+      newContext,
+      newContext.items,
+      collapsiblePanelIndex,
+      overflow.neg()
+    );
+  }
+
+  return { ...newContext, items: commitLayout(newContext) };
+}
+
 // #endregion
 
 // #region Machine
@@ -1349,6 +1448,22 @@ interface AnimationActorOutput {
   action: "expand" | "collapse";
 }
 
+function getDeltaForEvent(
+  context: GroupMachineContextValue,
+  event: CollapsePanelEvent | ExpandPanelEvent
+) {
+  const panel = getPanelWithId(context, event.panelId);
+
+  if (event.type === "expandPanel") {
+    return new Big(
+      panel.sizeBeforeCollapse ?? getUnitPixelValue(context, panel.min)
+    ).minus(panel.currentValue.value);
+  }
+
+  const collapsedSize = getUnitPixelValue(context, panel.collapsedSize);
+  return panel.currentValue.value.minus(collapsedSize);
+}
+
 const animationActor = fromPromise<
   AnimationActorOutput | undefined,
   AnimationActorInput
@@ -1359,18 +1474,11 @@ const animationActor = fromPromise<
       const handle = getHandleForPanelId(context, event.panelId);
 
       let direction = new Big(handle.direction);
-      let fullDelta = new Big(0);
-
-      if (event.type === "expandPanel") {
-        fullDelta = new Big(
-          panel.sizeBeforeCollapse ?? getUnitPixelValue(context, panel.min)
-        ).minus(panel.currentValue.value);
-      } else {
-        const collapsedSize = getUnitPixelValue(context, panel.collapsedSize);
+      const fullDelta = getDeltaForEvent(context, event);
 
+      if (event.type === "collapsePanel") {
         panel.sizeBeforeCollapse = panel.currentValue.value.toNumber();
         direction = direction.mul(new Big(-1));
-        fullDelta = panel.currentValue.value.minus(collapsedSize);
       }
 
       const fps = 60;
@@ -1457,6 +1565,8 @@ export const groupMachine = createMachine(
             { target: "togglingCollapse" },
           ],
           expandPanel: [
+            // This will match if we can't expand and the expansion won't happen
+            { guard: "cannotExpandPanel" },
             {
               actions: "notifyCollapseToggle",
               guard: "shouldNotifyCollapseToggle",
@@ -1530,6 +1640,38 @@ export const groupMachine = createMachine(
         const panel = getPanelWithId(context, event.panelId);
         return panel.collapseIsControlled === true;
       },
+      cannotExpandPanel: ({ context, event }) => {
+        isEvent(event, ["expandPanel"]);
+        const delta = getDeltaForEvent(context, event);
+        const handle = getHandleForPanelId(context, event.panelId);
+        const pixelItems = prepareItems(context);
+
+        let interimContext = { ...context, items: pixelItems };
+        interimContext = {
+          ...interimContext,
+          ...iterativelyUpdateLayout({
+            context: interimContext,
+            handleId: handle.item.id,
+            controlled: event.controlled,
+            delta: delta,
+            direction: handle.direction,
+          }),
+        };
+        const updatedPanel = interimContext.items.find(
+          (i) => i.id === event.panelId
+        );
+        const totalSize = interimContext.items.reduce(
+          (acc, i) =>
+            acc.add(isPanelData(i) ? i.currentValue.value : i.size.value),
+          new Big(0)
+        );
+        const didExpand =
+          updatedPanel &&
+          isPanelData(updatedPanel) &&
+          !updatedPanel.currentValue.value.eq(updatedPanel.collapsedSize.value);
+
+        return totalSize.gt(getGroupSize(context)) || !didExpand;
+      },
     },
     actors: {
       animation: animationActor,
@@ -1575,11 +1717,14 @@ export const groupMachine = createMachine(
           return context.items;
         },
       }),
-      updateSize: assign({
-        size: ({ event }) => {
-          isEvent(event, ["setSize"]);
-          return event.size;
-        },
+      updateSize: enqueueActions(({ context, event, enqueue }) => {
+        isEvent(event, ["setSize"]);
+
+        if (event.handleOverflow) {
+          enqueue.assign(handleOverflow({ ...context, size: event.size }));
+        } else {
+          enqueue.assign({ size: event.size });
+        }
       }),
       recordActualItemSize: assign({
         items: ({ context, event }) => {
@@ -1763,10 +1908,14 @@ export const groupMachine = createMachine(
               item,
               getUnitPixelValue(context, item.currentValue)
             );
+            const groupSize = getGroupSize(context);
 
             item.onResize?.current?.({
               pixel: pixel.toNumber(),
-              percentage: pixel.div(getGroupSize(context)).toNumber(),
+              percentage:
+                groupSize > 0
+                  ? pixel.div(getGroupSize(context)).toNumber()
+                  : -1,
             });
           }
         }

package/src/machine.test.ts

@@ -1301,6 +1301,189 @@ describe("collapsible panel", () => {
       expect(getTemplate(actor)).toMatchInlineSnapshot(`"245px 10px 245px"`);
     });
   });
+
+  describe("constraints", () => {
+    test("on render", async () => {
+      const actor = createActor(groupMachine, {
+        input: { groupId: "group" },
+      }).start();
+
+      sendAll(actor, [
+        {
+          type: "registerPanel",
+          data: initializePanel({ id: "panel-1", min: "200px" }),
+        },
+        {
+          type: "registerPanelHandle",
+          data: { id: "resizer-1", size: "10px" },
+        },
+        {
+          type: "registerPanel",
+          data: initializePanel({
+            id: "panel-2",
+            collapsible: true,
+            min: "300px",
+            collapsedSize: "60px",
+          }),
+        },
+      ]);
+
+      expect(getTemplate(actor)).toBe(
+        "minmax(200px, 1fr) 10px minmax(300px, 1fr)"
+      );
+      initializeSizes(actor, { width: 400, height: 200 });
+      actor.send({
+        type: "setSize",
+        size: { width: 400, height: 200 },
+        handleOverflow: true,
+      });
+      // There wasn't enough space to render the panel so the last one is collapsed
+      expect(getTemplate(actor)).toBe(
+        "minmax(200px, min(calc(1 * (100% - 70px)), 100%)) 10px 60px"
+      );
+    });
+
+    test("on resize", async () => {
+      const actor = createActor(groupMachine, {
+        input: { groupId: "group" },
+      }).start();
+
+      sendAll(actor, [
+        {
+          type: "registerPanel",
+          data: initializePanel({ id: "panel-1", min: "200px" }),
+        },
+        {
+          type: "registerPanelHandle",
+          data: { id: "resizer-1", size: "10px" },
+        },
+        {
+          type: "registerPanel",
+          data: initializePanel({
+            id: "panel-2",
+            collapsible: true,
+            min: "300px",
+            collapsedSize: "60px",
+          }),
+        },
+      ]);
+
+      expect(getTemplate(actor)).toBe(
+        "minmax(200px, 1fr) 10px minmax(300px, 1fr)"
+      );
+      initializeSizes(actor, { width: 500, height: 200 });
+      expect(getTemplate(actor)).toBe(
+        "minmax(200px, min(calc(0.40816326530612244898 * (100% - 10px)), 100%)) 10px minmax(300px, min(calc(0.61224489795918367347 * (100% - 10px)), 100%))"
+      );
+
+      actor.send({
+        type: "setSize",
+        size: { width: 400, height: 200 },
+        handleOverflow: true,
+      });
+      // There wasn't enough space to render the panel so the last one is collapsed
+      expect(getTemplate(actor)).toBe(
+        "minmax(200px, min(calc(1 * (100% - 70px)), 100%)) 10px 60px"
+      );
+    });
+
+    test("cannot expand panel via event", async () => {
+      const actor = createActor(groupMachine, {
+        input: { groupId: "group" },
+      }).start();
+
+      sendAll(actor, [
+        {
+          type: "registerPanel",
+          data: initializePanel({ id: "panel-1", min: "200px" }),
+        },
+        {
+          type: "registerPanelHandle",
+          data: { id: "resizer-1", size: "10px" },
+        },
+        {
+          type: "registerPanel",
+          data: initializePanel({
+            id: "panel-2",
+            collapsible: true,
+            min: "300px",
+            collapsedSize: "60px",
+          }),
+        },
+      ]);
+
+      expect(getTemplate(actor)).toBe(
+        "minmax(200px, 1fr) 10px minmax(300px, 1fr)"
+      );
+      initializeSizes(actor, { width: 400, height: 200 });
+      actor.send({
+        type: "setSize",
+        size: { width: 400, height: 200 },
+        handleOverflow: true,
+      });
+      // There wasn't enough space to render the panel so the last one is collapsed
+      expect(getTemplate(actor)).toBe(
+        "minmax(200px, min(calc(1 * (100% - 70px)), 100%)) 10px 60px"
+      );
+
+      actor.send({
+        type: "expandPanel",
+        panelId: "panel-2",
+      });
+      await waitForIdle(actor);
+
+      // There wasn't enough space to render the panel so the last one is collapsed
+      expect(getTemplate(actor)).toBe(
+        "minmax(200px, min(calc(1 * (100% - 70px)), 100%)) 10px 60px"
+      );
+    });
+
+    test("cannot expand panel via drag", async () => {
+      const actor = createActor(groupMachine, {
+        input: { groupId: "group" },
+      }).start();
+
+      sendAll(actor, [
+        {
+          type: "registerPanel",
+          data: initializePanel({ id: "panel-1", min: "200px" }),
+        },
+        {
+          type: "registerPanelHandle",
+          data: { id: "resizer-1", size: "10px" },
+        },
+        {
+          type: "registerPanel",
+          data: initializePanel({
+            id: "panel-2",
+            collapsible: true,
+            min: "300px",
+            collapsedSize: "60px",
+          }),
+        },
+      ]);
+
+      expect(getTemplate(actor)).toBe(
+        "minmax(200px, 1fr) 10px minmax(300px, 1fr)"
+      );
+      initializeSizes(actor, { width: 400, height: 200 });
+      actor.send({
+        type: "setSize",
+        size: { width: 400, height: 200 },
+        handleOverflow: true,
+      });
+      // There wasn't enough space to render the panel so the last one is collapsed
+      expect(getTemplate(actor)).toBe(
+        "minmax(200px, min(calc(1 * (100% - 70px)), 100%)) 10px 60px"
+      );
+
+      // Drag the resizer to the right
+      capturePixelValues(actor, () => {
+        dragHandle(actor, { id: "resizer-1", delta: -400 });
+        expect(getTemplate(actor)).toBe("330px 10px 60px");
+      });
+    });
+  });
 });
 
 describe("conditional panel", () => {
@@ -1749,3 +1932,39 @@ describe("utils", async () => {
     expect(newSnapshot).toMatchSnapshot();
   });
 });
+
+describe("static at rest", () => {
+  test("a panel can be pixels when resting", async () => {
+    const actor = createActor(groupMachine, {
+      input: {
+        groupId: "group",
+        initialItems: [
+          initializePanel({
+            id: "panel-1",
+            min: "20px",
+            max: "200px",
+            isStaticAtRest: true,
+          }),
+          initializePanelHandleData({ id: "resizer-1", size: "10px" }),
+          initializePanel({ id: "panel-2", min: "50px" }),
+          initializePanelHandleData({ id: "resizer-2", size: "10px" }),
+          initializePanel({ id: "panel-3", min: "50px" }),
+        ],
+      },
+    }).start();
+
+    initializeSizes(actor, { width: 500, height: 200 });
+
+    expect(getTemplate(actor)).toMatchInlineSnapshot(
+      `"clamp(20px, 200px, 200px) 10px minmax(50px, min(calc(0.5 * (100% - 220px)), 100%)) 10px minmax(50px, min(calc(0.5 * (100% - 220px)), 100%))"`
+    );
+
+    capturePixelValues(actor, () => {
+      dragHandle(actor, { id: "resizer-1", delta: -10 });
+    });
+
+    expect(getTemplate(actor)).toMatchInlineSnapshot(
+      `"clamp(20px, 190px, 200px) 10px minmax(50px, min(calc(0.51724137931034482759 * (100% - 210px)), 100%)) 10px minmax(50px, min(calc(0.48275862068965517241 * (100% - 210px)), 100%))"`
+    );
+  });
+});