@window-splitter/state 0.2.5 → 0.3.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 +1 -1
- package/.turbo/turbo-test.log +2628 -508
- package/CHANGELOG.md +39 -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 +20 -7
- package/dist/commonjs/index.d.ts.map +1 -1
- package/dist/commonjs/index.js +113 -25
- package/dist/commonjs/index.js.map +1 -1
- package/dist/esm/index.d.ts +20 -7
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +110 -25
- 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 +152 -30
- 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
|
/**
|
|
@@ -298,9 +313,7 @@ export declare function buildTemplate(context: GroupMachineContextValue): string
|
|
|
298
313
|
* When another update loop is triggered the above template will be converted back to pixels.
|
|
299
314
|
*/
|
|
300
315
|
/** Converts the items to pixels */
|
|
301
|
-
export declare function prepareItems(context: GroupMachineContextValue):
|
|
302
|
-
/** Converts the items to percentages */
|
|
303
|
-
export declare function commitLayout(context: GroupMachineContextValue): Item[];
|
|
316
|
+
export declare function prepareItems(context: GroupMachineContextValue): (PanelData | PanelHandleData)[];
|
|
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":"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;CACnB;AAED,UAAU,KAAK;IACb;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,WAAW,EAAE,KAAK,GAAG,KAAK,GAAG,eAAe,CAAC,EACxD,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,GAAG,eAAe,CAAC,CAAC,EACpD,KAAK;IACP,GAAG,EAAE,UAAU,GAAG,KAAK,CAAC;IACxB,IAAI,EAAE,OAAO,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,uEAAuE;IACvE,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,yEAAyE;IACzE,gBAAgB,CAAC,EAAE;QACjB,OAAO,EAAE,CAAC,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;KAC9D,CAAC;IACF,mEAAmE;IACnE,QAAQ,CAAC,EAAE;QACT,OAAO,EAAE,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAC;KAC9C,CAAC;IACF;;OAEG;IACH,YAAY,EAAE,UAAU,CAAC;IACzB,+CAA+C;IAC/C,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B;;;;OAIG;IACH,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IACvC,kCAAkC;IAClC,iBAAiB,CAAC,EACd,iBAAiB,GACjB;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,iBAAiB,GAAG,CAAC,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC,CAAA;KAAE,CAAC;CAC/E;AAqBD,gDAAgD;AAChD,QAAA,MAAM,kBAAkB;uBACe,MAAM;gBAGb,MAAM;gBAQT,MAAM;CAGlC,CAAC;AAEF,KAAK,iBAAiB,GAAG,MAAM,OAAO,kBAAkB,CAAC;AAEzD,MAAM,WAAW,eAAgB,SAAQ,KAAK;IAC5C,IAAI,EAAE,QAAQ,CAAC;IACf,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,IAAI,EAAE,eAAe,CAAC;CACvB;AAED,MAAM,MAAM,IAAI,GAAG,SAAS,GAAG,eAAe,CAAC;AAE/C,UAAU,kBAAkB;IAC1B,kDAAkD;IAClD,IAAI,EAAE,eAAe,CAAC;IACtB,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,cAAc,GAAG,kBAAkB,CAAC,CAAC;CACrE;AAED,UAAU,yBAA0B,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IAC1E,kDAAkD;IAClD,IAAI,EAAE,sBAAsB,CAAC;CAC9B;AAED,UAAU,oBAAoB;IAC5B,4CAA4C;IAC5C,IAAI,EAAE,iBAAiB,CAAC;IACxB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,eAAe,EACf,MAAM,GAAG,MAAM,CAChB,GAAG;IACF,IAAI,EAAE,SAAS,CAAC;CACjB,CAAC;AAEF,UAAU,wBAAwB;IAChC,yDAAyD;IACzD,IAAI,EAAE,qBAAqB,CAAC;IAC5B,IAAI,EAAE,yBAAyB,CAAC;CACjC;AAED,UAAU,0BAA0B;IAClC,mDAAmD;IACnD,IAAI,EAAE,uBAAuB,CAAC;IAC9B,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,UAAU,oBAAoB;IAC5B,+BAA+B;IAC/B,IAAI,EAAE,iBAAiB,CAAC;IACxB,uCAAuC;IACvC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,eAAe;IACvB,0DAA0D;IAC1D,IAAI,EAAE,YAAY,CAAC;IACnB,uCAAuC;IACvC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,UAAU,kBAAkB;IAC1B,6BAA6B;IAC7B,IAAI,EAAE,eAAe,CAAC;IACtB,uCAAuC;IACvC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,YAAY;IACpB,sCAAsC;IACtC,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,UAAU,uBAAuB;IAC/B,sCAAsC;IACtC,IAAI,EAAE,oBAAoB,CAAC;IAC3B,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;CACrC;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,mBAAmB;IAC3B,uCAAuC;IACvC,IAAI,EAAE,gBAAgB,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;CAC1B;AAED,UAAU,wBAAwB;IAChC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,UAAU,kBAAmB,SAAQ,wBAAwB;IAC3D,uBAAuB;IACvB,IAAI,EAAE,eAAe,CAAC;IACtB,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,gBAAiB,SAAQ,wBAAwB;IACzD,qBAAqB;IACrB,IAAI,EAAE,aAAa,CAAC;IACpB,0BAA0B;IAC1B,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,sBAAsB;IAC9B;;;;;OAKG;IACH,IAAI,EAAE,mBAAmB,CAAC;IAC1B,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,qCAAqC;IACrC,IAAI,EAAE,IAAI,CAAC;CACZ;AAED,MAAM,WAAW,wBAAwB;IACvC,6BAA6B;IAC7B,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,uCAAuC;IACvC,IAAI,EAAE,IAAI,CAAC;IACX,kCAAkC;IAClC,WAAW,EAAE,WAAW,CAAC;IACzB,gDAAgD;IAChD,aAAa,EAAE,GAAG,CAAC,GAAG,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,iBAAiB,GACzB,kBAAkB,GAClB,yBAAyB,GACzB,oBAAoB,GACpB,wBAAwB,GACxB,0BAA0B,GAC1B,eAAe,GACf,YAAY,GACZ,mBAAmB,GACnB,oBAAoB,GACpB,kBAAkB,GAClB,kBAAkB,GAClB,gBAAgB,GAChB,sBAAsB,GACtB,eAAe,GACf,uBAAuB,CAAC;AAW5B,wBAAgB,SAAS,CACvB,OAAO,EAAE,IAAI,CAAC,wBAAwB,EAAE,eAAe,GAAG,aAAa,CAAC,iFAmBzE;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,qBAsB1D;AAaD,sCAAsC;AACtC,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,SAAS,CAO9D;AAED,6CAA6C;AAC7C,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,eAAe,CAOtE;AAED,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;AAE5D,UAAU,sBAAsB;IAC9B,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,IAAI,CAAC;IACrB,gBAAgB,CAAC,EAAE;QACjB,OAAO,EAAE,CAAC,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;KAC9D,CAAC;IACF,QAAQ,CAAC,EAAE;QACT,OAAO,EAAE,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAC;KAC9C,CAAC;IACF,iBAAiB,CAAC,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,KAAK,4BAA4B,GAAG,sBAAsB,GAAG;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5E,wBAAgB,eAAe,CAAC,IAAI,EAAE,4BAA4B,GAAG,SAAS,CAAC;AAC/E,wBAAgB,eAAe,CAC7B,IAAI,EAAE,sBAAsB,GAC3B,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AA+CzB,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,yBAAyB;;QArUnE,MAAM;YA/EF,MAAM;;EA6Zf;AAED,6CAA6C;AAC7C,wBAAgB,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,KAAK,GAAG,UAAU,CAcxD;AAED,yDAAyD;AACzD,wBAAgB,sBAAsB,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,UAM1E;AAED,wBAAgB,YAAY,CAAC,OAAO,EAAE,wBAAwB,UAI7D;AA6BD,wCAAwC;AACxC,wBAAgB,cAAc,CAC5B,OAAO,EAAE,wBAAwB,EACjC,OAAO,EAAE,MAAM,aAShB;AAgBD;;;GAGG;AACH,wBAAgB,8BAA8B,CAC5C,OAAO,EAAE,wBAAwB,EACjC,QAAQ,EAAE,MAAM,aAmBjB;AAmJD,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,wBAAwB,YAMxE;AAED,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,wBAAwB,EACjC,OAAO,EAAE,MAAM,UAQhB;AAED,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,wBAAwB,YAclC;AAED,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,wBAAwB,EACjC,OAAO,EAAE,MAAM,UAKhB;AAED,oDAAoD;AACpD,wBAAgB,aAAa,CAAC,OAAO,EAAE,wBAAwB,UA6B9D;AA8BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH,mCAAmC;AACnC,wBAAgB,YAAY,CAAC,OAAO,EAAE,wBAAwB,mCA0B7D;AAgSD,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,WAA0B,EAC1B,QAAgB,GACjB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;;;;;;;;;EAWA;AAoKD,eAAO,MAAM,YAAY;kBAOH,WAAW;aAChB,MAAM;mBACA,IAAI,EAAE;wGAyV5B,CAAC"}
|
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") {
|
|
@@ -406,19 +467,24 @@ function createUnrestrainedPanel(_, data) {
|
|
|
406
467
|
*/
|
|
407
468
|
/** Converts the items to pixels */
|
|
408
469
|
function prepareItems(context) {
|
|
409
|
-
const newItems = [...context.items];
|
|
410
470
|
const staticWidth = getStaticWidth(context);
|
|
411
|
-
|
|
471
|
+
const newItems = [];
|
|
472
|
+
for (const item of context.items) {
|
|
412
473
|
if (!item || !isPanelData(item)) {
|
|
474
|
+
newItems.push(item);
|
|
413
475
|
continue;
|
|
414
476
|
}
|
|
415
477
|
if (item.currentValue.type === "pixel") {
|
|
478
|
+
newItems.push(item);
|
|
416
479
|
continue;
|
|
417
480
|
}
|
|
418
481
|
const pixel = new big_js_1.default(getGroupSize(context))
|
|
419
482
|
.minus(staticWidth)
|
|
420
483
|
.mul(item.currentValue.value);
|
|
421
|
-
|
|
484
|
+
newItems.push({
|
|
485
|
+
...item,
|
|
486
|
+
currentValue: makePixelUnit(pixel.toNumber()),
|
|
487
|
+
});
|
|
422
488
|
}
|
|
423
489
|
return newItems;
|
|
424
490
|
}
|
|
@@ -566,7 +632,7 @@ function updateLayout(context, dragEvent) {
|
|
|
566
632
|
panelBefore.currentValue = { type: "pixel", value: panelBeforeNewValue };
|
|
567
633
|
panelAfter.currentValue = { type: "pixel", value: panelAfterNewValue };
|
|
568
634
|
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.
|
|
635
|
+
if (!leftoverSpace.eq(0)) {
|
|
570
636
|
panelBefore.currentValue.value =
|
|
571
637
|
panelBefore.currentValue.value.add(leftoverSpace);
|
|
572
638
|
}
|
|
@@ -722,7 +788,13 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
722
788
|
setActualItemsSize: { actions: ["recordActualItemSize"] },
|
|
723
789
|
dragHandleStart: { target: "dragging" },
|
|
724
790
|
setPanelPixelSize: {
|
|
725
|
-
actions: [
|
|
791
|
+
actions: [
|
|
792
|
+
"prepare",
|
|
793
|
+
"onSetPanelSize",
|
|
794
|
+
"commit",
|
|
795
|
+
"onResize",
|
|
796
|
+
"onAutosave",
|
|
797
|
+
],
|
|
726
798
|
},
|
|
727
799
|
collapsePanel: [
|
|
728
800
|
{
|
|
@@ -743,7 +815,7 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
743
815
|
dragging: {
|
|
744
816
|
entry: ["prepare"],
|
|
745
817
|
on: {
|
|
746
|
-
dragHandle: { actions: ["onDragHandle"] },
|
|
818
|
+
dragHandle: { actions: ["onDragHandle", "onResize"] },
|
|
747
819
|
dragHandleEnd: { target: "idle" },
|
|
748
820
|
collapsePanel: {
|
|
749
821
|
guard: "shouldCollapseToggle",
|
|
@@ -767,24 +839,30 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
767
839
|
},
|
|
768
840
|
},
|
|
769
841
|
on: {
|
|
770
|
-
applyDelta: { actions: ["onApplyDelta"] },
|
|
842
|
+
applyDelta: { actions: ["onApplyDelta", "onResize"] },
|
|
771
843
|
},
|
|
772
844
|
},
|
|
773
845
|
},
|
|
774
846
|
on: {
|
|
775
847
|
registerPanel: { actions: ["assignPanelData"] },
|
|
776
848
|
registerDynamicPanel: {
|
|
777
|
-
actions: [
|
|
849
|
+
actions: [
|
|
850
|
+
"prepare",
|
|
851
|
+
"onRegisterDynamicPanel",
|
|
852
|
+
"commit",
|
|
853
|
+
"onResize",
|
|
854
|
+
"onAutosave",
|
|
855
|
+
],
|
|
778
856
|
},
|
|
779
857
|
unregisterPanel: {
|
|
780
|
-
actions: ["prepare", "removeItem", "commit", "onAutosave"],
|
|
858
|
+
actions: ["prepare", "removeItem", "commit", "onResize", "onAutosave"],
|
|
781
859
|
},
|
|
782
860
|
registerPanelHandle: { actions: ["assignPanelHandleData"] },
|
|
783
861
|
unregisterPanelHandle: {
|
|
784
|
-
actions: ["prepare", "removeItem", "commit", "onAutosave"],
|
|
862
|
+
actions: ["prepare", "removeItem", "commit", "onResize", "onAutosave"],
|
|
785
863
|
},
|
|
786
|
-
setSize: { actions: ["updateSize"] },
|
|
787
|
-
setOrientation: { actions: ["updateOrientation"] },
|
|
864
|
+
setSize: { actions: ["updateSize", "onResize"] },
|
|
865
|
+
setOrientation: { actions: ["updateOrientation", "onResize"] },
|
|
788
866
|
},
|
|
789
867
|
}, {
|
|
790
868
|
guards: {
|
|
@@ -979,6 +1057,16 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
979
1057
|
delta,
|
|
980
1058
|
}));
|
|
981
1059
|
}),
|
|
1060
|
+
onResize: ({ context }) => {
|
|
1061
|
+
for (const item of context.items) {
|
|
1062
|
+
if (isPanelData(item)) {
|
|
1063
|
+
item.onResize?.current?.({
|
|
1064
|
+
pixel: getUnitPixelValue(context, item.currentValue).toNumber(),
|
|
1065
|
+
percentage: getUnitPercentageValue(getGroupSize(context), item.currentValue),
|
|
1066
|
+
});
|
|
1067
|
+
}
|
|
1068
|
+
}
|
|
1069
|
+
},
|
|
982
1070
|
},
|
|
983
1071
|
});
|
|
984
1072
|
// #endregion
|