@window-splitter/state 0.2.5 → 0.3.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 +9 -1
- package/.turbo/turbo-test.log +2628 -508
- package/CHANGELOG.md +27 -0
- package/coverage/coverage-final.json +1 -1
- package/coverage/coverage-summary.json +3 -0
- package/coverage/index.html +19 -19
- package/coverage/index.ts.html +872 -377
- package/dist/commonjs/index.d.ts +19 -6
- package/dist/commonjs/index.d.ts.map +1 -1
- package/dist/commonjs/index.js +105 -22
- package/dist/commonjs/index.js.map +1 -1
- package/dist/esm/index.d.ts +19 -6
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +102 -22
- package/dist/esm/index.js.map +1 -1
- package/package.json +3 -3
- package/src/__snapshots__/machine.test.ts.snap +73 -0
- package/src/index.ts +144 -27
- package/src/machine.test.ts +324 -6
- package/src/utils.test.ts +86 -0
- package/vitest.config.ts +2 -0
- package/coverage/clover.xml +0 -363
package/dist/commonjs/index.d.ts
CHANGED
|
@@ -4,11 +4,11 @@ export type PixelUnit = `${number}px`;
|
|
|
4
4
|
export type PercentUnit = `${number}%`;
|
|
5
5
|
export type Unit = PixelUnit | PercentUnit;
|
|
6
6
|
type Orientation = "horizontal" | "vertical";
|
|
7
|
-
interface ParsedPercentUnit {
|
|
7
|
+
export interface ParsedPercentUnit {
|
|
8
8
|
type: "percent";
|
|
9
9
|
value: Big.Big;
|
|
10
10
|
}
|
|
11
|
-
interface ParsedPixelUnit {
|
|
11
|
+
export interface ParsedPixelUnit {
|
|
12
12
|
type: "pixel";
|
|
13
13
|
value: Big.Big;
|
|
14
14
|
}
|
|
@@ -54,6 +54,10 @@ export interface PanelData extends Omit<Constraints, "min" | "max" | "collapsedS
|
|
|
54
54
|
onCollapseChange?: {
|
|
55
55
|
current: ((isCollapsed: boolean) => void) | null | undefined;
|
|
56
56
|
};
|
|
57
|
+
/** A ref to the latest "onResize" function provided by the user */
|
|
58
|
+
onResize?: {
|
|
59
|
+
current: OnResizeCallback | null | undefined;
|
|
60
|
+
};
|
|
57
61
|
/**
|
|
58
62
|
* The current value for the item in the grid
|
|
59
63
|
*/
|
|
@@ -203,11 +207,17 @@ export interface GroupMachineContextValue {
|
|
|
203
207
|
groupId: string;
|
|
204
208
|
}
|
|
205
209
|
export type GroupMachineEvent = RegisterPanelEvent | RegisterDynamicPanelEvent | UnregisterPanelEvent | RegisterPanelHandleEvent | UnregisterPanelHandleEvent | DragHandleEvent | SetSizeEvent | SetOrientationEvent | DragHandleStartEvent | DragHandleEndEvent | CollapsePanelEvent | ExpandPanelEvent | SetPanelPixelSizeEvent | ApplyDeltaEvent | SetActualItemsSizeEvent;
|
|
210
|
+
export declare function getCursor(context: Pick<GroupMachineContextValue, "dragOvershoot" | "orientation">): "w-resize" | "e-resize" | "ew-resize" | "n-resize" | "s-resize" | "ns-resize";
|
|
206
211
|
export declare function prepareSnapshot(snapshot: Snapshot<unknown>): Snapshot<unknown>;
|
|
207
212
|
/** Determine if an item is a panel */
|
|
208
213
|
export declare function isPanelData(value: unknown): value is PanelData;
|
|
209
214
|
/** Determine if an item is a panel handle */
|
|
210
215
|
export declare function isPanelHandle(value: unknown): value is PanelHandleData;
|
|
216
|
+
type OnResizeSize = {
|
|
217
|
+
pixel: number;
|
|
218
|
+
percentage: number;
|
|
219
|
+
};
|
|
220
|
+
export type OnResizeCallback = (size: OnResizeSize) => void;
|
|
211
221
|
interface InitializePanelOptions {
|
|
212
222
|
min?: Unit;
|
|
213
223
|
max?: Unit;
|
|
@@ -218,6 +228,9 @@ interface InitializePanelOptions {
|
|
|
218
228
|
onCollapseChange?: {
|
|
219
229
|
current: ((isCollapsed: boolean) => void) | null | undefined;
|
|
220
230
|
};
|
|
231
|
+
onResize?: {
|
|
232
|
+
current: OnResizeCallback | null | undefined;
|
|
233
|
+
};
|
|
221
234
|
collapseAnimation?: PanelData["collapseAnimation"];
|
|
222
235
|
defaultCollapsed?: boolean;
|
|
223
236
|
id?: string;
|
|
@@ -238,8 +251,6 @@ export declare function parseUnit(unit: Unit | "1fr"): ParsedUnit;
|
|
|
238
251
|
/** Convert a `Unit` to a percentage of the group size */
|
|
239
252
|
export declare function getUnitPercentageValue(groupsSize: number, unit: ParsedUnit): number;
|
|
240
253
|
export declare function getGroupSize(context: GroupMachineContextValue): number;
|
|
241
|
-
/** Get the size of a panel in pixels */
|
|
242
|
-
export declare function getUnitPixelValue(context: GroupMachineContextValue, unit: ParsedUnit | "1fr"): Big.Big;
|
|
243
254
|
/** Get a panel with a particular ID. */
|
|
244
255
|
export declare function getPanelWithId(context: GroupMachineContextValue, panelId: string): PanelData;
|
|
245
256
|
/**
|
|
@@ -247,6 +258,10 @@ export declare function getPanelWithId(context: GroupMachineContextValue, panelI
|
|
|
247
258
|
* Will first check the left panel then the right.
|
|
248
259
|
*/
|
|
249
260
|
export declare function getCollapsiblePanelForHandleId(context: GroupMachineContextValue, handleId: string): PanelData;
|
|
261
|
+
export declare function getPanelGroupPixelSizes(context: GroupMachineContextValue): number[];
|
|
262
|
+
export declare function getPanelPixelSize(context: GroupMachineContextValue, panelId: string): number;
|
|
263
|
+
export declare function getPanelGroupPercentageSizes(context: GroupMachineContextValue): number[];
|
|
264
|
+
export declare function getPanelPercentageSize(context: GroupMachineContextValue, panelId: string): number;
|
|
250
265
|
/** Build the grid template from the item values. */
|
|
251
266
|
export declare function buildTemplate(context: GroupMachineContextValue): string;
|
|
252
267
|
/**
|
|
@@ -299,8 +314,6 @@ export declare function buildTemplate(context: GroupMachineContextValue): string
|
|
|
299
314
|
*/
|
|
300
315
|
/** Converts the items to pixels */
|
|
301
316
|
export declare function prepareItems(context: GroupMachineContextValue): Item[];
|
|
302
|
-
/** Converts the items to percentages */
|
|
303
|
-
export declare function commitLayout(context: GroupMachineContextValue): Item[];
|
|
304
317
|
export declare function dragHandlePayload({ delta, orientation, shiftKey, }: {
|
|
305
318
|
delta: number;
|
|
306
319
|
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,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/commonjs/index.js
CHANGED
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.groupMachine = void 0;
|
|
7
7
|
exports.makePercentUnit = makePercentUnit;
|
|
8
8
|
exports.makePixelUnit = makePixelUnit;
|
|
9
|
+
exports.getCursor = getCursor;
|
|
9
10
|
exports.prepareSnapshot = prepareSnapshot;
|
|
10
11
|
exports.isPanelData = isPanelData;
|
|
11
12
|
exports.isPanelHandle = isPanelHandle;
|
|
@@ -14,12 +15,14 @@ exports.initializePanelHandleData = initializePanelHandleData;
|
|
|
14
15
|
exports.parseUnit = parseUnit;
|
|
15
16
|
exports.getUnitPercentageValue = getUnitPercentageValue;
|
|
16
17
|
exports.getGroupSize = getGroupSize;
|
|
17
|
-
exports.getUnitPixelValue = getUnitPixelValue;
|
|
18
18
|
exports.getPanelWithId = getPanelWithId;
|
|
19
19
|
exports.getCollapsiblePanelForHandleId = getCollapsiblePanelForHandleId;
|
|
20
|
+
exports.getPanelGroupPixelSizes = getPanelGroupPixelSizes;
|
|
21
|
+
exports.getPanelPixelSize = getPanelPixelSize;
|
|
22
|
+
exports.getPanelGroupPercentageSizes = getPanelGroupPercentageSizes;
|
|
23
|
+
exports.getPanelPercentageSize = getPanelPercentageSize;
|
|
20
24
|
exports.buildTemplate = buildTemplate;
|
|
21
25
|
exports.prepareItems = prepareItems;
|
|
22
|
-
exports.commitLayout = commitLayout;
|
|
23
26
|
exports.dragHandlePayload = dragHandlePayload;
|
|
24
27
|
const rafz_1 = require("@react-spring/rafz");
|
|
25
28
|
const xstate_1 = require("xstate");
|
|
@@ -41,8 +44,8 @@ function getCollapseAnimation(panel) {
|
|
|
41
44
|
if (typeof panel.collapseAnimation === "string") {
|
|
42
45
|
easeFn = collapseAnimations[panel.collapseAnimation];
|
|
43
46
|
}
|
|
44
|
-
else
|
|
45
|
-
duration = panel.collapseAnimation.duration
|
|
47
|
+
else {
|
|
48
|
+
duration = panel.collapseAnimation.duration;
|
|
46
49
|
easeFn =
|
|
47
50
|
typeof panel.collapseAnimation.easing === "function"
|
|
48
51
|
? panel.collapseAnimation.easing
|
|
@@ -68,6 +71,30 @@ const collapseAnimations = {
|
|
|
68
71
|
};
|
|
69
72
|
// #endregion
|
|
70
73
|
// #region Helpers
|
|
74
|
+
function getCursor(context) {
|
|
75
|
+
if (context.orientation === "horizontal") {
|
|
76
|
+
if (context.dragOvershoot.gt(0)) {
|
|
77
|
+
return "w-resize";
|
|
78
|
+
}
|
|
79
|
+
else if (context.dragOvershoot.lt(0)) {
|
|
80
|
+
return "e-resize";
|
|
81
|
+
}
|
|
82
|
+
else {
|
|
83
|
+
return "ew-resize";
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
else {
|
|
87
|
+
if (context.dragOvershoot.gt(0)) {
|
|
88
|
+
return "n-resize";
|
|
89
|
+
}
|
|
90
|
+
else if (context.dragOvershoot.lt(0)) {
|
|
91
|
+
return "s-resize";
|
|
92
|
+
}
|
|
93
|
+
else {
|
|
94
|
+
return "ns-resize";
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
}
|
|
71
98
|
function prepareSnapshot(snapshot) {
|
|
72
99
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
73
100
|
const snapshotContext = snapshot
|
|
@@ -76,12 +103,8 @@ function prepareSnapshot(snapshot) {
|
|
|
76
103
|
for (const item of snapshotContext.items) {
|
|
77
104
|
if (isPanelData(item)) {
|
|
78
105
|
item.currentValue.value = new big_js_1.default(item.currentValue.value);
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
}
|
|
82
|
-
if (item.min) {
|
|
83
|
-
item.min.value = new big_js_1.default(item.min.value);
|
|
84
|
-
}
|
|
106
|
+
item.collapsedSize.value = new big_js_1.default(item.collapsedSize.value);
|
|
107
|
+
item.min.value = new big_js_1.default(item.min.value);
|
|
85
108
|
if (item.max && item.max !== "1fr") {
|
|
86
109
|
item.max.value = new big_js_1.default(item.max.value);
|
|
87
110
|
}
|
|
@@ -111,6 +134,20 @@ function isPanelHandle(value) {
|
|
|
111
134
|
value.type === "handle");
|
|
112
135
|
}
|
|
113
136
|
function initializePanel(item) {
|
|
137
|
+
const onResize = () => {
|
|
138
|
+
let lastCall = null;
|
|
139
|
+
// Memo-ize so we only call the callback once per size
|
|
140
|
+
return ((size) => {
|
|
141
|
+
if (!lastCall ||
|
|
142
|
+
(lastCall.pixel === size.pixel &&
|
|
143
|
+
lastCall.percentage === size.percentage)) {
|
|
144
|
+
lastCall = size;
|
|
145
|
+
return;
|
|
146
|
+
}
|
|
147
|
+
lastCall = size;
|
|
148
|
+
item.onResize?.current?.(size);
|
|
149
|
+
});
|
|
150
|
+
};
|
|
114
151
|
const data = {
|
|
115
152
|
type: "panel",
|
|
116
153
|
min: parseUnit(item.min || "0px"),
|
|
@@ -121,6 +158,7 @@ function initializePanel(item) {
|
|
|
121
158
|
collapsible: item.collapsible,
|
|
122
159
|
collapsedSize: parseUnit(item.collapsedSize ?? "0px"),
|
|
123
160
|
onCollapseChange: item.onCollapseChange,
|
|
161
|
+
onResize: { current: onResize() },
|
|
124
162
|
collapseIsControlled: typeof item.collapsed !== "undefined",
|
|
125
163
|
sizeBeforeCollapse: undefined,
|
|
126
164
|
id: item.id,
|
|
@@ -307,6 +345,32 @@ function formatUnit(unit) {
|
|
|
307
345
|
}
|
|
308
346
|
return `${unit.value.toNumber()}%`;
|
|
309
347
|
}
|
|
348
|
+
function getPanelGroupPixelSizes(context) {
|
|
349
|
+
return prepareItems(context).map((i) => isPanelData(i)
|
|
350
|
+
? i.currentValue.value.toNumber()
|
|
351
|
+
: getUnitPixelValue(context, i.size).toNumber());
|
|
352
|
+
}
|
|
353
|
+
function getPanelPixelSize(context, panelId) {
|
|
354
|
+
const p = getPanelWithId({ ...context, items: prepareItems(context) }, panelId);
|
|
355
|
+
return p.currentValue.value.toNumber();
|
|
356
|
+
}
|
|
357
|
+
function getPanelGroupPercentageSizes(context) {
|
|
358
|
+
const clamped = commitLayout({
|
|
359
|
+
...context,
|
|
360
|
+
items: prepareItems(context),
|
|
361
|
+
});
|
|
362
|
+
return clamped.map((i) => {
|
|
363
|
+
if (isPanelHandle(i)) {
|
|
364
|
+
return getUnitPercentageValue(getGroupSize(context), i.size);
|
|
365
|
+
}
|
|
366
|
+
return getUnitPercentageValue(getGroupSize(context), i.currentValue);
|
|
367
|
+
});
|
|
368
|
+
}
|
|
369
|
+
function getPanelPercentageSize(context, panelId) {
|
|
370
|
+
const items = prepareItems(context);
|
|
371
|
+
const p = getPanelWithId({ ...context, items }, panelId);
|
|
372
|
+
return getUnitPercentageValue(getGroupSize(context), p.currentValue);
|
|
373
|
+
}
|
|
310
374
|
/** Build the grid template from the item values. */
|
|
311
375
|
function buildTemplate(context) {
|
|
312
376
|
const staticWidth = getStaticWidth(context);
|
|
@@ -316,9 +380,6 @@ function buildTemplate(context) {
|
|
|
316
380
|
const min = formatUnit(item.min);
|
|
317
381
|
if (item.currentValue.type === "pixel" &&
|
|
318
382
|
item.currentValue.value.toNumber() !== -1) {
|
|
319
|
-
if (item.currentValue.value.toNumber() < 0) {
|
|
320
|
-
return "0px";
|
|
321
|
-
}
|
|
322
383
|
return formatUnit(item.currentValue);
|
|
323
384
|
}
|
|
324
385
|
else if (item.currentValue.type === "percent") {
|
|
@@ -566,7 +627,7 @@ function updateLayout(context, dragEvent) {
|
|
|
566
627
|
panelBefore.currentValue = { type: "pixel", value: panelBeforeNewValue };
|
|
567
628
|
panelAfter.currentValue = { type: "pixel", value: panelAfterNewValue };
|
|
568
629
|
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)));
|
|
569
|
-
if (leftoverSpace.
|
|
630
|
+
if (!leftoverSpace.eq(0)) {
|
|
570
631
|
panelBefore.currentValue.value =
|
|
571
632
|
panelBefore.currentValue.value.add(leftoverSpace);
|
|
572
633
|
}
|
|
@@ -722,7 +783,13 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
722
783
|
setActualItemsSize: { actions: ["recordActualItemSize"] },
|
|
723
784
|
dragHandleStart: { target: "dragging" },
|
|
724
785
|
setPanelPixelSize: {
|
|
725
|
-
actions: [
|
|
786
|
+
actions: [
|
|
787
|
+
"prepare",
|
|
788
|
+
"onSetPanelSize",
|
|
789
|
+
"commit",
|
|
790
|
+
"onResize",
|
|
791
|
+
"onAutosave",
|
|
792
|
+
],
|
|
726
793
|
},
|
|
727
794
|
collapsePanel: [
|
|
728
795
|
{
|
|
@@ -743,7 +810,7 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
743
810
|
dragging: {
|
|
744
811
|
entry: ["prepare"],
|
|
745
812
|
on: {
|
|
746
|
-
dragHandle: { actions: ["onDragHandle"] },
|
|
813
|
+
dragHandle: { actions: ["onDragHandle", "onResize"] },
|
|
747
814
|
dragHandleEnd: { target: "idle" },
|
|
748
815
|
collapsePanel: {
|
|
749
816
|
guard: "shouldCollapseToggle",
|
|
@@ -767,24 +834,30 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
767
834
|
},
|
|
768
835
|
},
|
|
769
836
|
on: {
|
|
770
|
-
applyDelta: { actions: ["onApplyDelta"] },
|
|
837
|
+
applyDelta: { actions: ["onApplyDelta", "onResize"] },
|
|
771
838
|
},
|
|
772
839
|
},
|
|
773
840
|
},
|
|
774
841
|
on: {
|
|
775
842
|
registerPanel: { actions: ["assignPanelData"] },
|
|
776
843
|
registerDynamicPanel: {
|
|
777
|
-
actions: [
|
|
844
|
+
actions: [
|
|
845
|
+
"prepare",
|
|
846
|
+
"onRegisterDynamicPanel",
|
|
847
|
+
"commit",
|
|
848
|
+
"onResize",
|
|
849
|
+
"onAutosave",
|
|
850
|
+
],
|
|
778
851
|
},
|
|
779
852
|
unregisterPanel: {
|
|
780
|
-
actions: ["prepare", "removeItem", "commit", "onAutosave"],
|
|
853
|
+
actions: ["prepare", "removeItem", "commit", "onResize", "onAutosave"],
|
|
781
854
|
},
|
|
782
855
|
registerPanelHandle: { actions: ["assignPanelHandleData"] },
|
|
783
856
|
unregisterPanelHandle: {
|
|
784
|
-
actions: ["prepare", "removeItem", "commit", "onAutosave"],
|
|
857
|
+
actions: ["prepare", "removeItem", "commit", "onResize", "onAutosave"],
|
|
785
858
|
},
|
|
786
|
-
setSize: { actions: ["updateSize"] },
|
|
787
|
-
setOrientation: { actions: ["updateOrientation"] },
|
|
859
|
+
setSize: { actions: ["updateSize", "onResize"] },
|
|
860
|
+
setOrientation: { actions: ["updateOrientation", "onResize"] },
|
|
788
861
|
},
|
|
789
862
|
}, {
|
|
790
863
|
guards: {
|
|
@@ -979,6 +1052,16 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
979
1052
|
delta,
|
|
980
1053
|
}));
|
|
981
1054
|
}),
|
|
1055
|
+
onResize: ({ context }) => {
|
|
1056
|
+
for (const item of context.items) {
|
|
1057
|
+
if (isPanelData(item)) {
|
|
1058
|
+
item.onResize?.current?.({
|
|
1059
|
+
pixel: getUnitPixelValue(context, item.currentValue).toNumber(),
|
|
1060
|
+
percentage: getUnitPercentageValue(getGroupSize(context), item.currentValue),
|
|
1061
|
+
});
|
|
1062
|
+
}
|
|
1063
|
+
}
|
|
1064
|
+
},
|
|
982
1065
|
},
|
|
983
1066
|
});
|
|
984
1067
|
// #endregion
|