@window-splitter/state 0.3.2 → 0.4.1

package/dist/esm/index.js

@@ -1,3 +1,4 @@
+import Cookies from "universal-cookie";
 import { raf } from "@react-spring/rafz";
 import { createMachine, assign, enqueueActions, fromPromise, } from "xstate";
 import invariant from "invariant";
@@ -70,9 +71,7 @@ export function getCursor(context) {
     }
 }
 export function prepareSnapshot(snapshot) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const snapshotContext = snapshot
-        .context;
+    const snapshotContext = snapshot.context;
     snapshotContext.dragOvershoot = new Big(snapshotContext.dragOvershoot);
     for (const item of snapshotContext.items) {
         if (isPanelData(item)) {
@@ -138,6 +137,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) };
 }
@@ -280,8 +280,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 +304,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);
         }
     }
@@ -348,15 +348,26 @@ export function getPanelPercentageSize(context, panelId) {
 /** Build the grid template from the item values. */
 export function buildTemplate(context) {
     const staticWidth = getStaticWidth(context);
+    let hasSeenFillPanel = false;
     return context.items
         .map((item) => {
         if (item.type === "panel") {
             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") {
+                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}))`;
             }
@@ -459,11 +470,18 @@ 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.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;
         }
         const pixel = new Big(getGroupSize(context))
@@ -517,6 +535,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);
@@ -529,9 +551,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))) {
@@ -578,7 +600,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);
         }
@@ -588,14 +609,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 &&
@@ -621,8 +646,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 };
 }
@@ -643,7 +667,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] = {
@@ -713,19 +737,77 @@ 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 clearLastKnownSize(items) {
+    return items.map((i) => ({ ...i, lastKnownSize: undefined }));
+}
+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);
@@ -769,15 +851,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",
@@ -792,6 +876,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",
@@ -803,7 +889,9 @@ export const groupMachine = createMachine({
         dragging: {
             entry: ["prepare"],
             on: {
-                dragHandle: { actions: ["onDragHandle", "onResize"] },
+                dragHandle: {
+                    actions: ["onClearLastKnownSize", "onDragHandle", "onResize"],
+                },
                 dragHandleEnd: { target: "idle" },
                 collapsePanel: {
                     guard: "shouldCollapseToggle",
@@ -814,16 +902,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: {
@@ -832,25 +920,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"],
+        },
     },
 }, {
     guards: {
@@ -864,11 +970,52 @@ 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();
+            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.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);
@@ -892,8 +1039,7 @@ export const groupMachine = createMachine({
         }),
         onToggleCollapseComplete: assign({
             items: ({ context, event: e }) => {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const output = e.output;
+                const { output } = e;
                 invariant(output, "Expected output from animation actor");
                 const panel = getPanelWithId(context, output.panelId);
                 panel.collapsed = output.action === "collapse";
@@ -912,15 +1058,33 @@ export const groupMachine = createMachine({
         recordActualItemSize: assign({
             items: ({ context, event }) => {
                 isEvent(event, ["setActualItemsSize"]);
-                const orientation = context.orientation;
-                for (const [id, size] of Object.entries(event.childrenSizes)) {
-                    const item = context.items.find((i) => i.id === id);
-                    if (!isPanelData(item)) {
-                        continue;
+                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 item of withLastKnownSize) {
+                    if (isPanelData(item)) {
+                        const size = item.lastKnownSize?.[context.orientation === "horizontal" ? "width" : "height"];
+                        // If any size is 0 don't handle overflow
+                        if (!size) {
+                            return withLastKnownSize;
+                        }
+                        totalSize += size;
                     }
-                    item.currentValue = makePixelUnit(orientation === "horizontal" ? size.width : size.height);
+                    else {
+                        totalSize += item.size.value.toNumber();
+                    }
+                }
+                if (totalSize > getGroupSize(context)) {
+                    return handleOverflow({
+                        ...context,
+                        items: prepareItems({ ...context, items: withLastKnownSize }),
+                    }).items;
                 }
-                return commitLayout(context);
+                return withLastKnownSize;
             },
         }),
         updateOrientation: assign({
@@ -929,6 +1093,9 @@ export const groupMachine = createMachine({
                 return event.orientation;
             },
         }),
+        onClearLastKnownSize: assign({
+            items: ({ context }) => clearLastKnownSize(context.items),
+        }),
         assignPanelData: assign({
             items: ({ context, event }) => {
                 isEvent(event, ["registerPanel"]);
@@ -1048,10 +1215,17 @@ 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,
                     });
                 }
             }