@window-splitter/state 0.3.2 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +1 -1
- package/.turbo/turbo-lint.log +4 -5
- package/.turbo/turbo-test.log +1192 -4322
- package/CHANGELOG.md +49 -0
- package/coverage/coverage-final.json +1 -1
- package/coverage/coverage-summary.json +2 -2
- package/coverage/index.html +17 -17
- package/coverage/index.ts.html +1161 -399
- package/dist/commonjs/index.d.ts +21 -14
- package/dist/commonjs/index.d.ts.map +1 -1
- package/dist/commonjs/index.js +219 -45
- package/dist/commonjs/index.js.map +1 -1
- package/dist/esm/index.d.ts +21 -14
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +219 -45
- package/dist/esm/index.js.map +1 -1
- package/package.json +4 -3
- package/src/__snapshots__/machine.test.ts.snap +82 -2
- package/src/index.ts +319 -71
- package/src/machine.test.ts +329 -24
package/dist/commonjs/index.d.ts
CHANGED
|
@@ -36,6 +36,13 @@ export interface Constraints<T extends ParsedUnit | Unit = ParsedUnit> {
|
|
|
36
36
|
defaultCollapsed?: boolean;
|
|
37
37
|
/** The size of the panel once collapsed */
|
|
38
38
|
collapsedSize?: T;
|
|
39
|
+
/**
|
|
40
|
+
* By default the layout will be stored in percentage values while at rest.
|
|
41
|
+
* This makes scaling the layout easier when the container is resized.
|
|
42
|
+
* However you might have a panel you want to stay at a static size when
|
|
43
|
+
* the container is resized.
|
|
44
|
+
*/
|
|
45
|
+
isStaticAtRest?: boolean;
|
|
39
46
|
}
|
|
40
47
|
interface Order {
|
|
41
48
|
/**
|
|
@@ -75,6 +82,7 @@ export interface PanelData extends Omit<Constraints, "min" | "max" | "collapsedS
|
|
|
75
82
|
duration: number;
|
|
76
83
|
easing: CollapseAnimation | ((t: number) => number);
|
|
77
84
|
};
|
|
85
|
+
lastKnownSize?: Rect;
|
|
78
86
|
}
|
|
79
87
|
/** Copied from https://github.com/d3/d3-ease */
|
|
80
88
|
declare const collapseAnimations: {
|
|
@@ -205,10 +213,18 @@ export interface GroupMachineContextValue {
|
|
|
205
213
|
/** How much the drag has overshot the handle */
|
|
206
214
|
dragOvershoot: Big.Big;
|
|
207
215
|
groupId: string;
|
|
216
|
+
/**
|
|
217
|
+
* How to save the persisted state
|
|
218
|
+
*/
|
|
219
|
+
autosaveStrategy?: "localStorage" | "cookie";
|
|
208
220
|
}
|
|
221
|
+
export type GroupMachineSnapshot = Snapshot<unknown> & {
|
|
222
|
+
context: GroupMachineContextValue;
|
|
223
|
+
value: string;
|
|
224
|
+
};
|
|
209
225
|
export type GroupMachineEvent = RegisterPanelEvent | RegisterDynamicPanelEvent | UnregisterPanelEvent | RegisterPanelHandleEvent | UnregisterPanelHandleEvent | DragHandleEvent | SetSizeEvent | SetOrientationEvent | DragHandleStartEvent | DragHandleEndEvent | CollapsePanelEvent | ExpandPanelEvent | SetPanelPixelSizeEvent | ApplyDeltaEvent | SetActualItemsSizeEvent;
|
|
210
226
|
export declare function getCursor(context: Pick<GroupMachineContextValue, "dragOvershoot" | "orientation">): "w-resize" | "e-resize" | "ew-resize" | "n-resize" | "s-resize" | "ns-resize";
|
|
211
|
-
export declare function prepareSnapshot(snapshot:
|
|
227
|
+
export declare function prepareSnapshot(snapshot: GroupMachineSnapshot): GroupMachineSnapshot;
|
|
212
228
|
/** Determine if an item is a panel */
|
|
213
229
|
export declare function isPanelData(value: unknown): value is PanelData;
|
|
214
230
|
/** Determine if an item is a panel handle */
|
|
@@ -218,23 +234,13 @@ type OnResizeSize = {
|
|
|
218
234
|
percentage: number;
|
|
219
235
|
};
|
|
220
236
|
export type OnResizeCallback = (size: OnResizeSize) => void;
|
|
221
|
-
|
|
237
|
+
type InitializePanelOptions = {
|
|
222
238
|
min?: Unit;
|
|
223
239
|
max?: Unit;
|
|
224
240
|
default?: Unit;
|
|
225
|
-
collapsible?: boolean;
|
|
226
|
-
collapsed?: boolean;
|
|
227
241
|
collapsedSize?: Unit;
|
|
228
|
-
onCollapseChange?: {
|
|
229
|
-
current: ((isCollapsed: boolean) => void) | null | undefined;
|
|
230
|
-
};
|
|
231
|
-
onResize?: {
|
|
232
|
-
current: OnResizeCallback | null | undefined;
|
|
233
|
-
};
|
|
234
|
-
collapseAnimation?: PanelData["collapseAnimation"];
|
|
235
|
-
defaultCollapsed?: boolean;
|
|
236
242
|
id?: string;
|
|
237
|
-
}
|
|
243
|
+
} & Partial<Pick<PanelData, "isStaticAtRest" | "collapseAnimation" | "defaultCollapsed" | "onResize" | "collapsible" | "collapsed" | "onCollapseChange">>;
|
|
238
244
|
type InitializePanelOptionsWithId = InitializePanelOptions & {
|
|
239
245
|
id: string;
|
|
240
246
|
};
|
|
@@ -313,7 +319,7 @@ export declare function buildTemplate(context: GroupMachineContextValue): string
|
|
|
313
319
|
* When another update loop is triggered the above template will be converted back to pixels.
|
|
314
320
|
*/
|
|
315
321
|
/** Converts the items to pixels */
|
|
316
|
-
export declare function prepareItems(context: GroupMachineContextValue):
|
|
322
|
+
export declare function prepareItems(context: GroupMachineContextValue): Item[];
|
|
317
323
|
export declare function dragHandlePayload({ delta, orientation, shiftKey, }: {
|
|
318
324
|
delta: number;
|
|
319
325
|
orientation?: Orientation;
|
|
@@ -332,6 +338,7 @@ export declare const groupMachine: import("xstate").StateMachine<GroupMachineCon
|
|
|
332
338
|
orientation?: Orientation;
|
|
333
339
|
groupId: string;
|
|
334
340
|
initialItems?: Item[];
|
|
341
|
+
autosaveStrategy?: "localStorage" | "cookie";
|
|
335
342
|
}, import("xstate").NonReducibleUnknown, import("xstate").EventObject, import("xstate").MetaObject, any>;
|
|
336
343
|
export {};
|
|
337
344
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/commonjs/index.js
CHANGED
|
@@ -24,6 +24,7 @@ exports.getPanelPercentageSize = getPanelPercentageSize;
|
|
|
24
24
|
exports.buildTemplate = buildTemplate;
|
|
25
25
|
exports.prepareItems = prepareItems;
|
|
26
26
|
exports.dragHandlePayload = dragHandlePayload;
|
|
27
|
+
const universal_cookie_1 = __importDefault(require("universal-cookie"));
|
|
27
28
|
const rafz_1 = require("@react-spring/rafz");
|
|
28
29
|
const xstate_1 = require("xstate");
|
|
29
30
|
const invariant_1 = __importDefault(require("invariant"));
|
|
@@ -96,9 +97,7 @@ function getCursor(context) {
|
|
|
96
97
|
}
|
|
97
98
|
}
|
|
98
99
|
function prepareSnapshot(snapshot) {
|
|
99
|
-
|
|
100
|
-
const snapshotContext = snapshot
|
|
101
|
-
.context;
|
|
100
|
+
const snapshotContext = snapshot.context;
|
|
102
101
|
snapshotContext.dragOvershoot = new big_js_1.default(snapshotContext.dragOvershoot);
|
|
103
102
|
for (const item of snapshotContext.items) {
|
|
104
103
|
if (isPanelData(item)) {
|
|
@@ -164,6 +163,7 @@ function initializePanel(item) {
|
|
|
164
163
|
id: item.id,
|
|
165
164
|
collapseAnimation: item.collapseAnimation,
|
|
166
165
|
default: item.default ? parseUnit(item.default) : undefined,
|
|
166
|
+
isStaticAtRest: item.isStaticAtRest,
|
|
167
167
|
};
|
|
168
168
|
return { ...data, currentValue: makePixelUnit(-1) };
|
|
169
169
|
}
|
|
@@ -306,8 +306,7 @@ function panelHasSpace(context, item, adjustment) {
|
|
|
306
306
|
return (item.currentValue.value.gte(getUnitPixelValue(context, item.min)) &&
|
|
307
307
|
item.currentValue.value.lt(getUnitPixelValue(context, item.max)));
|
|
308
308
|
}
|
|
309
|
-
return
|
|
310
|
-
item.currentValue.value.lte(getUnitPixelValue(context, item.max)));
|
|
309
|
+
return item.currentValue.value.gt(getUnitPixelValue(context, item.min));
|
|
311
310
|
}
|
|
312
311
|
/** Search in a `direction` for a panel that still has space to expand. */
|
|
313
312
|
function findPanelWithSpace(context, items, start, direction, adjustment, disregardCollapseBuffer) {
|
|
@@ -331,9 +330,10 @@ function getStaticWidth(context) {
|
|
|
331
330
|
if (isPanelHandle(item)) {
|
|
332
331
|
width = width.add(item.size.value);
|
|
333
332
|
}
|
|
334
|
-
else if (
|
|
335
|
-
item.
|
|
336
|
-
|
|
333
|
+
else if (item.collapsed && item.currentValue.type === "pixel") {
|
|
334
|
+
width = width.add(item.currentValue.value);
|
|
335
|
+
}
|
|
336
|
+
else if (item.isStaticAtRest) {
|
|
337
337
|
width = width.add(item.currentValue.value);
|
|
338
338
|
}
|
|
339
339
|
}
|
|
@@ -374,15 +374,26 @@ function getPanelPercentageSize(context, panelId) {
|
|
|
374
374
|
/** Build the grid template from the item values. */
|
|
375
375
|
function buildTemplate(context) {
|
|
376
376
|
const staticWidth = getStaticWidth(context);
|
|
377
|
+
let hasSeenFillPanel = false;
|
|
377
378
|
return context.items
|
|
378
379
|
.map((item) => {
|
|
379
380
|
if (item.type === "panel") {
|
|
380
381
|
const min = formatUnit(item.min);
|
|
381
382
|
if (item.currentValue.type === "pixel" &&
|
|
382
383
|
item.currentValue.value.toNumber() !== -1) {
|
|
384
|
+
if (item.isStaticAtRest) {
|
|
385
|
+
const max = item.max === "1fr" ? "100%" : formatUnit(item.max);
|
|
386
|
+
return `clamp(${min}, ${formatUnit(item.currentValue)}, ${max})`;
|
|
387
|
+
}
|
|
383
388
|
return formatUnit(item.currentValue);
|
|
384
389
|
}
|
|
385
390
|
else if (item.currentValue.type === "percent") {
|
|
391
|
+
if (!hasSeenFillPanel &&
|
|
392
|
+
(item.max === "1fr" ||
|
|
393
|
+
(item.max.type === "percent" && item.max.value.eq(100)))) {
|
|
394
|
+
hasSeenFillPanel = true;
|
|
395
|
+
return `minmax(${min}, 1fr)`;
|
|
396
|
+
}
|
|
386
397
|
const max = item.max === "1fr" ? "100%" : formatUnit(item.max);
|
|
387
398
|
return `minmax(${min}, min(calc(${item.currentValue.value} * (100% - ${staticWidth}px)), ${max}))`;
|
|
388
399
|
}
|
|
@@ -485,11 +496,18 @@ function prepareItems(context) {
|
|
|
485
496
|
const newItems = [];
|
|
486
497
|
for (const item of context.items) {
|
|
487
498
|
if (!item || !isPanelData(item)) {
|
|
488
|
-
newItems.push(item);
|
|
499
|
+
newItems.push({ ...item });
|
|
500
|
+
continue;
|
|
501
|
+
}
|
|
502
|
+
if (item.lastKnownSize) {
|
|
503
|
+
const lastSize = makePixelUnit(context.orientation === "horizontal"
|
|
504
|
+
? item.lastKnownSize.width
|
|
505
|
+
: item.lastKnownSize.height);
|
|
506
|
+
newItems.push({ ...item, currentValue: lastSize });
|
|
489
507
|
continue;
|
|
490
508
|
}
|
|
491
509
|
if (item.currentValue.type === "pixel") {
|
|
492
|
-
newItems.push(item);
|
|
510
|
+
newItems.push({ ...item });
|
|
493
511
|
continue;
|
|
494
512
|
}
|
|
495
513
|
const pixel = new big_js_1.default(getGroupSize(context))
|
|
@@ -543,6 +561,10 @@ function updateLayout(context, dragEvent) {
|
|
|
543
561
|
const potentialNewValue = panelAfter.currentValue.value.add(new big_js_1.default(newDragOvershoot).mul(isInRightBuffer ? moveDirection : 1));
|
|
544
562
|
const min = getUnitPixelValue(context, panelAfter.min);
|
|
545
563
|
const isInDragBugger = newDragOvershoot.abs().lt(COLLAPSE_THRESHOLD) &&
|
|
564
|
+
// Let the panel expand at it's min size
|
|
565
|
+
!panelAfter.currentValue.value
|
|
566
|
+
.add(newDragOvershoot.abs())
|
|
567
|
+
.gte(panelAfter.min.value) &&
|
|
546
568
|
panelAfter.collapsible &&
|
|
547
569
|
panelAfter.collapsed &&
|
|
548
570
|
(isInLeftOvershoot || isInRightOvershoot);
|
|
@@ -555,9 +577,9 @@ function updateLayout(context, dragEvent) {
|
|
|
555
577
|
}
|
|
556
578
|
}
|
|
557
579
|
// Don't let the panel collapse until the threshold is reached
|
|
558
|
-
if (
|
|
559
|
-
panelBefore.
|
|
560
|
-
|
|
580
|
+
if (!dragEvent.disregardCollapseBuffer &&
|
|
581
|
+
panelBefore.collapsible &&
|
|
582
|
+
panelBefore.currentValue.value.eq(getUnitPixelValue(context, panelBefore.min))) {
|
|
561
583
|
const potentialNewValue = panelBefore.currentValue.value.sub(newDragOvershoot.abs());
|
|
562
584
|
if (newDragOvershoot.abs().lt(COLLAPSE_THRESHOLD) &&
|
|
563
585
|
potentialNewValue.gt(getUnitPixelValue(context, panelBefore.collapsedSize))) {
|
|
@@ -604,7 +626,6 @@ function updateLayout(context, dragEvent) {
|
|
|
604
626
|
.sub(panelAfterNewValue
|
|
605
627
|
// Then re-add the move amount
|
|
606
628
|
.add(Math.abs(moveAmount)));
|
|
607
|
-
panelAfter.collapsed = false;
|
|
608
629
|
if (extra.gt(0)) {
|
|
609
630
|
panelAfterNewValue = panelAfterNewValue.add(extra);
|
|
610
631
|
}
|
|
@@ -614,14 +635,18 @@ function updateLayout(context, dragEvent) {
|
|
|
614
635
|
.minus(panelAfterPreviousValue)
|
|
615
636
|
// And then re-apply the movement value
|
|
616
637
|
.minus(Math.abs(moveAmount)));
|
|
638
|
+
if (panelBeforeNewValue.lt(panelBefore.min.value)) {
|
|
639
|
+
// TODO this should probably distribute the space between the panels?
|
|
640
|
+
return { dragOvershoot: newDragOvershoot };
|
|
641
|
+
}
|
|
642
|
+
panelAfter.collapsed = false;
|
|
617
643
|
if (panelAfter.onCollapseChange?.current &&
|
|
618
644
|
!panelAfter.collapseIsControlled &&
|
|
619
645
|
!dragEvent.controlled) {
|
|
620
646
|
panelAfter.onCollapseChange.current(false);
|
|
621
647
|
}
|
|
622
648
|
}
|
|
623
|
-
const panelBeforeIsAboutToCollapse = panelBefore.currentValue.value
|
|
624
|
-
getUnitPixelValue(context, panelBefore.min);
|
|
649
|
+
const panelBeforeIsAboutToCollapse = panelBefore.currentValue.value.eq(getUnitPixelValue(context, panelBefore.min));
|
|
625
650
|
// If the panel was expanded and now is at it's min size, collapse it
|
|
626
651
|
if (!dragEvent.disregardCollapseBuffer &&
|
|
627
652
|
panelBefore.collapsible &&
|
|
@@ -647,8 +672,7 @@ function updateLayout(context, dragEvent) {
|
|
|
647
672
|
panelAfter.currentValue = { type: "pixel", value: panelAfterNewValue };
|
|
648
673
|
const leftoverSpace = new big_js_1.default(getGroupSize(context)).minus(newItems.reduce((acc, b) => acc.add(isPanelData(b) ? b.currentValue.value : b.size.value), new big_js_1.default(0)));
|
|
649
674
|
if (!leftoverSpace.eq(0)) {
|
|
650
|
-
panelBefore.currentValue.value =
|
|
651
|
-
panelBefore.currentValue.value.add(leftoverSpace);
|
|
675
|
+
panelBefore.currentValue.value = clampUnit(context, panelBefore, panelBefore.currentValue.value.add(leftoverSpace));
|
|
652
676
|
}
|
|
653
677
|
return { items: newItems };
|
|
654
678
|
}
|
|
@@ -669,7 +693,7 @@ function commitLayout(context) {
|
|
|
669
693
|
});
|
|
670
694
|
const staticWidth = getStaticWidth({ ...context, items: newItems });
|
|
671
695
|
newItems.forEach((item, index) => {
|
|
672
|
-
if (item.type !== "panel" || item.collapsed) {
|
|
696
|
+
if (item.type !== "panel" || item.collapsed || item.isStaticAtRest) {
|
|
673
697
|
return;
|
|
674
698
|
}
|
|
675
699
|
newItems[index] = {
|
|
@@ -739,19 +763,77 @@ function applyDeltaInBothDirections(context, newItems, itemIndex, delta) {
|
|
|
739
763
|
direction = direction === 1 ? -1 : 1;
|
|
740
764
|
}
|
|
741
765
|
}
|
|
766
|
+
/**
|
|
767
|
+
* A layout might overflow at small screen sizes.
|
|
768
|
+
* This function tries to fix that by:
|
|
769
|
+
*
|
|
770
|
+
* 1. It will try to collapse a panel if it can.
|
|
771
|
+
*/
|
|
772
|
+
function handleOverflow(context) {
|
|
773
|
+
// If we haven't measured yet we can't do anything
|
|
774
|
+
if (context.items.some((i) => isPanelData(i) && i.currentValue.value.eq(-1))) {
|
|
775
|
+
return context;
|
|
776
|
+
}
|
|
777
|
+
const groupSize = new big_js_1.default(getGroupSize(context));
|
|
778
|
+
const nonStaticWidth = groupSize.sub(getStaticWidth(context).toNumber());
|
|
779
|
+
const pixelItems = context.items.map((i) => {
|
|
780
|
+
if (isPanelHandle(i))
|
|
781
|
+
return i.size.value;
|
|
782
|
+
if (i.collapsed)
|
|
783
|
+
return getUnitPixelValue(context, i.currentValue);
|
|
784
|
+
const pixel = (i.currentValue.type === "pixel" && i.currentValue.value) ||
|
|
785
|
+
i.currentValue.value.mul(nonStaticWidth);
|
|
786
|
+
return clampUnit(context, i, pixel);
|
|
787
|
+
});
|
|
788
|
+
const totalSize = pixelItems.reduce((acc, i) => acc.add(i), new big_js_1.default(0));
|
|
789
|
+
const overflow = totalSize.abs().sub(groupSize);
|
|
790
|
+
if (overflow.eq(0) || groupSize.eq(0)) {
|
|
791
|
+
return context;
|
|
792
|
+
}
|
|
793
|
+
let newContext = { ...context, items: prepareItems(context) };
|
|
794
|
+
const collapsiblePanel = newContext.items.find((i) => Boolean(isPanelData(i) && i.collapsible));
|
|
795
|
+
if (collapsiblePanel) {
|
|
796
|
+
const collapsiblePanelIndex = newContext.items.findIndex((i) => i.id === collapsiblePanel.id);
|
|
797
|
+
const handleId = getHandleForPanelId(newContext, collapsiblePanel.id);
|
|
798
|
+
const sizeChange = collapsiblePanel.currentValue.value.sub(getUnitPixelValue(newContext, collapsiblePanel.collapsedSize));
|
|
799
|
+
// Try to collapse the panel
|
|
800
|
+
newContext = {
|
|
801
|
+
...newContext,
|
|
802
|
+
...iterativelyUpdateLayout({
|
|
803
|
+
handleId: handleId.item.id,
|
|
804
|
+
delta: sizeChange,
|
|
805
|
+
direction: (handleId.direction * -1),
|
|
806
|
+
context: {
|
|
807
|
+
...newContext,
|
|
808
|
+
// act like its the old size so the space is distributed correctly
|
|
809
|
+
size: { width: totalSize.toNumber(), height: totalSize.toNumber() },
|
|
810
|
+
},
|
|
811
|
+
}),
|
|
812
|
+
};
|
|
813
|
+
// Then remove all the overflow
|
|
814
|
+
applyDeltaInBothDirections(newContext, newContext.items, collapsiblePanelIndex, overflow.neg());
|
|
815
|
+
}
|
|
816
|
+
return { ...newContext, items: commitLayout(newContext) };
|
|
817
|
+
}
|
|
818
|
+
function clearLastKnownSize(items) {
|
|
819
|
+
return items.map((i) => ({ ...i, lastKnownSize: undefined }));
|
|
820
|
+
}
|
|
821
|
+
function getDeltaForEvent(context, event) {
|
|
822
|
+
const panel = getPanelWithId(context, event.panelId);
|
|
823
|
+
if (event.type === "expandPanel") {
|
|
824
|
+
return new big_js_1.default(panel.sizeBeforeCollapse ?? getUnitPixelValue(context, panel.min)).minus(panel.currentValue.value);
|
|
825
|
+
}
|
|
826
|
+
const collapsedSize = getUnitPixelValue(context, panel.collapsedSize);
|
|
827
|
+
return panel.currentValue.value.minus(collapsedSize);
|
|
828
|
+
}
|
|
742
829
|
const animationActor = (0, xstate_1.fromPromise)(({ input: { send, context, event } }) => new Promise((resolve) => {
|
|
743
830
|
const panel = getPanelWithId(context, event.panelId);
|
|
744
831
|
const handle = getHandleForPanelId(context, event.panelId);
|
|
745
832
|
let direction = new big_js_1.default(handle.direction);
|
|
746
|
-
|
|
747
|
-
if (event.type === "
|
|
748
|
-
fullDelta = new big_js_1.default(panel.sizeBeforeCollapse ?? getUnitPixelValue(context, panel.min)).minus(panel.currentValue.value);
|
|
749
|
-
}
|
|
750
|
-
else {
|
|
751
|
-
const collapsedSize = getUnitPixelValue(context, panel.collapsedSize);
|
|
833
|
+
const fullDelta = getDeltaForEvent(context, event);
|
|
834
|
+
if (event.type === "collapsePanel") {
|
|
752
835
|
panel.sizeBeforeCollapse = panel.currentValue.value.toNumber();
|
|
753
836
|
direction = direction.mul(new big_js_1.default(-1));
|
|
754
|
-
fullDelta = panel.currentValue.value.minus(collapsedSize);
|
|
755
837
|
}
|
|
756
838
|
const fps = 60;
|
|
757
839
|
const { duration, ease } = getCollapseAnimation(panel);
|
|
@@ -795,15 +877,17 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
795
877
|
orientation: input.orientation || "horizontal",
|
|
796
878
|
dragOvershoot: new big_js_1.default(0),
|
|
797
879
|
groupId: input.groupId,
|
|
880
|
+
autosaveStrategy: input.autosaveStrategy,
|
|
798
881
|
}),
|
|
799
882
|
states: {
|
|
800
883
|
idle: {
|
|
884
|
+
entry: ["onAutosave"],
|
|
801
885
|
on: {
|
|
802
|
-
setActualItemsSize: { actions: ["recordActualItemSize", "onResize"] },
|
|
803
886
|
dragHandleStart: { target: "dragging" },
|
|
804
887
|
setPanelPixelSize: {
|
|
805
888
|
actions: [
|
|
806
889
|
"prepare",
|
|
890
|
+
"onClearLastKnownSize",
|
|
807
891
|
"onSetPanelSize",
|
|
808
892
|
"commit",
|
|
809
893
|
"onResize",
|
|
@@ -818,6 +902,8 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
818
902
|
{ target: "togglingCollapse" },
|
|
819
903
|
],
|
|
820
904
|
expandPanel: [
|
|
905
|
+
// This will match if we can't expand and the expansion won't happen
|
|
906
|
+
{ guard: "cannotExpandPanel" },
|
|
821
907
|
{
|
|
822
908
|
actions: "notifyCollapseToggle",
|
|
823
909
|
guard: "shouldNotifyCollapseToggle",
|
|
@@ -829,7 +915,9 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
829
915
|
dragging: {
|
|
830
916
|
entry: ["prepare"],
|
|
831
917
|
on: {
|
|
832
|
-
dragHandle: {
|
|
918
|
+
dragHandle: {
|
|
919
|
+
actions: ["onClearLastKnownSize", "onDragHandle", "onResize"],
|
|
920
|
+
},
|
|
833
921
|
dragHandleEnd: { target: "idle" },
|
|
834
922
|
collapsePanel: {
|
|
835
923
|
guard: "shouldCollapseToggle",
|
|
@@ -840,16 +928,16 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
840
928
|
actions: "runCollapseToggle",
|
|
841
929
|
},
|
|
842
930
|
},
|
|
843
|
-
exit: ["commit"
|
|
931
|
+
exit: ["commit"],
|
|
844
932
|
},
|
|
845
933
|
togglingCollapse: {
|
|
846
|
-
entry: ["prepare"],
|
|
934
|
+
entry: ["prepare", "onClearLastKnownSize"],
|
|
847
935
|
invoke: {
|
|
848
936
|
src: "animation",
|
|
849
937
|
input: (i) => ({ ...i, send: i.self.send }),
|
|
850
938
|
onDone: {
|
|
851
939
|
target: "idle",
|
|
852
|
-
actions: ["onToggleCollapseComplete", "commit"
|
|
940
|
+
actions: ["onToggleCollapseComplete", "commit"],
|
|
853
941
|
},
|
|
854
942
|
},
|
|
855
943
|
on: {
|
|
@@ -858,25 +946,43 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
858
946
|
},
|
|
859
947
|
},
|
|
860
948
|
on: {
|
|
949
|
+
setActualItemsSize: { actions: ["recordActualItemSize", "onResize"] },
|
|
861
950
|
registerPanel: { actions: ["assignPanelData"] },
|
|
862
951
|
registerDynamicPanel: {
|
|
863
952
|
actions: [
|
|
864
953
|
"prepare",
|
|
865
954
|
"onRegisterDynamicPanel",
|
|
955
|
+
"onClearLastKnownSize",
|
|
866
956
|
"commit",
|
|
867
957
|
"onResize",
|
|
868
958
|
"onAutosave",
|
|
869
959
|
],
|
|
870
960
|
},
|
|
871
961
|
unregisterPanel: {
|
|
872
|
-
actions: [
|
|
962
|
+
actions: [
|
|
963
|
+
"prepare",
|
|
964
|
+
"removeItem",
|
|
965
|
+
"onClearLastKnownSize",
|
|
966
|
+
"commit",
|
|
967
|
+
"onResize",
|
|
968
|
+
"onAutosave",
|
|
969
|
+
],
|
|
873
970
|
},
|
|
874
971
|
registerPanelHandle: { actions: ["assignPanelHandleData"] },
|
|
875
972
|
unregisterPanelHandle: {
|
|
876
|
-
actions: [
|
|
973
|
+
actions: [
|
|
974
|
+
"prepare",
|
|
975
|
+
"removeItem",
|
|
976
|
+
"onClearLastKnownSize",
|
|
977
|
+
"commit",
|
|
978
|
+
"onResize",
|
|
979
|
+
"onAutosave",
|
|
980
|
+
],
|
|
877
981
|
},
|
|
878
982
|
setSize: { actions: ["updateSize", "onResize"] },
|
|
879
|
-
setOrientation: {
|
|
983
|
+
setOrientation: {
|
|
984
|
+
actions: ["updateOrientation", "onClearLastKnownSize", "onResize"],
|
|
985
|
+
},
|
|
880
986
|
},
|
|
881
987
|
}, {
|
|
882
988
|
guards: {
|
|
@@ -890,11 +996,52 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
890
996
|
const panel = getPanelWithId(context, event.panelId);
|
|
891
997
|
return panel.collapseIsControlled === true;
|
|
892
998
|
},
|
|
999
|
+
cannotExpandPanel: ({ context, event }) => {
|
|
1000
|
+
isEvent(event, ["expandPanel"]);
|
|
1001
|
+
const delta = getDeltaForEvent(context, event);
|
|
1002
|
+
const handle = getHandleForPanelId(context, event.panelId);
|
|
1003
|
+
const pixelItems = prepareItems(context);
|
|
1004
|
+
let interimContext = { ...context, items: pixelItems };
|
|
1005
|
+
interimContext = {
|
|
1006
|
+
...interimContext,
|
|
1007
|
+
...iterativelyUpdateLayout({
|
|
1008
|
+
context: interimContext,
|
|
1009
|
+
handleId: handle.item.id,
|
|
1010
|
+
controlled: event.controlled,
|
|
1011
|
+
delta: delta,
|
|
1012
|
+
direction: handle.direction,
|
|
1013
|
+
}),
|
|
1014
|
+
};
|
|
1015
|
+
const updatedPanel = interimContext.items.find((i) => i.id === event.panelId);
|
|
1016
|
+
const totalSize = interimContext.items.reduce((acc, i) => acc.add(isPanelData(i) ? i.currentValue.value : i.size.value), new big_js_1.default(0));
|
|
1017
|
+
const didExpand = updatedPanel &&
|
|
1018
|
+
isPanelData(updatedPanel) &&
|
|
1019
|
+
!updatedPanel.currentValue.value.eq(updatedPanel.collapsedSize.value);
|
|
1020
|
+
return totalSize.gt(getGroupSize(context)) || !didExpand;
|
|
1021
|
+
},
|
|
893
1022
|
},
|
|
894
1023
|
actors: {
|
|
895
1024
|
animation: animationActor,
|
|
896
1025
|
},
|
|
897
1026
|
actions: {
|
|
1027
|
+
onAutosave: ({ context, self }) => {
|
|
1028
|
+
if (!context.autosaveStrategy || typeof window === "undefined") {
|
|
1029
|
+
return;
|
|
1030
|
+
}
|
|
1031
|
+
const snapshot = self.getPersistedSnapshot();
|
|
1032
|
+
snapshot.context.items = clearLastKnownSize(context.items);
|
|
1033
|
+
snapshot.value = "idle";
|
|
1034
|
+
const data = JSON.stringify(snapshot);
|
|
1035
|
+
if (context.autosaveStrategy === "localStorage") {
|
|
1036
|
+
localStorage.setItem(context.groupId, data);
|
|
1037
|
+
}
|
|
1038
|
+
else {
|
|
1039
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
1040
|
+
const ActualClass = universal_cookie_1.default.default || universal_cookie_1.default;
|
|
1041
|
+
const cookies = new ActualClass(null, { path: "/" });
|
|
1042
|
+
cookies.set(context.groupId, data, { path: "/", maxAge: 31536000 });
|
|
1043
|
+
}
|
|
1044
|
+
},
|
|
898
1045
|
notifyCollapseToggle: ({ context, event }) => {
|
|
899
1046
|
isEvent(event, ["collapsePanel", "expandPanel"]);
|
|
900
1047
|
const panel = getPanelWithId(context, event.panelId);
|
|
@@ -918,8 +1065,7 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
918
1065
|
}),
|
|
919
1066
|
onToggleCollapseComplete: (0, xstate_1.assign)({
|
|
920
1067
|
items: ({ context, event: e }) => {
|
|
921
|
-
|
|
922
|
-
const output = e.output;
|
|
1068
|
+
const { output } = e;
|
|
923
1069
|
(0, invariant_1.default)(output, "Expected output from animation actor");
|
|
924
1070
|
const panel = getPanelWithId(context, output.panelId);
|
|
925
1071
|
panel.collapsed = output.action === "collapse";
|
|
@@ -938,15 +1084,33 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
938
1084
|
recordActualItemSize: (0, xstate_1.assign)({
|
|
939
1085
|
items: ({ context, event }) => {
|
|
940
1086
|
isEvent(event, ["setActualItemsSize"]);
|
|
941
|
-
const
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
1087
|
+
const withLastKnownSize = context.items.map((i) => {
|
|
1088
|
+
if (!isPanelData(i))
|
|
1089
|
+
return i;
|
|
1090
|
+
const lastKnownSize = event.childrenSizes[i.id] || i.lastKnownSize;
|
|
1091
|
+
return { ...i, lastKnownSize };
|
|
1092
|
+
});
|
|
1093
|
+
let totalSize = 0;
|
|
1094
|
+
for (const item of withLastKnownSize) {
|
|
1095
|
+
if (isPanelData(item)) {
|
|
1096
|
+
const size = item.lastKnownSize?.[context.orientation === "horizontal" ? "width" : "height"];
|
|
1097
|
+
// If any size is 0 don't handle overflow
|
|
1098
|
+
if (!size) {
|
|
1099
|
+
return withLastKnownSize;
|
|
1100
|
+
}
|
|
1101
|
+
totalSize += size;
|
|
946
1102
|
}
|
|
947
|
-
|
|
1103
|
+
else {
|
|
1104
|
+
totalSize += item.size.value.toNumber();
|
|
1105
|
+
}
|
|
1106
|
+
}
|
|
1107
|
+
if (totalSize > getGroupSize(context)) {
|
|
1108
|
+
return handleOverflow({
|
|
1109
|
+
...context,
|
|
1110
|
+
items: prepareItems({ ...context, items: withLastKnownSize }),
|
|
1111
|
+
}).items;
|
|
948
1112
|
}
|
|
949
|
-
return
|
|
1113
|
+
return withLastKnownSize;
|
|
950
1114
|
},
|
|
951
1115
|
}),
|
|
952
1116
|
updateOrientation: (0, xstate_1.assign)({
|
|
@@ -955,6 +1119,9 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
955
1119
|
return event.orientation;
|
|
956
1120
|
},
|
|
957
1121
|
}),
|
|
1122
|
+
onClearLastKnownSize: (0, xstate_1.assign)({
|
|
1123
|
+
items: ({ context }) => clearLastKnownSize(context.items),
|
|
1124
|
+
}),
|
|
958
1125
|
assignPanelData: (0, xstate_1.assign)({
|
|
959
1126
|
items: ({ context, event }) => {
|
|
960
1127
|
isEvent(event, ["registerPanel"]);
|
|
@@ -1074,10 +1241,17 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
1074
1241
|
onResize: ({ context }) => {
|
|
1075
1242
|
for (const item of context.items) {
|
|
1076
1243
|
if (isPanelData(item)) {
|
|
1077
|
-
const pixel =
|
|
1244
|
+
const pixel = item.lastKnownSize
|
|
1245
|
+
? new big_js_1.default(context.orientation === "horizontal"
|
|
1246
|
+
? item.lastKnownSize.width
|
|
1247
|
+
: item.lastKnownSize.height)
|
|
1248
|
+
: clampUnit(context, item, getUnitPixelValue(context, item.currentValue));
|
|
1249
|
+
const groupSize = getGroupSize(context);
|
|
1078
1250
|
item.onResize?.current?.({
|
|
1079
1251
|
pixel: pixel.toNumber(),
|
|
1080
|
-
percentage:
|
|
1252
|
+
percentage: groupSize > 0
|
|
1253
|
+
? pixel.div(getGroupSize(context)).toNumber()
|
|
1254
|
+
: -1,
|
|
1081
1255
|
});
|
|
1082
1256
|
}
|
|
1083
1257
|
}
|