@window-splitter/state 0.3.2 → 0.4.1

package/src/index.ts

@@ -1,3 +1,4 @@
+import Cookies from "universal-cookie";
 import { raf } from "@react-spring/rafz";
 import {
   createMachine,
@@ -65,6 +66,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 {
@@ -108,6 +116,7 @@ export interface PanelData
   collapseAnimation?:
     | CollapseAnimation
     | { duration: number; easing: CollapseAnimation | ((t: number) => number) };
+  lastKnownSize?: Rect;
 }
 
 function getCollapseAnimation(panel: PanelData) {
@@ -294,8 +303,17 @@ export interface GroupMachineContextValue {
   /** How much the drag has overshot the handle */
   dragOvershoot: Big.Big;
   groupId: string;
+  /**
+   * How to save the persisted state
+   */
+  autosaveStrategy?: "localStorage" | "cookie";
 }
 
+export type GroupMachineSnapshot = Snapshot<unknown> & {
+  context: GroupMachineContextValue;
+  value: string;
+};
+
 export type GroupMachineEvent =
   | RegisterPanelEvent
   | RegisterDynamicPanelEvent
@@ -344,10 +362,8 @@ export function getCursor(
   }
 }
 
-export function prepareSnapshot(snapshot: Snapshot<unknown>) {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const snapshotContext = (snapshot as any)
-    .context as unknown as GroupMachineContextValue;
+export function prepareSnapshot(snapshot: GroupMachineSnapshot) {
+  const snapshotContext = snapshot.context;
 
   snapshotContext.dragOvershoot = new Big(snapshotContext.dragOvershoot);
 
@@ -406,23 +422,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 +485,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 +704,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 +741,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);
     }
   }
@@ -795,6 +808,7 @@ export function getPanelPercentageSize(
 /** Build the grid template from the item values. */
 export function buildTemplate(context: GroupMachineContextValue) {
   const staticWidth = getStaticWidth(context);
+  let hasSeenFillPanel = false;
 
   return context.items
     .map((item) => {
@@ -805,8 +819,22 @@ 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") {
+          if (
+            !hasSeenFillPanel &&
+            (item.max === "1fr" ||
+              (item.max.type === "percent" && item.max.value.eq(100)))
+          ) {
+            hasSeenFillPanel = true;
+            return `minmax(${min}, 1fr)`;
+          }
+
           const max = item.max === "1fr" ? "100%" : formatUnit(item.max);
           return `minmax(${min}, min(calc(${item.currentValue.value} * (100% - ${staticWidth}px)), ${max}))`;
         } else if (item.collapsible && item.collapsed) {
@@ -919,18 +947,28 @@ 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.lastKnownSize) {
+      const lastSize = makePixelUnit(
+        context.orientation === "horizontal"
+          ? item.lastKnownSize.width
+          : item.lastKnownSize.height
+      );
+      newItems.push({ ...item, currentValue: lastSize });
       continue;
     }
 
     if (item.currentValue.type === "pixel") {
-      newItems.push(item);
+      newItems.push({ ...item });
       continue;
     }
 
@@ -1031,6 +1069,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 +1090,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 +1160,6 @@ function updateLayout(
             .add(Math.abs(moveAmount))
         );
 
-    panelAfter.collapsed = false;
-
     if (extra.gt(0)) {
       panelAfterNewValue = panelAfterNewValue.add(extra);
     }
@@ -1131,6 +1173,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 +1189,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 +1236,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 +1267,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 +1386,85 @@ 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) };
+}
+
+function clearLastKnownSize(items: Item[]) {
+  return items.map((i) => ({ ...i, lastKnownSize: undefined }));
+}
+
 // #endregion
 
 // #region Machine
@@ -1349,6 +1480,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 +1506,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;
@@ -1426,6 +1566,7 @@ export const groupMachine = createMachine(
         orientation?: Orientation;
         groupId: string;
         initialItems?: Item[];
+        autosaveStrategy?: "localStorage" | "cookie";
       },
     },
     context: ({ input }) => ({
@@ -1434,15 +1575,17 @@ export const groupMachine = createMachine(
       orientation: input.orientation || "horizontal",
       dragOvershoot: new Big(0),
       groupId: input.groupId,
+      autosaveStrategy: input.autosaveStrategy,
     }),
     states: {
       idle: {
+        entry: ["onAutosave"],
         on: {
-          setActualItemsSize: { actions: ["recordActualItemSize", "onResize"] },
           dragHandleStart: { target: "dragging" },
           setPanelPixelSize: {
             actions: [
               "prepare",
+              "onClearLastKnownSize",
               "onSetPanelSize",
               "commit",
               "onResize",
@@ -1457,6 +1600,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",
@@ -1468,7 +1613,9 @@ export const groupMachine = createMachine(
       dragging: {
         entry: ["prepare"],
         on: {
-          dragHandle: { actions: ["onDragHandle", "onResize"] },
+          dragHandle: {
+            actions: ["onClearLastKnownSize", "onDragHandle", "onResize"],
+          },
           dragHandleEnd: { target: "idle" },
           collapsePanel: {
             guard: "shouldCollapseToggle",
@@ -1479,16 +1626,16 @@ export const groupMachine = createMachine(
             actions: "runCollapseToggle",
           },
         },
-        exit: ["commit", "onAutosave"],
+        exit: ["commit"],
       },
       togglingCollapse: {
-        entry: ["prepare"],
+        entry: ["prepare", "onClearLastKnownSize"],
         invoke: {
           src: "animation",
           input: (i) => ({ ...i, send: i.self.send }),
           onDone: {
             target: "idle",
-            actions: ["onToggleCollapseComplete", "commit", "onAutosave"],
+            actions: ["onToggleCollapseComplete", "commit"],
           },
         },
         on: {
@@ -1497,25 +1644,43 @@ export const groupMachine = createMachine(
       },
     },
     on: {
+      setActualItemsSize: { actions: ["recordActualItemSize", "onResize"] },
       registerPanel: { actions: ["assignPanelData"] },
       registerDynamicPanel: {
         actions: [
           "prepare",
           "onRegisterDynamicPanel",
+          "onClearLastKnownSize",
           "commit",
           "onResize",
           "onAutosave",
         ],
       },
       unregisterPanel: {
-        actions: ["prepare", "removeItem", "commit", "onResize", "onAutosave"],
+        actions: [
+          "prepare",
+          "removeItem",
+          "onClearLastKnownSize",
+          "commit",
+          "onResize",
+          "onAutosave",
+        ],
       },
       registerPanelHandle: { actions: ["assignPanelHandleData"] },
       unregisterPanelHandle: {
-        actions: ["prepare", "removeItem", "commit", "onResize", "onAutosave"],
+        actions: [
+          "prepare",
+          "removeItem",
+          "onClearLastKnownSize",
+          "commit",
+          "onResize",
+          "onAutosave",
+        ],
       },
       setSize: { actions: ["updateSize", "onResize"] },
-      setOrientation: { actions: ["updateOrientation", "onResize"] },
+      setOrientation: {
+        actions: ["updateOrientation", "onClearLastKnownSize", "onResize"],
+      },
     },
   },
   {
@@ -1530,11 +1695,63 @@ 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,
     },
     actions: {
+      onAutosave: ({ context, self }) => {
+        if (!context.autosaveStrategy || typeof window === "undefined") {
+          return;
+        }
+
+        const snapshot = self.getPersistedSnapshot() as GroupMachineSnapshot;
+        snapshot.context.items = clearLastKnownSize(context.items);
+        snapshot.value = "idle";
+        const data = JSON.stringify(snapshot);
+
+        if (context.autosaveStrategy === "localStorage") {
+          localStorage.setItem(context.groupId, data);
+        } else {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const ActualClass = (Cookies as any).default || Cookies;
+          const cookies = new ActualClass(null, { path: "/" });
+
+          cookies.set(context.groupId, data, { path: "/", maxAge: 31536000 });
+        }
+      },
       notifyCollapseToggle: ({ context, event }) => {
         isEvent(event, ["collapsePanel", "expandPanel"]);
         const panel = getPanelWithId(context, event.panelId);
@@ -1561,8 +1778,7 @@ export const groupMachine = createMachine(
       }),
       onToggleCollapseComplete: assign({
         items: ({ context, event: e }) => {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          const output = (e as any).output as AnimationActorOutput;
+          const { output } = e as unknown as { output: AnimationActorOutput };
           invariant(output, "Expected output from animation actor");
 
           const panel = getPanelWithId(context, output.panelId);
@@ -1585,21 +1801,40 @@ export const groupMachine = createMachine(
         items: ({ context, event }) => {
           isEvent(event, ["setActualItemsSize"]);
 
-          const orientation = context.orientation;
+          const withLastKnownSize = context.items.map((i) => {
+            if (!isPanelData(i)) return i;
+            const lastKnownSize = event.childrenSizes[i.id] || i.lastKnownSize;
+            return { ...i, lastKnownSize };
+          });
+
+          let totalSize = 0;
 
-          for (const [id, size] of Object.entries(event.childrenSizes)) {
-            const item = context.items.find((i) => i.id === id);
+          for (const item of withLastKnownSize) {
+            if (isPanelData(item)) {
+              const size =
+                item.lastKnownSize?.[
+                  context.orientation === "horizontal" ? "width" : "height"
+                ];
 
-            if (!isPanelData(item)) {
-              continue;
+              // If any size is 0 don't handle overflow
+              if (!size) {
+                return withLastKnownSize;
+              }
+
+              totalSize += size;
+            } else {
+              totalSize += item.size.value.toNumber();
             }
+          }
 
-            item.currentValue = makePixelUnit(
-              orientation === "horizontal" ? size.width : size.height
-            );
+          if (totalSize > getGroupSize(context)) {
+            return handleOverflow({
+              ...context,
+              items: prepareItems({ ...context, items: withLastKnownSize }),
+            }).items;
           }
 
-          return commitLayout(context);
+          return withLastKnownSize;
         },
       }),
       updateOrientation: assign({
@@ -1608,6 +1843,9 @@ export const groupMachine = createMachine(
           return event.orientation;
         },
       }),
+      onClearLastKnownSize: assign({
+        items: ({ context }) => clearLastKnownSize(context.items),
+      }),
       assignPanelData: assign({
         items: ({ context, event }) => {
           isEvent(event, ["registerPanel"]);
@@ -1758,15 +1996,25 @@ export const groupMachine = createMachine(
       onResize: ({ context }) => {
         for (const item of context.items) {
           if (isPanelData(item)) {
-            const pixel = clampUnit(
-              context,
-              item,
-              getUnitPixelValue(context, item.currentValue)
-            );
+            const pixel = item.lastKnownSize
+              ? new Big(
+                  context.orientation === "horizontal"
+                    ? item.lastKnownSize.width
+                    : item.lastKnownSize.height
+                )
+              : clampUnit(
+                  context,
+                  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,
             });
           }
         }