@window-splitter/state 0.2.4 → 0.3.0

package/dist/esm/index.js

@@ -18,8 +18,8 @@ function getCollapseAnimation(panel) {
         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
@@ -45,6 +45,30 @@ const collapseAnimations = {
 };
 // #endregion
 // #region Helpers
+export function getCursor(context) {
+    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) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const snapshotContext = snapshot
@@ -53,12 +77,8 @@ export function prepareSnapshot(snapshot) {
     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);
             }
@@ -88,6 +108,20 @@ export function isPanelHandle(value) {
         value.type === "handle");
 }
 export function initializePanel(item) {
+    const onResize = () => {
+        let lastCall = 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);
+        });
+    };
     const data = {
         type: "panel",
         min: parseUnit(item.min || "0px"),
@@ -98,6 +132,7 @@ export function initializePanel(item) {
         collapsible: item.collapsible,
         collapsedSize: parseUnit(item.collapsedSize ?? "0px"),
         onCollapseChange: item.onCollapseChange,
+        onResize: { current: onResize() },
         collapseIsControlled: typeof item.collapsed !== "undefined",
         sizeBeforeCollapse: undefined,
         id: item.id,
@@ -110,7 +145,9 @@ export function initializePanelHandleData(item) {
     return {
         type: "handle",
         ...item,
-        size: typeof item.size === "string" ? parseUnit(item.size) : item.size,
+        size: typeof item.size === "string"
+            ? parseUnit(item.size)
+            : item.size,
     };
 }
 /** Parse a `Unit` string or `clamp` value */
@@ -139,7 +176,7 @@ export function getGroupSize(context) {
         : context.size.height;
 }
 /** Get the size of a panel in pixels */
-export function getUnitPixelValue(context, unit) {
+function getUnitPixelValue(context, unit) {
     const parsed = unit === "1fr" ? parseUnit(unit) : unit;
     return parsed.type === "pixel"
         ? parsed.value
@@ -282,6 +319,32 @@ function formatUnit(unit) {
     }
     return `${unit.value.toNumber()}%`;
 }
+export function getPanelGroupPixelSizes(context) {
+    return prepareItems(context).map((i) => isPanelData(i)
+        ? i.currentValue.value.toNumber()
+        : getUnitPixelValue(context, i.size).toNumber());
+}
+export function getPanelPixelSize(context, panelId) {
+    const p = getPanelWithId({ ...context, items: prepareItems(context) }, panelId);
+    return p.currentValue.value.toNumber();
+}
+export function getPanelGroupPercentageSizes(context) {
+    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, panelId) {
+    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) {
     const staticWidth = getStaticWidth(context);
@@ -291,9 +354,6 @@ export function buildTemplate(context) {
             const min = formatUnit(item.min);
             if (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") {
@@ -541,14 +601,14 @@ function updateLayout(context, dragEvent) {
     panelBefore.currentValue = { type: "pixel", value: panelBeforeNewValue };
     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.gt(0)) {
+    if (!leftoverSpace.eq(0)) {
         panelBefore.currentValue.value =
             panelBefore.currentValue.value.add(leftoverSpace);
     }
     return { items: newItems };
 }
 /** Converts the items to percentages */
-export function commitLayout(context) {
+function commitLayout(context) {
     const newItems = [...context.items];
     // First set all the static width
     newItems.forEach((item, index) => {
@@ -577,7 +637,7 @@ export function commitLayout(context) {
     });
     return newItems;
 }
-export function dragHandlePayload({ delta, orientation, shiftKey = false, }) {
+export function dragHandlePayload({ delta, orientation = "horizontal", shiftKey = false, }) {
     return {
         type: "move",
         pointerType: "keyboard",
@@ -689,7 +749,6 @@ export const groupMachine = createMachine({
         items: input.initialItems || [],
         orientation: input.orientation || "horizontal",
         dragOvershoot: new Big(0),
-        autosaveId: input.autosaveId,
         groupId: input.groupId,
     }),
     states: {
@@ -698,7 +757,13 @@ export const groupMachine = createMachine({
                 setActualItemsSize: { actions: ["recordActualItemSize"] },
                 dragHandleStart: { target: "dragging" },
                 setPanelPixelSize: {
-                    actions: ["prepare", "onSetPanelSize", "commit"],
+                    actions: [
+                        "prepare",
+                        "onSetPanelSize",
+                        "commit",
+                        "onResize",
+                        "onAutosave",
+                    ],
                 },
                 collapsePanel: [
                     {
@@ -719,7 +784,7 @@ export const groupMachine = createMachine({
         dragging: {
             entry: ["prepare"],
             on: {
-                dragHandle: { actions: ["onDragHandle"] },
+                dragHandle: { actions: ["onDragHandle", "onResize"] },
                 dragHandleEnd: { target: "idle" },
                 collapsePanel: {
                     guard: "shouldCollapseToggle",
@@ -743,24 +808,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"] },
     },
 }, {
     guards: {
@@ -955,6 +1026,16 @@ export const groupMachine = createMachine({
                 delta,
             }));
         }),
+        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),
+                    });
+                }
+            }
+        },
     },
 });
 // #endregion