@window-splitter/state 0.4.0 → 0.4.2

package/src/__snapshots__/machine.test.ts.snap

@@ -1,6 +1,86 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`utils > prepareSnapshot 1`] = `
+{
+  "children": {},
+  "context": {
+    "dragOvershoot": "0",
+    "groupId": "group",
+    "items": [
+      {
+        "collapseIsControlled": false,
+        "collapsedSize": {
+          "type": "pixel",
+          "value": "0",
+        },
+        "currentValue": {
+          "type": "pixel",
+          "value": "-1",
+        },
+        "id": "panel-1",
+        "lastKnownSize": {
+          "height": 200,
+          "width": 190,
+        },
+        "max": "1fr",
+        "min": {
+          "type": "pixel",
+          "value": "100",
+        },
+        "onResize": {},
+        "type": "panel",
+      },
+      {
+        "id": "resizer-1",
+        "size": {
+          "type": "pixel",
+          "value": "10",
+        },
+        "type": "handle",
+      },
+      {
+        "collapseIsControlled": false,
+        "collapsed": false,
+        "collapsedSize": {
+          "type": "pixel",
+          "value": "50",
+        },
+        "collapsible": true,
+        "currentValue": {
+          "type": "pixel",
+          "value": "-1",
+        },
+        "id": "panel-2",
+        "lastKnownSize": {
+          "height": 200,
+          "width": 300,
+        },
+        "max": {
+          "type": "pixel",
+          "value": "300",
+        },
+        "min": {
+          "type": "pixel",
+          "value": "0",
+        },
+        "onResize": {},
+        "type": "panel",
+      },
+    ],
+    "orientation": "horizontal",
+    "size": {
+      "height": 200,
+      "width": 500,
+    },
+  },
+  "historyValue": {},
+  "status": "active",
+  "tags": [],
+  "value": "idle",
+}
+`;
+
+exports[`utils > prepareSnapshot 2`] = `
 {
   "children": {},
   "context": {
@@ -15,7 +95,7 @@ exports[`utils > prepareSnapshot 1`] = `
         },
         "currentValue": {
           "type": "percent",
-          "value": "0.38775510204081632653",
+          "value": "0.59183673469387755102",
         },
         "id": "panel-1",
         "max": "1fr",
@@ -44,7 +124,7 @@ exports[`utils > prepareSnapshot 1`] = `
         "collapsible": true,
         "currentValue": {
           "type": "percent",
-          "value": "0.61224489795918367347",
+          "value": "0.40816326530612244898",
         },
         "id": "panel-2",
         "max": {

package/src/index.ts

@@ -1,3 +1,4 @@
+import Cookies from "universal-cookie";
 import { raf } from "@react-spring/rafz";
 import {
   createMachine,
@@ -115,6 +116,7 @@ export interface PanelData
   collapseAnimation?:
     | CollapseAnimation
     | { duration: number; easing: CollapseAnimation | ((t: number) => number) };
+  lastKnownSize?: Rect;
 }
 
 function getCollapseAnimation(panel: PanelData) {
@@ -174,6 +176,12 @@ interface RegisterPanelEvent {
   data: Omit<PanelData, "type" | "currentValue" | "defaultCollapsed">;
 }
 
+interface RebindPanelCallbacksEvent {
+  /** Rebind the panel callbacks */
+  type: "rebindPanelCallbacks";
+  data: Pick<PanelData, "id" | "onCollapseChange" | "onResize">;
+}
+
 interface RegisterDynamicPanelEvent extends Omit<RegisterPanelEvent, "type"> {
   /** Register a new panel with the state machine */
   type: "registerDynamicPanel";
@@ -235,7 +243,6 @@ interface SetSizeEvent {
   /** Set the size of the whole group */
   type: "setSize";
   size: Rect;
-  handleOverflow?: boolean;
 }
 
 interface SetActualItemsSizeEvent {
@@ -302,8 +309,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
@@ -319,8 +335,8 @@ export type GroupMachineEvent =
   | ExpandPanelEvent
   | SetPanelPixelSizeEvent
   | ApplyDeltaEvent
-  | SetActualItemsSizeEvent;
-
+  | SetActualItemsSizeEvent
+  | RebindPanelCallbacksEvent;
 type EventForType<T extends GroupMachineEvent["type"]> = Extract<
   GroupMachineEvent,
   { type: T }
@@ -352,10 +368,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);
 
@@ -800,6 +814,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) => {
@@ -817,6 +832,15 @@ export function buildTemplate(context: GroupMachineContextValue) {
 
           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) {
@@ -939,6 +963,16 @@ export function prepareItems(context: GroupMachineContextValue): 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;
@@ -1433,6 +1467,10 @@ function handleOverflow(context: GroupMachineContextValue) {
   return { ...newContext, items: commitLayout(newContext) };
 }
 
+function clearLastKnownSize(items: Item[]) {
+  return items.map((i) => ({ ...i, lastKnownSize: undefined }));
+}
+
 // #endregion
 
 // #region Machine
@@ -1534,6 +1572,7 @@ export const groupMachine = createMachine(
         orientation?: Orientation;
         groupId: string;
         initialItems?: Item[];
+        autosaveStrategy?: "localStorage" | "cookie";
       },
     },
     context: ({ input }) => ({
@@ -1542,15 +1581,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",
@@ -1578,7 +1619,9 @@ export const groupMachine = createMachine(
       dragging: {
         entry: ["prepare"],
         on: {
-          dragHandle: { actions: ["onDragHandle", "onResize"] },
+          dragHandle: {
+            actions: ["onClearLastKnownSize", "onDragHandle", "onResize"],
+          },
           dragHandleEnd: { target: "idle" },
           collapsePanel: {
             guard: "shouldCollapseToggle",
@@ -1589,16 +1632,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: {
@@ -1607,25 +1650,44 @@ export const groupMachine = createMachine(
       },
     },
     on: {
+      setActualItemsSize: { actions: ["recordActualItemSize", "onResize"] },
       registerPanel: { actions: ["assignPanelData"] },
+      rebindPanelCallbacks: { actions: ["rebindPanelCallbacks"] },
       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"],
+      },
     },
   },
   {
@@ -1677,6 +1739,26 @@ export const groupMachine = createMachine(
       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);
@@ -1703,8 +1785,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);
@@ -1717,34 +1798,50 @@ 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;
+          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"
+                ];
 
-          for (const [id, size] of Object.entries(event.childrenSizes)) {
-            const item = context.items.find((i) => i.id === id);
+              // If any size is 0 don't handle overflow
+              if (!size) {
+                return withLastKnownSize;
+              }
 
-            if (!isPanelData(item)) {
-              continue;
+              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({
@@ -1753,6 +1850,9 @@ export const groupMachine = createMachine(
           return event.orientation;
         },
       }),
+      onClearLastKnownSize: assign({
+        items: ({ context }) => clearLastKnownSize(context.items),
+      }),
       assignPanelData: assign({
         items: ({ context, event }) => {
           isEvent(event, ["registerPanel"]);
@@ -1764,6 +1864,20 @@ export const groupMachine = createMachine(
           });
         },
       }),
+      rebindPanelCallbacks: assign({
+        items: ({ context, event }) => {
+          isEvent(event, ["rebindPanelCallbacks"]);
+
+          for (const item of context.items) {
+            if (isPanelData(item) && item.id === event.data.id) {
+              item.onCollapseChange = event.data.onCollapseChange;
+              item.onResize = event.data.onResize;
+            }
+          }
+
+          return context.items;
+        },
+      }),
       onRegisterDynamicPanel: assign({
         items: ({ context, event }) => {
           isEvent(event, ["registerDynamicPanel"]);
@@ -1903,11 +2017,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?.({