@window-splitter/state 0.2.3 → 0.2.5
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 +2586 -1149
- package/CHANGELOG.md +29 -0
- package/README.md +119 -1
- package/dist/commonjs/index.d.ts +3 -6
- package/dist/commonjs/index.d.ts.map +1 -1
- package/dist/commonjs/index.js +7 -9
- package/dist/commonjs/index.js.map +1 -1
- package/dist/esm/index.d.ts +3 -6
- package/dist/esm/index.d.ts.map +1 -1
- package/dist/esm/index.js +7 -9
- package/dist/esm/index.js.map +1 -1
- package/package.json +12 -9
- package/src/index.ts +12 -16
- package/src/machine.test.ts +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,32 @@
|
|
|
1
|
+
# v0.2.5 (Thu Aug 15 2024)
|
|
2
|
+
|
|
3
|
+
#### ⚠️ Pushed to `main`
|
|
4
|
+
|
|
5
|
+
- add more docs to state machine + add defaults to params ([@hipstersmoothie](https://github.com/hipstersmoothie))
|
|
6
|
+
- fix repo/description ([@hipstersmoothie](https://github.com/hipstersmoothie))
|
|
7
|
+
- upgrade deps ([@hipstersmoothie](https://github.com/hipstersmoothie))
|
|
8
|
+
|
|
9
|
+
#### Authors: 1
|
|
10
|
+
|
|
11
|
+
- Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie))
|
|
12
|
+
|
|
13
|
+
---
|
|
14
|
+
|
|
15
|
+
# v0.2.4 (Thu Aug 15 2024)
|
|
16
|
+
|
|
17
|
+
#### 🐛 Bug Fix
|
|
18
|
+
|
|
19
|
+
- Fix conditional panel rendering [#22](https://github.com/hipstersmoothie/react-window-splitter/pull/22) ([@hipstersmoothie](https://github.com/hipstersmoothie))
|
|
20
|
+
- Fix conditional panel rendering ([@hipstersmoothie](https://github.com/hipstersmoothie))
|
|
21
|
+
- Fix default size throwing of responsive sizing [#21](https://github.com/hipstersmoothie/react-window-splitter/pull/21) ([@hipstersmoothie](https://github.com/hipstersmoothie))
|
|
22
|
+
- Fix default size throwing of responsive sizing ([@hipstersmoothie](https://github.com/hipstersmoothie))
|
|
23
|
+
|
|
24
|
+
#### Authors: 1
|
|
25
|
+
|
|
26
|
+
- Andrew Lisowski ([@hipstersmoothie](https://github.com/hipstersmoothie))
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
1
30
|
# v0.2.3 (Wed Aug 14 2024)
|
|
2
31
|
|
|
3
32
|
#### 🐛 Bug Fix
|
package/README.md
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
# `@window-splitter/state`
|
|
2
2
|
|
|
3
|
-
A state machine for
|
|
3
|
+
A state machine for a WAI-ARIA compliant window splitter.
|
|
4
|
+
This package can be used to build your own window splitter for a framework or even vanilla html/js.
|
|
5
|
+
|
|
6
|
+
If you're using a framework like React, you can use the `react-window-splitter` package instead.
|
|
4
7
|
|
|
5
8
|
[Read the full docs](https://react-window-splitter-six.vercel.app)
|
|
6
9
|
|
|
@@ -11,3 +14,118 @@ npm install @window-splitter/state
|
|
|
11
14
|
yarn add @window-splitter/state
|
|
12
15
|
pnpm add @window-splitter/state
|
|
13
16
|
```
|
|
17
|
+
|
|
18
|
+
## Usage
|
|
19
|
+
|
|
20
|
+
This is an example of how to use the machine to create a window splitter.
|
|
21
|
+
This is very simplified and only shows the basics of how to use the state machine.
|
|
22
|
+
Actually integrating with a framework would look a lot different.
|
|
23
|
+
|
|
24
|
+
In a vanilla html/js application you would have something like this:
|
|
25
|
+
|
|
26
|
+
```html
|
|
27
|
+
<div id="group">
|
|
28
|
+
<div id="panel-1">Panel-1</div>
|
|
29
|
+
<div id="resizer-1"></div>
|
|
30
|
+
<div id="panel-2">Panel-2</div>
|
|
31
|
+
</div>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
And then you would have some javascript to setup the state machine and send events to it.
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import {
|
|
38
|
+
groupMachine,
|
|
39
|
+
initializePanel,
|
|
40
|
+
initializePanelHandleData,
|
|
41
|
+
} from "@window-splitter/state";
|
|
42
|
+
import { createActor } from "xstate";
|
|
43
|
+
|
|
44
|
+
// Setup the state machine
|
|
45
|
+
const actor = createActor(groupMachine, {
|
|
46
|
+
input: { groupId: "group" },
|
|
47
|
+
}).start();
|
|
48
|
+
|
|
49
|
+
// Register the panels with the state machine
|
|
50
|
+
actor.send({
|
|
51
|
+
type: "registerPanel",
|
|
52
|
+
data: initializePanel({ id: "panel-1" }),
|
|
53
|
+
});
|
|
54
|
+
actor.send({
|
|
55
|
+
type: "registerPanelHandle",
|
|
56
|
+
data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
|
|
57
|
+
});
|
|
58
|
+
actor.send({
|
|
59
|
+
type: "registerPanel",
|
|
60
|
+
data: initializePanel({ id: "panel-2" }),
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
// Set the size of the group, typically measured in the browser after the initial render
|
|
64
|
+
actor.send({ type: "setSize", size: { width: 500, height: 200 } });
|
|
65
|
+
// The state machine relies on css grid to calculate the initial sizes of the panels
|
|
66
|
+
// This next action would be sent after measuring the initial sizes rendered by the browser
|
|
67
|
+
actor.send({
|
|
68
|
+
type: "setActualItemsSize",
|
|
69
|
+
childrenSizes: {
|
|
70
|
+
"panel-1": { width: 245, height: 200 },
|
|
71
|
+
"panel-2": { width: 245, height: 200 },
|
|
72
|
+
},
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
// Send some events to drag a handle
|
|
76
|
+
actor.send({ type: "dragHandleStart", handleId: "resizer-1" });
|
|
77
|
+
actor.send({
|
|
78
|
+
type: "dragHandle",
|
|
79
|
+
handleId: "resizer-1",
|
|
80
|
+
value: dragHandlePayload({ delta: 10 }),
|
|
81
|
+
});
|
|
82
|
+
actor.send({ type: "dragHandleEnd", handleId: "resizer-1" });
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## API
|
|
86
|
+
|
|
87
|
+
### `groupMachine`
|
|
88
|
+
|
|
89
|
+
The state machine is exported as `groupMachine` and can be used to create a window splitter.
|
|
90
|
+
|
|
91
|
+
#### `groupMachine.input`
|
|
92
|
+
|
|
93
|
+
The context of the state machine is an object with the following shape:
|
|
94
|
+
|
|
95
|
+
- `orientation`: The orientation of the group. This can be either `"horizontal"` or `"vertical"`
|
|
96
|
+
- `groupId`: The id of the group
|
|
97
|
+
- `initialItems`: An array of items to initialize the group with.
|
|
98
|
+
|
|
99
|
+
#### Events
|
|
100
|
+
|
|
101
|
+
For a full list of events and their payloads see the [source code](https://github.com/hipstersmoothie/react-window-splitter/blob/main/packages/state/src/index.ts).
|
|
102
|
+
|
|
103
|
+
- `registerPanel`: Register a new panel with the state machine
|
|
104
|
+
- `registerDynamicPanel`: Register a new panel after the initial render
|
|
105
|
+
- `unregisterPanel`: Unregister a panel from the state machine
|
|
106
|
+
- `registerPanelHandle`: Register a new panel handle with the state machine
|
|
107
|
+
- `unregisterPanelHandle`: Unregister a panel handle from the state machine
|
|
108
|
+
- `setSize`: Set the size of the group after the initial render
|
|
109
|
+
- `setActualItemsSize`: Set the size of the group items after the initial render
|
|
110
|
+
- `setOrientation`: Set the orientation of the group
|
|
111
|
+
- `dragHandleStart`: Start a drag interaction
|
|
112
|
+
- `dragHandle`: Update the layout according to how the handle moved
|
|
113
|
+
- `dragHandleEnd`: End a drag interaction
|
|
114
|
+
- `collapsePanel`: Collapse a panel
|
|
115
|
+
- `expandPanel`: Expand a panel
|
|
116
|
+
- `setPanelPixelSize`: Set the size of a panel in pixels
|
|
117
|
+
|
|
118
|
+
### Utilities
|
|
119
|
+
|
|
120
|
+
- `buildTemplate` - Build the grid template from the item values.
|
|
121
|
+
- `getCollapsiblePanelForHandleId` - Get the handle closest to the target panel.
|
|
122
|
+
- `getGroupSize` - Get the size of the group in pixels.
|
|
123
|
+
- `getPanelWithId` - Get a panel with a particular ID.
|
|
124
|
+
- `getUnitPercentageValue` - Converts a `Unit` to a percentage of the group size.
|
|
125
|
+
- `getUnitPixelValue` - Converts a `Unit` to a pixel value.
|
|
126
|
+
- `initializePanel` - Initialize a panel for registration with the state machine.
|
|
127
|
+
- `InitializePanelHandleData` - Initialize a panel handle for registration with the state machine.
|
|
128
|
+
- `isPanelData` - Check if the provided item is a panel data object.
|
|
129
|
+
- `isPanelHandle` - Check if the provided item is a panel handle object.
|
|
130
|
+
- `parseUnit` - Parse a `Unit` from a string.
|
|
131
|
+
- `prepareSnapshot` - For usage with restoring a saved layout state
|
package/dist/commonjs/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Snapshot } from "xstate";
|
|
2
2
|
import Big from "big.js";
|
|
3
|
-
type PixelUnit = `${number}px`;
|
|
4
|
-
type PercentUnit = `${number}%`;
|
|
3
|
+
export type PixelUnit = `${number}px`;
|
|
4
|
+
export type PercentUnit = `${number}%`;
|
|
5
5
|
export type Unit = PixelUnit | PercentUnit;
|
|
6
6
|
type Orientation = "horizontal" | "vertical";
|
|
7
7
|
interface ParsedPercentUnit {
|
|
@@ -200,8 +200,6 @@ export interface GroupMachineContextValue {
|
|
|
200
200
|
orientation: Orientation;
|
|
201
201
|
/** How much the drag has overshot the handle */
|
|
202
202
|
dragOvershoot: Big.Big;
|
|
203
|
-
/** An id to use for autosaving the layout */
|
|
204
|
-
autosaveId?: string;
|
|
205
203
|
groupId: string;
|
|
206
204
|
}
|
|
207
205
|
export type GroupMachineEvent = RegisterPanelEvent | RegisterDynamicPanelEvent | UnregisterPanelEvent | RegisterPanelHandleEvent | UnregisterPanelHandleEvent | DragHandleEvent | SetSizeEvent | SetOrientationEvent | DragHandleStartEvent | DragHandleEndEvent | CollapsePanelEvent | ExpandPanelEvent | SetPanelPixelSizeEvent | ApplyDeltaEvent | SetActualItemsSizeEvent;
|
|
@@ -305,7 +303,7 @@ export declare function prepareItems(context: GroupMachineContextValue): Item[];
|
|
|
305
303
|
export declare function commitLayout(context: GroupMachineContextValue): Item[];
|
|
306
304
|
export declare function dragHandlePayload({ delta, orientation, shiftKey, }: {
|
|
307
305
|
delta: number;
|
|
308
|
-
orientation
|
|
306
|
+
orientation?: Orientation;
|
|
309
307
|
shiftKey?: boolean;
|
|
310
308
|
}): {
|
|
311
309
|
readonly type: "move";
|
|
@@ -318,7 +316,6 @@ export declare function dragHandlePayload({ delta, orientation, shiftKey, }: {
|
|
|
318
316
|
readonly deltaY: number;
|
|
319
317
|
};
|
|
320
318
|
export declare const groupMachine: import("xstate").StateMachine<GroupMachineContextValue, RegisterPanelEvent | RegisterDynamicPanelEvent | UnregisterPanelEvent | RegisterPanelHandleEvent | UnregisterPanelHandleEvent | DragHandleStartEvent | DragHandleEvent | DragHandleEndEvent | SetSizeEvent | SetActualItemsSizeEvent | ApplyDeltaEvent | SetOrientationEvent | CollapsePanelEvent | ExpandPanelEvent | SetPanelPixelSizeEvent, Record<string, import("xstate").AnyActorRef>, import("xstate").ProvidedActor, import("xstate").ParameterizedObject, import("xstate").ParameterizedObject, string, import("xstate").StateValue, string, {
|
|
321
|
-
autosaveId?: string;
|
|
322
319
|
orientation?: Orientation;
|
|
323
320
|
groupId: string;
|
|
324
321
|
initialItems?: Item[];
|
|
@@ -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,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/commonjs/index.js
CHANGED
|
@@ -133,7 +133,9 @@ function initializePanelHandleData(item) {
|
|
|
133
133
|
return {
|
|
134
134
|
type: "handle",
|
|
135
135
|
...item,
|
|
136
|
-
size:
|
|
136
|
+
size: typeof item.size === "string"
|
|
137
|
+
? parseUnit(item.size)
|
|
138
|
+
: item.size,
|
|
137
139
|
};
|
|
138
140
|
}
|
|
139
141
|
/** Parse a `Unit` string or `clamp` value */
|
|
@@ -296,11 +298,6 @@ function getStaticWidth(context) {
|
|
|
296
298
|
item.currentValue.type === "pixel") {
|
|
297
299
|
width = width.add(item.currentValue.value);
|
|
298
300
|
}
|
|
299
|
-
else if (isPanelData(item) &&
|
|
300
|
-
item.default &&
|
|
301
|
-
item.default.type === "pixel") {
|
|
302
|
-
width = width.add(item.default.value);
|
|
303
|
-
}
|
|
304
301
|
}
|
|
305
302
|
return width;
|
|
306
303
|
}
|
|
@@ -605,7 +602,7 @@ function commitLayout(context) {
|
|
|
605
602
|
});
|
|
606
603
|
return newItems;
|
|
607
604
|
}
|
|
608
|
-
function dragHandlePayload({ delta, orientation, shiftKey = false, }) {
|
|
605
|
+
function dragHandlePayload({ delta, orientation = "horizontal", shiftKey = false, }) {
|
|
609
606
|
return {
|
|
610
607
|
type: "move",
|
|
611
608
|
pointerType: "keyboard",
|
|
@@ -717,7 +714,6 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
717
714
|
items: input.initialItems || [],
|
|
718
715
|
orientation: input.orientation || "horizontal",
|
|
719
716
|
dragOvershoot: new big_js_1.default(0),
|
|
720
|
-
autosaveId: input.autosaveId,
|
|
721
717
|
groupId: input.groupId,
|
|
722
718
|
}),
|
|
723
719
|
states: {
|
|
@@ -914,7 +910,9 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
914
910
|
assignPanelHandleData: (0, xstate_1.assign)({
|
|
915
911
|
items: ({ context, event }) => {
|
|
916
912
|
isEvent(event, ["registerPanelHandle"]);
|
|
917
|
-
const unit =
|
|
913
|
+
const unit = typeof event.data.size === "string"
|
|
914
|
+
? parseUnit(event.data.size)
|
|
915
|
+
: event.data.size;
|
|
918
916
|
return addDeDuplicatedItems(context.items, {
|
|
919
917
|
type: "handle",
|
|
920
918
|
...event.data,
|