@window-splitter/state 0.4.2 → 0.5.0

package/src/index.ts

@@ -182,6 +182,17 @@ interface RebindPanelCallbacksEvent {
   data: Pick<PanelData, "id" | "onCollapseChange" | "onResize">;
 }
 
+interface UpdateConstraintsEvent {
+  /** Update the constraints of a panel */
+  type: "updateConstraints";
+  data:
+    | Pick<
+        PanelData,
+        "id" | "min" | "max" | "default" | "collapsedSize" | "isStaticAtRest"
+      >
+    | Pick<PanelHandleData, "id" | "size">;
+}
+
 interface RegisterDynamicPanelEvent extends Omit<RegisterPanelEvent, "type"> {
   /** Register a new panel with the state machine */
   type: "registerDynamicPanel";
@@ -308,6 +319,8 @@ export interface GroupMachineContextValue {
   orientation: Orientation;
   /** How much the drag has overshot the handle */
   dragOvershoot: Big.Big;
+  /** The id of the handle that is currently being dragged */
+  activeDragHandleId?: string;
   groupId: string;
   /**
    * How to save the persisted state
@@ -336,7 +349,9 @@ export type GroupMachineEvent =
   | SetPanelPixelSizeEvent
   | ApplyDeltaEvent
   | SetActualItemsSizeEvent
-  | RebindPanelCallbacksEvent;
+  | RebindPanelCallbacksEvent
+  | UpdateConstraintsEvent;
+
 type EventForType<T extends GroupMachineEvent["type"]> = Extract<
   GroupMachineEvent,
   { type: T }
@@ -500,6 +515,64 @@ export function initializePanel(
   >;
 }
 
+function eq(a: ParsedUnit, b: ParsedUnit) {
+  return a.type === b.type && a.value.eq(b.value);
+}
+
+export function haveConstraintsChangedForPanel(
+  a: Omit<PanelData, "id" | "currentValue">,
+  b: Omit<PanelData, "id" | "currentValue">
+) {
+  if (!eq(a.min, b.min)) {
+    return true;
+  }
+
+  if (
+    (a.max === "1fr" && b.max !== "1fr") ||
+    (a.max !== "1fr" && b.max === "1fr") ||
+    (a.max !== "1fr" && b.max !== "1fr" && !eq(a.max, b.max))
+  ) {
+    return true;
+  }
+
+  if (
+    (a.default && !b.default) ||
+    (!a.default && b.default) ||
+    (a.default && b.default && !eq(a.default, b.default))
+  ) {
+    return true;
+  }
+
+  if (!eq(a.collapsedSize, b.collapsedSize)) {
+    return true;
+  }
+
+  if (a.isStaticAtRest !== b.isStaticAtRest) {
+    return true;
+  }
+
+  if (a.collapseAnimation !== b.collapseAnimation) {
+    return true;
+  }
+
+  if (a.collapsible !== b.collapsible) {
+    return true;
+  }
+
+  return false;
+}
+
+export function haveConstraintsChangedForPanelHandle(
+  a: Omit<PanelHandleData, "id">,
+  b: Omit<PanelHandleData, "id">
+) {
+  if (!eq(a.size, b.size)) {
+    return true;
+  }
+
+  return false;
+}
+
 export function initializePanelHandleData(item: InitializePanelHandleData) {
   return {
     type: "handle" as const,
@@ -1587,7 +1660,10 @@ export const groupMachine = createMachine(
       idle: {
         entry: ["onAutosave"],
         on: {
-          dragHandleStart: { target: "dragging" },
+          dragHandleStart: {
+            target: "dragging",
+            actions: ["onDragHandleStart"],
+          },
           setPanelPixelSize: {
             actions: [
               "prepare",
@@ -1632,7 +1708,7 @@ export const groupMachine = createMachine(
             actions: "runCollapseToggle",
           },
         },
-        exit: ["commit"],
+        exit: ["commit", "clearDragHandle"],
       },
       togglingCollapse: {
         entry: ["prepare", "onClearLastKnownSize"],
@@ -1652,7 +1728,19 @@ export const groupMachine = createMachine(
     on: {
       setActualItemsSize: { actions: ["recordActualItemSize", "onResize"] },
       registerPanel: { actions: ["assignPanelData"] },
-      rebindPanelCallbacks: { actions: ["rebindPanelCallbacks"] },
+      rebindPanelCallbacks: {
+        actions: ["rebindPanelCallbacks"],
+      },
+      updateConstraints: {
+        actions: [
+          "prepare",
+          "updateConstraints",
+          "onClearLastKnownSize",
+          "commit",
+          "onResize",
+          "onAutosave",
+        ],
+      },
       registerDynamicPanel: {
         actions: [
           "prepare",
@@ -1739,6 +1827,15 @@ export const groupMachine = createMachine(
       animation: animationActor,
     },
     actions: {
+      onDragHandleStart: assign({
+        activeDragHandleId: ({ event }) => {
+          isEvent(event, ["dragHandleStart"]);
+          return event.handleId;
+        },
+      }),
+      clearDragHandle: assign({
+        activeDragHandleId: undefined,
+      }),
       onAutosave: ({ context, self }) => {
         if (!context.autosaveStrategy || typeof window === "undefined") {
           return;
@@ -1746,6 +1843,7 @@ export const groupMachine = createMachine(
 
         const snapshot = self.getPersistedSnapshot() as GroupMachineSnapshot;
         snapshot.context.items = clearLastKnownSize(context.items);
+        snapshot.context.activeDragHandleId = context.activeDragHandleId;
         snapshot.value = "idle";
         const data = JSON.stringify(snapshot);
 
@@ -1878,6 +1976,29 @@ export const groupMachine = createMachine(
           return context.items;
         },
       }),
+      updateConstraints: assign({
+        items: ({ context, event }) => {
+          isEvent(event, ["updateConstraints"]);
+
+          for (const item of context.items) {
+            if (isPanelData(item) && item.id === event.data.id) {
+              const panel = event.data as PanelData;
+              item.min = panel.min;
+              item.max = panel.max;
+              item.default = panel.default;
+              item.collapsedSize = panel.collapsedSize;
+              item.isStaticAtRest = panel.isStaticAtRest;
+              item.collapseAnimation = panel.collapseAnimation;
+              item.collapsible = panel.collapsible;
+            } else if (isPanelHandle(item) && item.id === event.data.id) {
+              const handle = event.data as PanelHandleData;
+              item.size = handle.size;
+            }
+          }
+
+          return context.items;
+        },
+      }),
       onRegisterDynamicPanel: assign({
         items: ({ context, event }) => {
           isEvent(event, ["registerDynamicPanel"]);