@window-splitter/state 0.2.4 → 0.3.0

package/src/machine.test.ts

@@ -6,14 +6,20 @@ import { expect, test, describe, vi } from "vitest";
 import {
   buildTemplate,
   dragHandlePayload,
+  getPanelGroupPercentageSizes,
+  getPanelGroupPixelSizes,
+  getPanelPercentageSize,
+  getPanelPixelSize,
   groupMachine,
   GroupMachineEvent,
   initializePanel,
   initializePanelHandleData,
   isPanelHandle,
+  prepareSnapshot,
 } from "./index.js";
 import { Actor, createActor } from "xstate";
 import { spring } from "framer-motion";
+import Big from "big.js";
 
 function getTemplate(actor: Actor<typeof groupMachine>) {
   return buildTemplate(actor.getSnapshot().context);
@@ -33,7 +39,7 @@ function dragHandle(
       type: "dragHandle",
       handleId: options.id,
       value: dragHandlePayload({
-        orientation: options.orientation || "horizontal",
+        orientation: options.orientation,
         delta: options.delta > 0 ? 1 : -1,
         shiftKey: options.shiftKey,
       }),
@@ -186,6 +192,86 @@ describe("constraints", () => {
     );
   });
 
+  test("works with 2 simple panels - overshot flakiness", () => {
+    const actor = createActor(groupMachine, {
+      input: { groupId: "group" },
+    }).start();
+
+    sendAll(actor, [
+      {
+        type: "registerPanel",
+        data: initializePanel({ id: "panel-1" }),
+      },
+      {
+        type: "registerPanelHandle",
+        // @ts-expect-error The types were hard and i wanted to keep the public API simple
+        data: { id: "resizer-1", size: { type: "pixel", value: new Big(10) } },
+      },
+      { type: "registerPanel", data: initializePanel({ id: "panel-2" }) },
+    ]);
+
+    expect(getTemplate(actor)).toMatchInlineSnapshot(
+      `"minmax(0px, 1fr) 10px minmax(0px, 1fr)"`
+    );
+    initializeSizes(actor, { width: 500, height: 200 });
+
+    // The only way i could simulate the leftoverSpace was to set the size
+    // during a drag
+    capturePixelValues(actor, () => {
+      actor.send({
+        type: "setSize",
+        size: {
+          width: 600,
+          height: 200,
+        },
+      });
+      actor.send({
+        type: "dragHandle",
+        handleId: "resizer-1",
+        value: dragHandlePayload({
+          delta: 30,
+        }),
+      });
+    });
+
+    expect(getTemplate(actor)).toMatchInlineSnapshot(
+      `"minmax(0px, min(calc(0.46610169491525423729 * (100% - 10px)), 100%)) 10px minmax(0px, min(calc(0.53389830508474576271 * (100% - 10px)), 100%))"`
+    );
+  });
+
+  test("works with 2 simple panels - max percents", () => {
+    const actor = createActor(groupMachine, {
+      input: { groupId: "group" },
+    }).start();
+
+    sendAll(actor, [
+      {
+        type: "registerPanel",
+        data: initializePanel({ id: "panel-1", max: "40%" }),
+      },
+      {
+        type: "registerPanelHandle",
+        // @ts-expect-error The types were hard and i wanted to keep the public API simple
+        data: { id: "resizer-1", size: { type: "pixel", value: new Big(10) } },
+      },
+      { type: "registerPanel", data: initializePanel({ id: "panel-2" }) },
+    ]);
+
+    expect(getTemplate(actor)).toMatchInlineSnapshot(
+      `"minmax(0px, 40%) 10px minmax(0px, 1fr)"`
+    );
+    initializeSizes(actor, { width: 500, height: 200 });
+
+    // Drag the resizer to the right
+    capturePixelValues(actor, () => {
+      dragHandle(actor, { id: "resizer-1", delta: 10 });
+    });
+
+    expect(getTemplate(actor)).toMatchInlineSnapshot(
+      `"minmax(0px, min(calc(0.40816326530612244898 * (100% - 10px)), 40%)) 10px minmax(0px, min(calc(0.59183673469387755102 * (100% - 10px)), 100%))"`
+    );
+  });
+
   test("works with 2 simple panels - vertical", () => {
     const actor = createActor(groupMachine, {
       input: { orientation: "vertical", groupId: "group" },
@@ -274,6 +360,29 @@ describe("constraints", () => {
     });
   });
 
+  test("can spy on resize", () => {
+    const spy = vi.fn();
+    const actor = createActor(groupMachine, {
+      input: {
+        groupId: "group",
+        initialItems: [
+          initializePanel({ id: "panel-1", onResize: { current: spy } }),
+          initializePanelHandleData({ id: "resizer-1", size: "10px" }),
+          initializePanel({ id: "panel-2" }),
+        ],
+      },
+    }).start();
+    initializeSizes(actor, { width: 500, height: 200 });
+
+    capturePixelValues(actor, () => {
+      dragHandle(actor, { id: "resizer-1", delta: 100 });
+      expect(spy).toHaveBeenCalledWith({
+        pixel: 345,
+        percentage: 0.69,
+      });
+    });
+  });
+
   test("no delta does nothing", () => {
     const actor = createActor(groupMachine, {
       input: {
@@ -292,7 +401,7 @@ describe("constraints", () => {
       actor.send({
         type: "dragHandle",
         handleId: "resizer-1",
-        value: dragHandlePayload({ delta: 0, orientation: "horizontal" }),
+        value: dragHandlePayload({ delta: 0 }),
       });
       expect(getTemplate(actor)).toMatchInlineSnapshot(`"245px 10px 245px"`);
     });
@@ -569,6 +678,8 @@ describe("collapsible panel", () => {
   test.each([
     undefined,
     "ease-in-out" as const,
+    "bounce" as const,
+    { duration: 500, easing: "linear" as const },
     { duration: 1000, easing: springEasing },
   ])("panel can be collapsible: %s", async (animation) => {
     const actor = createActor(groupMachine, {
@@ -992,7 +1103,7 @@ describe("collapsible panel", () => {
     });
   });
 
-  test("panel collapse can be controlled", async () => {
+  test("panel collapse can be controlled ", async () => {
     const actor = createActor(groupMachine, {
       input: { groupId: "group" },
     }).start();
@@ -1069,6 +1180,8 @@ describe("collapsible panel", () => {
 
     spy.mockReset();
 
+    // Sending controlled events works
+
     actor.send({ type: "collapsePanel", panelId: "panel-2", controlled: true });
     await waitForIdle(actor);
 
@@ -1085,6 +1198,81 @@ describe("collapsible panel", () => {
       expect(getTemplate(actor)).toMatchInlineSnapshot(`"321px 10px 169px"`);
     });
   });
+
+  test("panel collapse can be controlled - event", async () => {
+    const actor = createActor(groupMachine, {
+      input: { groupId: "group" },
+    }).start();
+
+    const spy = vi.fn();
+
+    sendAll(actor, [
+      { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
+      {
+        type: "registerPanelHandle",
+        data: { id: "resizer-1", size: "10px" },
+      },
+      {
+        type: "registerPanel",
+        data: initializePanel({
+          id: "panel-2",
+          collapsible: true,
+          min: "100px",
+          // This marks the collapse as controlled
+          collapsed: false,
+          collapsedSize: "20px",
+          onCollapseChange: {
+            current: spy,
+          },
+        }),
+      },
+    ]);
+
+    expect(getTemplate(actor)).toMatchInlineSnapshot(
+      `"minmax(0px, 1fr) 10px minmax(100px, 1fr)"`
+    );
+    initializeSizes(actor, { width: 500, height: 200 });
+
+    // COLLAPSE
+
+    // An uncontrolled event doesn't collapse the panel, it only calls the onCollapseChange
+    actor.send({ type: "collapsePanel", panelId: "panel-2" });
+    expect(spy).toHaveBeenCalledWith(true);
+    await waitForIdle(actor);
+    capturePixelValues(actor, () => {
+      expect(getTemplate(actor)).toMatchInlineSnapshot(`"245px 10px 245px"`);
+    });
+    spy.mockReset();
+
+    // Sending controlled events works
+    actor.send({ type: "collapsePanel", panelId: "panel-2", controlled: true });
+    // and doesn't call the onCollapseChange
+    expect(spy).not.toHaveBeenCalled();
+    await waitForIdle(actor);
+    capturePixelValues(actor, () => {
+      expect(getTemplate(actor)).toMatchInlineSnapshot(`"470px 10px 20px"`);
+    });
+
+    // EXPAND
+
+    // An uncontrolled event doesn't expand the panel, it only calls the onCollapseChange
+    actor.send({ type: "expandPanel", panelId: "panel-2" });
+    expect(spy).toHaveBeenCalledWith(false);
+    await waitForIdle(actor);
+    capturePixelValues(actor, () => {
+      expect(getTemplate(actor)).toMatchInlineSnapshot(`"470px 10px 20px"`);
+    });
+    spy.mockReset();
+
+    // Sending controlled events works
+    actor.send({ type: "expandPanel", panelId: "panel-2", controlled: true });
+    // and doesn't call the onCollapseChange
+    expect(spy).not.toHaveBeenCalled();
+    await waitForIdle(actor);
+    capturePixelValues(actor, () => {
+      expect(getTemplate(actor)).toMatchInlineSnapshot(`"245px 10px 245px"`);
+    });
+  });
 });
 
 describe("conditional panel", () => {
@@ -1307,13 +1495,13 @@ describe("conditional panel", () => {
       input: {
         groupId: "group",
         initialItems: [
-          initializePanel({ id: "panel-1" }),
+          initializePanel({ id: "panel-1", max: "20px" }),
           initializePanelHandleData({ id: "resizer-1", size: "10px" }),
-          initializePanel({ id: "panel-2", max: "50px" }),
+          initializePanel({ id: "panel-2", default: "10px", max: "50px" }),
           initializePanelHandleData({ id: "resizer-2", size: "10px" }),
           initializePanel({ id: "panel-3", default: "300px" }),
           initializePanelHandleData({ id: "resizer-3", size: "10px" }),
-          initializePanel({ id: "panel-4", max: "50px" }),
+          initializePanel({ id: "panel-4", default: "10px", max: "50px" }),
           initializePanelHandleData({ id: "resizer-4", size: "10px" }),
           initializePanel({ id: "panel-5", max: "300px" }),
         ],
@@ -1324,7 +1512,7 @@ describe("conditional panel", () => {
 
     capturePixelValues(actor, () => {
       expect(getTemplate(actor)).toMatchInlineSnapshot(
-        `"0px 10px 50px 10px 300px 10px 50px 10px 60px"`
+        `"20px 10px 10px 10px 300px 10px 10px 10px 120px"`
       );
     });
 
@@ -1335,7 +1523,7 @@ describe("conditional panel", () => {
 
     capturePixelValues(actor, () => {
       expect(getTemplate(actor)).toMatchInlineSnapshot(
-        `"70px 10px 50px 10px 50px 10px 300px"`
+        `"20px 10px 50px 10px 50px 10px 300px"`
       );
     });
   });
@@ -1394,7 +1582,7 @@ describe("errors", () => {
       {
         type: "dragHandle",
         handleId: "handle-2",
-        value: dragHandlePayload({ delta: 100, orientation: "horizontal" }),
+        value: dragHandlePayload({ delta: 100 }),
       },
     ]);
 
@@ -1403,3 +1591,133 @@ describe("errors", () => {
     );
   });
 });
+
+describe("utils", async () => {
+  test("getPanelGroupPixelSizes", () => {
+    const actor = createActor(groupMachine, {
+      input: { groupId: "group" },
+    }).start();
+
+    sendAll(actor, [
+      { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
+      {
+        type: "registerPanelHandle",
+        data: { id: "resizer-1", size: "10px" },
+      },
+      {
+        type: "registerPanel",
+        data: initializePanel({ id: "panel-2", max: "300px" }),
+      },
+    ]);
+
+    initializeSizes(actor, { width: 500, height: 200 });
+
+    expect(getPanelGroupPixelSizes(actor.getSnapshot().context)).toEqual([
+      190, 10, 300,
+    ]);
+  });
+
+  test("getPanelGroupPercentageSizes", () => {
+    const actor = createActor(groupMachine, {
+      input: { groupId: "group" },
+    }).start();
+
+    sendAll(actor, [
+      { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
+      {
+        type: "registerPanelHandle",
+        data: { id: "resizer-1", size: "10px" },
+      },
+      {
+        type: "registerPanel",
+        data: initializePanel({ id: "panel-2", max: "300px" }),
+      },
+    ]);
+
+    initializeSizes(actor, { width: 500, height: 200 });
+
+    expect(getPanelGroupPercentageSizes(actor.getSnapshot().context)).toEqual([
+      0.3877551020408163, 0.02, 0.6122448979591837,
+    ]);
+  });
+
+  test("getPanelPercentageSize", () => {
+    const actor = createActor(groupMachine, {
+      input: { groupId: "group" },
+    }).start();
+
+    sendAll(actor, [
+      { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
+      {
+        type: "registerPanelHandle",
+        data: { id: "resizer-1", size: "10px" },
+      },
+      {
+        type: "registerPanel",
+        data: initializePanel({ id: "panel-2", max: "300px" }),
+      },
+    ]);
+
+    initializeSizes(actor, { width: 500, height: 200 });
+
+    expect(getPanelPercentageSize(actor.getSnapshot().context, "panel-2")).toBe(
+      0.6
+    );
+  });
+
+  test("getPanelPixelSize", () => {
+    const actor = createActor(groupMachine, {
+      input: { groupId: "group" },
+    }).start();
+
+    sendAll(actor, [
+      { type: "registerPanel", data: initializePanel({ id: "panel-1" }) },
+      {
+        type: "registerPanelHandle",
+        data: { id: "resizer-1", size: "10px" },
+      },
+      {
+        type: "registerPanel",
+        data: initializePanel({ id: "panel-2", max: "300px" }),
+      },
+    ]);
+
+    initializeSizes(actor, { width: 500, height: 200 });
+
+    expect(getPanelPixelSize(actor.getSnapshot().context, "panel-2")).toBe(300);
+  });
+
+  test("prepareSnapshot", () => {
+    const actor = createActor(groupMachine, {
+      input: { groupId: "group" },
+    }).start();
+
+    sendAll(actor, [
+      {
+        type: "registerPanel",
+        data: initializePanel({ id: "panel-1", min: "100px" }),
+      },
+      {
+        type: "registerPanelHandle",
+        data: { id: "resizer-1", size: "10px" },
+      },
+      {
+        type: "registerPanel",
+        data: initializePanel({
+          id: "panel-2",
+          max: "300px",
+          collapsible: true,
+          collapsedSize: "50px",
+        }),
+      },
+    ]);
+
+    initializeSizes(actor, { width: 500, height: 200 });
+
+    const oldSnapshot = actor.getSnapshot();
+    const serialized = JSON.stringify(oldSnapshot);
+    const newSnapshot = prepareSnapshot(JSON.parse(serialized));
+
+    expect(newSnapshot).toMatchSnapshot();
+  });
+});

package/src/utils.test.ts

@@ -5,6 +5,8 @@ import {
   getCollapsiblePanelForHandleId,
   groupMachine,
   initializePanel,
+  getCursor,
+  initializePanelHandleData,
 } from "./index.js";
 import { createActor } from "xstate";
 import Big from "big.js";
@@ -115,3 +117,87 @@ describe("getCollapsiblePanelForHandleId", () => {
     );
   });
 });
+
+describe("getCursor", () => {
+  describe("horizontal", () => {
+    test("works before overshoot", () => {
+      expect(
+        getCursor({ orientation: "horizontal", dragOvershoot: new Big(-10) })
+      ).toBe("e-resize");
+    });
+
+    test("works at overshoot", () => {
+      expect(
+        getCursor({ orientation: "horizontal", dragOvershoot: new Big(0) })
+      ).toBe("ew-resize");
+    });
+
+    test("works after overshoot", () => {
+      expect(
+        getCursor({ orientation: "horizontal", dragOvershoot: new Big(10) })
+      ).toBe("w-resize");
+    });
+  });
+
+  describe("vertical", () => {
+    test("works before overshoot", () => {
+      expect(
+        getCursor({ orientation: "vertical", dragOvershoot: new Big(-10) })
+      ).toBe("s-resize");
+    });
+
+    test("works at overshoot", () => {
+      expect(
+        getCursor({ orientation: "vertical", dragOvershoot: new Big(0) })
+      ).toBe("ns-resize");
+    });
+
+    test("works after overshoot", () => {
+      expect(
+        getCursor({ orientation: "vertical", dragOvershoot: new Big(10) })
+      ).toBe("n-resize");
+    });
+  });
+});
+
+describe("initializePanelHandleData", () => {
+  test("works with pixel size", () => {
+    const data = initializePanelHandleData({
+      id: "resizer-1",
+      size: "10px",
+    });
+
+    expect(data).toMatchInlineSnapshot(`
+      {
+        "id": "resizer-1",
+        "size": {
+          "type": "pixel",
+          "value": "10",
+        },
+        "type": "handle",
+      }
+    `);
+  });
+
+  test("works with pixel size", () => {
+    const data = initializePanelHandleData({
+      id: "resizer-1",
+      // @ts-expect-error The types were hard and i wanted to keep the public API simple
+      size: {
+        type: "pixel",
+        value: new Big(10),
+      },
+    });
+
+    expect(data).toMatchInlineSnapshot(`
+      {
+        "id": "resizer-1",
+        "size": {
+          "type": "pixel",
+          "value": "10",
+        },
+        "type": "handle",
+      }
+    `);
+  });
+});

package/vitest.config.ts

@@ -4,6 +4,8 @@ export default defineConfig({
   test: {
     coverage: {
       provider: "istanbul",
+      reporter: ["text", "html", "json-summary", "json"],
+      reportOnFailure: true,
     },
     browser: {
       enabled: true,