@window-splitter/state 0.2.4 → 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 +14 -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 +4 -3
- 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 +4 -3
- package/dist/esm/index.js.map +1 -1
- package/package.json +12 -9
- package/src/index.ts +7 -8
- package/src/machine.test.ts +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
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
|
+
|
|
1
15
|
# v0.2.4 (Thu Aug 15 2024)
|
|
2
16
|
|
|
3
17
|
#### 🐛 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
|
@@ -104,7 +104,7 @@ interface UnregisterPanelEvent {
|
|
|
104
104
|
id: string;
|
|
105
105
|
}
|
|
106
106
|
export type InitializePanelHandleData = Omit<PanelHandleData, "type" | "size"> & {
|
|
107
|
-
size: PixelUnit
|
|
107
|
+
size: PixelUnit;
|
|
108
108
|
};
|
|
109
109
|
interface RegisterPanelHandleEvent {
|
|
110
110
|
/** Register a new panel handle with the state machine */
|
|
@@ -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;
|
|
@@ -230,7 +228,7 @@ type InitializePanelOptionsWithId = InitializePanelOptions & {
|
|
|
230
228
|
export declare function initializePanel(item: InitializePanelOptionsWithId): PanelData;
|
|
231
229
|
export declare function initializePanel(item: InitializePanelOptions): Omit<PanelData, "id">;
|
|
232
230
|
export declare function initializePanelHandleData(item: InitializePanelHandleData): {
|
|
233
|
-
size:
|
|
231
|
+
size: ParsedPixelUnit;
|
|
234
232
|
id: string;
|
|
235
233
|
order?: number | undefined;
|
|
236
234
|
type: "handle";
|
|
@@ -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":"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
|
|
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: typeof item.size === "string"
|
|
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 */
|
|
@@ -600,7 +602,7 @@ function commitLayout(context) {
|
|
|
600
602
|
});
|
|
601
603
|
return newItems;
|
|
602
604
|
}
|
|
603
|
-
function dragHandlePayload({ delta, orientation, shiftKey = false, }) {
|
|
605
|
+
function dragHandlePayload({ delta, orientation = "horizontal", shiftKey = false, }) {
|
|
604
606
|
return {
|
|
605
607
|
type: "move",
|
|
606
608
|
pointerType: "keyboard",
|
|
@@ -712,7 +714,6 @@ exports.groupMachine = (0, xstate_1.createMachine)({
|
|
|
712
714
|
items: input.initialItems || [],
|
|
713
715
|
orientation: input.orientation || "horizontal",
|
|
714
716
|
dragOvershoot: new big_js_1.default(0),
|
|
715
|
-
autosaveId: input.autosaveId,
|
|
716
717
|
groupId: input.groupId,
|
|
717
718
|
}),
|
|
718
719
|
states: {
|