@window-splitter/state 0.3.1 → 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<
@@ -498,7 +508,7 @@ export function parseUnit(unit: Unit | "1fr"): ParsedUnit {
   }
 
   if (unit.endsWith("%")) {
-    return makePercentUnit(parseFloat(unit));
+    return makePercentUnit(parseFloat(unit) / 100);
   }
 
   throw new Error(`Invalid unit: ${unit}`);
@@ -527,7 +537,7 @@ function getUnitPixelValue(
   const parsed = unit === "1fr" ? parseUnit(unit) : unit;
   return parsed.type === "pixel"
     ? parsed.value
-    : new Big(parsed.value).div(100).mul(getGroupSize(context));
+    : parsed.value.mul(getGroupSize(context));
 }
 
 /** Clamp a new `currentValue` given the panel's constraints. */
@@ -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);
     }
   }
@@ -743,7 +748,7 @@ function formatUnit(unit: ParsedUnit): Unit {
     return `${unit.value.toNumber()}px`;
   }
 
-  return `${unit.value.toNumber()}%`;
+  return `${unit.value.mul(100).toNumber()}%`;
 }
 
 export function getPanelGroupPixelSizes(context: GroupMachineContextValue) {
@@ -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);
@@ -812,11 +822,28 @@ export function buildTemplate(context: GroupMachineContextValue) {
         } else if (item.collapsible && item.collapsed) {
           return formatUnit(item.collapsedSize);
         } else if (item.default) {
-          return formatUnit(item.default);
-        }
+          const siblingHasFill = context.items.some(
+            (i) =>
+              isPanelData(i) &&
+              i.id !== item.id &&
+              !i.collapsed &&
+              (i.max === "1fr" ||
+                (i.max.type === "percent" && i.max.value.eq(100)))
+          );
+
+          // If a sibling has a fill, this item doesn't need to expand
+          // So we can just use the default value
+          if (siblingHasFill) {
+            return formatUnit(item.default);
+          }
 
-        const max = item.max === "1fr" ? "1fr" : formatUnit(item.max);
-        return `minmax(${min}, ${max})`;
+          // Use 1fr so that panel fills ths space if needed
+          const max = item.max === "1fr" ? "1fr" : formatUnit(item.max);
+          return `minmax(${formatUnit(item.default)}, ${max})`;
+        } else {
+          const max = item.max === "1fr" ? "1fr" : formatUnit(item.max);
+          return `minmax(${min}, ${max})`;
+        }
       }
 
       return formatUnit(item.size);
@@ -902,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;
     }
 
@@ -1014,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);
@@ -1031,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()
@@ -1099,8 +1132,6 @@ function updateLayout(
             .add(Math.abs(moveAmount))
         );
 
-    panelAfter.collapsed = false;
-
     if (extra.gt(0)) {
       panelAfterNewValue = panelAfterNewValue.add(extra);
     }
@@ -1114,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 &&
@@ -1123,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 (
@@ -1170,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 };
@@ -1198,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;
     }
 
@@ -1317,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
@@ -1332,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
@@ -1342,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;
@@ -1421,7 +1546,7 @@ export const groupMachine = createMachine(
     states: {
       idle: {
         on: {
-          setActualItemsSize: { actions: ["recordActualItemSize"] },
+          setActualItemsSize: { actions: ["recordActualItemSize", "onResize"] },
           dragHandleStart: { target: "dragging" },
           setPanelPixelSize: {
             actions: [
@@ -1440,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",
@@ -1513,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,
@@ -1558,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 }) => {
@@ -1741,12 +1903,19 @@ 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 groupSize = getGroupSize(context);
+
             item.onResize?.current?.({
-              pixel: getUnitPixelValue(context, item.currentValue).toNumber(),
-              percentage: getUnitPercentageValue(
-                getGroupSize(context),
-                item.currentValue
-              ),
+              pixel: pixel.toNumber(),
+              percentage:
+                groupSize > 0
+                  ? pixel.div(getGroupSize(context)).toNumber()
+                  : -1,
             });
           }
         }