@window-splitter/state 0.2.4 → 0.3.0

package/src/index.ts

@@ -23,12 +23,12 @@ export type PercentUnit = `${number}%`;
 export type Unit = PixelUnit | PercentUnit;
 type Orientation = "horizontal" | "vertical";
 
-interface ParsedPercentUnit {
+export interface ParsedPercentUnit {
   type: "percent";
   value: Big.Big;
 }
 
-interface ParsedPixelUnit {
+export interface ParsedPixelUnit {
   type: "pixel";
   value: Big.Big;
 }
@@ -88,6 +88,10 @@ export interface PanelData
   onCollapseChange?: {
     current: ((isCollapsed: boolean) => void) | null | undefined;
   };
+  /** A ref to the latest "onResize" function provided by the user */
+  onResize?: {
+    current: OnResizeCallback | null | undefined;
+  };
   /**
    * The current value for the item in the grid
    */
@@ -113,8 +117,8 @@ function getCollapseAnimation(panel: PanelData) {
   if (panel.collapseAnimation) {
     if (typeof panel.collapseAnimation === "string") {
       easeFn = collapseAnimations[panel.collapseAnimation];
-    } else if ("duration" in panel.collapseAnimation) {
-      duration = panel.collapseAnimation.duration ?? duration;
+    } else {
+      duration = panel.collapseAnimation.duration;
       easeFn =
         typeof panel.collapseAnimation.easing === "function"
           ? panel.collapseAnimation.easing
@@ -178,7 +182,7 @@ export type InitializePanelHandleData = Omit<
   PanelHandleData,
   "type" | "size"
 > & {
-  size: PixelUnit | ParsedPixelUnit;
+  size: PixelUnit;
 };
 
 interface RegisterPanelHandleEvent {
@@ -289,8 +293,6 @@ export interface GroupMachineContextValue {
   orientation: Orientation;
   /** How much the drag has overshot the handle */
   dragOvershoot: Big.Big;
-  /** An id to use for autosaving the layout */
-  autosaveId?: string;
   groupId: string;
 }
 
@@ -320,6 +322,28 @@ type EventForType<T extends GroupMachineEvent["type"]> = Extract<
 
 // #region Helpers
 
+export function getCursor(
+  context: Pick<GroupMachineContextValue, "dragOvershoot" | "orientation">
+) {
+  if (context.orientation === "horizontal") {
+    if (context.dragOvershoot.gt(0)) {
+      return "w-resize";
+    } else if (context.dragOvershoot.lt(0)) {
+      return "e-resize";
+    } else {
+      return "ew-resize";
+    }
+  } else {
+    if (context.dragOvershoot.gt(0)) {
+      return "n-resize";
+    } else if (context.dragOvershoot.lt(0)) {
+      return "s-resize";
+    } else {
+      return "ns-resize";
+    }
+  }
+}
+
 export function prepareSnapshot(snapshot: Snapshot<unknown>) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const snapshotContext = (snapshot as any)
@@ -330,14 +354,8 @@ export function prepareSnapshot(snapshot: Snapshot<unknown>) {
   for (const item of snapshotContext.items) {
     if (isPanelData(item)) {
       item.currentValue.value = new Big(item.currentValue.value);
-
-      if (item.collapsedSize) {
-        item.collapsedSize.value = new Big(item.collapsedSize.value);
-      }
-
-      if (item.min) {
-        item.min.value = new Big(item.min.value);
-      }
+      item.collapsedSize.value = new Big(item.collapsedSize.value);
+      item.min.value = new Big(item.min.value);
 
       if (item.max && item.max !== "1fr") {
         item.max.value = new Big(item.max.value);
@@ -381,6 +399,13 @@ export function isPanelHandle(value: unknown): value is PanelHandleData {
   );
 }
 
+type OnResizeSize = {
+  pixel: number;
+  percentage: number;
+};
+
+export type OnResizeCallback = (size: OnResizeSize) => void;
+
 interface InitializePanelOptions {
   min?: Unit;
   max?: Unit;
@@ -391,6 +416,9 @@ interface InitializePanelOptions {
   onCollapseChange?: {
     current: ((isCollapsed: boolean) => void) | null | undefined;
   };
+  onResize?: {
+    current: OnResizeCallback | null | undefined;
+  };
   collapseAnimation?: PanelData["collapseAnimation"];
   defaultCollapsed?: boolean;
   id?: string;
@@ -405,6 +433,25 @@ export function initializePanel(
 export function initializePanel(
   item: InitializePanelOptions | InitializePanelOptionsWithId
 ): PanelData | Omit<PanelData, "id"> {
+  const onResize = () => {
+    let lastCall: OnResizeSize | null = null;
+
+    // Memo-ize so we only call the callback once per size
+    return ((size) => {
+      if (
+        !lastCall ||
+        (lastCall.pixel === size.pixel &&
+          lastCall.percentage === size.percentage)
+      ) {
+        lastCall = size;
+        return;
+      }
+
+      lastCall = size;
+      item.onResize?.current?.(size);
+    }) satisfies OnResizeCallback;
+  };
+
   const data = {
     type: "panel" as const,
     min: parseUnit(item.min || "0px"),
@@ -415,6 +462,7 @@ export function initializePanel(
     collapsible: item.collapsible,
     collapsedSize: parseUnit(item.collapsedSize ?? "0px"),
     onCollapseChange: item.onCollapseChange,
+    onResize: { current: onResize() },
     collapseIsControlled: typeof item.collapsed !== "undefined",
     sizeBeforeCollapse: undefined,
     id: item.id,
@@ -432,7 +480,10 @@ export function initializePanelHandleData(item: InitializePanelHandleData) {
   return {
     type: "handle" as const,
     ...item,
-    size: typeof item.size === "string" ? parseUnit(item.size) : item.size,
+    size:
+      typeof item.size === "string"
+        ? (parseUnit(item.size) as ParsedPixelUnit)
+        : item.size,
   };
 }
 
@@ -469,7 +520,7 @@ export function getGroupSize(context: GroupMachineContextValue) {
 }
 
 /** Get the size of a panel in pixels */
-export function getUnitPixelValue(
+function getUnitPixelValue(
   context: GroupMachineContextValue,
   unit: ParsedUnit | "1fr"
 ) {
@@ -695,6 +746,52 @@ function formatUnit(unit: ParsedUnit): Unit {
   return `${unit.value.toNumber()}%`;
 }
 
+export function getPanelGroupPixelSizes(context: GroupMachineContextValue) {
+  return prepareItems(context).map((i) =>
+    isPanelData(i)
+      ? i.currentValue.value.toNumber()
+      : getUnitPixelValue(context, i.size).toNumber()
+  );
+}
+
+export function getPanelPixelSize(
+  context: GroupMachineContextValue,
+  panelId: string
+) {
+  const p = getPanelWithId(
+    { ...context, items: prepareItems(context) },
+    panelId
+  );
+
+  return p.currentValue.value.toNumber();
+}
+
+export function getPanelGroupPercentageSizes(
+  context: GroupMachineContextValue
+) {
+  const clamped = commitLayout({
+    ...context,
+    items: prepareItems(context),
+  });
+
+  return clamped.map((i) => {
+    if (isPanelHandle(i)) {
+      return getUnitPercentageValue(getGroupSize(context), i.size);
+    }
+
+    return getUnitPercentageValue(getGroupSize(context), i.currentValue);
+  });
+}
+
+export function getPanelPercentageSize(
+  context: GroupMachineContextValue,
+  panelId: string
+) {
+  const items = prepareItems(context);
+  const p = getPanelWithId({ ...context, items }, panelId);
+  return getUnitPercentageValue(getGroupSize(context), p.currentValue);
+}
+
 /** Build the grid template from the item values. */
 export function buildTemplate(context: GroupMachineContextValue) {
   const staticWidth = getStaticWidth(context);
@@ -708,10 +805,6 @@ export function buildTemplate(context: GroupMachineContextValue) {
           item.currentValue.type === "pixel" &&
           item.currentValue.value.toNumber() !== -1
         ) {
-          if (item.currentValue.value.toNumber() < 0) {
-            return "0px";
-          }
-
           return formatUnit(item.currentValue);
         } else if (item.currentValue.type === "percent") {
           const max = item.max === "1fr" ? "100%" : formatUnit(item.max);
@@ -1071,7 +1164,7 @@ function updateLayout(
     )
   );
 
-  if (leftoverSpace.gt(0)) {
+  if (!leftoverSpace.eq(0)) {
     panelBefore.currentValue.value =
       panelBefore.currentValue.value.add(leftoverSpace);
   }
@@ -1080,7 +1173,7 @@ function updateLayout(
 }
 
 /** Converts the items to percentages */
-export function commitLayout(context: GroupMachineContextValue) {
+function commitLayout(context: GroupMachineContextValue) {
   const newItems = [...context.items];
 
   // First set all the static width
@@ -1120,11 +1213,11 @@ export function commitLayout(context: GroupMachineContextValue) {
 
 export function dragHandlePayload({
   delta,
-  orientation,
+  orientation = "horizontal",
   shiftKey = false,
 }: {
   delta: number;
-  orientation: Orientation;
+  orientation?: Orientation;
   shiftKey?: boolean;
 }) {
   return {
@@ -1308,7 +1401,6 @@ export const groupMachine = createMachine(
       context: {} as GroupMachineContextValue,
       events: {} as GroupMachineEvent,
       input: {} as {
-        autosaveId?: string;
         orientation?: Orientation;
         groupId: string;
         initialItems?: Item[];
@@ -1319,7 +1411,6 @@ export const groupMachine = createMachine(
       items: input.initialItems || [],
       orientation: input.orientation || "horizontal",
       dragOvershoot: new Big(0),
-      autosaveId: input.autosaveId,
       groupId: input.groupId,
     }),
     states: {
@@ -1328,7 +1419,13 @@ export const groupMachine = createMachine(
           setActualItemsSize: { actions: ["recordActualItemSize"] },
           dragHandleStart: { target: "dragging" },
           setPanelPixelSize: {
-            actions: ["prepare", "onSetPanelSize", "commit"],
+            actions: [
+              "prepare",
+              "onSetPanelSize",
+              "commit",
+              "onResize",
+              "onAutosave",
+            ],
           },
           collapsePanel: [
             {
@@ -1349,7 +1446,7 @@ export const groupMachine = createMachine(
       dragging: {
         entry: ["prepare"],
         on: {
-          dragHandle: { actions: ["onDragHandle"] },
+          dragHandle: { actions: ["onDragHandle", "onResize"] },
           dragHandleEnd: { target: "idle" },
           collapsePanel: {
             guard: "shouldCollapseToggle",
@@ -1373,24 +1470,30 @@ export const groupMachine = createMachine(
           },
         },
         on: {
-          applyDelta: { actions: ["onApplyDelta"] },
+          applyDelta: { actions: ["onApplyDelta", "onResize"] },
         },
       },
     },
     on: {
       registerPanel: { actions: ["assignPanelData"] },
       registerDynamicPanel: {
-        actions: ["prepare", "onRegisterDynamicPanel", "commit", "onAutosave"],
+        actions: [
+          "prepare",
+          "onRegisterDynamicPanel",
+          "commit",
+          "onResize",
+          "onAutosave",
+        ],
       },
       unregisterPanel: {
-        actions: ["prepare", "removeItem", "commit", "onAutosave"],
+        actions: ["prepare", "removeItem", "commit", "onResize", "onAutosave"],
       },
       registerPanelHandle: { actions: ["assignPanelHandleData"] },
       unregisterPanelHandle: {
-        actions: ["prepare", "removeItem", "commit", "onAutosave"],
+        actions: ["prepare", "removeItem", "commit", "onResize", "onAutosave"],
       },
-      setSize: { actions: ["updateSize"] },
-      setOrientation: { actions: ["updateOrientation"] },
+      setSize: { actions: ["updateSize", "onResize"] },
+      setOrientation: { actions: ["updateOrientation", "onResize"] },
     },
   },
   {
@@ -1630,6 +1733,19 @@ export const groupMachine = createMachine(
           })
         );
       }),
+      onResize: ({ context }) => {
+        for (const item of context.items) {
+          if (isPanelData(item)) {
+            item.onResize?.current?.({
+              pixel: getUnitPixelValue(context, item.currentValue).toNumber(),
+              percentage: getUnitPercentageValue(
+                getGroupSize(context),
+                item.currentValue
+              ),
+            });
+          }
+        }
+      },
     },
   }
 );