@window-splitter/state 0.3.2 → 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 +1 -1
- package/.turbo/turbo-lint.log +1 -1
- package/CHANGELOG.md +27 -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 +126 -29
- 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 +126 -29
- package/dist/esm/index.js.map +1 -1
- package/package.json +3 -3
- package/src/index.ts +197 -48
- package/src/machine.test.ts +219 -0
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":"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;IAClB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;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;IACX,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;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,KAAK,sBAAsB,GAAG;IAC5B,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,GAAG,CAAC,EAAE,IAAI,CAAC;IACX,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,aAAa,CAAC,EAAE,IAAI,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,GAAG,OAAO,CACT,IAAI,CACF,SAAS,EACP,gBAAgB,GAChB,mBAAmB,GACnB,kBAAkB,GAClB,UAAU,GACV,aAAa,GACb,WAAW,GACX,kBAAkB,CACrB,CACF,CAAC;AAEF,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;AAgDzB,wBAAgB,yBAAyB,CAAC,IAAI,EAAE,yBAAyB;;QAxUnE,MAAM;YA/EF,MAAM;;EAgaf;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;AA8ID,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,UAmD9D;AA8BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AAEH,mCAAmC;AACnC,wBAAgB,YAAY,CAAC,OAAO,EAAE,wBAAwB,GAAG,IAAI,EAAE,CA0BtE;AA8SD,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;AAwPD,eAAO,MAAM,YAAY;kBAOH,WAAW;aAChB,MAAM;mBACA,IAAI,EAAE;wGAqY5B,CAAC"}
|
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
|
}
|
|
@@ -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
|
}
|
|
@@ -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") {
|
|
@@ -485,11 +490,11 @@ function prepareItems(context) {
|
|
|
485
490
|
const newItems = [];
|
|
486
491
|
for (const item of context.items) {
|
|
487
492
|
if (!item || !isPanelData(item)) {
|
|
488
|
-
newItems.push(item);
|
|
493
|
+
newItems.push({ ...item });
|
|
489
494
|
continue;
|
|
490
495
|
}
|
|
491
496
|
if (item.currentValue.type === "pixel") {
|
|
492
|
-
newItems.push(item);
|
|
497
|
+
newItems.push({ ...item });
|
|
493
498
|
continue;
|
|
494
499
|
}
|
|
495
500
|
const pixel = new big_js_1.default(getGroupSize(context))
|
|
@@ -543,6 +548,10 @@ function updateLayout(context, dragEvent) {
|
|
|
543
548
|
const potentialNewValue = panelAfter.currentValue.value.add(new big_js_1.default(newDragOvershoot).mul(isInRightBuffer ? moveDirection : 1));
|
|
544
549
|
const min = getUnitPixelValue(context, panelAfter.min);
|
|
545
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) &&
|
|
546
555
|
panelAfter.collapsible &&
|
|
547
556
|
panelAfter.collapsed &&
|
|
548
557
|
(isInLeftOvershoot || isInRightOvershoot);
|
|
@@ -555,9 +564,9 @@ function updateLayout(context, dragEvent) {
|
|
|
555
564
|
}
|
|
556
565
|
}
|
|
557
566
|
// Don't let the panel collapse until the threshold is reached
|
|
558
|
-
if (
|
|
559
|
-
panelBefore.
|
|
560
|
-
|
|
567
|
+
if (!dragEvent.disregardCollapseBuffer &&
|
|
568
|
+
panelBefore.collapsible &&
|
|
569
|
+
panelBefore.currentValue.value.eq(getUnitPixelValue(context, panelBefore.min))) {
|
|
561
570
|
const potentialNewValue = panelBefore.currentValue.value.sub(newDragOvershoot.abs());
|
|
562
571
|
if (newDragOvershoot.abs().lt(COLLAPSE_THRESHOLD) &&
|
|
563
572
|
potentialNewValue.gt(getUnitPixelValue(context, panelBefore.collapsedSize))) {
|
|
@@ -604,7 +613,6 @@ function updateLayout(context, dragEvent) {
|
|
|
604
613
|
.sub(panelAfterNewValue
|
|
605
614
|
// Then re-add the move amount
|
|
606
615
|
.add(Math.abs(moveAmount)));
|
|
607
|
-
panelAfter.collapsed = false;
|
|
608
616
|
if (extra.gt(0)) {
|
|
609
617
|
panelAfterNewValue = panelAfterNewValue.add(extra);
|
|
610
618
|
}
|
|
@@ -614,14 +622,18 @@ function updateLayout(context, dragEvent) {
|
|
|
614
622
|
.minus(panelAfterPreviousValue)
|
|
615
623
|
// And then re-apply the movement value
|
|
616
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;
|
|
617
630
|
if (panelAfter.onCollapseChange?.current &&
|
|
618
631
|
!panelAfter.collapseIsControlled &&
|
|
619
632
|
!dragEvent.controlled) {
|
|
620
633
|
panelAfter.onCollapseChange.current(false);
|
|
621
634
|
}
|
|
622
635
|
}
|
|
623
|
-
const panelBeforeIsAboutToCollapse = panelBefore.currentValue.value
|
|
624
|
-
getUnitPixelValue(context, panelBefore.min);
|
|
636
|
+
const panelBeforeIsAboutToCollapse = panelBefore.currentValue.value.eq(getUnitPixelValue(context, panelBefore.min));
|
|
625
637
|
// If the panel was expanded and now is at it's min size, collapse it
|
|
626
638
|
if (!dragEvent.disregardCollapseBuffer &&
|
|
627
639
|
panelBefore.collapsible &&
|
|
@@ -647,8 +659,7 @@ function updateLayout(context, dragEvent) {
|
|
|
647
659
|
panelAfter.currentValue = { type: "pixel", value: panelAfterNewValue };
|
|
648
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)));
|
|
649
661
|
if (!leftoverSpace.eq(0)) {
|
|
650
|
-
panelBefore.currentValue.value =
|
|
651
|
-
panelBefore.currentValue.value.add(leftoverSpace);
|
|
662
|
+
panelBefore.currentValue.value = clampUnit(context, panelBefore, panelBefore.currentValue.value.add(leftoverSpace));
|
|
652
663
|
}
|
|
653
664
|
return { items: newItems };
|
|
654
665
|
}
|
|
@@ -669,7 +680,7 @@ function commitLayout(context) {
|
|
|
669
680
|
});
|
|
670
681
|
const staticWidth = getStaticWidth({ ...context, items: newItems });
|
|
671
682
|
newItems.forEach((item, index) => {
|
|
672
|
-
if (item.type !== "panel" || item.collapsed) {
|
|
683
|
+
if (item.type !== "panel" || item.collapsed || item.isStaticAtRest) {
|
|
673
684
|
return;
|
|
674
685
|
}
|
|
675
686
|
newItems[index] = {
|
|
@@ -739,19 +750,74 @@ function applyDeltaInBothDirections(context, newItems, itemIndex, delta) {
|
|
|
739
750
|
direction = direction === 1 ? -1 : 1;
|
|
740
751
|
}
|
|
741
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
|
+
}
|
|
742
813
|
const animationActor = (0, xstate_1.fromPromise)(({ input: { send, context, event } }) => new Promise((resolve) => {
|
|
743
814
|
const panel = getPanelWithId(context, event.panelId);
|
|
744
815
|
const handle = getHandleForPanelId(context, event.panelId);
|
|
745
816
|
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);
|
|
817
|
+
const fullDelta = getDeltaForEvent(context, event);
|
|
818
|
+
if (event.type === "collapsePanel") {
|
|
752
819
|
panel.sizeBeforeCollapse = panel.currentValue.value.toNumber();
|
|
753
820
|
direction = direction.mul(new big_js_1.default(-1));
|
|
754
|
-
fullDelta = panel.currentValue.value.minus(collapsedSize);
|
|
755
821
|
}
|
|
756
822
|
const fps = 60;
|
|
757
823
|
const { duration, ease } = getCollapseAnimation(panel);
|
|
@@ -818,6 +884,8 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
818
884
|
{ target: "togglingCollapse" },
|
|
819
885
|
],
|
|
820
886
|
expandPanel: [
|
|
887
|
+
// This will match if we can't expand and the expansion won't happen
|
|
888
|
+
{ guard: "cannotExpandPanel" },
|
|
821
889
|
{
|
|
822
890
|
actions: "notifyCollapseToggle",
|
|
823
891
|
guard: "shouldNotifyCollapseToggle",
|
|
@@ -890,6 +958,29 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
890
958
|
const panel = getPanelWithId(context, event.panelId);
|
|
891
959
|
return panel.collapseIsControlled === true;
|
|
892
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
|
+
},
|
|
893
984
|
},
|
|
894
985
|
actors: {
|
|
895
986
|
animation: animationActor,
|
|
@@ -929,11 +1020,14 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
929
1020
|
return context.items;
|
|
930
1021
|
},
|
|
931
1022
|
}),
|
|
932
|
-
updateSize: (0, xstate_1.
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
}
|
|
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
|
+
}
|
|
937
1031
|
}),
|
|
938
1032
|
recordActualItemSize: (0, xstate_1.assign)({
|
|
939
1033
|
items: ({ context, event }) => {
|
|
@@ -1075,9 +1169,12 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
1075
1169
|
for (const item of context.items) {
|
|
1076
1170
|
if (isPanelData(item)) {
|
|
1077
1171
|
const pixel = clampUnit(context, item, getUnitPixelValue(context, item.currentValue));
|
|
1172
|
+
const groupSize = getGroupSize(context);
|
|
1078
1173
|
item.onResize?.current?.({
|
|
1079
1174
|
pixel: pixel.toNumber(),
|
|
1080
|
-
percentage:
|
|
1175
|
+
percentage: groupSize > 0
|
|
1176
|
+
? pixel.div(getGroupSize(context)).toNumber()
|
|
1177
|
+
: -1,
|
|
1081
1178
|
});
|
|
1082
1179
|
}
|
|
1083
1180
|
}
|