@window-splitter/state 0.4.0 → 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)) {
@@ -349,6 +348,7 @@ 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") {
@@ -362,6 +362,12 @@ export function buildTemplate(context) {
                 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}))`;
             }
@@ -467,6 +473,13 @@ export function prepareItems(context) {
             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 });
             continue;
@@ -776,6 +789,9 @@ function handleOverflow(context) {
     }
     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") {
@@ -835,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",
@@ -871,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",
@@ -882,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: {
@@ -900,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: {
@@ -960,6 +998,24 @@ export const groupMachine = createMachine({
         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);
@@ -983,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";
@@ -994,27 +1049,42 @@ export const groupMachine = createMachine({
                 return context.items;
             },
         }),
-        updateSize: enqueueActions(({ context, event, enqueue }) => {
-            isEvent(event, ["setSize"]);
-            if (event.handleOverflow) {
-                enqueue.assign(handleOverflow({ ...context, size: event.size }));
-            }
-            else {
-                enqueue.assign({ size: event.size });
-            }
+        updateSize: assign({
+            size: ({ event }) => {
+                isEvent(event, ["setSize"]);
+                return event.size;
+            },
         }),
         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;
+                    }
+                    else {
+                        totalSize += item.size.value.toNumber();
                     }
-                    item.currentValue = makePixelUnit(orientation === "horizontal" ? size.width : size.height);
                 }
-                return commitLayout(context);
+                if (totalSize > getGroupSize(context)) {
+                    return handleOverflow({
+                        ...context,
+                        items: prepareItems({ ...context, items: withLastKnownSize }),
+                    }).items;
+                }
+                return withLastKnownSize;
             },
         }),
         updateOrientation: assign({
@@ -1023,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"]);
@@ -1142,7 +1215,11 @@ 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(),