@window-splitter/state 0.3.1 → 0.4.0
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 +4 -5
- package/.turbo/turbo-lint.log +1 -1
- package/CHANGELOG.md +44 -0
- package/coverage/coverage-final.json +1 -1
- package/coverage/coverage-summary.json +2 -2
- package/coverage/index.html +21 -21
- package/coverage/index.ts.html +1367 -893
- package/dist/commonjs/index.d.ts +11 -13
- package/dist/commonjs/index.d.ts.map +1 -1
- package/dist/commonjs/index.js +149 -37
- package/dist/commonjs/index.js.map +1 -1
- package/dist/esm/index.d.ts +11 -13
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +149 -37
- package/dist/esm/index.js.map +1 -1
- package/package.json +3 -3
- package/src/index.ts +229 -60
- package/src/machine.test.ts +249 -2
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
|
/**
|
|
@@ -147,6 +154,7 @@ interface SetSizeEvent {
|
|
|
147
154
|
/** Set the size of the whole group */
|
|
148
155
|
type: "setSize";
|
|
149
156
|
size: Rect;
|
|
157
|
+
handleOverflow?: boolean;
|
|
150
158
|
}
|
|
151
159
|
interface SetActualItemsSizeEvent {
|
|
152
160
|
/** Set the size of the whole group */
|
|
@@ -218,23 +226,13 @@ type OnResizeSize = {
|
|
|
218
226
|
percentage: number;
|
|
219
227
|
};
|
|
220
228
|
export type OnResizeCallback = (size: OnResizeSize) => void;
|
|
221
|
-
|
|
229
|
+
type InitializePanelOptions = {
|
|
222
230
|
min?: Unit;
|
|
223
231
|
max?: Unit;
|
|
224
232
|
default?: Unit;
|
|
225
|
-
collapsible?: boolean;
|
|
226
|
-
collapsed?: boolean;
|
|
227
233
|
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
234
|
id?: string;
|
|
237
|
-
}
|
|
235
|
+
} & Partial<Pick<PanelData, "isStaticAtRest" | "collapseAnimation" | "defaultCollapsed" | "onResize" | "collapsible" | "collapsed" | "onCollapseChange">>;
|
|
238
236
|
type InitializePanelOptionsWithId = InitializePanelOptions & {
|
|
239
237
|
id: string;
|
|
240
238
|
};
|
|
@@ -313,7 +311,7 @@ export declare function buildTemplate(context: GroupMachineContextValue): string
|
|
|
313
311
|
* When another update loop is triggered the above template will be converted back to pixels.
|
|
314
312
|
*/
|
|
315
313
|
/** Converts the items to pixels */
|
|
316
|
-
export declare function prepareItems(context: GroupMachineContextValue):
|
|
314
|
+
export declare function prepareItems(context: GroupMachineContextValue): Item[];
|
|
317
315
|
export declare function dragHandlePayload({ delta, orientation, shiftKey, }: {
|
|
318
316
|
delta: number;
|
|
319
317
|
orientation?: Orientation;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAKL,QAAQ,EACT,MAAM,QAAQ,CAAC;AAEhB,OAAO,GAAG,MAAM,QAAQ,CAAC;AAWzB,MAAM,MAAM,SAAS,GAAG,GAAG,MAAM,IAAI,CAAC;AACtC,MAAM,MAAM,WAAW,GAAG,GAAG,MAAM,GAAG,CAAC;AACvC,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,WAAW,CAAC;AAC3C,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAE7C,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC;CAChB;AAED,KAAK,UAAU,GAAG,iBAAiB,GAAG,eAAe,CAAC;AAEtD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,iBAAiB,CAEhE;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,eAAe,CAE5D;AAED,UAAU,aAAa;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,UAAU,GAAG,IAAI,GAAG,UAAU;IACnE,oCAAoC;IACpC,GAAG,CAAC,EAAE,CAAC,CAAC;IACR,oCAAoC;IACpC,GAAG,CAAC,EAAE,CAAC,CAAC;IACR,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,CAAC;IACZ,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,2CAA2C;IAC3C,aAAa,CAAC,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/commonjs/index.js
CHANGED
|
@@ -164,6 +164,7 @@ function initializePanel(item) {
|
|
|
164
164
|
id: item.id,
|
|
165
165
|
collapseAnimation: item.collapseAnimation,
|
|
166
166
|
default: item.default ? parseUnit(item.default) : undefined,
|
|
167
|
+
isStaticAtRest: item.isStaticAtRest,
|
|
167
168
|
};
|
|
168
169
|
return { ...data, currentValue: makePixelUnit(-1) };
|
|
169
170
|
}
|
|
@@ -185,7 +186,7 @@ function parseUnit(unit) {
|
|
|
185
186
|
return makePixelUnit(parseFloat(unit));
|
|
186
187
|
}
|
|
187
188
|
if (unit.endsWith("%")) {
|
|
188
|
-
return makePercentUnit(parseFloat(unit));
|
|
189
|
+
return makePercentUnit(parseFloat(unit) / 100);
|
|
189
190
|
}
|
|
190
191
|
throw new Error(`Invalid unit: ${unit}`);
|
|
191
192
|
}
|
|
@@ -206,7 +207,7 @@ function getUnitPixelValue(context, unit) {
|
|
|
206
207
|
const parsed = unit === "1fr" ? parseUnit(unit) : unit;
|
|
207
208
|
return parsed.type === "pixel"
|
|
208
209
|
? parsed.value
|
|
209
|
-
:
|
|
210
|
+
: parsed.value.mul(getGroupSize(context));
|
|
210
211
|
}
|
|
211
212
|
/** Clamp a new `currentValue` given the panel's constraints. */
|
|
212
213
|
function clampUnit(context, item, value) {
|
|
@@ -306,8 +307,7 @@ function panelHasSpace(context, item, adjustment) {
|
|
|
306
307
|
return (item.currentValue.value.gte(getUnitPixelValue(context, item.min)) &&
|
|
307
308
|
item.currentValue.value.lt(getUnitPixelValue(context, item.max)));
|
|
308
309
|
}
|
|
309
|
-
return
|
|
310
|
-
item.currentValue.value.lte(getUnitPixelValue(context, item.max)));
|
|
310
|
+
return item.currentValue.value.gt(getUnitPixelValue(context, item.min));
|
|
311
311
|
}
|
|
312
312
|
/** Search in a `direction` for a panel that still has space to expand. */
|
|
313
313
|
function findPanelWithSpace(context, items, start, direction, adjustment, disregardCollapseBuffer) {
|
|
@@ -331,9 +331,10 @@ function getStaticWidth(context) {
|
|
|
331
331
|
if (isPanelHandle(item)) {
|
|
332
332
|
width = width.add(item.size.value);
|
|
333
333
|
}
|
|
334
|
-
else if (
|
|
335
|
-
item.
|
|
336
|
-
|
|
334
|
+
else if (item.collapsed && item.currentValue.type === "pixel") {
|
|
335
|
+
width = width.add(item.currentValue.value);
|
|
336
|
+
}
|
|
337
|
+
else if (item.isStaticAtRest) {
|
|
337
338
|
width = width.add(item.currentValue.value);
|
|
338
339
|
}
|
|
339
340
|
}
|
|
@@ -343,7 +344,7 @@ function formatUnit(unit) {
|
|
|
343
344
|
if (unit.type === "pixel") {
|
|
344
345
|
return `${unit.value.toNumber()}px`;
|
|
345
346
|
}
|
|
346
|
-
return `${unit.value.toNumber()}%`;
|
|
347
|
+
return `${unit.value.mul(100).toNumber()}%`;
|
|
347
348
|
}
|
|
348
349
|
function getPanelGroupPixelSizes(context) {
|
|
349
350
|
return prepareItems(context).map((i) => isPanelData(i)
|
|
@@ -380,6 +381,10 @@ function buildTemplate(context) {
|
|
|
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") {
|
|
@@ -390,10 +395,24 @@ function buildTemplate(context) {
|
|
|
390
395
|
return formatUnit(item.collapsedSize);
|
|
391
396
|
}
|
|
392
397
|
else if (item.default) {
|
|
393
|
-
|
|
398
|
+
const siblingHasFill = context.items.some((i) => isPanelData(i) &&
|
|
399
|
+
i.id !== item.id &&
|
|
400
|
+
!i.collapsed &&
|
|
401
|
+
(i.max === "1fr" ||
|
|
402
|
+
(i.max.type === "percent" && i.max.value.eq(100))));
|
|
403
|
+
// If a sibling has a fill, this item doesn't need to expand
|
|
404
|
+
// So we can just use the default value
|
|
405
|
+
if (siblingHasFill) {
|
|
406
|
+
return formatUnit(item.default);
|
|
407
|
+
}
|
|
408
|
+
// Use 1fr so that panel fills ths space if needed
|
|
409
|
+
const max = item.max === "1fr" ? "1fr" : formatUnit(item.max);
|
|
410
|
+
return `minmax(${formatUnit(item.default)}, ${max})`;
|
|
411
|
+
}
|
|
412
|
+
else {
|
|
413
|
+
const max = item.max === "1fr" ? "1fr" : formatUnit(item.max);
|
|
414
|
+
return `minmax(${min}, ${max})`;
|
|
394
415
|
}
|
|
395
|
-
const max = item.max === "1fr" ? "1fr" : formatUnit(item.max);
|
|
396
|
-
return `minmax(${min}, ${max})`;
|
|
397
416
|
}
|
|
398
417
|
return formatUnit(item.size);
|
|
399
418
|
})
|
|
@@ -471,11 +490,11 @@ function prepareItems(context) {
|
|
|
471
490
|
const newItems = [];
|
|
472
491
|
for (const item of context.items) {
|
|
473
492
|
if (!item || !isPanelData(item)) {
|
|
474
|
-
newItems.push(item);
|
|
493
|
+
newItems.push({ ...item });
|
|
475
494
|
continue;
|
|
476
495
|
}
|
|
477
496
|
if (item.currentValue.type === "pixel") {
|
|
478
|
-
newItems.push(item);
|
|
497
|
+
newItems.push({ ...item });
|
|
479
498
|
continue;
|
|
480
499
|
}
|
|
481
500
|
const pixel = new big_js_1.default(getGroupSize(context))
|
|
@@ -529,6 +548,10 @@ function updateLayout(context, dragEvent) {
|
|
|
529
548
|
const potentialNewValue = panelAfter.currentValue.value.add(new big_js_1.default(newDragOvershoot).mul(isInRightBuffer ? moveDirection : 1));
|
|
530
549
|
const min = getUnitPixelValue(context, panelAfter.min);
|
|
531
550
|
const isInDragBugger = newDragOvershoot.abs().lt(COLLAPSE_THRESHOLD) &&
|
|
551
|
+
// Let the panel expand at it's min size
|
|
552
|
+
!panelAfter.currentValue.value
|
|
553
|
+
.add(newDragOvershoot.abs())
|
|
554
|
+
.gte(panelAfter.min.value) &&
|
|
532
555
|
panelAfter.collapsible &&
|
|
533
556
|
panelAfter.collapsed &&
|
|
534
557
|
(isInLeftOvershoot || isInRightOvershoot);
|
|
@@ -541,9 +564,9 @@ function updateLayout(context, dragEvent) {
|
|
|
541
564
|
}
|
|
542
565
|
}
|
|
543
566
|
// Don't let the panel collapse until the threshold is reached
|
|
544
|
-
if (
|
|
545
|
-
panelBefore.
|
|
546
|
-
|
|
567
|
+
if (!dragEvent.disregardCollapseBuffer &&
|
|
568
|
+
panelBefore.collapsible &&
|
|
569
|
+
panelBefore.currentValue.value.eq(getUnitPixelValue(context, panelBefore.min))) {
|
|
547
570
|
const potentialNewValue = panelBefore.currentValue.value.sub(newDragOvershoot.abs());
|
|
548
571
|
if (newDragOvershoot.abs().lt(COLLAPSE_THRESHOLD) &&
|
|
549
572
|
potentialNewValue.gt(getUnitPixelValue(context, panelBefore.collapsedSize))) {
|
|
@@ -590,7 +613,6 @@ function updateLayout(context, dragEvent) {
|
|
|
590
613
|
.sub(panelAfterNewValue
|
|
591
614
|
// Then re-add the move amount
|
|
592
615
|
.add(Math.abs(moveAmount)));
|
|
593
|
-
panelAfter.collapsed = false;
|
|
594
616
|
if (extra.gt(0)) {
|
|
595
617
|
panelAfterNewValue = panelAfterNewValue.add(extra);
|
|
596
618
|
}
|
|
@@ -600,14 +622,18 @@ function updateLayout(context, dragEvent) {
|
|
|
600
622
|
.minus(panelAfterPreviousValue)
|
|
601
623
|
// And then re-apply the movement value
|
|
602
624
|
.minus(Math.abs(moveAmount)));
|
|
625
|
+
if (panelBeforeNewValue.lt(panelBefore.min.value)) {
|
|
626
|
+
// TODO this should probably distribute the space between the panels?
|
|
627
|
+
return { dragOvershoot: newDragOvershoot };
|
|
628
|
+
}
|
|
629
|
+
panelAfter.collapsed = false;
|
|
603
630
|
if (panelAfter.onCollapseChange?.current &&
|
|
604
631
|
!panelAfter.collapseIsControlled &&
|
|
605
632
|
!dragEvent.controlled) {
|
|
606
633
|
panelAfter.onCollapseChange.current(false);
|
|
607
634
|
}
|
|
608
635
|
}
|
|
609
|
-
const panelBeforeIsAboutToCollapse = panelBefore.currentValue.value
|
|
610
|
-
getUnitPixelValue(context, panelBefore.min);
|
|
636
|
+
const panelBeforeIsAboutToCollapse = panelBefore.currentValue.value.eq(getUnitPixelValue(context, panelBefore.min));
|
|
611
637
|
// If the panel was expanded and now is at it's min size, collapse it
|
|
612
638
|
if (!dragEvent.disregardCollapseBuffer &&
|
|
613
639
|
panelBefore.collapsible &&
|
|
@@ -633,8 +659,7 @@ function updateLayout(context, dragEvent) {
|
|
|
633
659
|
panelAfter.currentValue = { type: "pixel", value: panelAfterNewValue };
|
|
634
660
|
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)));
|
|
635
661
|
if (!leftoverSpace.eq(0)) {
|
|
636
|
-
panelBefore.currentValue.value =
|
|
637
|
-
panelBefore.currentValue.value.add(leftoverSpace);
|
|
662
|
+
panelBefore.currentValue.value = clampUnit(context, panelBefore, panelBefore.currentValue.value.add(leftoverSpace));
|
|
638
663
|
}
|
|
639
664
|
return { items: newItems };
|
|
640
665
|
}
|
|
@@ -655,7 +680,7 @@ function commitLayout(context) {
|
|
|
655
680
|
});
|
|
656
681
|
const staticWidth = getStaticWidth({ ...context, items: newItems });
|
|
657
682
|
newItems.forEach((item, index) => {
|
|
658
|
-
if (item.type !== "panel" || item.collapsed) {
|
|
683
|
+
if (item.type !== "panel" || item.collapsed || item.isStaticAtRest) {
|
|
659
684
|
return;
|
|
660
685
|
}
|
|
661
686
|
newItems[index] = {
|
|
@@ -725,19 +750,74 @@ function applyDeltaInBothDirections(context, newItems, itemIndex, delta) {
|
|
|
725
750
|
direction = direction === 1 ? -1 : 1;
|
|
726
751
|
}
|
|
727
752
|
}
|
|
753
|
+
/**
|
|
754
|
+
* A layout might overflow at small screen sizes.
|
|
755
|
+
* This function tries to fix that by:
|
|
756
|
+
*
|
|
757
|
+
* 1. It will try to collapse a panel if it can.
|
|
758
|
+
*/
|
|
759
|
+
function handleOverflow(context) {
|
|
760
|
+
// If we haven't measured yet we can't do anything
|
|
761
|
+
if (context.items.some((i) => isPanelData(i) && i.currentValue.value.eq(-1))) {
|
|
762
|
+
return context;
|
|
763
|
+
}
|
|
764
|
+
const groupSize = new big_js_1.default(getGroupSize(context));
|
|
765
|
+
const nonStaticWidth = groupSize.sub(getStaticWidth(context).toNumber());
|
|
766
|
+
const pixelItems = context.items.map((i) => {
|
|
767
|
+
if (isPanelHandle(i))
|
|
768
|
+
return i.size.value;
|
|
769
|
+
if (i.collapsed)
|
|
770
|
+
return getUnitPixelValue(context, i.currentValue);
|
|
771
|
+
const pixel = (i.currentValue.type === "pixel" && i.currentValue.value) ||
|
|
772
|
+
i.currentValue.value.mul(nonStaticWidth);
|
|
773
|
+
return clampUnit(context, i, pixel);
|
|
774
|
+
});
|
|
775
|
+
const totalSize = pixelItems.reduce((acc, i) => acc.add(i), new big_js_1.default(0));
|
|
776
|
+
const overflow = totalSize.abs().sub(groupSize);
|
|
777
|
+
if (overflow.eq(0) || groupSize.eq(0)) {
|
|
778
|
+
return context;
|
|
779
|
+
}
|
|
780
|
+
let newContext = { ...context, items: prepareItems(context) };
|
|
781
|
+
const collapsiblePanel = newContext.items.find((i) => Boolean(isPanelData(i) && i.collapsible));
|
|
782
|
+
if (collapsiblePanel) {
|
|
783
|
+
const collapsiblePanelIndex = newContext.items.findIndex((i) => i.id === collapsiblePanel.id);
|
|
784
|
+
const handleId = getHandleForPanelId(newContext, collapsiblePanel.id);
|
|
785
|
+
const sizeChange = collapsiblePanel.currentValue.value.sub(getUnitPixelValue(newContext, collapsiblePanel.collapsedSize));
|
|
786
|
+
// Try to collapse the panel
|
|
787
|
+
newContext = {
|
|
788
|
+
...newContext,
|
|
789
|
+
...iterativelyUpdateLayout({
|
|
790
|
+
handleId: handleId.item.id,
|
|
791
|
+
delta: sizeChange,
|
|
792
|
+
direction: (handleId.direction * -1),
|
|
793
|
+
context: {
|
|
794
|
+
...newContext,
|
|
795
|
+
// act like its the old size so the space is distributed correctly
|
|
796
|
+
size: { width: totalSize.toNumber(), height: totalSize.toNumber() },
|
|
797
|
+
},
|
|
798
|
+
}),
|
|
799
|
+
};
|
|
800
|
+
// Then remove all the overflow
|
|
801
|
+
applyDeltaInBothDirections(newContext, newContext.items, collapsiblePanelIndex, overflow.neg());
|
|
802
|
+
}
|
|
803
|
+
return { ...newContext, items: commitLayout(newContext) };
|
|
804
|
+
}
|
|
805
|
+
function getDeltaForEvent(context, event) {
|
|
806
|
+
const panel = getPanelWithId(context, event.panelId);
|
|
807
|
+
if (event.type === "expandPanel") {
|
|
808
|
+
return new big_js_1.default(panel.sizeBeforeCollapse ?? getUnitPixelValue(context, panel.min)).minus(panel.currentValue.value);
|
|
809
|
+
}
|
|
810
|
+
const collapsedSize = getUnitPixelValue(context, panel.collapsedSize);
|
|
811
|
+
return panel.currentValue.value.minus(collapsedSize);
|
|
812
|
+
}
|
|
728
813
|
const animationActor = (0, xstate_1.fromPromise)(({ input: { send, context, event } }) => new Promise((resolve) => {
|
|
729
814
|
const panel = getPanelWithId(context, event.panelId);
|
|
730
815
|
const handle = getHandleForPanelId(context, event.panelId);
|
|
731
816
|
let direction = new big_js_1.default(handle.direction);
|
|
732
|
-
|
|
733
|
-
if (event.type === "
|
|
734
|
-
fullDelta = new big_js_1.default(panel.sizeBeforeCollapse ?? getUnitPixelValue(context, panel.min)).minus(panel.currentValue.value);
|
|
735
|
-
}
|
|
736
|
-
else {
|
|
737
|
-
const collapsedSize = getUnitPixelValue(context, panel.collapsedSize);
|
|
817
|
+
const fullDelta = getDeltaForEvent(context, event);
|
|
818
|
+
if (event.type === "collapsePanel") {
|
|
738
819
|
panel.sizeBeforeCollapse = panel.currentValue.value.toNumber();
|
|
739
820
|
direction = direction.mul(new big_js_1.default(-1));
|
|
740
|
-
fullDelta = panel.currentValue.value.minus(collapsedSize);
|
|
741
821
|
}
|
|
742
822
|
const fps = 60;
|
|
743
823
|
const { duration, ease } = getCollapseAnimation(panel);
|
|
@@ -785,7 +865,7 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
785
865
|
states: {
|
|
786
866
|
idle: {
|
|
787
867
|
on: {
|
|
788
|
-
setActualItemsSize: { actions: ["recordActualItemSize"] },
|
|
868
|
+
setActualItemsSize: { actions: ["recordActualItemSize", "onResize"] },
|
|
789
869
|
dragHandleStart: { target: "dragging" },
|
|
790
870
|
setPanelPixelSize: {
|
|
791
871
|
actions: [
|
|
@@ -804,6 +884,8 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
804
884
|
{ target: "togglingCollapse" },
|
|
805
885
|
],
|
|
806
886
|
expandPanel: [
|
|
887
|
+
// This will match if we can't expand and the expansion won't happen
|
|
888
|
+
{ guard: "cannotExpandPanel" },
|
|
807
889
|
{
|
|
808
890
|
actions: "notifyCollapseToggle",
|
|
809
891
|
guard: "shouldNotifyCollapseToggle",
|
|
@@ -876,6 +958,29 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
876
958
|
const panel = getPanelWithId(context, event.panelId);
|
|
877
959
|
return panel.collapseIsControlled === true;
|
|
878
960
|
},
|
|
961
|
+
cannotExpandPanel: ({ context, event }) => {
|
|
962
|
+
isEvent(event, ["expandPanel"]);
|
|
963
|
+
const delta = getDeltaForEvent(context, event);
|
|
964
|
+
const handle = getHandleForPanelId(context, event.panelId);
|
|
965
|
+
const pixelItems = prepareItems(context);
|
|
966
|
+
let interimContext = { ...context, items: pixelItems };
|
|
967
|
+
interimContext = {
|
|
968
|
+
...interimContext,
|
|
969
|
+
...iterativelyUpdateLayout({
|
|
970
|
+
context: interimContext,
|
|
971
|
+
handleId: handle.item.id,
|
|
972
|
+
controlled: event.controlled,
|
|
973
|
+
delta: delta,
|
|
974
|
+
direction: handle.direction,
|
|
975
|
+
}),
|
|
976
|
+
};
|
|
977
|
+
const updatedPanel = interimContext.items.find((i) => i.id === event.panelId);
|
|
978
|
+
const totalSize = interimContext.items.reduce((acc, i) => acc.add(isPanelData(i) ? i.currentValue.value : i.size.value), new big_js_1.default(0));
|
|
979
|
+
const didExpand = updatedPanel &&
|
|
980
|
+
isPanelData(updatedPanel) &&
|
|
981
|
+
!updatedPanel.currentValue.value.eq(updatedPanel.collapsedSize.value);
|
|
982
|
+
return totalSize.gt(getGroupSize(context)) || !didExpand;
|
|
983
|
+
},
|
|
879
984
|
},
|
|
880
985
|
actors: {
|
|
881
986
|
animation: animationActor,
|
|
@@ -915,11 +1020,14 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
915
1020
|
return context.items;
|
|
916
1021
|
},
|
|
917
1022
|
}),
|
|
918
|
-
updateSize: (0, xstate_1.
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
}
|
|
1023
|
+
updateSize: (0, xstate_1.enqueueActions)(({ context, event, enqueue }) => {
|
|
1024
|
+
isEvent(event, ["setSize"]);
|
|
1025
|
+
if (event.handleOverflow) {
|
|
1026
|
+
enqueue.assign(handleOverflow({ ...context, size: event.size }));
|
|
1027
|
+
}
|
|
1028
|
+
else {
|
|
1029
|
+
enqueue.assign({ size: event.size });
|
|
1030
|
+
}
|
|
923
1031
|
}),
|
|
924
1032
|
recordActualItemSize: (0, xstate_1.assign)({
|
|
925
1033
|
items: ({ context, event }) => {
|
|
@@ -1060,9 +1168,13 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
1060
1168
|
onResize: ({ context }) => {
|
|
1061
1169
|
for (const item of context.items) {
|
|
1062
1170
|
if (isPanelData(item)) {
|
|
1171
|
+
const pixel = clampUnit(context, item, getUnitPixelValue(context, item.currentValue));
|
|
1172
|
+
const groupSize = getGroupSize(context);
|
|
1063
1173
|
item.onResize?.current?.({
|
|
1064
|
-
pixel:
|
|
1065
|
-
percentage:
|
|
1174
|
+
pixel: pixel.toNumber(),
|
|
1175
|
+
percentage: groupSize > 0
|
|
1176
|
+
? pixel.div(getGroupSize(context)).toNumber()
|
|
1177
|
+
: -1,
|
|
1066
1178
|
});
|
|
1067
1179
|
}
|
|
1068
1180
|
}
|