@window-splitter/state 0.3.1 → 0.4.0

package/dist/esm/index.js

@@ -138,6 +138,7 @@ export function initializePanel(item) {
         id: item.id,
         collapseAnimation: item.collapseAnimation,
         default: item.default ? parseUnit(item.default) : undefined,
+        isStaticAtRest: item.isStaticAtRest,
     };
     return { ...data, currentValue: makePixelUnit(-1) };
 }
@@ -159,7 +160,7 @@ export function parseUnit(unit) {
         return makePixelUnit(parseFloat(unit));
     }
     if (unit.endsWith("%")) {
-        return makePercentUnit(parseFloat(unit));
+        return makePercentUnit(parseFloat(unit) / 100);
     }
     throw new Error(`Invalid unit: ${unit}`);
 }
@@ -180,7 +181,7 @@ function getUnitPixelValue(context, unit) {
     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. */
 function clampUnit(context, item, value) {
@@ -280,8 +281,7 @@ function panelHasSpace(context, item, adjustment) {
         return (item.currentValue.value.gte(getUnitPixelValue(context, item.min)) &&
             item.currentValue.value.lt(getUnitPixelValue(context, item.max)));
     }
-    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. */
 function findPanelWithSpace(context, items, start, direction, adjustment, disregardCollapseBuffer) {
@@ -305,9 +305,10 @@ function getStaticWidth(context) {
         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);
         }
     }
@@ -317,7 +318,7 @@ function formatUnit(unit) {
     if (unit.type === "pixel") {
         return `${unit.value.toNumber()}px`;
     }
-    return `${unit.value.toNumber()}%`;
+    return `${unit.value.mul(100).toNumber()}%`;
 }
 export function getPanelGroupPixelSizes(context) {
     return prepareItems(context).map((i) => isPanelData(i)
@@ -354,6 +355,10 @@ export function buildTemplate(context) {
             const min = formatUnit(item.min);
             if (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") {
@@ -364,10 +369,24 @@ export function buildTemplate(context) {
                 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);
+                }
+                // 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})`;
             }
-            const max = item.max === "1fr" ? "1fr" : formatUnit(item.max);
-            return `minmax(${min}, ${max})`;
         }
         return formatUnit(item.size);
     })
@@ -445,11 +464,11 @@ export function prepareItems(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;
         }
         const pixel = new Big(getGroupSize(context))
@@ -503,6 +522,10 @@ function updateLayout(context, dragEvent) {
         const potentialNewValue = panelAfter.currentValue.value.add(new Big(newDragOvershoot).mul(isInRightBuffer ? moveDirection : 1));
         const min = getUnitPixelValue(context, panelAfter.min);
         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);
@@ -515,9 +538,9 @@ function updateLayout(context, dragEvent) {
         }
     }
     // Don't let the panel collapse until the threshold is reached
-    if (panelBefore.collapsible &&
-        panelBefore.currentValue.value ===
-            getUnitPixelValue(context, panelBefore.min)) {
+    if (!dragEvent.disregardCollapseBuffer &&
+        panelBefore.collapsible &&
+        panelBefore.currentValue.value.eq(getUnitPixelValue(context, panelBefore.min))) {
         const potentialNewValue = panelBefore.currentValue.value.sub(newDragOvershoot.abs());
         if (newDragOvershoot.abs().lt(COLLAPSE_THRESHOLD) &&
             potentialNewValue.gt(getUnitPixelValue(context, panelBefore.collapsedSize))) {
@@ -564,7 +587,6 @@ function updateLayout(context, dragEvent) {
             .sub(panelAfterNewValue
             // Then re-add the move amount
             .add(Math.abs(moveAmount)));
-        panelAfter.collapsed = false;
         if (extra.gt(0)) {
             panelAfterNewValue = panelAfterNewValue.add(extra);
         }
@@ -574,14 +596,18 @@ function updateLayout(context, dragEvent) {
             .minus(panelAfterPreviousValue)
             // And then re-apply the movement value
             .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 &&
             !dragEvent.controlled) {
             panelAfter.onCollapseChange.current(false);
         }
     }
-    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 (!dragEvent.disregardCollapseBuffer &&
         panelBefore.collapsible &&
@@ -607,8 +633,7 @@ function updateLayout(context, dragEvent) {
     panelAfter.currentValue = { type: "pixel", value: panelAfterNewValue };
     const leftoverSpace = new Big(getGroupSize(context)).minus(newItems.reduce((acc, b) => acc.add(isPanelData(b) ? b.currentValue.value : b.size.value), new Big(0)));
     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 };
 }
@@ -629,7 +654,7 @@ function commitLayout(context) {
     });
     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;
         }
         newItems[index] = {
@@ -699,19 +724,74 @@ function applyDeltaInBothDirections(context, newItems, itemIndex, delta) {
         direction = direction === 1 ? -1 : 1;
     }
 }
+/**
+ * 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) {
+    // 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) => 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),
+                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 getDeltaForEvent(context, event) {
+    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(({ input: { send, context, event } }) => new Promise((resolve) => {
     const panel = getPanelWithId(context, event.panelId);
     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;
     const { duration, ease } = getCollapseAnimation(panel);
@@ -759,7 +839,7 @@ export const groupMachine = createMachine({
     states: {
         idle: {
             on: {
-                setActualItemsSize: { actions: ["recordActualItemSize"] },
+                setActualItemsSize: { actions: ["recordActualItemSize", "onResize"] },
                 dragHandleStart: { target: "dragging" },
                 setPanelPixelSize: {
                     actions: [
@@ -778,6 +858,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",
@@ -850,6 +932,29 @@ 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,
@@ -889,11 +994,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 }) => {
@@ -1034,9 +1142,13 @@ 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,
                     });
                 }
             }